@hanzo/ui 8.17.0 → 8.17.1

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.17.0</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.17.1</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.
  *
@@ -1725,6 +1725,73 @@
   border-bottom-right-radius: 0 !important;
 }
 
+/* ── The crease — the valley where one sheet lies over another ───────────────
+   The ladder lifts a sheet with a drop that falls STRAIGHT DOWN: design's rule
+   is one light, above, and `check-tokens.mjs` fails the build on a sideways
+   offset. That is right, and it means the ladder has nothing to say about a
+   VERTICAL seam — and an app shell is nothing but vertical seams. A rail beside
+   a sidebar beside a pane, each a step apart on the ladder, still reads as three
+   abutting rectangles with lines ruled between them, because the only mark at
+   the seam is the hairline.
+
+   What a real sheet lays on the one beneath it, side by side under a light from
+   above, is not a cast shadow — it is the valley going dark. Ambient occlusion
+   has no direction of its own, which is both why it is honest here and why it is
+   NOT spelled as a --shadow-*: those are directional by definition and this is
+   not one.
+
+   A PSEUDO-ELEMENT, at z-index -1 inside an isolated stacking context, so it
+   paints above the sheet's own fill and below every child. That ordering is the
+   whole reason it is not a `background-image` (which `.fold` already claims on
+   this same element, !important, so the two would silently fight) and not an
+   inset `box-shadow` (which `.elevation-*` claims, likewise).
+
+   No side named -> both edges, which is what a pane with a neighbour on each
+   hand needs. Name one and the other stops being drawn. */
+:root {
+  --crease-ink: rgb(0 0 0 / .28);
+  --crease-depth: 20px;
+}
+
+.light, :root.t_light, .t_light {
+  /* On white the valley is a smudge, not a shadow — the same redistribution the
+     drops make, and for the same reason. */
+  --crease-ink: rgb(0 0 0 / .05);
+}
+
+.hz-crease {
+  position: relative;
+  /* Without this the -1 escapes and paints behind an ancestor's fill, which is
+     indistinguishable from the crease not being there at all. */
+  isolation: isolate;
+}
+
+.hz-crease::before,
+.hz-crease::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--crease-depth);
+  z-index: -1;
+  pointer-events: none;
+}
+
+.hz-crease::before {
+  left: 0;
+  background-image: linear-gradient(to right, var(--crease-ink), transparent);
+}
+
+.hz-crease::after {
+  right: 0;
+  background-image: linear-gradient(to left, var(--crease-ink), transparent);
+}
+
+.hz-crease[data-crease="left"]::after,
+.hz-crease[data-crease="right"]::before {
+  content: none;
+}
+
 /* ── The scrim ──────────────────────────────────────────────────────────────
    The dim that makes a floating panel read as floating rather than as more
    page. gui's overlay dims TWICE — a translucent ground under a further
@@ -2370,6 +2437,52 @@ body {
   }
 }
 
+/* ── Unfold — how a sheet arrives ─────────────────────────────────────────────
+   A panel that appears by fading is a rectangle switching on. A sheet of paper
+   arrives by TURNING OPEN about the edge it is hinged on, so its near edge swings
+   toward the reader and its far edge stays put — which is the one motion that
+   says "this was already here, folded" rather than "this was drawn just now".
+
+   The hinge is the ONLY thing that varies, so it is the only knob: a drawer
+   coming off the left wall turns about its left edge, a pane folding in from the
+   right about its right. The angle follows the hinge — a sheet swings toward you
+   from whichever side it is held — so naming the hinge sets both, and there is no
+   way to ask for a turn that opens the wrong way.
+
+   `perspective()` inside the transform rather than on a parent: the vanishing
+   point is then the sheet's own centre, so the turn reads at any size and the
+   caller does not have to own a 3D context it did not ask for.
+
+   Seven degrees over 220ms. Enough to see the plane; short of the swinging-door
+   effect that makes a workspace feel like a slideshow. */
+@keyframes hz-unfold {
+  from {
+    opacity: 0;
+    transform: perspective(1600px) rotateY(var(--hz-turn, -7deg));
+  }
+  to {
+    opacity: 1;
+    transform: perspective(1600px) rotateY(0deg);
+  }
+}
+
+.hz-unfold {
+  animation: hz-unfold 220ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
+  transform-origin: left center;
+  will-change: transform, opacity;
+}
+
+.hz-unfold[data-hinge="right"] {
+  transform-origin: right center;
+  --hz-turn: 7deg;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hz-unfold {
+    animation: none;
+  }
+}
+
 /* ── Layout guarantees ─────────────────────────────────────────────────────────
    Two rules, both structural. They are attached to `data-slot` rather than to a
    class because they are not styling a caller can opt out of — they are the

package/dist/glass.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.screen = exports.accent = exports.selected = exports.row = exports.rows = exports.panel = exports.scrim = exports.fold = exports.sheet = exports.glass = void 0;
+exports.screen = exports.accent = exports.selected = exports.row = exports.rows = exports.panel = exports.scrim = exports.fold = exports.unfold = exports.crease = exports.sheet = exports.glass = void 0;
+exports.paper = paper;
 /**
  * The chrome, as values — `@hanzo/ui/glass`.
  *
@@ -107,6 +108,51 @@ const SHEET_FILL = {
     1: 'var(--sheet-1, rgb(38 38 38 / .5))',
     2: 'var(--sheet-2, rgb(38 38 38 / .75))',
 };
+/**
+ * The crease — the valley where a neighbouring sheet lies over this one.
+ *
+ *   <YStack {...paper(sheet(0), crease('right'))}>
+ *
+ * The ladder's drops fall straight down (design's rule is one light, above), so
+ * it has nothing to say about a VERTICAL seam — and an app shell is nothing but
+ * vertical seams. Three sheets a rung apart, side by side, still read as three
+ * abutting rectangles. This is the mark that makes them read as paper: the
+ * ground going dark in the valley, which is what a sheet actually lays on the
+ * one beside it.
+ *
+ * It goes on the sheet that is COVERED, on the edge the neighbour lies over —
+ * a rail with a sidebar to its right takes `crease('right')`. Nothing can paint
+ * outside its own box, so the receiver draws it; the caster only has to be
+ * higher up the ladder.
+ *
+ * Spend it at a seam and nowhere else. A crease down the side of a card with
+ * nothing beside it is a gradient somebody liked.
+ */
+const crease = (edge) => ({ className: 'hz-crease', ...(edge ? { 'data-crease': edge } : {}) });
+exports.crease = crease;
+/**
+ * Unfold — how a sheet ARRIVES: turning open about the edge it is hinged on,
+ * rather than fading up as a rectangle.
+ *
+ *   <YStack {...paper(sheet(2), unfold('right'))}>
+ *
+ * The hinge is the only knob, and it sets the direction of the turn with it, so
+ * a sheet cannot be asked to swing the wrong way. A drawer off the left wall is
+ * `unfold()`; a pane folding in from the right edge is `unfold('right')`.
+ *
+ * Motion only — it says nothing about what the surface is made of, so it
+ * composes with `sheet`, `glass` or neither. Off under reduced motion, in
+ * `styles/motion.css` beside every other keyframe this package ships.
+ */
+const unfold = (hinge = 'left') => ({ className: 'hz-unfold', ...(hinge === 'right' ? { 'data-hinge': 'right' } : {}) });
+exports.unfold = unfold;
+function paper(...marks) {
+    const className = marks
+        .map((mark) => mark.className)
+        .filter(Boolean)
+        .join(' ');
+    return { ...Object.assign({}, ...marks), ...(className ? { className } : {}) };
+}
 /**
  * The fold — a corner turned back, and the ONE mark that says an item opens.
  *

package/dist/glass.css

@@ -244,6 +244,73 @@
   border-bottom-right-radius: 0 !important;
 }
 
+/* ── The crease — the valley where one sheet lies over another ───────────────
+   The ladder lifts a sheet with a drop that falls STRAIGHT DOWN: design's rule
+   is one light, above, and `check-tokens.mjs` fails the build on a sideways
+   offset. That is right, and it means the ladder has nothing to say about a
+   VERTICAL seam — and an app shell is nothing but vertical seams. A rail beside
+   a sidebar beside a pane, each a step apart on the ladder, still reads as three
+   abutting rectangles with lines ruled between them, because the only mark at
+   the seam is the hairline.
+
+   What a real sheet lays on the one beneath it, side by side under a light from
+   above, is not a cast shadow — it is the valley going dark. Ambient occlusion
+   has no direction of its own, which is both why it is honest here and why it is
+   NOT spelled as a --shadow-*: those are directional by definition and this is
+   not one.
+
+   A PSEUDO-ELEMENT, at z-index -1 inside an isolated stacking context, so it
+   paints above the sheet's own fill and below every child. That ordering is the
+   whole reason it is not a `background-image` (which `.fold` already claims on
+   this same element, !important, so the two would silently fight) and not an
+   inset `box-shadow` (which `.elevation-*` claims, likewise).
+
+   No side named -> both edges, which is what a pane with a neighbour on each
+   hand needs. Name one and the other stops being drawn. */
+:root {
+  --crease-ink: rgb(0 0 0 / .28);
+  --crease-depth: 20px;
+}
+
+.light, :root.t_light, .t_light {
+  /* On white the valley is a smudge, not a shadow — the same redistribution the
+     drops make, and for the same reason. */
+  --crease-ink: rgb(0 0 0 / .05);
+}
+
+.hz-crease {
+  position: relative;
+  /* Without this the -1 escapes and paints behind an ancestor's fill, which is
+     indistinguishable from the crease not being there at all. */
+  isolation: isolate;
+}
+
+.hz-crease::before,
+.hz-crease::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--crease-depth);
+  z-index: -1;
+  pointer-events: none;
+}
+
+.hz-crease::before {
+  left: 0;
+  background-image: linear-gradient(to right, var(--crease-ink), transparent);
+}
+
+.hz-crease::after {
+  right: 0;
+  background-image: linear-gradient(to left, var(--crease-ink), transparent);
+}
+
+.hz-crease[data-crease="left"]::after,
+.hz-crease[data-crease="right"]::before {
+  content: none;
+}
+
 /* ── The scrim ──────────────────────────────────────────────────────────────
    The dim that makes a floating panel read as floating rather than as more
    page. gui's overlay dims TWICE — a translucent ground under a further

package/dist/glass.d.ts

@@ -75,6 +75,76 @@ export declare const sheet: (level?: 0 | 1 | 2) => {
     readonly backgroundColor: "var(--sheet-0, #0a0a0a)" | "var(--sheet-1, rgb(38 38 38 / .5))" | "var(--sheet-2, rgb(38 38 38 / .75))";
     readonly className?: "elevation-1" | "elevation-2" | undefined;
 };
+/**
+ * Which of a surface's edges lies UNDER a neighbour. Omit for both, which is
+ * what a pane between two other panes needs.
+ */
+export type Edge = 'left' | 'right';
+/**
+ * The crease — the valley where a neighbouring sheet lies over this one.
+ *
+ *   <YStack {...paper(sheet(0), crease('right'))}>
+ *
+ * The ladder's drops fall straight down (design's rule is one light, above), so
+ * it has nothing to say about a VERTICAL seam — and an app shell is nothing but
+ * vertical seams. Three sheets a rung apart, side by side, still read as three
+ * abutting rectangles. This is the mark that makes them read as paper: the
+ * ground going dark in the valley, which is what a sheet actually lays on the
+ * one beside it.
+ *
+ * It goes on the sheet that is COVERED, on the edge the neighbour lies over —
+ * a rail with a sidebar to its right takes `crease('right')`. Nothing can paint
+ * outside its own box, so the receiver draws it; the caster only has to be
+ * higher up the ladder.
+ *
+ * Spend it at a seam and nowhere else. A crease down the side of a card with
+ * nothing beside it is a gradient somebody liked.
+ */
+export declare const crease: (edge?: Edge) => {
+    readonly className: 'hz-crease';
+    readonly 'data-crease'?: Edge | undefined;
+};
+/**
+ * Unfold — how a sheet ARRIVES: turning open about the edge it is hinged on,
+ * rather than fading up as a rectangle.
+ *
+ *   <YStack {...paper(sheet(2), unfold('right'))}>
+ *
+ * The hinge is the only knob, and it sets the direction of the turn with it, so
+ * a sheet cannot be asked to swing the wrong way. A drawer off the left wall is
+ * `unfold()`; a pane folding in from the right edge is `unfold('right')`.
+ *
+ * Motion only — it says nothing about what the surface is made of, so it
+ * composes with `sheet`, `glass` or neither. Off under reduced motion, in
+ * `styles/motion.css` beside every other keyframe this package ships.
+ */
+export declare const unfold: (hinge?: Edge) => {
+    readonly className: 'hz-unfold';
+    readonly 'data-hinge'?: string | undefined;
+};
+interface Mark {
+    className?: string;
+}
+/**
+ * Compose marks onto one surface, without losing a class.
+ *
+ *   <YStack {...paper(sheet(1), crease('left'), fold)}>
+ *
+ * SPREADING TWO RECIPES SILENTLY DROPS ONE. `{...sheet(1)} {...fold}` — the
+ * composition `fold`'s own documentation shows — keeps only the last
+ * `className`, so the sheet arrives with its fill and its fold and WITHOUT
+ * `elevation-1`: the surface is a shade lighter than the page and flat, which
+ * looks like a design decision rather than a lost property. JSX assigns whole
+ * keys, and `className` is one key; this repo already records the same shape
+ * costing a breakpoint object.
+ *
+ * So marks are composed through here rather than beside each other. Every other
+ * key still takes the last writer, which is what a caller means by ordering
+ * them; only the class list accumulates.
+ */
+export declare function paper<A extends Mark>(a: A): A;
+export declare function paper<A extends Mark, B extends Mark>(a: A, b: B): A & B;
+export declare function paper<A extends Mark, B extends Mark, C extends Mark>(a: A, b: B, c: C): A & B & C;
 /**
  * The fold — a corner turned back, and the ONE mark that says an item opens.
  *
@@ -289,4 +359,5 @@ export declare const screen: {
     readonly alignItems: 'center';
     readonly justifyContent: 'center';
 };
+export {};
 //# sourceMappingURL=glass.d.ts.map

package/dist/glass.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"glass.d.ts","sourceRoot":"","sources":["../src/glass.ts"],"names":[],"mappings":"AA8BA;;;;;GAKG;AACH,MAAM,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,CAAA;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,KAAK,WAAW,IAAI;aAE7B,SAAS;aACT,eAAe,EAAE,aAAa;aAC9B,WAAW,EAAE,cAAc;CAClB,CAAA;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,KAAK,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC;;;CAIzB,CAAA;AAQb;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,IAAI;aAAK,SAAS,EAAE,MAAM;CAAW,CAAA;AAElD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK;aAAK,eAAe,EAAE,uCAAuC;CAAW,CAAA;AAE1F;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK;aAChB,eAAe,EAAE,SAAS;aAC1B,WAAW,EAAE,CAAC;aACd,WAAW,EAAE,cAAc;aAC3B,YAAY,EAAE,IAAI;aAClB,SAAS,EAAE,aAAa;CAChB,CAAA;AAEV;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,IAAI;8BAxBE,SAAS;0BACb,CAAC;0BACD,cAAc;2BACb,IAAI;wBACP,aAAa;uBAuBd,QAAQ;CACV,CAAA;AAEV;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,GAAG;aACd,aAAa,EAAE,KAAK;aACpB,UAAU,EAAE,QAAQ;aACpB,cAAc,EAAE,eAAe;aAC/B,GAAG,EAAE,IAAI;aACT,iBAAiB,EAAE,IAAI;aACvB,eAAe,EAAE,IAAI;CACb,CAAA;AAEV;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,QAAQ,OAAQ,OAAO;8BAEV,SAAS;oBAAS,UAAU;;8BAC5B,aAAa;oBAAS,UAAU;CAAY,CAAA;AAEtE;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM;aACjB,eAAe,EAAE,SAAS;aAC1B,WAAW,EAAE,CAAC;aACd,WAAW,EAAE,SAAS;IACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiCG;aACH,KAAK,EAAE,UAAU;aACjB,UAAU;iBAAI,eAAe,EAAE,SAAS;iBAAE,KAAK,EAAE,UAAU;;CACnD,CAAA;AAEV;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,MAAM;aACjB,SAAS,EAAE,QAAQ;aACnB,UAAU,EAAE,QAAQ;aACpB,cAAc,EAAE,QAAQ;CAChB,CAAA"}
+{"version":3,"file":"glass.d.ts","sourceRoot":"","sources":["../src/glass.ts"],"names":[],"mappings":"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"}

package/dist/glass.js

@@ -102,6 +102,49 @@ const SHEET_FILL = {
     1: 'var(--sheet-1, rgb(38 38 38 / .5))',
     2: 'var(--sheet-2, rgb(38 38 38 / .75))',
 };
+/**
+ * The crease — the valley where a neighbouring sheet lies over this one.
+ *
+ *   <YStack {...paper(sheet(0), crease('right'))}>
+ *
+ * The ladder's drops fall straight down (design's rule is one light, above), so
+ * it has nothing to say about a VERTICAL seam — and an app shell is nothing but
+ * vertical seams. Three sheets a rung apart, side by side, still read as three
+ * abutting rectangles. This is the mark that makes them read as paper: the
+ * ground going dark in the valley, which is what a sheet actually lays on the
+ * one beside it.
+ *
+ * It goes on the sheet that is COVERED, on the edge the neighbour lies over —
+ * a rail with a sidebar to its right takes `crease('right')`. Nothing can paint
+ * outside its own box, so the receiver draws it; the caster only has to be
+ * higher up the ladder.
+ *
+ * Spend it at a seam and nowhere else. A crease down the side of a card with
+ * nothing beside it is a gradient somebody liked.
+ */
+export const crease = (edge) => ({ className: 'hz-crease', ...(edge ? { 'data-crease': edge } : {}) });
+/**
+ * Unfold — how a sheet ARRIVES: turning open about the edge it is hinged on,
+ * rather than fading up as a rectangle.
+ *
+ *   <YStack {...paper(sheet(2), unfold('right'))}>
+ *
+ * The hinge is the only knob, and it sets the direction of the turn with it, so
+ * a sheet cannot be asked to swing the wrong way. A drawer off the left wall is
+ * `unfold()`; a pane folding in from the right edge is `unfold('right')`.
+ *
+ * Motion only — it says nothing about what the surface is made of, so it
+ * composes with `sheet`, `glass` or neither. Off under reduced motion, in
+ * `styles/motion.css` beside every other keyframe this package ships.
+ */
+export const unfold = (hinge = 'left') => ({ className: 'hz-unfold', ...(hinge === 'right' ? { 'data-hinge': 'right' } : {}) });
+export function paper(...marks) {
+    const className = marks
+        .map((mark) => mark.className)
+        .filter(Boolean)
+        .join(' ');
+    return { ...Object.assign({}, ...marks), ...(className ? { className } : {}) };
+}
 /**
  * The fold — a corner turned back, and the ONE mark that says an item opens.
  *

package/dist/glass.js.map

@@ -1 +1 @@
-{"version":3,"file":"glass.js","sourceRoot":"","sources":["../src/glass.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAU1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAK,GAAS,CAAC,EAAE,EAAE,CACvC,CAAC;IACC,SAAS,EAAE,mBAAmB,KAAK,EAAE;IACrC,eAAe,EAAE,aAAa;IAC9B,WAAW,EAAE,cAAc;CAC5B,CAAU,CAAA;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAK,GAAc,CAAC,EAAE,EAAE,CAC5C,CAAC;IACC,eAAe,EAAE,UAAU,CAAC,KAAK,CAAC;IAClC,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,aAAa,KAAK,EAAW,EAAE,CAAC;CACrE,CAAU,CAAA;AAEb,MAAM,UAAU,GAAG;IACjB,CAAC,EAAE,yBAAyB;IAC5B,CAAC,EAAE,oCAAoC;IACvC,CAAC,EAAE,qCAAqC;CAChC,CAAA;AAEV;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,EAAE,SAAS,EAAE,MAAM,EAAW,CAAA;AAElD;;;;;;;;;;;;;;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"}
+{"version":3,"file":"glass.js","sourceRoot":"","sources":["../src/glass.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAU1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAK,GAAS,CAAC,EAAE,EAAE,CACvC,CAAC;IACC,SAAS,EAAE,mBAAmB,KAAK,EAAE;IACrC,eAAe,EAAE,aAAa;IAC9B,WAAW,EAAE,cAAc;CAC5B,CAAU,CAAA;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAK,GAAc,CAAC,EAAE,EAAE,CAC5C,CAAC;IACC,eAAe,EAAE,UAAU,CAAC,KAAK,CAAC;IAClC,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,aAAa,KAAK,EAAW,EAAE,CAAC;CACrE,CAAU,CAAA;AAEb,MAAM,UAAU,GAAG;IACjB,CAAC,EAAE,yBAAyB;IAC5B,CAAC,EAAE,oCAAoC;IACvC,CAAC,EAAE,qCAAqC;CAChC,CAAA;AAQV;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,IAAW,EAAE,EAAE,CACpC,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAU,CAAA;AAEjF;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAK,GAAS,MAAM,EAAE,EAAE,CAC7C,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAU,CAAA;AA0BhG,MAAM,UAAU,KAAK,CAAC,GAAG,KAAa;IACpC,MAAM,SAAS,GAAG,KAAK;SACpB,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC;SAC7B,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAA;IACZ,OAAO,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,GAAG,KAAK,CAAC,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAA;AAChF,CAAC;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,EAAE,SAAS,EAAE,MAAM,EAAW,CAAA;AAElD;;;;;;;;;;;;;;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/styles/motion.css

@@ -217,6 +217,52 @@
   }
 }
 
+/* ── Unfold — how a sheet arrives ─────────────────────────────────────────────
+   A panel that appears by fading is a rectangle switching on. A sheet of paper
+   arrives by TURNING OPEN about the edge it is hinged on, so its near edge swings
+   toward the reader and its far edge stays put — which is the one motion that
+   says "this was already here, folded" rather than "this was drawn just now".
+
+   The hinge is the ONLY thing that varies, so it is the only knob: a drawer
+   coming off the left wall turns about its left edge, a pane folding in from the
+   right about its right. The angle follows the hinge — a sheet swings toward you
+   from whichever side it is held — so naming the hinge sets both, and there is no
+   way to ask for a turn that opens the wrong way.
+
+   `perspective()` inside the transform rather than on a parent: the vanishing
+   point is then the sheet's own centre, so the turn reads at any size and the
+   caller does not have to own a 3D context it did not ask for.
+
+   Seven degrees over 220ms. Enough to see the plane; short of the swinging-door
+   effect that makes a workspace feel like a slideshow. */
+@keyframes hz-unfold {
+  from {
+    opacity: 0;
+    transform: perspective(1600px) rotateY(var(--hz-turn, -7deg));
+  }
+  to {
+    opacity: 1;
+    transform: perspective(1600px) rotateY(0deg);
+  }
+}
+
+.hz-unfold {
+  animation: hz-unfold 220ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
+  transform-origin: left center;
+  will-change: transform, opacity;
+}
+
+.hz-unfold[data-hinge="right"] {
+  transform-origin: right center;
+  --hz-turn: 7deg;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hz-unfold {
+    animation: none;
+  }
+}
+
 /* ── Layout guarantees ─────────────────────────────────────────────────────────
    Two rules, both structural. They are attached to `data-slot` rather than to a
    class because they are not styling a caller can opt out of — they are the

package/dist/styles.css

@@ -1725,6 +1725,73 @@
   border-bottom-right-radius: 0 !important;
 }
 
+/* ── The crease — the valley where one sheet lies over another ───────────────
+   The ladder lifts a sheet with a drop that falls STRAIGHT DOWN: design's rule
+   is one light, above, and `check-tokens.mjs` fails the build on a sideways
+   offset. That is right, and it means the ladder has nothing to say about a
+   VERTICAL seam — and an app shell is nothing but vertical seams. A rail beside
+   a sidebar beside a pane, each a step apart on the ladder, still reads as three
+   abutting rectangles with lines ruled between them, because the only mark at
+   the seam is the hairline.
+
+   What a real sheet lays on the one beneath it, side by side under a light from
+   above, is not a cast shadow — it is the valley going dark. Ambient occlusion
+   has no direction of its own, which is both why it is honest here and why it is
+   NOT spelled as a --shadow-*: those are directional by definition and this is
+   not one.
+
+   A PSEUDO-ELEMENT, at z-index -1 inside an isolated stacking context, so it
+   paints above the sheet's own fill and below every child. That ordering is the
+   whole reason it is not a `background-image` (which `.fold` already claims on
+   this same element, !important, so the two would silently fight) and not an
+   inset `box-shadow` (which `.elevation-*` claims, likewise).
+
+   No side named -> both edges, which is what a pane with a neighbour on each
+   hand needs. Name one and the other stops being drawn. */
+:root {
+  --crease-ink: rgb(0 0 0 / .28);
+  --crease-depth: 20px;
+}
+
+.light, :root.t_light, .t_light {
+  /* On white the valley is a smudge, not a shadow — the same redistribution the
+     drops make, and for the same reason. */
+  --crease-ink: rgb(0 0 0 / .05);
+}
+
+.hz-crease {
+  position: relative;
+  /* Without this the -1 escapes and paints behind an ancestor's fill, which is
+     indistinguishable from the crease not being there at all. */
+  isolation: isolate;
+}
+
+.hz-crease::before,
+.hz-crease::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--crease-depth);
+  z-index: -1;
+  pointer-events: none;
+}
+
+.hz-crease::before {
+  left: 0;
+  background-image: linear-gradient(to right, var(--crease-ink), transparent);
+}
+
+.hz-crease::after {
+  right: 0;
+  background-image: linear-gradient(to left, var(--crease-ink), transparent);
+}
+
+.hz-crease[data-crease="left"]::after,
+.hz-crease[data-crease="right"]::before {
+  content: none;
+}
+
 /* ── The scrim ──────────────────────────────────────────────────────────────
    The dim that makes a floating panel read as floating rather than as more
    page. gui's overlay dims TWICE — a translucent ground under a further
@@ -2370,6 +2437,52 @@ body {
   }
 }
 
+/* ── Unfold — how a sheet arrives ─────────────────────────────────────────────
+   A panel that appears by fading is a rectangle switching on. A sheet of paper
+   arrives by TURNING OPEN about the edge it is hinged on, so its near edge swings
+   toward the reader and its far edge stays put — which is the one motion that
+   says "this was already here, folded" rather than "this was drawn just now".
+
+   The hinge is the ONLY thing that varies, so it is the only knob: a drawer
+   coming off the left wall turns about its left edge, a pane folding in from the
+   right about its right. The angle follows the hinge — a sheet swings toward you
+   from whichever side it is held — so naming the hinge sets both, and there is no
+   way to ask for a turn that opens the wrong way.
+
+   `perspective()` inside the transform rather than on a parent: the vanishing
+   point is then the sheet's own centre, so the turn reads at any size and the
+   caller does not have to own a 3D context it did not ask for.
+
+   Seven degrees over 220ms. Enough to see the plane; short of the swinging-door
+   effect that makes a workspace feel like a slideshow. */
+@keyframes hz-unfold {
+  from {
+    opacity: 0;
+    transform: perspective(1600px) rotateY(var(--hz-turn, -7deg));
+  }
+  to {
+    opacity: 1;
+    transform: perspective(1600px) rotateY(0deg);
+  }
+}
+
+.hz-unfold {
+  animation: hz-unfold 220ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
+  transform-origin: left center;
+  will-change: transform, opacity;
+}
+
+.hz-unfold[data-hinge="right"] {
+  transform-origin: right center;
+  --hz-turn: 7deg;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hz-unfold {
+    animation: none;
+  }
+}
+
 /* ── Layout guarantees ─────────────────────────────────────────────────────────
    Two rules, both structural. They are attached to `data-slot` rather than to a
    class because they are not styling a caller can opt out of — they are the

package/dist/theme.css

@@ -1723,6 +1723,73 @@
   border-bottom-right-radius: 0 !important;
 }
 
+/* ── The crease — the valley where one sheet lies over another ───────────────
+   The ladder lifts a sheet with a drop that falls STRAIGHT DOWN: design's rule
+   is one light, above, and `check-tokens.mjs` fails the build on a sideways
+   offset. That is right, and it means the ladder has nothing to say about a
+   VERTICAL seam — and an app shell is nothing but vertical seams. A rail beside
+   a sidebar beside a pane, each a step apart on the ladder, still reads as three
+   abutting rectangles with lines ruled between them, because the only mark at
+   the seam is the hairline.
+
+   What a real sheet lays on the one beneath it, side by side under a light from
+   above, is not a cast shadow — it is the valley going dark. Ambient occlusion
+   has no direction of its own, which is both why it is honest here and why it is
+   NOT spelled as a --shadow-*: those are directional by definition and this is
+   not one.
+
+   A PSEUDO-ELEMENT, at z-index -1 inside an isolated stacking context, so it
+   paints above the sheet's own fill and below every child. That ordering is the
+   whole reason it is not a `background-image` (which `.fold` already claims on
+   this same element, !important, so the two would silently fight) and not an
+   inset `box-shadow` (which `.elevation-*` claims, likewise).
+
+   No side named -> both edges, which is what a pane with a neighbour on each
+   hand needs. Name one and the other stops being drawn. */
+:root {
+  --crease-ink: rgb(0 0 0 / .28);
+  --crease-depth: 20px;
+}
+
+.light, :root.t_light, .t_light {
+  /* On white the valley is a smudge, not a shadow — the same redistribution the
+     drops make, and for the same reason. */
+  --crease-ink: rgb(0 0 0 / .05);
+}
+
+.hz-crease {
+  position: relative;
+  /* Without this the -1 escapes and paints behind an ancestor's fill, which is
+     indistinguishable from the crease not being there at all. */
+  isolation: isolate;
+}
+
+.hz-crease::before,
+.hz-crease::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--crease-depth);
+  z-index: -1;
+  pointer-events: none;
+}
+
+.hz-crease::before {
+  left: 0;
+  background-image: linear-gradient(to right, var(--crease-ink), transparent);
+}
+
+.hz-crease::after {
+  right: 0;
+  background-image: linear-gradient(to left, var(--crease-ink), transparent);
+}
+
+.hz-crease[data-crease="left"]::after,
+.hz-crease[data-crease="right"]::before {
+  content: none;
+}
+
 /* ── The scrim ──────────────────────────────────────────────────────────────
    The dim that makes a floating panel read as floating rather than as more
    page. gui's overlay dims TWICE — a translucent ground under a further

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.17.0",
+  "version": "8.17.1",
   "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": {