lgimgui 0.1.0

package/src/core/theme.js

@@ -0,0 +1,77 @@
+function mixColor(a, b, t) {
+  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t, a[3] + (b[3] - a[3]) * t]
+}
+
+export const ACCENT = [0.17, 0.44, 1, 1]
+
+const LIGHT = {
+  fg: [0.06, 0.06, 0.08, 0.94],
+  fg2: [0.06, 0.06, 0.08, 0.58],
+  fg3: [0.06, 0.06, 0.08, 0.34],
+  hover: [0.06, 0.06, 0.08, 0.07],
+  press: [0.06, 0.06, 0.08, 0.13],
+  selected: [0.06, 0.06, 0.08, 0.1],
+  track: [0.06, 0.06, 0.08, 0.14],
+  separator: [0.06, 0.06, 0.08, 0.1],
+  knob: [1, 1, 1, 1],
+  field: [1, 1, 1, 0.62],
+  onAccent: [1, 1, 1, 1],
+  accent: ACCENT,
+  accentPress: [0.13, 0.36, 0.88, 1],
+  switchOn: [0.2, 0.78, 0.35, 1],
+  focusRing: [0.17, 0.44, 1, 0.7],
+  dim: [0, 0, 0, 0.22],
+}
+
+const DARK = {
+  fg: [1, 1, 1, 0.96],
+  fg2: [1, 1, 1, 0.62],
+  fg3: [1, 1, 1, 0.36],
+  hover: [1, 1, 1, 0.1],
+  press: [1, 1, 1, 0.18],
+  selected: [1, 1, 1, 0.14],
+  track: [1, 1, 1, 0.22],
+  separator: [1, 1, 1, 0.14],
+  knob: [1, 1, 1, 1],
+  field: [1, 1, 1, 0.14],
+  onAccent: [1, 1, 1, 1],
+  accent: [0.35, 0.58, 1, 1],
+  accentPress: [0.28, 0.5, 0.92, 1],
+  switchOn: [0.25, 0.82, 0.4, 1],
+  focusRing: [0.45, 0.65, 1, 0.8],
+  dim: [0, 0, 0, 0.3],
+}
+
+export function resolveTheme(dark, settings) {
+  const theme = {}
+  for (const key of Object.keys(LIGHT)) theme[key] = mixColor(LIGHT[key], DARK[key], dark)
+  theme.dark = dark
+  if (settings?.increaseContrast) {
+    const strong = dark > 0.5
+    theme.fg = strong ? [1, 1, 1, 1] : [0, 0, 0, 1]
+    theme.fg2 = strong ? [1, 1, 1, 0.85] : [0, 0, 0, 0.85]
+    theme.fg3 = strong ? [1, 1, 1, 0.7] : [0, 0, 0, 0.7]
+    theme.track = strong ? [1, 1, 1, 0.4] : [0, 0, 0, 0.35]
+    theme.separator = strong ? [1, 1, 1, 0.5] : [0, 0, 0, 0.5]
+    theme.hover = strong ? [1, 1, 1, 0.2] : [0, 0, 0, 0.12]
+    theme.press = strong ? [1, 1, 1, 0.32] : [0, 0, 0, 0.22]
+    theme.border = strong ? [1, 1, 1, 0.9] : [0, 0, 0, 0.9]
+  }
+  return theme
+}
+
+export function withAlpha(color, alpha) {
+  return [color[0], color[1], color[2], color[3] * alpha]
+}
+
+export function tintFamily(color, backdropLuminance) {
+  const lift = (0.5 - backdropLuminance) * 0.18
+  return [
+    Math.min(1, Math.max(0, color[0] + lift)),
+    Math.min(1, Math.max(0, color[1] + lift)),
+    Math.min(1, Math.max(0, color[2] + lift)),
+    color[3],
+  ]
+}
+
+export const CONTENT_THEME = resolveTheme(0, null)

package/src/index.js

@@ -0,0 +1,221 @@
+import { createRenderer } from './render/renderer.js'
+import { createInput } from './core/input.js'
+import { createStateStore } from './core/state.js'
+import { createIdScope } from './core/ids.js'
+import { createSpringClock, springs, springForDuration } from './core/spring.js'
+import { createFrameDriver } from './core/frame.js'
+import { createGlass } from './widgets/glass.js'
+import { createPrimitives } from './widgets/primitives.js'
+import { createControls } from './widgets/controls.js'
+import { createComposite } from './widgets/composite.js'
+import { createDesktop } from './widgets/desktop.js'
+import { clonePresets, ROLE_PRESETS, ROLES, serializeMaterials, parseMaterials, assignMaterials } from './material/presets.js'
+import { MATERIAL_PARAMS, SHAPE_PARAMS, MATERIAL_GROUPS, defaultMaterial, normalizeMaterial } from './material/params.js'
+import { mixMaterial, unfocusedMaterial, darkMaterial } from './material/material.js'
+import { ACCENT } from './core/theme.js'
+
+export { ROLE_PRESETS, ROLES, serializeMaterials, parseMaterials, unfocusedMaterial, darkMaterial, MATERIAL_PARAMS, SHAPE_PARAMS, MATERIAL_GROUPS, defaultMaterial, normalizeMaterial, mixMaterial, springs, springForDuration, ACCENT }
+
+export function createUI(canvas, options = {}) {
+  const renderer = createRenderer(canvas)
+  const input = createInput(canvas)
+  const state = createStateStore()
+  const ids = createIdScope()
+  const clock = createSpringClock()
+  const driver = createFrameDriver({ renderer, input, state, ids, clock, probe: renderer.probe })
+
+  const settings = { reduceTransparency: false, increaseContrast: false, reduceMotion: false, appearance: 'auto', ...(options.settings ?? {}) }
+  const materials = options.materials ? assignMaterials(clonePresets(), parseMaterials(options.materials)) : clonePresets()
+  const focus = { id: null, keyboard: false }
+  let focusables = []
+  let lastTime = 0
+  let running = false
+  let dirty = true
+  let wakeAt = 0
+  let continuous = false
+  let frameCallback = null
+  let cursor = null
+  let stableCollects = 2
+  let requested = true
+
+  function interaction(id, props = {}) {
+    const f = driver.frame
+    const disabled = !!props.disabled
+    if (props.focusable !== false && !disabled) driver.registerFocusable(id)
+    const focused = focus.id === id
+    let clicked = !disabled && f.clicked.has(id)
+    if (focused && focus.keyboard && !disabled && (f.keysPressed.has('Enter') || f.keysPressed.has('Space'))) clicked = true
+    return {
+      hot: !disabled && f.hot === id,
+      active: !disabled && f.active === id,
+      pressed: !disabled && f.pressed.has(id),
+      released: f.released.has(id),
+      clicked,
+      focused,
+      keyboard: focus.keyboard,
+      disabled,
+    }
+  }
+
+  function insideGlass() {
+    let node = driver.current()
+    while (node) {
+      if (node.kind === 'glass') return true
+      node = node.parent
+    }
+    return false
+  }
+
+  function updateFocus(frame) {
+    if (frame.pressedAnywhere) {
+      focus.keyboard = false
+      const target = frame.hotEntry?.id ?? null
+      focus.id = target && focusables.includes(target) ? target : null
+    }
+    if (frame.keysPressed.has('Tab') && focusables.length > 0) {
+      const index = focusables.indexOf(focus.id)
+      const direction = frame.keysDown.has('Shift') ? -1 : 1
+      const next = index < 0 ? (direction > 0 ? 0 : focusables.length - 1) : (index + direction + focusables.length) % focusables.length
+      focus.id = focusables[next]
+      focus.keyboard = true
+    }
+    if (frame.keysPressed.has('Escape') && focus.keyboard) focus.id = null
+  }
+
+  const core = {
+    renderer,
+    input,
+    state,
+    ids,
+    clock,
+    driver,
+    settings,
+    materials,
+    focus,
+    interaction,
+    insideGlass,
+    toolbarDepth: 0,
+    capsuleDepth: 0,
+    setCursor(name) {
+      cursor = name
+    },
+    invalidateSoon(ms) {
+      const at = performance.now() + ms
+      if (!wakeAt || at < wakeAt) wakeAt = at
+    },
+  }
+
+  const glassWidget = createGlass(core)
+  const primitives = createPrimitives(core)
+  const controls = createControls(core, primitives, glassWidget)
+  const composite = createComposite(core, primitives, controls, glassWidget)
+
+  function currentSize() {
+    const bounds = canvas.getBoundingClientRect()
+    return { w: Math.max(1, bounds.width), h: Math.max(1, bounds.height), dpr: Math.min(options.maxDpr ?? 3, window.devicePixelRatio || 1) }
+  }
+
+  function frame(fn, time = performance.now()) {
+    const size = currentSize()
+    renderer.resize(size.w, size.h, size.dpr)
+    const seconds = lastTime ? (time - lastTime) / 1000 : 1 / 60
+    lastTime = time
+    clock.reduceMotion = settings.reduceMotion
+    const frameInput = driver.begin(size.w, size.h, seconds)
+    updateFocus(frameInput)
+    const probes = renderer.probe.poll()
+    cursor = null
+    fn(ui)
+    const result = driver.end({ clearColor: options.clearColor })
+    canvas.style.cursor = cursor ?? 'default'
+    focusables = driver.focusOrder
+    const active = result.animating || !frameInput.idle || probes.changed || requested
+    requested = false
+    if (active) stableCollects = 0
+    else if (probes.collected > 0) stableCollects += 1
+    dirty = active
+    if (active || stableCollects < 2) core.invalidateSoon(40)
+    return result
+  }
+
+  function tick(time) {
+    if (!running) return
+    const wakeDue = wakeAt && time >= wakeAt
+    const needsFrame = dirty || continuous || input.pending() || wakeDue
+    if (needsFrame) {
+      if (wakeDue) wakeAt = 0
+      frame(frameCallback, time)
+    }
+    requestAnimationFrame(tick)
+  }
+
+  function start(fn) {
+    frameCallback = fn
+    if (running) return
+    running = true
+    input.attach()
+    dirty = true
+    const observer = new ResizeObserver(() => {
+      dirty = true
+    })
+    observer.observe(canvas)
+    window.addEventListener('resize', invalidate)
+    requestAnimationFrame(tick)
+  }
+
+  function stop() {
+    running = false
+    input.detach()
+    window.removeEventListener('resize', invalidate)
+  }
+
+  function invalidate() {
+    dirty = true
+    requested = true
+  }
+
+  const ui = {
+    frame,
+    start,
+    stop,
+    invalidate,
+    settings,
+    materials,
+    focus,
+    renderer,
+    state,
+    springs,
+    ...primitives,
+    ...controls,
+    ...composite,
+    glass: glassWidget.glass,
+    desktop: (opts) => createDesktop(ui, opts),
+    debug: { driver, core },
+    exportMaterials: () => serializeMaterials(materials),
+    importMaterials: (data) => {
+      assignMaterials(materials, parseMaterials(data))
+      invalidate()
+    },
+    setCursor: (name) => core.setCursor(name),
+    loadImage: (source, opts) => renderer.loadImage(source, opts),
+    updateImage: (image, source) => renderer.updateImage(image, source),
+    destroyImage: (image) => renderer.destroyImage(image),
+    get input() {
+      return driver.frame
+    },
+    get viewport() {
+      return driver.viewport
+    },
+    get continuous() {
+      return continuous
+    },
+    set continuous(value) {
+      continuous = value
+    },
+    get time() {
+      return lastTime
+    },
+  }
+
+  return ui
+}

package/src/material/adapt.js

@@ -0,0 +1,72 @@
+const DARK_BELOW = 0.4
+const LIGHT_ABOVE = 0.52
+
+export function analyzeBackdrop(probe, rect) {
+  if (!probe || probe.width === 0) return { luminance: 0.75, detail: 0.2, samples: 0 }
+  const x0 = Math.max(0, Math.floor(rect.x * probe.scaleX))
+  const y0 = Math.max(0, Math.floor(rect.y * probe.scaleY))
+  const x1 = Math.min(probe.width - 1, Math.ceil((rect.x + rect.w) * probe.scaleX))
+  const y1 = Math.min(probe.height - 1, Math.ceil((rect.y + rect.h) * probe.scaleY))
+  if (x1 < x0 || y1 < y0) return { luminance: 0.75, detail: 0.2, samples: 0 }
+
+  let sum = 0
+  let gradient = 0
+  let count = 0
+  let edges = 0
+  const data = probe.data
+  const stride = probe.width * 4
+  for (let y = y0; y <= y1; y++) {
+    const row = probe.height - 1 - y
+    for (let x = x0; x <= x1; x++) {
+      const i = row * stride + x * 4
+      const l = (0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2]) / 255
+      sum += l
+      count += 1
+      if (x < x1) {
+        const j = i + 4
+        const lr = (0.2126 * data[j] + 0.7152 * data[j + 1] + 0.0722 * data[j + 2]) / 255
+        gradient += Math.abs(lr - l)
+        edges += 1
+      }
+      if (y < y1) {
+        const j = i - stride
+        const ld = (0.2126 * data[j] + 0.7152 * data[j + 1] + 0.0722 * data[j + 2]) / 255
+        gradient += Math.abs(ld - l)
+        edges += 1
+      }
+    }
+  }
+  const luminance = count ? sum / count : 0.75
+  const detail = edges ? Math.min(1, (gradient / edges) / 0.12) : 0
+  return { luminance, detail, samples: count }
+}
+
+export function resolvePolarity(data, analysis, surface, clock) {
+  if (surface === 'large') {
+    data.polarity = 'light'
+    return clock.animate(data, 'dark', 0, { stiffness: 120, damping: 20 })
+  }
+  if (data.polarity == null) data.polarity = analysis.luminance < (DARK_BELOW + LIGHT_ABOVE) / 2 ? 'dark' : 'light'
+  if (analysis.samples > 0) {
+    if (data.polarity === 'light' && analysis.luminance < DARK_BELOW) data.polarity = 'dark'
+    else if (data.polarity === 'dark' && analysis.luminance > LIGHT_ABOVE) data.polarity = 'light'
+  }
+  return clock.animate(data, 'dark', data.polarity === 'dark' ? 1 : 0, { stiffness: 120, damping: 20 })
+}
+
+export function adaptiveScales(analysis) {
+  const detail = analysis.detail
+  const bright = Math.max(0, (analysis.luminance - 0.6) / 0.4)
+  const shadow = 0.55 + detail * 0.95 - bright * (1 - detail) * 0.3
+  const tint = 0.85 + detail * 0.4
+  return { shadow: Math.max(0.2, shadow), tint: Math.min(1.3, tint) }
+}
+
+export function resolveBorderFade(data, analysis, clock) {
+  if (data.borderPolarity == null) data.borderPolarity = analysis.samples > 0 && analysis.luminance < (DARK_BELOW + LIGHT_ABOVE) / 2 ? 'dark' : 'light'
+  if (analysis.samples > 0) {
+    if (data.borderPolarity === 'light' && analysis.luminance < DARK_BELOW) data.borderPolarity = 'dark'
+    else if (data.borderPolarity === 'dark' && analysis.luminance > LIGHT_ABOVE) data.borderPolarity = 'light'
+  }
+  return clock.animate(data, 'borderDark', data.borderPolarity === 'dark' ? 1 : 0, { stiffness: 260, damping: 30 })
+}

package/src/material/material.js

@@ -0,0 +1,131 @@
+import { MATERIAL_PARAMS } from './params.js'
+
+function lerp(a, b, t) {
+  return a + (b - a) * t
+}
+
+export function mixMaterial(a, b, t) {
+  if (t <= 0) return a
+  if (t >= 1) return b
+  const out = {}
+  for (const param of MATERIAL_PARAMS) {
+    const key = param.key
+    if (param.type === 'boolean') out[key] = t < 0.5 ? a[key] : b[key]
+    else if (param.type === 'color') {
+      out[key] = {
+        r: lerp(a[key].r, b[key].r, t),
+        g: lerp(a[key].g, b[key].g, t),
+        b: lerp(a[key].b, b[key].b, t),
+        a: lerp(a[key].a, b[key].a, t),
+      }
+    } else if (param.type === 'vector') out[key] = { x: lerp(a[key].x, b[key].x, t), y: lerp(a[key].y, b[key].y, t) }
+    else out[key] = lerp(a[key], b[key], t)
+  }
+  return out
+}
+
+export function unfocusedMaterial(material) {
+  const grey = (value) => value * 0.6 + 222 * 0.4
+  return {
+    ...material,
+    tint: {
+      r: grey(material.tint.r),
+      g: grey(material.tint.g),
+      b: grey(material.tint.b),
+      a: material.tint.a,
+    },
+    refDispersion: material.refDispersion * 0.3,
+    refFresnelFactor: 0,
+    glareFactor: 0,
+    shadowFactor: 0,
+  }
+}
+
+export function darkMaterial(material) {
+  return {
+    ...material,
+    tint: { r: 28, g: 28, b: 34, a: Math.max(0.38, material.tint.a * 0.85) },
+    refFresnelFactor: material.refFresnelFactor * 0.8,
+    glareFactor: material.glareFactor * 0.75,
+    shadowFactor: material.shadowFactor * 1.1,
+  }
+}
+
+export function lenslessMaterial(material) {
+  return {
+    ...material,
+    refFactor: 1,
+    refDispersion: 0,
+    refFresnelFactor: 0,
+    glareFactor: 0,
+    blurRadius: 1,
+    tint: { ...material.tint, a: 0 },
+    shadowFactor: 0,
+  }
+}
+
+export function thickenedMaterial(material, amount) {
+  if (amount <= 0) return material
+  return {
+    ...material,
+    refThickness: material.refThickness * (1 + amount * 0.15),
+    blurRadius: Math.min(200, material.blurRadius * (1 + amount * 0.8) + amount * 12),
+    shadowExpand: material.shadowExpand * (1 + amount * 0.8),
+    shadowFactor: Math.min(100, material.shadowFactor * (1 + amount * 0.6)),
+    refFresnelFactor: material.refFresnelFactor * (1 + amount * 0.2),
+    glareFactor: material.glareFactor * (1 - amount * 0.2),
+  }
+}
+
+export function accessibleMaterial(material, settings, dark, keepTint = false) {
+  let out = material
+  if (settings.reduceTransparency && !keepTint) {
+    const base = dark ? 34 : 246
+    out = {
+      ...out,
+      blurRadius: Math.max(out.blurRadius, 140),
+      refDispersion: 0,
+      tint: { r: base, g: base, b: base + (dark ? 4 : 2), a: Math.max(out.tint.a, 0.82) },
+    }
+  }
+  if (settings.increaseContrast) {
+    const base = dark ? 0 : 255
+    out = {
+      ...out,
+      blurRadius: Math.max(out.blurRadius, 160),
+      refDispersion: 0,
+      glareFactor: 0,
+      refFresnelFactor: 0,
+      tint: keepTint ? { ...out.tint, a: 0.96 } : { r: base, g: base, b: base, a: 0.96 },
+    }
+  }
+  return out
+}
+
+export function materialUniforms(material) {
+  return {
+    u_refThickness: material.refThickness,
+    u_refFactor: material.refFactor,
+    u_refDispersion: material.refDispersion,
+    u_refFresnelRange: material.refFresnelRange,
+    u_refFresnelHardness: material.refFresnelHardness / 100,
+    u_refFresnelFactor: material.refFresnelFactor / 100,
+    u_glareRange: material.glareRange,
+    u_glareHardness: material.glareHardness / 100,
+    u_glareConvergence: material.glareConvergence / 100,
+    u_glareOppositeFactor: material.glareOppositeFactor / 100,
+    u_glareFactor: material.glareFactor / 100,
+    u_glareAngle: (material.glareAngle * Math.PI) / 180,
+    u_blurRadius: material.blurRadius,
+    u_blurEdge: material.blurEdge ? 1 : 0,
+    u_tint: [material.tint.r / 255, material.tint.g / 255, material.tint.b / 255, material.tint.a],
+  }
+}
+
+export function shadowUniforms(material) {
+  return {
+    u_shadowExpand: material.shadowExpand,
+    u_shadowFactor: material.shadowFactor / 100,
+    u_shadowPosition: [-material.shadowPosition.x, -material.shadowPosition.y],
+  }
+}

package/src/material/optics.js

@@ -0,0 +1,49 @@
+function safeAsin(x) {
+  return Math.asin(Math.max(-1, Math.min(1, x)))
+}
+
+export function edgeFactor(inwardDistance, thickness, refFactor) {
+  if (inwardDistance >= thickness) return 0
+  const ratio = 1 - inwardDistance / thickness
+  const thetaI = safeAsin(ratio * ratio)
+  const thetaT = safeAsin((1 / refFactor) * Math.sin(thetaI))
+  return -Math.tan(thetaT - thetaI)
+}
+
+export function displacement(inwardDistance, thickness, refFactor) {
+  return edgeFactor(inwardDistance, thickness, refFactor) * 70.710678
+}
+
+export function superellipseCorner(px, py, radius, n) {
+  const x = Math.abs(px)
+  const y = Math.abs(py)
+  return Math.pow(Math.pow(x, n) + Math.pow(y, n), 1 / n) - radius
+}
+
+export function roundedRectSDF(px, py, shape, radius, roundness) {
+  const hw = shape.w / 2
+  const hh = shape.h / 2
+  const qx = px - (shape.x + hw)
+  const qy = py - (shape.y + hh)
+  const cr = Math.max(0.5, Math.min(radius, Math.min(hw, hh)))
+  const n = cr >= Math.min(hw, hh) - 0.5 ? 2 : roundness
+  const dx = Math.abs(qx) - hw
+  const dy = Math.abs(qy) - hh
+  if (dx > -cr && dy > -cr) {
+    const cx = Math.sign(qx) * (hw - cr)
+    const cy = Math.sign(qy) * (hh - cr)
+    return superellipseCorner(qx - cx, qy - cy, cr, n)
+  }
+  return Math.min(Math.max(dx, dy), 0) + Math.hypot(Math.max(dx, 0), Math.max(dy, 0))
+}
+
+export function smin(a, b, k) {
+  if (k <= 0) return Math.min(a, b)
+  const h = Math.max(0, Math.min(1, 0.5 + (0.5 * (b - a)) / k))
+  return b + (a - b) * h - k * h * (1 - h)
+}
+
+export function edgeProfile(sdf, range, hardness) {
+  const safeRange = Math.max(range, 0.001)
+  return Math.max(0, Math.min(1, Math.pow(Math.max(1 + (sdf / 1500) * Math.pow(500 / safeRange, 2) + hardness, 0), 5)))
+}

package/src/material/params.js

@@ -0,0 +1,83 @@
+export const MATERIAL_PARAMS = [
+  { key: 'cornerRadius', label: 'Corner radius', group: 'shape', min: 0, max: 60, step: 1, value: 12 },
+  { key: 'cornerRoundness', label: 'Corner roundness', group: 'shape', min: 2, max: 7, step: 0.01, value: 5 },
+  { key: 'refThickness', label: 'Thickness', group: 'refraction', min: 1, max: 80, step: 0.01, value: 20 },
+  { key: 'refFactor', label: 'Refraction', group: 'refraction', min: 1, max: 4, step: 0.01, value: 1.4 },
+  { key: 'refDispersion', label: 'Dispersion', group: 'refraction', min: 0, max: 50, step: 0.01, value: 7 },
+  { key: 'refFresnelRange', label: 'Fresnel range', group: 'fresnel', min: 0, max: 100, step: 0.01, value: 30 },
+  { key: 'refFresnelHardness', label: 'Fresnel hardness', group: 'fresnel', min: 0, max: 100, step: 0.01, value: 20 },
+  { key: 'refFresnelFactor', label: 'Fresnel', group: 'fresnel', min: 0, max: 100, step: 0.01, value: 20 },
+  { key: 'glareRange', label: 'Glare range', group: 'glare', min: 0, max: 100, step: 0.01, value: 30 },
+  { key: 'glareHardness', label: 'Glare hardness', group: 'glare', min: 0, max: 100, step: 0.01, value: 20 },
+  { key: 'glareFactor', label: 'Glare', group: 'glare', min: 0, max: 120, step: 0.01, value: 90 },
+  { key: 'glareConvergence', label: 'Glare convergence', group: 'glare', min: 0, max: 100, step: 0.01, value: 50 },
+  { key: 'glareOppositeFactor', label: 'Opposite glare', group: 'glare', min: 0, max: 100, step: 0.01, value: 80 },
+  { key: 'glareAngle', label: 'Glare angle', group: 'glare', min: -180, max: 180, step: 0.01, value: -45 },
+  { key: 'blurRadius', label: 'Blur', group: 'blur', min: 1, max: 200, step: 1, value: 1 },
+  { key: 'blurEdge', label: 'Blur edge', group: 'blur', type: 'boolean', value: true },
+  { key: 'tint', label: 'Tint', group: 'tint', type: 'color', value: { r: 255, g: 255, b: 255, a: 0 } },
+  { key: 'shadowExpand', label: 'Shadow expand', group: 'shadow', min: 2, max: 100, step: 0.01, value: 25 },
+  { key: 'shadowFactor', label: 'Shadow', group: 'shadow', min: 0, max: 100, step: 0.01, value: 15 },
+  { key: 'shadowPosition', label: 'Shadow offset', group: 'shadow', type: 'vector', min: -50, max: 50, step: 0.1, value: { x: 0, y: -10 } },
+  { key: 'borderWidth', label: 'Border width', group: 'border', min: 0, max: 4, step: 0.1, value: 0 },
+  { key: 'borderColor', label: 'Border', group: 'border', type: 'color', value: { r: 255, g: 255, b: 255, a: 0.4 } },
+  { key: 'borderAdapt', label: 'Fade over dark', group: 'border', type: 'boolean', value: false },
+  { key: 'adaptTint', label: 'Tint response', group: 'adapt', min: 0, max: 100, step: 1, value: 100 },
+  { key: 'adaptShadow', label: 'Shadow response', group: 'adapt', min: 0, max: 100, step: 1, value: 100 },
+]
+
+export const SHAPE_PARAMS = [
+  { key: 'shapeWidth', label: 'Width', min: 20, max: 800, step: 1, value: 200 },
+  { key: 'shapeHeight', label: 'Height', min: 20, max: 800, step: 1, value: 200 },
+  { key: 'shapeRadius', label: 'Radius', min: 1, max: 100, step: 0.1, value: 80 },
+  { key: 'shapeRoundness', label: 'Roundness', min: 2, max: 7, step: 0.01, value: 5 },
+  { key: 'mergeRate', label: 'Merge rate', min: 0, max: 0.3, step: 0.01, value: 0.05 },
+  { key: 'springSizeFactor', label: 'Spring size', min: 0, max: 50, step: 0.01, value: 10 },
+]
+
+export const MATERIAL_GROUPS = [
+  { key: 'shape', label: 'Shape' },
+  { key: 'refraction', label: 'Refraction' },
+  { key: 'fresnel', label: 'Fresnel' },
+  { key: 'glare', label: 'Glare' },
+  { key: 'blur', label: 'Blur' },
+  { key: 'tint', label: 'Tint' },
+  { key: 'shadow', label: 'Shadow' },
+  { key: 'border', label: 'Border' },
+  { key: 'adapt', label: 'Adapt' },
+]
+
+export function defaultMaterial() {
+  const material = {}
+  for (const param of MATERIAL_PARAMS) material[param.key] = structuredClone(param.value)
+  return material
+}
+
+export function clampParam(param, value) {
+  if (param.type === 'boolean') return Boolean(value)
+  if (param.type === 'color') {
+    return {
+      r: Math.min(255, Math.max(0, value.r)),
+      g: Math.min(255, Math.max(0, value.g)),
+      b: Math.min(255, Math.max(0, value.b)),
+      a: Math.min(1, Math.max(0, value.a)),
+    }
+  }
+  if (param.type === 'vector') {
+    return {
+      x: Math.min(param.max, Math.max(param.min, value.x)),
+      y: Math.min(param.max, Math.max(param.min, value.y)),
+    }
+  }
+  return Math.min(param.max, Math.max(param.min, value))
+}
+
+export function normalizeMaterial(input, defaults) {
+  const base = defaults ? structuredClone(defaults) : defaultMaterial()
+  for (const param of MATERIAL_PARAMS) if (base[param.key] === undefined) base[param.key] = structuredClone(param.value)
+  if (!input) return base
+  for (const param of MATERIAL_PARAMS) {
+    if (input[param.key] !== undefined) base[param.key] = clampParam(param, input[param.key])
+  }
+  return base
+}