feat(canvas): scaffold-by-default freeform builds + Tailwind v4 JIT

[adamleithp]

What

Two changes to freeform (React) canvas generation, aimed at faster, more consistent first renders.

1. Scaffold-by-default first builds

Freeform canvas generation now seeds the agent with a known-good starter scaffold by default instead of authoring the whole single-file app from scratch. The agent edits a compiling baseline → fewer first-render errors, less boilerplate to (re)derive.

• New packages/core/src/canvas/freeformStarter.ts — a complete, whitelist-legal .tsx that already wires the easy-to-get-wrong bits: date picker (Popover + quickRanges), theme tokens, per-card loading skeletons, correct typed-node result reading, and a working Refresh.
• Threaded as a useStarter flag through useGenerateFreeformCanvas → buildFreeformGenerationPrompt.
• Generate bar shows a checkbox, checked by default; uncheck to build from a blank canvas.

2. Tailwind v4 browser JIT in the edit sandbox

Swapped the edit-mode sandbox Tailwind engine from the v3 Play CDN to the v4 browser build (@tailwindcss/browser@4.3.1, pinned). Quill is authored for v4, so v4's layered preflight, native not-* variants, and @theme inline token mapping let us delete several hand-patches:

• preflight-off hack → v4 preflight is @layer base, sorts below Quill's @layer components, can't clobber it
• not-disabled variant shim → native in v4
• hand-rolled @layer base reset → v4 preflight covers it
• hand-mirrored color map → @theme inline referencing Quill's CSS vars

v3 kept behind a TAILWIND_ENGINE flag as a one-line fallback. CSP opened for cdn.jsdelivr.net (edit mode only).

3. Authoring-contract tightening

• Tailwind utilities over inline style.
• Token-only color with the status-token foreground convention (text-success-foreground, not bare text-success which is the pale fill) — fixes invisible deltas.
• Date picker rendered bare with <PopoverContent className="w-auto p-0">, no compact (it self-sizes).

Testing

• pnpm --filter @posthog/core typecheck && test (1727 pass), pnpm --filter @posthog/ui typecheck, biome lint — all green.
• Validated the v4 swap live over CDP: confirmed the v4 engine loads, @theme inline compiles, Quill components render styled, and the success delta renders readable green.

🤖 Generated with Claude Code

[github-actions]

React Doctor found 1 issue in 1 file · 1 warning.

1 warning

src/features/canvas/freeform/FreeformGenerateBar.tsx

• ⚠️ src/features/canvas/freeform/FreeformGenerateBar.tsx:4 React 19 API migration can break callers no-react19-deprecated-apis

_{Reviewed by React Doctor for commit 8919327.}

[stamphog]

T1d-complex (439 lines, 8 files) with zero reviews touching sandbox CSP policy. The script-src and connect-src directives now trust the entire cdn.jsdelivr.net origin rather than just the pinned path, in a sandbox that already runs unsafe-eval. The changes are well-reasoned and documented, but a security-adjacent CSP expansion in the code-execution sandbox should have at least one human sign-off before merging.

[greptile-apps]

_{Reviews (1): Last reviewed commit: "feat(canvas): scaffold-by-default freefo..." | Re-trigger Greptile}

[adamleithp]

Addressed review feedback in 891932702:

• stamphog + greptile (CSP scope) — edit-mode CSP now trusts only the active engine's CDN (not both v3 + v4), and the v4 build is path-scoped to cdn.jsdelivr.net/npm/@tailwindcss/ instead of the whole jsdelivr origin. Re-validated live over CDP: v4 still compiles, canvas renders fully styled, no CSP violations.
• greptile (stale starter doc) — fixed the freeformStarter.ts header (dropped "COMPACT" and "opt-in"; the scaffold is on by default and the picker self-sizes without compact).
• React Doctor (forwardRef, FreeformGenerateBar.tsx:4) — not changing in this PR. The forwardRef usage is pre-existing; the rule fired only because this PR added useState to that import line. forwardRef still works in React 19 (deprecated, not removed); migrating to ref-as-prop changes the component's public API and is out of scope here.