@hanzo/ui 8.0.77 → 8.0.82

package/dist/theme.css

@@ -588,6 +588,51 @@
   --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55);
   --shadow-xl:0 20px 25px -5px rgb(0 0 0 / .60), 0 8px 10px -6px rgb(0 0 0 / .60);
   --shadow-2xl:var(--shadow-floating);
+
+  /* ——— the paper ——— */
+  /* Depth carries STATE, not decoration: which sheet is the workspace, which is
+     the tool in use, which one opened. Reach for a level before a border — if
+     two surfaces need separating, RAISE one rather than outline both, and a
+     surface that is already raised does not also need a box drawn round it.
+
+     A level is a tint AND the light on it, published as a pair, because the
+     alternative — every component composing its own `--edge-highlight,
+     --shadow-*` — is how two panels on one screen end up lit from two
+     directions. Every rung here is pure vertical: a 1px inset line along the
+     top edge, a drop straight down. One origin, above and slightly in front.
+
+     The tints are the surface recipes rather than new values, so sheets stack
+     the way paper does: each is an alpha-white wash, one laid on another lands
+     a step lighter, and the stack converges on #262626 instead of blowing out.
+
+     Nothing here is restated in `.light`, deliberately: every part defers to a
+     token that already flips, so the ramp inverts with the theme for free. */
+  --sheet-0:var(--surface-page);            /* the workspace ground             */
+  --sheet-1:var(--surface-card);            /* an active tool                   */
+  --sheet-2:var(--surface-card-emphasis);   /* what opened, or what is inside   */
+  /* The drops are spelled out rather than read from the t-shirt ramp above, and
+     that is the whole reason this ladder can be shared. `--shadow-sm` is a name
+     this package does not own — @hanzo/brand declares the same names at :root
+     with white-canvas alphas, and load order decides who wins — so a rung built
+     on one is a rung somebody else can flatten. `--shadow-sheet-*` is ours
+     alone, which is what lets @hanzo/ui's `.elevation-*` read it instead of
+     keeping a private copy. The numbers ARE rung 1 and rung 2 of the ramp; if
+     one moves, move both. `--edge-highlight` stays deferred: it is role-named,
+     uncollided, and its `.light` zeroing is what makes one value work on both
+     canvases. */
+  --shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .40);
+  --shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .55),0 4px 6px -4px rgb(0 0 0 / .55);
+
+  /* The fold — a corner turned back, and the one mark that means THIS OPENS.
+     Ornament nowhere: a sheet that does not expand does not wear one.
+     It is a background-image, so it costs no element and no pseudo-element —
+     paint it on the sheet itself and square that corner
+     (`border-bottom-right-radius:0`), because a folded corner is not round.
+     The flap catches the light like every other surface; the crease is the
+     hairline; both defer, so both invert. */
+  --fold:12px;
+  --fold-face:linear-gradient(315deg,var(--glass-strong) 0,var(--glass-strong) calc(var(--fold) - 1px),var(--border-strong) calc(var(--fold) - 1px),var(--border-strong) var(--fold),transparent var(--fold)); /* @kind color */
+
   /* Ambient hero glow — a single white radial, blurred 120px, low opacity. */
   --glow-hero:radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%); /* @kind color */
   --glow-hero-blur:120px;
@@ -620,6 +665,11 @@
    costs nothing. */
 .light, :root.t_light, .t_light{
   --shadow-floating:0 24px 60px -16px rgb(0 0 0 / .18);
+  /* On white the drop does all of it, so the paper rungs are restated here even
+     though check 4 does not demand it — their white is inside --edge-highlight,
+     which flips underneath. Rung 1 and rung 2 of the light ramp, same as dark. */
+  --shadow-sheet-1:var(--edge-highlight),0 1px 2px 0 rgb(0 0 0 / .06);
+  --shadow-sheet-2:var(--edge-highlight),0 10px 15px -3px rgb(0 0 0 / .09),0 4px 6px -4px rgb(0 0 0 / .07);
   --shadow-inset-hairline:inset 0 0 0 1px rgb(0 0 0 / .10);
   --edge-highlight:inset 0 0 0 0 transparent;
   --bloom:0 6px 20px -4px rgb(0 0 0 / .18);
@@ -1327,6 +1377,31 @@
     var(--glass-shadow-3) !important;
 }
 
+/* ── The fold — the one mark that means an item opens ────────────────────────
+   A corner turned back, painted onto the sheet itself. It is a class and not a
+   pair of style props because gui compiles those into atomic classes and a
+   background-image is not one of the properties it maps; and because a fold has
+   exactly one spelling, so the call site should not be able to invent a second
+   one. `--fold-face` is @hanzo/design's, with the dark value inline so a host
+   that took this sheet without the token layer still gets a corner rather than
+   a silently-dropped declaration.
+
+   The corner is SQUARED, not rounded: a folded corner is a straight crease, and
+   a rounded one under a triangle reads as a rendering fault. That is also why
+   this carries !important — the radius it has to beat is a compiled style prop.
+
+   Spend it only where the thing expands. A fold on a surface that opens nothing
+   is a chevron that never turns. */
+.fold {
+  background-image: var(--fold-face,
+    linear-gradient(315deg,
+      rgb(255 255 255 / .08) 0, rgb(255 255 255 / .08) 11px,
+      rgb(255 255 255 / .16) 11px, rgb(255 255 255 / .16) 12px,
+      transparent 12px)) !important;
+  background-repeat: no-repeat !important;
+  border-bottom-right-radius: 0 !important;
+}
+
 /* ── 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.0.77",
+  "version": "8.0.82",
   "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": {
@@ -188,7 +188,7 @@
   ],
   "dependencies": {
     "@hanzo/appearance": "^0.1.4",
-    "@hanzo/design": "^0.5.1",
+    "@hanzo/design": "^0.5.3",
     "@hanzo/logo": "^1.0.13",
     "@hanzo/products": "^0.2.0",
     "@hanzogui/lucide-icons-2": "^8.1.0",