@tachui/core 0.7.0-alpha1

package/src/modifiers/typography.ts

@@ -0,0 +1,341 @@
+/**
+ * Typography Modifier - comprehensive text styling
+ *
+ * Provides a unified interface for text styling properties
+ * including size, weight, alignment, transformation, and more.
+ */
+
+import type { DOMNode } from '../runtime/types'
+import { BaseModifier } from './base'
+import type { ModifierContext, ReactiveModifierProps } from './types'
+import type { FontAsset } from '../assets/FontAsset'
+
+export interface TypographyOptions {
+  size?: number | string
+  weight?: FontWeight | number
+  family?: string | FontAsset
+  lineHeight?: number | string
+  letterSpacing?: number | string
+  wordSpacing?: number | string
+  align?: TextAlign
+  transform?: TextTransform
+  decoration?: TextDecoration
+  variant?: FontVariant
+  style?: FontStyle
+  color?: string
+  textOverflow?: 'clip' | 'ellipsis' | 'fade' | string
+  whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces'
+  overflow?: 'visible' | 'hidden' | 'scroll' | 'auto'
+}
+
+export type FontWeight =
+  | 'normal'
+  | 'bold'
+  | '100'
+  | '200'
+  | '300'
+  | '400'
+  | '500'
+  | '600'
+  | '700'
+  | '800'
+  | '900'
+  | 100
+  | 200
+  | 300
+  | 400
+  | 500
+  | 600
+  | 700
+  | 800
+  | 900
+export type TextAlign = 'left' | 'center' | 'right' | 'justify' | 'start' | 'end'
+export type TextTransform = 'none' | 'uppercase' | 'lowercase' | 'capitalize'
+export type TextDecoration = 'none' | 'underline' | 'overline' | 'line-through'
+export type FontVariant = 'normal' | 'small-caps'
+export type FontStyle = 'normal' | 'italic' | 'oblique'
+
+export type ReactiveTypographyOptions = ReactiveModifierProps<TypographyOptions>
+
+export class TypographyModifier extends BaseModifier<TypographyOptions> {
+  readonly type = 'typography'
+  readonly priority = 30 // Priority 30 for text styling
+
+  constructor(options: ReactiveTypographyOptions) {
+    // Convert reactive options to regular options for immediate use
+    const resolvedOptions: TypographyOptions = {}
+    for (const [key, value] of Object.entries(options)) {
+      if (typeof value === 'function' && 'peek' in value) {
+        ;(resolvedOptions as any)[key] = (value as any).peek()
+      } else {
+        ;(resolvedOptions as any)[key] = value
+      }
+    }
+    super(resolvedOptions)
+  }
+
+  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {
+    if (!context.element) return
+
+    const styles = this.computeTypographyStyles(this.properties)
+    this.applyStyles(context.element, styles)
+    
+    return undefined
+  }
+
+  private computeTypographyStyles(props: TypographyOptions) {
+    const styles: Record<string, string> = {}
+
+    if (props.size !== undefined) {
+      styles.fontSize = this.toCSSValue(props.size)
+    }
+    if (props.weight !== undefined) {
+      styles.fontWeight = String(props.weight)
+    }
+    if (props.family !== undefined) {
+      // Handle FontAsset
+      if (typeof props.family === 'object' && props.family !== null && 'resolve' in props.family) {
+        styles.fontFamily = (props.family as FontAsset).resolve()
+      } else {
+        styles.fontFamily = props.family as string
+      }
+    }
+    if (props.lineHeight !== undefined) {
+      styles.lineHeight =
+        typeof props.lineHeight === 'number' ? props.lineHeight.toString() : props.lineHeight
+    }
+    if (props.letterSpacing !== undefined) {
+      styles.letterSpacing = this.toCSSValue(props.letterSpacing)
+    }
+    if (props.wordSpacing !== undefined) {
+      styles.wordSpacing = this.toCSSValue(props.wordSpacing)
+    }
+    if (props.align !== undefined) {
+      styles.textAlign = props.align
+    }
+    if (props.transform !== undefined) {
+      // Use !important to ensure text-transform overrides any conflicting CSS
+      styles.textTransform = `${props.transform} !important`
+    }
+    if (props.decoration !== undefined) {
+      // Use !important to ensure text-decoration overrides any conflicting CSS
+      styles.textDecoration = `${props.decoration} !important`
+    }
+    if (props.variant !== undefined) {
+      styles.fontVariant = props.variant
+    }
+    if (props.style !== undefined) {
+      styles.fontStyle = props.style
+    }
+    if (props.color !== undefined) {
+      // Handle Asset objects
+      if (typeof props.color === 'object' && props.color !== null && 'resolve' in props.color) {
+        styles.color = (props.color as any).resolve()
+      } else {
+        styles.color = props.color as string
+      }
+    }
+    if (props.textOverflow !== undefined) {
+      styles.textOverflow = props.textOverflow
+    }
+    if (props.whiteSpace !== undefined) {
+      styles.whiteSpace = props.whiteSpace
+    }
+    if (props.overflow !== undefined) {
+      styles.overflow = props.overflow
+    }
+
+    return styles
+  }
+}
+
+/**
+ * Create a typography modifier with comprehensive text styling
+ *
+ * @example
+ * ```typescript
+ * // Complete text styling
+ * .typography({
+ *   size: 18,
+ *   weight: '600',
+ *   align: 'center',
+ *   transform: 'uppercase',
+ *   letterSpacing: '0.5px'
+ * })
+ *
+ * // Font family and sizing
+ * .typography({
+ *   family: 'Inter, sans-serif',
+ *   size: 16,
+ *   lineHeight: 1.5
+ * })
+ * ```
+ */
+export function typography(options: ReactiveTypographyOptions): TypographyModifier {
+  return new TypographyModifier(options)
+}
+
+/**
+ * Convenience function for text alignment
+ *
+ * @example
+ * ```typescript
+ * .textAlign('center')
+ * .textAlign('right')
+ * ```
+ */
+export function textAlign(value: TextAlign): TypographyModifier {
+  return new TypographyModifier({ align: value })
+}
+
+/**
+ * Convenience function for text transformation
+ *
+ * @example
+ * ```typescript
+ * .textTransform('uppercase')
+ * .textTransform('capitalize')
+ * ```
+ */
+export function textTransform(value: TextTransform): TypographyModifier {
+  return new TypographyModifier({ transform: value })
+}
+
+/**
+ * Convenience function for text decoration
+ *
+ * @example
+ * ```typescript
+ * .textDecoration('underline')
+ * .textDecoration('line-through')
+ * .textDecoration('overline')
+ * .textDecoration('none')
+ * ```
+ */
+export function textDecoration(value: TextDecoration): TypographyModifier {
+  return new TypographyModifier({ decoration: value })
+}
+
+/**
+ * Convenience function for font size
+ *
+ * @example
+ * ```typescript
+ * .fontSize(16)
+ * .fontSize('1.2rem')
+ * ```
+ */
+export function fontSize(value: number | string): TypographyModifier {
+  return new TypographyModifier({ size: value })
+}
+
+/**
+ * Convenience function for font weight
+ *
+ * @example
+ * ```typescript
+ * .fontWeight('600')
+ * .fontWeight('bold')
+ * .fontWeight(700)
+ * ```
+ */
+export function fontWeight(value: FontWeight | number): TypographyModifier {
+  return new TypographyModifier({ weight: value })
+}
+
+/**
+ * Convenience function for line height
+ *
+ * @example
+ * ```typescript
+ * .lineHeight(1.5)
+ * .lineHeight('1.4rem')
+ * ```
+ */
+export function lineHeight(value: number | string): TypographyModifier {
+  return new TypographyModifier({ lineHeight: value })
+}
+
+/**
+ * Convenience function for letter spacing
+ *
+ * @example
+ * ```typescript
+ * .letterSpacing('0.5px')
+ * .letterSpacing(2)
+ * ```
+ */
+export function letterSpacing(value: number | string): TypographyModifier {
+  return new TypographyModifier({ letterSpacing: value })
+}
+
+/**
+ * Convenience function for text overflow
+ *
+ * @example
+ * ```typescript
+ * .textOverflow('ellipsis')
+ * .textOverflow('clip')
+ * ```
+ */
+export function textOverflow(value: 'clip' | 'ellipsis' | 'fade' | string): TypographyModifier {
+  return new TypographyModifier({ textOverflow: value } as any)
+}
+
+/**
+ * Convenience function for white space handling
+ *
+ * @example
+ * ```typescript
+ * .whiteSpace('nowrap')
+ * .whiteSpace('pre-wrap')
+ * ```
+ */
+export function whiteSpace(
+  value: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces'
+): TypographyModifier {
+  return new TypographyModifier({ whiteSpace: value } as any)
+}
+
+/**
+ * Convenience function for overflow behavior
+ *
+ * @example
+ * ```typescript
+ * .overflow('hidden')
+ * .overflow('scroll')
+ * ```
+ */
+export function overflow(value: 'visible' | 'hidden' | 'scroll' | 'auto'): TypographyModifier {
+  return new TypographyModifier({ overflow: value } as any)
+}
+
+/**
+ * Convenience function for text case transformation (alias for textTransform)
+ *
+ * @example
+ * ```typescript
+ * .textCase('uppercase')
+ * .textCase('capitalize')
+ * ```
+ */
+export function textCase(value: TextTransform): TypographyModifier {
+  return textTransform(value)
+}
+
+/**
+ * Convenience function for font family
+ *
+ * @example
+ * ```typescript
+ * // With string
+ * .fontFamily('Inter, sans-serif')
+ * 
+ * // With FontAsset
+ * import { Assets } from '@tachui/core'
+ * .fontFamily(Assets.bodyFont)
+ * ```
+ */
+export function fontFamily(value: string | FontAsset): TypographyModifier {
+  return new TypographyModifier({ family: value })
+}

package/src/modifiers/utility.ts

@@ -0,0 +1,209 @@
+/**
+ * Utility Modifier - miscellaneous CSS properties
+ *
+ * Provides access to various CSS properties that don't fit
+ * into other specific modifier categories.
+ */
+
+import type { DOMNode } from '../runtime/types'
+import { BaseModifier } from './base'
+import type { ModifierContext, ReactiveModifierProps } from './types'
+
+export interface UtilityOptions {
+  cursor?:
+    | 'auto'
+    | 'default' 
+    | 'pointer'
+    | 'text'
+    | 'wait'
+    | 'help'
+    | 'not-allowed'
+    | 'none'
+    | 'grab'
+    | 'grabbing'
+    | 'zoom-in'
+    | 'zoom-out'
+    | 'alias'
+    | 'cell'
+    | 'copy'
+    | string // CSS cursor syntax: 'url(...), fallback'
+  overflow?: 'visible' | 'hidden' | 'scroll' | 'auto'
+  overflowX?: 'visible' | 'hidden' | 'scroll' | 'auto'
+  overflowY?: 'visible' | 'hidden' | 'scroll' | 'auto'
+  position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'
+  top?: number | string
+  right?: number | string
+  bottom?: number | string
+  left?: number | string
+  zIndex?: number
+  display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none'
+  visibility?: 'visible' | 'hidden' | 'collapse'
+  pointerEvents?: 'auto' | 'none'
+  userSelect?: 'auto' | 'none' | 'text' | 'all'
+  boxSizing?: 'content-box' | 'border-box'
+  objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+  objectPosition?: string
+  resize?: 'none' | 'both' | 'horizontal' | 'vertical'
+  outline?: string
+  outlineOffset?: number | string
+}
+
+export type ReactiveUtilityOptions = ReactiveModifierProps<UtilityOptions>
+
+export class UtilityModifier extends BaseModifier<UtilityOptions> {
+  readonly type = 'utility'
+  readonly priority = 10 // Lower priority for utility properties
+
+  constructor(options: ReactiveUtilityOptions) {
+    // Convert reactive options to regular options for immediate use
+    const resolvedOptions: UtilityOptions = {}
+    for (const [key, value] of Object.entries(options)) {
+      if (typeof value === 'function' && 'peek' in value) {
+        ;(resolvedOptions as any)[key] = (value as any).peek()
+      } else {
+        ;(resolvedOptions as any)[key] = value
+      }
+    }
+    super(resolvedOptions)
+  }
+
+  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {
+    if (!context.element) return
+
+    const styles = this.computeUtilityStyles(this.properties)
+    this.applyStyles(context.element, styles)
+    
+    return undefined
+  }
+
+  private computeUtilityStyles(props: UtilityOptions) {
+    const styles: Record<string, string> = {}
+
+    if (props.cursor !== undefined) {
+      // Validate cursor value in development mode
+      if (process.env.NODE_ENV === 'development') {
+        this.validateCursorValue(props.cursor)
+      }
+      styles.cursor = props.cursor
+    }
+    if (props.overflow !== undefined) {
+      styles.overflow = props.overflow
+    }
+    if (props.overflowX !== undefined) {
+      styles.overflowX = props.overflowX
+    }
+    if (props.overflowY !== undefined) {
+      styles.overflowY = props.overflowY
+    }
+    if (props.position !== undefined) {
+      styles.position = props.position
+    }
+    if (props.top !== undefined) {
+      styles.top = this.toCSSValue(props.top)
+    }
+    if (props.right !== undefined) {
+      styles.right = this.toCSSValue(props.right)
+    }
+    if (props.bottom !== undefined) {
+      styles.bottom = this.toCSSValue(props.bottom)
+    }
+    if (props.left !== undefined) {
+      styles.left = this.toCSSValue(props.left)
+    }
+    if (props.zIndex !== undefined) {
+      styles.zIndex = props.zIndex.toString()
+    }
+    if (props.display !== undefined) {
+      styles.display = props.display
+    }
+    if (props.visibility !== undefined) {
+      styles.visibility = props.visibility
+    }
+    if (props.pointerEvents !== undefined) {
+      styles.pointerEvents = props.pointerEvents
+    }
+    if (props.userSelect !== undefined) {
+      styles.userSelect = props.userSelect
+    }
+    if (props.boxSizing !== undefined) {
+      styles.boxSizing = props.boxSizing
+    }
+    if (props.objectFit !== undefined) {
+      styles.objectFit = props.objectFit
+    }
+    if (props.objectPosition !== undefined) {
+      styles.objectPosition = props.objectPosition
+    }
+    if (props.resize !== undefined) {
+      styles.resize = props.resize
+    }
+    if (props.outline !== undefined) {
+      styles.outline = props.outline
+    }
+    if (props.outlineOffset !== undefined) {
+      styles.outlineOffset = this.toCSSValue(props.outlineOffset)
+    }
+
+    return styles
+  }
+
+  private validateCursorValue(value: string): void {
+    const validCursors = [
+      'auto', 'default', 'pointer', 'text', 'wait', 'help', 'not-allowed', 'none',
+      'grab', 'grabbing', 'zoom-in', 'zoom-out', 'alias', 'cell', 'copy'
+    ]
+    
+    if (!validCursors.includes(value) && !value.includes('url(')) {
+      console.warn(`Unknown cursor value: "${value}". See documentation for valid cursor values.`)
+    }
+  }
+}
+
+/**
+ * Create a utility modifier with miscellaneous CSS properties
+ */
+export function utility(options: ReactiveUtilityOptions): UtilityModifier {
+  return new UtilityModifier(options)
+}
+
+/**
+ * Convenience function for cursor
+ */
+export function cursor(value: UtilityOptions['cursor']): UtilityModifier {
+  return new UtilityModifier({ cursor: value })
+}
+
+/**
+ * Convenience function for overflow-y
+ */
+export function overflowY(value: UtilityOptions['overflowY']): UtilityModifier {
+  return new UtilityModifier({ overflowY: value })
+}
+
+/**
+ * Convenience function for overflow-x
+ */
+export function overflowX(value: UtilityOptions['overflowX']): UtilityModifier {
+  return new UtilityModifier({ overflowX: value })
+}
+
+/**
+ * Convenience function for position
+ */
+export function position(value: UtilityOptions['position']): UtilityModifier {
+  return new UtilityModifier({ position: value })
+}
+
+/**
+ * Convenience function for z-index
+ */
+export function zIndex(value: number): UtilityModifier {
+  return new UtilityModifier({ zIndex: value })
+}
+
+/**
+ * Convenience function for display
+ */
+export function display(value: UtilityOptions['display']): UtilityModifier {
+  return new UtilityModifier({ display: value })
+}