lgimgui 0.1.0

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "lgimgui",
+  "version": "0.1.0",
+  "description": "liquid glass immediate mode gui for the browser",
+  "type": "module",
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./src/*": "./src/*",
+    "./materials.json": "./demo/public/materials.json"
+  },
+  "files": [
+    "src",
+    "demo/public/materials.json"
+  ],
+  "scripts": {
+    "dev": "vite demo --host",
+    "build": "vite build demo",
+    "preview": "vite preview demo",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "devDependencies": {
+    "vite": "^6.0.0",
+    "vitest": "^3.0.0"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nvms/lgimgui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/nvms/lgimgui/issues"
+  },
+  "homepage": "https://github.com/nvms/lgimgui#readme"
+}

package/src/core/curve.js

@@ -0,0 +1,71 @@
+function cubicAt(p0, p1, p2, p3, t) {
+  const u = 1 - t
+  const a = u * u * u
+  const b = 3 * u * u * t
+  const c = 3 * u * t * t
+  const d = t * t * t
+  return { x: a * p0.x + b * p1.x + c * p2.x + d * p3.x, y: a * p0.y + b * p1.y + c * p2.y + d * p3.y }
+}
+
+export function cubicPoints({ from, c1, c2, to }, options = {}) {
+  const chord = Math.hypot(to.x - from.x, to.y - from.y) + Math.hypot(c1.x - from.x, c1.y - from.y) + Math.hypot(c2.x - to.x, c2.y - to.y)
+  const segments = options.segments ?? Math.max(8, Math.min(96, Math.ceil(chord / (options.step ?? 10))))
+  const points = []
+  for (let i = 0; i <= segments; i++) points.push(cubicAt(from, c1, c2, to, i / segments))
+  return points
+}
+
+export function horizontalCubic(from, to, options = {}) {
+  const distance = Math.abs(to.x - from.x)
+  const reach = Math.max(options.minReach ?? 40, distance * (options.tension ?? 0.5))
+  return { from, c1: { x: from.x + reach, y: from.y }, c2: { x: to.x - reach, y: to.y }, to }
+}
+
+function segmentQuad(a, b, width) {
+  const dx = b.x - a.x
+  const dy = b.y - a.y
+  const length = Math.hypot(dx, dy)
+  const cx = (a.x + b.x) / 2
+  const cy = (a.y + b.y) / 2
+  return {
+    rect: { x: cx - (length + width) / 2, y: cy - width / 2, w: length + width, h: width },
+    rotation: Math.atan2(dy, dx),
+    radius: width / 2,
+  }
+}
+
+function walkDashes(points, dash, gap) {
+  const quads = []
+  const period = dash + gap
+  let travelled = 0
+  for (let i = 1; i < points.length; i++) {
+    const a = points[i - 1]
+    const b = points[i]
+    const length = Math.hypot(b.x - a.x, b.y - a.y)
+    if (length === 0) continue
+    let local = 0
+    while (local < length) {
+      const phase = (travelled + local) % period
+      const onDash = phase < dash
+      const remaining = onDash ? dash - phase : period - phase
+      const end = Math.min(length, local + remaining)
+      if (onDash) {
+        const t0 = local / length
+        const t1 = end / length
+        quads.push({ a: { x: a.x + (b.x - a.x) * t0, y: a.y + (b.y - a.y) * t0 }, b: { x: a.x + (b.x - a.x) * t1, y: a.y + (b.y - a.y) * t1 } })
+      }
+      local = end
+    }
+    travelled += length
+  }
+  return quads
+}
+
+export function strokeQuads(points, options = {}) {
+  const width = options.width ?? 2
+  if (points.length < 2) return []
+  if (options.dash > 0) return walkDashes(points, options.dash, options.gap ?? options.dash).map(({ a, b }) => segmentQuad(a, b, width))
+  const quads = []
+  for (let i = 1; i < points.length; i++) quads.push(segmentQuad(points[i - 1], points[i], width))
+  return quads
+}

package/src/core/frame.js

@@ -0,0 +1,272 @@
+import { layout, measure, position, scaleNode, translateNode } from './layout.js'
+import { CONTENT_THEME } from './theme.js'
+import { rectIntersect } from './geometry.js'
+
+export { scaleNode, translateNode }
+
+function rectsOverlap(a, b) {
+  return a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h
+}
+
+export function createNode(kind, props, extra) {
+  return {
+    kind,
+    id: props.id ?? null,
+    props,
+    children: [],
+    parent: null,
+    natural: { w: 0, h: 0 },
+    content: { w: 0, h: 0 },
+    rect: { x: 0, y: 0, w: 0, h: 0 },
+    intrinsic: null,
+    paint: null,
+    layer: 0,
+    ...extra,
+  }
+}
+
+export function createFrameDriver({ renderer, input, state, ids, clock, probe }) {
+  let root = null
+  let stack = []
+  let popups = []
+  let viewport = { w: 0, h: 0 }
+  let frame = null
+  let focusOrder = []
+  let ghosts = new Map()
+  let lastStrata = []
+
+  function begin(width, height, seconds) {
+    viewport = { w: width, h: height }
+    ids.reset()
+    clock.tick(seconds)
+    frame = input.beginFrame()
+    root = createNode('box', { direction: 'stack', align: 'stretch', pad: 0 })
+    stack = [root]
+    popups = []
+    focusOrder = []
+    return frame
+  }
+
+  function current() {
+    return stack[stack.length - 1]
+  }
+
+  function add(node) {
+    const parent = current()
+    node.parent = parent
+    node.layer = node.props.detached ? node.layer : parent.layer
+    parent.children.push(node)
+    return node
+  }
+
+  function open(node) {
+    add(node)
+    stack.push(node)
+    if (node.id) ids.push(node.props.key ?? node.props.label ?? node.kind)
+    return node
+  }
+
+  function close() {
+    const node = stack.pop()
+    if (node.id) ids.pop()
+    return node
+  }
+
+  function openPopup(node) {
+    node.props.detached = true
+    node.layer = current().layer + 1
+    node.parent = current()
+    popups.push(node)
+    stack.push(node)
+    if (node.id) ids.push(node.props.key ?? node.kind)
+    return node
+  }
+
+  function registerFocusable(id) {
+    focusOrder.push(id)
+  }
+
+  function placePopup(node) {
+    measure(node, {})
+    const anchor = node.props.anchorNode?.rect ?? node.props.anchor ?? { x: 0, y: 0, w: 0, h: 0 }
+    const gap = node.props.gap ?? 6
+    let w = typeof node.props.w === 'number' ? node.props.w : Math.max(node.natural.w, node.props.minW ?? 0)
+    if (node.props.matchAnchor) w = Math.max(w, anchor.w)
+    const h = typeof node.props.h === 'number' ? node.props.h : node.natural.h
+    const placement = node.props.placement ?? 'below'
+    let x = anchor.x
+    let y = anchor.y + anchor.h + gap
+    if (placement === 'above') y = anchor.y - h - gap
+    if (placement === 'right') {
+      x = anchor.x + anchor.w + gap
+      y = anchor.y
+    }
+    if (placement === 'center') {
+      x = anchor.x + (anchor.w - w) / 2
+      y = anchor.y + (anchor.h - h) / 2
+    }
+    if (node.props.alignEnd) x = anchor.x + anchor.w - w
+    if (x + w > viewport.w - 8) x = viewport.w - 8 - w
+    if (y + h > viewport.h - 8) y = placement === 'below' ? anchor.y - h - gap : viewport.h - 8 - h
+    x = Math.max(8, x)
+    y = Math.max(8, y)
+    position(node, { x, y, w, h })
+  }
+
+  function createPaintContext() {
+    const strata = []
+    const hitList = []
+    const scrolls = []
+    const ctx = {
+      strata,
+      hitList,
+      scrolls,
+      stratum: 0,
+      clip: null,
+      glass: null,
+      theme: CONTENT_THEME,
+      order: 0,
+      frame,
+      probeFor: (index) => probe.current(index),
+      glassOps: [],
+      stratumFor(bounds, base) {
+        let stratum = base
+        for (const other of ctx.glassOps) {
+          if (other.stratum >= stratum && rectsOverlap(other.bounds, bounds)) stratum = other.stratum + 1
+        }
+        return stratum
+      },
+      ensure(index) {
+        while (strata.length <= index) strata.push({ ops: [], glass: [] })
+        return strata[index]
+      },
+      fade: null,
+      opacity: 1,
+      emit(op) {
+        op.clip = ctx.clip
+        op.fade = ctx.fade
+        if (ctx.opacity < 1 && op.color) op.color = [op.color[0], op.color[1], op.color[2], op.color[3] * ctx.opacity]
+        ctx.ensure(ctx.stratum).ops.push(op)
+        return op
+      },
+      emitGlass(op) {
+        op.clip = ctx.clip
+        op.stratum = ctx.stratum
+        ctx.ensure(ctx.stratum).glass.push(op)
+        ctx.glassOps.push(op)
+        return op
+      },
+      hit(node, rect) {
+        hitList.push({ id: node.id, rect: rect ?? node.rect, clip: ctx.clip, layer: node.layer, order: ctx.order++ })
+      },
+      scroll(node) {
+        scrolls.push({ id: node.id, rect: node.rect, clip: ctx.clip, horizontal: Boolean(node.props.horizontal) })
+      },
+      pushClip(rect) {
+        const previous = ctx.clip
+        ctx.clip = previous ? rectIntersect(previous, rect) : { ...rect }
+        return previous
+      },
+      popClip(previous) {
+        ctx.clip = previous
+      },
+    }
+    return ctx
+  }
+
+  function paintNode(node, ctx) {
+    const opacity = node.props.opacity
+    const previous = ctx.opacity
+    if (opacity != null) ctx.opacity = previous * Math.max(0, Math.min(1, opacity))
+    if (opacity != null && ctx.opacity <= 0.001) {
+      ctx.opacity = previous
+      return
+    }
+    if (node.paint) node.paint(node, ctx)
+    else paintChildren(node, ctx)
+    ctx.opacity = previous
+  }
+
+  function paintChildren(node, ctx) {
+    for (const child of node.children) {
+      if (child.props.detached) continue
+      paintNode(child, ctx)
+    }
+  }
+
+  function end(options) {
+    layout(root, { x: 0, y: 0, w: viewport.w, h: viewport.h }, {})
+    for (const popup of popups) placePopup(popup)
+
+    const ctx = createPaintContext()
+    ctx.paintChildren = paintChildren
+    ctx.paintNode = paintNode
+    paintNode(root, ctx)
+
+    const byLayer = [...popups].sort((a, b) => a.layer - b.layer)
+    for (const popup of byLayer) {
+      ctx.stratum = 0
+      ctx.clip = null
+      ctx.glass = null
+      ctx.theme = CONTENT_THEME
+      paintNode(popup, ctx)
+    }
+
+    for (const [id, ghost] of ghosts) {
+      if (ghost.seen) {
+        ghost.seen = false
+        continue
+      }
+      ctx.stratum = 0
+      ctx.clip = null
+      ctx.glass = null
+      ctx.theme = CONTENT_THEME
+      if (ghost.paint(ctx)) ghosts.delete(id)
+    }
+
+    if (ctx.strata.length === 0) ctx.ensure(0)
+    lastStrata = ctx.strata.map((stratum) => ({ ops: stratum.ops.length, glass: stratum.glass.map((g) => g.id) }))
+    renderer.render({ strata: ctx.strata, clearColor: options?.clearColor })
+    input.endFrame(ctx.hitList, ctx.scrolls)
+    state.nextFrame()
+    state.collect()
+    return { animating: clock.animating }
+  }
+
+  function ghost(id, paint) {
+    ghosts.set(id, { paint, seen: true })
+  }
+
+  function markGhostSeen(id) {
+    const entry = ghosts.get(id)
+    if (entry) entry.seen = true
+  }
+
+  return {
+    begin,
+    end,
+    open,
+    close,
+    add,
+    openPopup,
+    current,
+    registerFocusable,
+    ghost,
+    markGhostSeen,
+    get focusOrder() {
+      return focusOrder
+    },
+    get frame() {
+      return frame
+    },
+    get viewport() {
+      return viewport
+    },
+    get root() {
+      return root
+    },
+    get lastStrata() {
+      return lastStrata
+    },
+  }
+}

package/src/core/geometry.js

@@ -0,0 +1,61 @@
+export function rect(x, y, w, h) {
+  return { x, y, w, h }
+}
+
+export function rectContains(r, px, py) {
+  return px >= r.x && py >= r.y && px < r.x + r.w && py < r.y + r.h
+}
+
+export function rectIntersect(a, b) {
+  const x = Math.max(a.x, b.x)
+  const y = Math.max(a.y, b.y)
+  const r = Math.min(a.x + a.w, b.x + b.w)
+  const btm = Math.min(a.y + a.h, b.y + b.h)
+  return { x, y, w: Math.max(0, r - x), h: Math.max(0, btm - y) }
+}
+
+export function rectUnion(a, b) {
+  if (!a) return { ...b }
+  if (!b) return { ...a }
+  const x = Math.min(a.x, b.x)
+  const y = Math.min(a.y, b.y)
+  const r = Math.max(a.x + a.w, b.x + b.w)
+  const btm = Math.max(a.y + a.h, b.y + b.h)
+  return { x, y, w: r - x, h: btm - y }
+}
+
+export function rectInset(r, amount) {
+  return { x: r.x + amount, y: r.y + amount, w: r.w - amount * 2, h: r.h - amount * 2 }
+}
+
+export function rectCenter(r) {
+  return { x: r.x + r.w / 2, y: r.y + r.h / 2 }
+}
+
+export function rectLerp(a, b, t) {
+  return {
+    x: a.x + (b.x - a.x) * t,
+    y: a.y + (b.y - a.y) * t,
+    w: a.w + (b.w - a.w) * t,
+    h: a.h + (b.h - a.h) * t,
+  }
+}
+
+export function rectEquals(a, b) {
+  return a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h
+}
+
+export function clamp(v, lo, hi) {
+  return v < lo ? lo : v > hi ? hi : v
+}
+
+export function lerp(a, b, t) {
+  return a + (b - a) * t
+}
+
+export function padding(value) {
+  if (value == null) return [0, 0, 0, 0]
+  if (typeof value === 'number') return [value, value, value, value]
+  if (value.length === 2) return [value[0], value[1], value[0], value[1]]
+  return value
+}

package/src/core/ids.js

@@ -0,0 +1,31 @@
+export function createIdScope() {
+  const stack = ['']
+  const counters = new Map()
+
+  function push(key) {
+    stack.push(stack[stack.length - 1] + '/' + key)
+  }
+
+  function pop() {
+    if (stack.length === 1) throw new Error('id scope underflow')
+    stack.pop()
+  }
+
+  function current() {
+    return stack[stack.length - 1]
+  }
+
+  function make(key) {
+    const id = current() + '/' + key
+    const count = counters.get(id) ?? 0
+    counters.set(id, count + 1)
+    return count === 0 ? id : id + '#' + count
+  }
+
+  function reset() {
+    stack.length = 1
+    counters.clear()
+  }
+
+  return { push, pop, current, make, reset }
+}