@hanzo/ui 8.17.0 → 8.18.0

package/dist/blocks/screenful.cjs

@@ -128,12 +128,21 @@ const ScreenfulBlockComponent = ({ block, agent, initialInView = false, snapTile
     const video = b.banner && typeof b.banner === 'object';
     const oneColumn = b.contentColumns.length === 1;
     const vertCenter = spec('vert-center');
+    // The gutter GROWS with the viewport. It used to be `px-[8vw] xl:px-[1vw]`,
+    // which shrank from 8% of the screen to 1% at exactly the width where there
+    // is most room — measured at 1280px: 13px of margin and 82 characters to the
+    // line. `--gutter` is a clamp, so it opens up to 6rem and stops.
     const gutters = spec('narrow-gutters')
-        ? (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')
+        ? (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')
         : spec('no-gutters')
             ? (0, cn_1.cn)('px-0 pb-0', snapTile && 'pt-11 lg:pt-20')
-            : 'px-[8vw] xl:px-[1vw] pb-[8vh] pt-[calc(44px+4vh)] md:pt-[calc(80px+6vh)]';
-    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] }));
+            : 'px-[var(--gutter)] pb-[8vh] pt-[calc(44px+4vh)] md:pt-[calc(80px+6vh)]';
+    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', 
+                            // `max-w-screen-xl` is 1280px — exactly the width most desktops
+                            // are, so it capped nothing where it mattered. `--frame` is wider
+                            // and is a real bound: the composition stops, the gutter takes the
+                            // rest, and the column centres.
+                            !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] }));
 };
 exports.ScreenfulBlockComponent = ScreenfulBlockComponent;
 exports.default = exports.ScreenfulBlockComponent;

package/dist/blocks/screenful.d.ts.map

@@ -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"}
+{"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

@@ -92,12 +92,21 @@ export const ScreenfulBlockComponent = ({ block, agent, initialInView = false, s
     const video = b.banner && typeof b.banner === 'object';
     const oneColumn = b.contentColumns.length === 1;
     const vertCenter = spec('vert-center');
+    // The gutter GROWS with the viewport. It used to be `px-[8vw] xl:px-[1vw]`,
+    // which shrank from 8% of the screen to 1% at exactly the width where there
+    // is most room — measured at 1280px: 13px of margin and 82 characters to the
+    // line. `--gutter` is a clamp, so it opens up to 6rem and stops.
     const gutters = spec('narrow-gutters')
-        ? 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')
+        ? cn('px-6 lg:px-8 pb-4 lg:pb-6 xl:pb-8', snapTile && 'pt-15 md:pt-26 lg:pt-28')
         : spec('no-gutters')
             ? cn('px-0 pb-0', snapTile && 'pt-11 lg:pt-20')
-            : 'px-[8vw] xl:px-[1vw] pb-[8vh] pt-[calc(44px+4vh)] md:pt-[calc(80px+6vh)]';
-    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] }));
+            : 'px-[var(--gutter)] pb-[8vh] pt-[calc(44px+4vh)] md:pt-[calc(80px+6vh)]';
+    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', 
+                            // `max-w-screen-xl` is 1280px — exactly the width most desktops
+                            // are, so it capped nothing where it mattered. `--frame` is wider
+                            // and is a real bound: the composition stops, the gutter takes the
+                            // rest, and the column centres.
+                            !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] }));
 };
 export default ScreenfulBlockComponent;
 //# sourceMappingURL=screenful.js.map

package/dist/blocks/screenful.js.map

@@ -1 +1 @@
-{"version":3,"file":"screenful.js","sourceRoot":"","sources":["../../src/blocks/screenful.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"screenful.js","sourceRoot":"","sources":["../../src/blocks/screenful.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAA;AAE/B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EAA4B,GAAG,EAAE,MAAM,QAAQ,CAAA;AAEtD;;;;;;;GAOG;AACH,MAAM,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE,EAAE;IACtD,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAA;IACrD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;IAEnD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAA;QACtB,IAAI,CAAC,EAAE,IAAI,OAAO,oBAAoB,KAAK,WAAW;YAAE,OAAM;QAC9D,MAAM,EAAE,GAAG,IAAI,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE,EAAE,SAAS,EAAE,CAAC,CAAA;QACxF,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;QACd,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAA;IAC9B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,CAAA;AACxB,CAAC,CAAA;AAED;;;;;;GAMG;AACH,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,EACL,SAAS,EACT,aAAa,GAKd,EAAE,EAAE;IACH,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACnD,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;IACtD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;IAE3C,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAA;IACzB,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,YAChC,MAAM,IAAI,CACT,gBACE,QAAQ,QACR,IAAI,QACJ,KAAK,QACL,WAAW,QACX,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,YAEtE,KAAK,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CAC9B,iBAAgB,GAAG,EAAE,GAAG,IAAX,CAAC,CAAc,CAC7B,CAAC,GACI,CACT,GACG,CACP,CAAA;AACH,CAAC,CAAA;AAED,oFAAoF;AACpF,MAAM,MAAM,GAAG,CAAC,EACd,MAAM,EACN,SAAS,EACT,QAAQ,GACsE,EAAE,EAAE,CAClF,MAAM,CAAC,CAAC,CAAC,CACP,KAAC,GAAG,IACF,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,EACpC,KAAK,EAAE;QACL,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,eAAe,EAAE,OAAO,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,GAAG;QAC9E,cAAc,EAAE,OAAO;QACvB,gBAAgB,EAAE,WAAW;KAC9B,YAEA,QAAQ,GACL,CACP,CAAC,CAAC,CAAC,CACF,KAAC,GAAG,IAAC,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,YAAG,QAAQ,GAAO,CAC1E,CAAA;AAEH,+DAA+D;AAC/D,MAAM,MAAM,GAAG,CAAC,EACd,MAAM,EACN,UAAU,EACV,KAAK,EACL,SAAS,GAMV,EAAE,EAAE;IACH,MAAM,IAAI,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC,CAAC,CAAA;IAC9C,MAAM,KAAK,GAAG,KAAK,KAAK,OAAO,CAAA;IAE/B,MAAM,KAAK,GAAG,KAAK;QACjB,CAAC,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC;QACpF,CAAC,CAAC,EAAE,CACA,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,EAC7E,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe;QACzF,sEAAsE;QACtE,qCAAqC;QACrC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CACtD,CAAA;IAEL,8EAA8E;IAC9E,+DAA+D;IAC/D,OAAO,CACL,KAAC,GAAG,IAAC,SAAS,EAAE,EAAE,CAAC,qCAAqC,EAAE,KAAK,EAAE,SAAS,CAAC,YACzE,KAAC,MAAM,IAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAI,GACpC,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,CAAC,EACf,KAAK,EAAE,CAAC,EACR,KAAK,EACL,SAAS,GAKV,EAAE,EAAE;IACH,IAAI,CAAC,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAClC,OAAO,CACL,KAAC,MAAM,IACL,MAAM,EAAE,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAC3B,UAAU,EAAE,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,EACnC,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,GACpB,CACH,CAAA;IACH,CAAC;IAED,0EAA0E;IAC1E,+EAA+E;IAC/E,MAAM,KAAK,GAAG,CAAC,CAAS,EAAE,EAAE;QAC1B,MAAM,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;QACpC,OAAO,EAAE,KAAK,SAAS,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAA;IAC3E,CAAC,CAAA;IAED,OAAO,CACL,KAAC,GAAG,IACF,SAAS,EAAE,EAAE,CACX,qCAAqC,EACrC,KAAK,KAAK,OAAO,IAAI,iCAAiC,CAAC,CAAC,cAAc,CAAC,MAAM,EAAE,EAC/E,SAAS,CACV,YAEA,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CACnC,KAAC,MAAM,IACL,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,EACnC,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,IACd,CAAC,CACN,CACH,CAAC,GACE,CACP,CAAA;AACH,CAAC,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EACtC,KAAK,EACL,KAAK,EACL,aAAa,GAAG,KAAK,EACrB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,gBAAgB,EAChB,MAAM,GAMP,EAAE,EAAE;IACH,IAAI,KAAK,CAAC,SAAS,KAAK,WAAW;QAAE,OAAO,yDAA6B,CAAA;IACzE,MAAM,CAAC,GAAG,KAAuB,CAAA;IACjC,MAAM,IAAI,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,CAAA;IAEhD,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,IAAI,OAAO,CAAC,CAAC,MAAM,KAAK,QAAQ,CAAA;IACtD,MAAM,SAAS,GAAG,CAAC,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,CAAA;IAC/C,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,CAAA;IAEtC,4EAA4E;IAC5E,4EAA4E;IAC5E,6EAA6E;IAC7E,iEAAiE;IACjE,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC;QACpC,CAAC,CAAC,EAAE,CAAC,mCAAmC,EAAE,QAAQ,IAAI,yBAAyB,CAAC;QAChF,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC;YAClB,CAAC,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,IAAI,gBAAgB,CAAC;YAC/C,CAAC,CAAC,wEAAwE,CAAA;IAE9E,OAAO,CACL,MAAC,GAAG,IACF,GAAG,EAAC,SAAS,KACT,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC1C,SAAS,EAAE,EAAE,CACX,QAAQ,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,cAAc,EAC9D,MAAM,IAAI,eAAe,EACzB,SAAS,CACV,aAED,KAAC,eAAe,IACd,SAAS,EAAE,EAAE,CACX,kDAAkD,EAClD,QAAQ,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,EAC3D,MAAM,IAAI,MAAM,CACjB,YAED,MAAC,MAAM,IAAC,MAAM,EAAE,CAAC,CAAC,MAAM,aACrB,KAAK,IAAI,CACR,KAAC,QAAQ,IACP,KAAK,EAAE,CAAC,CAAC,MAAoB,EAC7B,SAAS,EAAC,wCAAwC,EAClD,aAAa,EAAE,aAAa,GAC5B,CACH,EACD,MAAC,GAAG,IACF,SAAS,EAAE,EAAE,CACX,qCAAqC;4BACrC,gEAAgE;4BAClE,kEAAkE;4BAClE,mEAAmE;4BACnE,gCAAgC;4BAChC,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,sBAAsB,EAClD,OAAO,EACP,KAAK,IAAI,KAAK,KAAK,SAAS,IAAI,kCAAkC,EAClE,QAAQ,CAAC,CAAC,CAAC,wCAAwC,CAAC,CAAC,CAAC,0BAA0B,EAChF,gBAAgB,EAChB,UAAU,IAAI,EAAE,CAAC,aAAa,EAAE,SAAS,IAAI,MAAM,CAAC,CACrD,aAED,KAAC,OAAO,IAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,QAAQ,GAAG,EACrD,CAAC,CAAC,MAAM,IACL,IACC,GACO,EACjB,MAAM,IACH,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,uBAAuB,CAAA"}

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.18.0</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
@@ -2091,6 +2158,41 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
  * in a token or a component.
  */
 
+/* ── The measure ──────────────────────────────────────────────────────────
+   How wide a thing is allowed to get, which the token set had no answer for.
+   Type and spacing were both tokenised; width was left to whatever class the
+   page happened to carry, and the lux slides ended up setting 82 characters to
+   the line at 1280px with 13px of gutter — the viewport, not a column.
+
+   Three values, because a page needs three different widths:
+
+     --measure   running text. 68 characters is the top of the comfortable
+                 range; past it the eye loses its place on the line return.
+                 In `ch` so it follows the type rather than fighting it.
+     --frame     the outer bound of a full-width composition — a slide, a
+                 header, a footer. Wider than the measure because a two-column
+                 layout is not running text.
+     --gutter    the margin outside the frame. It GROWS with the viewport: a
+                 wider screen should give the content more air, not less. The
+                 lux slides had this inverted — 8vw below xl, 1vw above — so
+                 the design got tighter exactly as the room appeared. */
+:root {
+  --measure: 68ch;
+  --frame: 90rem;
+  --gutter: clamp(1.25rem, 5vw, 6rem);
+}
+
+/* Running text is bounded; a heading is not. A heading is short, and the width
+   is what gives it presence — so only the elements that set paragraphs are
+   capped. A max-width can never make something wider, so this is safe inside a
+   card or a column that is already narrower. */
+.hz-prose > p,
+.hz-prose > ul,
+.hz-prose > ol,
+.hz-prose > blockquote {
+  max-width: var(--measure);
+}
+
 *,
 *::before,
 *::after {
@@ -2370,6 +2472,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":"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;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM,UAAW,IAAI;wBAClB,WAAW;;CAAsD,CAAA;AAEjF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,MAAM,WAAW,IAAI;wBAClB,WAAW;;CAAqE,CAAA;AAEhG,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

@@ -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":"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"}

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
@@ -2091,6 +2158,41 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
  * in a token or a component.
  */
 
+/* ── The measure ──────────────────────────────────────────────────────────
+   How wide a thing is allowed to get, which the token set had no answer for.
+   Type and spacing were both tokenised; width was left to whatever class the
+   page happened to carry, and the lux slides ended up setting 82 characters to
+   the line at 1280px with 13px of gutter — the viewport, not a column.
+
+   Three values, because a page needs three different widths:
+
+     --measure   running text. 68 characters is the top of the comfortable
+                 range; past it the eye loses its place on the line return.
+                 In `ch` so it follows the type rather than fighting it.
+     --frame     the outer bound of a full-width composition — a slide, a
+                 header, a footer. Wider than the measure because a two-column
+                 layout is not running text.
+     --gutter    the margin outside the frame. It GROWS with the viewport: a
+                 wider screen should give the content more air, not less. The
+                 lux slides had this inverted — 8vw below xl, 1vw above — so
+                 the design got tighter exactly as the room appeared. */
+:root {
+  --measure: 68ch;
+  --frame: 90rem;
+  --gutter: clamp(1.25rem, 5vw, 6rem);
+}
+
+/* Running text is bounded; a heading is not. A heading is short, and the width
+   is what gives it presence — so only the elements that set paragraphs are
+   capped. A max-width can never make something wider, so this is safe inside a
+   card or a column that is already narrower. */
+.hz-prose > p,
+.hz-prose > ul,
+.hz-prose > ol,
+.hz-prose > blockquote {
+  max-width: var(--measure);
+}
+
 *,
 *::before,
 *::after {
@@ -2370,6 +2472,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.18.0",
   "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": {