lgimgui 0.1.0

package/src/widgets/controls.js

@@ -0,0 +1,545 @@
+import { createNode } from '../core/frame.js'
+import { springs, springForDuration } from '../core/spring.js'
+import { clamp } from '../core/geometry.js'
+import { ACCENT, withAlpha } from '../core/theme.js'
+
+const BUTTON_HEIGHT = 34
+const COMPACT_HEIGHT = 28
+
+export function createControls(core, primitives, glassWidget) {
+  const { driver, ids, state, clock, interaction, insideGlass, settings } = core
+  const { box, row, text, icon } = primitives
+
+  function pressPoint() {
+    const f = driver.frame
+    return { x: f.dragOrigin.x, y: f.dragOrigin.y }
+  }
+
+  function focusRing(ctx, rect, radius, it) {
+    if (!it.focused || !it.keyboard) return
+    ctx.emit({ type: 'stroke', rect: { x: rect.x - 2, y: rect.y - 2, w: rect.w + 4, h: rect.h + 4 }, radius: radius + 2, color: ctx.theme.focusRing, width: 2 })
+  }
+
+  function buttonContent(labelText, props) {
+    if (props.content) return props.content
+    return () => {
+      if (props.icon) icon(props.icon, { size: props.iconSize ?? 16, color: props.primary ? 'onAccent' : props.color })
+      if (labelText) text(labelText, { weight: 600, size: props.size ?? 13, color: props.primary ? 'onAccent' : props.color, vibrancy: props.primary ? 0 : undefined })
+    }
+  }
+
+  function overlayButtonPaint(it, props) {
+    return (node, ctx) => {
+      const st = state.get(node.id)
+      const r = node.rect
+      const radius = props.radius ?? r.h / 2
+      ctx.hit(node)
+      const hover = clock.animate(st, 'hover', it.hot && !it.active ? 1 : 0, springs.gentle)
+      const pressed = it.active && it.hot
+      const press = clock.animate(st, 'press', pressed ? 1 : 0, pressed ? springs.snappy : springs.fade)
+      const scale = 1 - press * 0.04
+      const drawn = { x: r.x + (r.w - r.w * scale) / 2, y: r.y + (r.h - r.h * scale) / 2, w: r.w * scale, h: r.h * scale }
+      const theme = ctx.theme
+      if (props.primary) {
+        const fill = props.tint ?? theme.accent
+        if (settings.increaseContrast || (ctx.theme.recede ?? 0) > 0.5) {
+          ctx.emit({ type: 'rect', rect: drawn, radius, color: [fill[0], fill[1], fill[2], fill[3] * (1 - press * 0.12)] })
+        } else {
+          ctx.emit({ type: 'tintedFill', rect: drawn, radius, color: [fill[0], fill[1], fill[2], 0.85 * (1 - press * 0.1)], tone: 0.5 })
+        }
+      } else if (props.selected) {
+        ctx.emit({ type: 'rect', rect: drawn, radius, color: theme.selected })
+      } else if (props.bordered) {
+        ctx.emit({ type: 'rect', rect: drawn, radius, color: withAlpha(theme.hover, 0.8) })
+      }
+      if (hover > 0.001) ctx.emit({ type: 'rect', rect: drawn, radius, color: withAlpha(theme.hover, hover) })
+      if (press > 0.001) ctx.emit({ type: 'rect', rect: drawn, radius, color: withAlpha(theme.press, press) })
+      if (settings.increaseContrast && props.bordered) ctx.emit({ type: 'stroke', rect: drawn, radius, color: theme.fg, width: 1 })
+      focusRing(ctx, drawn, radius, it)
+      ctx.paintChildren(node, ctx)
+    }
+  }
+
+  function button(labelText, props = {}) {
+    const id = props.id ?? ids.make(props.key ?? labelText ?? props.icon ?? 'button')
+    const it = interaction(id, props)
+    const height = props.compact ? COMPACT_HEIGHT : props.h ?? BUTTON_HEIGHT
+    const pad = props.pad ?? [0, labelText ? 16 : (height - 16) / 2]
+    const content = buttonContent(labelText, props)
+    const layoutProps = { direction: 'row', gap: 6, align: 'center', justify: 'center', h: height, pad, w: props.w, fr: props.fr, minW: props.minW ?? height }
+    const inside = insideGlass()
+    const ownGlass = props.glass ?? (!inside || (core.toolbarDepth > 0 && core.capsuleDepth === 0) || (props.primary && core.capsuleDepth === 0))
+    if (!ownGlass) {
+      const node = box({ ...layoutProps, id, key: props.key ?? labelText }, content)
+      node.paint = overlayButtonPaint(it, props)
+    } else {
+      glassWidget.glass(
+        {
+          ...layoutProps,
+          id,
+          key: props.key ?? labelText,
+          role: props.role ?? (props.primary ? 'accent' : inside ? 'toolbar' : 'control'),
+          shape: props.shape,
+          radius: props.radius,
+          inset: inside,
+          hit: true,
+          pressed: it.active && it.hot,
+          pressPoint: it.pressed ? pressPoint() : undefined,
+          tint: props.primary ? (props.tint ?? 'accent') : undefined,
+          appear: props.appear,
+          focused: props.focused,
+        },
+        () => {
+          content()
+        },
+      )
+    }
+    return it.clicked
+  }
+
+  function capsule(props = {}, fn) {
+    core.capsuleDepth += 1
+    const inside = insideGlass()
+    const node = glassWidget.glass(
+      { role: props.role ?? (inside ? 'toolbar' : 'control'), shape: 'pill', inset: inside, direction: 'row', gap: 2, pad: 2, align: 'center', appear: props.appear, ...props },
+      fn,
+    )
+    core.capsuleDepth -= 1
+    return node
+  }
+
+  function reachDistance(x, y, rect, reachX, reachY) {
+    const dx = Math.max(rect.x - x, 0, x - (rect.x + rect.w)) / Math.max(1, reachX)
+    const dy = Math.max(rect.y - y, 0, y - (rect.y + rect.h)) / Math.max(1, reachY)
+    return Math.hypot(dx, dy)
+  }
+
+  function group(props = {}, fn) {
+    const id = ids.make(props.key ?? 'group')
+    const st = state.get(id)
+    const frame = driver.frame
+    const reachX = props.reachX ?? props.reach ?? 140
+    const reachY = props.reachY ?? props.reach ?? 140
+    const hysteresis = props.hysteresis ?? 24
+    if (st.rect && frame.x >= 0 && frame.windowFocused) {
+      const distance = reachDistance(frame.x, frame.y, st.rect, reachX, reachY)
+      const leave = reachDistance(frame.x, frame.y, st.rect, reachX + hysteresis, reachY + hysteresis)
+      if (!st.open && distance < 1) st.open = true
+      else if (st.open && leave > 1) st.open = false
+    } else st.open = false
+    if (props.near != null) st.open = Boolean(props.near)
+    const spring = props.spring ?? (props.duration ? springForDuration(props.duration) : springs.liquid)
+    const near = clamp(clock.animate(st, 'near', st.open ? 1 : 0, spring), 0, 1)
+    const phase = (from, to) => {
+      const t = clamp((near - from) / (to - from), 0, 1)
+      return t * t * (3 - 2 * t)
+    }
+    const farGap = props.farGap ?? 0
+    const mergeRate = props.mergeRate ?? 12
+    const nearGap = props.nearGap ?? mergeRate * 2 + 4
+    const gap = farGap + (nearGap - farGap) * phase(0.3, 1)
+    const grow = phase(0.1, 0.7)
+    const bridge = 1 - phase(0.15, 0.45)
+    const inside = insideGlass()
+    core.capsuleDepth += 1
+    const node = glassWidget.glass(
+      {
+        id,
+        key: props.key ?? 'group',
+        role: props.role ?? (inside ? 'toolbar' : 'control'),
+        shape: 'pill',
+        merge: true,
+        mergeRate,
+        bridge,
+        inset: inside,
+        direction: 'row',
+        gap,
+        pad: 0,
+        align: 'center',
+        appear: props.appear,
+        clipContent: false,
+      },
+      () => fn(near),
+    )
+    core.capsuleDepth -= 1
+    const reveal = props.reveal ?? Infinity
+    node.children.forEach((child, index) => {
+      if (index >= reveal) {
+        child.props.reveal = grow
+        child.props.opacity = phase(0.35, 0.75)
+      }
+    })
+    const paint = node.paint
+    node.paint = (n, ctx) => {
+      st.rect = n.rect
+      paint(n, ctx)
+    }
+    return near
+  }
+
+  function toolbar(props = {}, fn) {
+    core.toolbarDepth += 1
+    const node = row({ h: 44, pad: [0, 14], gap: 10, w: 'fill', ...props }, fn)
+    core.toolbarDepth -= 1
+    return node
+  }
+
+  const LIGHTS = [
+    { key: 'close', color: [1, 0.37, 0.34, 1], icon: 'close' },
+    { key: 'minimize', color: [1, 0.74, 0.18, 1], icon: 'minus' },
+    { key: 'zoom', color: [0.16, 0.78, 0.25, 1], icon: 'plus' },
+  ]
+
+  function trafficLights(props = {}) {
+    const result = { close: false, minimize: false, zoom: false }
+    const items = LIGHTS.map((light) => ({ light, id: ids.make(light.key) }))
+    const interactions = items.map(({ id }) => interaction(id, { focusable: false }))
+    const anyHot = interactions.some((it) => it.hot || it.active)
+    row({ gap: 8, h: 12, pad: props.pad }, () => {
+      items.forEach(({ light, id }, index) => {
+        const it = interactions[index]
+        if (it.clicked) result[light.key] = true
+        const node = createNode('light', { id, key: light.key, w: 12, h: 12 })
+        node.paint = (n, ctx) => {
+          ctx.hit(n, { x: n.rect.x - 4, y: n.rect.y - 4, w: n.rect.w + 8, h: n.rect.h + 8 })
+          const focused = props.focused !== false
+          const color = focused ? light.color : [0.82, 0.82, 0.84, 1]
+          const press = it.active && it.hot ? 0.8 : 1
+          ctx.emit({ type: 'rect', rect: n.rect, radius: 6, color: [color[0] * press, color[1] * press, color[2] * press, 1] })
+          ctx.emit({ type: 'stroke', rect: n.rect, radius: 6, color: [0, 0, 0, 0.12], width: 0.5 })
+          if (anyHot && focused) {
+            const glyph = { x: n.rect.x + 2, y: n.rect.y + 2, w: 8, h: 8 }
+            const dark = [0.3, 0.12, 0.08, 0.9]
+            if (light.icon === 'close') {
+              ctx.emit({ type: 'rect', rect: { x: glyph.x + 1, y: glyph.y + 3.4, w: 6, h: 1.2 }, radius: 0.6, color: dark, rotation: Math.PI / 4 })
+              ctx.emit({ type: 'rect', rect: { x: glyph.x + 1, y: glyph.y + 3.4, w: 6, h: 1.2 }, radius: 0.6, color: dark, rotation: -Math.PI / 4 })
+            } else if (light.icon === 'minus') {
+              ctx.emit({ type: 'rect', rect: { x: glyph.x + 1, y: glyph.y + 3.4, w: 6, h: 1.2 }, radius: 0.6, color: dark })
+            } else {
+              ctx.emit({ type: 'rect', rect: { x: glyph.x + 1, y: glyph.y + 3.4, w: 6, h: 1.2 }, radius: 0.6, color: dark })
+              ctx.emit({ type: 'rect', rect: { x: glyph.x + 1, y: glyph.y + 3.4, w: 6, h: 1.2 }, radius: 0.6, color: dark, rotation: Math.PI / 2 })
+            }
+          }
+        }
+        driver.add(node)
+      })
+    })
+    return result
+  }
+
+  function iconButton(name, props = {}) {
+    return button(null, { icon: name, key: props.key ?? name, ...props })
+  }
+
+  function toggle(value, props = {}) {
+    const id = ids.make(props.key ?? props.label ?? 'toggle')
+    const it = interaction(id, props)
+    const frame = driver.frame
+    const w = props.w ?? 58
+    const h = props.h ?? 28
+    const st = state.get(id)
+    const knobH = h - 4
+    const knobBase = Math.round(w * 0.52)
+    let next = value
+    if (it.pressed) st.dragged = false
+    if (it.active && Math.abs(frame.x - frame.dragOrigin.x) > 4) st.dragged = true
+    if (it.active && st.rect) {
+      const k = st.scale ?? 1
+      const travel = st.rect.w - 4 * k - knobBase * k
+      st.dragT = clamp((frame.x - st.rect.x - 2 * k - (knobBase * k) / 2) / Math.max(1, travel), 0, 1)
+    }
+    if (it.released) {
+      if (st.dragged && st.dragT != null) {
+        next = st.dragT > 0.5
+        if (st.on) {
+          st.on.value = st.dragT
+          st.on.velocity = 0
+        }
+        if (st.dragShown != null) st.dragShown = st.dragT
+      } else if (it.clicked) next = !value
+      st.dragT = null
+    } else if (it.clicked) next = !value
+    const node = createNode('toggle', { ...props, id, w, h })
+    const lifted = clock.animate(st, 'lift', it.active ? 1 : 0, springs.lift)
+    const liftedW = clock.animate(st, 'liftW', it.active ? 1 : 0, springs.bouncy)
+    const stretch = clock.animate(st, 'stretch', it.active ? clamp(Math.abs(frame.dx) * 0.7, 0, 5) : 0, springs.gentle)
+    let thumbNode = null
+    driver.open(node)
+    if (lifted > 0.001) {
+      thumbNode = glassWidget.glass({
+        key: 'thumb',
+        role: 'thumb',
+        shape: 'pill',
+        lift: true,
+        surface: 'small',
+        dimming: 0,
+        morph: false,
+        x: 0,
+        y: 0,
+        w: knobBase + (w * 1.06 - knobBase) * liftedW + stretch,
+        h: knobH + (h * 1.55 - knobH) * lifted,
+        clipContent: false,
+        appear: true,
+      })
+    }
+    driver.close()
+    node.paint = (n, ctx) => {
+      const r = n.rect
+      const k = n.drawScale ?? 1
+      const knobBase = Math.round(w * 0.52) * k
+      const knobH = (h - 4) * k
+      st.rect = r
+      st.scale = k
+      ctx.hit(n)
+      const on = clock.animate(st, 'on', next ? 1 : 0, springs.snappy)
+      const position = it.active && st.dragged && st.dragT != null ? clock.ease(st, 'dragShown', st.dragT, 30) : clock.ease(st, 'dragShown', on, 30)
+      const theme = ctx.theme
+      const accent = props.tint ?? theme.switchOn
+      const blend = Math.max(on, it.active && st.dragged ? position : on)
+      const track = [
+        theme.track[0] + (accent[0] - theme.track[0]) * blend,
+        theme.track[1] + (accent[1] - theme.track[1]) * blend,
+        theme.track[2] + (accent[2] - theme.track[2]) * blend,
+        theme.track[3] + (accent[3] - theme.track[3]) * blend,
+      ]
+      ctx.emit({ type: 'rect', rect: r, radius: r.h / 2, color: track })
+      const knobW = knobBase + lifted * 6 * k
+      const x = r.x + 2 * k + (r.w - 4 * k - knobW) * position
+      const knobAlpha = 1 - lifted
+      if (knobAlpha > 0.001) ctx.emit({ type: 'rect', rect: { x, y: r.y + 2 * k, w: knobW, h: knobH }, radius: knobH / 2, color: withAlpha(theme.knob, knobAlpha) })
+      if (settings.increaseContrast) ctx.emit({ type: 'stroke', rect: r, radius: r.h / 2, color: theme.fg, width: 1 })
+      focusRing(ctx, r, r.h / 2, it)
+      if (thumbNode) {
+        const tw = thumbNode.props.w * k
+        const th = thumbNode.props.h * k
+        thumbNode.rect = { x: x + knobW / 2 - tw / 2, y: r.y + r.h / 2 - th / 2, w: tw, h: th }
+        ctx.paintChildren(n, ctx)
+      }
+    }
+    if (it.focused && it.keyboard && (driver.frame.keysPressed.has('Left') || driver.frame.keysPressed.has('Right'))) {
+      next = driver.frame.keysPressed.has('Right')
+    }
+    return next
+  }
+
+  function slider(value, props = {}) {
+    const id = ids.make(props.key ?? props.label ?? 'slider')
+    const it = interaction(id, props)
+    const min = props.min ?? 0
+    const max = props.max ?? 1
+    const step = props.step ?? 0
+    const frame = driver.frame
+    const st = state.get(id)
+    let next = value
+    const quantize = (v) => {
+      let q = clamp(v, min, max)
+      if (step > 0) q = Math.round((q - min) / step) * step + min
+      return clamp(q, min, max)
+    }
+    if (it.active && st.trackRect) {
+      const t = clamp((frame.x - st.trackRect.x) / Math.max(1, st.trackRect.w), 0, 1)
+      next = quantize(min + (max - min) * t)
+    }
+    if (it.focused && it.keyboard) {
+      const inc = step > 0 ? step : (max - min) / 100
+      if (frame.keysPressed.has('Left')) next = quantize(next - inc)
+      if (frame.keysPressed.has('Right')) next = quantize(next + inc)
+      if (frame.keysPressed.has('Home')) next = min
+      if (frame.keysPressed.has('End')) next = max
+    }
+    const height = 28
+    const node = createNode('slider', { ...props, id, h: height, w: props.w ?? 'fill', minW: props.minW ?? 80 })
+    const rest = 20
+    const lifted = clock.animate(st, 'lift', it.active ? 1 : 0, springs.lift)
+    const liftedW = clock.animate(st, 'liftW', it.active ? 1 : 0, springs.bouncy)
+    const stretch = clock.animate(st, 'stretch', it.active ? clamp(Math.abs(frame.dx) * 0.7, 0, 6) : 0, springs.gentle)
+    let thumbNode = null
+    driver.open(node)
+    if (lifted > 0.001) {
+      thumbNode = glassWidget.glass({
+        key: 'thumb',
+        role: 'thumb',
+        shape: 'pill',
+        lift: true,
+        surface: 'small',
+        dimming: 0,
+        morph: false,
+        x: 0,
+        y: 0,
+        w: rest + (36 - rest) * liftedW + stretch,
+        h: rest + (30 - rest) * lifted,
+        clipContent: false,
+        appear: true,
+      })
+    }
+    driver.close()
+    node.paint = (n, ctx) => {
+      const r = n.rect
+      const k = n.drawScale ?? 1
+      const rest = 20 * k
+      const trackH = 4 * k
+      const trackRect = { x: r.x + rest / 2, y: r.y + (r.h - trackH) / 2, w: r.w - rest, h: trackH }
+      st.trackRect = trackRect
+      ctx.hit(n)
+      const theme = ctx.theme
+      const t = (max - min) > 0 ? (next - min) / (max - min) : 0
+      const shown = clock.ease(st, 'shown', t, it.active ? 60 : 18)
+      const cx = trackRect.x + trackRect.w * shown
+      ctx.emit({ type: 'rect', rect: trackRect, radius: trackH / 2, color: theme.track })
+      ctx.emit({ type: 'rect', rect: { x: trackRect.x, y: trackRect.y, w: cx - trackRect.x, h: trackH }, radius: trackH / 2, color: props.tint ?? theme.accent })
+      const size = rest
+      const knob = { x: cx - size / 2, y: r.y + (r.h - size) / 2, w: size, h: size }
+      const knobAlpha = 1 - lifted
+      if (knobAlpha > 0.001) {
+        ctx.emit({ type: 'rect', rect: knob, radius: size / 2, color: withAlpha(theme.knob, knobAlpha) })
+        ctx.emit({ type: 'stroke', rect: knob, radius: size / 2, color: [0, 0, 0, 0.12 * knobAlpha], width: 1 })
+      }
+      focusRing(ctx, knob, size / 2, it)
+      if (thumbNode) {
+        const tw = thumbNode.props.w * k
+        const th = thumbNode.props.h * k
+        thumbNode.rect = { x: cx - tw / 2, y: r.y + (r.h - th) / 2, w: tw, h: th }
+        ctx.paintChildren(n, ctx)
+      }
+    }
+    return next
+  }
+
+  function segmented(options, selected, props = {}) {
+    const id = ids.make(props.key ?? 'segmented')
+    const st = state.get(id)
+    let next = selected
+    const height = props.compact ? COMPACT_HEIGHT : 32
+    const inside = insideGlass()
+    const padX = props.padX ?? 12
+    const labelFont = primitives.font({ weight: 600 })
+    const widest = props.equal
+      ? Math.max(...options.map((option) => {
+          const labelText = typeof option === 'string' ? option : option.label
+          const iconWidth = option.icon ? 15 + (labelText ? 6 : 0) : 0
+          return (labelText ? core.renderer.atlas.measure(labelText, labelFont).w : 0) + iconWidth + padX * 2
+        }))
+      : null
+    const build = (container) => {
+      options.forEach((option, index) => {
+        const labelText = typeof option === 'string' ? option : option.label
+        const itemId = ids.make(labelText ?? String(index))
+        const it = interaction(itemId, props)
+        if (it.clicked) next = index
+        const fill = props.w === 'fill'
+        const item = box({ id: itemId, key: labelText, direction: 'row', gap: 6, align: 'center', justify: 'center', h: height - 4, pad: [0, padX], w: fill ? undefined : widest ?? undefined, fr: fill ? 1 : undefined, minW: fill ? widest ?? height : height }, () => {
+          if (option.icon) icon(option.icon, { size: 15 })
+          if (labelText) text(labelText, { weight: 600 })
+        })
+        item.paint = (n, ctx) => {
+          ctx.hit(n)
+          const hover = clock.animate(state.get(itemId), 'hover', it.hot && index !== next ? 1 : 0, springs.gentle)
+          if (hover > 0.001) ctx.emit({ type: 'rect', rect: n.rect, radius: n.rect.h / 2, color: withAlpha(ctx.theme.hover, hover) })
+          focusRing(ctx, n.rect, n.rect.h / 2, it)
+          ctx.paintChildren(n, ctx)
+        }
+      })
+    }
+    const paintSelection = (container, ctx) => {
+      const items = container.children.filter((child) => child.kind === 'box' && child.id)
+      const target = next >= 0 && next < items.length ? items[next].rect : null
+      if (target) {
+        const origin = container.rect
+        const x = origin.x + clock.animate(st, 'sx', target.x - origin.x, springs.morph)
+        const w = clock.animate(st, 'sw', target.w, springs.morph)
+        const rect = { x, y: target.y, w, h: target.h }
+        const dark = ctx.theme.dark > 0.5
+        const lift = 1 - (ctx.theme.recede ?? 0)
+        if (lift > 0.01) ctx.emit({ type: 'rect', rect: { ...rect, y: rect.y + 1 }, radius: rect.h / 2, color: [0, 0, 0, (dark ? 0.25 : 0.1) * lift] })
+        ctx.emit({ type: 'rect', rect, radius: rect.h / 2, color: dark ? [1, 1, 1, 0.28] : ctx.theme.knob })
+        if (settings.increaseContrast) ctx.emit({ type: 'stroke', rect, radius: rect.h / 2, color: ctx.theme.fg, width: 1 })
+      }
+    }
+    const parentStretches = driver.current().props.align === 'stretch'
+    const layoutProps = { direction: 'row', gap: 2, pad: 2, align: 'center', h: height, w: props.w, alignSelf: props.alignSelf ?? (parentStretches && !props.w ? 'start' : undefined) }
+    let container
+    if (inside) {
+      container = box({ ...layoutProps, id, key: props.key ?? 'segmented' }, build)
+      const previous = container.paint
+      container.paint = (n, ctx) => {
+        ctx.emit({ type: 'rect', rect: n.rect, radius: n.rect.h / 2, color: ctx.theme.track })
+        paintSelection(n, ctx)
+        ctx.paintChildren(n, ctx)
+        if (previous) previous(n, ctx)
+      }
+    } else {
+      container = glassWidget.glass({ ...layoutProps, id, key: props.key ?? 'segmented', role: 'control', shape: 'pill', appear: props.appear }, () => {
+        const marker = createNode('selection', { x: 0, y: 0, w: 0, h: 0 })
+        marker.paint = (n, ctx) => paintSelection(n.parent, ctx)
+        driver.add(marker)
+        build()
+      })
+    }
+    return next
+  }
+
+  function progress(value, props = {}) {
+    const node = createNode('progress', { ...props, h: 4, w: props.w ?? 'fill', minW: 40 })
+    node.paint = (n, ctx) => {
+      const r = n.rect
+      ctx.emit({ type: 'rect', rect: r, radius: 2, color: ctx.theme.track })
+      ctx.emit({ type: 'rect', rect: { ...r, w: r.w * clamp(value, 0, 1) }, radius: 2, color: props.tint ?? ctx.theme.accent })
+    }
+    return driver.add(node)
+  }
+
+  function item(labelText, props = {}) {
+    const id = ids.make(props.key ?? labelText)
+    const it = interaction(id, props)
+    const node = row({ id, key: labelText, gap: 10, h: props.h ?? 30, pad: props.pad ?? [0, 12], w: 'fill', align: 'center' }, () => {
+      if (props.content) {
+        props.content()
+        return
+      }
+      if (props.icon) icon(props.icon, { size: 16, color: props.selected ? 'accent' : 'fg2' })
+      if (props.swatch) primitives.rect({ w: 12, h: 12, radius: 4, fill: props.swatch })
+      text(labelText, { weight: 600, color: props.selected ? 'accent' : undefined, fr: 1, w: 'fill' })
+      if (props.detail) text(props.detail, { color: 'fg2' })
+      if (props.check) icon('check', { size: 14 })
+      if (props.chevron) icon('chevronRight', { size: 12, color: 'fg3' })
+    })
+    node.paint = (n, ctx) => {
+      ctx.hit(n)
+      const st = state.get(id)
+      const hover = clock.animate(st, 'hover', it.hot && !it.active ? 1 : 0, springs.gentle)
+      const press = it.active && it.hot ? 1 : 0
+      const radius = props.radius ?? n.rect.h / 2
+      if (props.selected) ctx.emit({ type: 'rect', rect: n.rect, radius, color: props.tint ? withAlpha(props.tint, 0.9) : ctx.theme.selected })
+      if (hover > 0.001) ctx.emit({ type: 'rect', rect: n.rect, radius, color: withAlpha(ctx.theme.hover, hover) })
+      if (press) ctx.emit({ type: 'rect', rect: n.rect, radius, color: ctx.theme.press })
+      focusRing(ctx, n.rect, radius, it)
+      ctx.paintChildren(n, ctx)
+    }
+    return it.clicked
+  }
+
+  function dragHandle(props = {}) {
+    const id = ids.make(props.key ?? 'drag')
+    const it = interaction(id, { ...props, focusable: false })
+    const frame = driver.frame
+    const node = createNode('drag', { ...props, id, w: props.w ?? 'fill', h: props.h ?? 'fill', minH: props.minH ?? 28 })
+    node.paint = (n, ctx) => {
+      ctx.hit(n, props.hitRect)
+      ctx.paintChildren(n, ctx)
+    }
+    driver.add(node)
+    const dragging = it.active && !it.pressed
+    return { dragging, dx: dragging ? frame.dx : 0, dy: dragging ? frame.dy : 0, pressed: it.pressed, hot: it.hot }
+  }
+
+  function hitArea(props = {}) {
+    const id = ids.make(props.key ?? 'hit')
+    const it = interaction(id, { ...props, focusable: false })
+    const node = createNode('hit', { ...props, id })
+    node.paint = (n, ctx) => ctx.hit(n)
+    driver.add(node)
+    return it
+  }
+
+  return { button, iconButton, toggle, slider, segmented, progress, item, dragHandle, hitArea, capsule, toolbar, trafficLights, group }
+}

package/src/widgets/desktop.js

@@ -0,0 +1,144 @@
+const DEFAULT_MIN = { w: 240, h: 160 }
+
+export function createDesktop(ui, options = {}) {
+  const cascade = { x: 80, y: 60, step: 32, ...(options.cascade ?? {}) }
+  const entries = new Map()
+  const pending = []
+  let topZ = 0
+  let focused = null
+  let placed = 0
+
+  function entry(key, spec) {
+    let item = entries.get(key)
+    if (!item) {
+      const vp = ui.viewport
+      const w = spec.w ?? 480
+      const h = spec.h ?? 360
+      const x = spec.x ?? Math.min(cascade.x + (placed % 8) * cascade.step, Math.max(8, vp.w - w - 8))
+      const y = spec.y ?? Math.min(cascade.y + (placed % 8) * cascade.step, Math.max(8, vp.h - h - 8))
+      placed += 1
+      topZ += 1
+      item = { key, x, y, w, h, z: topZ, open: spec.open !== false, zoomed: null }
+      entries.set(key, item)
+      if (item.open && (spec.focus ?? true)) focused = key
+    }
+    return item
+  }
+
+  function focus(key) {
+    const item = entries.get(key)
+    if (!item) return
+    topZ += 1
+    item.z = topZ
+    focused = key
+    ui.invalidate()
+  }
+
+  function open(key) {
+    const item = entries.get(key)
+    if (!item) return
+    item.open = true
+    focus(key)
+  }
+
+  function close(key) {
+    const item = entries.get(key)
+    if (!item) return
+    item.open = false
+    if (focused === key) focused = null
+    ui.invalidate()
+  }
+
+  function toggle(key) {
+    const item = entries.get(key)
+    if (!item) return
+    if (item.open && focused === key) close(key)
+    else open(key)
+  }
+
+  function isOpen(key) {
+    return entries.get(key)?.open ?? false
+  }
+
+  function window(key, spec, fn) {
+    const item = entry(key, spec)
+    pending.push({ item, spec, fn })
+    return item
+  }
+
+  function apply(item, spec, result) {
+    const min = { ...DEFAULT_MIN, ...(spec.minSize ?? {}) }
+    if (result.moved) {
+      item.x += result.dx
+      item.y += result.dy
+      item.zoomed = null
+    }
+    if (result.resize) {
+      const nextW = Math.max(min.w, item.w + result.resize.dw)
+      const nextH = Math.max(min.h, item.h + result.resize.dh)
+      if (result.resize.dx) item.x += item.w - nextW
+      if (result.resize.dy) item.y += item.h - nextH
+      item.w = nextW
+      item.h = nextH
+      item.zoomed = null
+    }
+    if (result.focusRequested) focus(item.key)
+    if (result.closed) close(item.key)
+    if (result.minimized) close(item.key)
+    if (result.zoomed) {
+      const vp = ui.viewport
+      if (item.zoomed) {
+        Object.assign(item, item.zoomed)
+        item.zoomed = null
+      } else {
+        item.zoomed = { x: item.x, y: item.y, w: item.w, h: item.h }
+        Object.assign(item, { x: 24, y: 24, w: vp.w - 48, h: vp.h - 48 - (options.bottomInset ?? 0) })
+      }
+    }
+  }
+
+  function draw() {
+    const frame = ui.input
+    if (frame.pressedAnywhere && !frame.hotEntry) focused = null
+    if (focused && !entries.get(focused)?.open) focused = null
+    const visible = pending.filter(({ item }) => item.open).sort((a, b) => a.item.z - b.item.z)
+    for (const { item, spec, fn } of visible) {
+      const result = ui.window(
+        {
+          key: item.key,
+          x: item.x,
+          y: item.y,
+          w: item.w,
+          h: item.h,
+          focused: focused === item.key,
+          sidebar: spec.sidebar,
+          sidebarWidth: spec.sidebarWidth,
+          toolbar: spec.toolbar ?? (spec.title ? () => ui.text(spec.title, { weight: 700, size: 15 }) : undefined),
+          resizable: spec.resizable,
+          radius: spec.radius,
+          role: spec.role,
+          accent: spec.accent,
+        },
+        fn,
+      )
+      apply(item, spec, result)
+    }
+    pending.length = 0
+  }
+
+  return {
+    window,
+    draw,
+    focus,
+    open,
+    close,
+    toggle,
+    isOpen,
+    get focused() {
+      return focused
+    },
+    get windows() {
+      return [...entries.values()]
+    },
+  }
+}