skrypt-ai 0.4.1 → 0.5.0

package/dist/template/src/components/mdx/tooltip.tsx

@@ -0,0 +1,101 @@
+'use client'
+
+import { useState, useRef, useCallback, type ReactNode } from 'react'
+
+interface TooltipProps {
+  children: ReactNode
+  content: string
+  side?: 'top' | 'bottom' | 'left' | 'right'
+}
+
+const arrowStyles: Record<string, React.CSSProperties> = {
+  top: {
+    bottom: -4,
+    left: '50%',
+    transform: 'translateX(-50%) rotate(45deg)',
+  },
+  bottom: {
+    top: -4,
+    left: '50%',
+    transform: 'translateX(-50%) rotate(45deg)',
+  },
+  left: {
+    right: -4,
+    top: '50%',
+    transform: 'translateY(-50%) rotate(45deg)',
+  },
+  right: {
+    left: -4,
+    top: '50%',
+    transform: 'translateY(-50%) rotate(45deg)',
+  },
+}
+
+const positionStyles: Record<string, React.CSSProperties> = {
+  top: {
+    bottom: '100%',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    marginBottom: 8,
+  },
+  bottom: {
+    top: '100%',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    marginTop: 8,
+  },
+  left: {
+    right: '100%',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    marginRight: 8,
+  },
+  right: {
+    left: '100%',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    marginLeft: 8,
+  },
+}
+
+export function Tooltip({ children, content, side = 'top' }: TooltipProps) {
+  const [visible, setVisible] = useState(false)
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const show = useCallback(() => {
+    timeoutRef.current = setTimeout(() => setVisible(true), 150)
+  }, [])
+
+  const hide = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+      timeoutRef.current = null
+    }
+    setVisible(false)
+  }, [])
+
+  return (
+    <span
+      className="relative inline-flex"
+      onMouseEnter={show}
+      onMouseLeave={hide}
+      onFocus={show}
+      onBlur={hide}
+    >
+      {children}
+      {visible && (
+        <span
+          role="tooltip"
+          className="tooltip-content absolute z-50 whitespace-nowrap bg-[var(--color-gray-900)] text-white text-xs px-2.5 py-1.5 rounded-lg shadow-lg tooltip-fade-in pointer-events-none"
+          style={positionStyles[side]}
+        >
+          {content}
+          <span
+            className="tooltip-content absolute h-2 w-2 bg-[var(--color-gray-900)]"
+            style={arrowStyles[side]}
+          />
+        </span>
+      )}
+    </span>
+  )
+}

package/dist/template/src/components/syntax-theme-selector.tsx

@@ -1,49 +1,196 @@
 'use client'
 
-import { useContext } from 'react'
+import { useContext, useState, useRef, useEffect, useCallback, KeyboardEvent } from 'react'
 import { SyntaxThemeContext } from '@/contexts/syntax-theme'
 import { AVAILABLE_THEMES, DEFAULT_THEME } from '@/lib/highlight'
 import { Palette } from 'lucide-react'
 
 export function SyntaxThemeSelector() {
   const context = useContext(SyntaxThemeContext)
+  const [isOpen, setIsOpen] = useState(false)
+  const [activeIndex, setActiveIndex] = useState(-1)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+  const optionRefs = useRef<(HTMLButtonElement | null)[]>([])
+  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
-  // Safely handle when context isn't available (during SSG)
   const theme = context?.theme ?? DEFAULT_THEME
   const setTheme = context?.setTheme ?? (() => {})
   const availableThemes = context?.availableThemes ?? AVAILABLE_THEMES
 
+  // Find the index of the current active theme
+  const activeThemeIndex = availableThemes.findIndex((t) => t.name === theme)
+
+  const open = useCallback(() => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current)
+      closeTimeoutRef.current = null
+    }
+    setIsOpen(true)
+    setActiveIndex(activeThemeIndex >= 0 ? activeThemeIndex : 0)
+  }, [activeThemeIndex])
+
+  const close = useCallback(() => {
+    setIsOpen(false)
+    setActiveIndex(-1)
+  }, [])
+
+  const delayedClose = useCallback(() => {
+    closeTimeoutRef.current = setTimeout(close, 150)
+  }, [close])
+
+  const cancelClose = useCallback(() => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current)
+      closeTimeoutRef.current = null
+    }
+  }, [])
+
+  // Focus the active option when activeIndex changes while open
+  useEffect(() => {
+    if (isOpen && activeIndex >= 0) {
+      optionRefs.current[activeIndex]?.focus()
+    }
+  }, [isOpen, activeIndex])
+
+  // Close on outside click
+  useEffect(() => {
+    if (!isOpen) return
+    function handleClick(e: MouseEvent) {
+      const target = e.target as Node
+      if (
+        !triggerRef.current?.contains(target) &&
+        !listRef.current?.contains(target)
+      ) {
+        close()
+      }
+    }
+    document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [isOpen, close])
+
+  // Close on Escape
+  useEffect(() => {
+    if (!isOpen) return
+    function handleEsc(e: globalThis.KeyboardEvent) {
+      if (e.key === 'Escape') {
+        close()
+        triggerRef.current?.focus()
+      }
+    }
+    document.addEventListener('keydown', handleEsc)
+    return () => document.removeEventListener('keydown', handleEsc)
+  }, [isOpen, close])
+
+  function selectTheme(index: number) {
+    const t = availableThemes[index]
+    if (t) {
+      setTheme(t.name)
+      close()
+      triggerRef.current?.focus()
+    }
+  }
+
+  function handleTriggerKeyDown(e: KeyboardEvent) {
+    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      open()
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      open()
+      setActiveIndex(availableThemes.length - 1)
+    }
+  }
+
+  function handleOptionKeyDown(e: KeyboardEvent, index: number) {
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault()
+        setActiveIndex((index + 1) % availableThemes.length)
+        break
+      case 'ArrowUp':
+        e.preventDefault()
+        setActiveIndex((index - 1 + availableThemes.length) % availableThemes.length)
+        break
+      case 'Home':
+        e.preventDefault()
+        setActiveIndex(0)
+        break
+      case 'End':
+        e.preventDefault()
+        setActiveIndex(availableThemes.length - 1)
+        break
+      case 'Enter':
+      case ' ':
+        e.preventDefault()
+        selectTheme(index)
+        break
+      case 'Tab':
+        close()
+        break
+    }
+  }
+
+  const listboxId = 'syntax-theme-listbox'
+
   return (
-    <div className="relative group">
+    <div
+      className="relative"
+      onMouseEnter={() => { open(); cancelClose() }}
+      onMouseLeave={delayedClose}
+    >
       <button
+        ref={triggerRef}
         className="flex items-center gap-2 px-3 py-1.5 text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)] rounded-md hover:bg-[var(--color-bg-secondary)] transition-colors"
         title="Syntax theme"
         aria-label={`Syntax theme: ${theme}`}
         aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        aria-controls={isOpen ? listboxId : undefined}
+        onClick={() => { isOpen ? close() : open() }}
+        onKeyDown={handleTriggerKeyDown}
       >
         <Palette size={16} />
         <span className="hidden sm:inline">Theme</span>
       </button>
 
-      <div className="absolute right-0 top-full mt-1 w-48 py-1 bg-[var(--color-bg)] border border-[var(--color-border)] rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50">
-        <div className="px-3 py-1.5 text-xs font-medium text-[var(--color-text-tertiary)] uppercase tracking-wide">
+      <div
+        ref={listRef}
+        id={listboxId}
+        role="listbox"
+        aria-label="Syntax theme"
+        aria-activedescendant={activeIndex >= 0 ? `syntax-theme-option-${activeIndex}` : undefined}
+        className={`absolute right-0 top-full mt-1 w-48 py-1 bg-[var(--color-bg)] border border-[var(--color-border)] rounded-lg shadow-lg transition-all z-50 ${
+          isOpen ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'
+        }`}
+      >
+        <div className="px-3 py-1.5 text-xs font-medium text-[var(--color-text-tertiary)] uppercase tracking-wide" aria-hidden="true">
           Syntax Theme
         </div>
-        {availableThemes.map((t) => (
-          <button
-            key={t.name}
-            onClick={() => setTheme(t.name)}
-            className={`w-full px-3 py-1.5 text-left text-sm flex items-center gap-2 hover:bg-[var(--color-bg-secondary)] transition-colors ${
-              theme === t.name ? 'text-[var(--color-primary)]' : 'text-[var(--color-text)]'
-            }`}
-          >
-            <span
-              className={`w-3 h-3 rounded-full ${t.isDark ? 'bg-gray-800' : 'bg-gray-200'}`}
-            />
-            {t.label}
-            {theme === t.name && <span className="ml-auto text-xs">Active</span>}
-          </button>
-        ))}
+        {availableThemes.map((t, index) => {
+          const isSelected = theme === t.name
+          return (
+            <button
+              key={t.name}
+              ref={(el) => { optionRefs.current[index] = el }}
+              id={`syntax-theme-option-${index}`}
+              role="option"
+              aria-selected={isSelected}
+              tabIndex={-1}
+              onClick={() => selectTheme(index)}
+              onKeyDown={(e) => handleOptionKeyDown(e, index)}
+              className={`w-full px-3 py-1.5 text-left text-sm flex items-center gap-2 hover:bg-[var(--color-bg-secondary)] transition-colors ${
+                isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--color-text)]'
+              } ${activeIndex === index ? 'bg-[var(--color-bg-secondary)]' : ''}`}
+            >
+              <span
+                className={`w-3 h-3 rounded-full ${t.isDark ? 'bg-gray-800' : 'bg-gray-200'}`}
+              />
+              {t.label}
+              {isSelected && <span className="ml-auto text-xs">Active</span>}
+            </button>
+          )
+        })}
       </div>
     </div>
   )

package/dist/template/src/lib/search-types.ts

@@ -1,6 +1,5 @@
 /**
  * Type definitions for Orama search database
- * Fixes P0: Removes `any` types from search functionality
  */
 
 import type { Orama, Results, SearchParams } from '@orama/orama'
@@ -9,6 +8,8 @@ import type { Orama, Results, SearchParams } from '@orama/orama'
 export interface SearchDocument {
   id: string
   title: string
+  headings: string
+  keywords: string
   content: string
   href: string
   section: string
@@ -18,6 +19,8 @@ export interface SearchDocument {
 export type SearchDatabase = Orama<{
   id: 'string'
   title: 'string'
+  headings: 'string'
+  keywords: 'string'
   content: 'string'
   href: 'string'
   section: 'string'

package/dist/template/src/lib/search.ts

@@ -7,6 +7,8 @@ let loadPromise: Promise<void> | null = null
 const schema = {
   id: 'string' as const,
   title: 'string' as const,
+  headings: 'string' as const,
+  keywords: 'string' as const,
   content: 'string' as const,
   href: 'string' as const,
   section: 'string' as const,
@@ -41,7 +43,15 @@ async function loadSearchIndex(): Promise<void> {
         return
       }
 
-      const newDb = await create({ schema }) as SearchDatabase
+      const newDb = await create({
+        schema,
+        components: {
+          tokenizer: {
+            stemming: true,
+            language: 'english',
+          },
+        },
+      }) as SearchDatabase
       await load(newDb, data as RawData)
       db = newDb
     } catch (err) {
@@ -55,10 +65,21 @@ async function loadSearchIndex(): Promise<void> {
 }
 
 /**
- * Generate a snippet with highlighted search terms
+ * Generate a snippet with highlighted search terms, preferring heading matches
  */
-function generateSnippet(content: string, query: string, maxLength: number = 150): string {
+function generateSnippet(content: string, headings: string, query: string, maxLength: number = 150): string {
   const terms = query.toLowerCase().split(/\s+/).filter(Boolean)
+
+  // Check if any headings match — show that context first
+  if (headings) {
+    const headingList = headings.split(' | ')
+    for (const heading of headingList) {
+      if (terms.some(term => heading.toLowerCase().includes(term))) {
+        return heading
+      }
+    }
+  }
+
   const contentLower = content.toLowerCase()
 
   // Find the best position to start the snippet (where most terms match)
@@ -110,11 +131,13 @@ export async function search(query: string): Promise<SearchResultWithHighlight[]
   try {
     const results = await oramaSearch(db, {
       term: query,
-      properties: ['title', 'content'],
+      properties: ['title', 'headings', 'keywords', 'content'],
       limit: 10,
-      tolerance: 1,
+      tolerance: 2,
       boost: {
-        title: 2,
+        title: 5,
+        headings: 3,
+        keywords: 2,
         content: 1,
       },
     })
@@ -124,7 +147,7 @@ export async function search(query: string): Promise<SearchResultWithHighlight[]
       href: hit.document.href,
       content: hit.document.content,
       section: hit.document.section || undefined,
-      snippet: generateSnippet(hit.document.content, query),
+      snippet: generateSnippet(hit.document.content, hit.document.headings, query),
       score: hit.score,
     }))
   } catch (err) {

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

@@ -121,6 +121,12 @@
   :root:not(.light) .feedback-negative { background-color: rgba(127, 29, 29, 0.3); color: #f87171; }
 }
 
+/* Tooltip — dark mode overrides */
+:root.dark .tooltip-content { background-color: var(--color-gray-100); color: var(--color-gray-900); }
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) .tooltip-content { background-color: var(--color-gray-100); color: var(--color-gray-900); }
+}
+
 /* ========================
    Base — in @layer base so Tailwind utilities can override
    ======================== */
@@ -463,3 +469,36 @@ input:focus-visible, textarea:focus-visible {
   animation: shimmer 1.5s infinite;
   border-radius: 0.25rem;
 }
+
+/* ========================
+   Tooltip fade-in
+   ======================== */
+@keyframes tooltip-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.tooltip-fade-in {
+  animation: tooltip-fade-in 150ms ease-out;
+}
+
+/* ========================
+   Page transitions — subtle fade-in for article content
+   ======================== */
+@keyframes page-fade-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.prose {
+  animation: page-fade-in 200ms ease-out;
+}
+
+/* ========================
+   Link preview card
+   ======================== */
+@keyframes link-preview-in {
+  from { opacity: 0; transform: translate(-50%, -100%) translateY(4px); }
+  to { opacity: 1; transform: translate(-50%, -100%) translateY(0); }
+}
+.link-preview-card {
+  animation: link-preview-in 150ms ease-out;
+}

package/dist/utils/files.d.ts

@@ -1,9 +1,17 @@
 /**
  * Recursively find all .md and .mdx files in a directory.
- * Skips hidden directories and node_modules.
+ * Skips hidden directories, node_modules, and symlinks.
  */
 export declare function findMdxFiles(dir: string): string[];
 /**
  * Convert string to URL-safe slug
  */
 export declare function slugify(str: string): string;
+/**
+ * Simple YAML frontmatter parser — splits on --- markers.
+ * Returns parsed key-value data and remaining content body.
+ */
+export declare function parseFrontmatter(content: string): {
+    data: Record<string, unknown>;
+    content: string;
+};

package/dist/utils/files.js

@@ -1,25 +1,41 @@
-import { readdirSync, statSync } from 'fs';
+import { readdirSync, statSync, lstatSync } from 'fs';
 import { join, extname } from 'path';
 /**
  * Recursively find all .md and .mdx files in a directory.
- * Skips hidden directories and node_modules.
+ * Skips hidden directories, node_modules, and symlinks.
  */
 export function findMdxFiles(dir) {
     const files = [];
-    function walk(currentDir) {
-        const entries = readdirSync(currentDir);
+    function walk(currentDir, depth) {
+        if (depth > 30)
+            return;
+        let entries;
+        try {
+            entries = readdirSync(currentDir);
+        }
+        catch {
+            return;
+        }
         for (const entry of entries) {
             const fullPath = join(currentDir, entry);
-            const stat = statSync(fullPath);
-            if (stat.isDirectory() && !entry.startsWith('.') && entry !== 'node_modules') {
-                walk(fullPath);
+            try {
+                // Skip symlinks to prevent infinite loops
+                if (lstatSync(fullPath).isSymbolicLink())
+                    continue;
+                const stat = statSync(fullPath);
+                if (stat.isDirectory() && !entry.startsWith('.') && entry !== 'node_modules') {
+                    walk(fullPath, depth + 1);
+                }
+                else if (stat.isFile() && (extname(entry) === '.mdx' || extname(entry) === '.md')) {
+                    files.push(fullPath);
+                }
             }
-            else if (stat.isFile() && (extname(entry) === '.mdx' || extname(entry) === '.md')) {
-                files.push(fullPath);
+            catch {
+                continue;
             }
         }
     }
-    walk(dir);
+    walk(dir, 0);
     return files;
 }
 /**
@@ -31,3 +47,36 @@ export function slugify(str) {
         .replace(/[^a-z0-9]+/g, '-')
         .replace(/^-|-$/g, '');
 }
+/**
+ * Simple YAML frontmatter parser — splits on --- markers.
+ * Returns parsed key-value data and remaining content body.
+ */
+export function parseFrontmatter(content) {
+    const match = content.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/);
+    if (!match)
+        return { data: {}, content };
+    const yamlStr = match[1];
+    const body = match[2];
+    const data = {};
+    for (const line of yamlStr.split('\n')) {
+        const kvMatch = line.match(/^(\w[\w-]*)\s*:\s*(.*)$/);
+        if (!kvMatch)
+            continue;
+        const key = kvMatch[1];
+        let value = kvMatch[2].trim();
+        if (typeof value === 'string') {
+            if ((value.startsWith('"') && value.endsWith('"')) ||
+                (value.startsWith("'") && value.endsWith("'"))) {
+                value = value.slice(1, -1);
+            }
+            else if (value === 'true')
+                value = true;
+            else if (value === 'false')
+                value = false;
+            else if (/^\d+$/.test(value))
+                value = parseInt(value, 10);
+        }
+        data[key] = value;
+    }
+    return { data, content: body };
+}

package/dist/utils/validation.js

@@ -31,7 +31,7 @@ export function validateSlug(input) {
 }
 export function sanitizeForShell(input) {
     // Only allow safe characters for git refs, filenames, etc.
-    if (!/^[a-zA-Z0-9\/_~.^@{}\-]+$/.test(input)) {
+    if (!/^[a-zA-Z0-9/_~.^@{}-]+$/.test(input)) {
         throw new Error(`Unsafe characters in input: ${input}`);
     }
     return input;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skrypt-ai",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "AI-powered documentation generator with code examples",
   "type": "module",
   "main": "dist/cli.js",
@@ -54,6 +54,9 @@
     "openai": "^6.27.0",
     "typescript": "^5.9.3"
   },
+  "optionalDependencies": {
+    "@napi-rs/keyring": "^1.1.6"
+  },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@types/js-yaml": "^4.0.9",