mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-30 04:50:07 +00:00
zeekayandHanzo Dev
56e004e4b2
The kit shipped ten typefaces. One is ours. Deleted: font-inter, font-silkscreen, font-cherry-bomb, font-nohemi, font-dm-sans, font-dm-serif-display, font-fira-mono, font-glusp, font-munro. Six of those had no dependent in the workspace at all. font-zen stays, and so do font-size, get-font-sized and font, which size and register rather than name a face. Published versions remain on the registry, so anything pinned to one keeps resolving. @hanzogui/config's DEFAULT entry built heading and body from Inter — v4 was already system fonts and v5 already Zen, so an app on the default got a face nobody chose. It builds from Zen now. dev-config, which drives gui.hanzo.ai, was worse: Inter for text, Berkeley Mono for code, plus Cherry Bomb and Silkscreen. Every size, weight, letter-spacing and transform value is unchanged — only the faces moved. The pixel ROLE was worth keeping and only its face was borrowed, so font-zen gained Zen Pixel Square (createZenPixelFont, --font-zen-pixel-*) and the token is `$pixel`. `$silkscreen` and `$cherryBomb` are gone across ~35 call sites. Cherry Bomb had no role of its own and no Zen counterpart, so it is deleted rather than substituted. gui.hanzo.ai now self-hosts three Zen files in place of four foreign ones — one variable file per family instead of a weight per request — and its OG-image route renders cards in the same faces as the pages they link to. The Inter, Berkeley, Silkscreen and glusp binaries are gone from public/fonts, including an otf directory of 20 Inter cuts. Native is honestly short: @hanzo/font ships woff2 and react-native wants otf/ttf, so the expo starter and kitchen-sink's native entry load no custom face and say why, rather than keeping Inter because it happened to be there. bun install 0 · build 161/161 · typecheck passed. Co-authored-by: Hanzo Dev <[email protected]>
84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
import '../hanzogui.generated.css'
|
|
|
|
import { useEffect } from 'react'
|
|
import { useColorScheme } from 'react-native'
|
|
import { StatusBar } from 'expo-status-bar'
|
|
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
|
|
import { useFonts } from 'expo-font'
|
|
import { SplashScreen, Stack } from 'expo-router'
|
|
import { Provider } from 'components/Provider'
|
|
import { useTheme } from '@hanzo/gui'
|
|
|
|
export {
|
|
// Catch any errors thrown by the Layout component.
|
|
ErrorBoundary,
|
|
} from 'expo-router'
|
|
|
|
export const unstable_settings = {
|
|
// Ensure that reloading on `/modal` keeps a back button present.
|
|
initialRouteName: '(tabs)',
|
|
}
|
|
|
|
// Prevent the splash screen from auto-hiding before asset loading is complete.
|
|
SplashScreen.preventAutoHideAsync()
|
|
|
|
export default function RootLayout() {
|
|
// No custom face on native yet: @hanzo/font ships woff2, which react-native
|
|
// cannot load — it wants otf/ttf. Until that package ships those, native
|
|
// renders in the system face rather than a borrowed one.
|
|
const [fontsLoaded, fontsError] = useFonts({})
|
|
|
|
useEffect(() => {
|
|
if (fontsLoaded || fontsError) {
|
|
// Hide the splash screen after the fonts have loaded (or an error was returned) and the UI is ready.
|
|
SplashScreen.hideAsync()
|
|
}
|
|
}, [fontsLoaded, fontsError])
|
|
|
|
if (!fontsLoaded && !fontsError) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<Providers>
|
|
<RootLayoutNav />
|
|
</Providers>
|
|
)
|
|
}
|
|
|
|
const Providers = ({ children }: { children: React.ReactNode }) => {
|
|
return <Provider>{children}</Provider>
|
|
}
|
|
|
|
function RootLayoutNav() {
|
|
const colorScheme = useColorScheme()
|
|
const theme = useTheme()
|
|
return (
|
|
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
|
|
<StatusBar style={colorScheme === 'dark' ? 'light' : 'dark'} />
|
|
<Stack>
|
|
<Stack.Screen
|
|
name="(tabs)"
|
|
options={{
|
|
headerShown: false,
|
|
}}
|
|
/>
|
|
|
|
<Stack.Screen
|
|
name="modal"
|
|
options={{
|
|
title: 'Gui + Expo',
|
|
presentation: 'modal',
|
|
animation: 'slide_from_right',
|
|
gestureEnabled: true,
|
|
gestureDirection: 'horizontal',
|
|
contentStyle: {
|
|
backgroundColor: theme.background.val,
|
|
},
|
|
}}
|
|
/>
|
|
</Stack>
|
|
</ThemeProvider>
|
|
)
|
|
}
|