@furystack/shades-common-components 12.2.0 → 12.4.0

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/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/typography.tsx

@@ -3,8 +3,8 @@ import { Shade, createComponent } from '@furystack/shades'
 import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js'
 import { paletteMainColors } from '../services/palette-css-vars.js'
 import type { Palette } from '../services/theme-provider-service.js'
-import { Icon } from './icons/icon.js'
 import { clipboard } from './icons/icon-definitions.js'
+import { Icon } from './icons/icon.js'
 
 /**
  * Typography variant determines semantic HTML tag and default styles.
@@ -50,74 +50,85 @@ type VariantDef = {
   lineHeight: string
   letterSpacing: string
   textTransform?: string
-  scale?: string
+  marginTop?: string
+  marginBottom?: string
 }
 
 const variantDefs: Record<TypographyVariant, VariantDef> = {
   h1: {
-    fontSize: cssVariableTheme.typography.fontSize.xl,
+    fontSize: cssVariableTheme.typography.fontSize.xxxxl,
     fontWeight: cssVariableTheme.typography.fontWeight.bold,
     lineHeight: cssVariableTheme.typography.lineHeight.tight,
     letterSpacing: cssVariableTheme.typography.letterSpacing.tight,
-    scale: '2',
+    marginBottom: '0.3em',
   },
   h2: {
-    fontSize: cssVariableTheme.typography.fontSize.xl,
+    fontSize: cssVariableTheme.typography.fontSize.xxxl,
     fontWeight: cssVariableTheme.typography.fontWeight.bold,
     lineHeight: cssVariableTheme.typography.lineHeight.tight,
     letterSpacing: cssVariableTheme.typography.letterSpacing.dense,
-    scale: '1.6',
+    marginTop: '1.5em',
+    marginBottom: '0.3em',
   },
   h3: {
-    fontSize: cssVariableTheme.typography.fontSize.xl,
+    fontSize: cssVariableTheme.typography.fontSize.xxl,
     fontWeight: cssVariableTheme.typography.fontWeight.semibold,
     lineHeight: cssVariableTheme.typography.lineHeight.tight,
     letterSpacing: cssVariableTheme.typography.letterSpacing.normal,
-    scale: '1.3',
+    marginTop: '1.25em',
+    marginBottom: '0.25em',
   },
   h4: {
-    fontSize: cssVariableTheme.typography.fontSize.lg,
+    fontSize: cssVariableTheme.typography.fontSize.xl,
     fontWeight: cssVariableTheme.typography.fontWeight.semibold,
     lineHeight: cssVariableTheme.typography.lineHeight.tight,
     letterSpacing: cssVariableTheme.typography.letterSpacing.wide,
-    scale: '1.15',
+    marginTop: '1em',
+    marginBottom: '0.25em',
   },
   h5: {
     fontSize: cssVariableTheme.typography.fontSize.lg,
     fontWeight: cssVariableTheme.typography.fontWeight.medium,
     lineHeight: cssVariableTheme.typography.lineHeight.normal,
     letterSpacing: cssVariableTheme.typography.letterSpacing.normal,
+    marginTop: '0.75em',
+    marginBottom: '0.35em',
   },
   h6: {
     fontSize: cssVariableTheme.typography.fontSize.md,
     fontWeight: cssVariableTheme.typography.fontWeight.medium,
     lineHeight: cssVariableTheme.typography.lineHeight.normal,
     letterSpacing: cssVariableTheme.typography.letterSpacing.wide,
-    scale: '1.1',
+    marginTop: '0.5em',
+    marginBottom: '0.2em',
   },
   subtitle1: {
     fontSize: cssVariableTheme.typography.fontSize.md,
     fontWeight: cssVariableTheme.typography.fontWeight.medium,
     lineHeight: cssVariableTheme.typography.lineHeight.normal,
     letterSpacing: cssVariableTheme.typography.letterSpacing.wide,
+    marginBottom: '0.35em',
   },
   subtitle2: {
     fontSize: cssVariableTheme.typography.fontSize.sm,
     fontWeight: cssVariableTheme.typography.fontWeight.medium,
     lineHeight: cssVariableTheme.typography.lineHeight.normal,
     letterSpacing: '0.1px',
+    marginBottom: '0.25em',
   },
   body1: {
     fontSize: cssVariableTheme.typography.fontSize.md,
     fontWeight: cssVariableTheme.typography.fontWeight.normal,
     lineHeight: cssVariableTheme.typography.lineHeight.relaxed,
     letterSpacing: cssVariableTheme.typography.letterSpacing.wide,
+    marginBottom: '0.75em',
   },
   body2: {
     fontSize: cssVariableTheme.typography.fontSize.sm,
     fontWeight: cssVariableTheme.typography.fontWeight.normal,
     lineHeight: cssVariableTheme.typography.lineHeight.relaxed,
     letterSpacing: cssVariableTheme.typography.letterSpacing.wide,
+    marginBottom: '0.5em',
   },
   caption: {
     fontSize: cssVariableTheme.typography.fontSize.xs,
@@ -131,6 +142,7 @@ const variantDefs: Record<TypographyVariant, VariantDef> = {
     lineHeight: cssVariableTheme.typography.lineHeight.normal,
     letterSpacing: cssVariableTheme.typography.letterSpacing.widest,
     textTransform: 'uppercase',
+    marginBottom: '0.5em',
   },
 }
 
@@ -146,10 +158,11 @@ const buildVariantCssRules = (): Record<string, Record<string, string>> => {
     if (def.textTransform) {
       rule.textTransform = def.textTransform
     }
-    if (def.scale && def.scale !== '1') {
-      rule.transformOrigin = 'left top'
-      rule.transform = `scale(${def.scale})`
-      rule.marginBottom = `calc((${def.scale} - 1) * 1em)`
+    if (def.marginTop) {
+      rule.marginTop = def.marginTop
+    }
+    if (def.marginBottom) {
+      rule.marginBottom = def.marginBottom
     }
     rules[`&[data-variant="${variant}"]`] = rule
   }

package/src/services/css-variable-theme.spec.ts

@@ -59,6 +59,9 @@ describe('css-variable-theme', () => {
       expect(cssVariableTheme.typography.fontFamily).toBe('var(--shades-theme-typography-font-family)')
       expect(cssVariableTheme.typography.fontSize.xs).toBe('var(--shades-theme-typography-font-size-xs)')
       expect(cssVariableTheme.typography.fontSize.md).toBe('var(--shades-theme-typography-font-size-md)')
+      expect(cssVariableTheme.typography.fontSize.xxl).toBe('var(--shades-theme-typography-font-size-xxl)')
+      expect(cssVariableTheme.typography.fontSize.xxxl).toBe('var(--shades-theme-typography-font-size-xxxl)')
+      expect(cssVariableTheme.typography.fontSize.xxxxl).toBe('var(--shades-theme-typography-font-size-xxxxl)')
       expect(cssVariableTheme.typography.fontWeight.normal).toBe('var(--shades-theme-typography-font-weight-normal)')
       expect(cssVariableTheme.typography.fontWeight.bold).toBe('var(--shades-theme-typography-font-weight-bold)')
       expect(cssVariableTheme.typography.lineHeight.tight).toBe('var(--shades-theme-typography-line-height-tight)')

package/src/services/css-variable-theme.ts

@@ -102,6 +102,9 @@ export const cssVariableTheme = {
       md: 'var(--shades-theme-typography-font-size-md)',
       lg: 'var(--shades-theme-typography-font-size-lg)',
       xl: 'var(--shades-theme-typography-font-size-xl)',
+      xxl: 'var(--shades-theme-typography-font-size-xxl)',
+      xxxl: 'var(--shades-theme-typography-font-size-xxxl)',
+      xxxxl: 'var(--shades-theme-typography-font-size-xxxxl)',
     },
     fontWeight: {
       normal: 'var(--shades-theme-typography-font-weight-normal)',

package/src/services/default-dark-palette.ts

@@ -0,0 +1,57 @@
+import type { Palette } from './theme-provider-service.js'
+
+/**
+ * Color palette optimized for dark backgrounds (#121212).
+ * Uses lighter Material Design color variants to ensure
+ * WCAG AA contrast (≥4.5:1) against the dark theme background.
+ */
+export const defaultDarkPalette: Palette = {
+  primary: {
+    light: '#9fa8da',
+    lightContrast: '#000000',
+    main: '#7986cb',
+    mainContrast: '#000000',
+    dark: '#5c6bc0',
+    darkContrast: '#ffffff',
+  },
+  secondary: {
+    light: '#4aedc4',
+    lightContrast: '#000000',
+    main: '#1de9b6',
+    mainContrast: '#000000',
+    dark: '#14a37f',
+    darkContrast: '#ffffff',
+  },
+  error: {
+    light: '#ef9a9a',
+    lightContrast: '#000000',
+    main: '#ef5350',
+    mainContrast: '#000000',
+    dark: '#e53935',
+    darkContrast: '#ffffff',
+  },
+  warning: {
+    light: '#ffb74d',
+    lightContrast: '#000000',
+    main: '#ff9800',
+    mainContrast: '#000000',
+    dark: '#f57c00',
+    darkContrast: '#000000',
+  },
+  info: {
+    light: '#90caf9',
+    lightContrast: '#000000',
+    main: '#42a5f5',
+    mainContrast: '#000000',
+    dark: '#1e88e5',
+    darkContrast: '#ffffff',
+  },
+  success: {
+    light: '#81c784',
+    lightContrast: '#000000',
+    main: '#4caf50',
+    mainContrast: '#000000',
+    dark: '#388e3c',
+    darkContrast: '#ffffff',
+  },
+}

package/src/services/default-dark-theme.ts

@@ -1,4 +1,4 @@
-import { defaultPalette } from './default-palette.js'
+import { defaultDarkPalette } from './default-dark-palette.js'
 import type { Theme } from './theme-provider-service.js'
 
 export const defaultDarkTheme = {
@@ -16,10 +16,10 @@ export const defaultDarkTheme = {
     disabledBackground: 'rgba(255, 255, 255, 0.12)',
   },
   background: {
-    default: '#303030',
-    paper: '#424242',
+    default: '#121212',
+    paper: '#1e1e1e',
   },
-  palette: defaultPalette,
+  palette: defaultDarkPalette,
   divider: 'rgba(255, 255, 255, 0.12)',
   action: {
     hoverBackground: 'rgba(255, 255, 255, 0.08)',
@@ -54,6 +54,9 @@ export const defaultDarkTheme = {
       md: '14px',
       lg: '16px',
       xl: '24px',
+      xxl: '30px',
+      xxxl: '36px',
+      xxxxl: '48px',
     },
     fontWeight: {
       normal: '400',

package/src/services/default-light-theme.ts

@@ -54,6 +54,9 @@ export const defaultLightTheme = {
       md: '14px',
       lg: '16px',
       xl: '24px',
+      xxl: '30px',
+      xxxl: '36px',
+      xxxxl: '48px',
     },
     fontWeight: {
       normal: '400',

package/src/services/index.ts

@@ -1,6 +1,7 @@
 export * from './click-away-service.js'
 export * from './collection-service.js'
 export * from './css-variable-theme.js'
+export * from './default-dark-palette.js'
 export * from './default-dark-theme.js'
 export * from './default-light-theme.js'
 export * from './default-palette.js'

package/src/services/theme-provider-service.ts

@@ -158,8 +158,14 @@ export type FontSizeScale = {
   md: string
   /** 16px - large body, icons */
   lg: string
-  /** 24px - page headings */
+  /** 24px - subheadings, large UI elements */
   xl: string
+  /** 30px - small headings (h3) */
+  xxl: string
+  /** 36px - medium headings (h2) */
+  xxxl: string
+  /** 48px - large headings (h1) */
+  xxxxl: string
 }
 
 /**