Files
cal/app/vite.config.ts
zooqueenandHanzo Dev 5d5a97f993 cal looks like the rest of Hanzo, and an empty field reads as empty
The app mounts <Hanzo> from @hanzo/ui with its stylesheet instead of a stock
gui config, so the Booker reads hanzo.ai's own tokens. @hanzo/ui 8.27.89
draws a placeholder at the ink's 45% and the value at the full ink, and
@hanzo/booker 8.3.7 carries no sample-data placeholders ("Your name",
"[email protected]"), a white pill Confirm (black on light) and a quiet Back.

The page follows the device's light or dark, as hanzo.ai and its checkout do,
painted in <head> before first paint. Grounds are the checkout's: #000 or #fff,
fields on #171717 / #ededed under the #2e2e2e / #d5d5d5 hairline. One layout,
the mark then one card, on every page: the landing's frame around the Booker's
own card is gone, the booking page is a single card with a white-pill Keep it,
and the popup embed draws the Booker bare inside its panel, which follows the
device too. An embedded document decides it is framed in <head>, so it is
see-through before React mounts.

Co-authored-by: Hanzo Dev <[email protected]>
2026-10-16 01:09:01 -07:00

54 lines
2.0 KiB
TypeScript

import { bootScript } from "@hanzo/appearance/state";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import { SCHEME } from "./src/scheme";
// Hanzo Calendar SPA — hosts the native universal Booker (@hanzo/booker, gui)
// inside <Hanzo> against the /v1/calendar backend. NODE_ENV is pinned so React
// and gui take their production paths in the browser.
//
// gui's substrate is react-native primitives, which on the web is
// react-native-web: the alias maps it, and `.web.*` outranks `.js` so
// react-native-svg (which @hanzo/ui draws icons with) reaches its web build
// rather than its native codegen. Same mapping as hanzo.ai's checkout.
//
// The scheme is painted in <head> before anything renders: a page that decides
// light or dark after React mounts flashes the wrong ground first. So is
// `framed`: an embedded document paints no ground of its own, and decided in an
// effect it showed an opaque slab in the host page until React mounted.
const FRAMED = `if(location.pathname==="/embed")document.documentElement.classList.add("framed")`;
export default defineConfig({
plugins: [
react(),
{
name: "scheme",
transformIndexHtml: () => [
{ tag: "script", children: `${FRAMED};${bootScript({ base: SCHEME })}`, injectTo: "head-prepend" },
],
},
],
resolve: {
alias: [
{ find: /^react-native$/, replacement: "react-native-web" },
{
find: "@react-native/assets-registry/registry",
replacement: "react-native-web/dist/modules/AssetRegistry",
},
],
extensions: [".web.js", ".web.jsx", ".web.ts", ".web.tsx", ".mjs", ".js", ".mts", ".ts", ".jsx", ".tsx", ".json"],
dedupe: ["react", "react-dom", "react-native-web", "@hanzo/gui"],
},
define: {
"process.env.NODE_ENV": JSON.stringify("production"),
},
optimizeDeps: {
esbuildOptions: { target: "es2020" },
},
build: {
outDir: "dist",
sourcemap: false,
chunkSizeWarningLimit: 4000,
},
});