@hanzo/ui 8.17.1 → 8.18.1

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 (7) hide show
  1. package/dist/blocks/screenful.cjs +12 -3
  2. package/dist/blocks/screenful.d.ts.map +1 -1
  3. package/dist/blocks/screenful.js +12 -3
  4. package/dist/blocks/screenful.js.map +1 -1
  5. package/dist/gallery.html +36 -1
  6. package/dist/styles.css +35 -0
  7. package/package.json +1 -1
package/dist/blocks/screenful.cjs CHANGED
@@ -128,12 +128,21 @@ const ScreenfulBlockComponent = ({ block, agent, initialInView = false, snapTile
128
128
  const video = b.banner && typeof b.banner === 'object';
129
129
  const oneColumn = b.contentColumns.length === 1;
130
130
  const vertCenter = spec('vert-center');
131
+ // The gutter GROWS with the viewport. It used to be `px-[8vw] xl:px-[1vw]`,
132
+ // which shrank from 8% of the screen to 1% at exactly the width where there
133
+ // is most room — measured at 1280px: 13px of margin and 82 characters to the
134
+ // line. `--gutter` is a clamp, so it opens up to 6rem and stops.
131
135
  const gutters = spec('narrow-gutters')
132
- ? (0, cn_1.cn)('px-6 lg:px-8 2xl:px-2 pb-4 lg:pb-6 xl:pb-8', snapTile && 'pt-15 md:pt-26 lg:pt-28')
136
+ ? (0, cn_1.cn)('px-6 lg:px-8 pb-4 lg:pb-6 xl:pb-8', snapTile && 'pt-15 md:pt-26 lg:pt-28')
133
137
  : spec('no-gutters')
134
138
  ? (0, cn_1.cn)('px-0 pb-0', snapTile && 'pt-11 lg:pt-20')
135
- : 'px-[8vw] xl:px-[1vw] pb-[8vh] pt-[calc(44px+4vh)] md:pt-[calc(80px+6vh)]';
136
- return ((0, jsx_runtime_1.jsxs)(box_1.Box, { tag: "section", ...(b.anchorId ? { id: b.anchorId } : {}), className: (0, cn_1.cn)(snapTile ? 'snap-start snap-always h-[100vh]' : 'min-h-screen', bottom && 'flex flex-col', className), children: [(0, jsx_runtime_1.jsx)(prose_1.ApplyTypography, { className: (0, cn_1.cn)('w-full flex flex-row justify-center self-stretch', snapTile && (agent === 'desktop' ? 'h-full' : 'h-[100svh]'), bottom && 'grow'), children: (0, jsx_runtime_1.jsxs)(Poster, { banner: b.banner, children: [video && ((0, jsx_runtime_1.jsx)(Backdrop, { block: b.banner, className: "absolute top-0 left-0 bottom-0 right-0", initialInView: initialInView })), (0, jsx_runtime_1.jsxs)(box_1.Box, { className: (0, cn_1.cn)('xl:mx-auto overflow-y-hidden h-full', !spec('full-screen-width') && 'max-w-screen-xl', gutters, agent && agent !== 'desktop' && 'pt-15 sm:pt-17 pb-0 px-3 sm:px-8', snapTile ? 'absolute left-0 right-0 top-0 bottom-0' : 'flex min-h-screen w-full', contentClassName, vertCenter && (0, cn_1.cn)('self-center', oneColumn && 'py-0')), children: [(0, jsx_runtime_1.jsx)(Columns, { block: b, agent: agent, className: "w-full" }), b.footer] })] }) }), bottom] }));
139
+ : 'px-[var(--gutter)] pb-[8vh] pt-[calc(44px+4vh)] md:pt-[calc(80px+6vh)]';
140
+ return ((0, jsx_runtime_1.jsxs)(box_1.Box, { tag: "section", ...(b.anchorId ? { id: b.anchorId } : {}), className: (0, cn_1.cn)(snapTile ? 'snap-start snap-always h-[100vh]' : 'min-h-screen', bottom && 'flex flex-col', className), children: [(0, jsx_runtime_1.jsx)(prose_1.ApplyTypography, { className: (0, cn_1.cn)('w-full flex flex-row justify-center self-stretch', snapTile && (agent === 'desktop' ? 'h-full' : 'h-[100svh]'), bottom && 'grow'), children: (0, jsx_runtime_1.jsxs)(Poster, { banner: b.banner, children: [video && ((0, jsx_runtime_1.jsx)(Backdrop, { block: b.banner, className: "absolute top-0 left-0 bottom-0 right-0", initialInView: initialInView })), (0, jsx_runtime_1.jsxs)(box_1.Box, { className: (0, cn_1.cn)('xl:mx-auto overflow-y-hidden h-full',
141
+ // `max-w-screen-xl` is 1280px — exactly the width most desktops
142
+ // are, so it capped nothing where it mattered. `--frame` is wider
143
+ // and is a real bound: the composition stops, the gutter takes the
144
+ // rest, and the column centres.
145
+ !spec('full-screen-width') && 'max-w-[var(--frame)]', gutters, agent && agent !== 'desktop' && 'pt-15 sm:pt-17 pb-0 px-3 sm:px-8', snapTile ? 'absolute left-0 right-0 top-0 bottom-0' : 'flex min-h-screen w-full', contentClassName, vertCenter && (0, cn_1.cn)('self-center', oneColumn && 'py-0')), children: [(0, jsx_runtime_1.jsx)(Columns, { block: b, agent: agent, className: "w-full" }), b.footer] })] }) }), bottom] }));
137
146
  };
138
147
  exports.ScreenfulBlockComponent = ScreenfulBlockComponent;
139
148
  exports.default = exports.ScreenfulBlockComponent;
package/dist/blocks/screenful.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"screenful.d.ts","sourceRoot":"","sources":["../../src/blocks/screenful.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,KAAK,mBAAmB,EAAO,MAAM,QAAQ,CAAA;AA0KtD;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,oFAQjC,mBAAmB,GAAG;IACvB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB,4CA2DA,CAAA;eAEc,uBAAuB"}
1
+ {"version":3,"file":"screenful.d.ts","sourceRoot":"","sources":["../../src/blocks/screenful.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,KAAK,mBAAmB,EAAO,MAAM,QAAQ,CAAA;AA0KtD;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,oFAQjC,mBAAmB,GAAG;IACvB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB,4CAmEA,CAAA;eAEc,uBAAuB"}
package/dist/blocks/screenful.js CHANGED
@@ -92,12 +92,21 @@ export const ScreenfulBlockComponent = ({ block, agent, initialInView = false, s
92
92
  const video = b.banner && typeof b.banner === 'object';
93
93
  const oneColumn = b.contentColumns.length === 1;
94
94
  const vertCenter = spec('vert-center');
95
+ // The gutter GROWS with the viewport. It used to be `px-[8vw] xl:px-[1vw]`,
96
+ // which shrank from 8% of the screen to 1% at exactly the width where there
97
+ // is most room — measured at 1280px: 13px of margin and 82 characters to the
98
+ // line. `--gutter` is a clamp, so it opens up to 6rem and stops.
95
99
  const gutters = spec('narrow-gutters')
96
- ? cn('px-6 lg:px-8 2xl:px-2 pb-4 lg:pb-6 xl:pb-8', snapTile && 'pt-15 md:pt-26 lg:pt-28')
100
+ ? cn('px-6 lg:px-8 pb-4 lg:pb-6 xl:pb-8', snapTile && 'pt-15 md:pt-26 lg:pt-28')
97
101
  : spec('no-gutters')
98
102
  ? cn('px-0 pb-0', snapTile && 'pt-11 lg:pt-20')
99
- : 'px-[8vw] xl:px-[1vw] pb-[8vh] pt-[calc(44px+4vh)] md:pt-[calc(80px+6vh)]';
100
- return (_jsxs(Box, { tag: "section", ...(b.anchorId ? { id: b.anchorId } : {}), className: cn(snapTile ? 'snap-start snap-always h-[100vh]' : 'min-h-screen', bottom && 'flex flex-col', className), children: [_jsx(ApplyTypography, { className: cn('w-full flex flex-row justify-center self-stretch', snapTile && (agent === 'desktop' ? 'h-full' : 'h-[100svh]'), bottom && 'grow'), children: _jsxs(Poster, { banner: b.banner, children: [video && (_jsx(Backdrop, { block: b.banner, className: "absolute top-0 left-0 bottom-0 right-0", initialInView: initialInView })), _jsxs(Box, { className: cn('xl:mx-auto overflow-y-hidden h-full', !spec('full-screen-width') && 'max-w-screen-xl', gutters, agent && agent !== 'desktop' && 'pt-15 sm:pt-17 pb-0 px-3 sm:px-8', snapTile ? 'absolute left-0 right-0 top-0 bottom-0' : 'flex min-h-screen w-full', contentClassName, vertCenter && cn('self-center', oneColumn && 'py-0')), children: [_jsx(Columns, { block: b, agent: agent, className: "w-full" }), b.footer] })] }) }), bottom] }));
103
+ : 'px-[var(--gutter)] pb-[8vh] pt-[calc(44px+4vh)] md:pt-[calc(80px+6vh)]';
104
+ return (_jsxs(Box, { tag: "section", ...(b.anchorId ? { id: b.anchorId } : {}), className: cn(snapTile ? 'snap-start snap-always h-[100vh]' : 'min-h-screen', bottom && 'flex flex-col', className), children: [_jsx(ApplyTypography, { className: cn('w-full flex flex-row justify-center self-stretch', snapTile && (agent === 'desktop' ? 'h-full' : 'h-[100svh]'), bottom && 'grow'), children: _jsxs(Poster, { banner: b.banner, children: [video && (_jsx(Backdrop, { block: b.banner, className: "absolute top-0 left-0 bottom-0 right-0", initialInView: initialInView })), _jsxs(Box, { className: cn('xl:mx-auto overflow-y-hidden h-full',
105
+ // `max-w-screen-xl` is 1280px — exactly the width most desktops
106
+ // are, so it capped nothing where it mattered. `--frame` is wider
107
+ // and is a real bound: the composition stops, the gutter takes the
108
+ // rest, and the column centres.
109
+ !spec('full-screen-width') && 'max-w-[var(--frame)]', gutters, agent && agent !== 'desktop' && 'pt-15 sm:pt-17 pb-0 px-3 sm:px-8', snapTile ? 'absolute left-0 right-0 top-0 bottom-0' : 'flex min-h-screen w-full', contentClassName, vertCenter && cn('self-center', oneColumn && 'py-0')), children: [_jsx(Columns, { block: b, agent: agent, className: "w-full" }), b.footer] })] }) }), bottom] }));
101
110
  };
102
111
  export default ScreenfulBlockComponent;
103
112
  //# sourceMappingURL=screenful.js.map
package/dist/blocks/screenful.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"screenful.js","sourceRoot":"","sources":["../../src/blocks/screenful.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"screenful.js","sourceRoot":"","sources":["../../src/blocks/screenful.tsx"],"names":[],"mappings":"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"}
package/dist/gallery.html CHANGED
@@ -1,4 +1,4 @@
1
- <!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. */
1
+ <!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.18.1</title><style>/* @hanzo/ui — generated by scripts/gen-css.mjs. Do not edit. */
2
2
  :root { --hanzo-ui-styles: 1; }
3
3
  /* Hanzo Design System — the entry point. Import THIS one file.
4
4
  *
@@ -2158,6 +2158,41 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
2158
2158
  * in a token or a component.
2159
2159
  */
2160
2160
 
2161
+ /* ── The measure ──────────────────────────────────────────────────────────
2162
+ How wide a thing is allowed to get, which the token set had no answer for.
2163
+ Type and spacing were both tokenised; width was left to whatever class the
2164
+ page happened to carry, and the lux slides ended up setting 82 characters to
2165
+ the line at 1280px with 13px of gutter — the viewport, not a column.
2166
+
2167
+ Three values, because a page needs three different widths:
2168
+
2169
+ --measure running text. 68 characters is the top of the comfortable
2170
+ range; past it the eye loses its place on the line return.
2171
+ In `ch` so it follows the type rather than fighting it.
2172
+ --frame the outer bound of a full-width composition — a slide, a
2173
+ header, a footer. Wider than the measure because a two-column
2174
+ layout is not running text.
2175
+ --gutter the margin outside the frame. It GROWS with the viewport: a
2176
+ wider screen should give the content more air, not less. The
2177
+ lux slides had this inverted — 8vw below xl, 1vw above — so
2178
+ the design got tighter exactly as the room appeared. */
2179
+ :root {
2180
+ --measure: 68ch;
2181
+ --frame: 90rem;
2182
+ --gutter: clamp(1.25rem, 5vw, 6rem);
2183
+ }
2184
+
2185
+ /* Running text is bounded; a heading is not. A heading is short, and the width
2186
+ is what gives it presence — so only the elements that set paragraphs are
2187
+ capped. A max-width can never make something wider, so this is safe inside a
2188
+ card or a column that is already narrower. */
2189
+ .hz-prose > p,
2190
+ .hz-prose > ul,
2191
+ .hz-prose > ol,
2192
+ .hz-prose > blockquote {
2193
+ max-width: var(--measure);
2194
+ }
2195
+
2161
2196
  *,
2162
2197
  *::before,
2163
2198
  *::after {
package/dist/styles.css CHANGED
@@ -2158,6 +2158,41 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
2158
2158
  * in a token or a component.
2159
2159
  */
2160
2160
 
2161
+ /* ── The measure ──────────────────────────────────────────────────────────
2162
+ How wide a thing is allowed to get, which the token set had no answer for.
2163
+ Type and spacing were both tokenised; width was left to whatever class the
2164
+ page happened to carry, and the lux slides ended up setting 82 characters to
2165
+ the line at 1280px with 13px of gutter — the viewport, not a column.
2166
+
2167
+ Three values, because a page needs three different widths:
2168
+
2169
+ --measure running text. 68 characters is the top of the comfortable
2170
+ range; past it the eye loses its place on the line return.
2171
+ In `ch` so it follows the type rather than fighting it.
2172
+ --frame the outer bound of a full-width composition — a slide, a
2173
+ header, a footer. Wider than the measure because a two-column
2174
+ layout is not running text.
2175
+ --gutter the margin outside the frame. It GROWS with the viewport: a
2176
+ wider screen should give the content more air, not less. The
2177
+ lux slides had this inverted — 8vw below xl, 1vw above — so
2178
+ the design got tighter exactly as the room appeared. */
2179
+ :root {
2180
+ --measure: 68ch;
2181
+ --frame: 90rem;
2182
+ --gutter: clamp(1.25rem, 5vw, 6rem);
2183
+ }
2184
+
2185
+ /* Running text is bounded; a heading is not. A heading is short, and the width
2186
+ is what gives it presence — so only the elements that set paragraphs are
2187
+ capped. A max-width can never make something wider, so this is safe inside a
2188
+ card or a column that is already narrower. */
2189
+ .hz-prose > p,
2190
+ .hz-prose > ul,
2191
+ .hz-prose > ol,
2192
+ .hz-prose > blockquote {
2193
+ max-width: var(--measure);
2194
+ }
2195
+
2161
2196
  *,
2162
2197
  *::before,
2163
2198
  *::after {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hanzo/ui",
3
- "version": "8.17.1",
3
+ "version": "8.18.1",
4
4
  "type": "module",
5
5
  "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.",
6
6
  "exports": {