lgimgui 0.1.0

package/src/widgets/glass.js

@@ -0,0 +1,326 @@
+import { createNode, translateNode, scaleNode } from '../core/frame.js'
+import { springs } from '../core/spring.js'
+import { resolveTheme, tintFamily, ACCENT } from '../core/theme.js'
+import { rectUnion, clamp } from '../core/geometry.js'
+import { ROLE_PRESETS, ROLE_SURFACE } from '../material/presets.js'
+import { mixMaterial, unfocusedMaterial, darkMaterial, lenslessMaterial, thickenedMaterial, accessibleMaterial } from '../material/material.js'
+import { analyzeBackdrop, resolvePolarity, resolveBorderFade, adaptiveScales } from '../material/adapt.js'
+
+const ROLE_VARIANT = { clear: 'clear', thumb: 'lens', accent: 'lens' }
+
+const ROLE_RADIUS = { window: 36, dock: 28, clear: 14, thumb: 14, control: 12, toolbar: 12, menu: 16, pane: 32, thin: 14, studio: 40 }
+
+export function shapeRadius(props, rect, fallback) {
+  const shape = props.shape
+  if (shape === 'pill' || shape === 'circle') return Math.min(rect.w, rect.h) / 2
+  if (typeof props.radius === 'number') return props.radius
+  return fallback
+}
+
+function smoothstep(a, b, x) {
+  const t = clamp((x - a) / (b - a), 0, 1)
+  return t * t * (3 - 2 * t)
+}
+
+export function createGlass(core) {
+  const { driver, state, clock, ids, settings, materials } = core
+
+  function resolveDark(st, analysis, surface) {
+    if (settings.appearance === 'dark') return clock.animate(st, 'dark', 1, { stiffness: 120, damping: 20 })
+    if (settings.appearance === 'light') return clock.animate(st, 'dark', 0, { stiffness: 120, damping: 20 })
+    return resolvePolarity(st, analysis, surface, clock)
+  }
+
+  function presetFor(role) {
+    return materials[role] ?? ROLE_PRESETS[role] ?? ROLE_PRESETS.control
+  }
+
+  function resolveMaterial(props, st, options) {
+    const role = props.role ?? 'control'
+    const variant = props.variant ?? ROLE_VARIANT[role] ?? 'regular'
+    let material = presetFor(role)
+    const focus = clock.animate(st, 'focus', options.focused ? 1 : 0, springs.gentle)
+    if (focus < 1) material = mixMaterial(materials.unfocused?.[role] ?? unfocusedMaterial(material), material, focus)
+    if (variant === 'regular' && options.dark > 0) material = mixMaterial(material, materials.dark?.[role] ?? darkMaterial(material), options.dark)
+    if (options.thick > 0) material = thickenedMaterial(material, options.thick)
+    if (props.tint) {
+      const roleTint = props.tint === 'accent' && !options.accent
+      const tintColor = roleTint
+        ? [material.tint.r / 255, material.tint.g / 255, material.tint.b / 255, 1]
+        : props.tint === 'accent'
+          ? options.accent
+          : props.tint
+      const family = tintFamily(tintColor, options.analysis.luminance)
+      const recede = 1 - focus
+      const greyed = family.map((channel, i) => (i < 3 ? channel + (0.62 - channel) * recede : channel))
+      material = {
+        ...material,
+        tint: { r: greyed[0] * 255, g: greyed[1] * 255, b: greyed[2] * 255, a: Math.max(material.tint.a, props.tintOpacity ?? 0.62) },
+      }
+    }
+    if (variant === 'regular') {
+      const scales = adaptiveScales(options.analysis)
+      const tintResponse = (material.adaptTint ?? 100) / 100
+      const shadowResponse = (material.adaptShadow ?? 100) / 100
+      const tintScale = 1 + (scales.tint - 1) * tintResponse
+      material = { ...material, tint: { ...material.tint, a: Math.min(1, material.tint.a * tintScale) } }
+      options.shadowScale = 1 + (scales.shadow - 1) * shadowResponse
+    }
+    material = accessibleMaterial(material, settings, options.dark > 0.5 || variant === 'clear', Boolean(props.tint))
+    return { material, variant, role, focus }
+  }
+
+  function parentGlassRecede(ctx) {
+    return ctx.glass?.theme?.recede ?? 0
+  }
+
+  function childShapes(node, radiusFallback) {
+    const shapes = []
+    for (const child of node.children) {
+      if (child.props.detached || child.props.shape === 'none') continue
+      const r = child.rect
+      if (r.w < 2 || r.h < 2) continue
+      shapes.push({
+        x: r.x,
+        y: r.y,
+        w: r.w,
+        h: r.h,
+        radius: shapeRadius(child.props, r, shapeRadius(node.props, r, radiusFallback)),
+        roundness: child.props.roundness ?? node.props.roundness ?? 5,
+        fade: child.props.reveal ?? 1,
+      })
+    }
+    return shapes
+  }
+
+  function paint(node, ctx) {
+    const props = node.props
+    const id = node.id
+    if (ctx.glass && !props.lift && !props.inset) {
+      throw new Error(
+        `glass on glass: "${id}" is inside glass "${ctx.glass.id}". Controls inside glass are fills; use ui.pane for a thin inset pane or lift: true for a transient lifted element.`,
+      )
+    }
+    const st = state.get(id)
+    driver.markGhostSeen(id)
+
+    const target = node.rect
+    let shapeRect = target
+    const morph = props.morph ?? false
+    if (morph) {
+      if (st.mx == null) {
+        const from = (typeof props.from === 'function' ? props.from() : props.from) ?? target
+        st.mx = { value: from.x, velocity: 0 }
+        st.my = { value: from.y, velocity: 0 }
+        st.mw = { value: from.w, velocity: 0 }
+        st.mh = { value: from.h, velocity: 0 }
+        st.restArea = from.w * from.h
+      }
+      const morphSpring = props.morphSpring ?? springs.morph
+      const w = clock.animate(st, 'mw', target.w, morphSpring)
+      const h = clock.animate(st, 'mh', target.h, morphSpring)
+      if (morph === 'size') {
+        st.mx.value = target.x
+        st.my.value = target.y
+        st.mx.velocity = 0
+        st.my.velocity = 0
+      }
+      shapeRect = {
+        x: clock.animate(st, 'mx', target.x, morphSpring),
+        y: clock.animate(st, 'my', target.y, morphSpring),
+        w,
+        h,
+      }
+    }
+    const scale = clock.animate(st, 'press', props.pressed ? 0.965 : 1, props.pressed ? springs.snappy : springs.fade)
+    const morphOffset = { x: shapeRect.x - target.x, y: shapeRect.y - target.y }
+    const centerX = shapeRect.x + shapeRect.w / 2
+    const centerY = shapeRect.y + shapeRect.h / 2
+    if (scale !== 1) {
+      shapeRect = { x: centerX - (shapeRect.w * scale) / 2, y: centerY - (shapeRect.h * scale) / 2, w: shapeRect.w * scale, h: shapeRect.h * scale }
+    }
+    const offset = { x: shapeRect.x - target.x, y: shapeRect.y - target.y }
+    for (const child of node.children) {
+      translateNode(child, morphOffset.x, morphOffset.y)
+      scaleNode(child, centerX, centerY, scale)
+    }
+
+    const presenceSpring = props.presenceSpring ?? springs.presence
+    const presence = clock.animateFrom(st, 'presence', props.appear === false ? 1 : 0, 1, presenceSpring)
+    const role = props.role ?? 'control'
+    const surface = props.surface ?? ROLE_SURFACE[role] ?? 'small'
+    const variant = props.variant ?? ROLE_VARIANT[role] ?? 'regular'
+    const glowTarget = props.pressed ? 1 : 0
+    if (props.pressed && !st.wasPressed) {
+      st.glowRadius = { value: 0, velocity: 0 }
+      if (props.pressPoint) st.glowPoint = props.pressPoint
+    }
+    st.wasPressed = Boolean(props.pressed)
+    const glow = clock.animate(st, 'glow', glowTarget, glowTarget ? springs.snappy : springs.fade)
+    const fullRadius = Math.max(shapeRect.w, shapeRect.h) * 1.4
+    const glowRadius = props.pressed ? clock.animate(st, 'glowRadius', fullRadius, springs.snappy) : (st.glowRadius?.value ?? fullRadius)
+    const glowPoint = st.glowPoint ?? { x: shapeRect.x + shapeRect.w / 2, y: shapeRect.y + shapeRect.h / 2 }
+
+    const drawScale = node.drawScale ?? 1
+    const radiusFallback = (materials[role]?.cornerRadius ?? ROLE_RADIUS[role] ?? 12) * drawScale
+    const roundnessFallback = materials[role]?.cornerRoundness ?? 5
+    const ownRadius = () => (typeof props.radius === 'number' ? props.radius * drawScale : shapeRadius(props, shapeRect, radiusFallback))
+    const shapes = props.merge
+      ? childShapes(node, radiusFallback)
+      : [{ ...shapeRect, radius: ownRadius(), roundness: props.roundness ?? roundnessFallback }]
+    if (shapes.length === 0) shapes.push({ ...shapeRect, radius: ownRadius(), roundness: props.roundness ?? roundnessFallback })
+    let hardFirst = false
+    if (props.merge && props.bridge > 0.02) {
+      let union = null
+      for (const child of node.children) {
+        if (child.props.detached || child.props.shape === 'none') continue
+        union = rectUnion(union, child.rect)
+      }
+      if (union && union.h > 0) {
+        const h = union.h * Math.min(1, props.bridge)
+        shapes.unshift({ x: union.x, y: union.y + (union.h - h) / 2, w: union.w, h, radius: h / 2, roundness: 2 })
+        hardFirst = true
+      }
+    }
+
+    const mergeRate = props.merge ? (props.mergeRate ?? Math.min(shapeRect.w, shapeRect.h) * 0.35) : 0
+    let bounds = null
+    for (const shape of shapes) bounds = rectUnion(bounds, shape)
+    const pad = mergeRate + 2
+    bounds = { x: bounds.x - pad, y: bounds.y - pad, w: bounds.w + pad * 2, h: bounds.h + pad * 2 }
+
+    const stratum = ctx.stratumFor(bounds, ctx.stratum + 1)
+    const analysis = analyzeBackdrop(ctx.probeFor(stratum - 1), shapeRect)
+
+    const dark = variant === 'regular' ? resolveDark(st, analysis, surface) : 0
+    const growth = st.restArea > 0 ? clamp(1 - st.restArea / Math.max(1, shapeRect.w * shapeRect.h), 0, 1) : 0
+    const focused = props.focused ?? ctx.glass?.focused ?? true
+    const accent = props.accent ?? ctx.glass?.accent ?? null
+    const options = { dark, thick: props.thick ?? Math.min(growth, 0.6), analysis, shadowScale: 1, focused, accent }
+    const resolved = resolveMaterial(props, st, options)
+
+
+    const full = resolved.material
+    const material = presence < 1 ? mixMaterial(lenslessMaterial(full), full, presence) : full
+    st.resolved = material
+    const dimming = variant === 'clear' ? (props.dimming ?? 0.22) * presence : 0
+    const borderFade = material.borderAdapt && material.borderWidth > 0 ? 1 - resolveBorderFade(st, analysis, clock) : 1
+    const border = settings.increaseContrast ? 1.5 : material.borderWidth * presence * (borderFade > 0.02 ? 1 : 0)
+    const theme = variant === 'lens' && ctx.theme ? { ...ctx.theme } : resolveTheme(variant === 'clear' ? Math.max(dark, 1) : dark, settings)
+    if (accent && !settings.increaseContrast) {
+      theme.accent = accent
+      theme.accentPress = [accent[0] * 0.88, accent[1] * 0.88, accent[2] * 0.88, accent[3]]
+      theme.focusRing = [accent[0], accent[1], accent[2], 0.7]
+    }
+    if (props.tint) theme.fg = theme.onAccent
+    const inheritedRecede = parentGlassRecede(ctx)
+    const recede = Math.max(inheritedRecede, settings.increaseContrast ? 0 : 1 - resolved.focus)
+    theme.recede = recede
+    if (recede > 0) {
+      const toward = (color, target, amount) => color.map((channel, i) => channel + (target[i] - channel) * amount)
+      const grey = theme.fg2.slice(0, 3).concat([1])
+      theme.fg = toward(theme.fg, theme.fg2, recede)
+      theme.accent = toward(theme.accent, [grey[0], grey[1], grey[2], 0.55], recede)
+      theme.switchOn = toward(theme.switchOn, [grey[0], grey[1], grey[2], 0.5], recede)
+      theme.field = [theme.field[0], theme.field[1], theme.field[2], theme.field[3] * (1 - recede * 0.45)]
+      theme.accentPress = theme.accent
+      theme.knob = toward(theme.knob, [0.97, 0.97, 0.98, 1], recede * 0.6)
+      theme.track = [theme.track[0], theme.track[1], theme.track[2], Math.min(1, theme.track[3] * (1 + recede * 0.25))]
+      theme.selected = [theme.selected[0], theme.selected[1], theme.selected[2], theme.selected[3] * (1 - recede * 0.4)]
+      theme.hover = [theme.hover[0], theme.hover[1], theme.hover[2], theme.hover[3] * (1 - recede * 0.5)]
+    }
+
+    const op = {
+      type: 'glass',
+      id,
+      shapes,
+      mergeRate,
+      hardFirst,
+      material,
+      dimming,
+      glow: [glowPoint.x, glowPoint.y, glowRadius, glow * (props.glowStrength ?? 1)],
+      coverageScale: smoothstep(0, 0.35, presence),
+      border,
+      borderColor: settings.increaseContrast
+        ? (dark > 0.5 ? [1, 1, 1, 0.9] : [0, 0, 0, 0.85])
+        : [material.borderColor.r / 255, material.borderColor.g / 255, material.borderColor.b / 255, material.borderColor.a * borderFade],
+      shadowScale: options.shadowScale * presence,
+      shadowClip: ctx.glass?.shape ?? null,
+      bounds,
+    }
+
+    const parentGlass = ctx.glass
+    const parentTheme = ctx.theme
+    const parentStratum = ctx.stratum
+    ctx.stratum = stratum
+    ctx.emitGlass(op)
+    if (props.hit) ctx.hit(node, props.hitRect ?? shapeRect)
+    ctx.glass = { id, dark, theme, rect: shapeRect, stratum: ctx.stratum, variant, offset, presence, focused, accent, shape: shapes[shapes.length - 1] }
+    ctx.theme = theme
+    const previousClip = props.clipContent !== false ? ctx.pushClip(shapeRect) : ctx.clip
+    const layer = ctx.ensure(ctx.stratum)
+    const start = layer.ops.length
+    ctx.paintChildren(node, ctx)
+    const overlays = layer.ops.slice(start)
+    if (props.clipContent !== false) ctx.popClip(previousClip)
+    if (props.resizable) registerResizeHits(node, ctx, shapeRect)
+    ctx.glass = parentGlass
+    ctx.theme = parentTheme
+    ctx.stratum = parentStratum
+
+    if (props.appear !== false) {
+      driver.ghost(id, (ghostCtx) => {
+        const ghostState = state.get(id)
+        const fade = clock.animate(ghostState, 'presence', 0, presenceSpring)
+        if (fade <= 0.02) return true
+        ghostCtx.stratum = ghostCtx.stratumFor(op.bounds, parentStratum + 1)
+        ghostCtx.clip = op.clip
+        ghostCtx.emitGlass({
+          ...op,
+          material: mixMaterial(lenslessMaterial(full), full, fade),
+          coverageScale: smoothstep(0, 0.35, fade),
+          shadowScale: options.shadowScale * fade,
+          glow: [0, 0, 0, 0],
+        })
+        const target = ghostCtx.ensure(ghostCtx.stratum).ops
+        for (const overlay of overlays) {
+          if (!overlay.color) continue
+          target.push({ ...overlay, color: [overlay.color[0], overlay.color[1], overlay.color[2], overlay.color[3] * fade] })
+        }
+        return false
+      })
+    }
+  }
+
+  function registerResizeHits(node, ctx, rect) {
+    const band = 8
+    const corner = 18
+    const half = band / 2
+    const regions = {
+      left: { x: rect.x - half, y: rect.y + corner, w: band, h: rect.h - corner * 2 },
+      right: { x: rect.x + rect.w - half, y: rect.y + corner, w: band, h: rect.h - corner * 2 },
+      top: { x: rect.x + corner, y: rect.y - half, w: rect.w - corner * 2, h: band },
+      bottom: { x: rect.x + corner, y: rect.y + rect.h - half, w: rect.w - corner * 2, h: band },
+      topLeft: { x: rect.x - half, y: rect.y - half, w: corner, h: corner },
+      topRight: { x: rect.x + rect.w - corner + half, y: rect.y - half, w: corner, h: corner },
+      bottomLeft: { x: rect.x - half, y: rect.y + rect.h - corner + half, w: corner, h: corner },
+      bottomRight: { x: rect.x + rect.w - corner + half, y: rect.y + rect.h - corner + half, w: corner, h: corner },
+    }
+    const previousClip = ctx.clip
+    ctx.clip = null
+    for (const [name, region] of Object.entries(regions)) ctx.hit({ id: node.id + '/resize/' + name, layer: node.layer }, region)
+    ctx.clip = previousClip
+  }
+
+  function glass(props, fn) {
+    const id = props.id ?? ids.make(props.key ?? props.label ?? 'glass')
+    const node = createNode('glass', { direction: 'column', ...props, id })
+    node.paint = paint
+    driver.open(node)
+    if (fn) fn(node)
+    driver.close()
+    return node
+  }
+
+  return { glass, paint }
+}

package/src/widgets/primitives.js

@@ -0,0 +1,355 @@
+import { createNode } from '../core/frame.js'
+import { cubicPoints, strokeQuads } from '../core/curve.js'
+
+export const DEFAULT_FONT = {
+  family: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif",
+  size: 13,
+  weight: 500,
+  lineHeight: 1.3,
+}
+
+export function createPrimitives(core) {
+  const { driver, renderer, ids, state, clock } = core
+  const atlas = renderer.atlas
+
+  function font(props) {
+    return {
+      ...DEFAULT_FONT,
+      ...(props.font ?? {}),
+      size: props.size ?? props.font?.size ?? DEFAULT_FONT.size,
+      weight: props.weight ?? props.font?.weight ?? DEFAULT_FONT.weight,
+    }
+  }
+
+  function box(props = {}, fn) {
+    const node = createNode('box', props)
+    if (props.fill || props.stroke) node.paint = paintBox
+    driver.open(node)
+    if (fn) fn(node)
+    driver.close()
+    return node
+  }
+
+  function paintBox(node, ctx) {
+    const props = node.props
+    const k = node.drawScale ?? 1
+    if (props.fill) {
+      ctx.emit({ type: 'rect', rect: node.rect, radius: (props.radius ?? 0) * k, roundness: props.roundness ?? 5, color: resolveColor(props.fill, ctx) })
+    }
+    if (props.stroke) {
+      ctx.emit({ type: 'stroke', rect: node.rect, radius: (props.radius ?? 0) * k, roundness: props.roundness ?? 5, color: resolveColor(props.stroke, ctx), width: (props.strokeWidth ?? 1) * k })
+    }
+    ctx.paintChildren(node, ctx)
+  }
+
+  function transform(props = {}, fn) {
+    const { scale, tx, ty, ...rest } = props
+    const node = createNode('transform', { direction: 'stack', x: 0, y: 0, w: 'fill', h: 'fill', ...rest, transform: { scale: scale ?? 1, tx: tx ?? 0, ty: ty ?? 0 } })
+    driver.open(node)
+    if (fn) fn(node)
+    driver.close()
+    return node
+  }
+
+  function emitStroke(ctx, points, props) {
+    const color = resolveColor(props.color ?? 'fg', ctx)
+    for (const quad of strokeQuads(points, { width: props.width ?? 2, dash: props.dash, gap: props.gap })) {
+      ctx.emit({ type: 'rect', rect: quad.rect, radius: quad.radius, roundness: 2, rotation: quad.rotation, color })
+    }
+  }
+
+  function polyline(points, props = {}) {
+    const node = createNode('polyline', { x: 0, y: 0, w: 0, h: 0, ...props })
+    node.paint = (n, ctx) => emitStroke(ctx, points, props)
+    return driver.add(node)
+  }
+
+  function curve(shape, props = {}) {
+    const node = createNode('curve', { x: 0, y: 0, w: 0, h: 0, ...props })
+    node.paint = (n, ctx) => emitStroke(ctx, cubicPoints(shape, { step: props.step }), props)
+    return driver.add(node)
+  }
+
+  function resolveColor(color, ctx) {
+    if (typeof color === 'string') return ctx.theme[color] ?? [1, 0, 1, 1]
+    return color
+  }
+
+  function row(props = {}, fn) {
+    return box({ direction: 'row', align: 'center', ...props }, fn)
+  }
+
+  function column(props = {}, fn) {
+    return box({ direction: 'column', align: 'stretch', ...props }, fn)
+  }
+
+  function stack(props = {}, fn) {
+    return box({ direction: 'stack', align: 'stretch', ...props }, fn)
+  }
+
+  function spacer(size) {
+    if (size == null) return driver.add(createNode('spacer', { fr: 1, w: 'fill', h: 'fill' }))
+    return driver.add(createNode('spacer', { w: size, h: size }))
+  }
+
+  function separator(props = {}) {
+    const node = createNode('separator', { h: props.vertical ? 'fill' : 1, w: props.vertical ? 1 : 'fill', ...props })
+    node.paint = (n, ctx) => {
+      ctx.emit({ type: 'rect', rect: n.rect, color: ctx.theme.separator })
+    }
+    return driver.add(node)
+  }
+
+  function text(value, props = {}) {
+    const f = font(props)
+    const content = String(value ?? '')
+    const node = createNode('text', { ...props, label: content })
+    node.intrinsic = () => {
+      const size = atlas.measure(content, f)
+      return { w: props.maxWidth ? Math.min(size.w, props.maxWidth) : size.w, h: size.h }
+    }
+    node.paint = (n, ctx) => {
+      const color = props.color ? resolveColor(props.color, ctx) : ctx.theme.fg
+      const drawScale = n.drawScale ?? 1
+      const naturalW = n.natural.w * drawScale
+      const naturalH = n.natural.h * drawScale
+      const shown = drawScale === 1 && n.rect.w < naturalW - 0.5 ? atlas.truncate(content, f, n.rect.w) : content
+      const width = shown === content ? naturalW : atlas.measure(shown, f).w
+      let x = n.rect.x
+      if (props.align === 'center') x = n.rect.x + (n.rect.w - width) / 2
+      else if (props.align === 'end') x = n.rect.x + n.rect.w - width
+      const y = n.rect.y + (n.rect.h - naturalH) / 2
+      ctx.emit({ type: 'text', x, y, text: shown, font: f, color, scale: drawScale, vibrancy: ctx.glass ? (props.vibrancy ?? 0.35) : 0 })
+    }
+    return driver.add(node)
+  }
+
+  function label(value, props = {}) {
+    return text(value, { color: 'fg2', weight: 500, ...props })
+  }
+
+  function heading(value, props = {}) {
+    return text(value, { size: 17, weight: 700, ...props })
+  }
+
+  function rect(props = {}) {
+    const node = createNode('rect', props)
+    node.paint = (n, ctx) => {
+      const radius = (props.radius ?? 0) * (n.drawScale ?? 1)
+      if (props.gradient) {
+        ctx.emit({ type: 'gradient', rect: n.rect, radius, roundness: props.roundness ?? 5, color: resolveColor(props.fill, ctx), color2: resolveColor(props.gradient, ctx), horizontal: props.horizontal })
+      } else {
+        ctx.emit({ type: 'rect', rect: n.rect, radius, roundness: props.roundness ?? 5, color: resolveColor(props.fill ?? 'fg', ctx), rotation: props.rotation })
+      }
+    }
+    return driver.add(node)
+  }
+
+  function image(source, props = {}) {
+    const node = createNode('image', props)
+    node.intrinsic = () => ({ w: props.w ?? source?.width ?? 0, h: props.h ?? source?.height ?? 0 })
+    node.paint = (n, ctx) => {
+      if (!source) return
+      const fit = props.fit ?? 'cover'
+      let uv = [0, 0, 1, 1]
+      const r = n.rect
+      const imageAspect = source.width / source.height
+      const rectAspect = r.w / r.h
+      if (fit === 'cover') {
+        if (rectAspect > imageAspect) {
+          const scale = imageAspect / rectAspect
+          uv = [0, 0.5 - scale / 2, 1, 0.5 + scale / 2]
+        } else {
+          const scale = rectAspect / imageAspect
+          uv = [0.5 - scale / 2, 0, 0.5 + scale / 2, 1]
+        }
+      }
+      ctx.emit({ type: 'image', rect: r, image: source, uv, radius: props.radius ?? 0, roundness: props.roundness ?? 5, color: props.color ?? [1, 1, 1, props.opacity ?? 1] })
+    }
+    return driver.add(node)
+  }
+
+  const ICONS = {
+    close: (r, c, emit) => {
+      emit({ rect: bar(r, 0.62, 0.11), radius: 1, color: c, rotation: Math.PI / 4 })
+      emit({ rect: bar(r, 0.62, 0.11), radius: 1, color: c, rotation: -Math.PI / 4 })
+    },
+    plus: (r, c, emit) => {
+      emit({ rect: bar(r, 0.62, 0.11), radius: 1, color: c })
+      emit({ rect: bar(r, 0.62, 0.11), radius: 1, color: c, rotation: Math.PI / 2 })
+    },
+    minus: (r, c, emit) => emit({ rect: bar(r, 0.62, 0.11), radius: 1, color: c }),
+    check: (r, c, emit) => {
+      const w = r.w
+      emit({ rect: { x: r.x + w * 0.22, y: r.y + w * 0.56, w: w * 0.3, h: w * 0.12 }, radius: 1, color: c, rotation: Math.PI / 4 })
+      emit({ rect: { x: r.x + w * 0.38, y: r.y + w * 0.45, w: w * 0.52, h: w * 0.12 }, radius: 1, color: c, rotation: -Math.PI / 4 })
+    },
+    chevronDown: (r, c, emit) => chevron(r, c, emit, Math.PI),
+    chevronUp: (r, c, emit) => chevron(r, c, emit, 0),
+    chevronRight: (r, c, emit) => chevron(r, c, emit, Math.PI / 2),
+    chevronLeft: (r, c, emit) => chevron(r, c, emit, -Math.PI / 2),
+    dot: (r, c, emit) => emit({ rect: inset(r, 0.3), radius: 99, color: c }),
+    circle: (r, c, emit) => emit({ type: 'stroke', rect: inset(r, 0.12), radius: 99, color: c, width: r.w * 0.1 }),
+    square: (r, c, emit) => emit({ rect: inset(r, 0.2), radius: r.w * 0.12, color: c }),
+    grid: (r, c, emit) => {
+      const s = r.w * 0.32
+      const g = r.w * 0.1
+      const x0 = r.x + (r.w - s * 2 - g) / 2
+      const y0 = r.y + (r.h - s * 2 - g) / 2
+      for (let i = 0; i < 2; i++) for (let j = 0; j < 2; j++) emit({ rect: { x: x0 + i * (s + g), y: y0 + j * (s + g), w: s, h: s }, radius: s * 0.28, color: c })
+    },
+    menu: (r, c, emit) => {
+      for (let i = 0; i < 3; i++) emit({ rect: { x: r.x + r.w * 0.2, y: r.y + r.h * (0.28 + i * 0.22) - r.h * 0.05, w: r.w * 0.6, h: r.h * 0.1 }, radius: 1, color: c })
+    },
+    search: (r, c, emit) => {
+      emit({ type: 'stroke', rect: { x: r.x + r.w * 0.16, y: r.y + r.h * 0.16, w: r.w * 0.5, h: r.h * 0.5 }, radius: 99, color: c, width: r.w * 0.1 })
+      emit({ rect: { x: r.x + r.w * 0.56, y: r.y + r.h * 0.62, w: r.w * 0.3, h: r.w * 0.11 }, radius: 1, color: c, rotation: Math.PI / 4 })
+    },
+    gear: (r, c, emit) => {
+      for (let i = 0; i < 4; i++) emit({ rect: bar(r, 0.8, 0.2), radius: r.w * 0.05, color: c, rotation: (i * Math.PI) / 4 })
+      emit({ type: 'stroke', rect: inset(r, 0.22), radius: 99, color: c, width: r.w * 0.16 })
+    },
+    sun: (r, c, emit) => {
+      emit({ rect: inset(r, 0.3), radius: 99, color: c })
+      for (let i = 0; i < 4; i++) emit({ rect: bar(r, 0.9, 0.08), radius: 1, color: c, rotation: (i * Math.PI) / 4 })
+      emit({ rect: inset(r, 0.22), radius: 99, color: [0, 0, 0, 0] })
+    },
+    moon: (r, c, emit) => emit({ rect: inset(r, 0.18), radius: 99, color: c }),
+    play: (r, c, emit) => emit({ rect: { x: r.x + r.w * 0.3, y: r.y + r.h * 0.25, w: r.w * 0.5, h: r.h * 0.5 }, radius: r.w * 0.08, color: c, rotation: Math.PI / 4 }),
+    pause: (r, c, emit) => {
+      emit({ rect: { x: r.x + r.w * 0.26, y: r.y + r.h * 0.22, w: r.w * 0.16, h: r.h * 0.56 }, radius: 2, color: c })
+      emit({ rect: { x: r.x + r.w * 0.58, y: r.y + r.h * 0.22, w: r.w * 0.16, h: r.h * 0.56 }, radius: 2, color: c })
+    },
+    back: (r, c, emit) => chevron(r, c, emit, -Math.PI / 2),
+    forward: (r, c, emit) => chevron(r, c, emit, Math.PI / 2),
+    more: (r, c, emit) => {
+      for (let i = 0; i < 3; i++) emit({ rect: { x: r.x + r.w * (0.14 + i * 0.3), y: r.y + r.h * 0.44, w: r.w * 0.14, h: r.w * 0.14 }, radius: 99, color: c })
+    },
+  }
+
+  function bar(r, length, thickness) {
+    const w = r.w * length
+    const h = r.w * thickness
+    return { x: r.x + (r.w - w) / 2, y: r.y + (r.h - h) / 2, w, h }
+  }
+
+  function inset(r, amount) {
+    return { x: r.x + r.w * amount, y: r.y + r.h * amount, w: r.w * (1 - amount * 2), h: r.h * (1 - amount * 2) }
+  }
+
+  function chevron(r, c, emit, rotation) {
+    const length = r.w * 0.42
+    const thick = r.w * 0.11
+    const cx = r.x + r.w / 2
+    const cy = r.y + r.h / 2
+    const cos = Math.cos(rotation)
+    const sin = Math.sin(rotation)
+    const arm = (dir) => {
+      const ox = dir * length * 0.33
+      const oy = -length * 0.18
+      const x = cx + ox * cos - oy * sin
+      const y = cy + ox * sin + oy * cos
+      return { rect: { x: x - length / 2, y: y - thick / 2, w: length, h: thick }, radius: 1, color: c, rotation: rotation + dir * Math.PI / 4 }
+    }
+    emit(arm(-1))
+    emit(arm(1))
+  }
+
+  function icon(name, props = {}) {
+    const size = props.size ?? 16
+    const node = createNode('icon', { ...props, w: size, h: size })
+    node.paint = (n, ctx) => {
+      const color = props.color ? resolveColor(props.color, ctx) : ctx.theme.fg
+      const draw = ICONS[name]
+      if (!draw) {
+        ctx.emit({ type: 'rect', rect: inset(n.rect, 0.2), radius: 3, color })
+        return
+      }
+      draw(n.rect, color, (op) => ctx.emit({ type: op.type ?? 'rect', roundness: 2, ...op }))
+    }
+    return driver.add(node)
+  }
+
+  function scroll(props = {}, fn) {
+    const id = ids.make(props.key ?? 'scroll')
+    const st = state.get(id, () => ({ offset: 0 }))
+    const outer = createNode('scroll', { direction: 'stack', align: 'stretch', ...props, pad: 0, gap: 0, id })
+    outer.paint = paintScroll
+    driver.open(outer)
+    const horizontal = Boolean(props.horizontal)
+    const inner = createNode('box', {
+      direction: horizontal ? 'row' : 'column',
+      align: horizontal ? 'center' : 'stretch',
+      gap: props.gap,
+      pad: props.pad,
+      detached: false,
+      x: 0,
+      y: 0,
+      w: horizontal ? undefined : 'fill',
+      h: horizontal ? 'fill' : undefined,
+    })
+    driver.open(inner)
+    if (fn) fn(outer)
+    driver.close()
+    driver.close()
+    outer.inner = inner
+    outer.scrollState = st
+    return outer
+  }
+
+  function paintScroll(node, ctx) {
+    const st = node.scrollState
+    const frame = driver.frame
+    const inner = node.inner
+    const horizontal = Boolean(node.props.horizontal)
+    const maxOffset = Math.max(0, horizontal ? inner.rect.w - node.rect.w : inner.rect.h - node.rect.h)
+    if (horizontal) {
+      if (frame.wheelTargetX === node.id) st.offset += frame.wheelX
+    } else if (frame.wheelTarget === node.id) st.offset += frame.wheelY
+    st.offset = Math.max(0, Math.min(maxOffset, st.offset))
+    const offset = clock.ease(st, 'shown', st.offset, 22)
+    if (horizontal) translate(inner, -offset, 0)
+    else translate(inner, 0, -offset)
+    ctx.scroll(node)
+    const previous = ctx.pushClip(node.props.clipRect ?? node.rect)
+    const previousFade = ctx.fade
+    const edge = node.props.edge
+    if (edge && !horizontal) {
+      const size = edge.size ?? 32
+      const top = edge.top !== false && offset > 0.5
+      const bottom = edge.bottom !== false && offset < maxOffset - 0.5
+      ctx.fade = {
+        topStart: node.rect.y,
+        topEnd: top ? node.rect.y + size : node.rect.y,
+        bottomStart: bottom ? node.rect.y + node.rect.h - size : node.rect.y + node.rect.h,
+        bottomEnd: node.rect.y + node.rect.h,
+      }
+    }
+    ctx.paintChildren(node, ctx)
+    ctx.fade = previousFade
+    ctx.popClip(previous)
+    if (!horizontal && maxOffset > 0) {
+      const trackH = node.rect.h - 8
+      const thumbH = Math.max(24, (node.rect.h / inner.rect.h) * trackH)
+      const thumbY = node.rect.y + 4 + (offset / maxOffset) * (trackH - thumbH)
+      const alpha = clock.ease(st, 'barAlpha', Math.abs(offset - (st.lastOffset ?? offset)) > 0.01 || frame.hot === node.id ? 1 : 0, 4)
+      st.lastOffset = offset
+      ctx.emit({ type: 'rect', rect: { x: node.rect.x + node.rect.w - 8, y: thumbY, w: 4, h: thumbH }, radius: 2, color: [ctx.theme.fg3[0], ctx.theme.fg3[1], ctx.theme.fg3[2], ctx.theme.fg3[3] * alpha] })
+    }
+  }
+
+  function translate(node, dx, dy) {
+    node.rect = { ...node.rect, x: node.rect.x + dx, y: node.rect.y + dy }
+    for (const child of node.children) translate(child, dx, dy)
+  }
+
+  function popup(props, fn) {
+    const node = createNode('popup', { direction: 'column', align: 'stretch', ...props, detached: true })
+    driver.openPopup(node)
+    if (fn) fn(node)
+    driver.close()
+    return node
+  }
+
+  return { box, row, column, stack, transform, spacer, separator, text, label, heading, rect, image, icon, polyline, curve, scroll, popup, font, resolveColor }
+}