@unabridged/midwest 0.22.1 → 0.23.1

package/README.md

@@ -3,7 +3,7 @@
 [![Rails Tests](https://github.com/unabridged/midwest/actions/workflows/rails-tests.yml/badge.svg?branch=main)](https://github.com/unabridged/midwest/actions/workflows/rails-tests.yml)
 [![Bridgetown Tests](https://github.com/unabridged/midwest/actions/workflows/bridgetown-tests.yml/badge.svg?branch=main)](https://github.com/unabridged/midwest/actions/workflows/bridgetown-tests.yml)
 [![Ruby](https://img.shields.io/badge/Ruby-3.3_%7C_3.4-CC342D?logo=ruby&logoColor=white)](https://github.com/unabridged/midwest/actions/workflows/ci.yml)
-[![Coverage](https://img.shields.io/badge/coverage-95%25-brightgreen)](https://github.com/unabridged/midwest/actions/workflows/ci.yml)
+[![Coverage](https://img.shields.io/badge/coverage-96%25-brightgreen)](https://github.com/unabridged/midwest/actions/workflows/ci.yml)
 
 Midwest Component Library is an implementation of the Midwest Design System using [ViewComponent](https://github.com/github/view_component).
 

package/app/assets/javascript/midwest/index.ts

@@ -32,6 +32,10 @@ import PasswordRequirements from '../../../components/midwest/password_requireme
 import CodeBlock from '../../../components/midwest/code_block_component/code_block_component_controller'
 import DatePicker from '../../../components/midwest/form/date_picker_component/date_picker_component_controller'
 import TimePicker from '../../../components/midwest/form/time_picker_component/time_picker_component_controller'
+import IntersectionObserver from '../../../components/midwest/intersection_observer_component/intersection_observer_component_controller'
+import FocusTrap from '../../../components/midwest/focus_trap_component/focus_trap_component_controller'
+import Onboarding from '../../../components/midwest/onboarding_component/onboarding_component_controller'
+import ThemeSwitch from '../../../components/midwest/form/switch_component/theme_switch_controller'
 /* IMPORTS */
 
 export { Card, Banner, CountdownTimer, Chart }
@@ -71,5 +75,9 @@ export function registerMidwestControllers (application: any) {
   application.register('midwest-code-block', CodeBlock)
   application.register('midwest-date-picker', DatePicker)
   application.register('midwest-time-picker', TimePicker)
+  application.register('midwest-intersection-observer', IntersectionObserver)
+  application.register('midwest-focus-trap', FocusTrap)
+  application.register('midwest-onboarding', Onboarding)
+  application.register('midwest-theme-switch', ThemeSwitch)
   /* EXPORTS */
 }

package/app/assets/javascript/midwest/keyboard_navigation.ts

@@ -0,0 +1,68 @@
+// Shared keyboard-navigation helpers for menu/list components.
+//
+// Implements the WAI-ARIA "roving focus" pattern: arrow keys move DOM focus
+// between a flat list of items, Home/End jump to the ends, and Escape/Tab hand
+// control back to the caller (typically to close a popover and restore focus).
+// Components own *which* elements are navigable and *what* closing means; this
+// module owns the key handling so the behavior stays consistent across the
+// library.
+
+const NAVIGATION_KEYS = ['ArrowDown', 'ArrowUp', 'Home', 'End', 'Escape', 'Tab']
+
+export interface RovingFocusOptions {
+  // Called on Escape. Typically closes the menu and returns focus to the trigger.
+  onEscape?: () => void
+  // Called on Tab. The default Tab behavior is left intact so focus still leaves
+  // the menu; use this to close the menu alongside it.
+  onTab?: () => void
+  // When true (default) arrow navigation wraps from the last item to the first
+  // and vice versa. When false it stops at the ends.
+  loop?: boolean
+}
+
+// Handles a keydown against a roving-focus list. Returns true when the event
+// was one this helper is responsible for, so callers can `stopPropagation()`
+// only for keys that were actually handled.
+export function handleRovingFocusKeydown (
+  event: KeyboardEvent,
+  items: HTMLElement[],
+  options: RovingFocusOptions = {}
+): boolean {
+  if (items.length === 0) return false
+  if (!NAVIGATION_KEYS.includes(event.key)) return false
+
+  const { onEscape, onTab, loop = true } = options
+  const current = items.findIndex(item => item === document.activeElement)
+
+  switch (event.key) {
+    case 'ArrowDown': {
+      event.preventDefault()
+      const next = current < items.length - 1 ? current + 1 : (loop ? 0 : items.length - 1)
+      items[next].focus()
+      break
+    }
+    case 'ArrowUp': {
+      event.preventDefault()
+      const prev = current > 0 ? current - 1 : (loop ? items.length - 1 : 0)
+      items[prev].focus()
+      break
+    }
+    case 'Home':
+      event.preventDefault()
+      items[0].focus()
+      break
+    case 'End':
+      event.preventDefault()
+      items[items.length - 1].focus()
+      break
+    case 'Escape':
+      event.preventDefault()
+      onEscape?.()
+      break
+    case 'Tab':
+      onTab?.()
+      break
+  }
+
+  return true
+}

package/app/assets/javascript/midwest/markdown.ts

@@ -0,0 +1,79 @@
+// Tiny, dependency-free Markdown renderer for streamed chat responses.
+//
+// It is intentionally a small subset (paragraphs, lists, fenced/inline code,
+// bold, italic, and safe links) rather than a full CommonMark implementation —
+// the command palette streams tokens and cannot afford a heavy parser.
+//
+// Security: model output is untrusted. Text is HTML-escaped BEFORE any markup is
+// applied, and links are restricted to http(s)/mailto, so the result is safe to
+// assign to innerHTML.
+
+const PLACEHOLDER = '\uE000' // private-use char, unlikely in real text
+
+export function renderMarkdown (src: string): string {
+  const blocks: string[] = []
+
+  // Pull fenced code blocks out first so their contents are never treated as markup.
+  const withoutFences = src.replace(/```(\w*)\n?([\s\S]*?)```/g, (_match, _lang, code: string) => {
+    const body = escapeHtml(code.replace(/\n$/, ''))
+    blocks.push(`<pre class="command-palette-code"><code>${body}</code></pre>`)
+    return `${PLACEHOLDER}${blocks.length - 1}${PLACEHOLDER}`
+  })
+
+  const lines = escapeHtml(withoutFences).split('\n')
+  const out: string[] = []
+  let listOpen = false
+
+  const closeList = () => {
+    if (listOpen) {
+      out.push('</ul>')
+      listOpen = false
+    }
+  }
+
+  for (const line of lines) {
+    const placeholder = line.match(new RegExp(`^${PLACEHOLDER}(\\d+)${PLACEHOLDER}$`))
+    if (placeholder) {
+      closeList()
+      out.push(line)
+      continue
+    }
+
+    const item = line.match(/^\s*[-*]\s+(.*)$/)
+    if (item) {
+      if (!listOpen) {
+        out.push('<ul>')
+        listOpen = true
+      }
+      out.push(`<li>${inline(item[1])}</li>`)
+      continue
+    }
+
+    closeList()
+    if (line.trim() !== '') out.push(`<p>${inline(line)}</p>`)
+  }
+
+  closeList()
+
+  return out
+    .join('\n')
+    .replace(new RegExp(`${PLACEHOLDER}(\\d+)${PLACEHOLDER}`, 'g'), (_match, index: string) => blocks[Number(index)])
+}
+
+function inline (text: string): string {
+  return text
+    .replace(/`([^`]+)`/g, '<code>$1</code>')
+    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*([^*]+)\*/g, '<em>$1</em>')
+    .replace(
+      /\[([^\]]+)\]\((https?:\/\/[^\s)]+|mailto:[^\s)]+)\)/g,
+      '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
+    )
+}
+
+function escapeHtml (text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+}