@hanzo/ui 8.27.44 → 8.27.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (149) hide show
  1. package/dist/backends/gui/animated-testimonials.cjs +2 -2
  2. package/dist/backends/gui/animated-testimonials.js +2 -2
  3. package/dist/backends/gui/animated-testimonials.js.map +1 -1
  4. package/dist/backends/gui/animated-tooltip.cjs +2 -2
  5. package/dist/backends/gui/animated-tooltip.js +2 -2
  6. package/dist/backends/gui/animated-tooltip.js.map +1 -1
  7. package/dist/backends/gui/carousel.cjs +2 -2
  8. package/dist/backends/gui/carousel.d.ts.map +1 -1
  9. package/dist/backends/gui/carousel.js +2 -2
  10. package/dist/backends/gui/carousel.js.map +1 -1
  11. package/dist/backends/gui/index.cjs +4 -5
  12. package/dist/backends/gui/index.d.ts +1 -1
  13. package/dist/backends/gui/index.d.ts.map +1 -1
  14. package/dist/backends/gui/index.js +1 -1
  15. package/dist/backends/gui/index.js.map +1 -1
  16. package/dist/backends/gui/input-otp.cjs +2 -1
  17. package/dist/backends/gui/input-otp.d.ts.map +1 -1
  18. package/dist/backends/gui/input-otp.js +2 -1
  19. package/dist/backends/gui/input-otp.js.map +1 -1
  20. package/dist/backends/gui/navigation-menu.cjs +24 -6
  21. package/dist/backends/gui/navigation-menu.d.ts +0 -6
  22. package/dist/backends/gui/navigation-menu.d.ts.map +1 -1
  23. package/dist/backends/gui/navigation-menu.js +23 -5
  24. package/dist/backends/gui/navigation-menu.js.map +1 -1
  25. package/dist/backends/gui/popover.cjs +7 -2
  26. package/dist/backends/gui/popover.d.ts +8 -1
  27. package/dist/backends/gui/popover.d.ts.map +1 -1
  28. package/dist/backends/gui/popover.js +7 -2
  29. package/dist/backends/gui/popover.js.map +1 -1
  30. package/dist/backends/gui/prose.cjs +4 -18
  31. package/dist/backends/gui/prose.d.ts +8 -5
  32. package/dist/backends/gui/prose.d.ts.map +1 -1
  33. package/dist/backends/gui/prose.js +4 -18
  34. package/dist/backends/gui/prose.js.map +1 -1
  35. package/dist/backends/gui/skeleton.cjs +1 -1
  36. package/dist/backends/gui/skeleton.d.ts.map +1 -1
  37. package/dist/backends/gui/skeleton.js +1 -1
  38. package/dist/backends/gui/skeleton.js.map +1 -1
  39. package/dist/backends/gui/timeline.cjs +2 -2
  40. package/dist/backends/gui/timeline.d.ts +1 -1
  41. package/dist/backends/gui/timeline.js +2 -2
  42. package/dist/backends/gui/timeline.js.map +1 -1
  43. package/dist/backends/gui/video.cjs +1 -1
  44. package/dist/backends/gui/video.js +1 -1
  45. package/dist/backends/gui/video.js.map +1 -1
  46. package/dist/chat/Chat.cjs +7 -2
  47. package/dist/chat/Chat.d.ts +14 -1
  48. package/dist/chat/Chat.d.ts.map +1 -1
  49. package/dist/chat/Chat.js +7 -2
  50. package/dist/chat/Chat.js.map +1 -1
  51. package/dist/chat/Composer.cjs +6 -1
  52. package/dist/chat/Composer.d.ts.map +1 -1
  53. package/dist/chat/Composer.js +6 -1
  54. package/dist/chat/Composer.js.map +1 -1
  55. package/dist/chat/SessionRail.cjs +1 -4
  56. package/dist/chat/SessionRail.js +1 -4
  57. package/dist/chat/SessionRail.js.map +1 -1
  58. package/dist/core/cn.cjs +1 -1
  59. package/dist/core/cn.d.ts +1 -1
  60. package/dist/core/cn.js +1 -1
  61. package/dist/gallery.html +495 -598
  62. package/dist/glass.cjs +2 -24
  63. package/dist/glass.css +14 -196
  64. package/dist/glass.d.ts +2 -26
  65. package/dist/glass.d.ts.map +1 -1
  66. package/dist/glass.js +1 -22
  67. package/dist/glass.js.map +1 -1
  68. package/dist/grid.cjs +60 -10
  69. package/dist/grid.d.ts +20 -24
  70. package/dist/grid.d.ts.map +1 -1
  71. package/dist/grid.js +60 -10
  72. package/dist/grid.js.map +1 -1
  73. package/dist/index.cjs +6 -2
  74. package/dist/index.d.ts +2 -1
  75. package/dist/index.d.ts.map +1 -1
  76. package/dist/index.js +4 -1
  77. package/dist/index.js.map +1 -1
  78. package/dist/index.node.cjs +6 -2
  79. package/dist/index.node.js +4 -1
  80. package/dist/masthead/index.cjs +3 -12
  81. package/dist/masthead/index.d.ts +3 -6
  82. package/dist/masthead/index.d.ts.map +1 -1
  83. package/dist/masthead/index.js +3 -6
  84. package/dist/masthead/index.js.map +1 -1
  85. package/dist/motion.cjs +20 -0
  86. package/dist/motion.d.ts +17 -0
  87. package/dist/motion.d.ts.map +1 -0
  88. package/dist/motion.js +16 -0
  89. package/dist/motion.js.map +1 -0
  90. package/dist/product/DataTable.cjs +24 -4
  91. package/dist/product/DataTable.d.ts +0 -16
  92. package/dist/product/DataTable.d.ts.map +1 -1
  93. package/dist/product/DataTable.js +24 -4
  94. package/dist/product/DataTable.js.map +1 -1
  95. package/dist/product/FadeIn.cjs +1 -1
  96. package/dist/product/FadeIn.js +1 -1
  97. package/dist/product/FadeIn.js.map +1 -1
  98. package/dist/product/Metric.cjs +19 -2
  99. package/dist/product/Metric.d.ts +0 -16
  100. package/dist/product/Metric.d.ts.map +1 -1
  101. package/dist/product/Metric.js +19 -2
  102. package/dist/product/Metric.js.map +1 -1
  103. package/dist/product/Reorder.cjs +1 -1
  104. package/dist/product/Reorder.js +1 -1
  105. package/dist/product/Reorder.js.map +1 -1
  106. package/dist/product/Skeleton.cjs +5 -5
  107. package/dist/product/Skeleton.d.ts +4 -4
  108. package/dist/product/Skeleton.d.ts.map +1 -1
  109. package/dist/product/Skeleton.js +5 -5
  110. package/dist/product/Skeleton.js.map +1 -1
  111. package/dist/product/SlideOver.cjs +2 -10
  112. package/dist/product/SlideOver.d.ts.map +1 -1
  113. package/dist/product/SlideOver.js +2 -10
  114. package/dist/product/SlideOver.js.map +1 -1
  115. package/dist/product/figures.cjs +16 -0
  116. package/dist/product/figures.d.ts +16 -0
  117. package/dist/product/figures.d.ts.map +1 -0
  118. package/dist/product/figures.js +14 -0
  119. package/dist/product/figures.js.map +1 -0
  120. package/dist/product/social/SocialResource.cjs +2 -1
  121. package/dist/product/social/SocialResource.d.ts.map +1 -1
  122. package/dist/product/social/SocialResource.js +2 -1
  123. package/dist/product/social/SocialResource.js.map +1 -1
  124. package/dist/product/social/SocialSummaryBar.cjs +2 -1
  125. package/dist/product/social/SocialSummaryBar.d.ts.map +1 -1
  126. package/dist/product/social/SocialSummaryBar.js +2 -1
  127. package/dist/product/social/SocialSummaryBar.js.map +1 -1
  128. package/dist/style.cjs +1 -4
  129. package/dist/style.d.ts +0 -2
  130. package/dist/style.d.ts.map +1 -1
  131. package/dist/style.js +0 -2
  132. package/dist/style.js.map +1 -1
  133. package/dist/styles/motion.css +61 -283
  134. package/dist/styles.css +492 -595
  135. package/dist/sx.cjs +1 -1
  136. package/dist/sx.js +1 -1
  137. package/dist/theme.css +383 -292
  138. package/package.json +3 -4
  139. package/dist/masthead/Masthead.cjs +0 -168
  140. package/dist/masthead/Masthead.d.ts +0 -54
  141. package/dist/masthead/Masthead.d.ts.map +0 -1
  142. package/dist/masthead/Masthead.js +0 -162
  143. package/dist/masthead/Masthead.js.map +0 -1
  144. package/dist/masthead.css +0 -502
  145. package/dist/primitives/navigationMenuTriggerStyle.cjs +0 -8
  146. package/dist/primitives/navigationMenuTriggerStyle.d.ts +0 -2
  147. package/dist/primitives/navigationMenuTriggerStyle.d.ts.map +0 -1
  148. package/dist/primitives/navigationMenuTriggerStyle.js +0 -5
  149. package/dist/primitives/navigationMenuTriggerStyle.js.map +0 -1
package/dist/glass.cjs CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- 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;
3
+ exports.screen = exports.accent = exports.selected = exports.row = exports.rows = exports.panel = exports.scrim = exports.fold = exports.unfold = exports.sheet = exports.glass = void 0;
4
4
  exports.paper = paper;
5
5
  /**
6
6
  * The chrome, as values — `@hanzo/ui/glass`.
@@ -108,28 +108,6 @@ const SHEET_FILL = {
108
108
  1: 'var(--sheet-1, rgb(38 38 38 / .5))',
109
109
  2: 'var(--sheet-2, rgb(38 38 38 / .75))',
110
110
  };
111
- /**
112
- * The crease — the valley where a neighbouring sheet lies over this one.
113
- *
114
- * <YStack {...paper(sheet(0), crease('right'))}>
115
- *
116
- * The ladder's drops fall straight down (design's rule is one light, above), so
117
- * it has nothing to say about a VERTICAL seam — and an app shell is nothing but
118
- * vertical seams. Three sheets a rung apart, side by side, still read as three
119
- * abutting rectangles. This is the mark that makes them read as paper: the
120
- * ground going dark in the valley, which is what a sheet actually lays on the
121
- * one beside it.
122
- *
123
- * It goes on the sheet that is COVERED, on the edge the neighbour lies over —
124
- * a rail with a sidebar to its right takes `crease('right')`. Nothing can paint
125
- * outside its own box, so the receiver draws it; the caster only has to be
126
- * higher up the ladder.
127
- *
128
- * Spend it at a seam and nowhere else. A crease down the side of a card with
129
- * nothing beside it is a gradient somebody liked.
130
- */
131
- const crease = (edge) => ({ className: 'hz-crease', ...(edge ? { 'data-crease': edge } : {}) });
132
- exports.crease = crease;
133
111
  /**
134
112
  * Unfold — how a sheet ARRIVES: turning open about the edge it is hinged on,
135
113
  * rather than fading up as a rectangle.
@@ -144,7 +122,7 @@ exports.crease = crease;
144
122
  * composes with `sheet`, `glass` or neither. Off under reduced motion, in
145
123
  * `styles/motion.css` beside every other keyframe this package ships.
146
124
  */
147
- const unfold = (hinge = 'left') => ({ className: 'hz-unfold', ...(hinge === 'right' ? { 'data-hinge': 'right' } : {}) });
125
+ const unfold = (hinge = 'left') => ({ 'data-motion': 'unfold', ...(hinge === 'right' ? { 'data-hinge': 'right' } : {}) });
148
126
  exports.unfold = unfold;
149
127
  function paper(...marks) {
150
128
  const className = marks
package/dist/glass.css CHANGED
@@ -115,6 +115,20 @@
115
115
  }
116
116
  }
117
117
 
118
+ /* ── Solid — the one way out of the material ─────────────────────────────────
119
+ A panel over something that moves (a menu over a streaming transcript) reads
120
+ the motion through 72% frost. `<PopoverContent solid>` marks itself, and every
121
+ popover opened from inside it, with `data-material="solid"`: the ground is
122
+ design's opaque `--popover` and nothing behind is blurred into it. The rung's
123
+ shadow, lit edge and prism lip stay, so it is the same surface at the same
124
+ height with a solid fill. Declared after the material so the later rule wins
125
+ between two !important declarations of equal weight. */
126
+ [data-material="solid"] {
127
+ background-color: var(--popover, #0f0f0f) !important;
128
+ -webkit-backdrop-filter: none;
129
+ backdrop-filter: none;
130
+ }
131
+
118
132
  /* ── Depth — three rungs, and the lit edge is the load-bearing half ──────────
119
133
  A cast shadow is how a light page shows lift. On a near-black canvas it is
120
134
  nearly free of information: black on near-black moves no pixels, so a raised
@@ -244,73 +258,6 @@
244
258
  border-bottom-right-radius: 0 !important;
245
259
  }
246
260
 
247
- /* ── The crease — the valley where one sheet lies over another ───────────────
248
- The ladder lifts a sheet with a drop that falls STRAIGHT DOWN: design's rule
249
- is one light, above, and `check-tokens.mjs` fails the build on a sideways
250
- offset. That is right, and it means the ladder has nothing to say about a
251
- VERTICAL seam — and an app shell is nothing but vertical seams. A rail beside
252
- a sidebar beside a pane, each a step apart on the ladder, still reads as three
253
- abutting rectangles with lines ruled between them, because the only mark at
254
- the seam is the hairline.
255
-
256
- What a real sheet lays on the one beneath it, side by side under a light from
257
- above, is not a cast shadow — it is the valley going dark. Ambient occlusion
258
- has no direction of its own, which is both why it is honest here and why it is
259
- NOT spelled as a --shadow-*: those are directional by definition and this is
260
- not one.
261
-
262
- A PSEUDO-ELEMENT, at z-index -1 inside an isolated stacking context, so it
263
- paints above the sheet's own fill and below every child. That ordering is the
264
- whole reason it is not a `background-image` (which `.fold` already claims on
265
- this same element, !important, so the two would silently fight) and not an
266
- inset `box-shadow` (which `.elevation-*` claims, likewise).
267
-
268
- No side named -> both edges, which is what a pane with a neighbour on each
269
- hand needs. Name one and the other stops being drawn. */
270
- :root {
271
- --crease-ink: rgb(0 0 0 / .28);
272
- --crease-depth: 20px;
273
- }
274
-
275
- .light, :root.t_light, .t_light {
276
- /* On white the valley is a smudge, not a shadow — the same redistribution the
277
- drops make, and for the same reason. */
278
- --crease-ink: rgb(0 0 0 / .05);
279
- }
280
-
281
- .hz-crease {
282
- position: relative;
283
- /* Without this the -1 escapes and paints behind an ancestor's fill, which is
284
- indistinguishable from the crease not being there at all. */
285
- isolation: isolate;
286
- }
287
-
288
- .hz-crease::before,
289
- .hz-crease::after {
290
- content: "";
291
- position: absolute;
292
- top: 0;
293
- bottom: 0;
294
- width: var(--crease-depth);
295
- z-index: -1;
296
- pointer-events: none;
297
- }
298
-
299
- .hz-crease::before {
300
- left: 0;
301
- background-image: linear-gradient(to right, var(--crease-ink), transparent);
302
- }
303
-
304
- .hz-crease::after {
305
- right: 0;
306
- background-image: linear-gradient(to left, var(--crease-ink), transparent);
307
- }
308
-
309
- .hz-crease[data-crease="left"]::after,
310
- .hz-crease[data-crease="right"]::before {
311
- content: none;
312
- }
313
-
314
261
  /* ── The scrim ──────────────────────────────────────────────────────────────
315
262
  The dim that makes a floating panel read as floating rather than as more
316
263
  page. gui's overlay dims TWICE — a translucent ground under a further
@@ -358,135 +305,6 @@
358
305
  border-top: 1px solid var(--borderColor, var(--border));
359
306
  }
360
307
 
361
- /* ── The composer prism — the ONE ring on any Hanzo surface ──────────────────
362
- The composer is where you talk to Hanzo, so it is the thing that should look
363
- alive, and it earns that with MOTION and LIGHT rather than hue. Every other
364
- pixel of chrome stays monochrome; there is no second exemption, and the two
365
- attempts to grant one (a violet ring, then a full-wheel rainbow) each made
366
- the surface wearing it the only colour in the product.
367
-
368
- THIS LIVES HERE BECAUSE IT WAS DECLARED TWICE AND DRIFTED. hanzo.chat's
369
- client/src/style.css and hanzo.app's assets/globals.css each carried a copy,
370
- each calling itself "the ONE prism on any Hanzo surface". chat fixed the ring
371
- to be a rim; hanzo.app's copy kept drawing a filled DISC and never got the
372
- fix — invisible until a glass panel sat in it, at which point the whole
373
- spectrum washed up through the composer's interior. chat also quieted the
374
- halo (0.5 with a pulse -> 0.22, no pulse); hanzo.app kept the loud one. Two
375
- copies of one look is how that happens, and neither app could see the other
376
- was wrong.
377
-
378
- Structure: `.hz-composer` is a 1.5px-padded host; its direct child is the
379
- panel. ::before is the ring, ::after the halo. Both are MASKED to exclude the
380
- panel's footprint, so the ring is a rim BY CONSTRUCTION and the panel is free
381
- to be any material — opaque, glass, anything. The stops are declared once and
382
- read by both, because duplicated they drift on the first palette change and
383
- nobody notices which half moved. */
384
-
385
- /* `@property` is what lets a conic angle animate. Where it is unsupported the
386
- ring is simply static, which is a fine floor. */
387
- @property --hz-angle {
388
- syntax: "<angle>";
389
- initial-value: 0deg;
390
- inherits: false;
391
- }
392
-
393
- :root {
394
- /* One sweep, closing on the stop it opened with — a conic gradient whose
395
- first and last stop differ shows a hard seam.
396
-
397
- LUMINANCE, NOT HUE. Four saturated stops at 0.40-0.48 alpha, swept around
398
- a rounded RECTANGLE, do not distribute evenly: the long top and bottom
399
- edges each take a wide angular slice and the short sides almost none, so
400
- one edge wore a bright blue while the opposite wore a burnt orange — a
401
- ring that highlights half the box and reads as sitting off-centre. White
402
- at two close alphas removes the bright arc entirely, drops the peak from
403
- 0.48 to 0.18, and keeps the slow drift as a sheen. hanzo.chat and
404
- hanzo.app both declare exactly these stops; this is the package catching
405
- up to its consumers — the copies must not drift again, and this file is
406
- the home. */
407
- --hz-spectrum: rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.18),
408
- rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.18),
409
- rgba(255, 255, 255, 0.1);
410
- }
411
-
412
- @keyframes hzComposerSpin {
413
- to {
414
- --hz-angle: 360deg;
415
- }
416
- }
417
-
418
- .hz-composer {
419
- position: relative;
420
- isolation: isolate;
421
- padding: 1.5px;
422
- }
423
-
424
- /* The ring DRAWS A RING. `padding` is its thickness; the two-layer mask keeps
425
- paint outside it — `content-box` is the hole, the full box the plate, and
426
- `exclude` leaves the lip. */
427
- .hz-composer::before {
428
- content: "";
429
- position: absolute;
430
- inset: 0;
431
- padding: 1.5px;
432
- border-radius: inherit;
433
- background: conic-gradient(from var(--hz-angle), var(--hz-spectrum));
434
- animation: hzComposerSpin 10s linear infinite;
435
- -webkit-mask:
436
- linear-gradient(#000 0 0) content-box,
437
- linear-gradient(#000 0 0);
438
- mask:
439
- linear-gradient(#000 0 0) content-box,
440
- linear-gradient(#000 0 0);
441
- mask-composite: exclude;
442
- /* After the standard shorthand: WebKit aliases `mask` onto `-webkit-mask`, so
443
- declaring this first lets the shorthand reset it to `source-over` — the
444
- filled disc again, on exactly the browsers too old to have `mask-composite`
445
- at all. */
446
- -webkit-mask-composite: xor;
447
- z-index: 0;
448
- pointer-events: none;
449
- }
450
-
451
- /* The halo lights the air AROUND the box and nothing behind it. */
452
- .hz-composer::after {
453
- content: "";
454
- position: absolute;
455
- inset: -6px;
456
- padding: 6px;
457
- /* Concentric with the box, NOT `inherit`: the halo lives 6px outside, so an
458
- inherited corner on this larger box curves too tight and reads as a second,
459
- mismatched rounding just outside the panel. */
460
- border-radius: calc(1.5rem + 6px);
461
- background: conic-gradient(from var(--hz-angle), var(--hz-spectrum));
462
- filter: blur(16px);
463
- opacity: 0.22;
464
- animation: hzComposerSpin 10s linear infinite;
465
- -webkit-mask:
466
- linear-gradient(#000 0 0) content-box,
467
- linear-gradient(#000 0 0);
468
- mask:
469
- linear-gradient(#000 0 0) content-box,
470
- linear-gradient(#000 0 0);
471
- mask-composite: exclude;
472
- -webkit-mask-composite: xor;
473
- z-index: -1;
474
- pointer-events: none;
475
- }
476
-
477
- /* The panel sits above ring and halo. */
478
- .hz-composer > * {
479
- position: relative;
480
- z-index: 1;
481
- }
482
-
483
- @media (prefers-reduced-motion: reduce) {
484
- .hz-composer::before,
485
- .hz-composer::after {
486
- animation: none;
487
- }
488
- }
489
-
490
308
  /* FOCUS RINGS THE CONTROL A PERSON SEES, WHICH IS THE WHOLE COMPOSER.
491
309
 
492
310
  `Composer` is a bordered box holding a field above a toolbar row, so it reads
package/dist/glass.d.ts CHANGED
@@ -80,30 +80,6 @@ export declare const sheet: (level?: 0 | 1 | 2) => {
80
80
  * what a pane between two other panes needs.
81
81
  */
82
82
  export type Edge = 'left' | 'right';
83
- /**
84
- * The crease — the valley where a neighbouring sheet lies over this one.
85
- *
86
- * <YStack {...paper(sheet(0), crease('right'))}>
87
- *
88
- * The ladder's drops fall straight down (design's rule is one light, above), so
89
- * it has nothing to say about a VERTICAL seam — and an app shell is nothing but
90
- * vertical seams. Three sheets a rung apart, side by side, still read as three
91
- * abutting rectangles. This is the mark that makes them read as paper: the
92
- * ground going dark in the valley, which is what a sheet actually lays on the
93
- * one beside it.
94
- *
95
- * It goes on the sheet that is COVERED, on the edge the neighbour lies over —
96
- * a rail with a sidebar to its right takes `crease('right')`. Nothing can paint
97
- * outside its own box, so the receiver draws it; the caster only has to be
98
- * higher up the ladder.
99
- *
100
- * Spend it at a seam and nowhere else. A crease down the side of a card with
101
- * nothing beside it is a gradient somebody liked.
102
- */
103
- export declare const crease: (edge?: Edge) => {
104
- readonly className: 'hz-crease';
105
- readonly 'data-crease'?: Edge | undefined;
106
- };
107
83
  /**
108
84
  * Unfold — how a sheet ARRIVES: turning open about the edge it is hinged on,
109
85
  * rather than fading up as a rectangle.
@@ -119,7 +95,7 @@ export declare const crease: (edge?: Edge) => {
119
95
  * `styles/motion.css` beside every other keyframe this package ships.
120
96
  */
121
97
  export declare const unfold: (hinge?: Edge) => {
122
- readonly className: 'hz-unfold';
98
+ readonly 'data-motion': 'unfold';
123
99
  readonly 'data-hinge'?: string | undefined;
124
100
  };
125
101
  interface Mark {
@@ -128,7 +104,7 @@ interface Mark {
128
104
  /**
129
105
  * Compose marks onto one surface, without losing a class.
130
106
  *
131
- * <YStack {...paper(sheet(1), crease('left'), fold)}>
107
+ * <YStack {...paper(sheet(1), unfold(), fold)}>
132
108
  *
133
109
  * SPREADING TWO RECIPES SILENTLY DROPS ONE. `{...sheet(1)} {...fold}` — the
134
110
  * composition `fold`'s own documentation shows — keeps only the last
@@ -1 +1 @@
1
- {"version":3,"file":"glass.d.ts","sourceRoot":"","sources":["../src/glass.ts"],"names":[],"mappings":"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"}
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;;;GAGG;AACH,MAAM,MAAM,IAAI,GAAG,MAAM,GAAG,OAAO,CAAA;AAEnC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,MAAM,WAAW,IAAI;4BACd,QAAQ;;CAAqE,CAAA;AAEjG,UAAU,IAAI;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;AAC9C,wBAAgB,KAAK,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AACxE,wBAAgB,KAAK,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AASlG;;;;;;;;;;;;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"}
package/dist/glass.js CHANGED
@@ -102,27 +102,6 @@ const SHEET_FILL = {
102
102
  1: 'var(--sheet-1, rgb(38 38 38 / .5))',
103
103
  2: 'var(--sheet-2, rgb(38 38 38 / .75))',
104
104
  };
105
- /**
106
- * The crease — the valley where a neighbouring sheet lies over this one.
107
- *
108
- * <YStack {...paper(sheet(0), crease('right'))}>
109
- *
110
- * The ladder's drops fall straight down (design's rule is one light, above), so
111
- * it has nothing to say about a VERTICAL seam — and an app shell is nothing but
112
- * vertical seams. Three sheets a rung apart, side by side, still read as three
113
- * abutting rectangles. This is the mark that makes them read as paper: the
114
- * ground going dark in the valley, which is what a sheet actually lays on the
115
- * one beside it.
116
- *
117
- * It goes on the sheet that is COVERED, on the edge the neighbour lies over —
118
- * a rail with a sidebar to its right takes `crease('right')`. Nothing can paint
119
- * outside its own box, so the receiver draws it; the caster only has to be
120
- * higher up the ladder.
121
- *
122
- * Spend it at a seam and nowhere else. A crease down the side of a card with
123
- * nothing beside it is a gradient somebody liked.
124
- */
125
- export const crease = (edge) => ({ className: 'hz-crease', ...(edge ? { 'data-crease': edge } : {}) });
126
105
  /**
127
106
  * Unfold — how a sheet ARRIVES: turning open about the edge it is hinged on,
128
107
  * rather than fading up as a rectangle.
@@ -137,7 +116,7 @@ export const crease = (edge) => ({ className: 'hz-crease', ...(edge ? { 'data-cr
137
116
  * composes with `sheet`, `glass` or neither. Off under reduced motion, in
138
117
  * `styles/motion.css` beside every other keyframe this package ships.
139
118
  */
140
- export const unfold = (hinge = 'left') => ({ className: 'hz-unfold', ...(hinge === 'right' ? { 'data-hinge': 'right' } : {}) });
119
+ export const unfold = (hinge = 'left') => ({ 'data-motion': 'unfold', ...(hinge === 'right' ? { 'data-hinge': 'right' } : {}) });
141
120
  export function paper(...marks) {
142
121
  const className = marks
143
122
  .map((mark) => mark.className)
package/dist/glass.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"glass.js","sourceRoot":"","sources":["../src/glass.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"glass.js","sourceRoot":"","sources":["../src/glass.ts"],"names":[],"mappings":"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"}
package/dist/grid.cjs CHANGED
@@ -3,6 +3,37 @@
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  exports.Cell = exports.Grid = exports.tracks = void 0;
5
5
  const jsx_runtime_1 = require("react/jsx-runtime");
6
+ /**
7
+ * Grid — a real CSS grid whose tracks come from the CONTAINER, not the children.
8
+ *
9
+ * This exists to kill a specific shipped defect: hand-rolled
10
+ * `width="calc(25% - 7.5px)"` grids that collapse asymmetrically. That shape is
11
+ * broken by construction — each child computes its own width, so the row is only
12
+ * even while every child agrees, and one long word or one `box-sizing` surprise
13
+ * makes the row ragged. Nothing about it can be fixed by tuning the number.
14
+ *
15
+ * Here the parent declares the tracks once and the children have no say. Equal
16
+ * columns are structural, not arithmetic, and no child can widen its own track.
17
+ *
18
+ * A gui View with `display="grid"` and the grid's own props, at `@hanzo/ui/grid`
19
+ * beside `@hanzo/ui/dots`. `columns` and `rows` are TRACK LISTS and `Cell`
20
+ * places and spans, all CSS-grid concepts rather than facts about the element,
21
+ * so the same call lays out wherever gui's grid props reach.
22
+ *
23
+ * IT FLOORS ITS OWN CHILDREN. A grid item's initial `min-width` is `auto`, which
24
+ * floors its box at the content's min-content width: one long unbroken string —
25
+ * a hash, a URL, a wide <pre> — pushes the item past its track and over its
26
+ * neighbour. Grid gives every element child `min-width: 0` itself — a gui child
27
+ * has it from its own base, any other takes it as a style — so a host needs no
28
+ * rule for it, and a child that states its own minimum keeps it.
29
+ *
30
+ * A LAYOUT BOX, NOT A TYPE SCOPE. A gui View carries the body font's family,
31
+ * weight, tracking and leading; a grid of bare tags must read in whatever face
32
+ * surrounds it, as the `div` this replaced did. So those four inherit, and it
33
+ * shrinks in a flex row the way a `div` does.
34
+ */
35
+ const gui_1 = require("@hanzo/gui");
36
+ const react_1 = require("react");
6
37
  /** `'$3'` -> 12. A raw number passes through as px. */
7
38
  /**
8
39
  * A gap, as a CSS length.
@@ -34,6 +65,7 @@ const track = (v) => (typeof v === 'number' ? `${v}px` : v);
34
65
  * `minmax(auto, 1fr)`, and `auto` floors the track at the content's min-content
35
66
  * width — so one long unbroken string pushes its own column wider and every
36
67
  * sibling narrower. That IS the ragged row this component exists to prevent.
68
+ * A raw string is the caller's track list, as written.
37
69
  */
38
70
  const list = (t) => {
39
71
  if (typeof t === 'number')
@@ -68,19 +100,37 @@ const fitted = ({ min, max }, gap) => {
68
100
  */
69
101
  const tracks = (columns, gap = '0px') => fit(columns) ? fitted(columns, gap) : list(columns);
70
102
  exports.tracks = tracks;
71
- const Grid = ({ columns = { min: 240 }, rows, gap = '$3', style, ...props }) => {
103
+ /** The four type properties a gui View sets and a layout box must not. */
104
+ const TYPE = {
105
+ fontFamily: 'inherit',
106
+ fontWeight: 'inherit',
107
+ letterSpacing: 'inherit',
108
+ lineHeight: 'inherit',
109
+ };
110
+ /** A gui component: its box already floors at `min-width: 0` unless it says otherwise. */
111
+ const gui = (type) => (typeof type === 'function' || typeof type === 'object') && type !== null && 'staticConfig' in type;
112
+ /**
113
+ * One child with its min-width floor. A gui child has it already and a child
114
+ * that names its own minimum keeps it; a fragment is left alone, since it has
115
+ * no box to floor.
116
+ */
117
+ const floor = (child) => {
118
+ if (!(0, react_1.isValidElement)(child) || child.type === react_1.Fragment || gui(child.type))
119
+ return child;
120
+ const el = child;
121
+ const style = el.props.style;
122
+ if (Array.isArray(style))
123
+ return (0, react_1.cloneElement)(el, { style: [{ minWidth: 0 }, ...style] });
124
+ if (style && typeof style === 'object' && 'minWidth' in style)
125
+ return el;
126
+ return (0, react_1.cloneElement)(el, { style: { minWidth: 0, ...style } });
127
+ };
128
+ const Grid = ({ columns = { min: 240 }, rows, gap = '$3', style, children, ...props }) => {
72
129
  const g = space(gap, 12);
73
- const grid = {
74
- display: 'grid',
75
- gridTemplateColumns: (0, exports.tracks)(columns, g),
76
- gap: g,
77
- };
78
- if (rows !== undefined)
79
- grid.gridTemplateRows = list(rows);
80
- return (0, jsx_runtime_1.jsx)("div", { "data-slot": "grid", style: { ...grid, ...style }, ...props });
130
+ return ((0, jsx_runtime_1.jsx)(gui_1.View, { "data-slot": "grid", display: "grid", gridTemplateColumns: (0, exports.tracks)(columns, g), ...(rows !== undefined ? { gridTemplateRows: list(rows) } : null), gap: g, shrink: 1, minW: 'auto', minH: 'auto', style: { ...TYPE, ...style }, ...props, children: react_1.Children.map(children, floor) }));
81
131
  };
82
132
  exports.Grid = Grid;
83
133
  /** A cell only exists to span or to place; a plain child needs neither. */
84
134
  const place = (v) => v === undefined ? undefined : typeof v === 'number' ? `span ${v}` : v;
85
- const Cell = ({ col, row, style, ...props }) => ((0, jsx_runtime_1.jsx)("div", { "data-slot": "grid-cell", style: { gridColumn: place(col), gridRow: place(row), ...style }, ...props }));
135
+ const Cell = ({ col, row, style, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.View, { "data-slot": "grid-cell", ...(col !== undefined ? { gridColumn: place(col) } : null), ...(row !== undefined ? { gridRow: place(row) } : null), minW: 0, shrink: 1, style: { ...TYPE, ...style }, ...props }));
86
136
  exports.Cell = Cell;
package/dist/grid.d.ts CHANGED
@@ -10,30 +10,26 @@
10
10
  * Here the parent declares the tracks once and the children have no say. Equal
11
11
  * columns are structural, not arithmetic, and no child can widen its own track.
12
12
  *
13
- * WEB ONLY, which is why it sits at `@hanzo/ui/grid` rather than on the barrel,
14
- * beside `@hanzo/ui/dots`. That is a statement about this file and nothing else:
15
- * it renders a `div` and sets `display: grid`, and neither of those exists on
16
- * React Native — Yoga has grid data structures but no grid algorithm, so
17
- * `display: 'grid'` is not in the platform's style types at all.
13
+ * A gui View with `display="grid"` and the grid's own props, at `@hanzo/ui/grid`
14
+ * beside `@hanzo/ui/dots`. `columns` and `rows` are TRACK LISTS and `Cell`
15
+ * places and spans, all CSS-grid concepts rather than facts about the element,
16
+ * so the same call lays out wherever gui's grid props reach.
18
17
  *
19
- * The quarantine is a pin, not a law, and the API is named so that lifting it
20
- * costs nothing: `columns` and `rows` are TRACK LISTS and `Cell` places and
21
- * spans, all of them CSS-grid concepts rather than facts about the div. When a
22
- * native grid engine lands, this file changes and call sites do not.
18
+ * IT FLOORS ITS OWN CHILDREN. A grid item's initial `min-width` is `auto`, which
19
+ * floors its box at the content's min-content width: one long unbroken string —
20
+ * a hash, a URL, a wide <pre> — pushes the item past its track and over its
21
+ * neighbour. Grid gives every element child `min-width: 0` itself — a gui child
22
+ * has it from its own base, any other takes it as a style — so a host needs no
23
+ * rule for it, and a child that states its own minimum keeps it.
23
24
  *
24
- * Why a plain div and not a gui YStack: gui's box model is Yoga, which is
25
- * flexbox here — a YStack would compile its own `display:flex` atomic class and
26
- * fight the grid. Inline styles, not a stylesheet class, so there is no rule to
27
- * fail to ship: this package's own checker exists because "class with no rule"
28
- * has shipped here three times.
29
- *
30
- * The min-width floor every grid child needs is declared ONCE, as
31
- * `[data-slot='grid'] > *` in `styles/motion.css`. It is not restated inline
32
- * here: a grid item's `grid-column` only applies to a direct child of the grid,
33
- * so a `Cell` is always in range of that selector, and a second copy inline
34
- * would be a second place for the same invariant to be edited.
25
+ * A LAYOUT BOX, NOT A TYPE SCOPE. A gui View carries the body font's family,
26
+ * weight, tracking and leading; a grid of bare tags must read in whatever face
27
+ * surrounds it, as the `div` this replaced did. So those four inherit, and it
28
+ * shrinks in a flex row the way a `div` does.
35
29
  */
36
- import type { ComponentProps, ReactNode } from 'react';
30
+ import { View } from '@hanzo/gui';
31
+ import { type ComponentProps, type ReactNode } from 'react';
32
+ type ViewProps = ComponentProps<typeof View>;
37
33
  /**
38
34
  * A track list, in the spellings a caller actually has. Every one of these is
39
35
  * `grid-template-columns` / `grid-template-rows`.
@@ -63,7 +59,7 @@ export interface Fit {
63
59
  */
64
60
  max?: number;
65
61
  }
66
- export interface GridProps extends Omit<ComponentProps<'div'>, 'children'> {
62
+ export interface GridProps extends Omit<ViewProps, 'children' | 'columns' | 'rows' | 'gap'> {
67
63
  /** The column tracks. A count, a list, a raw track list, or a `Fit`. */
68
64
  columns?: Tracks | Fit;
69
65
  /** The row tracks. Rows size to content unless you say otherwise. */
@@ -80,8 +76,8 @@ export interface GridProps extends Omit<ComponentProps<'div'>, 'children'> {
80
76
  * tidied back into the ragged row.
81
77
  */
82
78
  export declare const tracks: (columns: Tracks | Fit, gap?: string) => string;
83
- declare const Grid: ({ columns, rows, gap, style, ...props }: GridProps) => import("react").JSX.Element;
84
- export interface CellProps extends ComponentProps<'div'> {
79
+ declare const Grid: ({ columns, rows, gap, style, children, ...props }: GridProps) => import("react").JSX.Element;
80
+ export interface CellProps extends Omit<ViewProps, 'col' | 'row'> {
85
81
  /**
86
82
  * Where this cell sits across the columns, as `grid-column`. A NUMBER spans
87
83
  * that many tracks (`span 2`); a string places it (`'1 / 3'`, `'2 / -1'`).
@@ -1 +1 @@
1
- {"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../src/grid.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,KAAK,EAAE,cAAc,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAErE;;;;;;;GAOG;AACH,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;AAE7D;;;;;;GAMG;AACH,MAAM,WAAW,GAAG;IAClB,4DAA4D;IAC5D,GAAG,EAAE,MAAM,CAAA;IACX;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACxE,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;IACtB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AA8DD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,YAAa,MAAM,GAAG,GAAG,mBAAgB,MACP,CAAA;AAErD,QAAA,MAAM,IAAI,4CAAmE,SAAS,gCASrF,CAAA;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,KAAK,CAAC;IACtD;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,8CAA8C;IAC9C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACtB;AAMD,QAAA,MAAM,IAAI,kCAAmC,SAAS,gCAMrD,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA"}
1
+ {"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../src/grid.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAKL,KAAK,cAAc,EAGnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAEd,KAAK,SAAS,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,CAAA;AAE5C;;;;;;;GAOG;AACH,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;AAE7D;;;;;;GAMG;AACH,MAAM,WAAW,GAAG;IAClB,4DAA4D;IAC5D,GAAG,EAAE,MAAM,CAAA;IACX;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC;IACzF,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;IACtB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AA+DD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,YAAa,MAAM,GAAG,GAAG,mBAAgB,MACP,CAAA;AA4BrD,QAAA,MAAM,IAAI,sDAA6E,SAAS,gCAkB/F,CAAA;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,KAAK,CAAC;IAC/D;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,8CAA8C;IAC9C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACtB;AAMD,QAAA,MAAM,IAAI,kCAAmC,SAAS,gCAUrD,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA"}