@hanzo/ui 8.1.19 → 8.1.21

package/dist/dots.cjs

@@ -0,0 +1,208 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SWELL = exports.Dots = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Dots — anything, sampled onto a grid of dots.
+ *
+ * A halftone screen: divide a surface into cells, measure how bright the source
+ * is at each cell, and draw a dot whose radius carries that measurement. It is
+ * the oldest trick in reproduction and it still reads as considered, because the
+ * grid is regular and only the ink varies.
+ *
+ * Three sources, one mechanism. Whatever it is gets rasterised once into an
+ * offscreen canvas, then read back per cell — so an image, a word and a moving
+ * field all take the same path and there is one place the sampling happens:
+ *
+ *   <Dots src="/hero.png" />              a picture
+ *   <Dots text="Ship Apps." />            type
+ *   <Dots field={(x, y, t) => …} />       a function of space and time
+ *
+ * With none of them it draws the default field, a slow diagonal swell, which is
+ * the ambient case a page usually wants behind a headline.
+ *
+ * WEB ONLY, and off the barrel deliberately. `2d` canvas has no counterpart on
+ * React Native, and this package's promise is that a root import runs on native
+ * — so putting this in the barrel would make that false for every consumer. It
+ * lives at `@hanzo/ui/dots`, the same quarantine `product/theme-toggle-next`
+ * uses for its Next dependency: a caller reaches for it on purpose.
+ *
+ * It renders the canvas during SSR and paints in an effect, so a static export
+ * ships a correctly-sized element and no layout moves when the paint lands.
+ */
+const react_1 = require("react");
+/** The default: a diagonal swell, slow enough to read as atmosphere. */
+const SWELL = (x, y, t) => {
+    const d = (x + y) * 2.2 - t * 0.18;
+    // Two waves at different rates so the pattern does not visibly repeat.
+    const v = Math.sin(d * Math.PI) * 0.5 + Math.sin(d * Math.PI * 0.37 + 1.7) * 0.5;
+    return Math.max(0, v) ** 1.6;
+};
+exports.SWELL = SWELL;
+/** The two gradients a `fade` compiles to — one per axis, intersected. */
+const dissolve = (fade) => {
+    if (!fade)
+        return undefined;
+    const f = fade === true ? { top: 0.2, bottom: 0.2, left: 0.2, right: 0.2 } : fade;
+    const stop = (n) => Math.max(0, Math.min(0.5, n ?? 0));
+    const axis = (a, b, dir) => a || b
+        ? `linear-gradient(to ${dir}, ${a ? 'transparent' : '#fff'}, #fff ${(a * 100).toFixed(1)}%, ` +
+            `#fff ${((1 - b) * 100).toFixed(1)}%, ${b ? 'transparent' : '#fff'})`
+        : null;
+    return [axis(stop(f.top), stop(f.bottom), 'bottom'), axis(stop(f.left), stop(f.right), 'right')]
+        .filter(Boolean)
+        .join(', ');
+};
+const Dots = ({ src, text, field, cell = 6, color, animate = true, fade, className, style, }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const canvas = ref.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        // The ink follows the cascade unless told otherwise, so a Dots inside a
+        // themed section is that theme's colour without anyone passing it down.
+        const ink = color ?? getComputedStyle(canvas).color;
+        // Motion is a preference before it is a prop. A field that animates against
+        // an explicit "reduce" setting is the kind of thing nobody notices shipping.
+        const still = !animate ||
+            (typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches);
+        // The offscreen surface the source is rasterised into, at CELL resolution —
+        // one pixel per cell. Sampling a full-resolution bitmap per cell would read
+        // one arbitrary pixel out of many; letting the browser downscale into this
+        // buffer averages the cell for free, which is what a halftone wants.
+        const grid = document.createElement('canvas');
+        const gctx = grid.getContext('2d', { willReadFrequently: true });
+        if (!gctx)
+            return;
+        let raf = 0;
+        let stop = false;
+        let image = null;
+        const started = performance.now();
+        /** Rasterise the source into `grid` at cols×rows, then draw dots from it. */
+        const paint = (t) => {
+            const dpr = Math.min(2, devicePixelRatio || 1);
+            const w = canvas.clientWidth;
+            const h = canvas.clientHeight;
+            if (w < 1 || h < 1)
+                return;
+            if (canvas.width !== Math.round(w * dpr)) {
+                canvas.width = Math.round(w * dpr);
+                canvas.height = Math.round(h * dpr);
+            }
+            const cols = Math.max(1, Math.floor(w / cell));
+            const rows = Math.max(1, Math.floor(h / cell));
+            grid.width = cols;
+            grid.height = rows;
+            if (image) {
+                // `drawImage` into a cols×rows buffer IS the downscale — cover-fit so a
+                // source of any ratio fills without distorting.
+                const s = Math.max(cols / image.width, rows / image.height);
+                const iw = image.width * s;
+                const ih = image.height * s;
+                gctx.clearRect(0, 0, cols, rows);
+                gctx.drawImage(image, (cols - iw) / 2, (rows - ih) / 2, iw, ih);
+            }
+            else if (text) {
+                gctx.clearRect(0, 0, cols, rows);
+                gctx.fillStyle = '#fff';
+                gctx.textAlign = 'center';
+                gctx.textBaseline = 'middle';
+                // Fit the word to the buffer: measure at a known size, then scale.
+                const probe = 64;
+                gctx.font = `700 ${probe}px ${getComputedStyle(canvas).fontFamily}`;
+                const width = gctx.measureText(text).width || 1;
+                const size = Math.min((probe * cols * 0.92) / width, rows * 0.8);
+                gctx.font = `700 ${size}px ${getComputedStyle(canvas).fontFamily}`;
+                gctx.fillText(text, cols / 2, rows / 2);
+            }
+            const sampled = image || text ? gctx.getImageData(0, 0, cols, rows).data : null;
+            const fn = field ?? (sampled ? null : SWELL);
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            ctx.clearRect(0, 0, w, h);
+            ctx.fillStyle = ink;
+            const max = cell * 0.5;
+            for (let row = 0; row < rows; row++) {
+                for (let col = 0; col < cols; col++) {
+                    let v;
+                    if (sampled) {
+                        const i = (row * cols + col) * 4;
+                        // Luminance, weighted by alpha so transparent areas carry no ink.
+                        const a = sampled[i + 3] / 255;
+                        v =
+                            ((sampled[i] * 0.2126 + sampled[i + 1] * 0.7152 + sampled[i + 2] * 0.0722) / 255) * a;
+                    }
+                    else {
+                        v = fn(col / cols, row / rows, t);
+                    }
+                    if (v <= 0.02)
+                        continue;
+                    const r = Math.min(max, max * Math.min(1, v));
+                    ctx.beginPath();
+                    ctx.arc(col * cell + cell / 2, row * cell + cell / 2, r, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+            }
+        };
+        const frame = () => {
+            if (stop)
+                return;
+            paint((performance.now() - started) / 1000);
+            raf = requestAnimationFrame(frame);
+        };
+        const start = () => {
+            // A still source is painted once. Only a field needs a loop, and only when
+            // motion is allowed — an rAF that redraws an unchanging image is a battery
+            // cost with nothing on screen to show for it.
+            if (!still && !image && !text)
+                frame();
+            else
+                paint(0);
+        };
+        if (src) {
+            image = new Image();
+            image.crossOrigin = 'anonymous';
+            image.onload = start;
+            image.src = src;
+        }
+        else {
+            start();
+        }
+        // Re-rasterise on resize: the cell count changes with the box, so a fixed
+        // buffer would stretch rather than re-sample.
+        const ro = new ResizeObserver(() => {
+            if (still || image || text)
+                paint(0);
+        });
+        ro.observe(canvas);
+        return () => {
+            stop = true;
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            if (image)
+                image.onload = null;
+        };
+    }, [src, text, field, cell, color, animate]);
+    const mask = dissolve(fade);
+    return ((0, jsx_runtime_1.jsx)("canvas", { ref: ref, "data-slot": "dots", className: className, style: {
+            display: 'block',
+            width: '100%',
+            height: '100%',
+            // Both spellings: WebKit still wants the prefix for mask-composite, and
+            // a single unprefixed declaration silently drops the second gradient on
+            // Safari — which reads as "the fade only works on one axis".
+            ...(mask
+                ? {
+                    WebkitMaskImage: mask,
+                    maskImage: mask,
+                    WebkitMaskComposite: 'source-in',
+                    maskComposite: 'intersect',
+                }
+                : null),
+            ...style,
+        } }));
+};
+exports.Dots = Dots;

package/dist/dots.d.ts

@@ -0,0 +1,42 @@
+/** Brightness at a point, 0 (dark, no dot) to 1 (full dot). `t` is seconds. */
+export type Field = (x: number, y: number, t: number) => number;
+export interface DotsProps {
+    /** An image to sample. Same-origin or CORS-enabled — a tainted canvas cannot be read back. */
+    src?: string;
+    /** Type to sample. Uses the page's own sans stack, so it matches the brand. */
+    text?: string;
+    /** A function of space and time. `x` and `y` are 0..1; `t` is seconds. */
+    field?: Field;
+    /** Cell pitch in CSS pixels. Smaller is finer and costs more. */
+    cell?: number;
+    /** The ink. Any CSS colour; defaults to the current text colour. */
+    color?: string;
+    /** Animate. A `field` moves; an image or text holds still, so this is ignored for them. */
+    animate?: boolean;
+    /**
+     * Dissolve the field at its edges instead of ending it on a line.
+     *
+     * `true` fades all four sides. An object fades only the sides named, each
+     * value being the fraction of that axis the fade occupies (`0.2` = the outer
+     * fifth). A field that stops abruptly reads as a rectangle someone pasted on;
+     * one that dissolves reads as part of the page.
+     *
+     * This is a mask, not a second overlaid element, so nothing has to be kept in
+     * sync with the canvas and the page background shows through exactly.
+     * Asymmetric values are the useful case: hold the field back where type sits
+     * and let it run where the page is empty.
+     */
+    fade?: boolean | {
+        top?: number;
+        bottom?: number;
+        left?: number;
+        right?: number;
+    };
+    className?: string;
+    style?: React.CSSProperties;
+}
+/** The default: a diagonal swell, slow enough to read as atmosphere. */
+declare const SWELL: Field;
+declare const Dots: ({ src, text, field, cell, color, animate, fade, className, style, }: DotsProps) => import("react/jsx-runtime").JSX.Element;
+export { Dots, SWELL };
+//# sourceMappingURL=dots.d.ts.map

package/dist/dots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dots.d.ts","sourceRoot":"","sources":["../src/dots.tsx"],"names":[],"mappings":"AAgCA,+EAA+E;AAC/E,MAAM,MAAM,KAAK,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;AAE/D,MAAM,WAAW,SAAS;IACxB,8FAA8F;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,0EAA0E;IAC1E,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,iEAAiE;IACjE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACjF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B;AAED,wEAAwE;AACxE,QAAA,MAAM,KAAK,EAAE,KAKZ,CAAA;AAiBD,QAAA,MAAM,IAAI,GAAI,qEAUX,SAAS,4CAkKX,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA"}

package/dist/dots.js

@@ -0,0 +1,205 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Dots — anything, sampled onto a grid of dots.
+ *
+ * A halftone screen: divide a surface into cells, measure how bright the source
+ * is at each cell, and draw a dot whose radius carries that measurement. It is
+ * the oldest trick in reproduction and it still reads as considered, because the
+ * grid is regular and only the ink varies.
+ *
+ * Three sources, one mechanism. Whatever it is gets rasterised once into an
+ * offscreen canvas, then read back per cell — so an image, a word and a moving
+ * field all take the same path and there is one place the sampling happens:
+ *
+ *   <Dots src="/hero.png" />              a picture
+ *   <Dots text="Ship Apps." />            type
+ *   <Dots field={(x, y, t) => …} />       a function of space and time
+ *
+ * With none of them it draws the default field, a slow diagonal swell, which is
+ * the ambient case a page usually wants behind a headline.
+ *
+ * WEB ONLY, and off the barrel deliberately. `2d` canvas has no counterpart on
+ * React Native, and this package's promise is that a root import runs on native
+ * — so putting this in the barrel would make that false for every consumer. It
+ * lives at `@hanzo/ui/dots`, the same quarantine `product/theme-toggle-next`
+ * uses for its Next dependency: a caller reaches for it on purpose.
+ *
+ * It renders the canvas during SSR and paints in an effect, so a static export
+ * ships a correctly-sized element and no layout moves when the paint lands.
+ */
+import { useEffect, useRef } from 'react';
+/** The default: a diagonal swell, slow enough to read as atmosphere. */
+const SWELL = (x, y, t) => {
+    const d = (x + y) * 2.2 - t * 0.18;
+    // Two waves at different rates so the pattern does not visibly repeat.
+    const v = Math.sin(d * Math.PI) * 0.5 + Math.sin(d * Math.PI * 0.37 + 1.7) * 0.5;
+    return Math.max(0, v) ** 1.6;
+};
+/** The two gradients a `fade` compiles to — one per axis, intersected. */
+const dissolve = (fade) => {
+    if (!fade)
+        return undefined;
+    const f = fade === true ? { top: 0.2, bottom: 0.2, left: 0.2, right: 0.2 } : fade;
+    const stop = (n) => Math.max(0, Math.min(0.5, n ?? 0));
+    const axis = (a, b, dir) => a || b
+        ? `linear-gradient(to ${dir}, ${a ? 'transparent' : '#fff'}, #fff ${(a * 100).toFixed(1)}%, ` +
+            `#fff ${((1 - b) * 100).toFixed(1)}%, ${b ? 'transparent' : '#fff'})`
+        : null;
+    return [axis(stop(f.top), stop(f.bottom), 'bottom'), axis(stop(f.left), stop(f.right), 'right')]
+        .filter(Boolean)
+        .join(', ');
+};
+const Dots = ({ src, text, field, cell = 6, color, animate = true, fade, className, style, }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const canvas = ref.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        // The ink follows the cascade unless told otherwise, so a Dots inside a
+        // themed section is that theme's colour without anyone passing it down.
+        const ink = color ?? getComputedStyle(canvas).color;
+        // Motion is a preference before it is a prop. A field that animates against
+        // an explicit "reduce" setting is the kind of thing nobody notices shipping.
+        const still = !animate ||
+            (typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches);
+        // The offscreen surface the source is rasterised into, at CELL resolution —
+        // one pixel per cell. Sampling a full-resolution bitmap per cell would read
+        // one arbitrary pixel out of many; letting the browser downscale into this
+        // buffer averages the cell for free, which is what a halftone wants.
+        const grid = document.createElement('canvas');
+        const gctx = grid.getContext('2d', { willReadFrequently: true });
+        if (!gctx)
+            return;
+        let raf = 0;
+        let stop = false;
+        let image = null;
+        const started = performance.now();
+        /** Rasterise the source into `grid` at cols×rows, then draw dots from it. */
+        const paint = (t) => {
+            const dpr = Math.min(2, devicePixelRatio || 1);
+            const w = canvas.clientWidth;
+            const h = canvas.clientHeight;
+            if (w < 1 || h < 1)
+                return;
+            if (canvas.width !== Math.round(w * dpr)) {
+                canvas.width = Math.round(w * dpr);
+                canvas.height = Math.round(h * dpr);
+            }
+            const cols = Math.max(1, Math.floor(w / cell));
+            const rows = Math.max(1, Math.floor(h / cell));
+            grid.width = cols;
+            grid.height = rows;
+            if (image) {
+                // `drawImage` into a cols×rows buffer IS the downscale — cover-fit so a
+                // source of any ratio fills without distorting.
+                const s = Math.max(cols / image.width, rows / image.height);
+                const iw = image.width * s;
+                const ih = image.height * s;
+                gctx.clearRect(0, 0, cols, rows);
+                gctx.drawImage(image, (cols - iw) / 2, (rows - ih) / 2, iw, ih);
+            }
+            else if (text) {
+                gctx.clearRect(0, 0, cols, rows);
+                gctx.fillStyle = '#fff';
+                gctx.textAlign = 'center';
+                gctx.textBaseline = 'middle';
+                // Fit the word to the buffer: measure at a known size, then scale.
+                const probe = 64;
+                gctx.font = `700 ${probe}px ${getComputedStyle(canvas).fontFamily}`;
+                const width = gctx.measureText(text).width || 1;
+                const size = Math.min((probe * cols * 0.92) / width, rows * 0.8);
+                gctx.font = `700 ${size}px ${getComputedStyle(canvas).fontFamily}`;
+                gctx.fillText(text, cols / 2, rows / 2);
+            }
+            const sampled = image || text ? gctx.getImageData(0, 0, cols, rows).data : null;
+            const fn = field ?? (sampled ? null : SWELL);
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            ctx.clearRect(0, 0, w, h);
+            ctx.fillStyle = ink;
+            const max = cell * 0.5;
+            for (let row = 0; row < rows; row++) {
+                for (let col = 0; col < cols; col++) {
+                    let v;
+                    if (sampled) {
+                        const i = (row * cols + col) * 4;
+                        // Luminance, weighted by alpha so transparent areas carry no ink.
+                        const a = sampled[i + 3] / 255;
+                        v =
+                            ((sampled[i] * 0.2126 + sampled[i + 1] * 0.7152 + sampled[i + 2] * 0.0722) / 255) * a;
+                    }
+                    else {
+                        v = fn(col / cols, row / rows, t);
+                    }
+                    if (v <= 0.02)
+                        continue;
+                    const r = Math.min(max, max * Math.min(1, v));
+                    ctx.beginPath();
+                    ctx.arc(col * cell + cell / 2, row * cell + cell / 2, r, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+            }
+        };
+        const frame = () => {
+            if (stop)
+                return;
+            paint((performance.now() - started) / 1000);
+            raf = requestAnimationFrame(frame);
+        };
+        const start = () => {
+            // A still source is painted once. Only a field needs a loop, and only when
+            // motion is allowed — an rAF that redraws an unchanging image is a battery
+            // cost with nothing on screen to show for it.
+            if (!still && !image && !text)
+                frame();
+            else
+                paint(0);
+        };
+        if (src) {
+            image = new Image();
+            image.crossOrigin = 'anonymous';
+            image.onload = start;
+            image.src = src;
+        }
+        else {
+            start();
+        }
+        // Re-rasterise on resize: the cell count changes with the box, so a fixed
+        // buffer would stretch rather than re-sample.
+        const ro = new ResizeObserver(() => {
+            if (still || image || text)
+                paint(0);
+        });
+        ro.observe(canvas);
+        return () => {
+            stop = true;
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            if (image)
+                image.onload = null;
+        };
+    }, [src, text, field, cell, color, animate]);
+    const mask = dissolve(fade);
+    return (_jsx("canvas", { ref: ref, "data-slot": "dots", className: className, style: {
+            display: 'block',
+            width: '100%',
+            height: '100%',
+            // Both spellings: WebKit still wants the prefix for mask-composite, and
+            // a single unprefixed declaration silently drops the second gradient on
+            // Safari — which reads as "the fade only works on one axis".
+            ...(mask
+                ? {
+                    WebkitMaskImage: mask,
+                    maskImage: mask,
+                    WebkitMaskComposite: 'source-in',
+                    maskComposite: 'intersect',
+                }
+                : null),
+            ...style,
+        } }));
+};
+export { Dots, SWELL };
+//# sourceMappingURL=dots.js.map

package/dist/dots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dots.js","sourceRoot":"","sources":["../src/dots.tsx"],"names":[],"mappings":"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"}

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.19</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.21</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.
  *
@@ -1957,24 +1957,34 @@
 /* ─────────────────────────────────────────────────────────────────────────────
    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.
+   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.
    ───────────────────────────────────────────────────────────────────────────── */
-:where(
+
+/* 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'],
@@ -1983,12 +1993,44 @@
   [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;
-}
+    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(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -1996,13 +2038,11 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
+)::-webkit-scrollbar { width: 8px; height: 8px; }
 
-/* The steppers. This is the rule that removes the arrows. */
-:where(
+  /* 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'],
@@ -2010,13 +2050,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar-button {
-  display: none;
-  width: 0;
-  height: 0;
-}
+)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
 
-:where(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2024,11 +2060,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar-track {
-  background: transparent;
-}
+)::-webkit-scrollbar-track { background: transparent; }
 
-:where(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2037,16 +2071,15 @@
   [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(
+    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'],
@@ -2055,12 +2088,10 @@
   [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(
+    background: rgb(255 255 255 / 0.30);
+    background-clip: content-box;
+  }
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2068,11 +2099,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-) {
-  scrollbar-color: rgb(0 0 0 / 0.20) transparent;
-}
+)::-webkit-scrollbar-corner { background: transparent; }
 
-.t_light :where(
+  .t_light :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2081,17 +2110,15 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 )::-webkit-scrollbar-thumb {
-  background: rgb(0 0 0 / 0.20);
-  background-clip: content-box;
+    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;
-}
+   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; }
 
 ._ovs-contain {overscroll-behavior:contain;}
 .t_unmounted .is_View, .t_unmounted .is_Text { transition: none !important; }

package/dist/styles/motion.css

@@ -269,24 +269,34 @@
 /* ─────────────────────────────────────────────────────────────────────────────
    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.
+   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.
    ───────────────────────────────────────────────────────────────────────────── */
-:where(
+
+/* 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'],
@@ -295,12 +305,44 @@
   [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;
-}
+    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(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -308,13 +350,11 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
+)::-webkit-scrollbar { width: 8px; height: 8px; }
 
-/* The steppers. This is the rule that removes the arrows. */
-:where(
+  /* 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'],
@@ -322,13 +362,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar-button {
-  display: none;
-  width: 0;
-  height: 0;
-}
+)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
 
-:where(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -336,11 +372,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar-track {
-  background: transparent;
-}
+)::-webkit-scrollbar-track { background: transparent; }
 
-:where(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -349,16 +383,15 @@
   [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(
+    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'],
@@ -367,12 +400,10 @@
   [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(
+    background: rgb(255 255 255 / 0.30);
+    background-clip: content-box;
+  }
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -380,11 +411,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-) {
-  scrollbar-color: rgb(0 0 0 / 0.20) transparent;
-}
+)::-webkit-scrollbar-corner { background: transparent; }
 
-.t_light :where(
+  .t_light :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -393,14 +422,12 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 )::-webkit-scrollbar-thumb {
-  background: rgb(0 0 0 / 0.20);
-  background-clip: content-box;
+    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;
-}
+   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; }

package/dist/styles.css

@@ -1957,24 +1957,34 @@
 /* ─────────────────────────────────────────────────────────────────────────────
    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.
+   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.
    ───────────────────────────────────────────────────────────────────────────── */
-:where(
+
+/* 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'],
@@ -1983,12 +1993,44 @@
   [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;
-}
+    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(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -1996,13 +2038,11 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
+)::-webkit-scrollbar { width: 8px; height: 8px; }
 
-/* The steppers. This is the rule that removes the arrows. */
-:where(
+  /* 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'],
@@ -2010,13 +2050,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar-button {
-  display: none;
-  width: 0;
-  height: 0;
-}
+)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
 
-:where(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2024,11 +2060,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-)::-webkit-scrollbar-track {
-  background: transparent;
-}
+)::-webkit-scrollbar-track { background: transparent; }
 
-:where(
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2037,16 +2071,15 @@
   [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(
+    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'],
@@ -2055,12 +2088,10 @@
   [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(
+    background: rgb(255 255 255 / 0.30);
+    background-clip: content-box;
+  }
+  :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2068,11 +2099,9 @@
   [data-slot='scroll-area-viewport'],
   [data-slot='textarea'],
   [data-slot='composer-field']
-) {
-  scrollbar-color: rgb(0 0 0 / 0.20) transparent;
-}
+)::-webkit-scrollbar-corner { background: transparent; }
 
-.t_light :where(
+  .t_light :where(
   [data-slot='fill'],
   [data-slot='thread'],
   [data-slot='sources-strip'],
@@ -2081,17 +2110,15 @@
   [data-slot='textarea'],
   [data-slot='composer-field']
 )::-webkit-scrollbar-thumb {
-  background: rgb(0 0 0 / 0.20);
-  background-clip: content-box;
+    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;
-}
+   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; }
 
 ._ovs-contain {overscroll-behavior:contain;}
 .t_unmounted .is_View, .t_unmounted .is_Text { transition: none !important; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.1.19",
+  "version": "8.1.21",
   "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": {
@@ -183,6 +183,11 @@
       "import": "./dist/tw.js",
       "require": "./dist/tw.cjs",
       "default": "./dist/tw.js"
+    },
+    "./dots": {
+      "types": "./dist/dots.d.ts",
+      "import": "./dist/dots.js",
+      "require": "./dist/dots.cjs"
     }
   },
   "main": "./dist/index.cjs",