@chronoter/main 0.1.11 → 0.2.0

package/dist/cli.js

@@ -8,6 +8,10 @@ import { visit } from 'unist-util-visit';
 import { compile } from '@mdx-js/mdx';
 import matter from 'gray-matter';
 import remarkGfm from 'remark-gfm';
+import rehypeSlug from 'rehype-slug';
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import GithubSlugger from 'github-slugger';
 import { fileURLToPath } from 'url';
 import { Command } from 'commander';
 import chalk2 from 'chalk';
@@ -237,12 +241,14 @@ var init_processor = __esm({
             throw new MDXError(`Failed to parse frontmatter: ${message}`, filePath);
           }
           const code = await this.compile(content, filePath, options?.baseUrl);
+          const headings = this.extractHeadings(content);
           const slug = this.generateSlug(filePath);
           const frontmatter = this.parseFrontmatter(data);
           return {
             code,
             frontmatter,
-            slug
+            slug,
+            headings
           };
         } catch (error) {
           if (error instanceof MDXError) {
@@ -295,7 +301,8 @@ var init_processor = __esm({
           const result = await compile(source, {
             outputFormat: "function-body",
             development: false,
-            remarkPlugins
+            remarkPlugins,
+            rehypePlugins: [rehypeSlug]
           });
           return String(result);
         } catch (error) {
@@ -320,6 +327,52 @@ var init_processor = __esm({
         const fileName = basename(filePath, extname(filePath));
         return fileName;
       }
+      /**
+       * Markdownコンテンツから見出しを抽出する
+       *
+       * @param content - Markdownコンテンツ
+       * @returns 見出しの配列（h2, h3のみ）
+       * @private
+       */
+      extractHeadings(content) {
+        const headings = [];
+        const slugger = new GithubSlugger();
+        try {
+          const tree = unified().use(remarkParse).parse(content);
+          visit(tree, "heading", (node) => {
+            if (node.depth === 2 || node.depth === 3) {
+              const text = this.extractTextFromNode(node.children);
+              const id = slugger.slug(text);
+              headings.push({
+                id,
+                text,
+                level: node.depth
+              });
+            }
+          });
+        } catch (error) {
+          console.warn("Failed to extract headings:", error);
+        }
+        return headings;
+      }
+      /**
+       * 見出しノードの子要素からテキストを抽出する
+       *
+       * @param children - 見出しノードの子要素
+       * @returns テキスト
+       * @private
+       */
+      extractTextFromNode(children) {
+        return children.map((child) => {
+          if (child.type === "text") {
+            return child.value;
+          }
+          if ("children" in child && Array.isArray(child.children)) {
+            return this.extractTextFromNode(child.children);
+          }
+          return "";
+        }).join("");
+      }
     };
   }
 });
@@ -446,16 +499,17 @@ var init_router = __esm({
       /**
        * ファイルパスからルートを作成
        *
-       * @param filePath - MDXまたはMDファイルのパス
-       * @param baseDir - ベースディレクトリパス
+       * @param filePath - MDXまたはMDファイルの絶対パス
+       * @param baseDir - ベースディレクトリパス（docsDir）
        * @returns 生成されたルート
        */
       async createRoute(filePath, baseDir) {
         const frontmatter = await this.extractFrontmatter(filePath);
         const urlPath = this.filePathToUrlPath(filePath, baseDir);
+        const relativeFilePath = path.relative(baseDir, filePath);
         return {
           path: urlPath,
-          filePath,
+          filePath: relativeFilePath,
           frontmatter
         };
       }
@@ -513,12 +567,17 @@ var routing_middleware_exports = {};
 __export(routing_middleware_exports, {
   createRoutingMiddleware: () => createRoutingMiddleware
 });
-var __filename$1, __dirname$1, createRoutingMiddleware, handleAllRoutesRequest, handleRouteRequest, handleMDXRequest, handle500;
+var __filename$1, __dirname$1, hasFileExtension, createRoutingMiddleware, handleAllRoutesRequest, handleRouteRequest, handleMDXRequest, handle500;
 var init_routing_middleware = __esm({
   "src/server/routing-middleware.ts"() {
     init_router();
     __filename$1 = fileURLToPath(import.meta.url);
     __dirname$1 = dirname(__filename$1);
+    hasFileExtension = (urlPath) => {
+      const lastSegment = urlPath.split("/").pop() || "";
+      const dotIndex = lastSegment.lastIndexOf(".");
+      return dotIndex > 0;
+    };
     createRoutingMiddleware = (server, options) => {
       const { config, cwd } = options;
       const routeGenerator = new RouteGenerator();
@@ -569,7 +628,8 @@ var init_routing_middleware = __esm({
         }
         const urlPath = url.split("?")[0];
         if (urlPath === "/__chronoter_mdx__") {
-          return handleMDXRequest(req, res, cwd);
+          const docsDir = config.docsDir ? resolve(cwd, config.docsDir) : cwd;
+          return handleMDXRequest(req, res, docsDir);
         }
         if (urlPath === "/__chronoter_routes__") {
           return handleRouteRequest(req, res, getRoutes, routeGenerator);
@@ -579,7 +639,7 @@ var init_routing_middleware = __esm({
         }
         if (urlPath.startsWith("/@") || // Vite内部リクエスト
         urlPath.startsWith("/node_modules") || urlPath.startsWith("/src/") || // Viteが処理するソースファイル
-        urlPath.includes(".") && !urlPath.endsWith("/") && !urlPath.startsWith("/src/")) {
+        hasFileExtension(urlPath) && !urlPath.endsWith("/") && !urlPath.startsWith("/src/")) {
           return next();
         }
         try {
@@ -689,7 +749,7 @@ var init_routing_middleware = __esm({
         );
       }
     };
-    handleMDXRequest = async (req, res, cwd) => {
+    handleMDXRequest = async (req, res, docsDir) => {
       try {
         const url = new URL(req.url || "", `http://${req.headers.host}`);
         const filePath = url.searchParams.get("path");
@@ -699,8 +759,8 @@ var init_routing_middleware = __esm({
           res.end(JSON.stringify({ error: "Missing 'path' query parameter" }));
           return;
         }
-        const absolutePath = resolve(cwd, filePath);
-        if (!absolutePath.startsWith(cwd)) {
+        const absolutePath = resolve(docsDir, filePath);
+        if (!absolutePath.startsWith(docsDir)) {
           res.statusCode = 403;
           res.setHeader("Content-Type", "application/json");
           res.end(JSON.stringify({ error: "Access denied" }));
@@ -715,7 +775,8 @@ var init_routing_middleware = __esm({
           JSON.stringify({
             code: processedMDX.code,
             frontmatter: processedMDX.frontmatter,
-            slug: processedMDX.slug
+            slug: processedMDX.slug,
+            headings: processedMDX.headings
           })
         );
       } catch (error) {
@@ -1665,7 +1726,7 @@ var runVersionCheck = async (packageName, currentVersion) => {
 
 // src/cli/index.ts
 var PACKAGE_NAME = "chronoter";
-var CURRENT_VERSION = "0.1.11";
+var CURRENT_VERSION = "0.2.0";
 var createCliProgram = () => {
   const program = new Command();
   program.name("chronoter").description("Chronoter - MDX-based documentation site generator").version(CURRENT_VERSION);

package/dist/index.js

@@ -7,6 +7,10 @@ import { visit } from 'unist-util-visit';
 import { compile } from '@mdx-js/mdx';
 import matter from 'gray-matter';
 import remarkGfm from 'remark-gfm';
+import rehypeSlug from 'rehype-slug';
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import GithubSlugger from 'github-slugger';
 import { fileURLToPath } from 'url';
 import chalk2 from 'chalk';
 import { defineConfig, createServer } from 'vite';
@@ -232,12 +236,14 @@ var init_processor = __esm({
             throw new MDXError(`Failed to parse frontmatter: ${message}`, filePath);
           }
           const code = await this.compile(content, filePath, options?.baseUrl);
+          const headings = this.extractHeadings(content);
           const slug = this.generateSlug(filePath);
           const frontmatter = this.parseFrontmatter(data);
           return {
             code,
             frontmatter,
-            slug
+            slug,
+            headings
           };
         } catch (error) {
           if (error instanceof MDXError) {
@@ -290,7 +296,8 @@ var init_processor = __esm({
           const result = await compile(source, {
             outputFormat: "function-body",
             development: false,
-            remarkPlugins
+            remarkPlugins,
+            rehypePlugins: [rehypeSlug]
           });
           return String(result);
         } catch (error) {
@@ -315,6 +322,52 @@ var init_processor = __esm({
         const fileName = basename(filePath, extname(filePath));
         return fileName;
       }
+      /**
+       * Markdownコンテンツから見出しを抽出する
+       *
+       * @param content - Markdownコンテンツ
+       * @returns 見出しの配列（h2, h3のみ）
+       * @private
+       */
+      extractHeadings(content) {
+        const headings = [];
+        const slugger = new GithubSlugger();
+        try {
+          const tree = unified().use(remarkParse).parse(content);
+          visit(tree, "heading", (node) => {
+            if (node.depth === 2 || node.depth === 3) {
+              const text = this.extractTextFromNode(node.children);
+              const id = slugger.slug(text);
+              headings.push({
+                id,
+                text,
+                level: node.depth
+              });
+            }
+          });
+        } catch (error) {
+          console.warn("Failed to extract headings:", error);
+        }
+        return headings;
+      }
+      /**
+       * 見出しノードの子要素からテキストを抽出する
+       *
+       * @param children - 見出しノードの子要素
+       * @returns テキスト
+       * @private
+       */
+      extractTextFromNode(children) {
+        return children.map((child) => {
+          if (child.type === "text") {
+            return child.value;
+          }
+          if ("children" in child && Array.isArray(child.children)) {
+            return this.extractTextFromNode(child.children);
+          }
+          return "";
+        }).join("");
+      }
     };
   }
 });
@@ -441,16 +494,17 @@ var init_router = __esm({
       /**
        * ファイルパスからルートを作成
        *
-       * @param filePath - MDXまたはMDファイルのパス
-       * @param baseDir - ベースディレクトリパス
+       * @param filePath - MDXまたはMDファイルの絶対パス
+       * @param baseDir - ベースディレクトリパス（docsDir）
        * @returns 生成されたルート
        */
       async createRoute(filePath, baseDir) {
         const frontmatter = await this.extractFrontmatter(filePath);
         const urlPath = this.filePathToUrlPath(filePath, baseDir);
+        const relativeFilePath = path.relative(baseDir, filePath);
         return {
           path: urlPath,
-          filePath,
+          filePath: relativeFilePath,
           frontmatter
         };
       }
@@ -508,12 +562,17 @@ var routing_middleware_exports = {};
 __export(routing_middleware_exports, {
   createRoutingMiddleware: () => createRoutingMiddleware
 });
-var __filename$1, __dirname$1, createRoutingMiddleware, handleAllRoutesRequest, handleRouteRequest, handleMDXRequest, handle500;
+var __filename$1, __dirname$1, hasFileExtension, createRoutingMiddleware, handleAllRoutesRequest, handleRouteRequest, handleMDXRequest, handle500;
 var init_routing_middleware = __esm({
   "src/server/routing-middleware.ts"() {
     init_router();
     __filename$1 = fileURLToPath(import.meta.url);
     __dirname$1 = dirname(__filename$1);
+    hasFileExtension = (urlPath) => {
+      const lastSegment = urlPath.split("/").pop() || "";
+      const dotIndex = lastSegment.lastIndexOf(".");
+      return dotIndex > 0;
+    };
     createRoutingMiddleware = (server, options) => {
       const { config, cwd } = options;
       const routeGenerator = new RouteGenerator();
@@ -564,7 +623,8 @@ var init_routing_middleware = __esm({
         }
         const urlPath = url.split("?")[0];
         if (urlPath === "/__chronoter_mdx__") {
-          return handleMDXRequest(req, res, cwd);
+          const docsDir = config.docsDir ? resolve(cwd, config.docsDir) : cwd;
+          return handleMDXRequest(req, res, docsDir);
         }
         if (urlPath === "/__chronoter_routes__") {
           return handleRouteRequest(req, res, getRoutes, routeGenerator);
@@ -574,7 +634,7 @@ var init_routing_middleware = __esm({
         }
         if (urlPath.startsWith("/@") || // Vite内部リクエスト
         urlPath.startsWith("/node_modules") || urlPath.startsWith("/src/") || // Viteが処理するソースファイル
-        urlPath.includes(".") && !urlPath.endsWith("/") && !urlPath.startsWith("/src/")) {
+        hasFileExtension(urlPath) && !urlPath.endsWith("/") && !urlPath.startsWith("/src/")) {
           return next();
         }
         try {
@@ -684,7 +744,7 @@ var init_routing_middleware = __esm({
         );
       }
     };
-    handleMDXRequest = async (req, res, cwd) => {
+    handleMDXRequest = async (req, res, docsDir) => {
       try {
         const url = new URL(req.url || "", `http://${req.headers.host}`);
         const filePath = url.searchParams.get("path");
@@ -694,8 +754,8 @@ var init_routing_middleware = __esm({
           res.end(JSON.stringify({ error: "Missing 'path' query parameter" }));
           return;
         }
-        const absolutePath = resolve(cwd, filePath);
-        if (!absolutePath.startsWith(cwd)) {
+        const absolutePath = resolve(docsDir, filePath);
+        if (!absolutePath.startsWith(docsDir)) {
           res.statusCode = 403;
           res.setHeader("Content-Type", "application/json");
           res.end(JSON.stringify({ error: "Access denied" }));
@@ -710,7 +770,8 @@ var init_routing_middleware = __esm({
           JSON.stringify({
             code: processedMDX.code,
             frontmatter: processedMDX.frontmatter,
-            slug: processedMDX.slug
+            slug: processedMDX.slug,
+            headings: processedMDX.headings
           })
         );
       } catch (error) {

package/dist/server/client/main.css

@@ -103,6 +103,8 @@
     --color-sidebar-accent-foreground: oklch(0.205 0 0);
     --color-sidebar-border: oklch(0.922 0 0);
     --color-sidebar-ring: oklch(0.708 0 0);
+    --color-sidebar-active: oklch(0.95 0.02 264);
+    --color-sidebar-active-foreground: oklch(58.42% 0.2274 263.02);
   }
 }
 @layer base {
@@ -378,6 +380,9 @@
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
+  .top-20 {
+    top: calc(var(--spacing) * 20);
+  }
   .top-\[1px\] {
     top: 1px;
   }
@@ -979,6 +984,9 @@
   .block {
     display: block;
   }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }
@@ -1142,6 +1150,9 @@
   .max-h-\[300px\] {
     max-height: 300px;
   }
+  .max-h-\[calc\(100vh-5rem\)\] {
+    max-height: calc(100vh - 5rem);
+  }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -1199,6 +1210,18 @@
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
+  .w-24 {
+    width: calc(var(--spacing) * 24);
+  }
+  .w-32 {
+    width: calc(var(--spacing) * 32);
+  }
+  .w-40 {
+    width: calc(var(--spacing) * 40);
+  }
+  .w-48 {
+    width: calc(var(--spacing) * 48);
+  }
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
@@ -1489,9 +1512,19 @@
   .gap-7 {
     gap: calc(var(--spacing) * 7);
   }
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
+  }
   .gap-\[--spacing\(var\(--gap\)\)\] {
     gap: calc(var(--spacing) * var(--gap));
   }
+  .space-y-1 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1499,6 +1532,13 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-3 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .gap-y-0\.5 {
     row-gap: calc(var(--spacing) * 0.5);
   }
@@ -1606,6 +1646,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-l-2 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 2px;
+  }
   .border-dashed {
     --tw-border-style: dashed;
     border-style: dashed;
@@ -1826,6 +1870,9 @@
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
+  .pl-7 {
+    padding-left: calc(var(--spacing) * 7);
+  }
   .pl-8 {
     padding-left: calc(var(--spacing) * 8);
   }
@@ -1838,6 +1885,9 @@
   .align-middle {
     vertical-align: middle;
   }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
   .font-sans {
     font-family: var(--font-sans);
   }
@@ -2789,6 +2839,16 @@
       border-bottom-width: 0px;
     }
   }
+  .hover\:border-muted-foreground\/40 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: color-mix(in srgb, oklch(56.41% 0.0194 285.88) 40%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-muted-foreground) 40%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-accent {
     &:hover {
       @media (hover: hover) {
@@ -3397,9 +3457,9 @@
       }
     }
   }
-  .data-\[active\=true\]\:bg-sidebar-accent {
+  .data-\[active\=true\]\:bg-sidebar-active {
     &[data-active=true] {
-      background-color: var(--color-sidebar-accent);
+      background-color: var(--color-sidebar-active);
     }
   }
   .data-\[active\=true\]\:font-medium {
@@ -3413,9 +3473,9 @@
       color: var(--color-accent-foreground);
     }
   }
-  .data-\[active\=true\]\:text-sidebar-accent-foreground {
+  .data-\[active\=true\]\:text-sidebar-active-foreground {
     &[data-active=true] {
-      color: var(--color-sidebar-accent-foreground);
+      color: var(--color-sidebar-active-foreground);
     }
   }
   .data-\[active\=true\]\:hover\:bg-accent {
@@ -4209,6 +4269,11 @@
       top: calc(var(--spacing) * 16);
     }
   }
+  .md\:top-\[5\.5rem\] {
+    @media (width >= 48rem) {
+      top: 5.5rem;
+    }
+  }
   .md\:block {
     @media (width >= 48rem) {
       display: block;
@@ -4229,6 +4294,11 @@
       height: calc(100svh - 4rem);
     }
   }
+  .md\:max-h-\[calc\(100vh-5\.5rem\)\] {
+    @media (width >= 48rem) {
+      max-height: calc(100vh - 5.5rem);
+    }
+  }
   .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
     @media (width >= 48rem) {
       width: var(--radix-navigation-menu-viewport-width);
@@ -4331,11 +4401,26 @@
       }
     }
   }
+  .lg\:top-24 {
+    @media (width >= 64rem) {
+      top: calc(var(--spacing) * 24);
+    }
+  }
+  .lg\:max-h-\[calc\(100vh-6rem\)\] {
+    @media (width >= 64rem) {
+      max-height: calc(100vh - 6rem);
+    }
+  }
   .lg\:p-8 {
     @media (width >= 64rem) {
       padding: calc(var(--spacing) * 8);
     }
   }
+  .xl\:block {
+    @media (width >= 80rem) {
+      display: block;
+    }
+  }
   .\@md\/field-group\:flex-row {
     @container field-group (width >= 28rem) {
       flex-direction: row;
@@ -5267,14 +5352,130 @@
     --color-sidebar-accent-foreground: oklch(0.985 0 0);
     --color-sidebar-border: oklch(1 0 0 / 10%);
     --color-sidebar-ring: oklch(0.439 0 0);
+    --color-sidebar-active: oklch(0.30 0.05 264);
+    --color-sidebar-active-foreground: oklch(67.17% 0.2174 263.71);
+  }
+}
+@layer base {
+  * {
+    border-color: var(--color-border);
   }
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+  }
+}
+.theme-blue {
+  --color-primary: oklch(58.42% 0.2274 263.02);
+  --color-primary-foreground: oklch(98.04% 0.0058 264.53);
+  --color-ring: oklch(58.42% 0.2274 263.02);
+  --color-sidebar-active: oklch(0.95 0.02 264);
+  --color-sidebar-active-foreground: oklch(58.42% 0.2274 263.02);
+}
+.theme-blue:where(.dark, .dark *) {
+  --color-primary: oklch(67.17% 0.2174 263.71);
+  --color-primary-foreground: oklch(20.09% 0.0211 285.88);
+  --color-ring: oklch(54.89% 0.2068 263.71);
+  --color-sidebar-active: oklch(0.30 0.05 264);
+  --color-sidebar-active-foreground: oklch(67.17% 0.2174 263.71);
+}
+.theme-violet {
+  --color-primary: oklch(58.42% 0.22 285);
+  --color-primary-foreground: oklch(98.04% 0.0058 285);
+  --color-ring: oklch(58.42% 0.22 285);
+  --color-sidebar-active: oklch(0.95 0.02 285);
+  --color-sidebar-active-foreground: oklch(58.42% 0.22 285);
+}
+.theme-violet:where(.dark, .dark *) {
+  --color-primary: oklch(67.17% 0.20 285);
+  --color-primary-foreground: oklch(20.09% 0.02 285);
+  --color-ring: oklch(54.89% 0.19 285);
+  --color-sidebar-active: oklch(0.30 0.05 285);
+  --color-sidebar-active-foreground: oklch(67.17% 0.20 285);
+}
+.theme-slate {
+  --color-primary: oklch(45% 0.03 250);
+  --color-primary-foreground: oklch(98% 0.005 250);
+  --color-ring: oklch(45% 0.03 250);
+  --color-sidebar-active: oklch(0.95 0.01 250);
+  --color-sidebar-active-foreground: oklch(45% 0.03 250);
+}
+.theme-slate:where(.dark, .dark *) {
+  --color-primary: oklch(70% 0.03 250);
+  --color-primary-foreground: oklch(20% 0.02 250);
+  --color-ring: oklch(55% 0.03 250);
+  --color-sidebar-active: oklch(0.30 0.02 250);
+  --color-sidebar-active-foreground: oklch(70% 0.03 250);
+}
+.theme-green {
+  --color-primary: oklch(60% 0.18 150);
+  --color-primary-foreground: oklch(98% 0.01 150);
+  --color-ring: oklch(60% 0.18 150);
+  --color-sidebar-active: oklch(0.95 0.03 150);
+  --color-sidebar-active-foreground: oklch(60% 0.18 150);
+}
+.theme-green:where(.dark, .dark *) {
+  --color-primary: oklch(70% 0.17 150);
+  --color-primary-foreground: oklch(20% 0.02 150);
+  --color-ring: oklch(55% 0.16 150);
+  --color-sidebar-active: oklch(0.30 0.05 150);
+  --color-sidebar-active-foreground: oklch(70% 0.17 150);
+}
+.theme-orange {
+  --color-primary: oklch(65% 0.18 50);
+  --color-primary-foreground: oklch(98% 0.01 50);
+  --color-ring: oklch(65% 0.18 50);
+  --color-sidebar-active: oklch(0.95 0.03 50);
+  --color-sidebar-active-foreground: oklch(65% 0.18 50);
+}
+.theme-orange:where(.dark, .dark *) {
+  --color-primary: oklch(72% 0.17 50);
+  --color-primary-foreground: oklch(20% 0.02 50);
+  --color-ring: oklch(58% 0.16 50);
+  --color-sidebar-active: oklch(0.30 0.05 50);
+  --color-sidebar-active-foreground: oklch(72% 0.17 50);
+}
+.theme-red {
+  --color-primary: oklch(60% 0.22 25);
+  --color-primary-foreground: oklch(98% 0.01 25);
+  --color-ring: oklch(60% 0.22 25);
+  --color-sidebar-active: oklch(0.95 0.03 25);
+  --color-sidebar-active-foreground: oklch(60% 0.22 25);
+}
+.theme-red:where(.dark, .dark *) {
+  --color-primary: oklch(68% 0.20 25);
+  --color-primary-foreground: oklch(20% 0.02 25);
+  --color-ring: oklch(55% 0.19 25);
+  --color-sidebar-active: oklch(0.30 0.05 25);
+  --color-sidebar-active-foreground: oklch(68% 0.20 25);
+}
+.theme-rose {
+  --color-primary: oklch(60% 0.20 350);
+  --color-primary-foreground: oklch(98% 0.01 350);
+  --color-ring: oklch(60% 0.20 350);
+  --color-sidebar-active: oklch(0.95 0.03 350);
+  --color-sidebar-active-foreground: oklch(60% 0.20 350);
+}
+.theme-rose:where(.dark, .dark *) {
+  --color-primary: oklch(68% 0.18 350);
+  --color-primary-foreground: oklch(20% 0.02 350);
+  --color-ring: oklch(55% 0.17 350);
+  --color-sidebar-active: oklch(0.30 0.05 350);
+  --color-sidebar-active-foreground: oklch(68% 0.18 350);
 }
-* {
-  border-color: var(--color-border);
+.theme-zinc {
+  --color-primary: oklch(50% 0 0);
+  --color-primary-foreground: oklch(98% 0 0);
+  --color-ring: oklch(50% 0 0);
+  --color-sidebar-active: oklch(0.95 0 0);
+  --color-sidebar-active-foreground: oklch(50% 0 0);
 }
-body {
-  background-color: var(--color-background);
-  color: var(--color-foreground);
+.theme-zinc:where(.dark, .dark *) {
+  --color-primary: oklch(70% 0 0);
+  --color-primary-foreground: oklch(20% 0 0);
+  --color-ring: oklch(55% 0 0);
+  --color-sidebar-active: oklch(0.30 0 0);
+  --color-sidebar-active-foreground: oklch(70% 0 0);
 }
 @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }