skrypt-ai 0.3.4 → 0.4.0

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

@@ -1,88 +1,151 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Skip-to-content link — visible on focus only */
+.skip-to-content {
+  position: absolute;
+  left: -9999px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  z-index: 9999;
+}
+.skip-to-content:focus {
+  position: fixed;
+  top: 0.5rem;
+  left: 0.5rem;
+  width: auto;
+  height: auto;
+  overflow: visible;
+  padding: 0.5rem 1rem;
+  background: var(--color-primary);
+  color: var(--color-primary-foreground);
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-decoration: none;
+}
+
 @theme {
-  /* Colors - using semi-transparent borders like Next.js/Stripe/Fumadocs */
+  /* Primary — configurable per project via docs.json */
   --color-primary: #3b82f6;
   --color-primary-dark: #2563eb;
-  --color-primary-light: rgba(59, 130, 246, 0.1);
-  --color-accent: #8b5cf6;
-
-  /* Background */
+  --color-primary-light: #60a5fa;
+  --color-primary-foreground: #ffffff;
+
+  /* Gray scale (Mintlify-style, subtle warm undertone) */
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-gray-950: #030712;
+
+  /* Semantic tokens — light mode defaults */
   --color-bg: #ffffff;
   --color-bg-secondary: #f9fafb;
   --color-bg-tertiary: #f3f4f6;
-
-  /* Text */
   --color-text: #111827;
-  --color-text-secondary: #4b5563;
+  --color-text-secondary: #374151;
   --color-text-tertiary: #9ca3af;
-
-  /* Border - semi-transparent for premium feel */
-  --color-border: rgba(0, 0, 0, 0.08);
-  --color-border-strong: rgba(0, 0, 0, 0.15);
+  --color-border: rgba(3, 7, 18, 0.1);
+  --color-border-strong: rgba(3, 7, 18, 0.15);
 
   /* Code */
-  --color-code-bg: #0a0a0a;
-  --color-code-text: #e5e7eb;
+  --color-code-bg: #ffffff;
+  --color-code-border: rgba(3, 7, 18, 0.1);
+  --color-code-text: #1f2937;
 
   /* Layout */
-  --sidebar-width: 272px;
+  --sidebar-width: 264px;
   --toc-width: 224px;
-  --header-height: 64px;
+  --header-height: 56px;
   --content-max-width: 768px;
+  --radius: 1rem;
 }
 
-/* Dark mode - supports both system preference and manual toggle */
+/* ========================
+   Dark Mode
+   ======================== */
+
 @media (prefers-color-scheme: dark) {
   :root:not(.light) {
-    --color-bg: #0a0a0a;
-    --color-bg-secondary: #141414;
-    --color-bg-tertiary: #1f1f1f;
-    --color-text: #fafafa;
-    --color-text-secondary: #a1a1aa;
-    --color-text-tertiary: #71717a;
-    --color-border: rgba(255, 255, 255, 0.08);
-    --color-border-strong: rgba(255, 255, 255, 0.15);
-    --color-primary-light: rgba(59, 130, 246, 0.15);
-    --color-code-bg: #0a0a0a;
-    --color-code-text: #e5e7eb;
+    --color-bg: #0f1117;
+    --color-bg-secondary: #1a1d27;
+    --color-bg-tertiary: #252833;
+    --color-text: #f3f4f6;
+    --color-text-secondary: #d1d5db;
+    --color-text-tertiary: #6b7280;
+    --color-border: rgba(255, 255, 255, 0.07);
+    --color-border-strong: rgba(255, 255, 255, 0.12);
+    --color-code-bg: #0b0c0e;
+    --color-code-border: rgba(255, 255, 255, 0.1);
+    --color-code-text: #f3f4f6;
   }
 }
 
-/* Manual dark mode override */
 :root.dark {
-  --color-bg: #0a0a0a;
-  --color-bg-secondary: #141414;
-  --color-bg-tertiary: #1f1f1f;
-  --color-text: #fafafa;
-  --color-text-secondary: #a1a1aa;
-  --color-text-tertiary: #71717a;
-  --color-border: rgba(255, 255, 255, 0.08);
-  --color-border-strong: rgba(255, 255, 255, 0.15);
-  --color-primary-light: rgba(59, 130, 246, 0.15);
-  --color-code-bg: #0a0a0a;
-  --color-code-text: #e5e7eb;
+  --color-bg: #0f1117;
+  --color-bg-secondary: #1a1d27;
+  --color-bg-tertiary: #252833;
+  --color-text: #f3f4f6;
+  --color-text-secondary: #d1d5db;
+  --color-text-tertiary: #6b7280;
+  --color-border: rgba(255, 255, 255, 0.07);
+  --color-border-strong: rgba(255, 255, 255, 0.12);
+  --color-code-bg: #0b0c0e;
+  --color-code-border: rgba(255, 255, 255, 0.1);
+  --color-code-text: #f3f4f6;
+}
+
+/* Error page icon — dark mode overrides (avoids Tailwind dark: variant mismatch) */
+:root.dark .error-icon-bg { background-color: rgba(127, 29, 29, 0.3); }
+:root.dark .error-icon-text { color: #f87171; }
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) .error-icon-bg { background-color: rgba(127, 29, 29, 0.3); }
+  :root:not(.light) .error-icon-text { color: #f87171; }
+}
+
+/* Feedback thumbs — dark mode overrides */
+:root.dark .feedback-positive { background-color: rgba(6, 95, 70, 0.3); color: #34d399; }
+:root.dark .feedback-negative { background-color: rgba(127, 29, 29, 0.3); color: #f87171; }
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) .feedback-positive { background-color: rgba(6, 95, 70, 0.3); color: #34d399; }
+  :root:not(.light) .feedback-negative { background-color: rgba(127, 29, 29, 0.3); color: #f87171; }
 }
 
 /* ========================
-   Base & Reset
+   Base — in @layer base so Tailwind utilities can override
    ======================== */
 
+@layer base {
+
 html {
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overscroll-behavior-y: none;
+  line-height: 1.5;
 }
 
 body {
   background-color: var(--color-bg);
   color: var(--color-text);
-  font-feature-settings: "rlig" 1, "calt" 1;
+  font-family: var(--font-body, "Inter", ui-sans-serif, system-ui, sans-serif);
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-size: 15px;
 }
 
-/* Global transitions for interactive elements */
+/* Global transitions — 150ms on interactive elements */
 a, button, input, select, textarea {
-  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
+  transition: color 150ms, background-color 150ms, border-color 150ms, opacity 150ms;
 }
 
 ::selection {
@@ -90,51 +153,31 @@ a, button, input, select, textarea {
   color: white;
 }
 
+/* Links — inherit color by default, primary in prose */
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
 /* ========================
    Typography
    ======================== */
 
 h1, h2, h3, h4, h5, h6 {
   color: var(--color-text);
-  font-weight: 700;
   line-height: 1.2;
-  letter-spacing: -0.02em;
+  letter-spacing: -0.025em;
 }
 
-h1 {
-  font-size: 2.25rem;
-  letter-spacing: -0.03em;
-}
+h1 { font-size: 2.25em; font-weight: 800; }
+h2 { font-size: 1.5em; font-weight: 700; margin-top: 2em; margin-bottom: 0.6667em; }
+h3 { font-size: 1.25em; font-weight: 600; margin-top: 2.4em; margin-bottom: 0.6em; }
+h4 { font-size: 1.125em; font-weight: 600; margin-top: 2em; margin-bottom: 0.5em; }
 
-h2 {
-  font-size: 1.5rem;
-  margin-top: 2.5rem;
-  padding-bottom: 0.75rem;
-  border-bottom: 1px solid var(--color-border);
-}
-
-h3 {
-  font-size: 1.25rem;
-  margin-top: 2rem;
-}
-
-h4 {
-  font-size: 1.0625rem;
-  margin-top: 1.5rem;
-}
-
-/* ========================
-   Links
-   ======================== */
-
-a {
-  color: var(--color-primary);
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-  text-underline-offset: 2px;
+@media (max-width: 640px) {
+  h1 { font-size: 1.75em; }
+  h2 { font-size: 1.25em; }
+  h3 { font-size: 1.125em; }
 }
 
 /* ========================
@@ -143,27 +186,47 @@ a:hover {
 
 pre {
   background-color: var(--color-code-bg) !important;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-code-border);
   border-radius: 0.75rem;
-  padding: 1rem 1.25rem;
+  padding: 0.875rem 1rem;
   overflow-x: auto;
-  font-size: 0.8125rem;
-  line-height: 1.7;
+  font-size: 0.875em;
+  line-height: 1.7142857;
+}
+
+/* Prevent FOUC: code blocks get the right bg before Shiki loads */
+.shiki, .shiki pre {
+  background-color: var(--color-code-bg) !important;
 }
 
 code {
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-  font-size: 0.8125rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 0.875em;
+  font-variant-ligatures: none;
 }
 
-/* Inline code */
+/* Inline code — Mintlify style */
 :not(pre) > code {
-  background-color: var(--color-bg-tertiary);
-  border: 1px solid var(--color-border);
-  padding: 0.125rem 0.375rem;
+  background-color: var(--color-gray-100);
+  padding: 0.125rem 0.5rem;
   border-radius: 0.375rem;
-  font-size: 0.8125em;
-  font-weight: 500;
+  font-size: 0.875em;
+  line-height: 1.5;
+  color: var(--color-gray-600);
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+:root.dark :not(pre) > code {
+  background-color: rgba(255, 255, 255, 0.05);
+  color: var(--color-gray-200);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) :not(pre) > code {
+    background-color: rgba(255, 255, 255, 0.05);
+    color: var(--color-gray-200);
+  }
 }
 
 /* ========================
@@ -173,152 +236,230 @@ code {
 .prose {
   max-width: var(--content-max-width);
   line-height: 1.75;
+  color: var(--color-text-secondary);
+}
+
+.prose a {
   color: var(--color-text);
+  font-weight: 600;
+  text-decoration: none;
+  border-bottom: 1px solid var(--color-primary);
+  transition: border-color 150ms, border-bottom-width 150ms;
+}
+
+.prose a:hover {
+  border-bottom-width: 2px;
 }
 
 .prose p {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-  color: var(--color-text-secondary);
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
 }
 
-.prose > p:first-child {
-  font-size: 1.125rem;
-  line-height: 1.75;
-  color: var(--color-text-secondary);
+/* Page header description is handled by PageHeader component */
+
+.prose strong {
+  font-weight: 600;
+  color: var(--color-text);
 }
 
+/* Lists */
 .prose ul, .prose ol {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  margin-top: 1em;
+  margin-bottom: 1em;
   padding-left: 1.5rem;
 }
 
-.prose ul {
-  list-style-type: disc;
-}
-
-.prose ol {
-  list-style-type: decimal;
-}
+.prose ul { list-style-type: disc; }
+.prose ol { list-style-type: decimal; }
 
 .prose li {
-  margin-top: 0.375rem;
-  margin-bottom: 0.375rem;
-  color: var(--color-text-secondary);
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
 }
 
 .prose li::marker {
   color: var(--color-text-tertiary);
 }
 
-/* Tables - clean Stripe-style, no alternating rows */
+/* Headings in prose */
+.prose h1, .prose h2, .prose h3, .prose h4 {
+  color: var(--color-text);
+}
+
+.prose h2 a, .prose h3 a, .prose h4 a {
+  color: inherit;
+  border-bottom: none;
+  font-weight: inherit;
+}
+
+.prose h2 a:hover, .prose h3 a:hover, .prose h4 a:hover {
+  border-bottom: none;
+}
+
+/* Tables — Mintlify style: clean, minimal */
 .prose table {
   width: 100%;
   border-collapse: collapse;
-  margin: 1.5rem 0;
+  margin: 1.5em 0;
   font-size: 0.875rem;
+  line-height: 1.5;
   display: table;
+  table-layout: auto;
 }
 
-.prose thead {
-  display: table-header-group;
-}
+.prose thead { display: table-header-group; }
+.prose tbody { display: table-row-group; }
+.prose tr { display: table-row; }
 
-.prose tbody {
-  display: table-row-group;
+.prose th {
+  display: table-cell;
+  font-weight: 600;
+  color: var(--color-text);
+  vertical-align: bottom;
+  padding: 0.625rem 1rem 0.625rem 0;
+  text-align: left;
+  white-space: nowrap;
+  border-bottom: 1px solid var(--color-border-strong);
 }
 
-.prose tr {
-  display: table-row;
-  border-bottom: 1px solid var(--color-border);
-  transition: background-color 150ms ease;
-}
+.prose th:last-child { padding-right: 0; }
 
-.prose th, .prose td {
-  padding: 0.75rem 1rem;
-  text-align: left;
+.prose td {
   display: table-cell;
   vertical-align: top;
+  color: var(--color-text-secondary);
+  padding: 0.75rem 1rem 0.75rem 0;
 }
 
-.prose th {
-  font-weight: 600;
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-text-tertiary);
-  border-bottom: 2px solid var(--color-border-strong);
-}
+.prose td:last-child { padding-right: 0; }
 
-.prose td {
-  color: var(--color-text-secondary);
+/* Inline code inside table cells should never wrap */
+.prose td code, .prose th code {
+  white-space: nowrap;
+  word-break: normal;
+  overflow-wrap: normal;
 }
 
-.prose tbody tr:hover {
-  background-color: var(--color-bg-secondary);
+.prose tbody tr {
+  border-bottom: 1px solid var(--color-border);
 }
 
 /* Blockquotes */
 .prose blockquote {
-  border-left: 3px solid var(--color-primary);
-  padding: 0.5rem 0 0.5rem 1.25rem;
-  margin: 1.5rem 0;
+  border-left: 3px solid var(--color-border-strong);
+  padding: 0.5em 0 0.5em 1.25em;
+  margin: 1.5em 0;
   color: var(--color-text-secondary);
 }
 
-.prose blockquote p {
-  margin: 0;
-}
+.prose blockquote p { margin: 0; }
 
 /* Horizontal rules */
 .prose hr {
   border: none;
   border-top: 1px solid var(--color-border);
-  margin: 2.5rem 0;
+  margin: 3em 0;
 }
 
 /* Images */
 .prose img {
   max-width: 100%;
   border-radius: 0.75rem;
-  border: 1px solid var(--color-border);
-  margin: 1.5rem 0;
+  margin: 2em 0;
 }
 
-.prose strong {
-  font-weight: 600;
-  color: var(--color-text);
+/* ========================
+   Scrollbar (Mintlify style — thin, subtle)
+   ======================== */
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
 }
 
-/* Heading anchor links */
-.prose h2 a, .prose h3 a, .prose h4 a {
-  color: inherit;
-  text-decoration: none;
+:root.dark * {
+  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
 }
 
-.prose h2 a:hover, .prose h3 a:hover, .prose h4 a:hover {
-  text-decoration: none;
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) * {
+    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+  }
+  :root:not(.light) ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); }
+  :root:not(.light) ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }
 }
 
+:root.dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); }
+:root.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }
+
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.2); }
+
 /* ========================
-   Scrollbar (subtle)
+   Focus indicators
    ======================== */
 
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+*:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
 }
 
-::-webkit-scrollbar-track {
-  background: transparent;
+input:focus-visible, textarea:focus-visible {
+  outline-offset: 0;
 }
 
-::-webkit-scrollbar-thumb {
-  background: var(--color-border-strong);
-  border-radius: 3px;
+} /* end @layer base */
+
+/* Sidebar scroll shadows — fade content at top/bottom edges */
+.sidebar-scroll-shadow {
+  mask-image: linear-gradient(to bottom, transparent, black 1rem, black calc(100% - 1rem), transparent);
+  -webkit-mask-image: linear-gradient(to bottom, transparent, black 1rem, black calc(100% - 1rem), transparent);
+}
+
+/* Search dialog entrance animation */
+@keyframes dialog-in {
+  from { opacity: 0; transform: translate(-50%, -8px) scale(0.98); }
+  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
+}
+.dialog-animate-in {
+  animation: dialog-in 150ms ease-out;
+}
+
+/* ========================
+   Terminal-style code blocks
+   ======================== */
+.terminal-block pre {
+  background-color: #0a0a0a !important;
+  border-color: rgba(255, 255, 255, 0.08);
 }
 
-::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-tertiary);
+/* ========================
+   Copy toast animation
+   ======================== */
+@keyframes copy-toast-in {
+  0% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
+  15% { opacity: 1; transform: translateX(-50%) translateY(0); }
+  85% { opacity: 1; transform: translateX(-50%) translateY(0); }
+  100% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
+}
+.copy-toast {
+  animation: copy-toast-in 1.5s ease-in-out forwards;
+  pointer-events: none;
+}
+
+/* ========================
+   Search skeleton shimmer
+   ======================== */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+.skeleton {
+  background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-bg-tertiary) 50%, var(--color-bg-secondary) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: 0.25rem;
 }

package/dist/template/src/types/remark-gfm.d.ts

@@ -0,0 +1,2 @@
+declare module 'remark-gfm'
+declare module 'remark-frontmatter'

package/dist/utils/files.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Recursively find all .md and .mdx files in a directory.
+ * Skips hidden directories and node_modules.
+ */
+export declare function findMdxFiles(dir: string): string[];
+/**
+ * Convert string to URL-safe slug
+ */
+export declare function slugify(str: string): string;

package/dist/utils/files.js

@@ -0,0 +1,33 @@
+import { readdirSync, statSync } from 'fs';
+import { join, extname } from 'path';
+/**
+ * Recursively find all .md and .mdx files in a directory.
+ * Skips hidden directories and node_modules.
+ */
+export function findMdxFiles(dir) {
+    const files = [];
+    function walk(currentDir) {
+        const entries = readdirSync(currentDir);
+        for (const entry of entries) {
+            const fullPath = join(currentDir, entry);
+            const stat = statSync(fullPath);
+            if (stat.isDirectory() && !entry.startsWith('.') && entry !== 'node_modules') {
+                walk(fullPath);
+            }
+            else if (stat.isFile() && (extname(entry) === '.mdx' || extname(entry) === '.md')) {
+                files.push(fullPath);
+            }
+        }
+    }
+    walk(dir);
+    return files;
+}
+/**
+ * Convert string to URL-safe slug
+ */
+export function slugify(str) {
+    return str
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-|-$/g, '');
+}

package/dist/utils/validation.d.ts

@@ -0,0 +1,4 @@
+export declare function validatePath(input: string, mustExist?: boolean): string;
+export declare function validateUrl(input: string): string;
+export declare function validateSlug(input: string): string;
+export declare function sanitizeForShell(input: string): string;