@hanzo/ui 8.0.47 → 8.0.48

package/dist/glass.d.ts

@@ -0,0 +1,243 @@
+/**
+ * The rungs a FLOATING surface may stand on.
+ *
+ * There is no 1: rung 1 is rest, and a floating thing is never at rest. The
+ * type says so, so the mistake cannot be typed.
+ */
+export type Lift = 2 | 3;
+/**
+ * Glass — the material floating chrome is made of, and only floating chrome.
+ *
+ * Menus, dialogs, popovers, toasts, sticky bars: things with page under them.
+ * Vibrancy is a lens, so a surface covering nothing but the flat canvas has
+ * nothing to soften — an in-flow card wearing this is not glass, it is the page
+ * with extra steps, one shade off what it sits on and harder to find than
+ * `panel`. Over content -> `glass`, in the flow -> `panel`. No third case.
+ *
+ * The library's own dialogs, popovers, selects, dropdowns and tooltips are
+ * already glass BY SLOT — `glass.css` attaches the material to what a thing IS,
+ * so they need nothing from a call site and cannot fall out of step. This is
+ * for the surfaces no slot names: a hand-rolled bar, a custom menu, a docked
+ * toolbar.
+ *
+ * MATERIAL ONLY, no geometry. What glass is made of does not tell you what
+ * shape it was cut into: a menu is rounded on four sides, a sticky bar is
+ * full-bleed with one hairline along its bottom. Baking `borderRadius` and
+ * `borderWidth` in here would make every bar undo them, so edges stay at the
+ * call site — which only ever needs to say WHICH ones (`borderBottomWidth={1}`),
+ * never what colour, because the material already knows.
+ *
+ * The level is the one thing that genuinely varies, so it is the argument
+ * (`selected(on)` is shaped the same way). 2 is anchored — a menu, a toast, a
+ * bar, lifted off the page but tied to it. 3 is a modal, floating free over
+ * everything with a scrim under it.
+ *
+ * `backgroundColor` is the opaque fallback, and it is load-bearing rather than
+ * belt-and-braces: the material lives inside `@supports (backdrop-filter)`, so
+ * a browser that cannot blur gets no rule at all — and a menu with no
+ * background is a menu you read the page through.
+ */
+export declare const glass: (level?: Lift) => {
+    readonly className: "glass elevation-2" | "glass elevation-3";
+    readonly backgroundColor: "$background";
+    readonly borderColor: "$borderColor";
+};
+/**
+ * The scrim under anything modal — the dim that makes a floating panel read as
+ * floating rather than as more page.
+ *
+ * Hand-rolled modals reach for `backgroundColor="black"`, with no alpha. That
+ * does not dim the page behind them, it DELETES it — and a glass panel over a
+ * solid black wall has nothing left to be translucent about, so the scrim
+ * cancels the very material it exists to make read.
+ *
+ * The value is a design token, not a literal, because both languages need it
+ * and only one of them can hold the copy: `[data-slot="dialog-overlay"]` reads
+ * `--surface-scrim` in `glass.css` and this reads the same token, so the dim
+ * behind a library dialog and the dim behind a hand-rolled one are the same dim
+ * by construction rather than by two people remembering a number.
+ */
+export declare const scrim: {
+    readonly backgroundColor: "var(--surface-scrim, rgb(0 0 0 / .8))";
+};
+/**
+ * A panel: the quiet surface content in the FLOW sits on.
+ *
+ * `$color2` is a step off the page, so the fill alone separates the panel from
+ * the page and the hairline only finishes the edge. Panels are otherwise
+ * variously `$background` (a border with nothing behind it), `$color3` (which
+ * is the ACTIVE-item fill — a state, not a surface) and as many radii as there
+ * are authors.
+ *
+ * Rung 1 on the ladder, which is NOT the same claim as "this floats". A cast
+ * shadow does say "above the page", and that stays false for a panel in the
+ * flow — so rung 1 spends almost nothing on shadow and buys its depth from the
+ * lit top edge instead. On a near-black canvas that is the only half that reads
+ * at all.
+ */
+export declare const panel: {
+    readonly backgroundColor: "$color2";
+    readonly borderWidth: 1;
+    readonly borderColor: "$borderColor";
+    readonly borderRadius: "$6";
+    readonly className: "elevation-1";
+};
+/**
+ * A group of rows — the settings card, and the reason a settings page ends up
+ * with four cards where it wanted one.
+ *
+ * Four toggles as four separate panels reads as four unrelated decisions, each
+ * with its own four edges; the same four inside one card, parted by hairlines,
+ * reads as one set and drops twelve edges of noise. That is the macOS settings
+ * group, and it is the shape every settings surface reaches for by hand.
+ *
+ * `overflow: hidden` is not decoration — the separators are drawn by the card
+ * (`[data-slot="rows"] > * + *`), and without the clip the topmost one runs
+ * straight through the rounded corner and out the side.
+ *
+ * It spreads `panel` WHOLE, so moving the panel up or down the ladder moves its
+ * groups with it. The separator hangs off a slot rather than a second class
+ * name for the same reason: there is no string to keep in step.
+ */
+export declare const rows: {
+    readonly overflow: "hidden";
+    readonly backgroundColor: "$color2";
+    readonly borderWidth: 1;
+    readonly borderColor: "$borderColor";
+    readonly borderRadius: "$6";
+    readonly className: "elevation-1";
+};
+/**
+ * One line inside a `rows` card: name on the left, control hard right.
+ *
+ * The rhythm, so it stops being re-decided per file. Pair it with a label at
+ * `fontSize="$3"` in `$color` and any explanation under it at `$1` in
+ * `$color11` — both halves matter, because a row whose label is written at
+ * `$color11` (the SECONDARY colour) gives the name of the setting and the
+ * footnote about it the same weight of grey, and the row has no first thing to
+ * read.
+ *
+ * No border here. A row that draws its own top hairline is a row that has to
+ * know whether it is first, and the card already knows — see `rows`.
+ */
+export declare const row: {
+    readonly flexDirection: "row";
+    readonly alignItems: "center";
+    readonly justifyContent: "space-between";
+    readonly gap: "$4";
+    readonly paddingHorizontal: "$4";
+    readonly paddingVertical: "$3";
+};
+/**
+ * Selected — the ONE "you are here" look, wherever a set offers a choice: nav
+ * rows, tabs, a filter chip.
+ *
+ * `$color3` fill with a full-strength label, one step above the panel it sits
+ * on. The alternatives in the wild are a pure-white lozenge, and — far more
+ * often — no answer at all: an unstyled `TabsTrigger` paints a selected tab
+ * exactly like its neighbours, so the page simply does not say which one you
+ * are on. Nothing in the markup looks wrong; the state has no picture.
+ *
+ * The label is `$color12`, not `$color`, and that is a measured distinction
+ * rather than a preference. Themes NEST: at the page scope `--color` is
+ * hsl(0 0% 100%), but inside a sidebar's scope it is re-based to hsl(0 0% 80%)
+ * — the SAME value as `--color11`. So a selected row asking for `$color` gets
+ * exactly its neighbours' colour, and had been doing so all along; the markup
+ * said "highlight this" and the token quietly collapsed underneath. `$color12`
+ * is the theme's full-strength foreground in every scope, so the state survives
+ * nesting.
+ */
+export declare const selected: (on: boolean) => {
+    readonly backgroundColor: "$color3";
+    readonly color: "$color12";
+} | {
+    readonly backgroundColor: "transparent";
+    readonly color: "$color11";
+};
+/**
+ * The primary control — the ONE loud thing a page is allowed.
+ *
+ * `$color5` on `$color6` is a raised pushbutton: legible, quiet, monochrome.
+ *
+ * Under-emphasis is the failure mode, and it leaves no mark on a screenshot,
+ * which is exactly why it needs a rule rather than an eye. `Button`'s `default`
+ * variant is a QUIET control on the surface ladder (`$color2`, the same fill
+ * `panel` uses), so a dialog whose only action is an unnamed `<Button>` paints
+ * its single ask as another surface. Name a variant on every control, and when
+ * one is the primary action, spread this. Never `variant="default"`.
+ *
+ * Not `variant="primary"` either, even though it paints the same pixels — a
+ * variant only reaches a `Button`, and half the loud controls in a real app are
+ * an `XStack`, a `SizableText` or a `Link`.
+ */
+export declare const accent: {
+    readonly backgroundColor: "$color5";
+    readonly borderWidth: 1;
+    readonly borderColor: "$color6";
+    /**
+     * The foreground is part of the recipe, not an afterthought.
+     *
+     * Spell the fill by hand and you own the label too, and that half is the one
+     * people drop: a hand-spelled `color="$color1"` (4% grey) on a fill that has
+     * since moved to `$color2` (8%) paints a label at 1.07:1 — measured in the
+     * browser, not guessed. The sign-in modal's only button was invisible.
+     *
+     * And it only reaches a label the BUTTON paints. This is the half that is
+     * easy to miss: `<Button {...accent}><SizableText>…</SizableText></Button>`
+     * puts a second component between the recipe and the text, and that component
+     * resolves its own colour from the theme scope the Button just mounted —
+     * where `--color` is re-based to 80%. Measured: fill rgb(51,51,51) and border
+     * rgb(69,69,69), correct, with the label at rgb(204,204,204) — `$color11`,
+     * the QUIET foreground, on the loudest control in the dialog.
+     *
+     * Two guesses about the cure are both WRONG, and each was measured:
+     *
+     *   - "Just don't name a colour." A bare `<SizableText>` inside the Button
+     *     still measures rgb(204,204,204). Silence is not neutral here; the
+     *     nested scope answers for you. The rule is to SAY `$color12`, not to say
+     *     nothing.
+     *   - "Hoist the size to the Button and drop the wrapper." `fontSize="$1"` on
+     *     the Button does not reach the label — still the `size` default. So a
+     *     control that genuinely wants a smaller label keeps its wrapper.
+     *
+     * Which leaves two honest shapes. No size of your own -> hand the string
+     * straight to the Button and let its text host paint it. A deliberate size or
+     * `numberOfLines` -> keep the wrapper and give it `color="$color12"`.
+     *
+     * BUTTON ONLY. A plain `XStack` mounts no theme scope, so a label inside one
+     * that asks for `$color` measures rgb(255,255,255) — correct, and not to be
+     * "fixed". The ban is exactly as wide as the re-basing.
+     */
+    readonly color: "$color12";
+    readonly hoverStyle: {
+        readonly backgroundColor: "$color6";
+        readonly color: "$color12";
+    };
+};
+/**
+ * A state that owns the whole screen: a loading gate, a 404, a crash screen, an
+ * OAuth callback, a receipt. It stands alone — no shell above it — so it must
+ * MEASURE the screen itself.
+ *
+ * `minHeight="100%"` does not measure it, and that is the bug this value ends.
+ * A percentage resolves against the parent's computed height; every ancestor up
+ * to `<body>` is `height: auto`, and `@hanzo/gui`'s provider span is
+ * `display: contents`, so there is no box in between either. The percentage
+ * resolves to auto, the stack shrink-wraps its content, and `justifyContent:
+ * center` then centres inside THAT — perfectly, and invisibly, in a box the
+ * height of the content. Measured: a brand mark at y=0 of a 903px viewport with
+ * 860px of black under it, across ten states carrying the identical line.
+ *
+ * `dvh`, not `vh`: on a phone the URL bar collapses and `100vh` overflows by
+ * its height.
+ *
+ * The centring travels WITH the measure because the two are one decision — a
+ * state that fills the screen holds a paragraph of content — and half of this
+ * recipe is what produced the defect in the first place.
+ */
+export declare const screen: {
+    readonly minHeight: "100dvh";
+    readonly alignItems: "center";
+    readonly justifyContent: "center";
+};
+//# sourceMappingURL=glass.d.ts.map

package/dist/glass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"glass.d.ts","sourceRoot":"","sources":["../src/glass.ts"],"names":[],"mappings":"AA6BA;;;;;GAKG;AACH,MAAM,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,CAAA;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,KAAK,GAAI,QAAO,IAAQ;;;;CAKxB,CAAA;AAEb;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK;;CAAwE,CAAA;AAE1F;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK;;;;;;CAMR,CAAA;AAEV;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,IAAI;;;;;;;CAIP,CAAA;AAEV;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,GAAG;;;;;;;CAON,CAAA;AAEV;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,QAAQ,GAAI,IAAI,OAAO;;;;;;CAGkC,CAAA;AAEtE;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM;;;;IAIjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiCG;;;;;;CAGK,CAAA;AAEV;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,MAAM;;;;CAIT,CAAA"}

package/dist/glass.js

@@ -0,0 +1,252 @@
+/**
+ * The chrome, as values — `@hanzo/ui/glass`.
+ *
+ *   import { glass, panel, scrim } from '@hanzo/ui/glass'
+ *   import '@hanzo/ui/glass.css'   // or '@hanzo/ui/theme.css', which inlines it
+ *
+ * Eight recipes, because eight things were being spelled out by hand on every
+ * page and drifting apart every time: what a floating surface is made of, what
+ * a resting one is made of, what dims the page under a modal, how a set of
+ * rows is grouped, what one of those rows looks like, which item in a set is
+ * the current one, which control is the loud one, and what it means to fill the
+ * screen. Each is ONE value here and nowhere else.
+ *
+ * They are plain objects, spread onto any `@hanzo/gui` element:
+ *
+ *   <YStack {...panel}>…</YStack>
+ *   <XStack {...glass(2)} borderBottomWidth={1}>…</XStack>
+ *
+ * A recipe rather than a component or a variant, because a variant only reaches
+ * the one component that declares it and half of what wants these is an
+ * `XStack`, a `SizableText` or a `Link`. One value that spreads onto any
+ * element beats N spellings of it.
+ *
+ * The material and the ladder live in `glass.css`; these name them. Nothing
+ * here restates a colour, a shadow or a blur radius — see that file for where
+ * the values come from (`@hanzo/design`).
+ */
+import { slot } from './backends/gui/slot.js';
+/**
+ * Glass — the material floating chrome is made of, and only floating chrome.
+ *
+ * Menus, dialogs, popovers, toasts, sticky bars: things with page under them.
+ * Vibrancy is a lens, so a surface covering nothing but the flat canvas has
+ * nothing to soften — an in-flow card wearing this is not glass, it is the page
+ * with extra steps, one shade off what it sits on and harder to find than
+ * `panel`. Over content -> `glass`, in the flow -> `panel`. No third case.
+ *
+ * The library's own dialogs, popovers, selects, dropdowns and tooltips are
+ * already glass BY SLOT — `glass.css` attaches the material to what a thing IS,
+ * so they need nothing from a call site and cannot fall out of step. This is
+ * for the surfaces no slot names: a hand-rolled bar, a custom menu, a docked
+ * toolbar.
+ *
+ * MATERIAL ONLY, no geometry. What glass is made of does not tell you what
+ * shape it was cut into: a menu is rounded on four sides, a sticky bar is
+ * full-bleed with one hairline along its bottom. Baking `borderRadius` and
+ * `borderWidth` in here would make every bar undo them, so edges stay at the
+ * call site — which only ever needs to say WHICH ones (`borderBottomWidth={1}`),
+ * never what colour, because the material already knows.
+ *
+ * The level is the one thing that genuinely varies, so it is the argument
+ * (`selected(on)` is shaped the same way). 2 is anchored — a menu, a toast, a
+ * bar, lifted off the page but tied to it. 3 is a modal, floating free over
+ * everything with a scrim under it.
+ *
+ * `backgroundColor` is the opaque fallback, and it is load-bearing rather than
+ * belt-and-braces: the material lives inside `@supports (backdrop-filter)`, so
+ * a browser that cannot blur gets no rule at all — and a menu with no
+ * background is a menu you read the page through.
+ */
+export const glass = (level = 2) => ({
+    className: `glass elevation-${level}`,
+    backgroundColor: '$background',
+    borderColor: '$borderColor',
+});
+/**
+ * The scrim under anything modal — the dim that makes a floating panel read as
+ * floating rather than as more page.
+ *
+ * Hand-rolled modals reach for `backgroundColor="black"`, with no alpha. That
+ * does not dim the page behind them, it DELETES it — and a glass panel over a
+ * solid black wall has nothing left to be translucent about, so the scrim
+ * cancels the very material it exists to make read.
+ *
+ * The value is a design token, not a literal, because both languages need it
+ * and only one of them can hold the copy: `[data-slot="dialog-overlay"]` reads
+ * `--surface-scrim` in `glass.css` and this reads the same token, so the dim
+ * behind a library dialog and the dim behind a hand-rolled one are the same dim
+ * by construction rather than by two people remembering a number.
+ */
+export const scrim = { backgroundColor: 'var(--surface-scrim, rgb(0 0 0 / .8))' };
+/**
+ * A panel: the quiet surface content in the FLOW sits on.
+ *
+ * `$color2` is a step off the page, so the fill alone separates the panel from
+ * the page and the hairline only finishes the edge. Panels are otherwise
+ * variously `$background` (a border with nothing behind it), `$color3` (which
+ * is the ACTIVE-item fill — a state, not a surface) and as many radii as there
+ * are authors.
+ *
+ * Rung 1 on the ladder, which is NOT the same claim as "this floats". A cast
+ * shadow does say "above the page", and that stays false for a panel in the
+ * flow — so rung 1 spends almost nothing on shadow and buys its depth from the
+ * lit top edge instead. On a near-black canvas that is the only half that reads
+ * at all.
+ */
+export const panel = {
+    backgroundColor: '$color2',
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    borderRadius: '$6',
+    className: 'elevation-1',
+};
+/**
+ * A group of rows — the settings card, and the reason a settings page ends up
+ * with four cards where it wanted one.
+ *
+ * Four toggles as four separate panels reads as four unrelated decisions, each
+ * with its own four edges; the same four inside one card, parted by hairlines,
+ * reads as one set and drops twelve edges of noise. That is the macOS settings
+ * group, and it is the shape every settings surface reaches for by hand.
+ *
+ * `overflow: hidden` is not decoration — the separators are drawn by the card
+ * (`[data-slot="rows"] > * + *`), and without the clip the topmost one runs
+ * straight through the rounded corner and out the side.
+ *
+ * It spreads `panel` WHOLE, so moving the panel up or down the ladder moves its
+ * groups with it. The separator hangs off a slot rather than a second class
+ * name for the same reason: there is no string to keep in step.
+ */
+export const rows = {
+    ...panel,
+    ...slot('rows'),
+    overflow: 'hidden',
+};
+/**
+ * One line inside a `rows` card: name on the left, control hard right.
+ *
+ * The rhythm, so it stops being re-decided per file. Pair it with a label at
+ * `fontSize="$3"` in `$color` and any explanation under it at `$1` in
+ * `$color11` — both halves matter, because a row whose label is written at
+ * `$color11` (the SECONDARY colour) gives the name of the setting and the
+ * footnote about it the same weight of grey, and the row has no first thing to
+ * read.
+ *
+ * No border here. A row that draws its own top hairline is a row that has to
+ * know whether it is first, and the card already knows — see `rows`.
+ */
+export const row = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: '$4',
+    paddingHorizontal: '$4',
+    paddingVertical: '$3',
+};
+/**
+ * Selected — the ONE "you are here" look, wherever a set offers a choice: nav
+ * rows, tabs, a filter chip.
+ *
+ * `$color3` fill with a full-strength label, one step above the panel it sits
+ * on. The alternatives in the wild are a pure-white lozenge, and — far more
+ * often — no answer at all: an unstyled `TabsTrigger` paints a selected tab
+ * exactly like its neighbours, so the page simply does not say which one you
+ * are on. Nothing in the markup looks wrong; the state has no picture.
+ *
+ * The label is `$color12`, not `$color`, and that is a measured distinction
+ * rather than a preference. Themes NEST: at the page scope `--color` is
+ * hsl(0 0% 100%), but inside a sidebar's scope it is re-based to hsl(0 0% 80%)
+ * — the SAME value as `--color11`. So a selected row asking for `$color` gets
+ * exactly its neighbours' colour, and had been doing so all along; the markup
+ * said "highlight this" and the token quietly collapsed underneath. `$color12`
+ * is the theme's full-strength foreground in every scope, so the state survives
+ * nesting.
+ */
+export const selected = (on) => on
+    ? { backgroundColor: '$color3', color: '$color12' }
+    : { backgroundColor: 'transparent', color: '$color11' };
+/**
+ * The primary control — the ONE loud thing a page is allowed.
+ *
+ * `$color5` on `$color6` is a raised pushbutton: legible, quiet, monochrome.
+ *
+ * Under-emphasis is the failure mode, and it leaves no mark on a screenshot,
+ * which is exactly why it needs a rule rather than an eye. `Button`'s `default`
+ * variant is a QUIET control on the surface ladder (`$color2`, the same fill
+ * `panel` uses), so a dialog whose only action is an unnamed `<Button>` paints
+ * its single ask as another surface. Name a variant on every control, and when
+ * one is the primary action, spread this. Never `variant="default"`.
+ *
+ * Not `variant="primary"` either, even though it paints the same pixels — a
+ * variant only reaches a `Button`, and half the loud controls in a real app are
+ * an `XStack`, a `SizableText` or a `Link`.
+ */
+export const accent = {
+    backgroundColor: '$color5',
+    borderWidth: 1,
+    borderColor: '$color6',
+    /**
+     * The foreground is part of the recipe, not an afterthought.
+     *
+     * Spell the fill by hand and you own the label too, and that half is the one
+     * people drop: a hand-spelled `color="$color1"` (4% grey) on a fill that has
+     * since moved to `$color2` (8%) paints a label at 1.07:1 — measured in the
+     * browser, not guessed. The sign-in modal's only button was invisible.
+     *
+     * And it only reaches a label the BUTTON paints. This is the half that is
+     * easy to miss: `<Button {...accent}><SizableText>…</SizableText></Button>`
+     * puts a second component between the recipe and the text, and that component
+     * resolves its own colour from the theme scope the Button just mounted —
+     * where `--color` is re-based to 80%. Measured: fill rgb(51,51,51) and border
+     * rgb(69,69,69), correct, with the label at rgb(204,204,204) — `$color11`,
+     * the QUIET foreground, on the loudest control in the dialog.
+     *
+     * Two guesses about the cure are both WRONG, and each was measured:
+     *
+     *   - "Just don't name a colour." A bare `<SizableText>` inside the Button
+     *     still measures rgb(204,204,204). Silence is not neutral here; the
+     *     nested scope answers for you. The rule is to SAY `$color12`, not to say
+     *     nothing.
+     *   - "Hoist the size to the Button and drop the wrapper." `fontSize="$1"` on
+     *     the Button does not reach the label — still the `size` default. So a
+     *     control that genuinely wants a smaller label keeps its wrapper.
+     *
+     * Which leaves two honest shapes. No size of your own -> hand the string
+     * straight to the Button and let its text host paint it. A deliberate size or
+     * `numberOfLines` -> keep the wrapper and give it `color="$color12"`.
+     *
+     * BUTTON ONLY. A plain `XStack` mounts no theme scope, so a label inside one
+     * that asks for `$color` measures rgb(255,255,255) — correct, and not to be
+     * "fixed". The ban is exactly as wide as the re-basing.
+     */
+    color: '$color12',
+    hoverStyle: { backgroundColor: '$color6', color: '$color12' },
+};
+/**
+ * A state that owns the whole screen: a loading gate, a 404, a crash screen, an
+ * OAuth callback, a receipt. It stands alone — no shell above it — so it must
+ * MEASURE the screen itself.
+ *
+ * `minHeight="100%"` does not measure it, and that is the bug this value ends.
+ * A percentage resolves against the parent's computed height; every ancestor up
+ * to `<body>` is `height: auto`, and `@hanzo/gui`'s provider span is
+ * `display: contents`, so there is no box in between either. The percentage
+ * resolves to auto, the stack shrink-wraps its content, and `justifyContent:
+ * center` then centres inside THAT — perfectly, and invisibly, in a box the
+ * height of the content. Measured: a brand mark at y=0 of a 903px viewport with
+ * 860px of black under it, across ten states carrying the identical line.
+ *
+ * `dvh`, not `vh`: on a phone the URL bar collapses and `100vh` overflows by
+ * its height.
+ *
+ * The centring travels WITH the measure because the two are one decision — a
+ * state that fills the screen holds a paragraph of content — and half of this
+ * recipe is what produced the defect in the first place.
+ */
+export const screen = {
+    minHeight: '100dvh',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+//# sourceMappingURL=glass.js.map

package/dist/glass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glass.js","sourceRoot":"","sources":["../src/glass.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAU1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,QAAc,CAAC,EAAE,EAAE,CACvC,CAAC;IACC,SAAS,EAAE,mBAAmB,KAAK,EAAE;IACrC,eAAe,EAAE,aAAa;IAC9B,WAAW,EAAE,cAAc;CAC5B,CAAU,CAAA;AAEb;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,EAAE,eAAe,EAAE,uCAAuC,EAAW,CAAA;AAE1F;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,eAAe,EAAE,SAAS;IAC1B,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,cAAc;IAC3B,YAAY,EAAE,IAAI;IAClB,SAAS,EAAE,aAAa;CAChB,CAAA;AAEV;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,GAAG,KAAK;IACR,GAAG,IAAI,CAAC,MAAM,CAAC;IACf,QAAQ,EAAE,QAAQ;CACV,CAAA;AAEV;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,GAAG,GAAG;IACjB,aAAa,EAAE,KAAK;IACpB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,eAAe;IAC/B,GAAG,EAAE,IAAI;IACT,iBAAiB,EAAE,IAAI;IACvB,eAAe,EAAE,IAAI;CACb,CAAA;AAEV;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAW,EAAE,EAAE,CACtC,EAAE;IACA,CAAC,CAAE,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAY;IAC9D,CAAC,CAAE,EAAE,eAAe,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAY,CAAA;AAEtE;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,eAAe,EAAE,SAAS;IAC1B,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,SAAS;IACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiCG;IACH,KAAK,EAAE,UAAU;IACjB,UAAU,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE;CACrD,CAAA;AAEV;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;CAChB,CAAA"}

package/dist/product/SlideOver.cjs

@@ -113,7 +113,12 @@ function SlideOver({ open, onClose, side = 'right', size = 420, title, icon: Ico
                 ref: panelRef, tabIndex: -1, role: "dialog", "aria-modal": open ? true : undefined, "aria-label": typeof title === 'string' ? title : ariaLabel, position: "absolute", t: 0, b: 0, ...edge, width: "100%", "$lg": { width: size, maxW: '100vw' }, bg: "$color1", borderLeftWidth: side === 'right' ? 1 : 0, borderRightWidth: side === 'left' ? 1 : 0, borderColor: "$borderColor", 
                 // Material paper depth — the drawer reads as a sheet lifted above the dimmed
                 // list behind it (real layered shadow, theme-aware), not a flat panel.
-                className: "slide elevation-4", 
+                //
+                // Rung 3, the top of the ladder: a drawer has no anchor and a scrim of its
+                // own, so it floats free exactly the way a modal does. It asked for a 4th
+                // rung, which is what a ladder turns into when it is treated as a palette —
+                // and the 4th was a hardcoded shadow behind a variable nothing defined.
+                className: "slide elevation-3", 
                 // Full-height sheet (100dvh — mobile-safe), inset for the notch (top) + home
                 // indicator (bottom) so the drawer header + footer actions clear them on
                 // notched devices (env insets are 0 elsewhere, so no effect there).

package/dist/product/SlideOver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlideOver.d.ts","sourceRoot":"","sources":["../../src/product/SlideOver.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIzD,OAAO,EAAW,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEhD,6EAA6E;AAC7E,QAAA,MAAM,EAAE,OAAO,CAAA;AAmBf,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,uDAAuD;IACvD,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACvB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,oFAAoF;IACpF,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,sDAAsD;IACtD,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mEAAmE;IACnE,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gFAAgF;IAChF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAID,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,OAAO,EACP,IAAc,EACd,IAAU,EACV,KAAK,EACL,IAAI,EAAE,IAAI,EACV,SAAS,EACT,WAAW,EACX,SAAS,EACT,MAAa,EACb,QAAQ,GACT,EAAE,cAAc,2CAoIhB;AAED,OAAO,EAAE,EAAE,IAAI,YAAY,EAAE,CAAA"}
+{"version":3,"file":"SlideOver.d.ts","sourceRoot":"","sources":["../../src/product/SlideOver.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIzD,OAAO,EAAW,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEhD,6EAA6E;AAC7E,QAAA,MAAM,EAAE,OAAO,CAAA;AAmBf,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,uDAAuD;IACvD,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACvB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,oFAAoF;IACpF,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,sDAAsD;IACtD,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mEAAmE;IACnE,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gFAAgF;IAChF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAID,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,OAAO,EACP,IAAc,EACd,IAAU,EACV,KAAK,EACL,IAAI,EAAE,IAAI,EACV,SAAS,EACT,WAAW,EACX,SAAS,EACT,MAAa,EACb,QAAQ,GACT,EAAE,cAAc,2CAyIhB;AAED,OAAO,EAAE,EAAE,IAAI,YAAY,EAAE,CAAA"}

package/dist/product/SlideOver.js

@@ -108,7 +108,12 @@ export function SlideOver({ open, onClose, side = 'right', size = 420, title, ic
                 ref: panelRef, tabIndex: -1, role: "dialog", "aria-modal": open ? true : undefined, "aria-label": typeof title === 'string' ? title : ariaLabel, position: "absolute", t: 0, b: 0, ...edge, width: "100%", "$lg": { width: size, maxW: '100vw' }, bg: "$color1", borderLeftWidth: side === 'right' ? 1 : 0, borderRightWidth: side === 'left' ? 1 : 0, borderColor: "$borderColor", 
                 // Material paper depth — the drawer reads as a sheet lifted above the dimmed
                 // list behind it (real layered shadow, theme-aware), not a flat panel.
-                className: "slide elevation-4", 
+                //
+                // Rung 3, the top of the ladder: a drawer has no anchor and a scrim of its
+                // own, so it floats free exactly the way a modal does. It asked for a 4th
+                // rung, which is what a ladder turns into when it is treated as a palette —
+                // and the 4th was a hardcoded shadow behind a variable nothing defined.
+                className: "slide elevation-3", 
                 // Full-height sheet (100dvh — mobile-safe), inset for the notch (top) + home
                 // indicator (bottom) so the drawer header + footer actions clear them on
                 // notched devices (env insets are 0 elsewhere, so no effect there).

package/dist/product/SlideOver.js.map

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

package/dist/styles/motion.css

@@ -157,10 +157,17 @@
   letter-spacing: -0.01em;
 }
 
+/* Paper — a ringed sheet: the ladder's lit edge and drop, plus a hairline all
+   the way round. The three values are @hanzo/design's, reached by their real
+   names. They used to be `--hz-ring` / `--hz-paper-highlight` /
+   `--hz-elevation-3`, none of which is defined in this repo, in @hanzo/design
+   or in any consumer — so all three resolved to hardcoded fallbacks, and the
+   comment above promising that "a host that defines its own --hz-* tokens still
+   wins" described a hook nobody could reach. */
 .paper {
-  box-shadow: var(--hz-ring, inset 0 0 0 1px rgba(255, 255, 255, 0.08)),
-    var(--hz-paper-highlight, inset 0 1px 0 0 rgba(255, 255, 255, 0.05)),
-    var(--hz-elevation-3, 0 8px 24px rgba(0, 0, 0, 0.36));
+  box-shadow: var(--shadow-inset-hairline, inset 0 0 0 1px rgb(255 255 255 / .10)),
+    var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
+    var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55));
 }
 
 @keyframes menu-in {