vireuikit 0.7.0 → 0.8.0

package/README.md

@@ -51,10 +51,55 @@ import { MENU_CLOSED, menuPlacement, menuSurfaceFrame, stepMenu } from 'vireuiki
 
 const step = stepMenu(MENU_CLOSED, { type: 'open', focus: 'first' }, items); // items: { label, disabled, focusable? }[]
 // step.focus says where focus goes; a choice always closes the menu.
-const { rect, anchor } = menuPlacement(triggerRect, menuSize, viewport);
+const { rect, anchor } = menuPlacement(triggerRect, menuSize, segment); // the trigger's segment of the window, or the viewport
 const surface = menuSurfaceFrame(triggerBox, { ...rect, radius }, anchor, growthPhase(state));
 ```
 
+## Adaptive model
+
+What every atom and pattern becomes across window classes, input and posture is one pure model, so every target
+decides the same way. The context is the window in dp, the input in three layers (the primary pointer, any coarse
+input, hover, a keyboard), the posture of a folding screen and reduced motion; the functions turn it into forms.
+
+```ts
+import { adaptiveContext, halfOpen, INPUT_MIXED, navigationForm, paneLayout, presentationForm } from 'vireuikit';
+
+const window = { width: 673, height: 841 };
+const ctx = adaptiveContext({ window, input: INPUT_MIXED, posture: halfOpen('book', window) });
+
+navigationForm(ctx, { primary: 4, secondary: 2, search: true }).form; // 'rail'
+paneLayout(ctx, { selected: true, showing: 'detail' }).split; // { kind: 'fold', gap }: the panes split at the fold
+presentationForm('sheet', ctx).form; // 'bottom-sheet'; a side sheet from 840 dp
+```
+
+- `classifyWindow` holds every threshold: widths 600, 840, 1200 and 1600 dp, heights 480 and 900.
+- `navigationForm`: a bar on a compact width and in tabletop, a rail on medium, expanded and a compact height, a
+  sidebar from large; the same primary destinations on every form, at most five bar slots with search, no "More".
+  `bottomAccessory` places a strip above the bar, in its row or along the content.
+- `presentationForm` for a menu, picker, popover, sheet, modal sheet, alert or dialog: a popover is a sheet grown from
+  its source below 600, a supplementary sheet is a bottom sheet below 840 and a side sheet from there, sheets fill
+  the window on a compact height, and every surface lives in one segment, never across the fold.
+- `paneLayout` (list-detail: one pane below 840, a 360 or 412 dp list beside the detail, split at the fold in book
+  posture), `supportingPane` (beside the content from large, over it on expanded, remembered), `postureSplit`.
+- `toolbarLayout` fits a toolbar into its container: neighbours merge, then the lowest priority goes into "…";
+  badged items and the main action stay. `toolbarPlacement` says where the window puts it.
+- `sizeTier` follows the primary pointer and `hitTarget` any coarse input, so a laptop with a touch screen gets the
+  pointer tier with a 44 dp hit area.
+- `formMorph`, `stepFormMorph` and `formMorphFrame` flow one body into its new form on the growth's springs; turned
+  back mid-way it runs back from where it is, and under reduced motion it lands in one frame.
+
+On the web the elements collect their part of the context themselves. A shell that lays itself out from the model
+watches its root:
+
+```ts
+import { setInputOverride, setViewportOverride, watchAdaptiveContext } from 'vireuikit/web';
+
+const stop = watchAdaptiveContext(shell, (ctx) => render(ctx)); // told now and on every change
+```
+
+`setInputOverride` lets a host that knows its input better decide the layers, and `setViewportOverride` makes an
+element the window, with its own segments; the lab's adaptive stage simulates devices with both.
+
 ## Web elements
 
 `vireuikit/web` upgrades native controls with custom elements. The control inside works before the
@@ -78,9 +123,10 @@ setA11yOverride({ reduceTransparency: true });
 - `<vire-icon-button>` lifts into the glass under the finger; the lens response is visible while the
   press is held.
 - Attributes: `glass` (empty or `present`: a lens at rest; `touch`: a lens only under the finger; absent: no
-  glass), `size` (`touch`, `small`, `medium`, `large`, `xlarge`; by default `touch` on a coarse pointer and
-  `medium` otherwise), `disabled`.
-- On a coarse pointer every size keeps a hit area of at least 44 dp without changing layout.
+  glass), `size` (`touch`, `small`, `medium`, `large`, `xlarge`; by default `touch` when the primary pointer is
+  coarse and `medium` otherwise), `disabled`.
+- Wherever a coarse input is present, a touch screen on a laptop too, every size keeps a hit area of at least 44 dp
+  without changing layout. Hover comes from the pointer that entered: a mouse on a tablet hovers, a finger never does.
 - The lens reads the backdrop from declared colours and cannot see an image, a video or a canvas. A host that knows
   what lies under the control sets the element's `sample` (a `BackdropSample` from `vireglass`), at any time; `null`
   hands it back to the probe.
@@ -145,7 +191,8 @@ setA11yOverride({ reduceTransparency: true });
   `<vire-icon-button>`), so there is never glass on glass.
 - Attributes: `glass` (empty, `present` or `touch`: the surface is a lens; absent or anything else: an opaque surface), `size` (as for the buttons; rows are as tall
   as the tier), `corner` (`top-left`, `top-right`, `bottom-left`, `bottom-right`: the trigger corner the menu pins to;
-  by default the one facing the nearest viewport corner). `sample` works as on the buttons; without one, the backdrop
+  by default the one facing the nearest corner of the trigger's segment of the window). On a folding screen the menu
+  stays in its trigger's half, every frame of its growth included, and scrolls if it is taller. `sample` works as on the buttons; without one, the backdrop
   under the menu is read once as it opens and held while it is out.
 
 Sizes, behaviour state machines and accessibility modes are exported from `vireuikit` and shared by every

package/dist/{chunk-AR2AM3BR.js → chunk-VY5MD3CX.js}

@@ -1,4 +1,4 @@
-import { activeMaterial, applyAccessibility, resolveOptics, halfMinDp, VIREGLASS_SHEET_MATERIAL, concentricRadius } from 'vireglass';
+import { halfMinDp, concentricRadius, activeMaterial, applyAccessibility, resolveOptics, VIREGLASS_SHEET_MATERIAL } from 'vireglass';
 
 // src/kit/a11y.ts
 var A11Y_NONE = {
@@ -25,135 +25,107 @@ 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 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/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, 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/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
+  };
 }
-
-// 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 };
+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;
+}
+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 "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) {
@@ -308,6 +280,200 @@ function stepGrowth(state, dt, open, reduceMotion = false, timing = DEFAULT_GROW
   );
   return movedShrink || movedGrow;
 }
+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;
+}
+
+// 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";
+}
+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
+  };
+}
 
 // src/kit/behavior/visual.ts
 var createControlVisual = () => ({
@@ -401,40 +567,46 @@ var MENU_CORNERS = {
   "bottom-left": { x: -1, y: 1 },
   "bottom-right": { x: 1, y: 1 }
 };
-function menuCorner(trigger, viewport) {
+function menuCorner(trigger, region) {
+  const x0 = region.x ?? 0;
+  const y0 = region.y ?? 0;
   return {
-    x: trigger.x + trigger.width / 2 <= viewport.width / 2 ? -1 : 1,
-    y: trigger.y + trigger.height / 2 <= viewport.height / 2 ? -1 : 1
+    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, limit, margin) {
-  return at >= margin && at + size <= limit - margin;
+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, viewport, options = {}) {
+function menuPlacement(trigger, menu, region, 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) };
+  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, viewport.width, margin) && fits(fx, width, viewport.width, margin)) {
+    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, viewport.height, margin) && fits(fy, height, viewport.height, margin)) {
+    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, margin, viewport.width - margin - width);
-  y = clamp(y, margin, viewport.height - margin - height);
+  x = clamp(x, x0 + margin, x1 - margin - width);
+  y = clamp(y, y0 + margin, y1 - margin - height);
   const rect = { x, y, width, height };
   return {
     rect,
@@ -448,7 +620,7 @@ function menuActivity(phase) {
   const grow = Math.min(Math.max(phase.grow, 0), 1);
   return shrink * (1 - grow);
 }
-function menuSurfaceFrame(trigger, menu, anchor, phase) {
+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) },
@@ -456,16 +628,24 @@ function menuSurfaceFrame(trigger, menu, anchor, phase) {
     phase
   );
   const { geometry, center: c } = frame.body;
-  const box = {
+  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: frame.merge,
+    morph,
     content: { x: menu.x - box.x, y: menu.y - box.y },
     ink: frame.ink,
     activity: menuActivity(phase)
@@ -498,60 +678,7 @@ 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
+export { A11Y_NONE, ATOM_AT_REST, BUTTON_SIZES, CONTROL_IDLE, CONTROL_SIZES, DEFAULT_GROWTH_TIMING, INPUT_MIXED, INPUT_POINTER, INPUT_TABLET_KEYBOARD, INPUT_TOUCH, MENU_CLOSED, MENU_CORNERS, MENU_DROP_BODY, MENU_ITEM_FILL, MIN_POINTER_TARGET_DP, MIN_TOUCH_TARGET_DP, POINTER_INPUT, POSTURE_FLAT, PRESS_IDLE, TOUCH_INPUT, TYPEAHEAD_SECONDS, adaptiveContext, atomAtRest, atomBody, atomLift, atomMaterial, controlTargets, createControlVisual, createGrowthState, defaultSize, growthFrame, growthInk, growthPhase, halfOpen, hitSlop, hitTarget, hoversWith, iconButtonSize, intersectRect, menuActivity, menuBody, menuCorner, menuGlass, menuItemFill, menuMaterial, menuPlacement, menuSize, menuSurfaceFrame, minTarget, nestedRadius, postureFromSegments, presentationFor, pressResponse, rectContains, resolveA11y, sameA11y, segmentOf, settleControlVisual, sizeTier, smoothstep, stepControl, stepControlVisual, stepFocus, stepGrowth, stepHover, stepMenu, stepPress, stepSpring, surfaceRegion, visualAtomState, windowSegments };
+//# sourceMappingURL=chunk-VY5MD3CX.js.map
+//# sourceMappingURL=chunk-VY5MD3CX.js.map