camox 0.53.1 → 0.54.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "camox",
-  "version": "0.53.1",
+  "version": "0.54.0",
   "license": "MIT",
   "bin": {
     "camox": "./bin/camox.mjs"
@@ -112,7 +112,6 @@
     "@shikijs/langs": "^4.5.0",
     "@shikijs/themes": "^4.5.0",
     "@sinclair/typebox": "^0.34.52",
-    "@takumi-rs/image-response": "^2.16.3",
     "@tanstack/react-form": "^1.33.5",
     "@tanstack/react-hotkeys": "^0.16.0",
     "@tanstack/react-query-devtools": "^5.104.3",
@@ -133,11 +132,12 @@
     "react-dom": "^19.3.1",
     "react-og-preview": "^0.2.0",
     "shiki": "^4.5.0",
+    "takumi-js": "^2.18.1",
     "unhead": "^3.4.3",
     "zod": "^4.6.7",
-    "@camox/api-contract": "0.53.1",
-    "@camox/cli": "0.53.1",
-    "@camox/ui": "0.53.1"
+    "@camox/api-contract": "0.54.0",
+    "@camox/cli": "0.54.0",
+    "@camox/ui": "0.54.0"
   },
   "devDependencies": {
     "@earendil-works/pi-ai": "1.3.0",

package/skills/camox/references/layout-definitions.md

@@ -85,25 +85,20 @@ Singleton and derived layouts also receive `data` and `params`, and record pages
 
 ## OG Image — `toImage` (optional)
 
-Returns JSX rendered as a 1200×630 image. Use **inline styles, not Tailwind**, and `display: "flex"` for layout: this runs in an image-generation engine, not a browser.
+Returns JSX rendered as a 1200×630 image. Style it with the Theme's utilities, like a block: the image renders with the site's compiled `src/styles.css` and the Google Fonts that `src/document.ts` loads. It runs in an image engine, not a browser, so:
+
+- Size the root with `h-full w-full`, and lay out with flexbox or grid.
+- Put the color scheme class (`dark`, `brand`, …) and `font-body` on the root: the document's `<html>` classes and base styles don't apply.
+- Only class, id and descendant selectors match, so `hover:` and other state variants do nothing. Breakpoints see a 1200px-wide viewport.
 
 ```tsx
 toImage: ({ page, project }) => (
-  <div
-    style={{
-      display: "flex",
-      flexDirection: "column",
-      width: "100%",
-      height: "100%",
-      padding: 60,
-      backgroundColor: "#09090b",
-      color: "#fafafa",
-      fontFamily: "sans-serif",
-    }}
-  >
-    {project.name && <div style={{ fontSize: 24 }}>{project.name}</div>}
-    <div style={{ fontSize: 64 }}>{page.title}</div>
-    {page.description && <div style={{ fontSize: 28 }}>{page.description}</div>}
+  <div className="dark bg-canvas text-ink font-body flex h-full w-full flex-col justify-center px-20 py-16">
+    {project.name && <div className="text-brand mb-6 text-2xl uppercase">{project.name}</div>}
+    <div className="font-heading line-clamp-2 text-6xl font-semibold">{page.title}</div>
+    {page.description && (
+      <div className="text-ink-muted mt-6 line-clamp-2 text-3xl">{page.description}</div>
+    )}
   </div>
 ),
 ```

package/dist/features/og/defaultFonts.js

@@ -1,31 +0,0 @@
-import { GEIST_VARIABLE_TTF_BASE64 } from "./geist-variable-ttf-base64.js";
-
-//#region src/features/og/defaultFonts.ts
-/**
-* Decoded default fonts for the OG image wrapper.
-*
-* Takumi's wasm renderer ships with no embedded fonts — rendering without
-* `fonts` produces zero text runs and OG images come out as featureless
-* rectangles. We always inject Geist Variable so text has something to render
-* with; the user can still pass their own `fonts:` through the ImageResponse
-* constructor and override this default.
-*
-* Decoded once at module load. Takumi keys registered fonts by their bytes, so
-* passing the same `data` on every render registers Geist only once per
-* isolate.
-*/
-function decodeBase64(b64) {
-	const binary = atob(b64);
-	const bytes = new Uint8Array(binary.length);
-	for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
-	return bytes;
-}
-const DEFAULT_FONTS = [{
-	name: "Geist",
-	data: decodeBase64(GEIST_VARIABLE_TTF_BASE64),
-	weight: 400,
-	style: "normal"
-}];
-
-//#endregion
-export { DEFAULT_FONTS };