vireuikit 0.6.0 → 0.8.0

package/dist/index.cjs

@@ -27,135 +27,129 @@ function presentationFor(mode, wantsGlass) {
 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 clamp = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
-  return Math.max(clamp(state.selected), clamp(state.pressed), clamp(state.hovered) * HOVER_GAIN);
+
+// src/kit/adaptive/classes.ts
+var WIDTH_CLASSES = ["compact", "medium", "expanded", "large", "xlarge"];
+var HEIGHT_CLASSES = ["compact", "medium", "expanded"];
+var WIDTH_BREAKPOINTS = { medium: 600, expanded: 840, large: 1200, xlarge: 1600 };
+var HEIGHT_BREAKPOINTS = { medium: 480, expanded: 900 };
+function widthClass(width) {
+  if (!(width >= WIDTH_BREAKPOINTS.medium)) return "compact";
+  if (width < WIDTH_BREAKPOINTS.expanded) return "medium";
+  if (width < WIDTH_BREAKPOINTS.large) return "expanded";
+  return width < WIDTH_BREAKPOINTS.xlarge ? "large" : "xlarge";
 }
-function atomMaterial(base, kind, state = ATOM_AT_REST) {
-  const out = vireglass.activeMaterial(base, activation(state));
-  if (!state.disabled) return out;
-  return { ...out, presence: out.presence * DISABLED_PRESENCE };
+function heightClass(height) {
+  if (!(height >= HEIGHT_BREAKPOINTS.medium)) return "compact";
+  return height < HEIGHT_BREAKPOINTS.expanded ? "medium" : "expanded";
 }
-function atomAtRest(state) {
-  return state.pressed === 0 && state.hovered === 0 && state.selected === 0 && state.disabled === false;
+function classifyWindow(size) {
+  return { width: widthClass(size.width), height: heightClass(size.height) };
 }
-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 = vireglass.applyAccessibility(vireglass.resolveOptics(base), {
-      reduceTransparency: true,
-      increaseContrast: false,
-      reduceMotion: false
-    }).bodyDensity;
-    alpha = Math.max(alpha, density);
-    white = 0;
-    lift = FROST_LIFT;
-  }
-  return { alpha, white, lift };
+function widthAtLeast(value, minimum) {
+  return WIDTH_CLASSES.indexOf(value) >= WIDTH_CLASSES.indexOf(minimum);
 }
 
-// src/kit/behavior/focus.ts
-function stepFocus(event) {
-  return event.type === "focus" && event.visible;
+// src/kit/geometry.ts
+function intersectRect(a, b) {
+  const x = Math.max(a.x, b.x);
+  const y = Math.max(a.y, b.y);
+  const right = Math.min(a.x + a.width, b.x + b.width);
+  const bottom = Math.min(a.y + a.height, b.y + b.height);
+  return right > x && bottom > y ? { x, y, width: right - x, height: bottom - y } : null;
 }
-
-// src/kit/behavior/hover.ts
-function stepHover(event, canHover) {
-  return canHover && event.type === "enter";
+function rectContains(outer, inner, tolerance = 0) {
+  return inner.x >= outer.x - tolerance && inner.y >= outer.y - tolerance && inner.x + inner.width <= outer.x + outer.width + tolerance && inner.y + inner.height <= outer.y + outer.height + tolerance;
 }
 
-// src/kit/behavior/press.ts
-var PRESS_IDLE = { by: null };
-function stepPress(state, event, enabled) {
-  switch (event.type) {
-    case "down":
-      if (!enabled || 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: enabled };
-    case "cancel":
-      return { state: PRESS_IDLE, activated: false };
-    case "leave":
-      return state.by === "pointer" ? { state: PRESS_IDLE, activated: false } : { state, activated: false };
+// src/kit/adaptive/context.ts
+var INPUT_TOUCH = { primary: "coarse", anyCoarse: true, hover: false, keyboard: false };
+var INPUT_POINTER = { primary: "fine", anyCoarse: false, hover: true, keyboard: true };
+var INPUT_MIXED = { primary: "fine", anyCoarse: true, hover: true, keyboard: true };
+var INPUT_TABLET_KEYBOARD = { primary: "coarse", anyCoarse: true, hover: true, keyboard: true };
+var POSTURE_FLAT = { kind: "flat" };
+function adaptiveContext(partial) {
+  return {
+    window: partial.window,
+    input: partial.input ?? INPUT_POINTER,
+    posture: partial.posture ?? POSTURE_FLAT,
+    reduceMotion: partial.reduceMotion ?? false
+  };
+}
+function halfOpen(kind, window, options = {}) {
+  const band = Math.max(options.band ?? 0, 0);
+  const span = kind === "tabletop" ? window.height : window.width;
+  const at = options.at ?? span / 2;
+  const start = at - band / 2;
+  const bounds = kind === "tabletop" ? { x: 0, y: start, width: window.width, height: band } : { x: start, y: 0, width: band, height: window.height };
+  return { kind, fold: { bounds, occluding: options.occluding ?? band > 0 } };
+}
+function windowSegments(ctx) {
+  const { width, height } = ctx.window;
+  const whole = { x: 0, y: 0, width, height };
+  if (ctx.posture.kind === "flat") return [whole];
+  const { bounds, occluding } = ctx.posture.fold;
+  const tabletop = ctx.posture.kind === "tabletop";
+  const span = tabletop ? height : width;
+  const lo = Math.min(Math.max(tabletop ? bounds.y : bounds.x, 0), span);
+  const hi = Math.min(Math.max(lo + (tabletop ? bounds.height : bounds.width), lo), span);
+  const end = occluding ? lo : (lo + hi) / 2;
+  const start = occluding ? hi : (lo + hi) / 2;
+  const parts = tabletop ? [
+    { x: 0, y: 0, width, height: end },
+    { x: 0, y: start, width, height: height - start }
+  ] : [
+    { x: 0, y: 0, width: end, height },
+    { x: start, y: 0, width: width - start, height }
+  ];
+  const kept = parts.filter((r) => r.width > 0 && r.height > 0);
+  return kept.length ? kept : [whole];
+}
+function postureFromSegments(window, segments) {
+  if (segments.length !== 2) return POSTURE_FLAT;
+  const [a, b] = [...segments].sort((p, q) => p.x - q.x || p.y - q.y);
+  const gapX = b.x - (a.x + a.width);
+  if (gapX >= 0 && a.y < b.y + b.height && b.y < a.y + a.height) {
+    return { kind: "book", fold: { bounds: { x: a.x + a.width, y: 0, width: gapX, height: window.height }, occluding: gapX > 0 } };
+  }
+  const [top, bottom] = [...segments].sort((p, q) => p.y - q.y);
+  const gapY = bottom.y - (top.y + top.height);
+  if (gapY >= 0) {
+    return { kind: "tabletop", fold: { bounds: { x: 0, y: top.y + top.height, width: window.width, height: gapY }, occluding: gapY > 0 } };
   }
+  return POSTURE_FLAT;
 }
-
-// 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 };
+var area = (r) => r ? r.width * r.height : 0;
+function segmentOf(box, segments) {
+  const cx = box.x + box.width / 2;
+  const cy = box.y + box.height / 2;
+  const holding = segments.find((s) => cx >= s.x && cx < s.x + s.width && cy >= s.y && cy < s.y + s.height);
+  if (holding) return holding;
+  let best;
+  let most = 0;
+  for (const s of segments) {
+    const overlap = area(intersectRect(s, box));
+    if (overlap > most) {
+      most = overlap;
+      best = s;
     }
-    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
-      };
+  }
+  if (best) return best;
+  let nearest;
+  let distance = Number.POSITIVE_INFINITY;
+  for (const s of segments) {
+    const d = Math.hypot(s.x + s.width / 2 - cx, s.y + s.height / 2 - cy);
+    if (d < distance) {
+      distance = d;
+      nearest = s;
     }
-    case "disable":
-      return {
-        state: event.disabled ? { press: PRESS_IDLE, hovered: false, focused: false, disabled: true } : { ...state, disabled: false },
-        activated: false
-      };
   }
+  return nearest;
 }
-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 surfaceRegion(ctx, source) {
+  const segments = windowSegments(ctx);
+  if (source) return segmentOf(source, segments) ?? segments[0];
+  return segments.reduce((best, s) => area(s) > area(best) ? s : best, segments[0]);
 }
 function stepSpring(s, dt, response, damping, instant = false) {
   if (instant) {
@@ -190,8 +184,8 @@ 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.45;
-var INK_IN_END = 0.95;
+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);
@@ -272,9 +266,9 @@ var growthPhase = (state) => ({
   grow: state.grow.x
 });
 var DEFAULT_GROWTH_TIMING = {
-  shrinkOpen: 0.38,
-  shrinkClose: 0.3,
-  growOpen: 0.46,
+  shrinkOpen: 0.21,
+  shrinkClose: 0.14,
+  growOpen: 0.38,
   growClose: 0.4,
   growDampingOpen: 0.72
 };
@@ -311,42 +305,46 @@ function stepGrowth(state, dt, open, reduceMotion = false, timing = DEFAULT_GROW
   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;
+// src/kit/adaptive/form-morph.ts
+var HIDDEN = /* @__PURE__ */ new Set(["hidden", "closed", "none"]);
+function formMorph(change, ctx, options = {}) {
+  const instant = ctx.reduceMotion;
+  if (options.anchorGone) return { ...change, mode: "retract", staysOpen: false, instant };
+  if (change.from === change.to) return { ...change, mode: "none", staysOpen: true, instant };
+  const mode = HIDDEN.has(change.from) ? "appear" : HIDDEN.has(change.to) ? "disappear" : "reshape";
+  return { ...change, mode, staysOpen: mode !== "disappear", instant };
 }
-function visualAtomState(visual, state) {
+var FORM_MORPH_TIMING = { response: DEFAULT_GROWTH_TIMING.growOpen, damping: 1 };
+var createFormMorph = () => ({ t: { x: 0, v: 0, target: 0 }, fromInk: 1 });
+function stepFormMorph(state, dt, toward, instant = false) {
+  state.t.target = toward;
+  return stepSpring(state.t, dt, FORM_MORPH_TIMING.response, FORM_MORPH_TIMING.damping, instant);
+}
+var OUT_END = 0.45;
+var IN_START = 0.55;
+function formMorphFrame(from, to, state) {
+  const t = Math.min(Math.max(state.t.x, 0), 1);
+  const mix2 = (a, b) => a + (b - a) * t;
   return {
-    pressed: visual.pressed.x,
-    hovered: visual.hovered.x,
-    selected: 0,
-    disabled: state.disabled
+    box: {
+      x: mix2(from.x, to.x),
+      y: mix2(from.y, to.y),
+      width: mix2(from.width, to.width),
+      height: mix2(from.height, to.height),
+      radius: mix2(from.radius, to.radius)
+    },
+    ink: inkAt(state, t),
+    showing: t < 0.5 ? "from" : "to"
   };
 }
-function settleControlVisual(visual, state) {
-  stepControlVisual(visual, 0, state, true);
+function inkAt(state, t) {
+  return { outgoing: (state.fromInk ?? 1) * (1 - smoothstep(0, OUT_END, t)), incoming: smoothstep(IN_START, 1, t) };
 }
-
-// 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;
+function rebaseFormMorph(state) {
+  const t = Math.min(Math.max(state.t.x, 0), 1);
+  const ink = inkAt(state, t);
+  state.fromInk = t < 0.5 ? ink.outgoing : ink.incoming;
+  state.t = { x: 0, v: 0, target: 0 };
 }
 var CONTROL_SIZES = ["touch", "small", "medium", "large", "xlarge"];
 var MIN_TOUCH_TARGET_DP = 44;
@@ -376,6 +374,19 @@ 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 vireglass.concentricRadius(outerRadius, inset, minimum);
 }
@@ -389,45 +400,634 @@ function minTarget(input) {
   return input.touch ? MIN_TOUCH_TARGET_DP : MIN_POINTER_TARGET_DP;
 }
 
+// src/kit/adaptive/input.ts
+function sizeTier(input) {
+  return defaultSize({ touch: input.primary === "coarse" });
+}
+function hitTarget(input) {
+  return minTarget({ touch: input.anyCoarse });
+}
+function hoversWith(pointerType) {
+  return pointerType !== "touch";
+}
+
+// src/kit/adaptive/navigation.ts
+var BAR_SLOTS = 5;
+function formFor(ctx, spec) {
+  const { width, height } = classifyWindow(ctx.window);
+  if (ctx.posture.kind === "tabletop") return "bar";
+  if (widthAtLeast(width, "large")) return spec.sidebarCollapsed ? "rail" : "sidebar";
+  if (height === "compact") return "rail";
+  if (width === "compact") return "bar";
+  if (width === "medium" && (spec.panes ?? 1) > 1 && ctx.posture.kind !== "book") return "bar";
+  return "rail";
+}
+function navigationForm(ctx, spec) {
+  const form = formFor(ctx, spec);
+  const width = classifyWindow(ctx.window).width;
+  const large = widthAtLeast(width, "large");
+  const slots = BAR_SLOTS - (spec.search ? 1 : 0);
+  const primary = Math.max(0, Math.min(spec.primary, slots));
+  const secondary = Math.max(0, spec.secondary ?? 0) + Math.max(0, spec.primary - primary);
+  let search = null;
+  if (spec.search) {
+    const shortcut = large || ctx.input.keyboard;
+    if (large) search = { form: "field", place: form === "sidebar" ? "sidebar" : "toolbar", shortcut };
+    else search = form === "bar" ? { form: "button", place: "bar", shortcut } : { form: "item", place: "rail", shortcut };
+  }
+  return {
+    form,
+    edge: form === "bar" ? "bottom" : "leading",
+    primary,
+    secondary,
+    secondaryVisible: form === "sidebar",
+    search,
+    expandable: form !== "rail" ? null : large ? "beside" : width === "expanded" ? "over" : null,
+    collapsible: form === "sidebar"
+  };
+}
+function bottomAccessory(nav, state = {}) {
+  if (nav.form !== "bar") return { placement: "content-bottom", compact: false };
+  return state.barMinimized ? { placement: "in-bar", compact: true } : { placement: "above-bar", compact: false };
+}
+
+// src/kit/adaptive/panes.ts
+var LIST_PANE_WIDTH = { expanded: 360, large: 412 };
+var SUPPORTING_PANE_MAX_WIDTH = 400;
+function splitFor(ctx, sparse) {
+  const { width, height } = classifyWindow(ctx.window);
+  if (ctx.posture.kind === "book") return { kind: "fold", gap: ctx.posture.fold.bounds };
+  if (height === "compact") return null;
+  if (widthAtLeast(width, "large")) return { kind: "fixed", list: LIST_PANE_WIDTH.large };
+  if (width === "expanded") return { kind: "fixed", list: LIST_PANE_WIDTH.expanded };
+  return width === "medium" && sparse ? { kind: "half" } : null;
+}
+function paneLayout(ctx, state) {
+  const split = splitFor(ctx, state.sparse ?? false);
+  if (split) {
+    return { panes: 2, visible: ["list", "detail"], split, placeholder: !state.selected, back: false, selectionShown: state.selected };
+  }
+  const detail = state.selected && state.showing === "detail";
+  return { panes: 1, visible: [detail ? "detail" : "list"], split: null, placeholder: false, back: detail, selectionShown: false };
+}
+function supportingPane(ctx, state) {
+  const width = classifyWindow(ctx.window).width;
+  const base = { edge: "trailing", maxWidth: SUPPORTING_PANE_MAX_WIDTH, remembered: state.pinned };
+  if (widthAtLeast(width, "large")) return { ...base, form: state.pinned || state.open ? "beside" : "hidden", scrim: false };
+  if (width === "expanded" && state.open) return { ...base, form: "over", scrim: true };
+  return { ...base, form: "hidden", scrim: false };
+}
+function postureSplit(ctx) {
+  if (ctx.posture.kind === "flat") return { kind: "single" };
+  const segments = windowSegments(ctx);
+  if (segments.length < 2) return { kind: "single" };
+  return { kind: "split", axis: ctx.posture.kind === "tabletop" ? "horizontal" : "vertical", primary: segments[0], secondary: segments[1] };
+}
+
+// src/kit/adaptive/presentation.ts
+var SURFACE_KINDS = ["menu", "picker", "popover", "sheet", "modal-sheet", "alert", "dialog"];
+var BOTTOM_SHEET_MAX_WIDTH = 640;
+var SIDE_SHEET_MAX_WIDTH = 400;
+var DIALOG_MAX_WIDTH = 560;
+function baseForm(kind, ctx) {
+  const { width, height } = classifyWindow(ctx.window);
+  const compactWidth = width === "compact";
+  const plain = { fromSource: false, scrim: false, compresses: false, maxWidth: null };
+  const sheet = (form) => height === "compact" ? { ...plain, form: "full-screen", scrim: true } : form;
+  switch (kind) {
+    case "menu":
+      return { ...plain, form: "grown", fromSource: true };
+    case "popover":
+      return compactWidth ? sheet({ ...plain, form: "bottom-sheet", fromSource: true, scrim: true }) : { ...plain, form: "popover", fromSource: true };
+    case "picker":
+    case "modal-sheet":
+      return sheet(
+        compactWidth ? { ...plain, form: "bottom-sheet", scrim: true } : { ...plain, form: "centered-sheet", scrim: true, maxWidth: DIALOG_MAX_WIDTH }
+      );
+    case "sheet":
+      if (width === "xlarge") return { ...plain, form: "side-pane", compresses: true, maxWidth: SIDE_SHEET_MAX_WIDTH };
+      if (widthAtLeast(width, "expanded")) return { ...plain, form: "side-sheet", compresses: true, maxWidth: SIDE_SHEET_MAX_WIDTH };
+      return sheet({ ...plain, form: "bottom-sheet", maxWidth: compactWidth ? null : BOTTOM_SHEET_MAX_WIDTH });
+    case "alert":
+      return { ...plain, form: "alert", scrim: true, maxWidth: DIALOG_MAX_WIDTH };
+    case "dialog":
+      return compactWidth ? { ...plain, form: "full-screen", scrim: true } : { ...plain, form: "basic-dialog", scrim: true, maxWidth: DIALOG_MAX_WIDTH };
+  }
+}
+function presentationForm(kind, ctx, source) {
+  const base = baseForm(kind, ctx);
+  const side = base.form === "side-sheet" || base.form === "side-pane";
+  const region = side && ctx.posture.kind === "book" ? windowSegments(ctx).at(-1) : surfaceRegion(ctx, source);
+  return { ...base, region };
+}
+
+// src/kit/adaptive/toolbar.ts
+var TOOLBAR_GAP = 8;
+var MORE_ID = "\u2026";
+function toolbarPlacement(ctx) {
+  const { width, height } = classifyWindow(ctx.window);
+  if (height === "compact") {
+    return { edge: "trailing", orientation: "vertical", maxGroups: Number.POSITIVE_INFINITY };
+  }
+  if (width === "compact") return { edge: "bottom", orientation: "horizontal", maxGroups: 3 };
+  return { edge: "top", orientation: "horizontal", maxGroups: Number.POSITIVE_INFINITY };
+}
+function toolbarLayout(items, options) {
+  const orientation = options.orientation ?? "horizontal";
+  const gap = options.gap ?? TOOLBAR_GAP;
+  const maxGroups = options.maxGroups ?? Number.POSITIVE_INFINITY;
+  const side = BUTTON_SIZES[options.tier].height;
+  const vertical = orientation === "vertical";
+  const aside = vertical ? items.filter((i) => i.kind === "text").map((i) => i.id) : [];
+  const pool = items.map((item, index) => ({ item, index })).filter((e) => !vertical || e.item.kind === "icon");
+  const extentOf = (item) => item.kind === "icon" ? side : item.width ?? 3 * side;
+  const lay = (visible2, merge, more) => {
+    const ordered = [...visible2.filter((e) => !e.item.primary)];
+    const capsules = [];
+    let open = null;
+    const close = () => {
+      if (open) capsules.push({ kind: open.kind, items: open.items, extent: open.extent });
+      open = null;
+    };
+    for (const { item } of ordered) {
+      const kind = item.kind;
+      const group = item.group ?? `kind:${kind}`;
+      if (merge && open && open.kind === kind && open.group === group) {
+        open.items.push(item.id);
+        open.extent += extentOf(item);
+      } else {
+        close();
+        open = { kind, group, items: [item.id], extent: extentOf(item) };
+      }
+    }
+    close();
+    if (more) capsules.push({ kind: "more", items: [MORE_ID], extent: side });
+    for (const { item } of visible2) if (item.primary) capsules.push({ kind: "primary", items: [item.id], extent: extentOf(item) });
+    const extent = capsules.reduce((sum, c) => sum + c.extent, 0) + gap * Math.max(capsules.length - 1, 0);
+    return { capsules, extent, fits: extent <= options.available && capsules.length <= maxGroups };
+  };
+  const done = (stage, laid2, overflow) => ({
+    orientation,
+    stage,
+    capsules: laid2.capsules,
+    overflow,
+    aside,
+    extent: laid2.extent,
+    fits: laid2.fits
+  });
+  const separate = lay(pool, false, false);
+  if (separate.fits) return done("separate", separate, []);
+  const merged = lay(pool, true, false);
+  if (merged.fits) return done("merged", merged, []);
+  const candidates = pool.filter((e) => !e.item.badge && !e.item.primary).sort((a, b) => (a.item.priority ?? 0) - (b.item.priority ?? 0) || b.index - a.index);
+  let visible = pool;
+  const hidden = [];
+  let laid = merged;
+  for (const candidate of candidates) {
+    visible = visible.filter((e) => e !== candidate);
+    hidden.push(candidate);
+    laid = lay(visible, true, true);
+    if (laid.fits) break;
+  }
+  if (!hidden.length) return done("merged", merged, []);
+  return done("overflow", laid, hidden.sort((a, b) => a.index - b.index).map((e) => e.item.id));
+}
+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 = vireglass.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 = vireglass.applyAccessibility(vireglass.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
+  };
+}
+
+// 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, region) {
+  const x0 = region.x ?? 0;
+  const y0 = region.y ?? 0;
+  return {
+    x: trigger.x + trigger.width / 2 <= x0 + region.width / 2 ? -1 : 1,
+    y: trigger.y + trigger.height / 2 <= y0 + region.height / 2 ? -1 : 1
+  };
+}
+function along(start, length, size, side) {
+  return side < 0 ? start : start + length - size;
+}
+function fits(at, size, lo, hi, margin) {
+  return at >= lo + margin && at + size <= hi - margin;
+}
+var clamp = (v, lo, hi) => Math.min(Math.max(v, lo), Math.max(lo, hi));
+function menuPlacement(trigger, menu, region, options = {}) {
+  const margin = options.margin ?? 8;
+  const x0 = region.x ?? 0;
+  const y0 = region.y ?? 0;
+  const x1 = x0 + region.width;
+  const y1 = y0 + region.height;
+  const width = Math.max(0, Math.min(menu.width, region.width - 2 * margin));
+  const height = Math.max(0, Math.min(menu.height, region.height - 2 * margin));
+  const corner = { ...options.corner ?? menuCorner(trigger, region) };
+  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, x0, x1, margin) && fits(fx, width, x0, x1, 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, y0, y1, margin) && fits(fy, height, y0, y1, margin)) {
+      corner.y = corner.y === -1 ? 1 : -1;
+      y = fy;
+    }
+  }
+  x = clamp(x, x0 + margin, x1 - margin - width);
+  y = clamp(y, y0 + margin, y1 - 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, bounds) {
+  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;
+  let box = {
+    x: c.x - geometry.width / 2,
+    y: c.y - geometry.height / 2,
+    width: geometry.width,
+    height: geometry.height,
+    radius: geometry.cornerRadius
+  };
+  let morph = frame.merge;
+  const held = bounds ? intersectRect(box, bounds) : null;
+  if (held && (held.width < box.width || held.height < box.height)) {
+    const was = center(box);
+    const now = center(held);
+    box = { ...held, radius: Math.min(box.radius, held.width / 2, held.height / 2) };
+    if (morph) morph = { ...morph, offsetX: morph.offsetX + was.x - now.x, offsetY: morph.offsetY + was.y - now.y };
+  }
+  return {
+    box,
+    morph,
+    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.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;
+}
+
 exports.A11Y_NONE = A11Y_NONE;
 exports.ATOM_AT_REST = ATOM_AT_REST;
+exports.BAR_SLOTS = BAR_SLOTS;
+exports.BOTTOM_SHEET_MAX_WIDTH = BOTTOM_SHEET_MAX_WIDTH;
 exports.BUTTON_SIZES = BUTTON_SIZES;
 exports.CONTROL_IDLE = CONTROL_IDLE;
 exports.CONTROL_SIZES = CONTROL_SIZES;
 exports.DEFAULT_GROWTH_TIMING = DEFAULT_GROWTH_TIMING;
+exports.DIALOG_MAX_WIDTH = DIALOG_MAX_WIDTH;
+exports.FORM_MORPH_TIMING = FORM_MORPH_TIMING;
+exports.HEIGHT_BREAKPOINTS = HEIGHT_BREAKPOINTS;
+exports.HEIGHT_CLASSES = HEIGHT_CLASSES;
+exports.INPUT_MIXED = INPUT_MIXED;
+exports.INPUT_POINTER = INPUT_POINTER;
+exports.INPUT_TABLET_KEYBOARD = INPUT_TABLET_KEYBOARD;
+exports.INPUT_TOUCH = INPUT_TOUCH;
+exports.LIST_PANE_WIDTH = LIST_PANE_WIDTH;
+exports.MENU_CLOSED = MENU_CLOSED;
+exports.MENU_CORNERS = MENU_CORNERS;
+exports.MENU_DROP_BODY = MENU_DROP_BODY;
+exports.MENU_ITEM_FILL = MENU_ITEM_FILL;
 exports.MIN_POINTER_TARGET_DP = MIN_POINTER_TARGET_DP;
 exports.MIN_TOUCH_TARGET_DP = MIN_TOUCH_TARGET_DP;
+exports.MORE_ID = MORE_ID;
 exports.POINTER_INPUT = POINTER_INPUT;
+exports.POSTURE_FLAT = POSTURE_FLAT;
 exports.PRESS_IDLE = PRESS_IDLE;
+exports.SIDE_SHEET_MAX_WIDTH = SIDE_SHEET_MAX_WIDTH;
+exports.SUPPORTING_PANE_MAX_WIDTH = SUPPORTING_PANE_MAX_WIDTH;
+exports.SURFACE_KINDS = SURFACE_KINDS;
+exports.TOOLBAR_GAP = TOOLBAR_GAP;
 exports.TOUCH_INPUT = TOUCH_INPUT;
+exports.TYPEAHEAD_SECONDS = TYPEAHEAD_SECONDS;
+exports.WIDTH_BREAKPOINTS = WIDTH_BREAKPOINTS;
+exports.WIDTH_CLASSES = WIDTH_CLASSES;
+exports.adaptiveContext = adaptiveContext;
 exports.atomAtRest = atomAtRest;
 exports.atomBody = atomBody;
 exports.atomLift = atomLift;
 exports.atomMaterial = atomMaterial;
+exports.bottomAccessory = bottomAccessory;
+exports.classifyWindow = classifyWindow;
 exports.controlTargets = controlTargets;
 exports.createControlVisual = createControlVisual;
+exports.createFormMorph = createFormMorph;
 exports.createGrowthState = createGrowthState;
 exports.defaultSize = defaultSize;
+exports.formMorph = formMorph;
+exports.formMorphFrame = formMorphFrame;
 exports.growthFrame = growthFrame;
 exports.growthInk = growthInk;
 exports.growthPhase = growthPhase;
+exports.halfOpen = halfOpen;
+exports.heightClass = heightClass;
 exports.hitSlop = hitSlop;
+exports.hitTarget = hitTarget;
+exports.hoversWith = hoversWith;
 exports.iconButtonSize = iconButtonSize;
+exports.intersectRect = intersectRect;
+exports.menuActivity = menuActivity;
+exports.menuBody = menuBody;
+exports.menuCorner = menuCorner;
+exports.menuGlass = menuGlass;
+exports.menuItemFill = menuItemFill;
+exports.menuMaterial = menuMaterial;
+exports.menuPlacement = menuPlacement;
+exports.menuSize = menuSize;
+exports.menuSurfaceFrame = menuSurfaceFrame;
 exports.minTarget = minTarget;
+exports.navigationForm = navigationForm;
 exports.nestedRadius = nestedRadius;
+exports.paneLayout = paneLayout;
+exports.postureFromSegments = postureFromSegments;
+exports.postureSplit = postureSplit;
 exports.presentationFor = presentationFor;
+exports.presentationForm = presentationForm;
 exports.pressResponse = pressResponse;
+exports.rebaseFormMorph = rebaseFormMorph;
+exports.rectContains = rectContains;
 exports.resolveA11y = resolveA11y;
 exports.sameA11y = sameA11y;
+exports.segmentOf = segmentOf;
 exports.settleControlVisual = settleControlVisual;
+exports.sizeTier = sizeTier;
 exports.smoothstep = smoothstep;
 exports.stepControl = stepControl;
 exports.stepControlVisual = stepControlVisual;
 exports.stepFocus = stepFocus;
+exports.stepFormMorph = stepFormMorph;
 exports.stepGrowth = stepGrowth;
 exports.stepHover = stepHover;
+exports.stepMenu = stepMenu;
 exports.stepPress = stepPress;
 exports.stepSpring = stepSpring;
+exports.supportingPane = supportingPane;
+exports.surfaceRegion = surfaceRegion;
+exports.toolbarLayout = toolbarLayout;
+exports.toolbarPlacement = toolbarPlacement;
 exports.visualAtomState = visualAtomState;
+exports.widthAtLeast = widthAtLeast;
+exports.widthClass = widthClass;
+exports.windowSegments = windowSegments;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map