Files
zooqueenandHanzo Dev 74c97542a0 The export builds, and draws with the component sheet
`next build --webpack` stopped at react-native-svg asking for
@react-native/assets-registry/registry; the web registry lives in
react-native-web, so the alias points there and the gui packages are
transpiled.

The server renders @hanzo/ui through its node entry, which imports no CSS,
so the export shipped without the sheet and the page drew as bare HTML.
The root layout imports @hanzo/ui/styles.css, and the Zen faces from
@hanzo/design, so tokens, themes and component rules reach every page.

The typecheck runs before a build creates next-env.d.ts, so *.css imports
are declared for TypeScript 7. tsconfig carries the two values Next writes
on every build. The install stops on no prompt: both jest build scripts
are answered.

Co-authored-by: Hanzo Dev <[email protected]>
2026-09-15 11:19:58 -07:00

58 lines
2.3 KiB
TypeScript

import type { ReactNode } from 'react';
import { Hanzo } from '@hanzo/ui';
import { colors } from '@hanzo/ui/core';
// The sheet every component draws with: design tokens, gui themes and component
// rules. Imported here because the server renders @hanzo/ui's node entry, which
// carries no CSS, so only a root import puts the sheet in the export.
import '@hanzo/ui/styles.css';
// The Zen faces. The sheet above names the family; the files ship in @hanzo/design.
import '@hanzo/design/tokens/fonts.css';
import './globals.css';
export const metadata = {
metadataBase: new URL('https://tabs.hanzo.ai'),
title: { default: 'Hanzo Tabs', template: '%s — Hanzo Tabs' },
description: 'Keep tabs on your agents. A browser terminal workspace for machines you have linked.',
// Both files are the Hanzo mark from @hanzo/brand, copied into public/. The
// .ico is here because a browser asks for /favicon.ico whether or not a page
// declares one, and the bucket has no server to answer that with anything
// else — an undeclared icon is a 404 and a blank tab.
icons: {
icon: [
{ url: '/favicon.svg', type: 'image/svg+xml' },
{ url: '/favicon.ico', sizes: '48x48' },
],
},
openGraph: {
title: 'Hanzo Tabs — keep tabs on your agents',
description: 'Every shell your coding agents work in, split and tiled, from anywhere.',
url: 'https://tabs.hanzo.ai',
siteName: 'Hanzo Tabs',
},
};
export const viewport = {
// The browser chrome paints this before any stylesheet loads, so it is the one
// colour that cannot be a var() — it has to be a literal. Taking it from the
// token module rather than typing one keeps it the SAME literal the page then
// paints, which is what stops the address bar and the page disagreeing.
themeColor: colors.background,
// The workspace is full-bleed and the terminal owns the bottom edge.
viewportFit: 'cover' as const,
width: 'device-width',
initialScale: 1,
};
// `Hanzo` carries the config and the theme every component resolves
// `$background` and `$borderColor` against. Dark by default, which is the
// identity — there is no switch here to flip.
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en">
<body>
<Hanzo>{children}</Hanzo>
</body>
</html>
);
}