HyperFrames v0.7.106 Catalog 更新解析真实合成预览、变量面板与侧边栏分组【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesHyperFrames v0.7.106发布于 2026-08-11是一次围绕 Catalog组件目录体验的系统性升级Catalog 页面开始直接播放真实合成而不是录好的视频358 个条目按创作意图被归入 8 个可折叠分组每个带变量的条目都重新拥有了可交互的变量面板且重装条目不再覆盖你的手工编辑。读完本文你将完整掌握这批变更的用法、背后的数据流实现变量如何从面板经链接与安装命令到达渲染管线以及重装保留编辑的 CLI 行为。版本概览一次 Catalog 工作流的整体升级v0.7.106 的变更清单横跨 Studio、Catalog、CLI、Registry 与文档五个部分核心脉络非常清晰让 Catalog 从看视频变成用起来。发布说明开篇即点明三件事Catalog 页面在播放器中运行真实的合成composition而不是一段录制好的预览视频侧边栏将358 个条目按你来做什么组织成8 个可展开的分组每个声明了变量的条目都配有可编辑面板修改值后预览立即用新值重建分享链接携带这些值复制出来的安装命令也会把变量值一并带上。这三点叠加的效果是从浏览、试调到安装整条链路不再有预览归预览、安装归安装的割裂感。下文逐项拆解并给出仓库内对应的实现证据。Catalog 页面播放真实合成不再是录制视频变更内容此前 Catalog 详情页的预览是一段预先渲染好的录制视频v0.7.106 通过 Play the real composition on catalog pagesPR #3168将其替换为真实运行中的合成——你在预览里看到的就是会被渲染引擎逐帧执行的同一份 HTML。这一点在文档侧有直接呼应目录总览页 docs/catalog/index.mdx 使用hyperframes-player元素通过srcdoc加载条目的真实 HTML 载荷来播放script typemodule const item await fetch(/public/catalog/blocks/ai-chat-reveal.json).then((response) response.json(), ); const player document.createElement(hyperframes-player); player.setAttribute(srcdoc, item.html); player.setAttribute(controls, ); player.setAttribute(autoplay, ); player.setAttribute(muted, ); player.setAttribute(loop, ); document.body.appendChild(player); /script而目录总览的轮播组件 docs/snippets/catalog-overview-player.jsx 更进一步它内置了一个包含 11 个分区Code Animations、Captions、HTML-in-Canvas、Social Overlays、Lower Thirds、Shader Transitions、CSS Transitions、Showcases、Data、Effects、Blocks的场景清单每 2.5 秒自动切换一个分区fetch对应条目的 JSON 载荷后用hyperframes-player的srcdoc属性加载并 seek 到指定媒体时间点从而实现一条视频式导览async function show(index) { var token request; var scene scenes[index]; try { var html await compositionFor(scene); if (token ! request) return; var player document.createElement(hyperframes-player); player.setAttribute(srcdoc, html); player.setAttribute(controls, ); player.setAttribute(muted, ); player.addEventListener(ready, function () { player.seek(scene.mediaStart || 0); if (!reduced) player.play(); }, { once: true }); // ... } }注意组件还处理了prefers-reduced-motionreduced标志系统开启减少动态效果时自动停止轮播与自动播放这对视频预览页面是必要的可访问性细节。例外canvas drawElement 预览仍保留录制视频同一批变更中有一条看似矛盾的条目——Keep the recorded video for canvas drawElement previewsPR #3171。原因在于使用 canvasdrawElement的条目其真实渲染依赖特定的图形环境与时机实时回放无法稳定还原因此这类预览保留录制视频。这说明真实合成预览是逐条目权衡的结果而非一刀切——无法被播放器忠实回放的合成退回录像是为了保证预览始终可见。从catalog-overview-player.jsx中也能看到同样的双轨设计HTML-in-Canvas分区就走的是video字段videoComposition包装一段video而非catalog载荷。侧边栏按创作意图分组8 个分区收纳 358 个条目变更内容Group the sidebar by what you came to makePR #3194重新组织了 Catalog 侧边栏的导航逻辑。分组维度从技术类型改为**你来做这件事**what you came to make358 个条目被归入 8 个可折叠的 section且目录总览页明确给出了这两大类入口Blocks块较大的完整场景或自包含视觉例如 App ShowcaseComponents组件嵌入已有场景的小型效果或行为例如caption-kinetic-slam。这与你打开条目后的实际体验一致动效预览在上、下方是Install安装→ 把自然语言请求丢给 Agent → 替换示例内容 → 在完整视频里复查的流程见 Use an item 一节。从生成管线看Catalog 页面由 scripts/generate-catalog-pages.ts 程序化生成。该脚本会解析已生成页面中手写的## sections见脚本中 Pull the hand-written## sectionsout of an already-generated page 的CarriedContent逻辑保证人类手写章节 机器生成章节能共存并保持顺序侧边栏分组正是这套结构化输出的一部分。分组数据源则是 docs/public/catalog-index.json——一份包含每个条目name、typeblock/component、title、description、tags、href与preview的索引清单358 个条目的侧边栏即由它驱动。变量面板回归改值、分享、安装一条龙变更内容Put the variables panel back, on payloadsPR #3199是本次更新的重头戏。发布说明描述了完整闭环每个声明了变量的条目页面都会渲染一个可编辑的变量面板你在面板里改值预览会用新值重建rebuilds with your values分享链接会保留这些值a link keeps them安装命令会携带这些值the install command copies with them attached。这条链路在源码里有非常完整的实现证据值得深入拆解。变量在载荷里如何声明先看数据侧。Catalog 条目的 JSON 载荷如 docs/public/catalog/blocks/ai-chat-reveal.json把变量声明写在 HTML 根元素的data-composition-variables属性上ai-chat-reveal 这个 block 一共声明了 15 个变量例如{ id: botName, type: string, role: content, label: Assistant name, description: Title in the chat header., default: Assistant }, { id: ecHeadline, type: string, role: content, label: End-card headline, description: Closing card headline. A | breaks the line., default: Its not magic.|Its HTML. }每个变量携带id、type、rolecontent/style/timing/motion/layout 之一、面向人的label/description以及default。这与你写自定义合成时在data-composition-variables里的声明方式完全一致完整字段契约可查 docs/concepts/variables.mdx 与 docs/reference/html-schema.mdx。变量类型支持string、number、color、boolean、enum、font、image七种类型决定面板渲染哪种控件、也决定渲染阶段能否拦截非法值。面板如何让预览用新值重建hfv 查询串与单层 iframe 重载变量面板组件在 docs/snippets/variables-explorer.jsx。它的注释把这个机制讲得很清楚A composition reads its variables once, at init, before any of this exists. So there is no apply path into a live one — the value has to be present before the composition boots.合成只在初始化时读取一次变量不存在运行中注入的通道。因此面板不能直接给运行中的合成发消息而是通过 scripts/generate-catalog-pages.ts 生成的预览包装器把值写进查询串然后只重载内层合成 iframe页面、包装器与面板本身从不闪动并把播放头playhead一起带过去variableBootstrap(ownFile)生成一段内联脚本读取location.search里的hfv参数用URLSearchParams.get解码解析为 JSON 存入window.__hfVariables再把它写到指向本文件的data-composition-src宿主元素的data-variable-values属性上——这保证值在任何运行时脚本之前就已就位variablePreviewWrapper(src)生成包装器监听postMessageevent.data.hfVariables收到新值后player.setAttribute(src, BASE ?hfv values)触发单层iframe 重载并用arm(resumeAt)轮询把播放头 seek 回原位置继续播放。关于为什么用查询串而不是消息通道源码注释给出了严谨的理由Values travel in the query string rather than a message into the composition because they have to be readable before its first script runs.值必须在合成第一个脚本运行前就可读。且每一跳都用encodeURIComponent编码、URLSearchParams.get解码规避了 form 编码下空格与%20的歧义。面板侧还有一个重要的工程细节——防抖注释明确指出 the post is debounced. A dragged range input fires an event per pixel, and an unthrottled reload per pixel is a reload storm that never settles.拖拽 range 控件每个像素触发一次事件不节流就是一场永不停止的重载风暴。所以控件本身实时跟手但 postMessage 重载被防抖合并install-command.jsx与面板通过 URL query string 这一共享状态通信面板更新 URL 时广播hf-vars-changed事件、popstate覆盖后退按钮场景。链接如何保留值URL 即共享状态链接保留值的实现同样藏在 docs/snippets/install-command.jsx 的注释里面板与安装命令是 MDX 里两个没有父组件关系的独立组件The URL is the shared state rather than a prop。面板把当前值序列化进 URL参数形如?vars-itemJSON分享出去后任何人打开这个链接面板与安装命令都能从 query string 恢复同一组值——不需要任何后端状态。安装命令如何携带变量--vars安装命令组件 docs/snippets/install-command.jsx 挂载后读取URLSearchParams(window.location.search).get(vars- item)解析出变量对象后在标准安装命令后面追加--vars参数const parsed JSON.parse(raw); // ...校验必须是对象且非空 setTuned( --vars ${JSON.stringify(parsed)});于是页面上展示的安装命令从npx hyperframes add app-showcase变成携带了你调好变量的版本npx hyperframes add app-showcase --vars {botName:Claude,ecCta:Get Started}这与你直接用 CLI 渲染带变量的合成是同一套语法——docs/concepts/variables.mdx 中的渲染示例npx hyperframes render \ --variables {title:Enterprise,accent:#22c55e} \ --strict-variables \ --output enterprise.mp4--strict-variables会把未声明或类型错误的渲染值从警告升级为错误npx hyperframes lint则能提前拦截声明缺失、默认值类型错误与非法 enum 选项。批量场景可配合--batch rows.json每行一个变量对象与--output renders/{name}.mp4占位符逐行渲染--batch-concurrency默认单行并发需在单个真实渲染稳定且内存充足时才应调高。CLI 重装保留编辑不再覆盖你的修改变更内容Keep your edits when you reinstall a catalog itemPR #3193修复了此前的一个破坏性行为重复安装reinstall同一 Catalog 条目会覆盖你之前的编辑。v0.7.106 之后若目标文件已被你修改过重新执行npx hyperframes add item会保留你的改动而不是无提示地写回原始模板。这对真实工作流的价值很大Catalog 条目的设计哲学是安装后归你所有install and own你会替换示例文案、调整配色、增删段落——这些手工成果不应因为一次重装而蒸发。与安装命令携带变量配合起来完整的推荐流程是先在 Catalog 页面用变量面板调好值 → 复制带--vars的安装命令 → 安装后基于初始变量值继续编辑且后续重装安全。其他 Catalog 与 Registry 变更v0.7.106 的 Catalog 小节还包含几条值得注意的细节变更Registry 带回 video-primitive 动效Bring back the video-primitive movesPR #3169一批 video-primitive 类组件例如 catalog-index.json 中arc-motion-path这类携带video-primitive标签的 GSAP 运动原语重新进入 Registry。这类组件通常依赖 packages/player 播放器的原生能力因此也解释了为何播放器在 Catalog 预览中的地位持续提升。脚本按名称解析资源Resolve assets a script loads by namePR #3170合成脚本运行时按名称加载的资源现在能被正确解析解决了此前脚本引用资源路径解析失败导致预览与渲染不一致的问题。Media Use 成本分层从 Registry 派生Derive provider cost tier from the registryPR #3155Media Use 相关流程不再硬编码服务商成本档位而是从 Registry 数据派生避免文档与实现两处维护导致漂移。Registry 条目的结构契约定义在 docs/schema/registry-item.json每个条目必须声明namekebab-case、typehyperframes:example/hyperframes:block/hyperframes:component三选一、title、description与filesblock 与 example 强制要求dimensions和duration而 component 明确禁止携带这两项schema 中的allOf条件约束files[].target被显式禁止包含..或绝对路径保证安装不会逃逸出项目根目录。这为上面重装保留编辑和按名称解析资源提供了数据层的保障。Studio 修复与文档更新修复读取 rotate 属性测量元素角度Read the rotate property when measuring an elements anglePR #3163此前 Studio 测量元素角度时遗漏了rotate属性导致含旋转的布局在时间线/画布上的角度测量不准本版修复。文档周报 2026-08-03 至 08-10PR #3154docs/changelog.mdx 维护的每周摘要同步更新。文档写清楚 Studio 不会告诉你的事PR #3165新增/扩充了 Studio 的使用边界说明帮助用户理解 Studio 哪些信息不显示、需要从源码侧确认——这与本版Catalog 展示真实合成的思路一致文档与实现对齐减少黑盒。内部重新生成 skills manifestPR #3203并格式化 packages/studio/AGENTS.mdPR #3167均为工程维护性变更。从 v0.7.106 看 Catalog 的演进方向把 v0.7.106 的变更放在一起看可以提炼出 Catalog 工作的三条主线均为可从源码确认的工程判断而非承诺预览即真身能实时播放的合成一律播放真实合成PR #3168播放器无法忠实的场景canvas drawElement才退回录像PR #3171。预览与最终渲染之间的所见非所得缝隙被系统性收窄。值在源头生效变量面板、分享链接、安装命令共用 URL query string 作为共享状态hfv、vars-item配合variableBootstrap的值先于脚本就位设计scripts/generate-catalog-pages.ts保证变量从浏览到渲染全程一致。安装可重复、可保留--vars让首次安装就带参数重装保留编辑PR #3193让后续迭代不丢工作——安装行为从一次性拉取变成可持续演进的本地资产。如果你需要在自己的合成里复刻这套变量体验仓库已经给出了完整范本用data-composition-variables声明变量 → 用data-var-text/data-var-src/ CSS 自定义属性var(--accent)做直接绑定 → 复杂逻辑再用window.__hyperframes.getVariables()编程读取嵌套合成用data-variable-values给同一份源码的不同实例传不同值详见 docs/concepts/variables.mdx 的 Give each nested composition different values 一节。最后的防线是npx hyperframes lint--strict-variables把变量契约问题挡在渲染之前。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考