@refraction-ui/astro 0.4.0 → 0.4.4

package/dist/diff-viewer/diff-viewer.styles.ts

@@ -0,0 +1,124 @@
+import { cva } from '../shared/index.ts'
+import type { TokenContract } from '../shared/index.ts'
+
+export const diffViewerTokens: TokenContract = {
+  name: 'diff-viewer',
+  tokens: {
+    bg: { variable: '--rfr-diff-bg', fallback: 'hsl(var(--background))' },
+    fg: { variable: '--rfr-diff-fg', fallback: 'hsl(var(--foreground))' },
+    sidebarBg: { variable: '--rfr-diff-sidebar-bg', fallback: 'hsl(var(--muted))' },
+    headerBg: { variable: '--rfr-diff-header-bg', fallback: 'hsl(var(--muted))' },
+    border: { variable: '--rfr-diff-border', fallback: 'hsl(var(--border))' },
+    addBg: { variable: '--rfr-diff-add-bg', fallback: 'rgba(46, 160, 67, 0.15)' },
+    delBg: { variable: '--rfr-diff-del-bg', fallback: 'rgba(248, 81, 73, 0.15)' },
+    addFg: { variable: '--rfr-diff-add-fg', fallback: '#3fb950' },
+    delFg: { variable: '--rfr-diff-del-fg', fallback: '#f85149' },
+    statusbar: { variable: '--rfr-diff-statusbar', fallback: 'hsl(var(--primary))' },
+    statusbarFg: { variable: '--rfr-diff-statusbar-fg', fallback: 'hsl(var(--primary-foreground))' },
+  },
+}
+
+export const diffViewerVariants = cva({
+  base: 'flex flex-col overflow-hidden font-sans text-sm',
+  variants: {
+    theme: {
+      light: 'bg-white text-gray-900',
+      dark: 'bg-gray-950 text-gray-100',
+    },
+    fullscreen: {
+      'true': 'h-screen',
+      'false': '',
+    },
+  },
+  defaultVariants: {
+    theme: 'dark',
+    fullscreen: 'true',
+  },
+})
+
+export const sidebarVariants = cva({
+  base: 'border-r overflow-auto flex-shrink-0',
+  variants: {
+    theme: {
+      light: 'bg-gray-50 border-gray-200',
+      dark: 'bg-gray-900 border-gray-800',
+    },
+  },
+  defaultVariants: {
+    theme: 'dark',
+  },
+})
+
+export const sidebarItemVariants = cva({
+  base: 'px-2.5 py-1 cursor-pointer text-xs font-mono transition-colors',
+  variants: {
+    active: {
+      'true': 'border-l-2 border-blue-500',
+      'false': 'border-l-2 border-transparent',
+    },
+    theme: {
+      light: '',
+      dark: '',
+    },
+  },
+  compoundVariants: [
+    { active: 'true', theme: 'dark', class: 'bg-gray-800 text-gray-100' },
+    { active: 'false', theme: 'dark', class: 'text-gray-400 hover:bg-gray-800/50' },
+    { active: 'true', theme: 'light', class: 'bg-blue-50 text-gray-900' },
+    { active: 'false', theme: 'light', class: 'text-gray-600 hover:bg-gray-100' },
+  ],
+  defaultVariants: {
+    active: 'false',
+    theme: 'dark',
+  },
+})
+
+export const tabBarVariants = cva({
+  base: 'flex items-center border-b overflow-auto flex-shrink-0',
+  variants: {
+    theme: {
+      light: 'bg-gray-50 border-gray-200',
+      dark: 'bg-gray-900 border-gray-800',
+    },
+  },
+  defaultVariants: {
+    theme: 'dark',
+  },
+})
+
+export const tabVariants = cva({
+  base: 'px-3 h-[35px] flex items-center gap-1 cursor-pointer text-xs font-mono border-r shrink-0',
+  variants: {
+    active: {
+      'true': '',
+      'false': '',
+    },
+    theme: {
+      light: 'border-gray-200',
+      dark: 'border-gray-800',
+    },
+  },
+  compoundVariants: [
+    { active: 'true', theme: 'dark', class: 'bg-gray-950 text-gray-100 border-b-gray-950 -mb-px' },
+    { active: 'false', theme: 'dark', class: 'text-gray-400' },
+    { active: 'true', theme: 'light', class: 'bg-white text-gray-900 border-b-white -mb-px' },
+    { active: 'false', theme: 'light', class: 'text-gray-500' },
+  ],
+  defaultVariants: {
+    active: 'false',
+    theme: 'dark',
+  },
+})
+
+export const statusBarVariants = cva({
+  base: 'h-[22px] flex items-center px-2.5 gap-3 text-[11px] font-mono flex-shrink-0',
+  variants: {
+    theme: {
+      light: 'bg-blue-600 text-white',
+      dark: 'bg-blue-700 text-white',
+    },
+  },
+  defaultVariants: {
+    theme: 'dark',
+  },
+})

package/dist/diff-viewer/diff-viewer.ts

@@ -0,0 +1,255 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type DiffViewerTheme = 'light' | 'dark'
+export type DiffViewMode = 'side-by-side' | 'inline'
+
+export type DiffFileStatus = 'added' | 'modified' | 'deleted' | 'renamed'
+
+export interface DiffFile {
+  /** File path */
+  path: string
+  /** Change status */
+  status: DiffFileStatus
+  /** Lines added */
+  additions: number
+  /** Lines deleted */
+  deletions: number
+  /** Unified diff content for this file */
+  diff?: string
+  /** Old path for renamed files */
+  oldPath?: string
+}
+
+export interface DiffViewerProps {
+  /** Files in this diff */
+  files?: DiffFile[]
+  /** Index of the active file */
+  activeFileIndex?: number
+  /** View mode */
+  viewMode?: DiffViewMode
+  /** Theme */
+  theme?: DiffViewerTheme
+  /** Language for syntax highlighting */
+  language?: string
+  /** Whether the sidebar is visible */
+  sidebarOpen?: boolean
+  /** Callback when active file changes */
+  onFileSelect?: (index: number) => void
+  /** Callback when view mode changes */
+  onViewModeChange?: (mode: DiffViewMode) => void
+  /** Callback when sidebar toggled */
+  onSidebarToggle?: () => void
+}
+
+export interface DiffViewerState {
+  activeFileIndex: number
+  viewMode: DiffViewMode
+  theme: DiffViewerTheme
+  language: string
+  sidebarOpen: boolean
+  files: DiffFile[]
+}
+
+export interface DiffViewerAPI {
+  /** Current viewer state */
+  state: DiffViewerState
+  /** ARIA attributes for the root element */
+  ariaProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** Data attributes for CSS styling hooks */
+  dataAttributes: Record<string, string>
+  /** Select a file by index */
+  selectFile: (index: number) => void
+  /** Move to next file */
+  nextFile: () => void
+  /** Move to previous file */
+  prevFile: () => void
+  /** Toggle view mode */
+  toggleViewMode: () => void
+  /** Toggle sidebar */
+  toggleSidebar: () => void
+  /** Get language label for a file path */
+  getLanguageForFile: (path: string) => string
+  /** Get human-readable file status icon */
+  getFileStatusIcon: (status: DiffFileStatus) => string
+  /** Get total additions across all files */
+  totalAdditions: () => number
+  /** Get total deletions across all files */
+  totalDeletions: () => number
+}
+
+// ---------------------------------------------------------------------------
+// Language detection
+// ---------------------------------------------------------------------------
+
+const extToLanguage: Record<string, string> = {
+  ts: 'typescript',
+  tsx: 'typescript',
+  js: 'javascript',
+  jsx: 'javascript',
+  py: 'python',
+  go: 'go',
+  rs: 'rust',
+  rb: 'ruby',
+  java: 'java',
+  swift: 'swift',
+  kt: 'kotlin',
+  dart: 'dart',
+  php: 'php',
+  lua: 'lua',
+  r: 'r',
+  scala: 'scala',
+  json: 'json',
+  yaml: 'yaml',
+  yml: 'yaml',
+  md: 'markdown',
+  html: 'html',
+  css: 'css',
+  scss: 'scss',
+  sql: 'sql',
+  sh: 'shell',
+  bash: 'shell',
+  zsh: 'shell',
+  xml: 'xml',
+  toml: 'toml',
+  proto: 'protobuf',
+  dockerfile: 'dockerfile',
+  cpp: 'cpp',
+  c: 'c',
+}
+
+function getLanguageForFile(filePath: string): string {
+  const ext = filePath.split('.').pop()?.toLowerCase() || ''
+  const basename = filePath.split('/').pop()?.toLowerCase() || ''
+  if (basename === 'dockerfile') return 'dockerfile'
+  return extToLanguage[ext] || 'plaintext'
+}
+
+// ---------------------------------------------------------------------------
+// Status icons
+// ---------------------------------------------------------------------------
+
+const statusIcons: Record<DiffFileStatus, string> = {
+  added: '\u{1F7E2}',    // green circle
+  modified: '\u{1F7E1}', // yellow circle
+  deleted: '\u{1F534}',  // red circle
+  renamed: '\u{1F535}',  // blue circle
+}
+
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
+
+/**
+ * Create a headless diff viewer API.
+ *
+ * Manages file selection, view mode, sidebar state, and produces ARIA/data
+ * attributes. The actual rendering (Monaco DiffEditor, custom renderer, etc.)
+ * is handled by framework-specific wrappers.
+ */
+export function createDiffViewer(props: DiffViewerProps = {}): DiffViewerAPI {
+  const {
+    files = [],
+    activeFileIndex = 0,
+    viewMode = 'side-by-side',
+    theme = 'dark',
+    language,
+    sidebarOpen = true,
+    onFileSelect,
+    onViewModeChange,
+    onSidebarToggle,
+  } = props
+
+  let currentIndex = Math.min(activeFileIndex, Math.max(0, files.length - 1))
+  let currentViewMode = viewMode
+  let currentSidebarOpen = sidebarOpen
+
+  const state: DiffViewerState = {
+    activeFileIndex: currentIndex,
+    viewMode: currentViewMode,
+    theme,
+    language: language || (files[currentIndex] ? getLanguageForFile(files[currentIndex].path) : 'plaintext'),
+    sidebarOpen: currentSidebarOpen,
+    files,
+  }
+
+  const ariaProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    role: 'region',
+    'aria-label': 'Diff viewer',
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-view-mode': currentViewMode,
+    'data-theme': theme,
+    'data-file-count': String(files.length),
+  }
+
+  if (!currentSidebarOpen) {
+    dataAttributes['data-sidebar-collapsed'] = ''
+  }
+
+  function selectFile(index: number) {
+    if (index >= 0 && index < files.length) {
+      currentIndex = index
+      state.activeFileIndex = index
+      state.language = language || getLanguageForFile(files[index].path)
+      onFileSelect?.(index)
+    }
+  }
+
+  function nextFile() {
+    if (currentIndex < files.length - 1) {
+      selectFile(currentIndex + 1)
+    }
+  }
+
+  function prevFile() {
+    if (currentIndex > 0) {
+      selectFile(currentIndex - 1)
+    }
+  }
+
+  function toggleViewMode() {
+    currentViewMode = currentViewMode === 'side-by-side' ? 'inline' : 'side-by-side'
+    state.viewMode = currentViewMode
+    dataAttributes['data-view-mode'] = currentViewMode
+    onViewModeChange?.(currentViewMode)
+  }
+
+  function toggleSidebar() {
+    currentSidebarOpen = !currentSidebarOpen
+    state.sidebarOpen = currentSidebarOpen
+    if (currentSidebarOpen) {
+      delete dataAttributes['data-sidebar-collapsed']
+    } else {
+      dataAttributes['data-sidebar-collapsed'] = ''
+    }
+    onSidebarToggle?.()
+  }
+
+  function totalAdditions(): number {
+    return files.reduce((sum, f) => sum + f.additions, 0)
+  }
+
+  function totalDeletions(): number {
+    return files.reduce((sum, f) => sum + f.deletions, 0)
+  }
+
+  return {
+    state,
+    ariaProps,
+    dataAttributes,
+    selectFile,
+    nextFile,
+    prevFile,
+    toggleViewMode,
+    toggleSidebar,
+    getLanguageForFile,
+    getFileStatusIcon: (status: DiffFileStatus) => statusIcons[status] || '\u{26AA}',
+    totalAdditions,
+    totalDeletions,
+  }
+}

package/dist/diff-viewer/index.ts

@@ -0,0 +1,20 @@
+export {
+  createDiffViewer,
+  type DiffViewerProps,
+  type DiffViewerAPI,
+  type DiffViewerState,
+  type DiffViewerTheme,
+  type DiffViewMode,
+  type DiffFile,
+  type DiffFileStatus,
+} from './diff-viewer.js'
+
+export {
+  diffViewerTokens,
+  diffViewerVariants,
+  sidebarVariants,
+  sidebarItemVariants,
+  tabBarVariants,
+  tabVariants,
+  statusBarVariants,
+} from './diff-viewer.styles.js'

package/dist/dropdown-menu/dropdown-menu.styles.ts

@@ -0,0 +1,9 @@
+import { cva } from '../shared/index.ts'
+
+export const menuContentVariants = cva({
+  base: 'z-50 rounded-md border bg-popover shadow-md',
+})
+
+export const menuItemVariants = cva({
+  base: 'relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+})

package/dist/dropdown-menu/dropdown-menu.ts

@@ -0,0 +1,139 @@
+import type { AccessibilityProps, KeyboardHandlerMap } from '../shared/index.ts'
+import { createMachine, Keys, generateId } from '../shared/index.ts'
+
+export interface DropdownMenuProps {
+  /** Whether the menu is open (controlled) */
+  open?: boolean
+  /** Whether the menu starts open (uncontrolled) */
+  defaultOpen?: boolean
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void
+}
+
+export interface MenuItemProps {
+  /** Whether the item is disabled */
+  disabled?: boolean
+  /** Callback when the item is selected */
+  onSelect?: () => void
+}
+
+export interface DropdownMenuState {
+  open: boolean
+}
+
+export interface DropdownMenuAPI {
+  /** Current menu state */
+  state: DropdownMenuState
+  /** ARIA attributes for the trigger button */
+  triggerProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** ARIA attributes for the menu content */
+  contentProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** Factory for menu item props */
+  getItemProps(item: MenuItemProps): Partial<AccessibilityProps> & Record<string, unknown>
+  /** Open the menu */
+  open(): void
+  /** Close the menu */
+  close(): void
+  /** Toggle the menu */
+  toggle(): void
+  /** Keyboard handlers for the menu */
+  keyboardHandlers: KeyboardHandlerMap
+  /** Generated IDs for aria linking */
+  ids: {
+    content: string
+  }
+}
+
+export function createDropdownMenu(props: DropdownMenuProps = {}): DropdownMenuAPI {
+  const { open: controlledOpen, defaultOpen = false, onOpenChange } = props
+
+  const machine = createMachine<'open' | 'closed', 'OPEN' | 'CLOSE'>({
+    initial: controlledOpen ?? defaultOpen ? 'open' : 'closed',
+    states: {
+      closed: { on: { OPEN: 'open' } },
+      open: { on: { CLOSE: 'closed' } },
+    },
+  })
+
+  const contentId = generateId('rfr-dropdown-menu')
+
+  function isOpen(): boolean {
+    if (controlledOpen !== undefined) return controlledOpen
+    return machine.matches('open')
+  }
+
+  function openMenu(): void {
+    machine.send('OPEN')
+    onOpenChange?.(true)
+  }
+
+  function closeMenu(): void {
+    machine.send('CLOSE')
+    onOpenChange?.(false)
+  }
+
+  function toggleMenu(): void {
+    if (isOpen()) {
+      closeMenu()
+    } else {
+      openMenu()
+    }
+  }
+
+  function getItemProps(item: MenuItemProps): Partial<AccessibilityProps> & Record<string, unknown> {
+    return {
+      role: 'menuitem',
+      tabIndex: item.disabled ? -1 : 0,
+      'data-disabled': item.disabled ? '' : undefined,
+      'aria-disabled': item.disabled || undefined,
+    }
+  }
+
+  const keyboardHandlers: KeyboardHandlerMap = {
+    [Keys.Escape]: (e) => {
+      e.preventDefault()
+      closeMenu()
+    },
+    [Keys.ArrowDown]: (e) => {
+      e.preventDefault()
+    },
+    [Keys.ArrowUp]: (e) => {
+      e.preventDefault()
+    },
+    [Keys.Enter]: (e) => {
+      e.preventDefault()
+    },
+    [Keys.Home]: (e) => {
+      e.preventDefault()
+    },
+    [Keys.End]: (e) => {
+      e.preventDefault()
+    },
+  }
+
+  const triggerProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    'aria-expanded': isOpen(),
+    'aria-controls': contentId,
+    'aria-haspopup': 'menu',
+  }
+
+  const contentProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    role: 'menu',
+    id: contentId,
+    'data-state': isOpen() ? 'open' : 'closed',
+  }
+
+  return {
+    state: { open: isOpen() },
+    triggerProps,
+    contentProps,
+    getItemProps,
+    open: openMenu,
+    close: closeMenu,
+    toggle: toggleMenu,
+    keyboardHandlers,
+    ids: {
+      content: contentId,
+    },
+  }
+}

package/dist/dropdown-menu/index.ts

@@ -0,0 +1,9 @@
+export {
+  createDropdownMenu,
+  type DropdownMenuProps,
+  type MenuItemProps,
+  type DropdownMenuAPI,
+  type DropdownMenuState,
+} from './dropdown-menu.js'
+
+export { menuContentVariants, menuItemVariants } from './dropdown-menu.styles.js'