building-html-canvases

用途：用于编写以文档或图形程序为主的 PostHog canvas（如书面报告、示意图、生成艺术、WebGL 场景），这类画布适合语义化 HTML、CSS 和浏览器原生 API，不必强行使用 Quill 组件或 React 状态。\n\n主要能力与用法：每个 canvas 以 src/canvas.tsx 作为挂载的 React 入口组件（默认导出、无 props），React 仅作薄壳，体验写在其中的 HTML/CSS/浏览器 API 里。文档类用 <article>、标题、列表、表格、figure 等语义 HTML 加 <style> 排版；绘图/WebGL 类渲染 <canvas>，在 useEffect 中通过 ref 命令式驱动，获取 2D/WebGL 上下文并执行 setup 与渲染循环。需在 effect 返回函数中清理：取消 requestAnimationFrame、移除监听器、释放上下文，避免主题切换或重挂载时泄漏或重复运行。可混合分层：静态页面挂一个交互岛，或让 React 管外壳、把图表的 <canvas> 交给命令式代码。\n\n导入白名单为 react、react-dom、@posthog/quill、recharts、lucide-react、dayjs；浏览器全局对象（document、CanvasRenderingContext2D、WebGLRenderingContext、requestAnimationFrame、IntersectionObserver、Web Audio 等）无需导入。Three.js 等 npm 图形库暂不可加载，需用原生 WebGL 或 2D canvas。\n\n样式与主题：最外层元素用 min-h-screen 或 min-height:100vh 撑满视口，不要用 h-screen/height:100vh（固定高度会裁剪）、h-full/height:100%（百分比高度会塌陷）。主题通过根元素 .dark 类切换，颜色用 :root 与 html.dark 下的 CSS 变量，或主题 token 工具类（bg-background、text-foreground、border-border），避免写死浅色。自定义变量需加前缀（如 --doc-bg、--doc-muted），不得复用平台 token 名（--background、--border、--card、--chrome、--input、--muted、--primary、--fill-*），否则校验报 platform_token_redeclared。canvas/WebGL 颜色在运行时用 getComputedStyle 读取已解析 token，长期场景需在主题变化时重读。\n\n限制：PostHog 数据只通过 ph bridge 获取（含 ph.capture 交互分析）；其他请求与外部样式、图片、字体、媒体、frame 需在 capabilities.network.origins 中声明精确公共 HTTPS 来源，且发布后才生效；远程脚本与动态导入被阻止。涉及 PostHog 数字需可验证：insight 数字经 ph.openExternal 链接已保存 insight；临时 ph.query 数字须在 <details> 中披露确切查询。外链经 ph.openExternal(url)（仅 posthog.com 来源）由用户交互触发。通过 canvas 工具验证与发布。