trykeyline 0.0.0-stage → 0.1.1

package/plugins/keyline/skills/keyline/glass/layout/guide.md

@@ -0,0 +1,259 @@
+# Glass Layout
+
+> **Glass preset.** This is the layout system running on [modimihir.com](https://modimihir.com), with its real values, meant to be copied whole. Read it beside `domains/layout/guide.md`, which holds the laws; this guide holds glass's values, recipes and decisions for them, and says where glass differs. Under any other preset, `domains/layout/guide.md` leads and this guide is only a worked example.
+
+For mostly-text interfaces, where layout should get out of the way. One decision drives the rest: **a single 640px reading measure on every page**, so moving between pages never moves the text.
+
+## 1. One measure
+
+```css
+.col {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 0 32px;
+}
+```
+
+At most 576px of text, about 90 characters a line (85–95) at the 14px prose size: past comfortable on purpose, with prose leading opened to match. **Every page uses the class** (layout law 1).
+
+- **Non-text content may leave the column**: a masonry image wall has no reading measure, so it goes full-bleed.
+- **An article's cover image stays in it.** Bled wide, it becomes a banner *above* the article, not part of it.
+- **Dividers are column width** (layout law 1).
+
+## 2. Rails live outside the column, anchored to a wider frame
+
+```tsx
+<div className="relative mx-auto max-w-[1280px]">
+  {/* Absolute, so it sits outside the reading column entirely */}
+  <div className="absolute inset-y-0 left-8 hidden w-[196px] xl:block">
+    <div className="sticky top-28 max-h-[calc(100dvh-11rem)] overflow-y-auto">
+      <SectionNav … />
+    </div>
+  </div>
+
+  <div className="col">{/* the reading column, untouched */}</div>
+</div>
+```
+
+Rail and column share one centred 1280px frame, so their gap holds from 1280px up (layout law 4, which explains the absolute wrapper, the sticky child and the `dvh` cap). **`xl:block`**: below 1280px there's no margin, and the rail becomes a disclosure above the text (§6).
+
+## 3. Spacing groups; asymmetry is the mechanism
+
+```
+mt-10  (40px)   ← heading
+mb-3   (12px)
+                ← the paragraph it introduces
+```
+
+~3.3:1 above to below makes them one unit (layout law 2). It holds at every scale:
+
+| Relationship | Inner | Outer | Ratio |
+|---|---|---|---|
+| Heading → its paragraph | 12px below | 40px above | 3.3:1 |
+| List items → the next block | 8px between | 24px below | 3:1 |
+| Bio paragraphs → the links after | 16px between | 32px after last | 2:1 |
+| Section heading → its content | 16–32px | 36px+ between sections | ~2:1 |
+
+**Home sections** use `py-9` (36px each side), symmetric, since they're peers. Long pages use `mt-16 border-t pt-10` (64px, hairline, 40px): the rule marks a real change of subject.
+
+**Glass's divider** (layout law 3): the home page rules off its three substantial sections — Work, Experience, Life — and lets the two that read as a coda to Life, Watching and Socials, follow on without a rule.
+
+→ The full spacing scale and where each value is used: `glass/layout/measure-and-rhythm.md`
+
+## 4. The radius ladder nests
+
+```
+rounded-full     pills, tags, dots
+rounded-md    6  tooltips
+rounded-[9px] 9  small cards in a stack
+rounded-[10px]10 an avatar inside a button
+rounded-xl   12  cards, hover panels, disclosures
+rounded-[12px]12 icon buttons, highlight bars
+rounded-2xl  16  the outer container (a dock, a sheet)
+```
+
+Each nesting is derived by layout law 5; the dock and the sheet are worked through in `glass/layout/radius-and-elevation.md`.
+
+```css
+* , *::before, *::after {
+  corner-shape: superellipse(1.5);
+}
+```
+
+Glass sets the corner shape on everything, pseudo-elements included, with no exception for pills and circles.
+
+## 5. Hairlines: 0.5px vs 1px
+
+| Weight | For |
+|---|---|
+| `0.5px` | Chrome borders, dividers, glass edges |
+| `1px` | Card borders, rings, disclosure outlines |
+| `2px` | Focus rings, an imported Markdown quote's rule |
+| `3px` | The pull-quote bar: a rounded flex child, not a border |
+| `1px` (`h-px`) | Table-of-contents markers |
+
+Weight follows the job (layout law 6): dividing icon groups inside one dock, 0.5px; defining a card's edge, 1px. On translucent surfaces the edge is the **alpha ramp** (`border-gray-alpha-400`; see `glass/color/guide.md`).
+
+## 6. Two presentations, not one responsive layout
+
+Where pointer and touch interact differently, glass ships **two components** (layout law 8):
+
+```tsx
+<nav aria-label="Primary" className="pointer-events-none fixed inset-x-0 bottom-5 z-50 flex justify-center">
+  <MobileDock />   {/* sm:hidden — avatar + a menu button opening a sheet */}
+  <DesktopDock />  {/* hidden sm:block — hover-revealed icons, sliding highlight */}
+</nav>
+```
+
+The desktop dock reveals pages and settings **on hover**, collapsing on scroll; touch fires none of it. `SectionNav` (a sticky rail) and `SectionNavCompact` (a `<details>` disclosure) likewise render one tree through a shared `Rows`.
+
+### The same fork, chosen by the reader
+
+Galleries offer a masonry **wall** (everything at once) or a **roll** (one photograph above a filmstrip), picked from a small dock: same data, same route. The state lives in a module both sides subscribe to, as with theme or sound:
+
+```ts
+let current: GalleryLayout = "grid";
+export function setGalleryLayout(layout: GalleryLayout) {
+  current = layout;
+  for (const fn of listeners) fn(layout);
+}
+```
+
+**The gallery layout doesn't persist** (layout law 9). The theme persists forever; the gallery layout lives in module memory and resets to the wall as each collection mounts. *The wall shows the whole collection, what you want on arrival; the roll is somewhere you go on purpose, and neither a previous visit nor the other gallery should decide it for you.* The switch opens on the photograph nearest the viewport's centre (`glass/motion/shared-element.md`), and each tile declares its own aspect ratio so one image travels between layouts undistorted.
+
+→ Both docks, the table of contents, the gallery, the touch audit and the breakpoints in use: `glass/layout/adaptive-presentations.md`
+
+## 7. Content gating: no empty states
+
+One flag, three places (layout law 10):
+
+```ts
+// content/index.ts — one derivation, everything else reads it.
+export const has = { writing: posts.length > 0, /* … */ };
+
+export const sectionHasContent = { /* home-page sections */ };
+/** Route path → whether it should exist. Unlisted paths always exist. */
+export const routeEnabled: Record<string, boolean> = { "/writing": has.writing, /* … */ };
+```
+
+```ts
+const PAGES = [
+  has.experience && { to: "/experience", … },
+  has.playground && { to: "/playground", … },
+  has.writing    && { to: "/writing", … },
+].filter(Boolean);
+```
+
+An empty collection loses its **nav icon**, **route** and **home-page entry** from one flag. On the file-based router the gate is in the page, and a catch-all sends the rest, old links included, somewhere real:
+
+```tsx
+// app/writing/page.tsx
+export default function Page() {
+  if (!has.writing) redirect("/");
+  return <Writing />;
+}
+
+// app/[...rest]/page.tsx — anything that isn't a real route lands somewhere real.
+export default function CatchAll() {
+  redirect("/");
+}
+```
+
+**`routeEnabled` outlived the client router**: the sitemap, metadata and nav still read it. Sections drop out *before* dividers are placed:
+
+```tsx
+const shown = site.sections.filter((name) => SECTIONS[name] && sectionHasContent[name]);
+```
+
+```tsx
+// One or two folders stay folder-sized and centred rather than stretching
+// across a three-up grid. (640px column − gaps) ÷ 3 ≈ 200px each.
+const COLS  = ["", "grid-cols-1", "grid-cols-2", "grid-cols-3"];
+const WIDTH = ["", "max-w-[200px]", "max-w-[420px]", ""];
+```
+
+Asked to shrink the folders by a quarter, shrink them and keep three to a row (layout law 8).
+
+## 8. The z-index ladder
+
+| z | Layer |
+|---|---|
+| 100 | Skip link — must beat everything |
+| 60 | A once-a-session overlay — over the dock, under the skip link |
+| 50 | Fixed navigation |
+| 40 | Tap-outside catcher — under the nav, over the page |
+| 30 | A pocket front, over its own contents |
+| 20 | Hover cards, dropdowns |
+| 10 | A hovered item lifting above its siblings |
+| −10 | A sliding highlight, behind content inside `isolate` |
+
+Ordered by permanence (layout law 7). The gaps paid off: a later greeting overlay took 60 without renumbering, covering the dock — or it wouldn't cover the page — but never the skip link, so keyboard users can tab past a two-second greeting. The pocket front at 30 is glass's own rung.
+
+The nav strip spans the viewport for centring, so it passes clicks through:
+
+```tsx
+<nav className="pointer-events-none fixed inset-x-0 bottom-5 z-50 flex justify-center">
+  <div className="pointer-events-auto">{/* the dock */}</div>
+</nav>
+```
+
+The strip carries **no transform**, which would trap the mobile sheet's full-bleed overlay inside it (layout law 7).
+
+→ The radius nestings, hairline classes and stacking-context code: `glass/layout/radius-and-elevation.md`
+
+## 9. Structural accessibility
+
+Layout law 12, in glass's markup:
+
+```tsx
+<a href="#main" className="skip">Skip to content</a>
+```
+
+- **`<nav>` labels**: "Primary", "On this page".
+- **Heading levels**: `h1` page, `h2` sections, `h3` sub-sections, `h4` cards; two elements at 14px/500 can be `h3` and `h4`.
+- **Menu triggers** carry `aria-haspopup` beside `aria-expanded` and `aria-controls`.
+
+### A disclosure should hide its content, not remove it
+
+Where a custom animation rules out `<details>`, glass collapses height to zero (layout law 11):
+
+```tsx
+<motion.div
+  initial={false}
+  animate={{ height: open ? "auto" : 0 }}
+  inert={!open}
+  aria-hidden={!open}
+  className="overflow-hidden"
+>
+```
+
+The content stays in the served HTML, for crawlers, `llms.txt` and find-in-page.
+
+```css
+@media print {
+  nav, footer, .skip { display: none; }
+  .reveal { opacity: 1; transform: none; }
+  a { color: inherit; text-decoration: none; }
+}
+```
+
+## Assets
+
+- `glass/layout/assets/layout-tokens.css` — column, spacing, radius ladder, continuous corners, hairlines, skip link, print.
+- `glass/layout/assets/SectionNav.tsx` — two presentations of one tree, with shared row rendering.
+
+## Checklist
+
+The domain checklist applies in full; these are glass's values for it.
+
+- [ ] `.col` — 640px, 32px padding — on every page; article covers stay in it.
+- [ ] Rails in the 1280px frame: `left-8`, `w-[196px]`, `sticky top-28`, `max-h-[calc(100dvh-11rem)]`, shown from `xl`.
+- [ ] Prose headings `mt-10` / `mb-3`; home sections `py-9`; long pages `mt-16 border-t pt-10`, the first `mt-14`.
+- [ ] Rules between Work, Experience and Life only; Watching and Socials follow on.
+- [ ] Radii from the ladder: 6 / 9 / 10 / 12 / 16px and full; `superellipse(1.5)` on everything.
+- [ ] 0.5px chrome, 1px object edges, 2px focus rings, the pull quote's 3px rounded bar; `gray-alpha` on translucent surfaces.
+- [ ] `MobileDock` / `DesktopDock` and `SectionNav` / `SectionNavCompact`, sharing data and rows.
+- [ ] The gallery opens on the wall; its layout lives in module memory.
+- [ ] `pb-28` under the dock on every page that can end near the viewport bottom.
+- [ ] z-index on the ladder: 100 / 60 / 50 / 40 / 30 / 20 / 10 / −10.
+- [ ] Dynamic Tailwind classes written as literal strings.

package/plugins/keyline/skills/keyline/glass/layout/measure-and-rhythm.md

@@ -0,0 +1,134 @@
+# Measure and rhythm
+
+Glass's values for layout laws 1–3; the derivations and reasons every preset shares are in `domains/layout/measure-and-rhythm.md`.
+
+## The measure
+
+`.col` (§1 of the guide) is 640px outer with 32px padding each side → **576px of text**.
+
+At the 14px prose size that's about 90 characters a line (85–95, measured in Archivo), past the comfortable range on purpose: long lines are efficient once the reader is committed, and 1.75 leading compensates for the longer return sweep. At 16px the same column would hold 75–85.
+
+The padding does double duty: on a 375px phone the column is `375 − 64 = 311px`, and on desktop the 32px keeps text off the edge of a maximised window.
+
+That 311px once forced a responsive type step (a 30px title wrapping to three lines) until an 18px type ceiling removed it: layout law 1's narrowest-measure check, settled in the scale.
+
+640px also equals Tailwind's `sm` breakpoint — convenient, not meaningful: below it the column is padding-limited, so the two coincide naturally.
+
+The summary and detail pairs it keeps still: home-page role summary → `/experience`, writing index → article.
+
+## What's allowed outside the column
+
+**Non-text content.** The image galleries are a full-bleed CSS-columns masonry on a grey field with 4px gaps; confining it to 640px would only make the images small.
+
+```tsx
+<main className="min-h-[100dvh] bg-gray-100 p-1 pb-28">
+  <div className="columns-3 gap-1 sm:columns-4">
+```
+
+Note `columns-3` then `sm:columns-4`: fewer columns on a phone, more on desktop — against the mobile-first instinct for grids, and right here because the tiles are photographs.
+
+**Rails**, anchored to a wider frame (§2 of the guide), and **fixed chrome**: the nav strip spans the viewport for centring.
+
+## Dividers at column width
+
+```tsx
+export function Divider() {
+  return (
+    <div className="col my-3" aria-hidden>
+      <hr className="border-0 h-[0.5px] bg-gray-alpha-300" />
+    </div>
+  );
+}
+```
+
+Reusing `.col` makes it exactly as wide as the text it separates. The `<hr>` reset and `aria-hidden` are layout law 6's; the half-pixel box is a gap the site still has (`glass/layout/radius-and-elevation.md`).
+
+`my-3` (12px) on top of the sections' own `py-9` (36px) → 48px between the content of adjacent sections, the hairline centred in it.
+
+## The spacing scale
+
+Tailwind's 4px scale, with a preference for a few well-worn values:
+
+| Value | px | Typical use |
+|---|---|---|
+| `0.5` | 2 | Nudges between adjacent icons |
+| `1` | 4 | Gallery gaps, dock padding |
+| `1.5` | 6 | Sub-title under a heading |
+| `2` | 8 | List items, tag gaps |
+| `2.5` | 10 | Row padding, marker gaps |
+| `3` | 12 | Heading → paragraph, container padding |
+| `3.5` | 14 | Heading → list |
+| `4` | 16 | Paragraph gaps, grid gaps |
+| `5` | 20 | Quote indent, section heading → content |
+| `6` | 24 | Prose paragraph gaps, meta rows |
+| `7` | 28 | Capability groups |
+| `8` | 32 | Section heading → content, column padding |
+| `9` | 36 | Home section padding |
+| `10` | 40 | Prose heading top margin, section content after a rule |
+| `11` | 44 | Between roles on the experience page |
+| `14` | 56 | First section on a long page |
+| `16` | 64 | Between major sections on a long page |
+| `20`/`28` | 80/112 | Page top/bottom padding |
+
+The values in heaviest use are `2.5`, `3.5`, `9`, `10` — mostly half-steps and odd numbers. They exist because 10/14/36/40 are where the *asymmetry ratios* land, not because the scale demanded them.
+
+## Asymmetry, in detail
+
+Layout law 2 at glass's values, beyond the guide's table (§3):
+
+| Relationship | Inner | Outer | Ratio |
+|---|---|---|---|
+| Role title → its description | 2px | 6px | 3:1 |
+| Case study title → body | 6px | 20px (between cards) | 3.3:1 |
+| Capability heading → body | 8px | 32px (between capabilities) | 4:1 |
+
+## Section rhythm
+
+**Home page — peers.**
+
+```tsx
+<section className="py-9">   {/* 36px symmetric */}
+```
+
+**Long pages — hierarchy.**
+
+```tsx
+<section className="mt-16 border-t border-gray-alpha-300 pt-10">
+```
+
+64px above the rule, 40px below. The first section on such a page uses `mt-14` (56px) with no rule — there's nothing above it to separate from.
+
+## Not every boundary gets a rule
+
+```tsx
+const SECTIONS = {
+  work:       { node: <Work />,       rule: true },
+  experience: { node: <Experience />, rule: true },
+  life:       { node: <MyLife />,     rule: true },
+  watching:   { node: <Watching />,   rule: false },
+  socials:    { node: <Socials />,    rule: false },
+};
+```
+
+Glass's divider decision (layout law 3): Work, Experience and Life are the substantial blocks and get separated; Watching and Socials read as a **coda** to Life, so they follow without a rule. The flag lives in layout code beside the sections, never in config (`domains/layout/measure-and-rhythm.md`, section rhythm).
+
+## Page padding
+
+```tsx
+className="pb-20 pt-28 sm:pt-20"     // long page
+className="pb-28 pt-28 sm:pt-20"     // index page
+className="pt-28 pb-14 sm:pt-20 sm:pb-11"   // hero
+```
+
+**Top padding is generous** — 112px, 80px on phones; a long top margin signals "this is a document."
+
+**Bottom padding accounts for the fixed dock.** `pb-28` (112px) on pages whose content can end near the viewport bottom, so the last line is never under the nav. A page ending in a footer can use less, because the footer's own `pb-28` covers it.
+
+## `dvh` over `vh`
+
+Anything sized to the viewport uses `dvh` (`domains/layout/measure-and-rhythm.md`, viewport units):
+
+```tsx
+className="min-h-[100dvh]"
+className="max-h-[calc(100dvh-11rem)]"
+```

package/plugins/keyline/skills/keyline/glass/layout/radius-and-elevation.md

@@ -0,0 +1,103 @@
+# Radius, corners, and stacking
+
+Glass's values for layout laws 5–7; the rules themselves, and the nesting worked through in general, are in `domains/layout/radius-lines-and-layers.md`.
+
+## The nesting rule, through the site
+
+Layout law 5, in the reference implementation's dock:
+
+```
+Dock:          rounded-2xl      (16px)   p-1  (4px padding)
+  Icon button: rounded-[12px]   (12px)            16 − 4 = 12  ✓
+    Avatar:    rounded-[10px]   (10px)   inset ~2px   12 − 2 = 10  ✓
+```
+
+Three levels, each derived. The avatar is `h-9 w-9` inside an `h-10 w-10` button — a 2px inset all round, so 10px.
+
+The mobile sheet snaps to the ladder:
+
+```
+Sheet:  rounded-2xl   (16px)   p-1.5 (6px)
+  Row:  rounded-xl    (12px)          16 − 6 = 10, rounded up to 12
+```
+
+## The ladder
+
+| Radius | Class | For |
+|---|---|---|
+| full | `rounded-full` | Pills, tags, dots, markers |
+| 2px | — | The focus ring's own radius |
+| 5px | `rounded-[5px]` | A lettermark box (tiny, so a small radius) |
+| 6px | `rounded-md` | Tooltips, the skip link |
+| 9px | `rounded-[9px]` | Small cards in a stack |
+| 10px | `rounded-[10px]` | Avatar inside a button; a list highlight bar |
+| 12px | `rounded-xl` / `rounded-[12px]` | Cards, hover panels, disclosures, icon buttons |
+| 16px | `rounded-2xl` / `rounded-[16px]` | Outer containers — a dock, a sheet, a pocket |
+
+Radius scales with size, not importance (layout law 5): a 40px icon button gets 12px; a 300px panel gets 16px.
+
+## Continuous corners
+
+The rule is in §4 of the guide: `superellipse(1.5)` on every element and pseudo-element. **1.5 rather than 2** because a full squircle is noticeable — at small sizes it looks like a slightly swollen rectangle. Halfway reads as a well-drawn corner rather than an effect.
+
+## Hairline weights
+
+| Weight | Class | For |
+|---|---|---|
+| 0.5px | `border-[0.5px]`, `h-[0.5px]` | Chrome borders, dividers, glass edges |
+| 1px | `border`, `ring-1`, `h-px` | Card borders, TOC markers |
+| 2px | `outline-2`, `border-l-2` | Focus rings, an imported Markdown quote's rule |
+| 3px | `w-[3px] rounded-full` | The pull-quote bar |
+
+By job (layout law 6): two groups of icons within one dock, 0.5px; where a card ends, 1px; a focus ring, 2px. The authored pull quote's bar is 3px and rounded, so a flex child rather than a border (`glass/type/long-form-prose.md`, Quotes); imported Markdown, which can't take classes, keeps a 2px `gray-alpha-300` border.
+
+Vertical dividers use `w-[0.5px]` with an explicit height and `self-center`:
+
+```tsx
+<span aria-hidden className="mx-0.5 h-6 w-[0.5px] self-center bg-gray-alpha-300" />
+```
+
+A 24px line in a 40px-tall row, one step lighter than the dock's `alpha-400` edge, because it's an internal articulation, not a boundary.
+
+**The box form is a gap the reference implementation still has.** `h-[0.5px]` and `w-[0.5px]` with a background are boxes, which layout law 6 says a 1x screen can drop. Draw every hairline as a border instead: `border-t-[0.5px]` on the element, or an empty span carrying `border-l-[0.5px]` for a vertical divider, the same weight and colour by the more reliable route.
+
+## Elevation tiers
+
+Glass's shadow tiers — chrome, pocket, panel, card, transient — are depth's: `glass/depth/depth-cues.md`.
+
+## The z-index ladder
+
+The ladder is in §8 of the guide. **The 40/50 pair** in code:
+
+```tsx
+{open && (
+  <div aria-hidden onClick={() => setOpen(false)}
+       className="pointer-events-auto fixed inset-0 z-40 sm:hidden" />
+)}
+<div className="pointer-events-auto relative z-50 sm:hidden">
+  {/* the menu */}
+</div>
+```
+
+**`z-index: 10` for a hover lift:**
+
+```tsx
+<Link className="group relative block transition-[z-index] hover:z-10 focus-within:z-10">
+```
+
+Folder cards rising out of a pocket would otherwise be clipped by the next folder; `focus-within:z-10` gives keyboard focus the same lift.
+
+## Stacking-context techniques
+
+The general techniques are in `domains/layout/radius-lines-and-layers.md`. Glass's cases:
+
+- **`isolate` plus negative z** scopes the dock's sliding highlight behind its icons but in front of the glass: the code is in `glass/depth/depth-cues.md`.
+- **The nav strip** passes clicks through and carries no transform (§8 of the guide); a transform would trap the mobile sheet's full-bleed `w-screen` overlay inside the strip.
+
+### `transform-origin` for menus
+
+```tsx
+const anchor = placement === "up" ? "origin-bottom" : "origin-top";
+```
+
+A menu scales **from its trigger's edge**, or it seems to detach and drift; off one side, use the corner: `origin-top-left`.

package/plugins/keyline/skills/keyline/glass/motion/assets/DropMenu.tsx

@@ -0,0 +1,106 @@
+/**
+ * The squash-and-stretch floating menu — the shared open/close motion for
+ * every menu in the system (a phone nav sheet, a settings drop-up, a socials
+ * pill). All of them grow out of a trigger sitting against one edge, so all
+ * of them stretch from that edge.
+ *
+ * The effect comes from letting two springs DISAGREE. See motion-presets.ts
+ * for the numbers and the reasoning.
+ *
+ * Two structural decisions worth keeping:
+ *
+ * 1. The panel mounts only while open, so a closed menu is out of the tab
+ *    order and off the paint. That matters here because the panel carries
+ *    backdrop-filter, which is expensive even when invisible.
+ *
+ * 2. The wrapper is ALWAYS present, so a trigger's aria-controls still
+ *    resolves to a real element when the menu is closed.
+ *
+ * Note this component animates a bare m.div and expects its child to carry
+ * the glass. A transform on an ancestor weakens backdrop-filter in its
+ * subtree — the wrapper scales, the child blurs, and they must be different
+ * elements.
+ */
+
+import { AnimatePresence, LazyMotion, domAnimation, m, useReducedMotion } from "motion/react";
+import type { CSSProperties, ReactNode } from "react";
+import { GROW, CROSS, CLOSE } from "./motion-presets";
+
+export type DropPlacement = "up" | "down";
+
+export function DropMenu({
+  open,
+  placement = "up",
+  origin,
+  id,
+  className = "",
+  style,
+  onMouseEnter,
+  onMouseLeave,
+  children,
+}: {
+  open: boolean;
+  placement?: DropPlacement;
+  /** transform-origin class — defaults to the edge the menu grows from. */
+  origin?: string;
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  children: ReactNode;
+}) {
+  const reduce = useReducedMotion();
+
+  // Start nudged back toward the trigger, so it reads as coming out of it.
+  const away = placement === "up" ? 4 : -4;
+
+  // Scale from the anchored edge, or the caller's corner for a menu that
+  // hangs off one side of its trigger (e.g. origin-top-left).
+  const anchor = origin ?? (placement === "up" ? "origin-bottom" : "origin-top");
+
+  return (
+    <div
+      id={id}
+      style={style}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      // Empty and inert when closed, so it can't sit over the page as a trap.
+      className={`${className} ${open ? "" : "pointer-events-none"}`}
+    >
+      <LazyMotion features={domAnimation} strict>
+        <AnimatePresence>
+          {open && (
+            <m.div
+              className={anchor}
+              /* Open squashes from a real offset; exit only travels part of
+                 the way back, because it's disappearing anyway. */
+              initial={
+                reduce ? { opacity: 0 } : { opacity: 0, scaleY: 0.82, scaleX: 0.94, y: away }
+              }
+              animate={reduce ? { opacity: 1 } : { opacity: 1, scaleY: 1, scaleX: 1, y: 0 }}
+              exit={
+                reduce
+                  ? { opacity: 0, transition: CLOSE }
+                  : { opacity: 0, scaleY: 0.9, scaleX: 0.97, y: away, transition: CLOSE }
+              }
+              transition={
+                reduce
+                  ? { duration: 0.15 }
+                  : {
+                      scaleY: GROW,  // the grow axis overshoots
+                      y: GROW,       // travel rides the same spring, or the
+                                     // anchored edge detaches mid-overshoot
+                      scaleX: CROSS, // the cross axis arrives late
+                      opacity: { duration: 0.14, ease: "easeOut" },
+                    }
+              }
+            >
+              {children}
+            </m.div>
+          )}
+        </AnimatePresence>
+      </LazyMotion>
+    </div>
+  );
+}