vireuikit 0.5.0 → 0.7.0

package/dist/chunk-AR2AM3BR.js

@@ -0,0 +1,557 @@
+import { activeMaterial, applyAccessibility, resolveOptics, halfMinDp, VIREGLASS_SHEET_MATERIAL, concentricRadius } from 'vireglass';
+
+// src/kit/a11y.ts
+var A11Y_NONE = {
+  reduceTransparency: false,
+  increaseContrast: false,
+  reduceMotion: false
+};
+function resolveA11y(system, override = {}) {
+  return {
+    reduceTransparency: override.reduceTransparency ?? system.reduceTransparency,
+    increaseContrast: override.increaseContrast ?? system.increaseContrast,
+    reduceMotion: override.reduceMotion ?? system.reduceMotion
+  };
+}
+function presentationFor(mode, wantsGlass) {
+  return {
+    glass: wantsGlass,
+    frost: wantsGlass && mode.reduceTransparency,
+    surface: wantsGlass ? "glass" : "plain",
+    contrastBorder: mode.increaseContrast,
+    instantSprings: mode.reduceMotion
+  };
+}
+function sameA11y(a, b) {
+  return a.reduceTransparency === b.reduceTransparency && a.increaseContrast === b.increaseContrast && a.reduceMotion === b.reduceMotion;
+}
+var ATOM_AT_REST = {
+  pressed: 0,
+  hovered: 0,
+  selected: 0,
+  disabled: false
+};
+function atomLift(kind) {
+  switch (kind) {
+    case "iconButton":
+    case "switch":
+    case "slider":
+      return 1;
+    default:
+      return 0;
+  }
+}
+var DISABLED_PRESENCE = 0.25;
+var HOVER_GAIN = 0.35;
+function activation(state) {
+  if (state.disabled) return 0;
+  const clamp2 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+  return Math.max(clamp2(state.selected), clamp2(state.pressed), clamp2(state.hovered) * HOVER_GAIN);
+}
+function atomMaterial(base, kind, state = ATOM_AT_REST) {
+  const out = activeMaterial(base, activation(state));
+  if (!state.disabled) return out;
+  return { ...out, presence: out.presence * DISABLED_PRESENCE };
+}
+function atomAtRest(state) {
+  return state.pressed === 0 && state.hovered === 0 && state.selected === 0 && state.disabled === false;
+}
+var REST_BODY = { alpha: 0.25, white: 0.15, lift: 0.1 };
+var PRESSED_BODY = { alpha: 0.34, white: 0.35, lift: 0 };
+var FROST_LIFT = 0.26;
+function atomBody(base, state = ATOM_AT_REST, frost = false) {
+  const on = activation(state);
+  const mix2 = (key) => REST_BODY[key] + (PRESSED_BODY[key] - REST_BODY[key]) * on;
+  let alpha = mix2("alpha");
+  let white = mix2("white");
+  let lift = mix2("lift");
+  if (state.disabled) alpha *= DISABLED_PRESENCE;
+  if (frost) {
+    const density = applyAccessibility(resolveOptics(base), {
+      reduceTransparency: true,
+      increaseContrast: false,
+      reduceMotion: false
+    }).bodyDensity;
+    alpha = Math.max(alpha, density);
+    white = 0;
+    lift = FROST_LIFT;
+  }
+  return { alpha, white, lift };
+}
+
+// src/kit/behavior/focus.ts
+function stepFocus(event) {
+  return event.type === "focus" && event.visible;
+}
+
+// src/kit/behavior/hover.ts
+function stepHover(event, canHover) {
+  return canHover && event.type === "enter";
+}
+
+// src/kit/behavior/press.ts
+var PRESS_IDLE = { by: null };
+function stepPress(state, event, enabled2) {
+  switch (event.type) {
+    case "down":
+      if (!enabled2 || state.by !== null) return { state, activated: false };
+      return { state: { by: event.source }, activated: false };
+    case "up":
+      if (state.by !== event.source) return { state, activated: false };
+      return { state: PRESS_IDLE, activated: enabled2 };
+    case "cancel":
+      return { state: PRESS_IDLE, activated: false };
+    case "leave":
+      return state.by === "pointer" ? { state: PRESS_IDLE, activated: false } : { state, activated: false };
+  }
+}
+
+// src/kit/behavior/control.ts
+var TOUCH_INPUT = { hover: false };
+var POINTER_INPUT = { hover: true };
+var CONTROL_IDLE = {
+  press: PRESS_IDLE,
+  hovered: false,
+  focused: false,
+  disabled: false
+};
+function stepControl(state, event, caps) {
+  switch (event.type) {
+    case "down":
+    case "up":
+    case "cancel": {
+      const next = stepPress(state.press, event, !state.disabled);
+      return { state: { ...state, press: next.state }, activated: next.activated };
+    }
+    case "leave": {
+      const next = stepPress(state.press, event, !state.disabled);
+      return { state: { ...state, press: next.state, hovered: false }, activated: false };
+    }
+    case "enter":
+      return {
+        state: { ...state, hovered: !state.disabled && stepHover(event, caps.hover) },
+        activated: false
+      };
+    case "focus":
+    case "blur": {
+      const press = event.type === "blur" && state.press.by === "keyboard" ? PRESS_IDLE : state.press;
+      return {
+        state: { ...state, press, focused: !state.disabled && stepFocus(event) },
+        activated: false
+      };
+    }
+    case "disable":
+      return {
+        state: event.disabled ? { press: PRESS_IDLE, hovered: false, focused: false, disabled: true } : { ...state, disabled: false },
+        activated: false
+      };
+  }
+}
+function controlTargets(state) {
+  return {
+    pressed: state.press.by !== null ? 1 : 0,
+    hovered: state.hovered ? 1 : 0,
+    focus: state.focused ? 1 : 0,
+    disabled: state.disabled
+  };
+}
+function stepSpring(s, dt, response, damping, instant = false) {
+  if (instant) {
+    const moved = s.x !== s.target || s.v !== 0;
+    s.x = s.target;
+    s.v = 0;
+    return moved;
+  }
+  const stiffness = (2 * Math.PI / response) ** 2;
+  const friction = 4 * Math.PI * damping / response;
+  const h = 1 / 240;
+  for (let left = Math.min(dt, 0.05); left > 0; left -= h) {
+    const step = Math.min(left, h);
+    s.v += (stiffness * (s.target - s.x) - friction * s.v) * step;
+    s.x += s.v * step;
+  }
+  if (Math.abs(s.target - s.x) < 1e-3 && Math.abs(s.v) < 0.01) {
+    s.x = s.target;
+    s.v = 0;
+    return false;
+  }
+  return true;
+}
+var smoothstep = (e0, e1, x) => {
+  const t = Math.min(Math.max((x - e0) / (e1 - e0), 0), 1);
+  return t * t * (3 - 2 * t);
+};
+var mix = (a, b, t) => a + (b - a) * t;
+var DROP_DIAMETER = 1.1;
+var DROP_LIFT = 0.5;
+var NECK_GAIN = 0.3;
+var NECK_RAMP = 4;
+var CORNER_EASE_START = 0.55;
+var INK_OUT_END = 0.4;
+var INK_IN_START = 0.9;
+var INK_IN_END = 1;
+function growthInk(phase) {
+  const a = Math.min(Math.max(phase.shrink, 0), 1);
+  const b = Math.max(phase.grow, 0);
+  return {
+    outgoing: 1 - smoothstep(0, INK_OUT_END, a),
+    incoming: smoothstep(INK_IN_START, INK_IN_END, b)
+  };
+}
+function largerOf(a, b) {
+  return halfMinDp(a.geometry) >= halfMinDp(b.geometry) ? { main: a, other: b } : { main: b, other: a };
+}
+function growthFrame(source, target, anchor, phase) {
+  const dx = target.center.x - source.center.x;
+  const dy = target.center.y - source.center.y;
+  const len = Math.hypot(dx, dy) || 1;
+  const sourceSize = halfMinDp(source.geometry) * 2;
+  const lift = DROP_LIFT * sourceSize;
+  const drop = {
+    x: source.center.x + dx / len * lift,
+    y: source.center.y + dy / len * lift
+  };
+  const a = Math.min(Math.max(phase.shrink, 0), 1);
+  const b = Math.max(phase.grow, 0);
+  const keep = Math.max(1 - b, 0);
+  const d = DROP_DIAMETER * sourceSize;
+  const shrunkGeometry = {
+    width: mix(source.geometry.width, 0.6 * d, a) * keep,
+    height: mix(source.geometry.height, 0.6 * d, a) * keep,
+    cornerRadius: 0
+  };
+  shrunkGeometry.cornerRadius = Math.min(
+    mix(source.geometry.cornerRadius, halfMinDp(shrunkGeometry), a),
+    halfMinDp(shrunkGeometry)
+  );
+  const shrunk = {
+    geometry: shrunkGeometry,
+    center: { x: mix(source.center.x, drop.x, a), y: mix(source.center.y, drop.y, a) }
+  };
+  const seed = d * Math.sqrt(a);
+  const cornerX = Math.sign(anchor.x - source.center.x);
+  const cornerY = Math.sign(anchor.y - source.center.y);
+  const edgeX = mix(drop.x + cornerX * (seed / 2), anchor.x, Math.min(b, 1));
+  const edgeY = mix(drop.y + cornerY * (seed / 2), anchor.y, Math.min(b, 1));
+  const width = mix(seed, target.geometry.width, b);
+  const height = mix(seed, target.geometry.height, b);
+  const grownGeometry = { width, height, cornerRadius: 0 };
+  grownGeometry.cornerRadius = Math.min(
+    mix(halfMinDp(grownGeometry), target.geometry.cornerRadius, smoothstep(CORNER_EASE_START, 1, b)),
+    halfMinDp(grownGeometry)
+  );
+  const grown = {
+    geometry: grownGeometry,
+    center: { x: edgeX - cornerX * (width / 2), y: edgeY - cornerY * (height / 2) }
+  };
+  const { main, other } = largerOf(grown, shrunk);
+  const neck = NECK_GAIN * sourceSize * Math.min(a * NECK_RAMP, 1) * keep;
+  const united = neck > 0.01 && other.geometry.width > 0.5 && other.geometry.height > 0.5;
+  return {
+    body: main,
+    grown,
+    merge: united ? {
+      offsetX: other.center.x - main.center.x,
+      offsetY: other.center.y - main.center.y,
+      width: other.geometry.width,
+      height: other.geometry.height,
+      cornerRadius: other.geometry.cornerRadius,
+      smoothing: neck
+    } : void 0,
+    ink: growthInk(phase)
+  };
+}
+var createGrowthState = () => ({
+  shrink: { x: 0, v: 0, target: 0 },
+  grow: { x: 0, v: 0, target: 0 }
+});
+var growthPhase = (state) => ({
+  shrink: state.shrink.x,
+  grow: state.grow.x
+});
+var DEFAULT_GROWTH_TIMING = {
+  shrinkOpen: 0.21,
+  shrinkClose: 0.14,
+  growOpen: 0.38,
+  growClose: 0.4,
+  growDampingOpen: 0.72
+};
+var GROW_DAMPING_CLOSE = 1;
+var SHRINK_DAMPING = 1;
+var GROW_STARTS_AT = 0.8;
+var SHRINK_RETURNS_AT = 0.12;
+function stepGrowth(state, dt, open, reduceMotion = false, timing = DEFAULT_GROWTH_TIMING) {
+  const { shrink, grow } = state;
+  if (reduceMotion) {
+    shrink.target = open ? 1 : 0;
+    grow.target = open ? 1 : 0;
+  } else if (open) {
+    shrink.target = 1;
+    if (shrink.x > GROW_STARTS_AT) grow.target = 1;
+  } else {
+    grow.target = 0;
+    if (grow.x < SHRINK_RETURNS_AT) shrink.target = 0;
+  }
+  const movedShrink = stepSpring(
+    shrink,
+    dt,
+    open ? timing.shrinkOpen : timing.shrinkClose,
+    SHRINK_DAMPING,
+    reduceMotion
+  );
+  const movedGrow = stepSpring(
+    grow,
+    dt,
+    open ? timing.growOpen : timing.growClose,
+    open ? timing.growDampingOpen : GROW_DAMPING_CLOSE,
+    reduceMotion
+  );
+  return movedShrink || movedGrow;
+}
+
+// src/kit/behavior/visual.ts
+var createControlVisual = () => ({
+  pressed: { x: 0, v: 0, target: 0 },
+  hovered: { x: 0, v: 0, target: 0 },
+  focus: { x: 0, v: 0, target: 0 }
+});
+var PRESS = { response: 0.18, damping: 0.78 };
+var HOVER = { response: 0.22, damping: 1 };
+var FOCUS = { response: 0.16, damping: 1 };
+function stepControlVisual(visual, dt, state, instant = false) {
+  const t = controlTargets(state);
+  visual.pressed.target = t.pressed;
+  visual.hovered.target = t.hovered;
+  visual.focus.target = t.focus;
+  const a = stepSpring(visual.pressed, dt, PRESS.response, PRESS.damping, instant);
+  const b = stepSpring(visual.hovered, dt, HOVER.response, HOVER.damping, instant);
+  const c = stepSpring(visual.focus, dt, FOCUS.response, FOCUS.damping, instant);
+  return a || b || c;
+}
+function visualAtomState(visual, state) {
+  return {
+    pressed: visual.pressed.x,
+    hovered: visual.hovered.x,
+    selected: 0,
+    disabled: state.disabled
+  };
+}
+function settleControlVisual(visual, state) {
+  stepControlVisual(visual, 0, state, true);
+}
+var MENU_CLOSED = { open: false, active: -1, typed: "", typedAt: Number.NEGATIVE_INFINITY };
+var TYPEAHEAD_SECONDS = 0.5;
+var exists = (items, i) => i >= 0 && i < items.length;
+var enabled = (items, i) => exists(items, i) && !items[i].disabled;
+var reachable = (items, i) => exists(items, i) && (items[i].focusable ?? !items[i].disabled);
+function seek(items, from, step) {
+  const n = items.length;
+  for (let k = 1; k <= n; k += 1) {
+    const i = ((from + step * k) % n + n) % n;
+    if (reachable(items, i)) return i;
+  }
+  return -1;
+}
+var first = (items) => seek(items, -1, 1);
+var last = (items) => seek(items, items.length, -1);
+var toItem = (index) => index < 0 ? { to: "menu" } : { to: "item", index };
+function typeahead(state, items, key, at) {
+  const fresh = at - state.typedAt > TYPEAHEAD_SECONDS;
+  const typed = (fresh ? "" : state.typed) + key.toLowerCase();
+  const repeated = typed.length > 1 && [...typed].every((c) => c === typed[0]);
+  const needle = repeated ? typed[0] : typed;
+  const start = needle.length > 1 ? state.active - 1 : state.active;
+  const n = items.length;
+  for (let k = 1; k <= n; k += 1) {
+    const i = ((start + k) % n + n) % n;
+    if (reachable(items, i) && items[i].label.trim().toLowerCase().startsWith(needle)) {
+      return { state: { ...state, active: i, typed, typedAt: at }, focus: { to: "item", index: i }, chosen: null };
+    }
+  }
+  return { state: { ...state, typed, typedAt: at }, focus: { to: "stay" }, chosen: null };
+}
+function stepMenu(state, event, items) {
+  const stay = { state, focus: { to: "stay" }, chosen: null };
+  if (event.type === "open") {
+    const active = event.focus === "first" ? first(items) : event.focus === "last" ? last(items) : -1;
+    return { state: { ...MENU_CLOSED, open: true, active }, focus: toItem(active), chosen: null };
+  }
+  if (!state.open) return stay;
+  switch (event.type) {
+    case "move": {
+      const active = event.to === "first" ? first(items) : event.to === "last" ? last(items) : seek(items, state.active < 0 && event.to === "previous" ? items.length : state.active, event.to === "next" ? 1 : -1);
+      if (active < 0) return stay;
+      return { state: { ...state, active, typed: "" }, focus: { to: "item", index: active }, chosen: null };
+    }
+    case "point":
+      if (!reachable(items, event.index) || event.index === state.active) return stay;
+      return { state: { ...state, active: event.index, typed: "" }, focus: { to: "item", index: event.index }, chosen: null };
+    case "type":
+      return typeahead(state, items, event.key, event.at);
+    case "choose":
+      if (!enabled(items, event.index)) return stay;
+      return { state: MENU_CLOSED, focus: { to: "trigger" }, chosen: event.index };
+    case "dismiss":
+      return { state: MENU_CLOSED, focus: event.reason === "outside" ? { to: "none" } : { to: "trigger" }, chosen: null };
+  }
+}
+var MENU_CORNERS = {
+  "top-left": { x: -1, y: -1 },
+  "top-right": { x: 1, y: -1 },
+  "bottom-left": { x: -1, y: 1 },
+  "bottom-right": { x: 1, y: 1 }
+};
+function menuCorner(trigger, viewport) {
+  return {
+    x: trigger.x + trigger.width / 2 <= viewport.width / 2 ? -1 : 1,
+    y: trigger.y + trigger.height / 2 <= viewport.height / 2 ? -1 : 1
+  };
+}
+function along(start, length, size, side) {
+  return side < 0 ? start : start + length - size;
+}
+function fits(at, size, limit, margin) {
+  return at >= margin && at + size <= limit - margin;
+}
+var clamp = (v, lo, hi) => Math.min(Math.max(v, lo), Math.max(lo, hi));
+function menuPlacement(trigger, menu, viewport, options = {}) {
+  const margin = options.margin ?? 8;
+  const width = Math.min(menu.width, viewport.width - 2 * margin);
+  const height = Math.min(menu.height, viewport.height - 2 * margin);
+  const corner = { ...options.corner ?? menuCorner(trigger, viewport) };
+  let x = along(trigger.x, trigger.width, width, corner.x);
+  let y = along(trigger.y, trigger.height, height, corner.y);
+  if (!options.corner) {
+    const fx = along(trigger.x, trigger.width, width, corner.x === -1 ? 1 : -1);
+    if (!fits(x, width, viewport.width, margin) && fits(fx, width, viewport.width, margin)) {
+      corner.x = corner.x === -1 ? 1 : -1;
+      x = fx;
+    }
+    const fy = along(trigger.y, trigger.height, height, corner.y === -1 ? 1 : -1);
+    if (!fits(y, height, viewport.height, margin) && fits(fy, height, viewport.height, margin)) {
+      corner.y = corner.y === -1 ? 1 : -1;
+      y = fy;
+    }
+  }
+  x = clamp(x, margin, viewport.width - margin - width);
+  y = clamp(y, margin, viewport.height - margin - height);
+  const rect = { x, y, width, height };
+  return {
+    rect,
+    corner,
+    anchor: { x: corner.x < 0 ? x : x + width, y: corner.y < 0 ? y : y + height }
+  };
+}
+var center = (r) => ({ x: r.x + r.width / 2, y: r.y + r.height / 2 });
+function menuActivity(phase) {
+  const shrink = Math.min(Math.max(phase.shrink, 0), 1);
+  const grow = Math.min(Math.max(phase.grow, 0), 1);
+  return shrink * (1 - grow);
+}
+function menuSurfaceFrame(trigger, menu, anchor, phase) {
+  const frame = growthFrame(
+    { geometry: { width: trigger.width, height: trigger.height, cornerRadius: trigger.radius }, center: center(trigger) },
+    { geometry: { width: menu.width, height: menu.height, cornerRadius: menu.radius }, center: center(menu) },
+    anchor,
+    phase
+  );
+  const { geometry, center: c } = frame.body;
+  const box = {
+    x: c.x - geometry.width / 2,
+    y: c.y - geometry.height / 2,
+    width: geometry.width,
+    height: geometry.height,
+    radius: geometry.cornerRadius
+  };
+  return {
+    box,
+    morph: frame.merge,
+    content: { x: menu.x - box.x, y: menu.y - box.y },
+    ink: frame.ink,
+    activity: menuActivity(phase)
+  };
+}
+function menuGlass(base) {
+  return { ...base, roughness: Math.max(base.roughness, VIREGLASS_SHEET_MATERIAL.roughness) };
+}
+function menuMaterial(base, activity) {
+  return atomMaterial(menuGlass(base), "menu", { ...ATOM_AT_REST, pressed: activity });
+}
+var MENU_DROP_BODY = { alpha: 0.9, white: 0.1, lift: 0.2 };
+function menuBody(base, activity, frost = false) {
+  const rest = atomBody(base, ATOM_AT_REST, frost);
+  if (frost) return rest;
+  const k = Math.min(Math.max(activity, 0), 1);
+  const mix2 = (key) => rest[key] + (MENU_DROP_BODY[key] - rest[key]) * k;
+  return { alpha: mix2("alpha"), white: mix2("white"), lift: mix2("lift") };
+}
+var MENU_ITEM_FILL = { active: 0.1, pressed: 0.18 };
+function menuItemFill(state) {
+  if (state.disabled) return 0;
+  if (state.pressed) return MENU_ITEM_FILL.pressed;
+  return state.active ? MENU_ITEM_FILL.active : 0;
+}
+
+// src/kit/response.ts
+var LIFTING = { grow: 0.18, defocus: 1.6 };
+var SINKING = { grow: 0.06, defocus: 1 };
+function pressResponse(kind) {
+  return atomLift(kind) === 1 ? LIFTING : SINKING;
+}
+var CONTROL_SIZES = ["touch", "small", "medium", "large", "xlarge"];
+var MIN_TOUCH_TARGET_DP = 44;
+var MIN_POINTER_TARGET_DP = 24;
+var capsule = (height, paddingX) => ({
+  height,
+  paddingX,
+  icon: Math.round(height / 2),
+  radius: height / 2,
+  shape: "capsule"
+});
+var rounded = (height, paddingX) => ({
+  height,
+  paddingX,
+  icon: Math.round(height / 2),
+  radius: height / 4,
+  shape: "rounded"
+});
+var BUTTON_SIZES = {
+  touch: capsule(44, 20),
+  small: rounded(24, 10),
+  medium: rounded(32, 14),
+  large: capsule(40, 18),
+  xlarge: capsule(48, 22)
+};
+function iconButtonSize(size) {
+  const spec = BUTTON_SIZES[size];
+  return { ...spec, width: spec.height, paddingX: 0 };
+}
+var MENU_PADDING = 0.3;
+function menuSize(size) {
+  const spec = BUTTON_SIZES[size];
+  const padding = Math.round(spec.height * MENU_PADDING);
+  return {
+    row: spec.height,
+    padding,
+    itemRadius: spec.radius,
+    radius: spec.radius + padding,
+    icon: spec.icon,
+    labelPad: spec.paddingX
+  };
+}
+function nestedRadius(outerRadius, inset, minimum = 0) {
+  return concentricRadius(outerRadius, inset, minimum);
+}
+function defaultSize(input) {
+  return input.touch ? "touch" : "medium";
+}
+function hitSlop(bodyDp, minTargetDp) {
+  return bodyDp >= minTargetDp ? 0 : (minTargetDp - bodyDp) / 2;
+}
+function minTarget(input) {
+  return input.touch ? MIN_TOUCH_TARGET_DP : MIN_POINTER_TARGET_DP;
+}
+
+export { A11Y_NONE, ATOM_AT_REST, BUTTON_SIZES, CONTROL_IDLE, CONTROL_SIZES, DEFAULT_GROWTH_TIMING, MENU_CLOSED, MENU_CORNERS, MENU_DROP_BODY, MENU_ITEM_FILL, MIN_POINTER_TARGET_DP, MIN_TOUCH_TARGET_DP, POINTER_INPUT, PRESS_IDLE, TOUCH_INPUT, TYPEAHEAD_SECONDS, atomAtRest, atomBody, atomLift, atomMaterial, controlTargets, createControlVisual, createGrowthState, defaultSize, growthFrame, growthInk, growthPhase, hitSlop, iconButtonSize, menuActivity, menuBody, menuCorner, menuGlass, menuItemFill, menuMaterial, menuPlacement, menuSize, menuSurfaceFrame, minTarget, nestedRadius, presentationFor, pressResponse, resolveA11y, sameA11y, settleControlVisual, smoothstep, stepControl, stepControlVisual, stepFocus, stepGrowth, stepHover, stepMenu, stepPress, stepSpring, visualAtomState };
+//# sourceMappingURL=chunk-AR2AM3BR.js.map
+//# sourceMappingURL=chunk-AR2AM3BR.js.map