specra 0.1.13 → 0.2.0

package/dist/{styles.css → styles/globals.css}

@@ -1,11 +1,20 @@
 @import "tailwindcss";
 @import "tw-animate-css";
-
-/* src/styles/globals.css */
-@plugin "@tailwindcss/typography";
 @import "katex/dist/katex.min.css";
-@source "../**/*.{js,ts,jsx,tsx}";
+@plugin "@tailwindcss/typography";
+
+/* Scan SDK source files for Tailwind utilities */
+@source "../**/*.{js,ts,svelte}";
+
 @custom-variant dark (&:is(.dark *));
+
+/* Inter font for consistent typography matching the original design */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+@theme {
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
 :root {
   --background: oklch(0.99 0 0);
   --foreground: oklch(0.12 0 0);
@@ -13,6 +22,7 @@
   --card-foreground: oklch(0.12 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.12 0 0);
+  /* --primary: oklch(0.50 0.24 264.376); */
   --primary: oklch(27.025% 0.14091 290.376);
   --primary-foreground: oklch(0.99 0 0);
   --secondary: oklch(0.96 0 0);
@@ -41,7 +51,9 @@
   --sidebar-border: oklch(0.90 0 0);
   --sidebar-ring: oklch(0.50 0.24 264.376);
 }
+
 .dark {
+  /* Updated dark theme to match Vercel/Mintlify documentation aesthetic */
   --background: oklch(0.09 0 0);
   --foreground: oklch(0.98 0 0);
   --card: oklch(0.12 0 0);
@@ -74,224 +86,342 @@
   --sidebar-accent-foreground: oklch(0.98 0 0);
   --sidebar-border: oklch(0.22 0 0);
   --sidebar-ring: oklch(0.65 0.25 264.376);
+
+  /* Added custom tokens for code blocks */
   --code: oklch(0.75 0.15 264.376);
   --code-bg: oklch(0.12 0 0);
   --code-fg: oklch(0.92 0 0);
 }
-@theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --color-code: var(--code); --color-code-bg: var(--code-bg); --color-code-fg: var(--code-fg); }
+
+@theme inline {
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Added code color tokens */
+  --color-code: var(--code);
+  --color-code-bg: var(--code-bg);
+  --color-code-fg: var(--code-fg);
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
   }
+
   html {
     scroll-behavior: smooth;
+    /* Always reserve space for scrollbar to prevent layout shift */
     scrollbar-gutter: stable;
   }
+
   body {
     @apply bg-background text-foreground;
   }
+
   a {
     text-decoration: none;
   }
+
+  /* Link styling - primary color, no underline until hover */
   main .prose a {
     color: var(--color-primary);
     text-decoration: none;
     transition: color 0.2s ease, text-decoration 0.2s ease;
   }
+
   main .prose a:hover {
     text-decoration: none !important;
     color: var(--color-primary);
   }
+
+  /* Prose links in documentation */
   .prose a {
     color: var(--color-primary);
     text-decoration: none !important;
     font-weight: 500;
   }
+
   .prose a:hover {
     text-decoration: none !important;
     color: var(--color-primary);
   }
+
+  /* Sidebar links - no underline on hover */
   aside a {
     text-decoration: none;
   }
+
   aside a:hover {
     text-decoration: none;
   }
+
+  /* Card and ImageCard links - never underline */
   .image-card-link,
   .card-link {
     text-decoration: none !important;
   }
+
   .image-card-link:hover,
   .card-link:hover {
     text-decoration: none !important;
   }
+
   .image-card-link *,
   .card-link * {
     text-decoration: none !important;
   }
+
+  /* Custom scrollbar styling for body only */
   body::-webkit-scrollbar {
     width: 6px;
   }
+
   body::-webkit-scrollbar-track {
     background: oklch(0.95 0 0);
   }
+
   body::-webkit-scrollbar-thumb {
     background: oklch(0.75 0 0);
     border-radius: 6px;
     border: 2px solid oklch(0.95 0 0);
   }
+
   body::-webkit-scrollbar-thumb:hover {
     background: oklch(0.65 0 0);
   }
+
+  /* Dark mode body scrollbar */
   .dark body::-webkit-scrollbar-track {
     background: oklch(0.12 0 0);
   }
+
   .dark body::-webkit-scrollbar-thumb {
     background: oklch(0.25 0 0);
     border: 2px solid oklch(0.12 0 0);
   }
+
   .dark body::-webkit-scrollbar-thumb:hover {
     background: oklch(0.35 0 0);
   }
+
+  /* Firefox scrollbar for body only */
   body {
     scrollbar-width: thin;
     scrollbar-color: oklch(0.75 0 0) oklch(0.95 0 0);
   }
+
   .dark body {
     scrollbar-color: oklch(0.25 0 0) oklch(0.12 0 0);
   }
+
+  /* Sidebar scrollbar styling - thin and subtle */
   aside::-webkit-scrollbar,
   aside *::-webkit-scrollbar {
     width: 4px;
   }
+
   aside::-webkit-scrollbar-track,
   aside *::-webkit-scrollbar-track {
     background: transparent;
   }
+
   aside::-webkit-scrollbar-thumb,
   aside *::-webkit-scrollbar-thumb {
     background: oklch(0.7 0 0 / 0.3);
     border-radius: 4px;
   }
+
   aside::-webkit-scrollbar-thumb:hover,
   aside *::-webkit-scrollbar-thumb:hover {
     background: oklch(0.6 0 0 / 0.5);
   }
+
+  /* Dark mode sidebar scrollbar */
   .dark aside::-webkit-scrollbar-thumb,
   .dark aside *::-webkit-scrollbar-thumb {
     background: oklch(0.5 0 0 / 0.3);
   }
+
   .dark aside::-webkit-scrollbar-thumb:hover,
   .dark aside *::-webkit-scrollbar-thumb:hover {
     background: oklch(0.6 0 0 / 0.5);
   }
+
+  /* Firefox sidebar scrollbar */
   aside,
   aside * {
     scrollbar-width: thin;
     scrollbar-color: oklch(0.7 0 0 / 0.3) transparent;
   }
+
   .dark aside,
   .dark aside * {
     scrollbar-color: oklch(0.5 0 0 / 0.3) transparent;
   }
+
+  /* Light mode syntax highlighting - VS Code Light+ theme */
   .token-comment {
     color: #008000;
     font-style: italic;
   }
+
   .token-string {
     color: #a31515;
   }
+
   .token-keyword {
     color: #0000ff;
     font-weight: 600;
   }
+
   .token-number {
     color: #098658;
   }
+
   .token-function {
     color: #795e26;
   }
+
   .token-operator {
     color: #000000;
   }
+
   .token-property {
     color: #001080;
   }
+
   .token-punctuation {
     color: #000000;
   }
+
   .token-text {
     color: #000000;
   }
+
+  /* Dark mode syntax highlighting - VS Code Dark+ theme */
   .dark .token-comment {
     color: #6a9955;
   }
+
   .dark .token-string {
     color: #ce9178;
   }
+
   .dark .token-keyword {
     color: #569cd6;
   }
+
   .dark .token-number {
     color: #b5cea8;
   }
+
   .dark .token-function {
     color: #dcdcaa;
   }
+
   .dark .token-operator {
     color: #d4d4d4;
   }
+
   .dark .token-property {
     color: #9cdcfe;
   }
+
   .dark .token-punctuation {
     color: #d4d4d4;
   }
+
   .dark .token-text {
     color: #d4d4d4;
   }
 }
+
+
 pre code {
   background: none;
   border: none;
 }
+
+/* Heading styles - lighter weight and reduced margins */
 .prose h1 {
   font-weight: 700;
   margin-top: 1.5rem;
   margin-bottom: 0.75rem;
 }
+
 .prose h2 {
   font-weight: 600;
   margin-top: 2rem;
   margin-bottom: 0.75rem;
 }
+
 .prose h3 {
   font-weight: 600;
   margin-top: 1.5rem;
   margin-bottom: 0.5rem;
 }
+
 .prose h4 {
   font-weight: 600;
   margin-top: 1.25rem;
   margin-bottom: 0.5rem;
 }
+
 .prose h5 {
   font-weight: 500;
   margin-top: 1rem;
   margin-bottom: 0.5rem;
 }
+
 .prose h6 {
   font-weight: 500;
   margin-top: 1rem;
   margin-bottom: 0.5rem;
 }
+
+/* Paragraph styles - reduced margins */
 .prose p {
   margin-top: 0.5rem;
   margin-bottom: 0.75rem;
 }
+
 html body[data-scroll-locked] {
   overflow: visible !important;
   margin-right: 0 !important;
   padding-right: 0 !important;
 }
-/*# sourceMappingURL=styles.css.map */

package/dist/toc.d.ts

@@ -0,0 +1,9 @@
+export interface TOCItem {
+    id: string;
+    title: string;
+    level: number;
+}
+/**
+ * Extract headings from HTML string for table of contents
+ */
+export declare function extractHeadings(html: string): TOCItem[];

package/dist/toc.js

@@ -0,0 +1,15 @@
+/**
+ * Extract headings from HTML string for table of contents
+ */
+export function extractHeadings(html) {
+    const headingRegex = /<h([2-3])[^>]*id="([^"]*)"[^>]*>(.*?)<\/h\1>/g;
+    const toc = [];
+    let match;
+    while ((match = headingRegex.exec(html)) !== null) {
+        const level = Number.parseInt(match[1]);
+        const id = match[2];
+        const title = match[3].replace(/<[^>]*>/g, ""); // Strip HTML tags
+        toc.push({ id, title, level });
+    }
+    return toc;
+}

package/dist/utils.d.ts

@@ -0,0 +1,13 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Get the correct asset path based on deployment configuration
+ * Handles different deployment scenarios:
+ * - Vercel/Node.js hosting (standalone build): No basePath needed
+ * - GitHub Pages without custom domain: Uses basePath from config
+ * - Static hosting with custom domain: No basePath needed
+ *
+ * @param path - The asset path (can start with or without '/')
+ * @returns The properly formatted asset path
+ */
+export declare function getAssetPath(path: string): string;

package/dist/utils.js

@@ -0,0 +1,30 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+/**
+ * Get the correct asset path based on deployment configuration
+ * Handles different deployment scenarios:
+ * - Vercel/Node.js hosting (standalone build): No basePath needed
+ * - GitHub Pages without custom domain: Uses basePath from config
+ * - Static hosting with custom domain: No basePath needed
+ *
+ * @param path - The asset path (can start with or without '/')
+ * @returns The properly formatted asset path
+ */
+export function getAssetPath(path) {
+    // Get basePath from Next.js config (set during build for static exports)
+    const basePath = process.env.NEXT_PUBLIC_BASE_PATH || process.env.__NEXT_ROUTER_BASEPATH || '';
+    // Normalize the input path: ensure it starts with '/'
+    const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+    // If we have a basePath (GitHub Pages without custom domain), prepend it
+    if (basePath) {
+        // Normalize basePath: remove trailing slash, ensure leading slash
+        const normalizedBase = basePath.startsWith('/') ? basePath : `/${basePath}`;
+        const cleanBase = normalizedBase.replace(/\/$/, '');
+        return `${cleanBase}${normalizedPath}`;
+    }
+    // Default: return the normalized path (works for Vercel, custom domains, and dev)
+    return normalizedPath;
+}

package/package.json

@@ -1,152 +1,109 @@
 {
   "name": "specra",
-  "version": "0.1.13",
-  "description": "A modern documentation library for Next.js with built-in versioning, API reference generation, full-text search, and MDX support",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "version": "0.2.0",
+  "description": "A modern documentation library for SvelteKit with built-in versioning, API reference generation, full-text search, and MDX support",
+  "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
-    "./app/layout": {
-      "types": "./dist/app/layout.d.ts",
-      "import": "./dist/app/layout.mjs",
-      "require": "./dist/app/layout.js"
-    },
-    "./app/docs-page": {
-      "types": "./dist/app/docs-page.d.ts",
-      "import": "./dist/app/docs-page.mjs",
-      "require": "./dist/app/docs-page.js"
-    },
-    "./app/api/mdx-watch": {
-      "types": "./dist/app/api/mdx-watch/route.d.ts",
-      "import": "./dist/app/api/mdx-watch/route.mjs",
-      "require": "./dist/app/api/mdx-watch/route.js"
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
     },
     "./components": {
       "types": "./dist/components/index.d.ts",
-      "import": "./dist/components/index.mjs",
-      "require": "./dist/components/index.js"
-    },
-    "./layouts": {
-      "types": "./dist/layouts/index.d.ts",
-      "import": "./dist/layouts/index.mjs",
-      "require": "./dist/layouts/index.js"
+      "svelte": "./dist/components/index.js",
+      "import": "./dist/components/index.js"
     },
-    "./mdx-components": {
-      "types": "./dist/mdx-components.d.ts",
-      "import": "./dist/mdx-components.mjs",
-      "require": "./dist/mdx-components.js"
+    "./stores": {
+      "types": "./dist/stores/index.d.ts",
+      "svelte": "./dist/stores/index.js",
+      "import": "./dist/stores/index.js"
     },
     "./lib": {
       "types": "./dist/lib/index.d.ts",
-      "import": "./dist/lib/index.mjs",
-      "require": "./dist/lib/index.js"
+      "import": "./dist/lib/index.js"
+    },
+    "./svelte-config": {
+      "import": "./config/svelte-config.js"
     },
     "./middleware/security": {
       "types": "./dist/middleware/security.d.ts",
-      "import": "./dist/middleware/security.mjs",
-      "require": "./dist/middleware/security.js"
-    },
-    "./next-config": {
-      "import": "./config/next-config.mjs"
-    },
-    "./next-config/default": {
-      "import": "./config/next.config.default.mjs"
-    },
-    "./next-config/export": {
-      "import": "./config/next.config.export.mjs"
+      "import": "./dist/middleware/security.js"
     },
-    "./styles": "./dist/styles.css",
-    "./styles.css": "./dist/styles.css",
+    "./styles": "./dist/styles/globals.css",
+    "./styles.css": "./dist/styles/globals.css",
     "./config.schema.json": "./config/specra.config.schema.json"
   },
   "files": [
     "dist",
-    "config",
-    "README.md"
+    "config"
   ],
   "scripts": {
-    "build": "rm -rf dist && npm run generate:schema && tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
+    "build": "rm -rf dist && npm run generate:schema && svelte-kit sync && svelte-package",
+    "dev": "svelte-package --watch",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json",
     "generate:schema": "ts-json-schema-generator --path src/lib/config.types.ts --type SpecraConfig --out config/specra.config.schema.json"
   },
   "keywords": [
     "documentation",
     "docs",
-    "nextjs",
+    "sveltekit",
+    "svelte",
     "mdx",
     "api-reference",
     "versioning",
     "search"
   ],
   "author": "dalmasonto, arthur-kamau",
-  "license": "MIT",
+  "license": "SEE LICENSE IN LICENSE.MD",
   "repository": {
     "type": "git",
     "url": "https://github.com/dalmasonto/specra"
   },
   "peerDependencies": {
-    "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "@sveltejs/kit": "^2.0.0",
+    "svelte": "^5.0.0"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.10.0",
-    "@radix-ui/react-accordion": "^1.2.2",
-    "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-collapsible": "^1.1.2",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-scroll-area": "^1.2.2",
-    "@radix-ui/react-select": "^2.1.4",
-    "@radix-ui/react-separator": "^1.1.1",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-toast": "^1.2.4",
-    "@radix-ui/react-toggle": "^1.1.10",
-    "@radix-ui/react-tooltip": "^1.2.1",
+    "bits-ui": "^1.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1.0.4",
     "date-fns": "^4.1.0",
-    "embla-carousel-react": "^8.5.1",
+    "embla-carousel-svelte": "^8.5.1",
     "gray-matter": "^4.0.3",
     "katex": "^0.16.27",
-    "lucide-react": "^0.454.0",
+    "lucide-svelte": "^0.454.0",
+    "mdsvex": "^0.12.0",
     "meilisearch": "^0.54.0",
-    "mermaid": "^10.9.5",
-    "next-mdx-remote": "^5.0.0",
-    "next-themes": "^0.4.6",
-    "react-hook-form": "^7.60.0",
-    "react-markdown": "^9.0.1",
-    "recharts": "^2.15.4",
+    "mermaid": "^11.12.2",
+    "mode-watcher": "^0.5.0",
+    "hast-util-to-html": "^9.0.0",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
     "rehype-slug": "^6.0.0",
+    "rehype-stringify": "^10.0.1",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
-    "sonner": "^1.7.4",
+    "remark-rehype": "^11.1.2",
+    "svelte-sonner": "^0.3.28",
     "tailwind-merge": "^2.6.0",
     "tailwindcss": "^4.1.18",
-    "tailwindcss-animate": "^1.0.7",
     "tw-animate-css": "^1.4.0",
     "zod": "^3.25.76"
   },
   "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^6.0.0",
     "@types/node": "^22",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "next": "^16.1.0",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
     "ts-json-schema-generator": "^2.4.0",
-    "tsup": "^8.3.5",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vite": "^6.3.0"
   }
 }

package/dist/app/api/mdx-watch/route.d.mts

@@ -1,10 +0,0 @@
-declare const dynamic = "error";
-declare const runtime = "nodejs";
-/**
- * API route for watching MDX file changes in development
- * Provides Server-Sent Events (SSE) stream for hot reloading
- * Only available in development mode
- */
-declare function GET(): Promise<Response>;
-
-export { GET, dynamic, runtime };

package/dist/app/api/mdx-watch/route.d.ts

@@ -1,10 +0,0 @@
-declare const dynamic = "error";
-declare const runtime = "nodejs";
-/**
- * API route for watching MDX file changes in development
- * Provides Server-Sent Events (SSE) stream for hot reloading
- * Only available in development mode
- */
-declare function GET(): Promise<Response>;
-
-export { GET, dynamic, runtime };