trykeyline 0.1.0 → 0.1.2

package/plugins/keyline/skills/keyline/glass/layout/adaptive-presentations.md

@@ -59,65 +59,13 @@ The desktop panel needs no equivalent: it *mounts fresh* on open and reads the v
 
 ## Case 2: the table of contents
 
-Same tree, two containers, shared row rendering.
-
-```tsx
-/** Shared — used by both presentations. */
-function Rows({ nodes, active, parents, onJump }) { … }
-
-/** The sticky rail, in the left margin on wide screens. */
-export function SectionNav({ nodes, active, onJump }) {
-  return (
-    <nav aria-label="On this page">
-      <ul className="flex flex-col">
-        <Rows … />
-      </ul>
-    </nav>
-  );
-}
-
-/** The narrow-screen disclosure — one line above the article. */
-export function SectionNavCompact({ nodes, active, onJump }) {
-  const [open, setOpen] = useState(false);
-  const jump = (id: string) => { setOpen(false); onJump(id); };
-  return (
-    <details open={open} onToggle={(e) => setOpen(e.currentTarget.open)}
-             className="group rounded-xl border border-gray-alpha-300">
-      <summary className="… [&::-webkit-details-marker]:hidden">
-        On this page
-        <span className="… group-open:rotate-180 motion-reduce:transition-none">
-          <ChevronDownIcon />
-        </span>
-      </summary>
-      <ul className="… border-t border-gray-alpha-300">
-        <Rows … onJump={jump} />
-      </ul>
-    </details>
-  );
-}
-```
-
-Both are rendered; CSS picks one:
-
-```tsx
-<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 {...nav} />
-  </div>
-</div>
-
-<div className="reveal mt-8 xl:hidden">
-  <SectionNavCompact {...nav} />
-</div>
-```
-
-The props are memoised so both get a stable object:
+Same tree, two containers, shared row rendering: `glass/layout/assets/SectionNav.tsx`. Both are rendered and CSS picks one — the rail in the 1280px frame from `xl` (§2 of the guide), the compact `<details>` above the article below that (`reveal mt-8 xl:hidden`). The props are memoised so both get one stable object:
 
 ```tsx
 const nav = useMemo(() => ({ nodes: toc, active, onJump: jump }), [active, jump]);
 ```
 
-The compact version is a `<details>` (layout law 11); `open` is mirrored into React state only so it can close itself after a jump. `[&::-webkit-details-marker]:hidden` plus `list-none` removes the default triangle so the chevron can be styled, and `group-open:rotate-180` reads the parent's `open` attribute, so the rotation needs no state. It costs **one line** above the article, which is what makes a nav in the reading flow acceptable.
+The compact version is a `<details>` (layout law 11), and costs **one line** above the article, which is what makes a nav in the reading flow acceptable.
 
 ## Case 3: two views of one collection, chosen by the reader
 
@@ -125,24 +73,7 @@ The first two cases fork on a *device* capability; the gallery's **wall** and **
 
 ### The state can't live in either component
 
-The control and what it controls are siblings, so a third party owns the value:
-
-```ts
-export type GalleryLayout = "grid" | "roll";
-let current: GalleryLayout = "grid";
-
-const listeners = new Set<(layout: GalleryLayout) => void>();
-export function onGalleryLayoutChange(fn: (l: GalleryLayout) => void) {
-  listeners.add(fn);
-  return () => { listeners.delete(fn); };
-}
-export function setGalleryLayout(layout: GalleryLayout) {
-  current = layout;
-  for (const fn of listeners) fn(layout);
-}
-```
-
-The shape of a theme or sound store, for the same reason: neither consumer can be the other's parent without distorting the layout.
+The control and what it controls are siblings, so a module store owns the value (its code is §6 of the guide), mirrored in a hook:
 
 ```ts
 // Mirror it in a hook. Read in an EFFECT, not during render: on a
@@ -175,10 +106,6 @@ Find the item nearest the viewport's centre before the outgoing layout unmounts
 
 Nothing is cropped, so `object-cover` has nothing to do; nothing shifts on load; and one image travels between layouts undistorted, because both ends compute to the same shape.
 
-## Hover in Tailwind
-
-Tailwind v4's `hover:` variant already compiles to a `(hover: hover)` guard, so utility hover states are safe by default. Imperative JavaScript needs the explicit check.
-
 ## The touch-versus-hover audit
 
 Glass's answers to the audit in `domains/layout/forks-gating-and-disclosures.md`:
@@ -213,19 +140,6 @@ The last is a hover card *below* its row on narrow screens and *beside* it at `x
 | `sm` | 640px | Mobile dock ↔ desktop dock. Page padding. Masonry columns. Stack columns. |
 | `xl` | 1280px | The TOC rail appears. The hover card moves beside its row. |
 
-Two for the whole site, both derived from content. Both are viewport breakpoints only because here the column *is* the page. `sm` coincides with the reading measure: below it the column is padding-limited, the natural place for the layout to change character. `xl` is where a 640px column finally leaves margin for a 196px rail. Type size is *not* on the list: a 30px article title once stepped to 26px below `sm`, until an 18px type ceiling removed the need (`glass/layout/measure-and-rhythm.md`; the Glass type guide, `glass/type/guide.md`).
-
-## Breakpoints on the container
-
-Where a pane shares the screen with something that opens and closes, it breaks on its own width (layout law 8). In Tailwind:
-
-```tsx
-<section className="@container">                  {/* the pane, not the page */}
-  <div className="grid @2xl:grid-cols-[minmax(240px,1fr)_2fr]">
-    <List />
-    <Detail className="@container" />            {/* sizes its own insides */}
-  </div>
-</section>
-```
+Two for the whole site, both derived from content. Both are viewport breakpoints only because here the column *is* the page. `sm` coincides with the reading measure: below it the column is padding-limited, the natural place for the layout to change character. `xl` is where a 640px column finally leaves margin for a 196px rail. Type size is *not* on the list (`glass/type/scale.md`).
 
-Tailwind v4 ships `@container` and the `@sm:`…`@7xl:` variants; plain CSS is `container-type: inline-size` and `@container (min-width: …)`. The list is clamped with `minmax` so it narrows before the detail does, and the nested `@container` lets the detail size its own gutters, rail and labels.
+Glass uses no container breakpoints; where a pane shares the screen with something that opens and closes, see `domains/layout/forks-gating-and-disclosures.md`.

package/plugins/keyline/skills/keyline/glass/layout/assets/SectionNav.tsx

@@ -12,7 +12,7 @@
  * copied as links; the click handler takes over to scroll smoothly and keep
  * the URL in step.
  *
- * Pair with useActiveSection (`glass/motion/guide.md`) for the scroll spy, and
+ * Pair with useActiveSection (`glass/motion/assets/useScrollTick.ts`) for the scroll spy, and
  * give every heading a scroll-margin-top just under its READING_LINE.
  */
 
@@ -59,11 +59,8 @@ function ChevronDownIcon() {
 /**
  * One row.
  *
- * Top-level rows sit flush and carry no marker — they read as the headings
- * they are, and the active one takes a heavier WEIGHT so its state isn't
- * signalled by colour alone (WCAG 1.4.1). Weight is a genuine second channel:
- * it survives greyscale, colour-blindness and low-contrast displays, and it's
- * cheaper than a background pill in a list that's meant to be quiet.
+ * Top-level rows sit flush and carry no marker; the active one takes weight
+ * 500 as well as colour, so state is never on colour alone (type law 5).
  *
  * Nested rows carry a horizontal marker that extends and darkens when active,
  * and which doubles as their indent. It sits in a FIXED-WIDTH box so growing

package/plugins/keyline/skills/keyline/glass/layout/assets/layout-tokens.css

@@ -3,43 +3,15 @@
    ───────────────────────────────────────────────────────────────────────── */
 
 @theme {
-  /* ── The measure ────────────────────────────────────────────────────────
-     640px outer, 32px padding → 576px of text. At 16px prose that's ~75–85
-     characters per line: the top of the comfortable range, which is the
-     right place for a site that expects sustained reading (long lines are
-     efficient once the reader is committed, and 1.75 leading pays for the
-     longer return sweep).
-
-     EVERY page uses this. The payoff isn't visual consistency, it's
-     positional continuity: clicking from a summary into its detail view
-     doesn't move the text, so the transition reads as expansion rather than
-     as arriving at a different document. */
+  /* 640px outer, 32px padding → 576px of text, on every page. Why:
+     glass/layout/measure-and-rhythm.md. */
   --container-col: 640px;
-
-  /* The outer frame that rails anchor to, alongside the column. Anchoring
-     both to the SAME frame is what makes the gap between them hold steady
-     from 1280px up — a rail positioned against the viewport instead drifts
-     away from the content it indexes as the window grows. */
-  --container-frame: 1280px;
-  --rail-width: 196px;
 }
 
 @layer base {
-  /* Apple-style continuous corners on every rounded element.
-
-     A standard border-radius is a quarter-circle: constant curvature that
-     drops abruptly to zero where it meets the straight edge. The eye reads
-     that discontinuity as a slight hardness. A superellipse varies curvature
-     continuously into the edge.
-
-     superellipse(k) uses exponent 2^k — k=1 is a normal round corner, k=2 a
-     full iOS squircle, so 1.5 lands about halfway. Not 2, because a full
-     squircle is noticeable at small sizes (it starts to look like a swollen
-     rectangle); halfway reads as "well-drawn corner" rather than as an
-     effect.
-
-     Unsupported browsers ignore it and fall back to normal rounding. Keep it
-     that way — nothing else in the layout should depend on it. */
+  /* Continuous corners on every rounded element. 1.5 sits halfway between a
+     round corner (1) and a full squircle (2), which swells at small sizes.
+     Unsupported browsers fall back to normal rounding; nothing depends on it. */
   *,
   *::before,
   *::after {
@@ -54,9 +26,8 @@
     padding: 0 32px;
   }
 
-  /* Skip link. Parked off-screen with a TRANSFORM, never display:none —
-     which would take it out of the tab order and defeat the point. Every
-     page needs a matching id="main". */
+  /* Skip link: parked with a transform, never display:none (which drops it
+     from the tab order). Every page needs a matching id="main". */
   .skip {
     position: absolute;
     left: 16px;
@@ -69,20 +40,14 @@
     text-decoration: none;
     border-radius: 6px;
     transform: translateY(-200%);
-    transition: transform 150ms var(--ease-geist);
+    transition: transform var(--duration-state) var(--ease-geist);
   }
   .skip:focus {
     transform: translateY(0);
   }
 }
 
-/* ─────────────────────────────────────────────────────────────────────────
-   Print. A real presentation, not an afterthought.
-
-   The .reveal reset is the one people forget: scroll-triggered content is at
-   opacity: 0 until an IntersectionObserver fires, and printing never fires
-   it — so the page prints blank without this.
-   ───────────────────────────────────────────────────────────────────────── */
+/* Print. The .reveal reset lives in glass/motion/assets/motion-tokens.css. */
 @media print {
   nav,
   footer,
@@ -96,11 +61,6 @@
     font-size: 11pt;
   }
 
-  .reveal {
-    opacity: 1;
-    transform: none;
-  }
-
   /* An underlined URL-less link is noise on paper. */
   a {
     color: inherit;
@@ -108,92 +68,5 @@
   }
 }
 
-/* ─────────────────────────────────────────────────────────────────────────
-   REFERENCE — apply these in components; they're documentation, not classes.
-
-   ── The radius ladder ──────────────────────────────────────────────────
-   Nesting rule: INNER = OUTER − the padding between them. Geometry, not
-   taste — two concentric rounded rectangles share a centre of curvature
-   only if their radii differ by exactly the gap between their edges.
-
-     rounded-full     pills, tags, dots, markers
-     rounded-[5px]    a lettermark box
-     rounded-md    6  tooltips, the skip link
-     rounded-[9px] 9  small cards in a stack
-     rounded-[10px]10 avatar inside a button · a list highlight bar
-     rounded-xl   12  cards, hover panels, disclosures, icon buttons
-     rounded-2xl  16  outer containers — a dock, a sheet, a pocket
-
-   Worked example:
-     Dock          rounded-2xl (16)  p-1 (4)
-       Icon button rounded-[12px]          16 − 4 = 12  ✓
-         Avatar    rounded-[10px]          12 − 2 = 10  ✓
-
-   Radius scales with SIZE, not importance — and sub-proportionally, because
-   a large element with a proportional radius reads as a lozenge.
-
-   ── Hairline weights ───────────────────────────────────────────────────
-   The choice is about what the line is DOING:
-
-     0.5px   internal articulation — a divider between icon groups inside
-             one dock. Renders as a true sub-pixel hairline on retina and
-             rounds UP to 1px elsewhere, so it degrades rather than vanishes.
-     1px     a real edge — where a card ends.
-     2px     a mark with editorial weight — a blockquote rule, a focus ring.
-
-   On translucent surfaces use the ALPHA ramp (border-gray-alpha-400). A
-   solid border on glass doesn't participate in what's behind it and reads as
-   a pasted-on frame.
-
-   An <hr> needs border-0 before you give it a background, or you get the UA
-   border AND your line. Non-semantic dividers get aria-hidden.
-
-   ── The z-index ladder ─────────────────────────────────────────────────
-   Ordered by PERMANENCE, not importance. Gaps of 10 so something can be
-   inserted without renumbering.
-
-     100   skip link — must beat everything, including modals
-      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, above the cards it contains
-      20   hover cards, dropdowns
-      10   a hovered item lifting above its siblings
-     -10   a sliding highlight, behind content inside `isolate`
-
-   60 is what the gaps were for: a greeting overlay arrived long after this
-   ladder was set and slotted in without touching an existing value.
-
-   Two pairs to understand rather than copy. 40/50: a full-screen catcher
-   must be above the page (to catch the click) and below the menu it
-   dismisses (or it eats the menu's own clicks). 60/100: a splash overlay
-   covers the navigation — or it isn't covering the page — but must never
-   cover the skip link, because a keyboard user tabbing during a two-second
-   greeting has to be able to get past it.
-
-   ── Two techniques ─────────────────────────────────────────────────────
-   isolate + negative z: a highlight bar behind icons but in front of its
-   container's background. `-z-10` alone drops it behind the container;
-   `isolate` scopes the negative z inside.
-
-   pointer-events-none on a full-width strip, auto on the content: a fixed
-   nav strip spans the viewport for centring but must not swallow every click
-   along the bottom of the page.
-
-   And the strip carries NO TRANSFORM. A transform makes an element the
-   containing block for position:fixed descendants — a full-bleed w-screen
-   overlay inside it would be trapped in the strip's bounds. Same class of
-   problem as transforms weakening backdrop-filter: when something positioned
-   or filtered behaves inexplicably, check every ancestor for transform,
-   filter, perspective, contain, and will-change.
-
-   ── Viewport units ─────────────────────────────────────────────────────
-   Use dvh, never vh. `vh` refers to the viewport WITHOUT mobile browser
-   chrome, so a 100vh element extends under the address bar and its bottom is
-   unreachable. `dvh` tracks the actual visible area.
-
-   ── Bottom padding ─────────────────────────────────────────────────────
-   Anything with fixed bottom chrome needs pb-28 (112px) audited page by
-   page, or the last line sits under the nav. The most common "looks fine on
-   my long page" bug.
-   ───────────────────────────────────────────────────────────────────────── */
+/* The radius ladder, hairlines, z-index ladder, dvh and pb-28 are not classes:
+   glass/layout/guide.md and glass/layout/radius-and-elevation.md. */

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

@@ -14,7 +14,7 @@ For mostly-text interfaces, where layout should get out of the way. One decision
 }
 ```
 
-At most 576px of text, roughly 75–85 characters at 16px: the top of comfortable, chosen for sustained reading. **Every page uses the class** (layout law 1).
+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.
@@ -40,16 +40,16 @@ Rail and column share one centred 1280px frame, so their gap holds from 1280px u
 ## 3. Spacing groups; asymmetry is the mechanism
 
 ```
-mt-11  (44px)   ← heading
+mt-10  (40px)   ← heading
 mb-3   (12px)
                 ← the paragraph it introduces
 ```
 
-~3.5:1 above to below makes them one unit (layout law 2). It holds at every scale:
+~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 | 44px above | 3.7:1 |
+| 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 |
@@ -88,7 +88,8 @@ Glass sets the corner shape on everything, pseudo-elements included, with no exc
 |---|---|
 | `0.5px` | Chrome borders, dividers, glass edges |
 | `1px` | Card borders, rings, disclosure outlines |
-| `2px` | Quote rules, focus rings |
+| `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`).
@@ -228,17 +229,11 @@ Where a custom animation rules out `<details>`, glass collapses height to zero (
 
 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; }
-}
-```
+Print: `glass/layout/assets/layout-tokens.css`, with the `.reveal` reset in `glass/motion/assets/motion-tokens.css`.
 
 ## Assets
 
-- `glass/layout/assets/layout-tokens.css` — column, spacing, radius ladder, continuous corners, hairlines, skip link, print.
+- `glass/layout/assets/layout-tokens.css` — column, continuous corners, skip link, print.
 - `glass/layout/assets/SectionNav.tsx` — two presentations of one tree, with shared row rendering.
 
 ## Checklist
@@ -247,10 +242,10 @@ 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-11` / `mb-3`; home sections `py-9`; long pages `mt-16 border-t pt-10`, the first `mt-14`.
+- [ ] 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 marks; `gray-alpha` on translucent surfaces.
+- [ ] 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.

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

@@ -6,12 +6,10 @@ Glass's values for layout laws 1–3; the derivations and reasons every preset s
 
 `.col` (§1 of the guide) is 640px outer with 32px padding each side → **576px of text**.
 
-At 16px prose that's roughly 75–85 characters per line, at the top of 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 14px UI copy the column holds ~85–95 characters, which is fine because that text is scanned, not read.
+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.
@@ -64,13 +62,13 @@ Tailwind's 4px scale, with a preference for a few well-worn values:
 | `7` | 28 | Capability groups |
 | `8` | 32 | Section heading → content, column padding |
 | `9` | 36 | Home section padding |
-| `10` | 40 | Section content after a rule |
-| `11` | 44 | Prose heading top margin |
+| `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`, `11` — the half-steps and odd numbers. They exist because 8/12/36/44 are where the *asymmetry ratios* land, not because the scale demanded them.
+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
 

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

@@ -46,9 +46,10 @@ The rule is in §4 of the guide: `superellipse(1.5)` on every element and pseudo
 |---|---|---|
 | 0.5px | `border-[0.5px]`, `h-[0.5px]` | Chrome borders, dividers, glass edges |
 | 1px | `border`, `ring-1`, `h-px` | Card borders, TOC markers |
-| 2px | `border-l-2` | Quote rules, focus rings |
+| 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 blockquote's left rule, 2px.
+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/assets/prose.tsx`); 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`:
 

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

@@ -4,8 +4,8 @@
  * 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.
+ * The effect comes from letting two springs DISAGREE (motion-presets.ts;
+ * the reasoning is glass/motion/springs.md).
  *
  * Two structural decisions worth keeping:
  *
@@ -16,10 +16,8 @@
  * 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.
+ * It animates a bare m.div and expects its child to carry the glass
+ * (glass/depth/guide.md §3).
  */
 
 import { AnimatePresence, LazyMotion, domAnimation, m, useReducedMotion } from "motion/react";