@hanzo/ui 8.1.17 → 8.1.19

package/dist/backends/gui/screen.cjs

@@ -26,12 +26,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * clip built in, and a caller cannot forget a thing it does not have to write.
  *
  * WHY NOT CSS GRID, which expresses this as one line — `grid-template-rows: auto
- * 1fr auto` — with no escape hatch at all: because this package's premise is that
- * one import runs on web AND native, and React Native lays out through Yoga,
- * which implements flexbox and has no grid. That is not a gap a fork can close;
- * Yoga is the native runtime's engine. Grid is right where the target is a
- * browser, and `Grid` exists for that. A shell has to work on both, so it is
- * flexbox on the inside and neither caller has to know.
+ * 1fr auto` — with no escape hatch at all: because React Native lays out through
+ * Yoga, and Yoga ships flexbox only. That is a gap a fork CAN close — Yoga is
+ * open-source C++, and an experimental patch adds a real `YGDisplayGrid`
+ * (GridLayout.cpp, AutoPlacement.h, TrackSizing.h) with working iOS and Android
+ * builds, native layout rather than a webview. It is not closed here yet: the
+ * patch wants React Native 0.83-rc and an Expo canary, and taking it means this
+ * fork carries a C++ layout-engine patch rebased on every upgrade.
+ *
+ * So the reason is a pin, not a law, and `Screen` is what the shell looks like
+ * either way — a caller writes the same two components whether the inside is
+ * flexbox today or grid later. `Grid` already exists for web-only surfaces.
  */
 const gui_1 = require("@hanzo/gui");
 const slot_1 = require("./slot.cjs");

package/dist/backends/gui/screen.d.ts

@@ -21,12 +21,17 @@
  * clip built in, and a caller cannot forget a thing it does not have to write.
  *
  * WHY NOT CSS GRID, which expresses this as one line — `grid-template-rows: auto
- * 1fr auto` — with no escape hatch at all: because this package's premise is that
- * one import runs on web AND native, and React Native lays out through Yoga,
- * which implements flexbox and has no grid. That is not a gap a fork can close;
- * Yoga is the native runtime's engine. Grid is right where the target is a
- * browser, and `Grid` exists for that. A shell has to work on both, so it is
- * flexbox on the inside and neither caller has to know.
+ * 1fr auto` — with no escape hatch at all: because React Native lays out through
+ * Yoga, and Yoga ships flexbox only. That is a gap a fork CAN close — Yoga is
+ * open-source C++, and an experimental patch adds a real `YGDisplayGrid`
+ * (GridLayout.cpp, AutoPlacement.h, TrackSizing.h) with working iOS and Android
+ * builds, native layout rather than a webview. It is not closed here yet: the
+ * patch wants React Native 0.83-rc and an Expo canary, and taking it means this
+ * fork carries a C++ layout-engine patch rebased on every upgrade.
+ *
+ * So the reason is a pin, not a law, and `Screen` is what the shell looks like
+ * either way — a caller writes the same two components whether the inside is
+ * flexbox today or grid later. `Grid` already exists for web-only surfaces.
  */
 import { type YStackProps } from '@hanzo/gui';
 export interface ScreenProps extends YStackProps {

package/dist/backends/gui/screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screen.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/screen.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAGrD,MAAM,WAAW,WAAY,SAAQ,WAAW;CAAG;AAEnD;;;;GAIG;AACH,QAAA,MAAM,MAAM,GAAI,wBAAwB,WAAW,4CAkBlD,CAAA;AAED,MAAM,WAAW,SAAU,SAAQ,WAAW;IAC5C,6EAA6E;IAC7E,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI,GAAI,gCAAuC,SAAS,4CAY7D,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"screen.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/screen.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAGrD,MAAM,WAAW,WAAY,SAAQ,WAAW;CAAG;AAEnD;;;;GAIG;AACH,QAAA,MAAM,MAAM,GAAI,wBAAwB,WAAW,4CAkBlD,CAAA;AAED,MAAM,WAAW,SAAU,SAAQ,WAAW;IAC5C,6EAA6E;IAC7E,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI,GAAI,gCAAuC,SAAS,4CAY7D,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA"}

package/dist/backends/gui/screen.js

@@ -23,12 +23,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * clip built in, and a caller cannot forget a thing it does not have to write.
  *
  * WHY NOT CSS GRID, which expresses this as one line — `grid-template-rows: auto
- * 1fr auto` — with no escape hatch at all: because this package's premise is that
- * one import runs on web AND native, and React Native lays out through Yoga,
- * which implements flexbox and has no grid. That is not a gap a fork can close;
- * Yoga is the native runtime's engine. Grid is right where the target is a
- * browser, and `Grid` exists for that. A shell has to work on both, so it is
- * flexbox on the inside and neither caller has to know.
+ * 1fr auto` — with no escape hatch at all: because React Native lays out through
+ * Yoga, and Yoga ships flexbox only. That is a gap a fork CAN close — Yoga is
+ * open-source C++, and an experimental patch adds a real `YGDisplayGrid`
+ * (GridLayout.cpp, AutoPlacement.h, TrackSizing.h) with working iOS and Android
+ * builds, native layout rather than a webview. It is not closed here yet: the
+ * patch wants React Native 0.83-rc and an Expo canary, and taking it means this
+ * fork carries a C++ layout-engine patch rebased on every upgrade.
+ *
+ * So the reason is a pin, not a law, and `Screen` is what the shell looks like
+ * either way — a caller writes the same two components whether the inside is
+ * flexbox today or grid later. `Grid` already exists for web-only surfaces.
  */
 import { YStack } from '@hanzo/gui';
 import { slot } from './slot.js';

package/dist/backends/gui/screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"screen.js","sourceRoot":"","sources":["../../../src/backends/gui/screen.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,OAAO,EAAE,MAAM,EAAoB,MAAM,YAAY,CAAA;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAI7B;;;;GAIG;AACH,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE,CAAC,CACtD,KAAC,MAAM,OACD,IAAI,CAAC,QAAQ,CAAC;IAClB,yEAAyE;IACzE,6EAA6E;IAC7E,4EAA4E;IAC5E,wEAAwE;IACxE,0EAA0E;IAC1E,8EAA8E;IAC9E,IAAI,EAAE,CAAC,EACP,SAAS,EAAC,MAAM,EAChB,IAAI,EAAE,CAAC,EACP,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAC,QAAQ,KACb,KAAK,YAER,QAAQ,GACF,CACV,CAAA;AAOD;;;;;;;GAOG;AACH,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE,CAAC,CACjE,KAAC,MAAM,OACD,IAAI,CAAC,MAAM,CAAC,EAChB,IAAI,EAAE,CAAC,EACP,SAAS,EAAE,CAAC,EACZ,IAAI,EAAE,CAAC,EACP,KAAK,EAAC,MAAM,EACZ,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,KACjC,KAAK,YAER,QAAQ,GACF,CACV,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"screen.js","sourceRoot":"","sources":["../../../src/backends/gui/screen.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAAE,MAAM,EAAoB,MAAM,YAAY,CAAA;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAI7B;;;;GAIG;AACH,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE,CAAC,CACtD,KAAC,MAAM,OACD,IAAI,CAAC,QAAQ,CAAC;IAClB,yEAAyE;IACzE,6EAA6E;IAC7E,4EAA4E;IAC5E,wEAAwE;IACxE,0EAA0E;IAC1E,8EAA8E;IAC9E,IAAI,EAAE,CAAC,EACP,SAAS,EAAC,MAAM,EAChB,IAAI,EAAE,CAAC,EACP,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAC,QAAQ,KACb,KAAK,YAER,QAAQ,GACF,CACV,CAAA;AAOD;;;;;;;GAOG;AACH,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE,CAAC,CACjE,KAAC,MAAM,OACD,IAAI,CAAC,MAAM,CAAC,EAChB,IAAI,EAAE,CAAC,EACP,SAAS,EAAE,CAAC,EACZ,IAAI,EAAE,CAAC,EACP,KAAK,EAAC,MAAM,EACZ,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,KACjC,KAAK,YAER,QAAQ,GACF,CACV,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA"}

package/dist/gallery.html

@@ -1,4 +1,4 @@
-<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.1.17</title><style>/* @hanzo/ui — generated by scripts/gen-css.mjs. Do not edit. */
+<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.1.19</title><style>/* @hanzo/ui — generated by scripts/gen-css.mjs. Do not edit. */
 :root { --hanzo-ui-styles: 1; }
 /* Hanzo Design System — the entry point. Import THIS one file.
  *
@@ -1953,6 +1953,146 @@
   display: block;
 }
 
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   Scrollbars, on the surfaces this package scrolls.
+
+   A scroll region is a component decision, so its scrollbar is one too. Left to
+   the platform it is not neutral: on Linux/GTK Chrome draws a wide track with
+   STEPPER ARROWS at both ends, and a dark product grows two grey buttons per
+   scroll region — visible in chat's thread, its source strip and the composer at
+   the same time. Windows draws a wide light track. macOS overlays a thin one and
+   hides it, which is the behaviour the other two should have had.
+
+   So the package states it, and states it ONCE, for the five slots that actually
+   scroll (measured, not guessed: textarea, fill, thread, sources-strip,
+   composer-field). Scoping to our own slots is the point — a component library
+   restyling the HOST's page scrollbars is taking a decision that is not its own.
+
+   `::-webkit-scrollbar-button { display: none }` is the line that removes the
+   steppers; without it the arrows survive every other rule here. The thumb sits
+   on the same alpha ladder as every other edge, so it lifts with its surface
+   instead of being a fixed grey that only suits one theme.
+   ───────────────────────────────────────────────────────────────────────────── */
+: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']
+) {
+  /* Firefox — no pseudo-elements, two properties, same intent. */
+  scrollbar-width: thin;
+  scrollbar-color: rgb(255 255 255 / 0.18) 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 {
+  width: 8px;
+  height: 8px;
+}
+
+/* The steppers. This is the rule that removes the arrows. */
+: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, which is what makes it read 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;
+}
+
+/* The light theme reads the same ladder from the other side. */
+.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;
+}
+
+.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;
+}
+
+/* The textarea's resize grip is the other platform artefact in the same family:
+   a diagonal hatch in the corner of every Textarea and composer, drawn by the UA
+   and matching nothing. A composer that grows with its content does not need a
+   drag handle, and one that does not grow should not offer a broken one. */
+:where([data-slot='textarea'], [data-slot='composer-field']) {
+  resize: none;
+}
+
 ._ovs-contain {overscroll-behavior:contain;}
 .t_unmounted .is_View, .t_unmounted .is_Text { transition: none !important; }
 .is_View { display: flex; align-items: stretch; flex-direction: column; flex-basis: auto; box-sizing: border-box; min-height: 0; min-width: 0; flex-shrink: 0; }

package/dist/styles/motion.css

@@ -264,3 +264,143 @@
   object-fit: cover;
   display: block;
 }
+
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   Scrollbars, on the surfaces this package scrolls.
+
+   A scroll region is a component decision, so its scrollbar is one too. Left to
+   the platform it is not neutral: on Linux/GTK Chrome draws a wide track with
+   STEPPER ARROWS at both ends, and a dark product grows two grey buttons per
+   scroll region — visible in chat's thread, its source strip and the composer at
+   the same time. Windows draws a wide light track. macOS overlays a thin one and
+   hides it, which is the behaviour the other two should have had.
+
+   So the package states it, and states it ONCE, for the five slots that actually
+   scroll (measured, not guessed: textarea, fill, thread, sources-strip,
+   composer-field). Scoping to our own slots is the point — a component library
+   restyling the HOST's page scrollbars is taking a decision that is not its own.
+
+   `::-webkit-scrollbar-button { display: none }` is the line that removes the
+   steppers; without it the arrows survive every other rule here. The thumb sits
+   on the same alpha ladder as every other edge, so it lifts with its surface
+   instead of being a fixed grey that only suits one theme.
+   ───────────────────────────────────────────────────────────────────────────── */
+: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']
+) {
+  /* Firefox — no pseudo-elements, two properties, same intent. */
+  scrollbar-width: thin;
+  scrollbar-color: rgb(255 255 255 / 0.18) 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 {
+  width: 8px;
+  height: 8px;
+}
+
+/* The steppers. This is the rule that removes the arrows. */
+: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, which is what makes it read 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;
+}
+
+/* The light theme reads the same ladder from the other side. */
+.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;
+}
+
+.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;
+}
+
+/* The textarea's resize grip is the other platform artefact in the same family:
+   a diagonal hatch in the corner of every Textarea and composer, drawn by the UA
+   and matching nothing. A composer that grows with its content does not need a
+   drag handle, and one that does not grow should not offer a broken one. */
+:where([data-slot='textarea'], [data-slot='composer-field']) {
+  resize: none;
+}

package/dist/styles.css

@@ -1953,6 +1953,146 @@
   display: block;
 }
 
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   Scrollbars, on the surfaces this package scrolls.
+
+   A scroll region is a component decision, so its scrollbar is one too. Left to
+   the platform it is not neutral: on Linux/GTK Chrome draws a wide track with
+   STEPPER ARROWS at both ends, and a dark product grows two grey buttons per
+   scroll region — visible in chat's thread, its source strip and the composer at
+   the same time. Windows draws a wide light track. macOS overlays a thin one and
+   hides it, which is the behaviour the other two should have had.
+
+   So the package states it, and states it ONCE, for the five slots that actually
+   scroll (measured, not guessed: textarea, fill, thread, sources-strip,
+   composer-field). Scoping to our own slots is the point — a component library
+   restyling the HOST's page scrollbars is taking a decision that is not its own.
+
+   `::-webkit-scrollbar-button { display: none }` is the line that removes the
+   steppers; without it the arrows survive every other rule here. The thumb sits
+   on the same alpha ladder as every other edge, so it lifts with its surface
+   instead of being a fixed grey that only suits one theme.
+   ───────────────────────────────────────────────────────────────────────────── */
+: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']
+) {
+  /* Firefox — no pseudo-elements, two properties, same intent. */
+  scrollbar-width: thin;
+  scrollbar-color: rgb(255 255 255 / 0.18) 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 {
+  width: 8px;
+  height: 8px;
+}
+
+/* The steppers. This is the rule that removes the arrows. */
+: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, which is what makes it read 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;
+}
+
+/* The light theme reads the same ladder from the other side. */
+.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;
+}
+
+.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;
+}
+
+/* The textarea's resize grip is the other platform artefact in the same family:
+   a diagonal hatch in the corner of every Textarea and composer, drawn by the UA
+   and matching nothing. A composer that grows with its content does not need a
+   drag handle, and one that does not grow should not offer a broken one. */
+:where([data-slot='textarea'], [data-slot='composer-field']) {
+  resize: none;
+}
+
 ._ovs-contain {overscroll-behavior:contain;}
 .t_unmounted .is_View, .t_unmounted .is_Text { transition: none !important; }
 .is_View { display: flex; align-items: stretch; flex-direction: column; flex-basis: auto; box-sizing: border-box; min-height: 0; min-width: 0; flex-shrink: 0; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.1.17",
+  "version": "8.1.19",
   "type": "module",
   "description": "Hanzo UI — the one canonical Hanzo component library, on @hanzo/gui + @hanzo/design. ONE substrate: every component renders through @hanzo/gui primitives, so the same import works on web, native (expo) and desktop (Tauri). Self-contained (theme.css), presentational, host-agnostic, clean-room.",
   "exports": {