@llc3233149/core 0.9.0

package/src/render/tailwind.ts

@@ -0,0 +1,114 @@
+/**
+ * Tailwind CSS v4 value resolvers.
+ *
+ * Converts design token values (px, hex colors, font sizes, etc.) into
+ * Tailwind v4 utility class fragments.
+ *
+ * Tailwind v4 spacing is dynamic: `calc(var(--spacing) * N)` where
+ * `--spacing` defaults to `0.25rem` (4px). Any integer works as a class
+ * suffix, so we just divide by 4 instead of maintaining a lookup table.
+ *
+ * Architecture inspired by seanchas116/figma-to-tailwind (MIT)
+ * https://github.com/seanchas116/figma-to-tailwind
+ */
+
+const FONT_SIZE_TO_TW = new Map<number, string>([
+  [12, 'xs'],
+  [14, 'sm'],
+  [16, 'base'],
+  [18, 'lg'],
+  [20, 'xl'],
+  [24, '2xl'],
+  [30, '3xl'],
+  [36, '4xl'],
+  [48, '5xl'],
+  [60, '6xl'],
+  [72, '7xl'],
+  [96, '8xl'],
+  [128, '9xl']
+])
+
+const OPACITY_TO_TW = new Map<number, string>([
+  [0, '0'],
+  [5, '5'],
+  [10, '10'],
+  [15, '15'],
+  [20, '20'],
+  [25, '25'],
+  [30, '30'],
+  [35, '35'],
+  [40, '40'],
+  [45, '45'],
+  [50, '50'],
+  [55, '55'],
+  [60, '60'],
+  [65, '65'],
+  [70, '70'],
+  [75, '75'],
+  [80, '80'],
+  [85, '85'],
+  [90, '90'],
+  [95, '95'],
+  [100, '100']
+])
+
+const FONT_WEIGHT_TO_TW = new Map<number, string>([
+  [100, 'thin'],
+  [200, 'extralight'],
+  [300, 'light'],
+  [400, 'normal'],
+  [500, 'medium'],
+  [600, 'semibold'],
+  [700, 'bold'],
+  [800, 'extrabold'],
+  [900, 'black']
+])
+
+const RADIUS_PX_TO_TW = new Map<number, string>([
+  [2, 'sm'],
+  [4, 'DEFAULT'],
+  [6, 'md'],
+  [8, 'lg'],
+  [12, 'xl'],
+  [16, '2xl'],
+  [24, '3xl'],
+  [9999, 'full']
+])
+
+export function pxToSpacing(px: number): string {
+  if (px === 0) return '0'
+  if (px === 1) return 'px'
+  const n = px / 4
+  if (Number.isInteger(n)) return String(n)
+  if (n * 2 === Math.round(n * 2)) return String(n)
+  return `[${px}px]`
+}
+
+export function colorToTwClass(hex: string): string {
+  const lower = hex.toLowerCase()
+  if (lower === '#ffffff' || lower === '#fff') return 'white'
+  if (lower === '#000000' || lower === '#000') return 'black'
+  if (lower === '#00000000') return 'transparent'
+  return `[${hex}]`
+}
+
+export function fontSizeToTw(px: number): string {
+  return FONT_SIZE_TO_TW.get(px) ?? `[${px}px]`
+}
+
+export function fontWeightToTw(n: number): string {
+  return FONT_WEIGHT_TO_TW.get(n) ?? `[${n}]`
+}
+
+export function borderRadiusToTw(px: number): string {
+  if (px >= 9999) return 'full'
+  const name = RADIUS_PX_TO_TW.get(px)
+  if (name === 'DEFAULT') return ''
+  if (name) return name
+  return `[${px}px]`
+}
+
+export function opacityToTw(n: number): string {
+  const pct = Math.round(n * 100)
+  return OPACITY_TO_TW.get(pct) ?? `[${n}]`
+}

package/src/render/tree.ts

@@ -0,0 +1,137 @@
+export interface TreeNode {
+  type: string
+  props: Record<string, unknown>
+  children: (TreeNode | string)[]
+}
+
+export function isTreeNode(x: unknown): x is TreeNode {
+  if (x === null || typeof x !== 'object') return false
+  return 'type' in x && typeof x.type === 'string' && 'props' in x && 'children' in x && Array.isArray(x.children)
+}
+
+interface ReactElement {
+  type: unknown
+  props: Record<string, unknown>
+}
+
+function isReactElement(x: unknown): x is ReactElement {
+  return x !== null && typeof x === 'object' && 'type' in x && 'props' in x
+}
+
+/**
+ * Resolve any element-like value (ReactElement, TreeNode, function component)
+ * into a TreeNode. Handles recursive function components up to depth 100.
+ */
+export function resolveToTree(element: unknown, depth = 0): TreeNode | null {
+  if (depth > 100) throw new Error('Component resolution depth exceeded')
+  if (element == null) return null
+  if (isTreeNode(element)) return element
+  if (!isReactElement(element)) return null
+
+  if (typeof element.type === 'function') {
+    return resolveToTree(
+      (element.type as (p: Record<string, unknown>) => unknown)(element.props),
+      depth + 1
+    )
+  }
+
+  if (typeof element.type === 'string') {
+    const children: (TreeNode | string)[] = []
+    const elChildren = element.props.children
+    if (elChildren != null) {
+      const childArray = Array.isArray(elChildren) ? elChildren : [elChildren]
+      for (const child of childArray.flat()) {
+        if (child == null) continue
+        if (typeof child === 'string' || typeof child === 'number') {
+          children.push(String(child))
+        } else {
+          const resolved = resolveToTree(child, depth + 1)
+          if (resolved) children.push(resolved)
+        }
+      }
+    }
+    const { children: _, ...props } = element.props
+    return { type: element.type, props, children }
+  }
+
+  return null
+}
+
+function resolveChild(child: unknown): TreeNode | string | null {
+  if (child == null) return null
+  if (typeof child === 'string' || typeof child === 'number') return String(child)
+  return resolveToTree(child)
+}
+
+export function node(type: string, props: { children?: unknown; [key: string]: unknown }): TreeNode {
+  const { children, ...rest } = props
+  const processed = [children]
+    .flat(Infinity)
+    .map(resolveChild)
+    .filter((c): c is TreeNode | string => c !== null)
+  return { type, props: rest, children: processed }
+}
+
+export type StyleProps = {
+  flex?: 'row' | 'col' | 'column'
+  gap?: number
+  wrap?: boolean
+  rowGap?: number
+  justify?: 'start' | 'end' | 'center' | 'between'
+  items?: 'start' | 'end' | 'center' | 'stretch'
+  grow?: number
+
+  w?: number | 'fill' | 'hug'
+  h?: number | 'fill' | 'hug'
+  minW?: number
+  maxW?: number
+  minH?: number
+  maxH?: number
+
+  x?: number
+  y?: number
+
+  p?: number
+  px?: number
+  py?: number
+  pt?: number
+  pr?: number
+  pb?: number
+  pl?: number
+
+  bg?: string
+  fill?: string
+  stroke?: string
+  strokeWidth?: number
+  strokeAlign?: 'inside' | 'outside' | 'center'
+  rounded?: number
+  roundedTL?: number
+  roundedTR?: number
+  roundedBL?: number
+  roundedBR?: number
+  cornerSmoothing?: number
+  opacity?: number
+  blendMode?: string
+  rotate?: number
+  overflow?: 'hidden' | 'visible'
+  shadow?: string
+  blur?: number
+
+  size?: number
+  fontSize?: number
+  font?: string
+  fontFamily?: string
+  weight?: number | 'bold' | 'medium' | 'normal'
+  fontWeight?: number | 'bold' | 'medium' | 'normal'
+  color?: string
+  textAlign?: 'left' | 'center' | 'right' | 'justified'
+  textAutoResize?: 'none' | 'width' | 'height'
+}
+
+export type BaseProps = StyleProps & {
+  name?: string
+  key?: string | number
+  children?: unknown
+}
+
+export type TextProps = BaseProps

package/src/render-image.ts

@@ -0,0 +1,139 @@
+import type { SkiaRenderer } from './renderer'
+import type { SceneGraph } from './scene-graph'
+import type { CanvasKit, Canvas } from 'canvaskit-wasm'
+
+export type ExportFormat = 'PNG' | 'JPG' | 'WEBP' | 'SVG'
+
+interface RenderOptions {
+  scale: number
+  format: ExportFormat
+  quality?: number
+}
+
+export function computeContentBounds(
+  graph: SceneGraph,
+  nodeIds: string[]
+): { minX: number; minY: number; maxX: number; maxY: number } | null {
+  let minX = Infinity,
+    minY = Infinity,
+    maxX = -Infinity,
+    maxY = -Infinity
+
+  for (const id of nodeIds) {
+    const node = graph.getNode(id)
+    if (!node || !node.visible) continue
+    const abs = graph.getAbsolutePosition(id)
+    minX = Math.min(minX, abs.x)
+    minY = Math.min(minY, abs.y)
+    maxX = Math.max(maxX, abs.x + node.width)
+    maxY = Math.max(maxY, abs.y + node.height)
+  }
+
+  if (!isFinite(minX)) return null
+  return { minX, minY, maxX, maxY }
+}
+
+function ckImageFormat(ck: CanvasKit, format: ExportFormat) {
+  switch (format) {
+    case 'JPG':
+      return ck.ImageFormat.JPEG
+    case 'WEBP':
+      return ck.ImageFormat.WEBP
+    default:
+      return ck.ImageFormat.PNG
+  }
+}
+
+function renderToSurface(
+  ck: CanvasKit,
+  renderer: SkiaRenderer,
+  graph: SceneGraph,
+  pageId: string,
+  width: number,
+  height: number,
+  format: ExportFormat,
+  quality: number,
+  setup: (canvas: Canvas) => void
+): Uint8Array | null {
+  const surface = ck.MakeSurface(width, height)
+  if (!surface) return null
+
+  try {
+    const canvas = surface.getCanvas()
+    setup(canvas)
+    renderer.renderSceneToCanvas(canvas, graph, pageId)
+    surface.flush()
+    const image = surface.makeImageSnapshot()
+    const encoded = image.encodeToBytes(ckImageFormat(ck, format), quality)
+    image.delete()
+    return encoded ? new Uint8Array(encoded) : null
+  } finally {
+    surface.delete()
+  }
+}
+
+export function renderNodesToImage(
+  ck: CanvasKit,
+  renderer: SkiaRenderer,
+  graph: SceneGraph,
+  pageId: string,
+  nodeIds: string[],
+  options: RenderOptions
+): Uint8Array | null {
+  const bounds = computeContentBounds(graph, nodeIds)
+  if (!bounds) return null
+
+  const contentW = bounds.maxX - bounds.minX
+  const contentH = bounds.maxY - bounds.minY
+  if (contentW <= 0 || contentH <= 0) return null
+
+  const pixelW = Math.ceil(contentW * options.scale)
+  const pixelH = Math.ceil(contentH * options.scale)
+  if (pixelW <= 0 || pixelH <= 0) return null
+
+  const quality = options.quality ?? (options.format === 'PNG' ? 100 : 90)
+  return renderToSurface(
+    ck,
+    renderer,
+    graph,
+    pageId,
+    pixelW,
+    pixelH,
+    options.format,
+    quality,
+    (canvas) => {
+      canvas.clear(ck.TRANSPARENT)
+      canvas.scale(options.scale, options.scale)
+      canvas.translate(-bounds.minX, -bounds.minY)
+    }
+  )
+}
+
+export function renderThumbnail(
+  ck: CanvasKit,
+  renderer: SkiaRenderer,
+  graph: SceneGraph,
+  pageId: string,
+  width: number,
+  height: number
+): Uint8Array | null {
+  const page = graph.getNode(pageId)
+  if (!page || page.childIds.length === 0) return null
+
+  const bounds = computeContentBounds(graph, page.childIds)
+  if (!bounds) return null
+
+  const contentW = bounds.maxX - bounds.minX
+  const contentH = bounds.maxY - bounds.minY
+  if (contentW <= 0 || contentH <= 0) return null
+
+  const scale = Math.min(width / contentW, height / contentH, 2)
+
+  return renderToSurface(ck, renderer, graph, pageId, width, height, 'PNG', 100, (canvas) => {
+    canvas.clear(ck.Color4f(renderer.pageColor.r, renderer.pageColor.g, renderer.pageColor.b, 1))
+    const offsetX = (width - contentW * scale) / 2 - bounds.minX * scale
+    const offsetY = (height - contentH * scale) / 2 - bounds.minY * scale
+    canvas.translate(offsetX, offsetY)
+    canvas.scale(scale, scale)
+  })
+}

package/src/renderer/effects.ts

@@ -0,0 +1,64 @@
+import type { SceneNode } from '../scene-graph'
+import type { Canvas, ImageFilter, MaskFilter } from 'canvaskit-wasm'
+import type { SkiaRenderer } from './renderer'
+
+export function getCachedDropShadow(
+  r: SkiaRenderer,
+  dx: number,
+  dy: number,
+  sigma: number,
+  color: Float32Array
+): ImageFilter {
+  const key = `ds:${dx},${dy},${sigma},${color[0]},${color[1]},${color[2]},${color[3]}`
+  let filter = r.imageFilterCache.get(key)
+  if (!filter) {
+    filter = r.ck.ImageFilter.MakeDropShadowOnly(dx, dy, sigma, sigma, color, null)
+    r.imageFilterCache.set(key, filter)
+  }
+  return filter
+}
+
+export function getCachedBlur(r: SkiaRenderer, sigma: number): ImageFilter {
+  const key = `blur:${sigma}`
+  let filter = r.imageFilterCache.get(key)
+  if (!filter) {
+    filter = r.ck.ImageFilter.MakeBlur(sigma, sigma, r.ck.TileMode.Clamp, null)
+    r.imageFilterCache.set(key, filter)
+  }
+  return filter
+}
+
+export function getCachedDecalBlur(r: SkiaRenderer, sigma: number): ImageFilter {
+  const key = `dblur:${sigma}`
+  let filter = r.imageFilterCache.get(key)
+  if (!filter) {
+    filter = r.ck.ImageFilter.MakeBlur(sigma, sigma, r.ck.TileMode.Decal, null)
+    r.imageFilterCache.set(key, filter)
+  }
+  return filter
+}
+
+export function getCachedMaskBlur(r: SkiaRenderer, sigma: number): MaskFilter {
+  let filter = r.maskFilterCache.get(sigma)
+  if (!filter) {
+    filter = r.ck.MaskFilter.MakeBlur(r.ck.BlurStyle.Normal, sigma, true)
+    r.maskFilterCache.set(sigma, filter)
+  }
+  return filter
+}
+
+export function applyClippedBlur(
+  r: SkiaRenderer,
+  canvas: Canvas,
+  node: SceneNode,
+  rect: Float32Array,
+  hasRadius: boolean,
+  sigma: number
+): void {
+  canvas.save()
+  r.clipNodeShape(canvas, node, rect, hasRadius)
+  r.effectLayerPaint.setImageFilter(r.getCachedBlur(sigma))
+  canvas.saveLayer(r.effectLayerPaint)
+  canvas.restore()
+  canvas.restore()
+}

package/src/renderer/fills.ts

@@ -0,0 +1,248 @@
+import type { SceneNode, SceneGraph, Fill } from '../scene-graph'
+import type { Canvas, Paint } from 'canvaskit-wasm'
+import type { SkiaRenderer } from './renderer'
+
+export function drawNodeFill(
+  r: SkiaRenderer,
+  canvas: Canvas,
+  node: SceneNode,
+  rect: Float32Array,
+  hasRadius: boolean
+): void {
+  switch (node.type) {
+    case 'VECTOR': {
+      const fg = r.getFillGeometry(node)
+      if (fg) {
+        for (const p of fg) canvas.drawPath(p, r.fillPaint)
+      } else {
+        const vps = r.getVectorPaths(node)
+        if (vps) {
+          for (const vp of vps) canvas.drawPath(vp, r.fillPaint)
+        }
+      }
+      break
+    }
+    case 'ELLIPSE':
+      if (node.arcData) {
+        r.drawArc(canvas, node, r.fillPaint)
+      } else {
+        canvas.drawOval(rect, r.fillPaint)
+      }
+      break
+    case 'TEXT':
+      r.renderText(canvas, node)
+      break
+    case 'LINE':
+      canvas.drawLine(0, 0, node.width, node.height, r.fillPaint)
+      break
+    case 'POLYGON':
+    case 'STAR': {
+      const path = r.makePolygonPath(node)
+      canvas.drawPath(path, r.fillPaint)
+      path.delete()
+      break
+    }
+    default:
+      if (hasRadius) {
+        canvas.drawRRect(r.makeRRect(node), r.fillPaint)
+      } else {
+        canvas.drawRect(rect, r.fillPaint)
+      }
+  }
+}
+
+export function applyFill(
+  r: SkiaRenderer,
+  fill: Fill,
+  node: SceneNode,
+  graph: SceneGraph,
+  fillIndex = 0
+): boolean {
+  r.fillPaint.setShader(null)
+
+  if (fill.type === 'SOLID') {
+    const c = r.resolveFillColor(fill, fillIndex, node, graph)
+    r.fillPaint.setColor(r.ck.Color4f(c.r, c.g, c.b, c.a))
+    return true
+  }
+
+  if (fill.type.startsWith('GRADIENT') && fill.gradientStops && fill.gradientTransform) {
+    r.applyGradientFill(fill, node)
+    return true
+  }
+
+  if (fill.type === 'IMAGE' && fill.imageHash) {
+    return r.applyImageFill(fill, node, graph)
+  }
+
+  return false
+}
+
+export function applyGradientFill(r: SkiaRenderer, fill: Fill, node: SceneNode): void {
+  const stops = fill.gradientStops
+  const t = fill.gradientTransform
+  if (!stops || !t) return
+  const colors = stops.map((s) => r.ck.Color4f(s.color.r, s.color.g, s.color.b, s.color.a))
+  const positions = stops.map((s) => s.position)
+
+  const w = node.width
+  const h = node.height
+
+  if (fill.type === 'GRADIENT_LINEAR') {
+    const startX = t.m02 * w
+    const startY = t.m12 * h
+    const endX = (t.m00 + t.m02) * w
+    const endY = (t.m10 + t.m12) * h
+    const shader = r.ck.Shader.MakeLinearGradient(
+      [startX, startY],
+      [endX, endY],
+      colors,
+      positions,
+      r.ck.TileMode.Clamp
+    )
+    r.fillPaint.setShader(shader)
+  } else if (fill.type === 'GRADIENT_RADIAL') {
+    const cx = t.m02 * w
+    const cy = t.m12 * h
+    const radius = Math.sqrt(t.m00 * t.m00 + t.m10 * t.m10) * Math.max(w, h)
+    const shader = r.ck.Shader.MakeRadialGradient(
+      [cx, cy],
+      radius,
+      colors,
+      positions,
+      r.ck.TileMode.Clamp
+    )
+    r.fillPaint.setShader(shader)
+  } else if (fill.type === 'GRADIENT_ANGULAR') {
+    const cx = t.m02 * w
+    const cy = t.m12 * h
+    const shader = r.ck.Shader.MakeSweepGradient(
+      cx,
+      cy,
+      colors,
+      positions,
+      r.ck.TileMode.Clamp,
+      undefined
+    )
+    r.fillPaint.setShader(shader)
+  } else if (fill.type === 'GRADIENT_DIAMOND') {
+    const cx = t.m02 * w
+    const cy = t.m12 * h
+    const radius = Math.sqrt(t.m00 * t.m00 + t.m10 * t.m10) * Math.max(w, h)
+    const shader = r.ck.Shader.MakeRadialGradient(
+      [cx, cy],
+      radius,
+      colors,
+      positions,
+      r.ck.TileMode.Clamp
+    )
+    r.fillPaint.setShader(shader)
+  }
+}
+
+export function applyImageFill(
+  r: SkiaRenderer,
+  fill: Fill,
+  node: SceneNode,
+  graph: SceneGraph
+): boolean {
+  const hash = fill.imageHash
+  if (!hash) return false
+  let img = r.imageCache.get(hash)
+  if (!img) {
+    const data = graph.images.get(hash)
+    if (!data) return false
+    img = r.ck.MakeImageFromEncoded(data) ?? undefined
+    if (img) r.imageCache.set(hash, img)
+    else return false
+  }
+
+  const imgW = img.width()
+  const imgH = img.height()
+  const scaleMode = fill.imageScaleMode ?? 'FILL'
+
+  if (scaleMode === 'TILE') {
+    const shader = img.makeShaderCubic(
+      r.ck.TileMode.Repeat,
+      r.ck.TileMode.Repeat,
+      1 / 3,
+      1 / 3
+    )
+    r.fillPaint.setShader(shader)
+    return true
+  }
+
+  let sx: number, sy: number, sw: number, sh: number
+  if (scaleMode === 'CROP' && fill.imageTransform) {
+    const t = fill.imageTransform
+    sx = t.m02 * imgW
+    sy = t.m12 * imgH
+    sw = t.m00 * imgW
+    sh = t.m11 * imgH
+  } else if (scaleMode === 'FIT') {
+    const scale = Math.min(node.width / imgW, node.height / imgH)
+    sw = imgW
+    sh = imgH
+    sx = -(node.width / scale - imgW) / 2
+    sy = -(node.height / scale - imgH) / 2
+  } else {
+    const scale = Math.max(node.width / imgW, node.height / imgH)
+    sw = node.width / scale
+    sh = node.height / scale
+    sx = (imgW - sw) / 2
+    sy = (imgH - sh) / 2
+  }
+
+  const shader = img.makeShaderCubic(
+    r.ck.TileMode.Clamp,
+    r.ck.TileMode.Clamp,
+    1 / 3,
+    1 / 3,
+    r.ck.Matrix.multiply(
+      r.ck.Matrix.scaled(node.width / sw, node.height / sh),
+      r.ck.Matrix.translated(-sx, -sy)
+    )
+  )
+  r.fillPaint.setShader(shader)
+  return true
+}
+
+export function drawArc(r: SkiaRenderer, canvas: Canvas, node: SceneNode, paint: Paint): void {
+  const arc = node.arcData
+  if (!arc) return
+  const cx = node.width / 2
+  const cy = node.height / 2
+  const rx = node.width / 2
+  const ry = node.height / 2
+  const innerRx = rx * arc.innerRadius
+  const innerRy = ry * arc.innerRadius
+
+  const startDeg = arc.startingAngle * (180 / Math.PI)
+  const endDeg = arc.endingAngle * (180 / Math.PI)
+  const sweepDeg = endDeg - startDeg
+
+  const path = new r.ck.Path()
+  const oval = r.ck.LTRBRect(0, 0, node.width, node.height)
+
+  if (arc.innerRadius > 0) {
+    path.addArc(oval, startDeg, sweepDeg)
+    const innerOval = r.ck.LTRBRect(cx - innerRx, cy - innerRy, cx + innerRx, cy + innerRy)
+    const innerPath = new r.ck.Path()
+    innerPath.addArc(innerOval, startDeg + sweepDeg, -sweepDeg)
+    path.addPath(innerPath)
+    path.close()
+    innerPath.delete()
+  } else {
+    const isFullCircle = Math.abs(sweepDeg) >= 359.99
+    if (isFullCircle) {
+      path.addOval(oval)
+    } else {
+      path.moveTo(cx, cy)
+      path.addArc(oval, startDeg, sweepDeg)
+      path.close()
+    }
+  }
+
+  canvas.drawPath(path, paint)
+  path.delete()
+}

package/src/renderer/index.ts

@@ -0,0 +1 @@
+export { SkiaRenderer, type RenderOverlays } from './renderer'