@furystack/shades-common-components 12.1.0 → 12.3.0

package/src/components/markdown/markdown-parser.spec.ts

@@ -0,0 +1,258 @@
+import { describe, expect, it } from 'vitest'
+import { parseInline, parseMarkdown, toggleCheckbox } from './markdown-parser.js'
+
+describe('parseInline', () => {
+  it('should parse plain text', () => {
+    const result = parseInline('hello world')
+    expect(result).toEqual([{ type: 'text', content: 'hello world' }])
+  })
+
+  it('should parse inline code', () => {
+    const result = parseInline('use `const x = 1` here')
+    expect(result).toEqual([
+      { type: 'text', content: 'use ' },
+      { type: 'code', content: 'const x = 1' },
+      { type: 'text', content: ' here' },
+    ])
+  })
+
+  it('should parse bold with **', () => {
+    const result = parseInline('this is **bold** text')
+    expect(result).toEqual([
+      { type: 'text', content: 'this is ' },
+      { type: 'bold', children: [{ type: 'text', content: 'bold' }] },
+      { type: 'text', content: ' text' },
+    ])
+  })
+
+  it('should parse italic with *', () => {
+    const result = parseInline('this is *italic* text')
+    expect(result).toEqual([
+      { type: 'text', content: 'this is ' },
+      { type: 'italic', children: [{ type: 'text', content: 'italic' }] },
+      { type: 'text', content: ' text' },
+    ])
+  })
+
+  it('should parse bold+italic with ***', () => {
+    const result = parseInline('this is ***bold italic*** text')
+    expect(result).toEqual([
+      { type: 'text', content: 'this is ' },
+      { type: 'bold', children: [{ type: 'italic', children: [{ type: 'text', content: 'bold italic' }] }] },
+      { type: 'text', content: ' text' },
+    ])
+  })
+
+  it('should parse links', () => {
+    const result = parseInline('click [here](https://example.com) now')
+    expect(result).toEqual([
+      { type: 'text', content: 'click ' },
+      { type: 'link', href: 'https://example.com', children: [{ type: 'text', content: 'here' }] },
+      { type: 'text', content: ' now' },
+    ])
+  })
+
+  it('should parse images', () => {
+    const result = parseInline('see ![alt text](image.png) here')
+    expect(result).toEqual([
+      { type: 'text', content: 'see ' },
+      { type: 'image', src: 'image.png', alt: 'alt text' },
+      { type: 'text', content: ' here' },
+    ])
+  })
+
+  it('should parse nested bold in link', () => {
+    const result = parseInline('[**bold link**](url)')
+    expect(result).toEqual([
+      {
+        type: 'link',
+        href: 'url',
+        children: [{ type: 'bold', children: [{ type: 'text', content: 'bold link' }] }],
+      },
+    ])
+  })
+
+  it('should handle empty string', () => {
+    expect(parseInline('')).toEqual([])
+  })
+})
+
+describe('parseMarkdown', () => {
+  it('should return empty array for empty input', () => {
+    expect(parseMarkdown('')).toEqual([])
+  })
+
+  it('should parse headings level 1–6', () => {
+    const md = '# H1\n## H2\n### H3\n#### H4\n##### H5\n###### H6'
+    const result = parseMarkdown(md)
+    expect(result).toHaveLength(6)
+    for (let i = 0; i < 6; i++) {
+      expect(result[i]).toMatchObject({ type: 'heading', level: i + 1 })
+    }
+  })
+
+  it('should parse a paragraph', () => {
+    const result = parseMarkdown('Hello world\nthis is a paragraph.')
+    expect(result).toEqual([
+      {
+        type: 'paragraph',
+        children: [{ type: 'text', content: 'Hello world this is a paragraph.' }],
+      },
+    ])
+  })
+
+  it('should split paragraphs on blank lines', () => {
+    const result = parseMarkdown('First paragraph.\n\nSecond paragraph.')
+    expect(result).toHaveLength(2)
+    expect(result[0]).toMatchObject({ type: 'paragraph' })
+    expect(result[1]).toMatchObject({ type: 'paragraph' })
+  })
+
+  it('should parse fenced code blocks', () => {
+    const md = '```typescript\nconst x = 1\nconsole.log(x)\n```'
+    const result = parseMarkdown(md)
+    expect(result).toEqual([
+      {
+        type: 'codeBlock',
+        language: 'typescript',
+        content: 'const x = 1\nconsole.log(x)',
+      },
+    ])
+  })
+
+  it('should parse fenced code blocks without language', () => {
+    const md = '```\nhello\n```'
+    const result = parseMarkdown(md)
+    expect(result).toEqual([
+      {
+        type: 'codeBlock',
+        language: undefined,
+        content: 'hello',
+      },
+    ])
+  })
+
+  it('should parse horizontal rules', () => {
+    for (const rule of ['---', '***', '___', '----', '****']) {
+      const result = parseMarkdown(rule)
+      expect(result).toEqual([{ type: 'horizontalRule' }])
+    }
+  })
+
+  it('should parse unordered lists', () => {
+    const md = '- Item 1\n- Item 2\n- Item 3'
+    const result = parseMarkdown(md)
+    expect(result).toHaveLength(1)
+    expect(result[0]).toMatchObject({ type: 'list', ordered: false })
+    const list = result[0] as { type: 'list'; items: unknown[] }
+    expect(list.items).toHaveLength(3)
+  })
+
+  it('should parse ordered lists', () => {
+    const md = '1. First\n2. Second\n3. Third'
+    const result = parseMarkdown(md)
+    expect(result).toHaveLength(1)
+    expect(result[0]).toMatchObject({ type: 'list', ordered: true })
+    const list = result[0] as { type: 'list'; items: unknown[] }
+    expect(list.items).toHaveLength(3)
+  })
+
+  it('should parse checkboxes in unordered lists', () => {
+    const md = '- [x] Done task\n- [ ] Todo task\n- Regular item'
+    const result = parseMarkdown(md)
+    expect(result).toHaveLength(1)
+    const list = result[0] as { type: 'list'; items: Array<{ checkbox?: string }> }
+    expect(list.items[0].checkbox).toBe('checked')
+    expect(list.items[1].checkbox).toBe('unchecked')
+    expect(list.items[2].checkbox).toBeUndefined()
+  })
+
+  it('should track sourceLineIndex on list items', () => {
+    const md = '- [x] Done\n- [ ] Todo'
+    const result = parseMarkdown(md)
+    const list = result[0] as { type: 'list'; items: Array<{ sourceLineIndex: number }> }
+    expect(list.items[0].sourceLineIndex).toBe(0)
+    expect(list.items[1].sourceLineIndex).toBe(1)
+  })
+
+  it('should parse blockquotes', () => {
+    const md = '> This is a quote\n> Second line'
+    const result = parseMarkdown(md)
+    expect(result).toHaveLength(1)
+    expect(result[0]).toMatchObject({ type: 'blockquote' })
+    const bq = result[0] as { type: 'blockquote'; children: unknown[] }
+    expect(bq.children).toHaveLength(1)
+    expect(bq.children[0]).toMatchObject({ type: 'paragraph' })
+  })
+
+  it('should parse a complex document', () => {
+    const md = [
+      '# Title',
+      '',
+      'A paragraph with **bold** and *italic*.',
+      '',
+      '## List Section',
+      '',
+      '- [x] Task done',
+      '- [ ] Task pending',
+      '',
+      '> A blockquote',
+      '',
+      '---',
+      '',
+      '```js',
+      'console.log("hi")',
+      '```',
+    ].join('\n')
+
+    const result = parseMarkdown(md)
+    expect(result[0]).toMatchObject({ type: 'heading', level: 1 })
+    expect(result[1]).toMatchObject({ type: 'paragraph' })
+    expect(result[2]).toMatchObject({ type: 'heading', level: 2 })
+    expect(result[3]).toMatchObject({ type: 'list', ordered: false })
+    expect(result[4]).toMatchObject({ type: 'blockquote' })
+    expect(result[5]).toMatchObject({ type: 'horizontalRule' })
+    expect(result[6]).toMatchObject({ type: 'codeBlock', language: 'js' })
+  })
+})
+
+describe('toggleCheckbox', () => {
+  it('should toggle an unchecked checkbox to checked', () => {
+    const source = '- [ ] Todo item'
+    const result = toggleCheckbox(source, 0)
+    expect(result).toBe('- [x] Todo item')
+  })
+
+  it('should toggle a checked checkbox to unchecked', () => {
+    const source = '- [x] Done item'
+    const result = toggleCheckbox(source, 0)
+    expect(result).toBe('- [ ] Done item')
+  })
+
+  it('should toggle the correct line in a multi-line document', () => {
+    const source = '- [x] Done\n- [ ] Todo\n- [ ] Another'
+    const result = toggleCheckbox(source, 1)
+    expect(result).toBe('- [x] Done\n- [x] Todo\n- [ ] Another')
+  })
+
+  it('should return original string for out-of-bounds index', () => {
+    const source = '- [ ] Todo'
+    expect(toggleCheckbox(source, 5)).toBe(source)
+    expect(toggleCheckbox(source, -1)).toBe(source)
+  })
+
+  it('should return original string for non-checkbox line', () => {
+    const source = 'Regular text'
+    expect(toggleCheckbox(source, 0)).toBe(source)
+  })
+
+  it('should not toggle [ ] that appears outside a list item', () => {
+    const source = 'This line has [ ] in it but is not a list item'
+    expect(toggleCheckbox(source, 0)).toBe(source)
+  })
+
+  it('should toggle checkboxes with * list marker', () => {
+    const source = '* [ ] Star item'
+    expect(toggleCheckbox(source, 0)).toBe('* [x] Star item')
+  })
+})

package/src/components/markdown/markdown-parser.ts

@@ -0,0 +1,333 @@
+/**
+ * Zero-dependency Markdown parser that converts a Markdown string into an AST.
+ */
+
+export type MarkdownNode = HeadingNode | ParagraphNode | CodeBlockNode | BlockquoteNode | ListNode | HorizontalRuleNode
+
+export type HeadingNode = {
+  type: 'heading'
+  level: 1 | 2 | 3 | 4 | 5 | 6
+  children: InlineNode[]
+}
+
+export type ParagraphNode = {
+  type: 'paragraph'
+  children: InlineNode[]
+}
+
+export type CodeBlockNode = {
+  type: 'codeBlock'
+  language?: string
+  content: string
+}
+
+export type BlockquoteNode = {
+  type: 'blockquote'
+  children: MarkdownNode[]
+}
+
+export type ListNode = {
+  type: 'list'
+  ordered: boolean
+  items: ListItemNode[]
+}
+
+export type HorizontalRuleNode = {
+  type: 'horizontalRule'
+}
+
+export type ListItemNode = {
+  children: InlineNode[]
+  checkbox?: 'checked' | 'unchecked'
+  sourceLineIndex: number
+}
+
+export type InlineNode = TextNode | BoldNode | ItalicNode | InlineCodeNode | LinkNode | ImageNode
+
+export type TextNode = { type: 'text'; content: string }
+export type BoldNode = { type: 'bold'; children: InlineNode[] }
+export type ItalicNode = { type: 'italic'; children: InlineNode[] }
+export type InlineCodeNode = { type: 'code'; content: string }
+export type LinkNode = { type: 'link'; href: string; children: InlineNode[] }
+export type ImageNode = { type: 'image'; src: string; alt: string }
+
+const HORIZONTAL_RULE_RE = /^(\*{3,}|-{3,}|_{3,})\s*$/
+const HEADING_RE = /^(#{1,6})\s+(.*)/
+const FENCED_CODE_OPEN_RE = /^```(\w*)\s*$/
+const FENCED_CODE_CLOSE_RE = /^```\s*$/
+const UNORDERED_LIST_RE = /^(\s*)[-*]\s+(.*)/
+const ORDERED_LIST_RE = /^(\s*)\d+\.\s+(.*)/
+const BLOCKQUOTE_RE = /^>\s?(.*)/
+const CHECKBOX_UNCHECKED_RE = /^\[[ ]\]\s+(.*)/
+const CHECKBOX_CHECKED_RE = /^\[[xX]\]\s+(.*)/
+
+/**
+ * Parse inline Markdown formatting into an array of InlineNodes.
+ *
+ * Known limitations:
+ * - Backslash escapes (e.g. `\*`) are not supported; special characters are always interpreted.
+ * - Underscore `_` markers are not restricted to word boundaries, so identifiers like
+ *   `some_variable_name` may produce false italic/bold matches.
+ */
+export const parseInline = (text: string): InlineNode[] => {
+  const nodes: InlineNode[] = []
+  let pos = 0
+
+  while (pos < text.length) {
+    // Inline code
+    if (text[pos] === '`') {
+      const closeIdx = text.indexOf('`', pos + 1)
+      if (closeIdx !== -1) {
+        nodes.push({ type: 'code', content: text.slice(pos + 1, closeIdx) })
+        pos = closeIdx + 1
+        continue
+      }
+    }
+
+    // Image ![alt](src)
+    if (text[pos] === '!' && text[pos + 1] === '[') {
+      const altClose = text.indexOf(']', pos + 2)
+      if (altClose !== -1 && text[altClose + 1] === '(') {
+        const srcClose = text.indexOf(')', altClose + 2)
+        if (srcClose !== -1) {
+          const alt = text.slice(pos + 2, altClose)
+          const src = text.slice(altClose + 2, srcClose)
+          nodes.push({ type: 'image', src, alt })
+          pos = srcClose + 1
+          continue
+        }
+      }
+    }
+
+    // Link [text](href)
+    if (text[pos] === '[') {
+      const textClose = text.indexOf(']', pos + 1)
+      if (textClose !== -1 && text[textClose + 1] === '(') {
+        const hrefClose = text.indexOf(')', textClose + 2)
+        if (hrefClose !== -1) {
+          const linkText = text.slice(pos + 1, textClose)
+          const href = text.slice(textClose + 2, hrefClose)
+          nodes.push({ type: 'link', href, children: parseInline(linkText) })
+          pos = hrefClose + 1
+          continue
+        }
+      }
+    }
+
+    // Bold+Italic (***text***) or Bold (**text**) or Italic (*text*)
+    if (text[pos] === '*' || text[pos] === '_') {
+      const marker = text[pos]
+
+      // Count consecutive markers
+      let markerCount = 0
+      while (pos + markerCount < text.length && text[pos + markerCount] === marker) {
+        markerCount++
+      }
+
+      if (markerCount >= 3) {
+        const closeIdx = text.indexOf(marker.repeat(3), pos + 3)
+        if (closeIdx !== -1) {
+          const inner = text.slice(pos + 3, closeIdx)
+          nodes.push({ type: 'bold', children: [{ type: 'italic', children: parseInline(inner) }] })
+          pos = closeIdx + 3
+          continue
+        }
+      }
+
+      if (markerCount >= 2) {
+        const closeIdx = text.indexOf(marker.repeat(2), pos + 2)
+        if (closeIdx !== -1) {
+          const inner = text.slice(pos + 2, closeIdx)
+          nodes.push({ type: 'bold', children: parseInline(inner) })
+          pos = closeIdx + 2
+          continue
+        }
+      }
+
+      if (markerCount >= 1) {
+        const closeIdx = text.indexOf(marker, pos + 1)
+        if (closeIdx !== -1) {
+          const inner = text.slice(pos + 1, closeIdx)
+          nodes.push({ type: 'italic', children: parseInline(inner) })
+          pos = closeIdx + 1
+          continue
+        }
+      }
+    }
+
+    // Plain text — consume until the next special character
+    let end = pos + 1
+    while (end < text.length && !['`', '!', '[', '*', '_'].includes(text[end])) {
+      end++
+    }
+    const content = text.slice(pos, end)
+    const lastNode = nodes[nodes.length - 1]
+    if (lastNode?.type === 'text') {
+      lastNode.content += content
+    } else {
+      nodes.push({ type: 'text', content })
+    }
+    pos = end
+  }
+
+  return nodes
+}
+
+/**
+ * Parse a Markdown string into an array of block-level MarkdownNodes.
+ */
+export const parseMarkdown = (source: string): MarkdownNode[] => {
+  const lines = source.split('\n')
+  const nodes: MarkdownNode[] = []
+  let i = 0
+
+  while (i < lines.length) {
+    const line = lines[i]
+
+    // Blank lines — skip
+    if (line.trim() === '') {
+      i++
+      continue
+    }
+
+    // Fenced code block
+    const codeMatch = FENCED_CODE_OPEN_RE.exec(line)
+    if (codeMatch) {
+      const language = codeMatch[1] || undefined
+      const codeLines: string[] = []
+      i++
+      while (i < lines.length && !FENCED_CODE_CLOSE_RE.test(lines[i])) {
+        codeLines.push(lines[i])
+        i++
+      }
+      nodes.push({ type: 'codeBlock', language, content: codeLines.join('\n') })
+      i++ // skip closing ```
+      continue
+    }
+
+    // Horizontal rule
+    if (HORIZONTAL_RULE_RE.test(line)) {
+      nodes.push({ type: 'horizontalRule' })
+      i++
+      continue
+    }
+
+    // Heading
+    const headingMatch = HEADING_RE.exec(line)
+    if (headingMatch) {
+      const level = headingMatch[1].length as 1 | 2 | 3 | 4 | 5 | 6
+      nodes.push({ type: 'heading', level, children: parseInline(headingMatch[2]) })
+      i++
+      continue
+    }
+
+    // Blockquote
+    const bqMatch = BLOCKQUOTE_RE.exec(line)
+    if (bqMatch) {
+      const bqLines: string[] = []
+      while (i < lines.length) {
+        const bqLineMatch = BLOCKQUOTE_RE.exec(lines[i])
+        if (bqLineMatch) {
+          bqLines.push(bqLineMatch[1])
+          i++
+        } else {
+          break
+        }
+      }
+      nodes.push({ type: 'blockquote', children: parseMarkdown(bqLines.join('\n')) })
+      continue
+    }
+
+    // Unordered list
+    const ulMatch = UNORDERED_LIST_RE.exec(line)
+    if (ulMatch) {
+      const items: ListItemNode[] = []
+      while (i < lines.length) {
+        const itemMatch = UNORDERED_LIST_RE.exec(lines[i])
+        if (!itemMatch) break
+        const itemText = itemMatch[2]
+        const checkedMatch = CHECKBOX_CHECKED_RE.exec(itemText)
+        const uncheckedMatch = CHECKBOX_UNCHECKED_RE.exec(itemText)
+        if (checkedMatch) {
+          items.push({
+            children: parseInline(checkedMatch[1]),
+            checkbox: 'checked',
+            sourceLineIndex: i,
+          })
+        } else if (uncheckedMatch) {
+          items.push({
+            children: parseInline(uncheckedMatch[1]),
+            checkbox: 'unchecked',
+            sourceLineIndex: i,
+          })
+        } else {
+          items.push({
+            children: parseInline(itemText),
+            sourceLineIndex: i,
+          })
+        }
+        i++
+      }
+      nodes.push({ type: 'list', ordered: false, items })
+      continue
+    }
+
+    // Ordered list
+    const olMatch = ORDERED_LIST_RE.exec(line)
+    if (olMatch) {
+      const items: ListItemNode[] = []
+      while (i < lines.length) {
+        const itemMatch = ORDERED_LIST_RE.exec(lines[i])
+        if (!itemMatch) break
+        items.push({
+          children: parseInline(itemMatch[2]),
+          sourceLineIndex: i,
+        })
+        i++
+      }
+      nodes.push({ type: 'list', ordered: true, items })
+      continue
+    }
+
+    // Paragraph — collect consecutive non-blank, non-block-start lines
+    const paraLines: string[] = []
+    while (i < lines.length) {
+      const pLine = lines[i]
+      if (pLine.trim() === '') break
+      if (HEADING_RE.test(pLine)) break
+      if (FENCED_CODE_OPEN_RE.test(pLine)) break
+      if (HORIZONTAL_RULE_RE.test(pLine)) break
+      if (BLOCKQUOTE_RE.test(pLine)) break
+      if (UNORDERED_LIST_RE.test(pLine)) break
+      if (ORDERED_LIST_RE.test(pLine)) break
+      paraLines.push(pLine)
+      i++
+    }
+    if (paraLines.length > 0) {
+      nodes.push({ type: 'paragraph', children: parseInline(paraLines.join(' ')) })
+    }
+  }
+
+  return nodes
+}
+
+const TOGGLE_UNCHECKED_RE = /^(\s*[-*]\s+)\[ \]/
+const TOGGLE_CHECKED_RE = /^(\s*[-*]\s+)\[[xX]\]/
+
+/**
+ * Toggle a checkbox at the given source line index in the raw Markdown string.
+ * Only matches checkboxes in unordered list items (`- [ ]` or `* [x]`).
+ * Returns the updated string.
+ */
+export const toggleCheckbox = (source: string, sourceLineIndex: number): string => {
+  const lines = source.split('\n')
+  if (sourceLineIndex < 0 || sourceLineIndex >= lines.length) return source
+
+  const line = lines[sourceLineIndex]
+  if (TOGGLE_UNCHECKED_RE.test(line)) {
+    lines[sourceLineIndex] = line.replace(TOGGLE_UNCHECKED_RE, '$1[x]')
+  } else if (TOGGLE_CHECKED_RE.test(line)) {
+    lines[sourceLineIndex] = line.replace(TOGGLE_CHECKED_RE, '$1[ ]')
+  }
+  return lines.join('\n')
+}

package/src/components/page-container/index.tsx

@@ -30,7 +30,7 @@ export type PageContainerProps = {
  * ```tsx
  * <PageContainer maxWidth="800px" centered padding="48px" gap="24px">
  *   <PageHeader
- *     icon="👥"
+ *     icon={<Icon icon={icons.users} />}
  *     title="Users"
  *     description="Manage user accounts and their roles."
  *   />

package/src/components/page-container/page-header.tsx

@@ -6,8 +6,8 @@ import { Paper } from '../paper.js'
  * Props for the PageHeader component.
  */
 export type PageHeaderProps = {
-  /** Optional icon (emoji or single character) displayed before the title */
-  icon?: string
+  /** Optional icon displayed before the title (string or JSX element such as an Icon component) */
+  icon?: JSX.Element | string
   /** The page title */
   title: string
   /** Optional description text displayed below the title */
@@ -27,9 +27,9 @@ export type PageHeaderProps = {
  *
  * @example
  * ```tsx
- * // Simple header with icon and description
+ * // Header with an Icon component
  * <PageHeader
- *   icon="👥"
+ *   icon={<Icon icon={icons.users} />}
  *   title="Users"
  *   description="Manage user accounts and their roles."
  * />
@@ -39,7 +39,7 @@ export type PageHeaderProps = {
  * ```tsx
  * // Header with action buttons
  * <PageHeader
- *   icon="📁"
+ *   icon={<Icon icon={icons.folder} />}
  *   title="Projects"
  *   description="View and manage your projects."
  *   actions={

package/src/components/styles.tsx

@@ -3,6 +3,7 @@ import { cssVariableTheme } from '../services/css-variable-theme.js'
 declare global {
   interface CSSStyleDeclaration {
     backdropFilter: string
+    fieldSizing: string
   }
 }
 

package/src/components/suggest/index.tsx

@@ -16,7 +16,7 @@ export * from './suggestion-list.js'
 export * from './suggestion-result.js'
 
 export interface SuggestProps<T> {
-  defaultPrefix: string
+  defaultPrefix: JSX.Element | string
   getEntries: (term: string) => Promise<T[]>
   getSuggestionEntry: (entry: T) => SuggestionResult
   onSelectSuggestion: (entry: T) => void