@a-type/ui 5.0.10 → 5.0.12

package/dist/esm/components/layouts/PageContent.js

@@ -1,5 +1,4 @@
 // @unocss-include
-'use client';
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -16,9 +15,10 @@ import classNames from 'clsx';
 import useMergedRef from '../../hooks/useMergedRef.js';
 import { useBoundsCssVars } from '../../hooks/useSize.js';
 import { Box } from '../box/Box.js';
+const bodyRef = typeof document !== 'undefined' ? { current: document.body } : undefined;
 export function PageContent(_a) {
     var { children, className, ref, p } = _a, rest = __rest(_a, ["children", "className", "ref", "p"]);
-    const innerRef = useBoundsCssVars(200, undefined, {
+    const innerRef = useBoundsCssVars(200, bodyRef, {
         left: '--content-left',
         top: '--content-top',
         width: '--content-width',

package/dist/esm/components/layouts/PageContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageContent.js","sourceRoot":"","sources":["../../../../src/components/layouts/PageContent.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;AACb,OAAO,UAAU,MAAM,MAAM,CAAC;AAC9B,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAY,MAAM,eAAe,CAAC;AAE9C,MAAM,UAAU,WAAW,CAAC,EAMjB;QANiB,EAC3B,QAAQ,EACR,SAAS,EACT,GAAG,EACH,CAAC,OAES,EADP,IAAI,cALoB,qCAM3B,CADO;IAEP,MAAM,QAAQ,GAAG,gBAAgB,CAAiB,GAAG,EAAE,SAAS,EAAE;QACjE,IAAI,EAAE,gBAAgB;QACtB,GAAG,EAAE,eAAe;QACpB,KAAK,EAAE,iBAAiB;QACxB,MAAM,EAAE,kBAAkB;QAC1B,KAAK,EAAE,iBAAiB;KACxB,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IAE7C,OAAO,CACN,KAAC,GAAG,kBACH,GAAG,QACH,MAAM,EAAC,eAAe,EACtB,IAAI,EAAC,OAAO,EACZ,CAAC,EACA,CAAC,IAAI;YACJ,OAAO,EAAE,IAAI;YACb,EAAE,EAAE,IAAI;SACR,EAEF,GAAG,EAAC,IAAI,EACR,SAAS,EAAC,OAAO,EACjB,SAAS,EAAE,UAAU,CACpB,qBAAqB,EACrB,8EAA8E,EAC9E,SAAS,CACT,EACD,GAAG,EAAE,QAAQ,IACT,IAAI,cAEP,QAAQ,IACJ,CACN,CAAC;AACH,CAAC"}
+{"version":3,"file":"PageContent.js","sourceRoot":"","sources":["../../../../src/components/layouts/PageContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,MAAM,CAAC;AAC9B,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAY,MAAM,eAAe,CAAC;AAE9C,MAAM,OAAO,GACZ,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;AAE1E,MAAM,UAAU,WAAW,CAAC,EAMjB;QANiB,EAC3B,QAAQ,EACR,SAAS,EACT,GAAG,EACH,CAAC,OAES,EADP,IAAI,cALoB,qCAM3B,CADO;IAEP,MAAM,QAAQ,GAAG,gBAAgB,CAAiB,GAAG,EAAE,OAAO,EAAE;QAC/D,IAAI,EAAE,gBAAgB;QACtB,GAAG,EAAE,eAAe;QACpB,KAAK,EAAE,iBAAiB;QACxB,MAAM,EAAE,kBAAkB;QAC1B,KAAK,EAAE,iBAAiB;KACxB,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IAE7C,OAAO,CACN,KAAC,GAAG,kBACH,GAAG,QACH,MAAM,EAAC,eAAe,EACtB,IAAI,EAAC,OAAO,EACZ,CAAC,EACA,CAAC,IAAI;YACJ,OAAO,EAAE,IAAI;YACb,EAAE,EAAE,IAAI;SACR,EAEF,GAAG,EAAC,IAAI,EACR,SAAS,EAAC,OAAO,EACjB,SAAS,EAAE,UAAU,CACpB,qBAAqB,EACrB,8EAA8E,EAC9E,SAAS,CACT,EACD,GAAG,EAAE,QAAQ,IACT,IAAI,cAEP,QAAQ,IACJ,CACN,CAAC;AACH,CAAC"}

package/dist/esm/components/layouts/PageNowPlaying.d.ts

@@ -1,4 +1,6 @@
 import { HTMLAttributes } from 'react';
-export declare function PageNowPlaying({ className, keepAboveKeyboard, ...props }: HTMLAttributes<HTMLDivElement> & {
+export declare function PageNowPlaying({ className, keepAboveKeyboard, disablePortal, container, ...props }: HTMLAttributes<HTMLDivElement> & {
     keepAboveKeyboard?: boolean;
+    disablePortal?: boolean;
+    container?: HTMLElement;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/layouts/PageNowPlaying.js

@@ -1,5 +1,4 @@
 // @unocss-include
-'use client';
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -13,18 +12,23 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'clsx';
+import { createPortal } from 'react-dom';
 import { GroupScaleReset } from '../../systems/GroupScale.js';
 import { useConfig } from '../provider/Provider.js';
 export function PageNowPlaying(_a) {
-    var { className, keepAboveKeyboard } = _a, props = __rest(_a, ["className", "keepAboveKeyboard"]);
+    var { className, keepAboveKeyboard, disablePortal, container = document.body } = _a, props = __rest(_a, ["className", "keepAboveKeyboard", "disablePortal", "container"]);
     const { virtualKeyboardBehavior } = useConfig();
-    return (_jsx(GroupScaleReset, { children: _jsx("div", Object.assign({}, props, { className: classNames('layer-components:fixed layer-components:left-0 layer-components:right-0 layer-components:z-[var(--z-now-playing)] layer-components:flex layer-components:flex-col layer-components:items-end layer-components:gap-2', 
+    const content = (_jsx(GroupScaleReset, { children: _jsx("div", Object.assign({}, props, { className: classNames(disablePortal && 'layer-components:z-now-playing', 'layer-components:fixed layer-components:left-0 layer-components:right-0 layer-components:flex layer-components:flex-col layer-components:items-center layer-components:gap-2', 
             // on mobile, this must be positioned above any nav bar that's present,
             // or at minimum in the safe area
-            'layer-components:bottom-[var(--nav-height,env(safe-area-inset-bottom,0px))]', 'layer-components:transition-bottom', 'layer-components:md:fixed layer-components:md:bottom-3 layer-components:md:left-[var(--content-left,20%)] layer-components:md:top-auto layer-components:md:w-[var(--content-width,100%)] layer-components:md:items-end layer-components:md:p-0 layer-components:md:opacity-[var(--content-ready,0)] layer-components:md:transition-opacity', 'layer-variants:p-2', keepAboveKeyboard &&
+            'layer-components:bottom-[var(--nav-height,env(safe-area-inset-bottom,0px))]', 'layer-components:md:bottom-md layer-components:md:left-[var(--content-left,0)] layer-components:md:w-[var(--content-width,100%)] layer-components:md:items-center layer-components:md:p-0 layer-components:md:opacity-[var(--content-ready,0)] layer-components:md:transition-opacity', 'layer-variants:p-2', keepAboveKeyboard &&
                 virtualKeyboardBehavior === 'overlay' &&
                 'layer-variants:lt-md:bottom-[max(var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px),var(--nav-height,env(safe-area-inset-bottom,0px))))]', keepAboveKeyboard &&
                 virtualKeyboardBehavior === 'displace' &&
-                'layer-variants:lt-md:bottom-[max(var(--viewport-bottom-offset,0px),var(--nav-height,env(safe-area-inset-bottom,0px)))]', className) })) }));
+                'layer-variants:lt-md:bottom-[max(var(--mock-virtual-keyboard-height,var(--viewport-bottom-offset,0px)),var(--nav-height,env(safe-area-inset-bottom,0px)))]', className) })) }));
+    if (disablePortal) {
+        return content;
+    }
+    return createPortal(content, container);
 }
 //# sourceMappingURL=PageNowPlaying.js.map

package/dist/esm/components/layouts/PageNowPlaying.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageNowPlaying.js","sourceRoot":"","sources":["../../../../src/components/layouts/PageNowPlaying.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;AAEb,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,MAAM,UAAU,cAAc,CAAC,EAM9B;QAN8B,EAC9B,SAAS,EACT,iBAAiB,OAIjB,EAHG,KAAK,cAHsB,kCAI9B,CADQ;IAIR,MAAM,EAAE,uBAAuB,EAAE,GAAG,SAAS,EAAE,CAAC;IAEhD,OAAO,CACN,KAAC,eAAe,cACf,8BACK,KAAK,IACT,SAAS,EAAE,UAAU,CACpB,gGAAgG;YAChG,uEAAuE;YACvE,iCAAiC;YACjC,6EAA6E,EAC7E,oCAAoC,EACpC,8KAA8K,EAC9K,oBAAoB,EACpB,iBAAiB;gBAChB,uBAAuB,KAAK,SAAS;gBACrC,yJAAyJ,EAC1J,iBAAiB;gBAChB,uBAAuB,KAAK,UAAU;gBACtC,wHAAwH,EACzH,SAAS,CACT,IACA,GACe,CAClB,CAAC;AACH,CAAC"}
+{"version":3,"file":"PageNowPlaying.js","sourceRoot":"","sources":["../../../../src/components/layouts/PageNowPlaying.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,MAAM,UAAU,cAAc,CAAC,EAU9B;QAV8B,EAC9B,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,SAAS,GAAG,QAAQ,CAAC,IAAI,OAMzB,EALG,KAAK,cALsB,gEAM9B,CADQ;IAMR,MAAM,EAAE,uBAAuB,EAAE,GAAG,SAAS,EAAE,CAAC;IAEhD,MAAM,OAAO,GAAG,CACf,KAAC,eAAe,cACf,8BACK,KAAK,IACT,SAAS,EAAE,UAAU,CACpB,aAAa,IAAI,gCAAgC,EACjD,0EAA0E;YAC1E,uEAAuE;YACvE,iCAAiC;YACjC,6EAA6E,EAC7E,iKAAiK,EACjK,oBAAoB,EACpB,iBAAiB;gBAChB,uBAAuB,KAAK,SAAS;gBACrC,yJAAyJ,EAC1J,iBAAiB;gBAChB,uBAAuB,KAAK,UAAU;gBACtC,4JAA4J,EAC7J,SAAS,CACT,IACA,GACe,CAClB,CAAC;IAEF,IAAI,aAAa,EAAE,CAAC;QACnB,OAAO,OAAO,CAAC;IAChB,CAAC;IAED,OAAO,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AACzC,CAAC"}

package/dist/esm/components/layouts/PageRoot.d.ts

@@ -1,4 +1,5 @@
 import { HTMLAttributes } from 'react';
 export interface PageRootProps extends HTMLAttributes<HTMLDivElement> {
+    mobileBasis?: '0' | 'auto';
 }
-export declare function PageRoot({ className, children, ...rest }: PageRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageRoot({ className, children, mobileBasis, ...rest }: PageRootProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/layouts/PageRoot.js

@@ -13,7 +13,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 export function PageRoot(_a) {
-    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
-    return (_jsx("div", Object.assign({ className: clsx('layer-components:min-h-100dvh layer-components:flex-shrink-1 layer-components:flex-grow-1 layer-components:flex-basis-0 layer-components:bg-wash', 'layer-components:grid layer-components:grid-cols-[1fr] layer-components:grid-rows-[1fr_auto] layer-components:grid-areas-[content]-[nav] layer-components:items-start layer-components:justify-center', 'md:layer-responsive:grid-cols-[1fr_auto_20fr_1fr] md:layer-responsive:grid-areas-[gutter1_nav_content_gutter2] md:layer-responsive:h-auto md:layer-responsive:min-h-auto md:layer-responsive:bg-wash', 'lg:layer-responsive:grid-cols-[1fr_auto_min(800px,70vw)_1fr]', className) }, rest, { children: children })));
+    var { className, children, mobileBasis = 'auto' } = _a, rest = __rest(_a, ["className", "children", "mobileBasis"]);
+    return (_jsx("div", Object.assign({ className: clsx(
+        // TODO: once I'm sure which one is right, remove the other
+        mobileBasis === '0'
+            ? 'layer-components:flex-basis-0'
+            : 'layer-components:flex-basis-auto', 'layer-components:min-h-100dvh layer-components:flex-shrink-1 layer-components:flex-grow-1 layer-components:bg-wash', 'layer-components:grid layer-components:grid-cols-[1fr] layer-components:grid-rows-[1fr_auto] layer-components:grid-areas-[content]-[nav] layer-components:items-start layer-components:justify-center', 'md:layer-responsive:grid-cols-[1fr_auto_20fr_1fr] md:layer-responsive:grid-areas-[gutter1_nav_content_gutter2] md:layer-responsive:h-auto md:layer-responsive:min-h-auto md:layer-responsive:bg-wash', 'lg:layer-responsive:grid-cols-[1fr_auto_min(800px,70vw)_1fr]', className) }, rest, { children: children })));
 }
 //# sourceMappingURL=PageRoot.js.map

package/dist/esm/components/layouts/PageRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageRoot.js","sourceRoot":"","sources":["../../../../src/components/layouts/PageRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAKxB,MAAM,UAAU,QAAQ,CAAC,EAA+C;QAA/C,EAAE,SAAS,EAAE,QAAQ,OAA0B,EAArB,IAAI,cAA9B,yBAAgC,CAAF;IACtD,OAAO,CACN,4BACC,SAAS,EAAE,IAAI,CACd,gFAAgF,EAChF,oHAAoH,EACpH,wHAAwH,EACxH,gEAAgE,EAChE,SAAS,CACT,IACG,IAAI,cAEP,QAAQ,IACJ,CACN,CAAC;AACH,CAAC"}
+{"version":3,"file":"PageRoot.js","sourceRoot":"","sources":["../../../../src/components/layouts/PageRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,UAAU,QAAQ,CAAC,EAKT;QALS,EACxB,SAAS,EACT,QAAQ,EACR,WAAW,GAAG,MAAM,OAEL,EADZ,IAAI,cAJiB,wCAKxB,CADO;IAEP,OAAO,CACN,4BACC,SAAS,EAAE,IAAI;QACd,2DAA2D;QAC3D,WAAW,KAAK,GAAG;YAClB,CAAC,CAAC,+BAA+B;YACjC,CAAC,CAAC,kCAAkC,EACrC,mEAAmE,EACnE,oHAAoH,EACpH,wHAAwH,EACxH,gEAAgE,EAChE,SAAS,CACT,IACG,IAAI,cAEP,QAAQ,IACJ,CACN,CAAC;AACH,CAAC"}

package/dist/esm/components/layouts/layouts.stories.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Avatar } from '../avatar/Avatar.js';
+import { Box } from '../box/Box.js';
 import { Button } from '../button/index.js';
 import { Card } from '../card/Card.js';
 import { Input } from '../input/index.js';
@@ -24,16 +25,16 @@ export const Default = {
     render: () => {
         const [content, setContent] = useState(true);
         const toggleContent = () => setContent((prev) => !prev);
-        return (_jsxs(PageRoot, { className: "bg-primary-wash", children: [_jsxs(PageContent, { children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold", children: "Hello, World!" }), _jsx("p", { className: "text-lg", children: "This is a simple page layout." })] }), _jsx(Switch, { checked: content, onCheckedChange: toggleContent }), content && (_jsx(Card.Grid, { children: new Array(100).fill(null).map((_, i) => (_jsx(Card, { children: _jsx(Card.Main, {}) }, i))) })), _jsx(PageNowPlaying, { children: "Now playing" })] }), _jsx(PageNav, { children: _jsxs(NavBarRoot, { children: [_jsxs(NavBarItem, { children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "cart" }) }), _jsx(NavBarItemText, { children: "Item 1 long" })] }), _jsxs(NavBarItem, { active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "book" }) }), _jsx(NavBarItemText, { children: "Item 2" }), _jsx(NavBarItemPip, {})] }), _jsxs(NavBarItem, { color: "gray", active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { render: (_, { size }) => (_jsx(Avatar, { name: "Grant Forrest", size: size })) }) }), _jsx(NavBarItemText, { children: "Neutral" }), _jsx(NavBarItemPip, {})] })] }) })] }));
+        return (_jsxs(PageRoot, { children: [_jsxs(PageContent, { children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold", children: "Hello, World!" }), _jsx("p", { className: "text-lg", children: "This is a simple page layout." })] }), _jsx(Switch, { checked: content, onCheckedChange: toggleContent }), content && (_jsx(Card.Grid, { children: new Array(100).fill(null).map((_, i) => (_jsx(Card, { children: _jsx(Card.Main, {}) }, i))) })), _jsx(PageNowPlaying, { children: _jsx(Box, { surface: "white", elevated: "lg", full: true, p: true, children: "Now playing" }) })] }), _jsx(PageNav, { children: _jsxs(NavBarRoot, { children: [_jsxs(NavBarItem, { children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "cart" }) }), _jsx(NavBarItemText, { children: "Item 1 long" })] }), _jsxs(NavBarItem, { active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "book" }) }), _jsx(NavBarItemText, { children: "Item 2" }), _jsx(NavBarItemPip, {})] }), _jsxs(NavBarItem, { color: "gray", active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { render: (_, { size }) => (_jsx(Avatar, { name: "Grant Forrest", size: size })) }) }), _jsx(NavBarItemText, { children: "Neutral" }), _jsx(NavBarItemPip, {})] })] }) })] }));
     },
 };
 export const ManualWidth = {
     render: () => {
-        return (_jsxs(PageRoot, { className: "bg-primary-wash", children: [_jsxs(PageContent, { className: "max-w-300px", children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold", children: "Hello, World!" }), _jsx("p", { className: "text-lg", children: "This is a simple page layout." })] }), _jsx(Card.Grid, { children: new Array(100).fill(null).map((_, i) => (_jsx(Card, { children: _jsx(Card.Main, {}) }, i))) })] }), _jsx(PageNav, { children: _jsxs(NavBarRoot, { children: [_jsxs(NavBarItem, { children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "cart" }) }), _jsx(NavBarItemText, { children: "Item 1 long" })] }), _jsxs(NavBarItem, { active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "book" }) }), _jsx(NavBarItemText, { children: "Item 2" }), _jsx(NavBarItemPip, {})] }), _jsxs(NavBarItem, { color: "gray", active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "book" }) }), _jsx(NavBarItemText, { children: "Neutral" }), _jsx(NavBarItemPip, {})] })] }) })] }));
+        return (_jsxs(PageRoot, { children: [_jsxs(PageContent, { className: "max-w-300px", children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold", children: "Hello, World!" }), _jsx("p", { className: "text-lg", children: "This is a simple page layout." })] }), _jsx(Card.Grid, { children: new Array(100).fill(null).map((_, i) => (_jsx(Card, { children: _jsx(Card.Main, {}) }, i))) })] }), _jsx(PageNav, { children: _jsxs(NavBarRoot, { children: [_jsxs(NavBarItem, { children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "cart" }) }), _jsx(NavBarItemText, { children: "Item 1 long" })] }), _jsxs(NavBarItem, { active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "book" }) }), _jsx(NavBarItemText, { children: "Item 2" }), _jsx(NavBarItemPip, {})] }), _jsxs(NavBarItem, { color: "gray", active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "book" }) }), _jsx(NavBarItemText, { children: "Neutral" }), _jsx(NavBarItemPip, {})] })] }) })] }));
     },
 };
 export const WithoutNav = {
-    render: () => (_jsx(PageRoot, { className: "h-full w-full", children: _jsxs(PageContent, { children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold", children: "Hello, World!" }), _jsx("p", { className: "text-lg", children: "This is a simple page layout." }), _jsx(Card.Grid, { children: new Array(100).fill(null).map((_, i) => (_jsx(Card, { children: _jsx(Card.Main, {}) }, i))) })] }), _jsx(PageNowPlaying, { children: "Now playing" })] }) })),
+    render: () => (_jsx(PageRoot, { className: "h-full w-full", children: _jsxs(PageContent, { children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold", children: "Hello, World!" }), _jsx("p", { className: "text-lg", children: "This is a simple page layout." }), _jsx(Card.Grid, { children: new Array(100).fill(null).map((_, i) => (_jsx(Card, { children: _jsx(Card.Main, {}) }, i))) })] }), _jsx(PageNowPlaying, { children: _jsx(Box, { full: true, elevated: "lg", p: true, surface: "white", children: "Now playing" }) })] }) })),
 };
 export const WithVirtualKeyboard = {
     render() {

package/dist/esm/components/layouts/layouts.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"layouts.stories.js","sourceRoot":"","sources":["../../../../src/components/layouts/layouts.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"layouts.stories.js","sourceRoot":"","sources":["../../../../src/components/layouts/layouts.stories.tsx"],"names":[],"mappings":"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"}

package/dist/esm/uno/preflights/globals.d.ts

@@ -1,4 +1,5 @@
 export interface GlobalsPreflightConfig {
     disableZIndexes?: boolean;
+    rootSelector?: string;
 }
-export declare const globalPreflight: (config: GlobalsPreflightConfig) => import("unocss").Preflight<object>;
+export declare const globalPreflight: ({ disableZIndexes, rootSelector, }: GlobalsPreflightConfig) => import("unocss").Preflight<object>;

package/dist/esm/uno/preflights/globals.js

@@ -1,7 +1,7 @@
 // @unocss-include
 import { PROPS } from '../logic/properties.js';
 import { preflight } from './_util.js';
-export const globalPreflight = (config) => preflight({
+export const globalPreflight = ({ disableZIndexes, rootSelector = '#root, #main, #app, #storybook-root', }) => preflight({
     getCSS: () => `
 :root {
 	${PROPS.USER.FONTS.SANS}: "Inter", sans-serif;
@@ -11,7 +11,7 @@ export const globalPreflight = (config) => preflight({
 
 	--z-now-playing: 40;
 	--z-nav: 50;
-	${config.disableZIndexes
+	${disableZIndexes
         ? ''
         : `
 	--z-menu: 100;
@@ -41,8 +41,11 @@ export const globalPreflight = (config) => preflight({
 		overflow: overlay;
 	}
 
-	#main {
+	${rootSelector} {
 		isolation: isolate;
+		display: flex;
+		flex-direction: column;
+		min-height: 100dvh;
 	}
 
 	a {

package/dist/esm/uno/preflights/globals.js.map

@@ -1 +1 @@
-{"version":3,"file":"globals.js","sourceRoot":"","sources":["../../../../src/uno/preflights/globals.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAMvC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAA8B,EAAE,EAAE,CACjE,SAAS,CAAC;IACT,MAAM,EAAE,GAAG,EAAE,CAAC;;GAEb,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI;GACrB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK;GACtB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK;GACtB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,SAAS,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI;;;;GAKvD,MAAM,CAAC,eAAe;QACrB,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC;;;;;;EAOJ;;GAEE,KAAK,CAAC,QAAQ,CAAC,YAAY;GAC3B,KAAK,CAAC,QAAQ,CAAC,cAAc;;GAE7B,KAAK,CAAC,KAAK,CAAC,UAAU;;;;;;;qBAOJ,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B5C;CACC,CAAC,CAAC"}
+{"version":3,"file":"globals.js","sourceRoot":"","sources":["../../../../src/uno/preflights/globals.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAOvC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC/B,eAAe,EACf,YAAY,GAAG,qCAAqC,GAC5B,EAAE,EAAE,CAC5B,SAAS,CAAC;IACT,MAAM,EAAE,GAAG,EAAE,CAAC;;GAEb,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI;GACrB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK;GACtB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK;GACtB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,SAAS,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI;;;;GAKvD,eAAe;QACd,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC;;;;;;EAOJ;;GAEE,KAAK,CAAC,QAAQ,CAAC,YAAY;GAC3B,KAAK,CAAC,QAAQ,CAAC,cAAc;;GAE7B,KAAK,CAAC,KAAK,CAAC,UAAU;;;;;;;qBAOJ,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO;;;;;;;;;;GAU1C,YAAY;;;;;;;;;;;;;;;;;;;CAmBd;CACC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "5.0.10",
+  "version": "5.0.12",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"

package/src/components/layouts/PageContent.tsx

@@ -1,9 +1,11 @@
-'use client';
 import classNames from 'clsx';
 import useMergedRef from '../../hooks/useMergedRef.js';
 import { useBoundsCssVars } from '../../hooks/useSize.js';
 import { Box, BoxProps } from '../box/Box.js';
 
+const bodyRef =
+	typeof document !== 'undefined' ? { current: document.body } : undefined;
+
 export function PageContent({
 	children,
 	className,
@@ -11,7 +13,7 @@ export function PageContent({
 	p,
 	...rest
 }: BoxProps) {
-	const innerRef = useBoundsCssVars<HTMLDivElement>(200, undefined, {
+	const innerRef = useBoundsCssVars<HTMLDivElement>(200, bodyRef, {
 		left: '--content-left',
 		top: '--content-top',
 		width: '--content-width',

package/src/components/layouts/PageNowPlaying.tsx

@@ -1,40 +1,49 @@
-'use client';
-
 import classNames from 'clsx';
 import { HTMLAttributes } from 'react';
+import { createPortal } from 'react-dom';
 import { GroupScaleReset } from '../../systems/GroupScale.js';
 import { useConfig } from '../provider/Provider.js';
 
 export function PageNowPlaying({
 	className,
 	keepAboveKeyboard,
+	disablePortal,
+	container = document.body,
 	...props
 }: HTMLAttributes<HTMLDivElement> & {
 	keepAboveKeyboard?: boolean;
+	disablePortal?: boolean;
+	container?: HTMLElement;
 }) {
 	const { virtualKeyboardBehavior } = useConfig();
 
-	return (
+	const content = (
 		<GroupScaleReset>
 			<div
 				{...props}
 				className={classNames(
-					'layer-components:(fixed left-0 right-0 z-[var(--z-now-playing)] flex flex-col items-end gap-2)',
+					disablePortal && 'layer-components:z-now-playing',
+					'layer-components:(fixed left-0 right-0 flex flex-col items-center gap-2)',
 					// on mobile, this must be positioned above any nav bar that's present,
 					// or at minimum in the safe area
 					'layer-components:bottom-[var(--nav-height,env(safe-area-inset-bottom,0px))]',
-					'layer-components:transition-bottom',
-					'layer-components:md:(fixed bottom-3 left-[var(--content-left,20%)] top-auto w-[var(--content-width,100%)] items-end p-0 opacity-[var(--content-ready,0)] transition-opacity)',
+					'layer-components:md:(bottom-md left-[var(--content-left,0)] w-[var(--content-width,100%)] items-center p-0 opacity-[var(--content-ready,0)] transition-opacity)',
 					'layer-variants:p-2',
 					keepAboveKeyboard &&
 						virtualKeyboardBehavior === 'overlay' &&
 						'layer-variants:lt-md:bottom-[max(var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px),var(--nav-height,env(safe-area-inset-bottom,0px))))]',
 					keepAboveKeyboard &&
 						virtualKeyboardBehavior === 'displace' &&
-						'layer-variants:lt-md:bottom-[max(var(--viewport-bottom-offset,0px),var(--nav-height,env(safe-area-inset-bottom,0px)))]',
+						'layer-variants:lt-md:bottom-[max(var(--mock-virtual-keyboard-height,var(--viewport-bottom-offset,0px)),var(--nav-height,env(safe-area-inset-bottom,0px)))]',
 					className,
 				)}
 			/>
 		</GroupScaleReset>
 	);
+
+	if (disablePortal) {
+		return content;
+	}
+
+	return createPortal(content, container);
 }

package/src/components/layouts/PageRoot.tsx

@@ -1,13 +1,24 @@
 import clsx from 'clsx';
 import { HTMLAttributes } from 'react';
 
-export interface PageRootProps extends HTMLAttributes<HTMLDivElement> {}
+export interface PageRootProps extends HTMLAttributes<HTMLDivElement> {
+	mobileBasis?: '0' | 'auto';
+}
 
-export function PageRoot({ className, children, ...rest }: PageRootProps) {
+export function PageRoot({
+	className,
+	children,
+	mobileBasis = 'auto',
+	...rest
+}: PageRootProps) {
 	return (
 		<div
 			className={clsx(
-				'layer-components:(min-h-100dvh flex-shrink-1 flex-grow-1 flex-basis-0 bg-wash)',
+				// TODO: once I'm sure which one is right, remove the other
+				mobileBasis === '0'
+					? 'layer-components:flex-basis-0'
+					: 'layer-components:flex-basis-auto',
+				'layer-components:(min-h-100dvh flex-shrink-1 flex-grow-1 bg-wash)',
 				'layer-components:(grid grid-cols-[1fr] grid-rows-[1fr_auto] grid-areas-[content]-[nav] items-start justify-center)',
 				'md:layer-responsive:(grid-cols-[1fr_auto_20fr_1fr] grid-areas-[gutter1_nav_content_gutter2] h-auto min-h-auto bg-wash)',
 				'lg:layer-responsive:(grid-cols-[1fr_auto_min(800px,70vw)_1fr])',

package/src/components/layouts/layouts.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useEffect, useState } from 'react';
 import { Avatar } from '../avatar/Avatar.js';
+import { Box } from '../box/Box.js';
 import { Button } from '../button/index.js';
 import { Card } from '../card/Card.js';
 import { Input } from '../input/index.js';
@@ -36,7 +37,7 @@ export const Default: Story = {
 		const [content, setContent] = useState(true);
 		const toggleContent = () => setContent((prev) => !prev);
 		return (
-			<PageRoot className="bg-primary-wash">
+			<PageRoot>
 				<PageContent>
 					<div className="text-center">
 						<h1 className="text-3xl font-bold">Hello, World!</h1>
@@ -52,7 +53,11 @@ export const Default: Story = {
 							))}
 						</Card.Grid>
 					)}
-					<PageNowPlaying>Now playing</PageNowPlaying>
+					<PageNowPlaying>
+						<Box surface="white" elevated="lg" full p>
+							Now playing
+						</Box>
+					</PageNowPlaying>
 				</PageContent>
 				<PageNav>
 					<NavBarRoot>
@@ -90,7 +95,7 @@ export const Default: Story = {
 export const ManualWidth: Story = {
 	render: () => {
 		return (
-			<PageRoot className="bg-primary-wash">
+			<PageRoot>
 				<PageContent className="max-w-300px">
 					<div className="text-center">
 						<h1 className="text-3xl font-bold">Hello, World!</h1>
@@ -148,7 +153,11 @@ export const WithoutNav: Story = {
 						))}
 					</Card.Grid>
 				</div>
-				<PageNowPlaying>Now playing</PageNowPlaying>
+				<PageNowPlaying>
+					<Box full elevated="lg" p surface="white">
+						Now playing
+					</Box>
+				</PageNowPlaying>
 			</PageContent>
 		</PageRoot>
 	),

package/src/uno/preflights/globals.ts

@@ -3,9 +3,13 @@ import { preflight } from './_util.js';
 
 export interface GlobalsPreflightConfig {
 	disableZIndexes?: boolean;
+	rootSelector?: string;
 }
 
-export const globalPreflight = (config: GlobalsPreflightConfig) =>
+export const globalPreflight = ({
+	disableZIndexes,
+	rootSelector = '#root, #main, #app, #storybook-root',
+}: GlobalsPreflightConfig) =>
 	preflight({
 		getCSS: () => `
 :root {
@@ -17,7 +21,7 @@ export const globalPreflight = (config: GlobalsPreflightConfig) =>
 	--z-now-playing: 40;
 	--z-nav: 50;
 	${
-		config.disableZIndexes
+		disableZIndexes
 			? ''
 			: `
 	--z-menu: 100;
@@ -48,8 +52,11 @@ export const globalPreflight = (config: GlobalsPreflightConfig) =>
 		overflow: overlay;
 	}
 
-	#main {
+	${rootSelector} {
 		isolation: isolate;
+		display: flex;
+		flex-direction: column;
+		min-height: 100dvh;
 	}
 
 	a {