@miliastry/quasar 1.0.0

package/src/Transformers/GradientTransformer.ts

@@ -0,0 +1,143 @@
+import { DocumentModel } from '../Model/DocumentModel'
+import { RedNode } from '../Syntax/RedNode'
+import { greenNode, greenLeaf } from '../Syntax/GreenNode'
+import { Transformer, TransformResult } from './Transformer'
+import { Transaction } from '../Transactions/Transaction'
+import type { Operation } from '../Types/operations'
+import { createOperationId } from '../Types/operations'
+import { ease, mixHex, type Easing } from '../Utils/color'
+
+export interface GradientOptions {
+  from: string       // hex color
+  to: string         // hex color
+  unit: 'char' | 'word'
+  easing: Easing
+  selectionRange?: { start: number, end: number }
+}
+
+export class GradientTransformer implements Transformer {
+  private options: GradientOptions
+
+  constructor(options: Partial<GradientOptions> = {}) {
+    this.options = {
+      from: options.from ?? '#e8b04b',
+      to: options.to ?? '#d94f4f',
+      unit: options.unit ?? 'char',
+      easing: options.easing ?? 'linear',
+      selectionRange: options.selectionRange,
+    }
+  }
+
+  transform(document: DocumentModel): TransformResult {
+    if (!document.redRoot) return { document }
+
+    const { from, to, unit, easing, selectionRange } = this.options
+    
+    let globalIndex = 0
+    let totalUnits = 0
+
+    // First pass to count total target units
+    const countWalk = (node: RedNode) => {
+      if (selectionRange) {
+        if (node.range.end <= selectionRange.start || node.range.start >= selectionRange.end) return
+      }
+      if (node.kind === 'text' && node.text) {
+        if (unit === 'char') {
+          totalUnits += node.text.replace(/\s+/g, '').length
+        } else {
+          totalUnits += node.text.split(/(\s+)/).filter(w => w.trim() !== '').length
+        }
+        return
+      }
+      for (const child of node.children) countWalk(child)
+    }
+    countWalk(document.redRoot)
+
+    const denom = Math.max(totalUnits - 1, 1)
+    const operations: Operation[] = []
+
+    // Second pass to apply the transformation
+    const walk = (node: RedNode) => {
+      if (selectionRange) {
+        if (node.range.end <= selectionRange.start || node.range.start >= selectionRange.end) return
+      }
+
+      if (node.kind === 'text' && node.text) {
+        const newChildren: RedNode[] = []
+        
+        if (unit === 'char') {
+          const chars = [...node.text]
+          for (const ch of chars) {
+            if (ch.trim() === '') {
+              const synthGreen = greenLeaf('text', ch)
+              const spaceNode = new RedNode(synthGreen, { kind: 'text', metadata: {} })
+              newChildren.push(spaceNode)
+            } else {
+              const t = ease(totalUnits <= 1 ? 0 : globalIndex / denom, easing)
+              const colorHex = mixHex(from, to, t)
+              
+              const synthGreen = greenLeaf('text', ch)
+              const charNode = new RedNode(synthGreen, {
+                kind: 'text',
+                metadata: { style: { color: colorHex } }
+              })
+              newChildren.push(charNode)
+              globalIndex++
+            }
+          }
+        } else if (unit === 'word') {
+          const words = node.text.split(/(\s+)/)
+          for (const chunk of words) {
+            if (chunk.trim() === '') {
+              const synthGreen = greenLeaf('text', chunk)
+              const spaceNode = new RedNode(synthGreen, { kind: 'text', metadata: {} })
+              newChildren.push(spaceNode)
+            } else {
+              const t = ease(totalUnits <= 1 ? 0 : globalIndex / denom, easing)
+              const colorHex = mixHex(from, to, t)
+              
+              const synthGreen = greenLeaf('text', chunk)
+              const wordNode = new RedNode(synthGreen, {
+                kind: 'text',
+                metadata: { style: { color: colorHex } }
+              })
+              newChildren.push(wordNode)
+              globalIndex++
+            }
+          }
+        }
+
+        const emptyGreen = greenNode('group', '')
+        const groupNode = new RedNode(emptyGreen, { kind: 'group' })
+        
+        RedNode.allowMutation(() => {
+          for (const child of newChildren) {
+            groupNode.appendChild(child)
+          }
+        })
+
+        operations.push({
+          kind: 'replace_node',
+          id: createOperationId(),
+          nodeId: node.id,
+          newNode: groupNode,
+          oldNode: node,
+          undoable: true,
+          timestamp: Date.now()
+        })
+        return
+      }
+
+      for (const child of [...node.children]) {
+        walk(child)
+      }
+    }
+
+    walk(document.redRoot)
+
+    const transaction = new Transaction(operations)
+    transaction.apply(document.redRoot)
+
+    return { document, transaction }
+  }
+}

package/src/Transformers/GrowTransformer.ts

@@ -0,0 +1,115 @@
+import { DocumentModel } from '../Model/DocumentModel'
+import { RedNode } from '../Syntax/RedNode'
+import { greenNode, greenLeaf } from '../Syntax/GreenNode'
+import { Transformer, TransformResult } from './Transformer'
+import { Transaction } from '../Transactions/Transaction'
+import type { Operation } from '../Types/operations'
+import { createOperationId } from '../Types/operations'
+
+export interface GrowOptions {
+  minSize: number
+  maxSize: number
+  cycles: number
+  selectionRange?: { start: number, end: number }
+}
+
+export class GrowTransformer implements Transformer {
+  private options: GrowOptions
+
+  constructor(options: Partial<GrowOptions> = {}) {
+    this.options = {
+      minSize: options.minSize ?? 90,
+      maxSize: options.maxSize ?? 160,
+      cycles: options.cycles ?? 1,
+      selectionRange: options.selectionRange,
+    }
+  }
+
+  transform(document: DocumentModel): TransformResult {
+    if (!document.redRoot) return { document }
+
+    const { minSize, maxSize, cycles, selectionRange } = this.options
+    
+    let globalIndex = 0
+    let totalChars = 0
+
+    // First pass to count total target units
+    const countWalk = (node: RedNode) => {
+      if (selectionRange) {
+        if (node.range.end <= selectionRange.start || node.range.start >= selectionRange.end) return
+      }
+      if (node.kind === 'text' && node.text) {
+        totalChars += node.text.replace(/\s+/g, '').length
+        return
+      }
+      for (const child of node.children) countWalk(child)
+    }
+    countWalk(document.redRoot)
+
+    const denom = Math.max(totalChars - 1, 1)
+    const operations: Operation[] = []
+
+    // Second pass to apply the transformation
+    const walk = (node: RedNode) => {
+      if (selectionRange) {
+        if (node.range.end <= selectionRange.start || node.range.start >= selectionRange.end) return
+      }
+
+      if (node.kind === 'text' && node.text) {
+        const newChildren: RedNode[] = []
+        const chars = [...node.text]
+        
+        for (const ch of chars) {
+          if (ch.trim() === '') {
+            const synthGreen = greenLeaf('text', ch)
+            const spaceNode = new RedNode(synthGreen, { kind: 'text', metadata: {} })
+            newChildren.push(spaceNode)
+          } else {
+            const phase = (globalIndex / denom) * Math.PI * 2 * cycles
+            const t = (Math.sin(phase) + 1) / 2
+            const size = Math.round(minSize + (maxSize - minSize) * t)
+            
+            const synthGreen = greenLeaf('text', ch)
+            const charNode = new RedNode(synthGreen, {
+              kind: 'text',
+              metadata: { style: { fontSize: size.toString() } }
+            })
+            newChildren.push(charNode)
+            globalIndex++
+          }
+        }
+
+        const emptyGreen = greenNode('group', '')
+        const groupNode = new RedNode(emptyGreen, { kind: 'group' })
+        
+        RedNode.allowMutation(() => {
+          for (const child of newChildren) {
+            groupNode.appendChild(child)
+          }
+        })
+
+        operations.push({
+          kind: 'replace_node',
+          id: createOperationId(),
+          nodeId: node.id,
+          newNode: groupNode,
+          oldNode: node,
+          undoable: true,
+          timestamp: Date.now()
+        })
+        return
+      }
+
+      for (const child of [...node.children]) {
+        walk(child)
+      }
+    }
+
+    walk(document.redRoot)
+
+    const transaction = new Transaction(operations)
+    transaction.apply(document.redRoot)
+
+    return { document, transaction }
+  }
+}

package/src/Transformers/RainbowTransformer.ts

@@ -0,0 +1,121 @@
+import { DocumentModel } from '../Model/DocumentModel'
+import { RedNode } from '../Syntax/RedNode'
+import { greenNode, greenLeaf } from '../Syntax/GreenNode'
+import { Transformer, TransformResult } from './Transformer'
+import { Transaction } from '../Transactions/Transaction'
+import type { Operation } from '../Types/operations'
+import { createOperationId } from '../Types/operations'
+import { hslToHex } from '../Utils/color'
+
+export interface RainbowOptions {
+  saturation: number // 0-100
+  lightness: number  // 0-100
+  spread: number     // degrees
+  offset: number     // degrees
+  selectionRange?: { start: number, end: number }
+}
+
+export class RainbowTransformer implements Transformer {
+  private options: RainbowOptions
+
+  constructor(options: Partial<RainbowOptions> = {}) {
+    this.options = {
+      saturation: options.saturation ?? 80,
+      lightness: options.lightness ?? 60,
+      spread: options.spread ?? 300,
+      offset: options.offset ?? 0,
+      selectionRange: options.selectionRange,
+    }
+  }
+
+  transform(document: DocumentModel): TransformResult {
+    if (!document.redRoot) return { document }
+
+    const { saturation, lightness, spread, offset, selectionRange } = this.options
+    
+    // Convert to 0-1 range for the color util
+    const s = saturation / 100
+    const l = lightness / 100
+
+    let globalIndex = 0
+    let totalChars = 0
+
+    // First pass to count total characters (for proper spread calculation)
+    const countWalk = (node: RedNode) => {
+      if (selectionRange) {
+        if (node.range.end <= selectionRange.start || node.range.start >= selectionRange.end) return
+      }
+      if (node.kind === 'text' && node.text) {
+        totalChars += node.text.replace(/\s+/g, '').length
+        return
+      }
+      for (const child of node.children) countWalk(child)
+    }
+    countWalk(document.redRoot)
+
+    const denom = Math.max(totalChars - 1, 1)
+    const operations: Operation[] = []
+
+    // Second pass to apply the transformation
+    const walk = (node: RedNode) => {
+      if (selectionRange) {
+        if (node.range.end <= selectionRange.start || node.range.start >= selectionRange.end) return
+      }
+
+      if (node.kind === 'text' && node.text) {
+        const newChildren: RedNode[] = []
+        const chars = [...node.text]
+        
+        for (const ch of chars) {
+          if (ch.trim() === '') {
+            const synthGreen = greenLeaf('text', ch)
+            const spaceNode = new RedNode(synthGreen, { kind: 'text', metadata: {} })
+            newChildren.push(spaceNode)
+          } else {
+            const hue = offset + (globalIndex / denom) * spread
+            const colorHex = hslToHex(hue, s, l)
+            
+            const synthGreen = greenLeaf('text', ch)
+            const charNode = new RedNode(synthGreen, {
+              kind: 'text',
+              metadata: { style: { color: colorHex } }
+            })
+            newChildren.push(charNode)
+            globalIndex++
+          }
+        }
+
+        const emptyGreen = greenNode('group', '')
+        const groupNode = new RedNode(emptyGreen, { kind: 'group' })
+        
+        RedNode.allowMutation(() => {
+          for (const child of newChildren) {
+            groupNode.appendChild(child)
+          }
+        })
+
+        operations.push({
+          kind: 'replace_node',
+          id: createOperationId(),
+          nodeId: node.id,
+          newNode: groupNode,
+          oldNode: node,
+          undoable: true,
+          timestamp: Date.now()
+        })
+        return
+      }
+
+      for (const child of [...node.children]) {
+        walk(child)
+      }
+    }
+
+    walk(document.redRoot)
+
+    const transaction = new Transaction(operations)
+    transaction.apply(document.redRoot)
+
+    return { document, transaction }
+  }
+}

package/src/Transformers/SineWaveTransformer.ts

@@ -0,0 +1,130 @@
+import { DocumentModel } from '../Model/DocumentModel'
+import { RedNode } from '../Syntax/RedNode'
+import { greenNode, greenLeaf } from '../Syntax/GreenNode'
+import { Transformer, TransformResult } from './Transformer'
+import { Transaction } from '../Transactions/Transaction'
+import type { Operation } from '../Types/operations'
+import { createOperationId } from '../Types/operations'
+
+export interface SineWaveOptions {
+  minSize: number
+  maxSize: number
+  frequency: number
+  step: 'char' | 'word'
+  selectionRange?: { start: number, end: number }
+}
+
+export class SineWaveTransformer implements Transformer {
+  private options: SineWaveOptions
+
+  constructor(options: Partial<SineWaveOptions> = {}) {
+    this.options = {
+      minSize: options.minSize ?? 50,
+      maxSize: options.maxSize ?? 150,
+      frequency: options.frequency ?? 0.5,
+      step: options.step ?? 'char',
+      selectionRange: options.selectionRange,
+    }
+  }
+
+  transform(document: DocumentModel): TransformResult {
+    if (!document.redRoot) return { document }
+
+    const { minSize, maxSize, frequency, step, selectionRange } = this.options
+    const amplitude = (maxSize - minSize) / 2
+    const center = minSize + amplitude
+
+    let globalIndex = 0
+    const operations: Operation[] = []
+
+    const walk = (node: RedNode) => {
+      // AST Intersection check
+      if (selectionRange) {
+        if (node.range.end <= selectionRange.start || node.range.start >= selectionRange.end) {
+          return // Node is completely outside the selection, skip it
+        }
+      }
+
+      if (node.kind === 'text' && node.text) {
+        const newChildren: RedNode[] = []
+        
+        if (step === 'char') {
+          const chars = [...node.text]
+          for (const ch of chars) {
+            const wave = Math.sin(globalIndex * frequency)
+            const size = Math.round(center + wave * amplitude)
+            
+            const synthGreen = greenLeaf('text', ch)
+            const charNode = new RedNode(synthGreen, {
+              kind: 'text',
+              metadata: { style: { fontSize: size.toString() } }
+            })
+            newChildren.push(charNode)
+            
+            if (ch.trim() !== '') globalIndex++
+          }
+        } else if (step === 'word') {
+          const words = node.text.split(/(\s+)/)
+          for (const chunk of words) {
+            if (chunk.trim() === '') {
+              const synthGreen = greenLeaf('text', chunk)
+              const spaceNode = new RedNode(synthGreen, { kind: 'text', metadata: {} })
+              newChildren.push(spaceNode)
+            } else {
+              const wave = Math.sin(globalIndex * frequency)
+              const size = Math.round(center + wave * amplitude)
+              
+              const synthGreen = greenLeaf('text', chunk)
+              const wordNode = new RedNode(synthGreen, {
+                kind: 'text',
+                metadata: { style: { fontSize: size.toString() } }
+              })
+              newChildren.push(wordNode)
+              globalIndex++
+            }
+          }
+        }
+
+        // We create a new Group RedNode to replace the text node
+        const emptyGreen = greenNode('group', '')
+        const groupNode = new RedNode(emptyGreen, { kind: 'group' })
+        
+        RedNode.allowMutation(() => {
+          for (const child of newChildren) {
+            groupNode.appendChild(child)
+          }
+        })
+
+        // Emit an operation
+        operations.push({
+          kind: 'replace_node',
+          id: createOperationId(),
+          nodeId: node.id,
+          newNode: groupNode,
+          oldNode: node, // reference to old node
+          undoable: true,
+          timestamp: Date.now()
+        })
+
+        return // Prevent walking into the newly generated text fragments
+      }
+
+      const childrenToWalk = [...node.children]
+      for (const child of childrenToWalk) {
+        walk(child)
+      }
+    }
+
+    walk(document.redRoot)
+
+    // Build the transaction
+    const transaction = new Transaction(operations)
+    
+    // For now, we apply it directly to the model as we still mutate the Red Tree,
+    // but going forward, a true immutable system would return a cloned model.
+    transaction.apply(document.redRoot)
+
+    return { document, transaction }
+  }
+}
+

package/src/Transformers/Transformer.ts

@@ -0,0 +1,22 @@
+import { DocumentModel } from '../Model/DocumentModel'
+import { Transaction } from '../Transactions/Transaction'
+
+export interface TransformResult {
+  document: DocumentModel
+  transaction?: Transaction
+}
+
+export interface Transformer {
+  /**
+   * Transforms a DocumentModel.
+   * Should ideally return a Transaction that contains the operations applied.
+   */
+  transform(document: DocumentModel): TransformResult
+}
+
+/**
+ * Helper to apply a transformer.
+ */
+export function applyTransformer(document: DocumentModel, transformer: Transformer): TransformResult {
+  return transformer.transform(document)
+}