skrypt-ai 0.3.3 → 0.4.0

package/dist/template/src/lib/theme-utils.ts

@@ -0,0 +1,140 @@
+/**
+ * Theme color derivation utilities.
+ * Pure functions — no external dependencies.
+ */
+
+/**
+ * Convert a hex color string to HSL components.
+ * Accepts 3-digit (#abc) or 6-digit (#aabbcc) hex, with or without #.
+ */
+export function hexToHsl(hex: string): { h: number; s: number; l: number } {
+  // Strip # prefix if present
+  hex = hex.replace(/^#/, '')
+
+  // Expand 3-digit shorthand to 6-digit
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
+  }
+
+  const r = parseInt(hex.substring(0, 2), 16) / 255
+  const g = parseInt(hex.substring(2, 4), 16) / 255
+  const b = parseInt(hex.substring(4, 6), 16) / 255
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const l = (max + min) / 2
+
+  if (max === min) {
+    // Achromatic
+    return { h: 0, s: 0, l }
+  }
+
+  const d = max - min
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+
+  let h: number
+  switch (max) {
+    case r:
+      h = ((g - b) / d + (g < b ? 6 : 0)) / 6
+      break
+    case g:
+      h = ((b - r) / d + 2) / 6
+      break
+    default:
+      h = ((r - g) / d + 4) / 6
+      break
+  }
+
+  return { h: h * 360, s, l }
+}
+
+/**
+ * Convert HSL components back to a hex color string.
+ * h: 0-360, s: 0-1, l: 0-1
+ */
+export function hslToHex(h: number, s: number, l: number): string {
+  // Clamp values
+  h = ((h % 360) + 360) % 360
+  s = Math.max(0, Math.min(1, s))
+  l = Math.max(0, Math.min(1, l))
+
+  const c = (1 - Math.abs(2 * l - 1)) * s
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
+  const m = l - c / 2
+
+  let r: number, g: number, b: number
+
+  if (h < 60) {
+    ;[r, g, b] = [c, x, 0]
+  } else if (h < 120) {
+    ;[r, g, b] = [x, c, 0]
+  } else if (h < 180) {
+    ;[r, g, b] = [0, c, x]
+  } else if (h < 240) {
+    ;[r, g, b] = [0, x, c]
+  } else if (h < 300) {
+    ;[r, g, b] = [x, 0, c]
+  } else {
+    ;[r, g, b] = [c, 0, x]
+  }
+
+  const toHex = (v: number) =>
+    Math.round((v + m) * 255)
+      .toString(16)
+      .padStart(2, '0')
+
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+}
+
+/**
+ * Derive primary, dark, and light variants from a single hex color.
+ * Dark variant: lightness reduced by ~15%
+ * Light variant: lightness increased by ~15%
+ */
+/**
+ * Compute WCAG relative luminance from a hex color.
+ * Returns 0 (black) to 1 (white).
+ */
+export function relativeLuminance(hex: string): number {
+  hex = hex.replace(/^#/, '')
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
+  }
+  const r = parseInt(hex.substring(0, 2), 16) / 255
+  const g = parseInt(hex.substring(2, 4), 16) / 255
+  const b = parseInt(hex.substring(4, 6), 16) / 255
+
+  const toLinear = (c: number) => (c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4))
+  return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b)
+}
+
+/**
+ * Return the best contrasting foreground color (white or dark) for a given background.
+ * Uses WCAG contrast ratio.
+ */
+export function contrastForeground(bgHex: string): string {
+  const lum = relativeLuminance(bgHex)
+  // WCAG contrast ratio: (L1 + 0.05) / (L2 + 0.05)
+  // White on bg: (1 + 0.05) / (lum + 0.05)
+  // Dark on bg: (lum + 0.05) / (0 + 0.05)
+  const contrastWithWhite = (1.05) / (lum + 0.05)
+  const contrastWithBlack = (lum + 0.05) / 0.05
+  return contrastWithWhite >= contrastWithBlack ? '#ffffff' : '#0f1117'
+}
+
+export function derivePrimaryColors(hex: string): {
+  primary: string
+  primaryDark: string
+  primaryLight: string
+  primaryForeground: string
+} {
+  const { h, s, l } = hexToHsl(hex)
+  const normalizedHex = hex.startsWith('#') ? hex : `#${hex}`
+
+  return {
+    primary: normalizedHex,
+    primaryDark: hslToHex(h, s, Math.max(0, l - 0.15)),
+    primaryLight: hslToHex(h, s, Math.min(1, l + 0.15)),
+    primaryForeground: contrastForeground(normalizedHex),
+  }
+}

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

@@ -1,152 +1,465 @@
 @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 */
+  /* Primary — configurable per project via docs.json */
   --color-primary: #3b82f6;
   --color-primary-dark: #2563eb;
-  --color-accent: #8b5cf6;
+  --color-primary-light: #60a5fa;
+  --color-primary-foreground: #ffffff;
 
-  /* Background */
-  --color-bg: #ffffff;
-  --color-bg-secondary: #f8fafc;
-  --color-bg-tertiary: #f1f5f9;
-
-  /* Text */
-  --color-text: #0f172a;
-  --color-text-secondary: #475569;
-  --color-text-tertiary: #94a3b8;
+  /* 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;
 
-  /* Border */
-  --color-border: #e2e8f0;
-  --color-border-strong: #cbd5e1;
+  /* Semantic tokens — light mode defaults */
+  --color-bg: #ffffff;
+  --color-bg-secondary: #f9fafb;
+  --color-bg-tertiary: #f3f4f6;
+  --color-text: #111827;
+  --color-text-secondary: #374151;
+  --color-text-tertiary: #9ca3af;
+  --color-border: rgba(3, 7, 18, 0.1);
+  --color-border-strong: rgba(3, 7, 18, 0.15);
 
   /* Code */
-  --color-code-bg: #1e293b;
-  --color-code-text: #e2e8f0;
+  --color-code-bg: #ffffff;
+  --color-code-border: rgba(3, 7, 18, 0.1);
+  --color-code-text: #1f2937;
 
-  /* Sidebar */
-  --sidebar-width: 280px;
-  --toc-width: 240px;
+  /* Layout */
+  --sidebar-width: 264px;
+  --toc-width: 224px;
+  --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: #0f172a;
-    --color-bg-secondary: #1e293b;
-    --color-bg-tertiary: #334155;
-    --color-text: #f8fafc;
-    --color-text-secondary: #cbd5e1;
-    --color-text-tertiary: #64748b;
-    --color-border: #334155;
-    --color-border-strong: #475569;
-    --color-code-bg: #0f172a;
-    --color-code-text: #e2e8f0;
+    --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: #0f172a;
-  --color-bg-secondary: #1e293b;
-  --color-bg-tertiary: #334155;
-  --color-text: #f8fafc;
-  --color-text-secondary: #cbd5e1;
-  --color-text-tertiary: #64748b;
-  --color-border: #334155;
-  --color-border-strong: #475569;
-  --color-code-bg: #0f172a;
-  --color-code-text: #e2e8f0;
-}
-
-/* Base styles */
+  --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 — 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-family: var(--font-body, "Inter", ui-sans-serif, system-ui, sans-serif);
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-size: 15px;
+}
+
+/* Global transitions — 150ms on interactive elements */
+a, button, input, select, textarea {
+  transition: color 150ms, background-color 150ms, border-color 150ms, opacity 150ms;
+}
+
+::selection {
+  background-color: var(--color-primary);
+  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);
+  line-height: 1.2;
+  letter-spacing: -0.025em;
+}
+
+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; }
+
+@media (max-width: 640px) {
+  h1 { font-size: 1.75em; }
+  h2 { font-size: 1.25em; }
+  h3 { font-size: 1.125em; }
 }
 
-/* Code blocks */
+/* ========================
+   Code
+   ======================== */
+
 pre {
   background-color: var(--color-code-bg) !important;
-  border-radius: 0.5rem;
-  padding: 1rem;
+  border: 1px solid var(--color-code-border);
+  border-radius: 0.75rem;
+  padding: 0.875rem 1rem;
   overflow-x: auto;
+  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, Menlo, Monaco, Consolas, monospace;
-  font-size: 0.875rem;
+  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);
-  padding: 0.125rem 0.375rem;
-  border-radius: 0.25rem;
+  background-color: var(--color-gray-100);
+  padding: 0.125rem 0.5rem;
+  border-radius: 0.375rem;
   font-size: 0.875em;
+  line-height: 1.5;
+  color: var(--color-gray-600);
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
-/* Links */
-a {
-  color: var(--color-primary);
-  text-decoration: none;
+:root.dark :not(pre) > code {
+  background-color: rgba(255, 255, 255, 0.05);
+  color: var(--color-gray-200);
 }
 
-a:hover {
-  text-decoration: underline;
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) :not(pre) > code {
+    background-color: rgba(255, 255, 255, 0.05);
+    color: var(--color-gray-200);
+  }
 }
 
-/* Headings */
-h1, h2, h3, h4, h5, h6 {
+/* ========================
+   Prose Content
+   ======================== */
+
+.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;
-  line-height: 1.25;
+  text-decoration: none;
+  border-bottom: 1px solid var(--color-primary);
+  transition: border-color 150ms, border-bottom-width 150ms;
 }
 
-h1 { font-size: 2.25rem; }
-h2 { font-size: 1.75rem; margin-top: 2rem; }
-h3 { font-size: 1.375rem; margin-top: 1.5rem; }
-h4 { font-size: 1.125rem; margin-top: 1.25rem; }
-
-/* Prose content */
-.prose {
-  max-width: 65ch;
-  line-height: 1.75;
+.prose a:hover {
+  border-bottom-width: 2px;
 }
 
 .prose p {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
 }
 
+/* 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 li {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose li::marker {
+  color: var(--color-text-tertiary);
+}
+
+/* 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 th, .prose td {
-  border: 1px solid var(--color-border);
-  padding: 0.75rem;
-  text-align: left;
-}
+.prose thead { display: table-header-group; }
+.prose tbody { display: table-row-group; }
+.prose tr { display: table-row; }
 
 .prose th {
-  background-color: var(--color-bg-secondary);
+  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 th:last-child { padding-right: 0; }
+
+.prose td {
+  display: table-cell;
+  vertical-align: top;
+  color: var(--color-text-secondary);
+  padding: 0.75rem 1rem 0.75rem 0;
+}
+
+.prose td:last-child { padding-right: 0; }
+
+/* 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 {
+  border-bottom: 1px solid var(--color-border);
+}
+
+/* Blockquotes */
+.prose blockquote {
+  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; }
+
+/* Horizontal rules */
+.prose hr {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: 3em 0;
+}
+
+/* Images */
+.prose img {
+  max-width: 100%;
+  border-radius: 0.75rem;
+  margin: 2em 0;
+}
+
+/* ========================
+   Scrollbar (Mintlify style — thin, subtle)
+   ======================== */
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
+}
+
+:root.dark * {
+  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+}
+
+@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); }
+
+/* ========================
+   Focus indicators
+   ======================== */
+
+*:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+input:focus-visible, textarea:focus-visible {
+  outline-offset: 0;
+}
+
+} /* 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);
+}
+
+/* ========================
+   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;