@a-type/ui 3.0.12 → 3.0.14

package/package.json

@@ -1,127 +1,134 @@
 {
-	"name": "@a-type/ui",
-	"version": "3.0.12",
-	"type": "module",
-	"files": [
-		"/dist",
-		"/src"
-	],
-	"sideEffects": [
-		".*\\.css$"
-	],
-	"exports": {
-		".": {
-			"import": "./dist/esm/index.js",
-			"node": "./dist/esm/index.js",
-			"require": "./dist/cjs/index.js",
-			"default": "./dist/cjs/index.js"
-		},
-		"./uno-preset": {
-			"types": "./dist/esm/uno/uno.preset.d.ts",
-			"import": "./dist/esm/uno/uno.preset.js",
-			"node": "./dist/esm/uno/uno.preset.js",
-			"require": "./dist/cjs/uno/uno.preset.js",
-			"default": "./dist/cjs/uno/uno.preset.js"
-		},
-		"./main.css": {
-			"import": "./dist/css/main.css",
-			"node": "./dist/css/main.css",
-			"require": "./dist/css/main.css",
-			"default": "./dist/css/main.css"
-		}
-	},
-	"scripts": {
-		"build:transpile": "tsc && tsc -P tsconfig-cjs.json",
-		"build:prefix": "node ./scripts/addUnoInclude.js",
-		"build:process": "unocss --write-transformed -o ./dist/css/main.css -m -c uno.config.js \"./dist/**/*.js\"",
-		"build": "pnpm run build:transpile && pnpm run build:prefix && pnpm run build:process",
-		"prepublish": "pnpm run build",
-		"icons": "node ./scripts/generateIcons.js",
-		"storybook": "storybook dev -p 6006",
-		"build-storybook": "storybook build",
-		"up-radix": "pnpm update \"@radix-ui/*\" --latest",
-		"bump": "pnpx bumpp"
-	},
-	"peerDependencies": {
-		"react": "^19",
-		"react-dom": "^19",
-		"unocss": "^66"
-	},
-	"dependencies": {
-		"@a-type/utils": "^1.1.4",
-		"@radix-ui/react-accordion": "^1.2.2",
-		"@radix-ui/react-checkbox": "^1.1.3",
-		"@radix-ui/react-collapsible": "^1.1.2",
-		"@radix-ui/react-context-menu": "^2.2.3",
-		"@radix-ui/react-dialog": "^1.1.3",
-		"@radix-ui/react-dropdown-menu": "^2.1.3",
-		"@radix-ui/react-icons": "^1.3.2",
-		"@radix-ui/react-menu": "^2.1.3",
-		"@radix-ui/react-popover": "^1.1.3",
-		"@radix-ui/react-progress": "^1.1.1",
-		"@radix-ui/react-radio-group": "^1.2.2",
-		"@radix-ui/react-scroll-area": "^1.2.2",
-		"@radix-ui/react-select": "^2.1.3",
-		"@radix-ui/react-slider": "^1.2.2",
-		"@radix-ui/react-slot": "^1.1.1",
-		"@radix-ui/react-switch": "^1.1.2",
-		"@radix-ui/react-tabs": "^1.1.2",
-		"@radix-ui/react-toast": "^1.2.3",
-		"@radix-ui/react-toggle-group": "^1.1.1",
-		"@radix-ui/react-tooltip": "^1.1.5",
-		"@unocss/preset-mini": "66.5.4",
-		"@unocss/preset-wind3": "66.5.4",
-		"@use-gesture/react": "^10.3.1",
-		"browser-image-resizer": "^2.4.1",
-		"calendar-blocks": "^0.4.0",
-		"clsx": "^2.1.1",
-		"color-interpolate": "^1.0.5",
-		"color-parse": "^2.0.2",
-		"color-space": "^2.0.1",
-		"csstype": "^3.1.3",
-		"date-fns": "^4.1.0",
-		"formik": "^2.4.6",
-		"frimousse": "^0.2.0",
-		"motion": "^12.23.6",
-		"pluralize": "^8.0.0",
-		"react-hot-toast": "^2.4.1",
-		"react-is": "^19.1.0",
-		"valtio": "^2.1.4"
-	},
-	"devDependencies": {
-		"@storybook/addon-essentials": "8.4.7",
-		"@storybook/addon-interactions": "8.4.7",
-		"@storybook/addon-links": "8.4.7",
-		"@storybook/blocks": "8.4.7",
-		"@storybook/react": "8.4.7",
-		"@storybook/react-vite": "8.4.7",
-		"@storybook/test": "8.4.7",
-		"@types/pluralize": "^0.0.33",
-		"@types/react": "^19.0.1",
-		"@types/react-dom": "^19.0.2",
-		"@types/react-is": "^19.0.0",
-		"@types/w3c-image-capture": "^1.0.10",
-		"@unocss/cli": "66.5.4",
-		"@unocss/core": "66.5.4",
-		"@unocss/transformer-variant-group": "66.5.4",
-		"axios": "^1.5.0",
-		"bumpp": "^10.3.1",
-		"change-case": "^4.1.2",
-		"dotenv": "^16.3.1",
-		"fs-extra": "^11.1.1",
-		"prettier": "^3.0.3",
-		"react": "19.0.0",
-		"react-dom": "19.0.0",
-		"storybook": "8.4.7",
-		"typescript": "^5.7.2",
-		"unocss": "^66.5.4"
-	},
-	"pnpm": {
-		"ignoredBuiltDependencies": [
-			"esbuild"
-		],
-		"onlyBuiltDependencies": [
-			"esbuild"
-		]
-	}
+  "name": "@a-type/ui",
+  "version": "3.0.14",
+  "type": "module",
+  "files": [
+    "/dist",
+    "/src"
+  ],
+  "sideEffects": [
+    ".*\\.css$"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "node": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/cjs/index.js"
+    },
+    "./uno-preset": {
+      "types": "./dist/esm/uno/uno.preset.d.ts",
+      "import": "./dist/esm/uno/uno.preset.js",
+      "node": "./dist/esm/uno/uno.preset.js",
+      "require": "./dist/cjs/uno/uno.preset.js",
+      "default": "./dist/cjs/uno/uno.preset.js"
+    },
+    "./main.css": {
+      "import": "./dist/css/main.css",
+      "node": "./dist/css/main.css",
+      "require": "./dist/css/main.css",
+      "default": "./dist/css/main.css"
+    }
+  },
+  "scripts": {
+    "build:transpile": "tsc && tsc -P tsconfig-cjs.json",
+    "build:prefix": "node ./scripts/addUnoInclude.js",
+    "build:process": "unocss --write-transformed -o ./dist/css/main.css -m -c uno.config.js \"./dist/**/*.js\"",
+    "build": "pnpm run build:transpile && pnpm run build:prefix && pnpm run build:process",
+    "prepublish": "pnpm run build",
+    "icons": "node ./scripts/generateIcons.js",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "up-radix": "pnpm update \"@radix-ui/*\" --latest",
+    "bump": "pnpx bumpp",
+    "test": "vitest",
+    "test:browser": "vitest --config=vitest.browser.config.ts"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19",
+    "unocss": "^66"
+  },
+  "dependencies": {
+    "@a-type/utils": "^1.1.4",
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-context-menu": "^2.2.3",
+    "@radix-ui/react-dialog": "^1.1.3",
+    "@radix-ui/react-dropdown-menu": "^2.1.3",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-menu": "^2.1.3",
+    "@radix-ui/react-popover": "^1.1.3",
+    "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.2",
+    "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.3",
+    "@radix-ui/react-slider": "^1.2.2",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-toast": "^1.2.3",
+    "@radix-ui/react-toggle-group": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.5",
+    "@unocss/preset-mini": "66.5.4",
+    "@unocss/preset-wind3": "66.5.4",
+    "@use-gesture/react": "^10.3.1",
+    "browser-image-resizer": "^2.4.1",
+    "calendar-blocks": "^0.4.0",
+    "clsx": "^2.1.1",
+    "color-interpolate": "^1.0.5",
+    "color-parse": "^2.0.2",
+    "color-space": "^2.0.1",
+    "colorjs.io": "^0.5.2",
+    "csstype": "^3.1.3",
+    "date-fns": "^4.1.0",
+    "formik": "^2.4.6",
+    "frimousse": "^0.2.0",
+    "motion": "^12.23.6",
+    "pluralize": "^8.0.0",
+    "react-hot-toast": "^2.4.1",
+    "react-is": "^19.1.0",
+    "valtio": "^2.1.4"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-interactions": "8.4.7",
+    "@storybook/addon-links": "8.4.7",
+    "@storybook/blocks": "8.4.7",
+    "@storybook/react": "8.4.7",
+    "@storybook/react-vite": "8.4.7",
+    "@storybook/test": "8.4.7",
+    "@types/pluralize": "^0.0.33",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
+    "@types/react-is": "^19.0.0",
+    "@types/w3c-image-capture": "^1.0.10",
+    "@unocss/cli": "66.5.4",
+    "@unocss/core": "66.5.4",
+    "@unocss/transformer-variant-group": "66.5.4",
+    "@vitejs/plugin-react": "^5.1.0",
+    "@vitest/browser-playwright": "^4.0.6",
+    "axios": "^1.5.0",
+    "bumpp": "^10.3.1",
+    "change-case": "^4.1.2",
+    "dotenv": "^16.3.1",
+    "fs-extra": "^11.1.1",
+    "prettier": "^3.0.3",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "storybook": "8.4.7",
+    "typescript": "^5.7.2",
+    "unocss": "^66.5.4",
+    "vitest": "^4.0.6",
+    "vitest-browser-react": "^2.0.2"
+  },
+  "pnpm": {
+    "ignoredBuiltDependencies": [
+      "esbuild"
+    ],
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
+  }
 }

package/src/__tests__/setup.ts

@@ -0,0 +1 @@
+import 'virtual:uno.css';

package/src/colors.stories.tsx

@@ -1,5 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import clsx from 'clsx';
+import { CSSProperties } from 'react';
 import { Box } from './components/index.js';
+import { snapshotColorContext } from './uno/logic/color.js';
+import { palettes } from './uno/logic/palettes.js';
 
 const meta = {
 	title: 'System/Colors',
@@ -11,17 +15,9 @@ const meta = {
 				max: 360,
 			},
 		},
-		customRotate: {
-			control: {
-				type: 'number',
-				min: -20,
-				max: 20,
-			},
-		},
 	},
 	args: {
 		customHue: 0,
-		customRotate: 0,
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -36,55 +32,45 @@ export const Default: Story = {
 	render(args: any) {
 		const style: any = args.customHue
 			? {
-					'--dyn-primary-source': args.customHue,
-					'--dyn-primary-hue-rotate': args.customRotate,
+					'--p-primary-hue': args.customHue,
 			  }
 			: {};
+
+		const ranges = (
+			<>
+				<Range className="theme" style={style} />
+				<Range className="theme-lemon" />
+				<Range className="theme-leek" />
+				<Range className="theme-tomato" />
+				<Range className="theme-eggplant" />
+				<Range className="theme-blueberry" />
+				<Range className="palette-attention" />
+				<Range className="palette-success" />
+				<Box className="h-100px">
+					<Box grow className="bg-gray-wash" />
+					<Box grow className="bg-gray-light" />
+					<Box grow className="bg-gray" />
+					<Box grow className="bg-gray-dark" />
+					<Box grow className="bg-gray-ink" />
+				</Box>
+				<Range className="palette-high-contrast" />
+				<Box className="h-100px">
+					<Box grow className="bg-black" />
+					<Box grow className="bg-wash" />
+					<Box grow className="bg-white" />
+				</Box>
+			</>
+		);
+
 		return (
 			<Box col>
 				<input type="color" className="sticky top-0 z-1" />
 				<Box full>
 					<Box d="col" grow p surface>
-						<Range className="theme" style={style} />
-						<Range className="theme-lemon" />
-						<Range className="theme-leek" />
-						<Range className="theme-tomato" />
-						<Range className="theme-eggplant" />
-						<Range className="theme-blueberry" />
-						<Box className="h-100px">
-							<Box grow className="bg-gray-wash" />
-							<Box grow className="bg-gray-light" />
-							<Box grow className="bg-gray" />
-							<Box grow className="bg-gray-dark" />
-							<Box grow className="bg-gray-ink" />
-						</Box>
-						<Range className="palette-high-contrast" />
-						<Box className="h-100px">
-							<Box grow className="bg-black" />
-							<Box grow className="bg-wash" />
-							<Box grow className="bg-white" />
-						</Box>
+						{ranges}
 					</Box>
 					<Box d="col" className="override-dark theme" grow p>
-						<Range className="theme" style={style} />
-						<Range className="theme-lemon" />
-						<Range className="theme-leek" />
-						<Range className="theme-tomato" />
-						<Range className="theme-eggplant" />
-						<Range className="theme-blueberry" />
-						<Box className="h-100px">
-							<Box grow className="bg-gray-wash" />
-							<Box grow className="bg-gray-light" />
-							<Box grow className="bg-gray" />
-							<Box grow className="bg-gray-dark" />
-							<Box grow className="bg-gray-ink" />
-						</Box>
-						<Range className="palette-high-contrast" />
-						<Box className="h-100px">
-							<Box grow className="bg-black" />
-							<Box grow className="bg-wash" />
-							<Box grow className="bg-white" />
-						</Box>
+						{ranges}
 					</Box>
 				</Box>
 			</Box>
@@ -95,19 +81,22 @@ export const Default: Story = {
 function Swatch({
 	className,
 	children,
+	style,
 }: {
 	className?: string;
 	children?: React.ReactNode;
+	style?: CSSProperties;
 }) {
 	return (
 		<div
-			className={className}
+			className={clsx(className, 'color-contrast')}
 			style={{
 				height: '100px',
 				display: 'flex',
 				justifyContent: 'center',
 				alignItems: 'center',
 				flex: '1',
+				...style,
 			}}
 		>
 			{children}
@@ -118,11 +107,11 @@ function Swatch({
 function Range({ className, style }: { className?: string; style?: any }) {
 	return (
 		<Box className={className} style={style}>
-			<Swatch className="bg-primary-wash" />
-			<Swatch className="bg-primary-light" />
-			<Swatch className="bg-primary" />
-			<Swatch className="bg-primary-dark" />
-			<Swatch className="bg-primary-ink" />
+			<Swatch className="bg-main-wash" />
+			<Swatch className="bg-main-light" />
+			<Swatch className="bg-main" />
+			<Swatch className="bg-main-dark" />
+			<Swatch className="bg-main-ink" />
 		</Box>
 	);
 }
@@ -131,8 +120,7 @@ export const Modifiers: Story = {
 	render(args: any) {
 		const style: any = args.customHue
 			? {
-					'--dyn-primary-source': args.customHue,
-					'--dyn-primary-hue-rotate': args.customRotate,
+					'--p-primary-hue': args.customHue,
 			  }
 			: {};
 		return (
@@ -158,19 +146,19 @@ function ModifierRange({
 }) {
 	return (
 		<Box className={className} style={style}>
-			<Swatch className="bg-primary-wash">W</Swatch>
-			<Swatch className="bg-primary-light bg-lighten-3">L+3</Swatch>
-			<Swatch className="bg-primary-light">L</Swatch>
-			{/* <Swatch className="bg-primary bg-lighten-5">P+5</Swatch> */}
-			<Swatch className="bg-primary bg-lighten-3">P+3</Swatch>
-			<Swatch className="bg-primary bg-lighten-1">P+1</Swatch>
-			<Swatch className="bg-primary">P</Swatch>
-			<Swatch className="bg-primary bg-darken-1">P-1</Swatch>
-			<Swatch className="bg-primary bg-darken-3">P-3</Swatch>
-			{/* <Swatch className="bg-primary bg-darken-5">P-5</Swatch> */}
-			<Swatch className="bg-primary-dark">D</Swatch>
-			<Swatch className="bg-primary-dark bg-darken-3">D-3</Swatch>
-			<Swatch className="bg-primary-ink">I</Swatch>
+			<Swatch className="bg-main-wash">W</Swatch>
+			<Swatch className="bg-main-light bg-lighten-2">L+2</Swatch>
+			<Swatch className="bg-main-light">L</Swatch>
+			{/* <Swatch className="bg-main bg-lighten-5">P+5</Swatch> */}
+			<Swatch className="bg-main bg-lighten-2">P+2</Swatch>
+			<Swatch className="bg-main bg-lighten-1">P+1</Swatch>
+			<Swatch className="bg-main">P</Swatch>
+			<Swatch className="bg-main bg-darken-1">P-1</Swatch>
+			<Swatch className="bg-main bg-darken-2">P-2</Swatch>
+			{/* <Swatch className="bg-main bg-darken-5">P-5</Swatch> */}
+			<Swatch className="bg-main-dark">D</Swatch>
+			<Swatch className="bg-main-dark bg-darken-2">D-2</Swatch>
+			<Swatch className="bg-main-ink">I</Swatch>
 		</Box>
 	);
 }
@@ -179,8 +167,7 @@ export const Inheritance: Story = {
 	render(args: any) {
 		const style: any = args.customHue
 			? {
-					'--dyn-primary-source': args.customHue,
-					'--dyn-primary-hue-rotate': args.customRotate,
+					'--p-primary-hue': args.customHue,
 			  }
 			: {};
 		return (
@@ -266,3 +253,39 @@ export const TweakOpacity: Story = {
 		);
 	},
 };
+
+export const ComputedColors: Story = {
+	render() {
+		const ctx = snapshotColorContext('primary');
+		const hexValues = [
+			palettes.primary.definitions.wash.computeHex(ctx),
+			palettes.primary.definitions.light.computeHex(ctx),
+			palettes.primary.definitions.default.computeHex(ctx),
+			palettes.primary.definitions.dark.computeHex(ctx),
+			palettes.primary.definitions.ink.computeHex(ctx),
+		];
+		const oklchValues = [
+			palettes.primary.definitions.wash.computeOklch(ctx),
+			palettes.primary.definitions.light.computeOklch(ctx),
+			palettes.primary.definitions.default.computeOklch(ctx),
+			palettes.primary.definitions.dark.computeOklch(ctx),
+			palettes.primary.definitions.ink.computeOklch(ctx),
+		];
+
+		return (
+			<Box col>
+				<Range className="theme" />
+				<Box className="h-100px">
+					{oklchValues.map((oklch) => (
+						<Swatch style={{ backgroundColor: oklch }}>OK</Swatch>
+					))}
+				</Box>
+				<Box className="h-100px">
+					{hexValues.map((hex) => (
+						<Swatch style={{ backgroundColor: hex }}>Hex</Swatch>
+					))}
+				</Box>
+			</Box>
+		);
+	},
+};

package/src/components/box/Box.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { paletteNames } from '../../uno/logic/color.js';
+import { paletteNames } from '../../uno/index.js';
 import { Button } from '../button/Button.js';
 import { Checkbox } from '../checkbox/Checkbox.js';
 import { Progress } from '../progress/Progress.js';

package/src/components/box/Box.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { createContext, Ref, useContext, useMemo } from 'react';
-import { PaletteName } from '../../uno/logic/color.js';
+import { PaletteName } from '../../uno/index.js';
 import { SlotDiv, SlotDivProps } from '../utility/SlotDiv.js';
 
 export type BoxAlignment = 'center' | 'stretch' | 'start' | 'end';

package/src/components/button/Button.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
-import { paletteNames } from '../../uno/logic/color.js';
+import { paletteNames } from '../../uno/index.js';
 import { Box } from '../box/Box.js';
 import { Icon } from '../icon/index.js';
 import { Button } from './Button.js';

package/src/components/button/Button.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react';
 import { withClassName } from '../../hooks.js';
 import useMergedRef from '../../hooks/useMergedRef.js';
-import { PaletteName } from '../../uno/logic/color.js';
+import { PaletteName } from '../../uno/index.js';
 import { DropdownMenuTriggerIcon } from '../dropdownMenu/DropdownMenu.js';
 import { useIsDropdownTrigger } from '../dropdownMenu/DropdownTriggerContext.js';
 import { IconLoadingProvider } from '../icon/IconLoadingContext.js';

package/src/components/button/classes.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { PaletteName } from '../../uno/logic/color.js';
+import { PaletteName } from '../../uno/index.js';
 import { type ButtonProps } from './Button.jsx';
 
 export function getButtonClassName({

package/src/components/chip/Chip.tsx

@@ -1,7 +1,7 @@
 import { Slot } from '@radix-ui/react-slot';
 import classNames from 'clsx';
 import { HTMLAttributes, Ref } from 'react';
-import { PaletteName } from '../../uno/logic/color.js';
+import { PaletteName } from '../../uno/index.js';
 
 export interface ChipProps extends HTMLAttributes<HTMLElement> {
 	color?: PaletteName;

package/src/components/colorPicker/ColorPicker.tsx

@@ -2,7 +2,7 @@ import { SelectTriggerProps } from '@radix-ui/react-select';
 import classNames, { clsx } from 'clsx';
 import { ReactNode } from 'react';
 import { withClassName } from '../../hooks/withClassName.js';
-import { PaletteName, paletteNames } from '../../uno/logic/color.js';
+import { PaletteName, paletteNames } from '../../uno/index.js';
 import {
 	Select,
 	SelectContent,

package/src/components/datePicker/DatePicker.tsx

@@ -6,7 +6,7 @@ import {
 import classNames from 'clsx';
 import { useCallback, useState } from 'react';
 import { withClassName } from '../../hooks.js';
-import { PaletteName } from '../../uno/logic/color.js';
+import { PaletteName } from '../../uno/index.js';
 import { Button } from '../button/index.js';
 import { Icon } from '../icon/index.js';
 

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -3,7 +3,7 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import classNames, { clsx } from 'clsx';
 import { Ref } from 'react';
 import { withClassName } from '../../hooks/withClassName.js';
-import { PaletteName } from '../../uno/logic/color.js';
+import { PaletteName } from '../../uno/index.js';
 import { BoxContext } from '../box/Box.js';
 import { SlotDiv } from '../utility/SlotDiv.js';
 import { DropdownTriggerProvider } from './DropdownTriggerContext.js';

package/src/components/layouts/PageRoot.tsx

@@ -1,9 +1,30 @@
-import { withClassName } from '../../hooks.js';
+import clsx from 'clsx';
+import { HTMLAttributes } from 'react';
+import { useThemedTitleBar } from '../../hooks.js';
 
-export const PageRoot = withClassName(
-	'div',
-	'layer-components:(flex-grow-1 flex-shrink-1 flex-basis-0 min-h-100dvh bg-wash)',
-	'layer-components:(grid grid-areas-[content]-[nav] grid-cols-[1fr] grid-rows-[1fr_auto] items-start justify-center)',
-	'md:layer-responsive:(grid-areas-[gutter1_nav_content_gutter2] grid-cols-[1fr_auto_20fr_1fr] min-h-auto h-auto bg-wash)',
-	'lg:layer-responsive:(grid-cols-[1fr_auto_min(800px,70vw)_1fr])',
-);
+export interface PageRootProps extends HTMLAttributes<HTMLDivElement> {
+	disableTitleBarColor?: boolean;
+}
+
+export function PageRoot({
+	className,
+	children,
+	disableTitleBarColor,
+	...rest
+}: PageRootProps) {
+	useThemedTitleBar('gray', 'wash', undefined, disableTitleBarColor);
+	return (
+		<div
+			className={clsx(
+				'layer-components:(flex-grow-1 flex-shrink-1 flex-basis-0 min-h-100dvh bg-wash)',
+				'layer-components:(grid grid-areas-[content]-[nav] grid-cols-[1fr] grid-rows-[1fr_auto] items-start justify-center)',
+				'md:layer-responsive:(grid-areas-[gutter1_nav_content_gutter2] grid-cols-[1fr_auto_20fr_1fr] min-h-auto h-auto bg-wash)',
+				'lg:layer-responsive:(grid-cols-[1fr_auto_min(800px,70vw)_1fr])',
+				className,
+			)}
+			{...rest}
+		>
+			{children}
+		</div>
+	);
+}