@hanzo/ui 8.27.44 → 8.27.45

package/dist/theme.css

@@ -1330,13 +1330,8 @@
    src/glass.css and are inlined here by scripts/compose-theme.mjs — one home,
    two entry points (`@hanzo/ui/theme.css` and `@hanzo/ui/glass.css`), so a host
    that wants only the chrome material does not have to take the token layer
-   with it.
-
-   They used to be four `.elevation-*` rules reading `var(--hz-elevation-N, …)`.
-   Nothing in this repo, in @hanzo/design or in any consumer ever DEFINED an
-   `--hz-elevation-*` variable, so every one of those resolved to its fallback:
-   an indirection through a name that does not exist, with a hardcoded shadow
-   behind it, next to a design system that publishes real ones. */
+   with it. The ladder reads @hanzo/design's own shadows, never a private
+   variable nothing defines. */
 
 /* ── Prose ───────────────────────────────────────────────────────────────────
    What `<ApplyTypography>` turns on: running text — a heading, a byline, a
@@ -1350,12 +1345,13 @@
    @hanzo/design ramp, which is where every other surface already reads them —
    so prose and a Button now round to the same scale instead of two.
 
-   Scoped under `.hz-prose` and applied with `>` only one level down, so a nested
-   component keeps its own type. */
-.hz-prose {
-  /* One implicit column with a gap — a grid states the stack without also
-     having to state a direction to run in. */
-  display: grid;
+   Scoped under `[data-slot='prose']` and applied with `>` only one level down,
+   so a nested component keeps its own type. The content arrives as bare tags
+   (a CMS field, an .mdx file), which is the one case a prop cannot reach: the
+   rules have to select by tag from the container. */
+[data-slot='prose'] {
+  display: flex;
+  flex-direction: column;
   gap: var(--space-3, 0.75rem);
   color: var(--foreground);
   font-family: var(--font-sans), sans-serif;
@@ -1363,8 +1359,8 @@
   line-height: var(--leading-base, var(--leading-normal));
 }
 
-.hz-prose > h1, .hz-prose > h2, .hz-prose > h3,
-.hz-prose > h4, .hz-prose > h5, .hz-prose > h6 {
+[data-slot='prose'] > h1, [data-slot='prose'] > h2, [data-slot='prose'] > h3,
+[data-slot='prose'] > h4, [data-slot='prose'] > h5, [data-slot='prose'] > h6 {
   font-family: var(--font-display, var(--font-sans)), sans-serif;
   font-weight: 606;
   line-height: var(--leading-tight);
@@ -1372,37 +1368,37 @@
   margin: 0;
 }
 
-.hz-prose > h1 { font-size: var(--text-4xl) }
-.hz-prose > h2 { font-size: var(--text-3xl) }
-.hz-prose > h3 { font-size: var(--text-2xl) }
-.hz-prose > h4 { font-size: var(--text-xl) }
-.hz-prose > h5 { font-size: var(--text-lg) }
+[data-slot='prose'] > h1 { font-size: var(--text-4xl) }
+[data-slot='prose'] > h2 { font-size: var(--text-3xl) }
+[data-slot='prose'] > h3 { font-size: var(--text-2xl) }
+[data-slot='prose'] > h4 { font-size: var(--text-xl) }
+[data-slot='prose'] > h5 { font-size: var(--text-lg) }
 /* h6 is the byline rung: heading TAG, body weight and colour, because that is
    what a byline is — subordinate text that happens to sit in the heading
    stack. */
-.hz-prose > h6 {
+[data-slot='prose'] > h6 {
   font-size: var(--text-base);
   font-weight: 497;
   color: var(--muted-foreground);
 }
 
-.hz-prose > p { margin: 0 }
+[data-slot='prose'] > p { margin: 0 }
 /* The marker is RESTORED here. `base.css` takes it off every list in the
    document, because a nav and a card grid are both lists and neither wants one.
    Authored prose is the one place it belongs. Setting only the indent leaves an
    indented list with nothing at the start of the line. */
-.hz-prose > ul, .hz-prose ul ul { list-style: disc }
-.hz-prose > ol, .hz-prose ol ol { list-style: decimal }
-.hz-prose ul, .hz-prose ol { margin: 0; padding-inline-start: 1.5em }
-.hz-prose li { margin-block: 0.25em }
-.hz-prose li::marker { color: var(--muted-foreground) }
+[data-slot='prose'] > ul, [data-slot='prose'] ul ul { list-style: disc }
+[data-slot='prose'] > ol, [data-slot='prose'] ol ol { list-style: decimal }
+[data-slot='prose'] ul, [data-slot='prose'] ol { margin: 0; padding-inline-start: 1.5em }
+[data-slot='prose'] li { margin-block: 0.25em }
+[data-slot='prose'] li::marker { color: var(--muted-foreground) }
 
 /* A code block is a SURFACE, not just a change of typeface. Without the panel
    it sits directly on the page ground and reads as body text that happens to be
    monospaced — which is exactly what a reader scanning for the command must not
    have to work out. `pre` already scrolls inside itself (base.css); this gives
    it the ground to scroll on. */
-.hz-prose > pre {
+[data-slot='prose'] > pre {
   margin: 0;
   padding: var(--space-4, 1rem);
   border: 1px solid var(--border);
@@ -1413,97 +1409,61 @@
 }
 /* Inside a block the panel IS the surface, so the inline treatment would draw a
    second one around every line. */
-.hz-prose > pre code { background: none; padding: 0; border: 0; font-size: inherit }
-.hz-prose :not(pre) > code {
+[data-slot='prose'] > pre code { background: none; padding: 0; border: 0; font-size: inherit }
+[data-slot='prose'] :not(pre) > code {
   padding: 0.15em 0.35em;
   border-radius: calc(var(--radius, 0.5rem) / 2);
   background: var(--muted);
 }
-.hz-prose > blockquote {
+[data-slot='prose'] > blockquote {
   margin: 0;
   padding-inline-start: 1em;
   border-inline-start: 2px solid var(--border);
   color: var(--muted-foreground);
 }
-.hz-prose code {
+[data-slot='prose'] code {
   font-family: var(--font-mono), ui-monospace, monospace;
   font-size: 0.9em;
 }
-.hz-prose a { color: inherit; text-decoration: underline }
-.hz-prose strong { font-weight: 606 }
-.hz-prose :where(img, video) { max-width: 100%; height: auto }
+[data-slot='prose'] a { color: inherit; text-decoration: underline }
+[data-slot='prose'] strong { font-weight: 606 }
+[data-slot='prose'] :where(img, video) { max-width: 100%; height: auto }
 
 /* The named rungs. `responsive` is the default and is the only one that moves
    with the viewport — a t-shirt size is a DECISION, so it stays put. */
-.hz-prose-sm { font-size: var(--text-sm); gap: var(--space-3, 0.75rem) }
-.hz-prose-sm > h1 { font-size: var(--text-3xl) }
-.hz-prose-sm > h2 { font-size: var(--text-2xl) }
-.hz-prose-sm > h3 { font-size: var(--text-xl) }
-.hz-prose-sm > p  { font-size: var(--text-sm) }
-
-.hz-prose-lg { font-size: var(--text-lg); gap: var(--space-5, 1.25rem) }
-.hz-prose-lg > h1 { font-size: var(--text-5xl) }
-.hz-prose-lg > h2 { font-size: var(--text-4xl) }
-.hz-prose-lg > h3 { font-size: var(--text-3xl) }
-.hz-prose-lg > p  { font-size: var(--text-lg) }
-
-.hz-prose-xl { font-size: var(--text-lg); gap: var(--space-6, 1.5rem) }
-.hz-prose-xl > h1 { font-size: var(--text-6xl) }
-.hz-prose-xl > h2 { font-size: var(--text-5xl) }
-.hz-prose-xl > h3 { font-size: var(--text-4xl) }
-.hz-prose-xl > p  { font-size: var(--text-lg) }
+[data-slot='prose'][data-size='sm'] { font-size: var(--text-sm); gap: var(--space-3, 0.75rem) }
+[data-slot='prose'][data-size='sm'] > h1 { font-size: var(--text-3xl) }
+[data-slot='prose'][data-size='sm'] > h2 { font-size: var(--text-2xl) }
+[data-slot='prose'][data-size='sm'] > h3 { font-size: var(--text-xl) }
+[data-slot='prose'][data-size='sm'] > p  { font-size: var(--text-sm) }
+
+[data-slot='prose'][data-size='lg'] { font-size: var(--text-lg); gap: var(--space-5, 1.25rem) }
+[data-slot='prose'][data-size='lg'] > h1 { font-size: var(--text-5xl) }
+[data-slot='prose'][data-size='lg'] > h2 { font-size: var(--text-4xl) }
+[data-slot='prose'][data-size='lg'] > h3 { font-size: var(--text-3xl) }
+[data-slot='prose'][data-size='lg'] > p  { font-size: var(--text-lg) }
+
+[data-slot='prose'][data-size='xl'] { font-size: var(--text-lg); gap: var(--space-6, 1.5rem) }
+[data-slot='prose'][data-size='xl'] > h1 { font-size: var(--text-6xl) }
+[data-slot='prose'][data-size='xl'] > h2 { font-size: var(--text-5xl) }
+[data-slot='prose'][data-size='xl'] > h3 { font-size: var(--text-4xl) }
+[data-slot='prose'][data-size='xl'] > p  { font-size: var(--text-lg) }
 
 /* Responsive: start at the small rung and climb. Written as min-width so the
    phone case is the unprefixed one and needs no query at all. */
 @media (min-width: 640px) {
-  .hz-prose-responsive { gap: var(--space-4, 1rem) }
+  [data-slot='prose'][data-size='responsive'] { gap: var(--space-4, 1rem) }
 }
 @media (min-width: 1024px) {
-  .hz-prose-responsive { font-size: var(--text-lg); gap: var(--space-5, 1.25rem) }
-  .hz-prose-responsive > h1 { font-size: var(--text-5xl) }
-  .hz-prose-responsive > h2 { font-size: var(--text-4xl) }
-  .hz-prose-responsive > h3 { font-size: var(--text-3xl) }
+  [data-slot='prose'][data-size='responsive'] { font-size: var(--text-lg); gap: var(--space-5, 1.25rem) }
+  [data-slot='prose'][data-size='responsive'] > h1 { font-size: var(--text-5xl) }
+  [data-slot='prose'][data-size='responsive'] > h2 { font-size: var(--text-4xl) }
+  [data-slot='prose'][data-size='responsive'] > h3 { font-size: var(--text-3xl) }
 }
 @media (min-width: 1280px) {
-  .hz-prose-responsive { gap: var(--space-6, 1.5rem) }
-  .hz-prose-responsive > h1 { font-size: var(--text-6xl) }
-  .hz-prose-responsive > h2 { font-size: var(--text-5xl) }
-}
-
-/* The two things a style PROP cannot say, because neither is a property of an
-   element: a keyframe, and a scrollbar. */
-
-/* Skeleton's pulse. Opacity only — animating a colour or a size would repaint
-   or reflow every frame for a placeholder nobody is looking at. */
-@keyframes hz-pulse {
-  50% { opacity: 0.5 }
-}
-.hz-pulse { animation: hz-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite }
-
-/* A carousel scrolls but must not show a bar: the arrows and the snap already
-   say it scrolls, and a bar that appears mid-drag shifts the slides under the
-   pointer. Firefox reads the property, WebKit the pseudo-element, and the
-   property rides on the component so only this half needs a sheet. */
-.hz-scroller::-webkit-scrollbar { display: none }
-
-/* The drawn caret in a one-time-code box. The real one is hidden, because it
-   would sit at the left edge of an invisible full-width field rather than in
-   the box the next keystroke lands in. */
-@keyframes hz-caret {
-  0%, 49% { opacity: 1 }
-  50%, 100% { opacity: 0 }
-}
-.hz-caret {
-  background: var(--foreground);
-  animation: hz-caret 1s steps(1) infinite;
-}
-
-/* Motion is a preference, and all of the above is decoration. A caret that does
-   not blink is still a caret; one that does can trigger a migraine. */
-@media (prefers-reduced-motion: reduce) {
-  .hz-pulse { animation: none }
-  .hz-caret { animation: none }
-  .hz-scroller { scroll-behavior: auto }
+  [data-slot='prose'][data-size='responsive'] { gap: var(--space-6, 1.5rem) }
+  [data-slot='prose'][data-size='responsive'] > h1 { font-size: var(--text-6xl) }
+  [data-slot='prose'][data-size='responsive'] > h2 { font-size: var(--text-5xl) }
 }
 
 /* Glass — the material floating chrome is made of, and the ladder it stands on.
@@ -1752,73 +1712,6 @@
   border-bottom-right-radius: 0 !important;
 }
 
-/* ── The crease — the valley where one sheet lies over another ───────────────
-   The ladder lifts a sheet with a drop that falls STRAIGHT DOWN: design's rule
-   is one light, above, and `check-tokens.mjs` fails the build on a sideways
-   offset. That is right, and it means the ladder has nothing to say about a
-   VERTICAL seam — and an app shell is nothing but vertical seams. A rail beside
-   a sidebar beside a pane, each a step apart on the ladder, still reads as three
-   abutting rectangles with lines ruled between them, because the only mark at
-   the seam is the hairline.
-
-   What a real sheet lays on the one beneath it, side by side under a light from
-   above, is not a cast shadow — it is the valley going dark. Ambient occlusion
-   has no direction of its own, which is both why it is honest here and why it is
-   NOT spelled as a --shadow-*: those are directional by definition and this is
-   not one.
-
-   A PSEUDO-ELEMENT, at z-index -1 inside an isolated stacking context, so it
-   paints above the sheet's own fill and below every child. That ordering is the
-   whole reason it is not a `background-image` (which `.fold` already claims on
-   this same element, !important, so the two would silently fight) and not an
-   inset `box-shadow` (which `.elevation-*` claims, likewise).
-
-   No side named -> both edges, which is what a pane with a neighbour on each
-   hand needs. Name one and the other stops being drawn. */
-:root {
-  --crease-ink: rgb(0 0 0 / .28);
-  --crease-depth: 20px;
-}
-
-.light, :root.t_light, .t_light {
-  /* On white the valley is a smudge, not a shadow — the same redistribution the
-     drops make, and for the same reason. */
-  --crease-ink: rgb(0 0 0 / .05);
-}
-
-.hz-crease {
-  position: relative;
-  /* Without this the -1 escapes and paints behind an ancestor's fill, which is
-     indistinguishable from the crease not being there at all. */
-  isolation: isolate;
-}
-
-.hz-crease::before,
-.hz-crease::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: var(--crease-depth);
-  z-index: -1;
-  pointer-events: none;
-}
-
-.hz-crease::before {
-  left: 0;
-  background-image: linear-gradient(to right, var(--crease-ink), transparent);
-}
-
-.hz-crease::after {
-  right: 0;
-  background-image: linear-gradient(to left, var(--crease-ink), transparent);
-}
-
-.hz-crease[data-crease="left"]::after,
-.hz-crease[data-crease="right"]::before {
-  content: none;
-}
-
 /* ── The scrim ──────────────────────────────────────────────────────────────
    The dim that makes a floating panel read as floating rather than as more
    page. gui's overlay dims TWICE — a translucent ground under a further
@@ -1866,135 +1759,6 @@
   border-top: 1px solid var(--borderColor, var(--border));
 }
 
-/* ── The composer prism — the ONE ring on any Hanzo surface ──────────────────
-   The composer is where you talk to Hanzo, so it is the thing that should look
-   alive, and it earns that with MOTION and LIGHT rather than hue. Every other
-   pixel of chrome stays monochrome; there is no second exemption, and the two
-   attempts to grant one (a violet ring, then a full-wheel rainbow) each made
-   the surface wearing it the only colour in the product.
-
-   THIS LIVES HERE BECAUSE IT WAS DECLARED TWICE AND DRIFTED. hanzo.chat's
-   client/src/style.css and hanzo.app's assets/globals.css each carried a copy,
-   each calling itself "the ONE prism on any Hanzo surface". chat fixed the ring
-   to be a rim; hanzo.app's copy kept drawing a filled DISC and never got the
-   fix — invisible until a glass panel sat in it, at which point the whole
-   spectrum washed up through the composer's interior. chat also quieted the
-   halo (0.5 with a pulse -> 0.22, no pulse); hanzo.app kept the loud one. Two
-   copies of one look is how that happens, and neither app could see the other
-   was wrong.
-
-   Structure: `.hz-composer` is a 1.5px-padded host; its direct child is the
-   panel. ::before is the ring, ::after the halo. Both are MASKED to exclude the
-   panel's footprint, so the ring is a rim BY CONSTRUCTION and the panel is free
-   to be any material — opaque, glass, anything. The stops are declared once and
-   read by both, because duplicated they drift on the first palette change and
-   nobody notices which half moved. */
-
-/* `@property` is what lets a conic angle animate. Where it is unsupported the
-   ring is simply static, which is a fine floor. */
-@property --hz-angle {
-  syntax: "<angle>";
-  initial-value: 0deg;
-  inherits: false;
-}
-
-:root {
-  /* One sweep, closing on the stop it opened with — a conic gradient whose
-     first and last stop differ shows a hard seam.
-
-     LUMINANCE, NOT HUE. Four saturated stops at 0.40-0.48 alpha, swept around
-     a rounded RECTANGLE, do not distribute evenly: the long top and bottom
-     edges each take a wide angular slice and the short sides almost none, so
-     one edge wore a bright blue while the opposite wore a burnt orange — a
-     ring that highlights half the box and reads as sitting off-centre. White
-     at two close alphas removes the bright arc entirely, drops the peak from
-     0.48 to 0.18, and keeps the slow drift as a sheen. hanzo.chat and
-     hanzo.app both declare exactly these stops; this is the package catching
-     up to its consumers — the copies must not drift again, and this file is
-     the home. */
-  --hz-spectrum: rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.18),
-    rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.18),
-    rgba(255, 255, 255, 0.1);
-}
-
-@keyframes hzComposerSpin {
-  to {
-    --hz-angle: 360deg;
-  }
-}
-
-.hz-composer {
-  position: relative;
-  isolation: isolate;
-  padding: 1.5px;
-}
-
-/* The ring DRAWS A RING. `padding` is its thickness; the two-layer mask keeps
-   paint outside it — `content-box` is the hole, the full box the plate, and
-   `exclude` leaves the lip. */
-.hz-composer::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  padding: 1.5px;
-  border-radius: inherit;
-  background: conic-gradient(from var(--hz-angle), var(--hz-spectrum));
-  animation: hzComposerSpin 10s linear infinite;
-  -webkit-mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask-composite: exclude;
-  /* After the standard shorthand: WebKit aliases `mask` onto `-webkit-mask`, so
-     declaring this first lets the shorthand reset it to `source-over` — the
-     filled disc again, on exactly the browsers too old to have `mask-composite`
-     at all. */
-  -webkit-mask-composite: xor;
-  z-index: 0;
-  pointer-events: none;
-}
-
-/* The halo lights the air AROUND the box and nothing behind it. */
-.hz-composer::after {
-  content: "";
-  position: absolute;
-  inset: -6px;
-  padding: 6px;
-  /* Concentric with the box, NOT `inherit`: the halo lives 6px outside, so an
-     inherited corner on this larger box curves too tight and reads as a second,
-     mismatched rounding just outside the panel. */
-  border-radius: calc(1.5rem + 6px);
-  background: conic-gradient(from var(--hz-angle), var(--hz-spectrum));
-  filter: blur(16px);
-  opacity: 0.22;
-  animation: hzComposerSpin 10s linear infinite;
-  -webkit-mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask-composite: exclude;
-  -webkit-mask-composite: xor;
-  z-index: -1;
-  pointer-events: none;
-}
-
-/* The panel sits above ring and halo. */
-.hz-composer > * {
-  position: relative;
-  z-index: 1;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .hz-composer::before,
-  .hz-composer::after {
-    animation: none;
-  }
-}
-
 /* FOCUS RINGS THE CONTROL A PERSON SEES, WHICH IS THE WHOLE COMPOSER.
 
    `Composer` is a bordered box holding a field above a toolbar row, so it reads
@@ -2025,3 +1789,316 @@
   [data-slot='composer-field'] {
   --outlineColor: transparent;
 }
+
+/* @hanzo/ui motion — the calm, restrained animation vocabulary the Hanzo
+   surfaces share. One place defines the easing; components carry the name.
+
+   Import once at the app root:  import '@hanzo/ui/styles/motion.css'
+
+   ── KEYED ON `data-motion`, NEVER ON A CLASS ─────────────────────────────────
+   A component says what it does with one attribute — `data-motion="rise"` — and
+   this sheet says how. The paint (a caret's ink, a skeleton's gradient) is the
+   component's own gui props; what is left here is what no prop can say: a
+   keyframe, a transition a preference can switch off, and the preference
+   itself. Every animation is off under `prefers-reduced-motion: reduce`.
+
+     rise     enter: fade up 10px over 400ms           FadeIn, Timeline, tooltips
+     fade     opacity eases 240ms                      SlideOver's scrim
+     slide    transform eases 260ms                    SlideOver's panel
+     drag     a row eases into place while one is held Reorder
+     pulse    opacity dims and returns, 2s             Pulse, StatusDot, Skeleton
+     blink    on/off, 1s                               Caret
+     shimmer  a highlight sweeps a placeholder         product Skeleton
+     unfold   a sheet turns open about its hinge       unfold()                 */
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+[data-motion='rise'] {
+  animation: rise 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
+  will-change: transform, opacity;
+}
+
+[data-motion='fade'] {
+  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: opacity;
+}
+
+[data-motion='slide'] {
+  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform;
+}
+
+[data-motion='drag'] {
+  touch-action: none;
+  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes dim {
+  50% {
+    opacity: 0.5;
+  }
+}
+
+[data-motion='pulse'] {
+  animation: dim 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes blink {
+  0%,
+  49% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+
+[data-motion='blink'] {
+  animation: blink 1s steps(1) infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -160px 0;
+  }
+  100% {
+    background-position: 160px 0;
+  }
+}
+
+[data-motion='shimmer'] {
+  animation: shimmer 1.2s ease-in-out infinite;
+}
+
+/* Unfold — how a sheet arrives. A panel that appears by fading is a rectangle
+   switching on; a sheet of paper TURNS OPEN about the edge it is hinged on. The
+   hinge is the only knob and the angle follows it, so a turn cannot open the
+   wrong way. `perspective()` inside the transform puts the vanishing point at
+   the sheet's own centre. Seven degrees over 220ms. */
+@keyframes unfold {
+  from {
+    opacity: 0;
+    transform: perspective(1600px) rotateY(var(--turn, -7deg));
+  }
+  to {
+    opacity: 1;
+    transform: perspective(1600px) rotateY(0deg);
+  }
+}
+
+[data-motion='unfold'] {
+  animation: unfold 220ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
+  transform-origin: left center;
+  will-change: transform, opacity;
+}
+
+[data-motion='unfold'][data-hinge='right'] {
+  transform-origin: right center;
+  --turn: 7deg;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-motion] {
+    animation: none;
+    transition: none;
+  }
+}
+
+/* ── Layout guarantee ──────────────────────────────────────────────────────────
+   Structural, so attached to a data attribute: it is the thing the primitive
+   PROMISES, and a class can be lost by forgetting to pass it on. */
+
+/* Media fills the ratio box instead of setting its own size. Without this an
+   <img> renders at its intrinsic pixel size and either overflows the frame or
+   sits letterboxed inside it, and the ratio the caller asked for is decoration.
+   `display:block` kills the inline-baseline gap under the image. */
+[data-ratio] > img,
+[data-ratio] > video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   Scrollbars, on the surfaces this package scrolls.
+
+   Left to the platform this is not neutral: Linux/GTK Chrome draws a wide track
+   with STEPPER ARROWS at both ends, so a dark product grows two grey buttons per
+   scroll region. Windows draws a wide light track. macOS overlays a thin one,
+   which is the behaviour the other two should have had.
+
+   THE TWO HALVES MUST NOT BE DECLARED TOGETHER, and that is the whole subtlety.
+   Chromium supports both the standard properties and the `::-webkit-scrollbar`
+   pseudo-elements — but the moment `scrollbar-width` or `scrollbar-color` is
+   anything other than `auto`, it takes the standard path and DISCARDS the entire
+   webkit block. Shipping both is how 8.1.19 removed nothing: measured headed on
+   Linux, as-shipped gave a 10px gutter with arrows, while the authored webkit
+   rule alone gives 8px with none. Isolated: webkit-only 8px no arrows;
+   standard-only 10px arrows; both together 10px arrows.
+
+   Neither half is redundant, so neither can simply be deleted — Firefox
+   implements ONLY the standard properties, Safari ONLY the webkit ones. They are
+   separated by engine instead: the webkit block applies wherever the selector is
+   understood, and the standard properties apply only where it is not.
+
+   And it is invisible headless. Chromium's headless shell paints OVERLAY
+   scrollbars, so nothing is drawn, `offsetWidth - clientWidth` is 0 on a blank
+   page, and `getComputedStyle(el, '::-webkit-scrollbar-button').display` happily
+   reports `none` for a rule that never ran. This must be checked headed.
+   ───────────────────────────────────────────────────────────────────────────── */
+
+/* Firefox and anything else with no webkit pseudo-elements. */
+@supports not selector(::-webkit-scrollbar) {
+  :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+) {
+    scrollbar-width: thin;
+    scrollbar-color: rgb(255 255 255 / 0.18) transparent;
+  }
+  .t_light :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+) { scrollbar-color: rgb(0 0 0 / 0.20) transparent; }
+}
+
+/* Chromium and Safari.
+   The first rule is the load-bearing one and it is a RESET, not a style.
+   @hanzo/design sets `scrollbar-color` and `scrollbar-width` on `:where(html)`
+   (theme.css), and both INHERIT — so every element in the document already
+   carries a non-`auto` value, Chromium takes the standard path, and the whole
+   webkit block below is discarded before it is read. Nothing declared here can
+   win until the inherited value is put back to `auto` on the element itself.
+   That is why the arrows survived 8.1.19: the competing declaration was one
+   level up and inherited, not a rule anyone would find in this file. */
+@supports selector(::-webkit-scrollbar) {
+  :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+) {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
+
+  :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+)::-webkit-scrollbar { width: 8px; height: 8px; }
+
+  /* The steppers. This is the rule that removes the arrows, and the reason the
+     two halves had to be separated at all. */
+  :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
+
+  :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+)::-webkit-scrollbar-track { background: transparent; }
+
+  :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+)::-webkit-scrollbar-thumb {
+    background: rgb(255 255 255 / 0.18);
+    border-radius: 999px;
+    /* A transparent border with background-clip keeps the thumb off the very
+       edge without a track colour doing it, so it reads as an overlay rather
+       than a channel. */
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+  :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+)::-webkit-scrollbar-thumb:hover {
+    background: rgb(255 255 255 / 0.30);
+    background-clip: content-box;
+  }
+  :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+)::-webkit-scrollbar-corner { background: transparent; }
+
+  .t_light :where(
+  [data-slot='fill'],
+  [data-slot='thread'],
+  [data-slot='sources-strip'],
+  [data-slot='sidebar-scroll'],
+  [data-slot='scroll-area-viewport'],
+  [data-slot='textarea'],
+  [data-slot='composer-field']
+)::-webkit-scrollbar-thumb {
+    background: rgb(0 0 0 / 0.20);
+    background-clip: content-box;
+  }
+}
+
+/* A carousel scrolls but shows no bar: the arrows and the snap already say it
+   scrolls, and a bar appearing mid-drag shifts the slides under the pointer.
+   Firefox reads `scrollbar-width`, which the component sets; WebKit reads only
+   the pseudo-element, which no prop can reach. */
+[data-slot='carousel-content']::-webkit-scrollbar { display: none; }
+
+/* The textarea's resize grip is the other platform artefact in the same family:
+   a diagonal hatch drawn by the UA that matches nothing. A composer that grows
+   with its content does not need one. */
+:where([data-slot='textarea'], [data-slot='composer-field']) { resize: none; }