@siyahi/ui 0.1.2-next.1 → 0.1.3-next.2

package/README.md

@@ -19,12 +19,14 @@ is Tailwind source, so a plain CSS import leaves every component unstyled.
 
 ```sh
 npm install @siyahi/ui@next tailwindcss @tailwindcss/vite
+npm install --save-dev @siyahi/tools@next
 ```
 
 ```ts
 // vite.config.ts
 import tailwindcss from "@tailwindcss/vite";
-export default defineConfig({ plugins: [react(), tailwindcss()] });
+import { preloadFonts } from "@siyahi/tools/vite";
+export default defineConfig({ plugins: [react(), tailwindcss(), preloadFonts()] });
 ```
 
 ```css
@@ -43,6 +45,14 @@ createRoot(root).render(
 );
 ```
 
+`preloadFonts()` adds `<link rel="preload">` tags for Geist and Geist Mono to
+the built `index.html`, so the fonts download with the scripts instead of after
+the first paint. Until they arrive the theme draws Arial (or its Linux twins,
+Liberation Sans and Arimo) scaled to Geist's metrics, so nothing moves when
+Geist swaps in. An app that renders its own HTML adds the tags itself, with
+the hashed URLs of `geist-latin-wght-normal.woff2`,
+`geist-latin-ext-wght-normal.woff2` and `geist-mono-latin-wght-normal.woff2`.
+
 Everything comes from `@siyahi/ui`: the shadcn components, the registry
 add-ons (data table, heatmaps, stat tiles, sidebar), Siyahi's own components
 and the Recharts pieces charts are built from. Add `lucide-react` only if your
@@ -137,17 +147,18 @@ npm install --save-dev @siyahi/tools@next oxlint
 ```
 
 `@siyahi/tools` also has `siyahi-shots` (screenshots of a page at 1920 and 390
-pixels wide in both schemes, with layout checks) and `siyahi-contrast` (the
+pixels wide in both schemes, with layout checks), `siyahi-cls` (how far a page
+moves after its first paint on a slow network) and `siyahi-contrast` (the
 theme contrast check). See [packages/tools](packages/tools/README.md).
 
 ## This repository
 
-| Path              | What                                                                              |
-| ----------------- | --------------------------------------------------------------------------------- |
-| `packages/ui`     | `@siyahi/ui`. The theme is `styles/siyahi.css`, the only file with colour values. |
-| `packages/tools`  | `@siyahi/tools`: lint plugin, contrast check, screenshot script.                  |
-| `apps/catalogue`  | The catalogue site, a Vite app deployed as a Cloudflare Worker.                   |
-| `assets/icon.svg` | The mark.                                                                         |
+| Path              | What                                                                               |
+| ----------------- | ---------------------------------------------------------------------------------- |
+| `packages/ui`     | `@siyahi/ui`. The theme is `styles/siyahi.css`, the only file with colour values.  |
+| `packages/tools`  | `@siyahi/tools`: lint plugin, font preload, contrast, screenshot and shift checks. |
+| `apps/catalogue`  | The catalogue site, a Vite app deployed as a Cloudflare Worker.                    |
+| `assets/icon.svg` | The mark.                                                                          |
 
 Development uses pnpm and [Vite+](https://viteplus.dev):
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/ui",
-  "version": "0.1.2-next.1",
+  "version": "0.1.3-next.2",
   "description": "Stock shadcn/ui on Base UI and Tailwind v4, a finance theme, a few compositions and formatters.",
   "keywords": [
     "base-ui",
@@ -58,6 +58,7 @@
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
+    "@tailwindcss/node": "4.3.3",
     "@types/d3-hierarchy": "^3.1.7",
     "@types/node": "24.19.2",
     "@types/react": "~19.3.0",

package/styles/fallback-fonts.css

@@ -0,0 +1,65 @@
+/*
+ * Generated by scripts/generate.ts. Do not edit.
+ * System fonts scaled to Geist's and Geist Mono's metrics. The theme names
+ * them right after Geist, so the text a browser draws while Geist loads takes
+ * the space Geist will, and nothing moves when Geist swaps in.
+ */
+@font-face {
+  font-family: "Geist Fallback";
+  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo Regular"), local("Arimo-Regular");
+  font-weight: 100 450;
+  size-adjust: 102.87%;
+  ascent-override: 97.7%;
+  descent-override: 28.68%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: "Geist Fallback";
+  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo Regular"), local("Arimo-Regular");
+  font-weight: 451 550;
+  size-adjust: 105.29%;
+  ascent-override: 95.45%;
+  descent-override: 28.02%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: "Geist Fallback";
+  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold");
+  font-weight: 551 650;
+  size-adjust: 100.05%;
+  ascent-override: 100.45%;
+  descent-override: 29.49%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: "Geist Fallback";
+  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"), local("Arimo-Bold");
+  font-weight: 651 900;
+  size-adjust: 102.09%;
+  ascent-override: 98.44%;
+  descent-override: 28.9%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: "Geist Mono Fallback";
+  src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"), local("LiberationMono"), local("Cousine Regular"), local("Cousine-Regular");
+  font-weight: 100 550;
+  size-adjust: 99.98%;
+  ascent-override: 100.52%;
+  descent-override: 29.5%;
+  line-gap-override: 0%;
+}
+
+@font-face {
+  font-family: "Geist Mono Fallback";
+  src: local("Courier New Bold"), local("CourierNewPS-BoldMT"), local("Liberation Mono Bold"), local("LiberationMono-Bold"), local("Cousine Bold"), local("Cousine-Bold");
+  font-weight: 551 900;
+  size-adjust: 99.98%;
+  ascent-override: 100.52%;
+  descent-override: 29.5%;
+  line-gap-override: 0%;
+}

package/styles/siyahi.css

@@ -9,6 +9,7 @@
 @import "./shadcn.css";
 @import "@fontsource-variable/geist";
 @import "@fontsource-variable/geist-mono";
+@import "./fallback-fonts.css";
 
 /* Tailwind does not scan node_modules, so name the package's own classes. */
 @source "../dist";
@@ -21,9 +22,15 @@
 @custom-variant dark (@media (prefers-color-scheme: dark));
 
 @theme inline {
-  --font-sans: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
-  --font-mono: "Geist Mono Variable", ui-monospace, monospace;
+  --font-sans: "Geist Variable", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Geist Mono Variable", "Geist Mono Fallback", ui-monospace, monospace;
   --font-heading: var(--font-sans);
+  /*
+   * Tailwind's 65ch, measured in Geist, whose "0" is 0.663em wide. A ch
+   * follows whichever font is drawing, so a plain 65ch is narrower while the
+   * fallback draws and every prose block rewraps when Geist arrives.
+   */
+  --max-width-prose: 43.1em;
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);