[{"data":1,"prerenderedAt":1674},["ShallowReactive",2],{"navigation":3,"\u002Freference\u002Fstudio-manual-dom-editing":686,"\u002Freference\u002Fstudio-manual-dom-editing-surround":1669},[4,31,57,147,168,198,652],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":30},"快速入门","i-lucide-rocket","\u002Fgetting-started","01.getting-started",[10,14,18,22,26],{"title":11,"path":12,"stem":13},"简介","\u002Fgetting-started\u002Fintroduction","01.getting-started\u002F01.introduction",{"title":15,"path":16,"stem":17},"快速开始","\u002Fgetting-started\u002Fquickstart","01.getting-started\u002F02.quickstart",{"title":19,"path":20,"stem":21},"展示作品","\u002Fgetting-started\u002Fshowcase","01.getting-started\u002F03.showcase",{"title":23,"path":24,"stem":25},"示例","\u002Fgetting-started\u002Fexamples","01.getting-started\u002F04.examples",{"title":27,"path":28,"stem":29},"发布视频","\u002Fgetting-started\u002Flaunch-videos","01.getting-started\u002F05.launch-videos",false,{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":30},"核心概念","i-lucide-lightbulb","\u002Fconcepts","02.concepts",[37,41,45,49,53],{"title":38,"path":39,"stem":40},"合成","\u002Fconcepts\u002Fcompositions","02.concepts\u002F01.compositions",{"title":42,"path":43,"stem":44},"数据属性","\u002Fconcepts\u002Fdata-attributes","02.concepts\u002F02.data-attributes",{"title":46,"path":47,"stem":48},"变量","\u002Fconcepts\u002Fvariables","02.concepts\u002F03.variables",{"title":50,"path":51,"stem":52},"帧适配器","\u002Fconcepts\u002Fframe-adapters","02.concepts\u002F04.frame-adapters",{"title":54,"path":55,"stem":56},"确定性渲染","\u002Fconcepts\u002Fdeterminism","02.concepts\u002F05.determinism",{"title":58,"icon":59,"path":60,"stem":61,"children":62,"page":30},"使用指南","i-lucide-compass","\u002Fguides","03.guides",[63,67,71,75,79,83,87,91,95,99,103,107,111,115,119,123,127,131,135,139,143],{"title":64,"path":65,"stem":66},"工作流水线","\u002Fguides\u002Fpipeline","03.guides\u002F01.pipeline",{"title":68,"path":69,"stem":70},"HTML-in-Canvas","\u002Fguides\u002Fhtml-in-canvas","03.guides\u002F02.html-in-canvas",{"title":72,"path":73,"stem":74},"网站转视频","\u002Fguides\u002Fwebsite-to-video","03.guides\u002F03.website-to-video",{"title":76,"path":77,"stem":78},"Google Antigravity","\u002Fguides\u002Fantigravity","03.guides\u002F04.antigravity",{"title":80,"path":81,"stem":82},"GitHub Copilot CLI","\u002Fguides\u002Fcopilot-cli","03.guides\u002F05.copilot-cli",{"title":84,"path":85,"stem":86},"Claude Design","\u002Fguides\u002Fclaude-design","03.guides\u002F06.claude-design",{"title":88,"path":89,"stem":90},"Open Design","\u002Fguides\u002Fopen-design","03.guides\u002F07.open-design",{"title":92,"path":93,"stem":94},"提示词指南","\u002Fguides\u002Fprompting","03.guides\u002F08.prompting",{"title":96,"path":97,"stem":98},"Hyperframes vs Remotion","\u002Fguides\u002Fhyperframes-vs-remotion","03.guides\u002F09.hyperframes-vs-remotion",{"title":100,"path":101,"stem":102},"GSAP 动画","\u002Fguides\u002Fgsap-animation","03.guides\u002F10.gsap-animation",{"title":104,"path":105,"stem":106},"渲染","\u002Fguides\u002Frendering","03.guides\u002F11.rendering",{"title":108,"path":109,"stem":110},"去除背景（透明视频）","\u002Fguides\u002Fremove-background","03.guides\u002F12.remove-background",{"title":112,"path":113,"stem":114},"HDR 渲染","\u002Fguides\u002Fhdr","03.guides\u002F13.hdr",{"title":116,"path":117,"stem":118},"4K 渲染","\u002Fguides\u002F4k-rendering","03.guides\u002F14.4k-rendering",{"title":120,"path":121,"stem":122},"性能","\u002Fguides\u002Fperformance","03.guides\u002F15.performance",{"title":124,"path":125,"stem":126},"时间轴编辑","\u002Fguides\u002Ftimeline-editing","03.guides\u002F16.timeline-editing",{"title":128,"path":129,"stem":130},"视频编辑者速查表","\u002Fguides\u002Fvideo-editor-cheatsheet","03.guides\u002F17.video-editor-cheatsheet",{"title":132,"path":133,"stem":134},"常见错误","\u002Fguides\u002Fcommon-mistakes","03.guides\u002F18.common-mistakes",{"title":136,"path":137,"stem":138},"故障排除","\u002Fguides\u002Ftroubleshooting","03.guides\u002F19.troubleshooting",{"title":140,"path":141,"stem":142},"反馈收集","\u002Fguides\u002Ffeedback","03.guides\u002F20.feedback",{"title":144,"path":145,"stem":146},"HyperFrames MCP","\u002Fguides\u002Fmcp","03.guides\u002F21.mcp",{"title":148,"icon":149,"path":150,"stem":151,"children":152,"page":30},"部署","i-lucide-cloud","\u002Fdeploy","04.deploy",[153,156,160,164],{"title":148,"path":154,"stem":155},"\u002Fdeploy\u002Fdeploy","04.deploy\u002F01.deploy",{"title":157,"path":158,"stem":159},"AWS Lambda","\u002Fdeploy\u002Faws-lambda","04.deploy\u002F02.aws-lambda",{"title":161,"path":162,"stem":163},"Lambda 上的模板","\u002Fdeploy\u002Ftemplates-on-lambda","04.deploy\u002F03.templates-on-lambda",{"title":165,"path":166,"stem":167},"迁移到 HyperFrames Lambda","\u002Fdeploy\u002Fmigrating-to-hyperframes-lambda","04.deploy\u002F04.migrating-to-hyperframes-lambda",{"title":169,"icon":170,"path":171,"stem":172,"children":173,"page":30},"包","i-lucide-package","\u002Fpackages","05.packages",[174,178,182,186,190,194],{"title":175,"path":176,"stem":177},"@hyperframes\u002Fcore","\u002Fpackages\u002Fcore","05.packages\u002F01.core",{"title":179,"path":180,"stem":181},"@hyperframes\u002Fengine","\u002Fpackages\u002Fengine","05.packages\u002F02.engine",{"title":183,"path":184,"stem":185},"@hyperframes\u002Fplayer","\u002Fpackages\u002Fplayer","05.packages\u002F03.player",{"title":187,"path":188,"stem":189},"@hyperframes\u002Fproducer","\u002Fpackages\u002Fproducer","05.packages\u002F04.producer",{"title":191,"path":192,"stem":193},"@hyperframes\u002Fstudio","\u002Fpackages\u002Fstudio","05.packages\u002F05.studio",{"title":195,"path":196,"stem":197},"CLI","\u002Fpackages\u002Fcli","05.packages\u002F06.cli",{"title":199,"icon":200,"path":201,"stem":202,"children":203,"page":30},"组件目录","i-lucide-layout-grid","\u002Fcatalog","06.catalog",[204,270,324,358,420,478,512,546,584,598],{"title":205,"icon":206,"path":207,"stem":208,"children":209,"page":30},"字幕","i-lucide-captions","\u002Fcatalog\u002Fcaption","06.catalog\u002F01.caption",[210,214,218,222,226,230,234,238,242,246,250,254,258,262,266],{"title":211,"path":212,"stem":213},"裁剪擦除","\u002Fcatalog\u002Fcaption\u002Fcaption-clip-wipe","06.catalog\u002F01.caption\u002F01.caption-clip-wipe",{"title":215,"path":216,"stem":217},"编辑强调","\u002Fcatalog\u002Fcaption\u002Fcaption-editorial-emphasis","06.catalog\u002F01.caption\u002F02.caption-editorial-emphasis",{"title":219,"path":220,"stem":221},"Emoji 弹出","\u002Fcatalog\u002Fcaption\u002Fcaption-emoji-pop","06.catalog\u002F01.caption\u002F03.caption-emoji-pop",{"title":223,"path":224,"stem":225},"故障 RGB","\u002Fcatalog\u002Fcaption\u002Fcaption-glitch-rgb","06.catalog\u002F01.caption\u002F04.caption-glitch-rgb",{"title":227,"path":228,"stem":229},"渐变填充","\u002Fcatalog\u002Fcaption\u002Fcaption-gradient-fill","06.catalog\u002F01.caption\u002F05.caption-gradient-fill",{"title":231,"path":232,"stem":233},"高亮","\u002Fcatalog\u002Fcaption\u002Fcaption-highlight","06.catalog\u002F01.caption\u002F06.caption-highlight",{"title":235,"path":236,"stem":237},"动感冲击","\u002Fcatalog\u002Fcaption\u002Fcaption-kinetic-slam","06.catalog\u002F01.caption\u002F07.caption-kinetic-slam",{"title":239,"path":240,"stem":241},"矩阵解码","\u002Fcatalog\u002Fcaption\u002Fcaption-matrix-decode","06.catalog\u002F01.caption\u002F08.caption-matrix-decode",{"title":243,"path":244,"stem":245},"霓虹强调","\u002Fcatalog\u002Fcaption\u002Fcaption-neon-accent","06.catalog\u002F01.caption\u002F09.caption-neon-accent",{"title":247,"path":248,"stem":249},"霓虹发光","\u002Fcatalog\u002Fcaption\u002Fcaption-neon-glow","06.catalog\u002F01.caption\u002F10.caption-neon-glow",{"title":251,"path":252,"stem":253},"视差图层","\u002Fcatalog\u002Fcaption\u002Fcaption-parallax-layers","06.catalog\u002F01.caption\u002F11.caption-parallax-layers",{"title":255,"path":256,"stem":257},"粒子爆发","\u002Fcatalog\u002Fcaption\u002Fcaption-particle-burst","06.catalog\u002F01.caption\u002F12.caption-particle-burst",{"title":259,"path":260,"stem":261},"胶囊卡拉OK","\u002Fcatalog\u002Fcaption\u002Fcaption-pill-karaoke","06.catalog\u002F01.caption\u002F13.caption-pill-karaoke",{"title":263,"path":264,"stem":265},"纹理","\u002Fcatalog\u002Fcaption\u002Fcaption-texture","06.catalog\u002F01.caption\u002F14.caption-texture",{"title":267,"path":268,"stem":269},"字重切换","\u002Fcatalog\u002Fcaption\u002Fcaption-weight-shift","06.catalog\u002F01.caption\u002F15.caption-weight-shift",{"title":271,"icon":272,"path":273,"stem":274,"children":275,"page":30},"HTML 画布","i-lucide-layout-dashboard","\u002Fcatalog\u002Fhtml-canvas","06.catalog\u002F02.html-canvas",[276,280,284,288,292,296,300,304,308,312,316,320],{"title":277,"path":278,"stem":279},"iOS 26 Liquid Glass 主屏幕","\u002Fcatalog\u002Fhtml-canvas\u002Fios26-liquid-glass","06.catalog\u002F02.html-canvas\u002F01.ios26-liquid-glass",{"title":281,"path":282,"stem":283},"Liquid Glass 右键菜单","\u002Fcatalog\u002Fhtml-canvas\u002Fliquid-glass-context-menu","06.catalog\u002F02.html-canvas\u002F02.liquid-glass-context-menu",{"title":285,"path":286,"stem":287},"Liquid Glass 媒体控制","\u002Fcatalog\u002Fhtml-canvas\u002Fliquid-glass-media-controls","06.catalog\u002F02.html-canvas\u002F03.liquid-glass-media-controls",{"title":289,"path":290,"stem":291},"Liquid Glass 通知","\u002Fcatalog\u002Fhtml-canvas\u002Fliquid-glass-notification","06.catalog\u002F02.html-canvas\u002F04.liquid-glass-notification",{"title":293,"path":294,"stem":295},"Liquid Glass 小组件","\u002Fcatalog\u002Fhtml-canvas\u002Fliquid-glass-widgets","06.catalog\u002F02.html-canvas\u002F05.liquid-glass-widgets",{"title":297,"path":298,"stem":299},"macOS Tahoe Liquid Glass 桌面","\u002Fcatalog\u002Fhtml-canvas\u002Fmacos-tahoe-liquid-glass","06.catalog\u002F02.html-canvas\u002F06.macos-tahoe-liquid-glass",{"title":301,"path":302,"stem":303},"iPhone & MacBook 3D 展示","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-iphone-device","06.catalog\u002F02.html-canvas\u002F07.vfx-iphone-device",{"title":305,"path":306,"stem":307},"液态背景","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-liquid-background","06.catalog\u002F02.html-canvas\u002F08.vfx-liquid-background",{"title":309,"path":310,"stem":311},"磁力效果","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-magnetic","06.catalog\u002F02.html-canvas\u002F09.vfx-magnetic",{"title":313,"path":314,"stem":315},"传送门","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-portal","06.catalog\u002F02.html-canvas\u002F10.vfx-portal",{"title":317,"path":318,"stem":319},"碎裂效果","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-shatter","06.catalog\u002F02.html-canvas\u002F11.vfx-shatter",{"title":321,"path":322,"stem":323},"VFX 文字光标","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-text-cursor","06.catalog\u002F02.html-canvas\u002F12.vfx-text-cursor",{"title":325,"icon":326,"path":327,"stem":328,"children":329,"page":30},"社交叠加层","i-lucide-share-2","\u002Fcatalog\u002Fsocial-overlays","06.catalog\u002F03.social-overlays",[330,334,338,342,346,350,354],{"title":331,"path":332,"stem":333},"Instagram 关注","\u002Fcatalog\u002Fsocial-overlays\u002Finstagram-follow","06.catalog\u002F03.social-overlays\u002F01.instagram-follow",{"title":335,"path":336,"stem":337},"macOS 通知","\u002Fcatalog\u002Fsocial-overlays\u002Fmacos-notification","06.catalog\u002F03.social-overlays\u002F02.macos-notification",{"title":339,"path":340,"stem":341},"Reddit 帖子卡片","\u002Fcatalog\u002Fsocial-overlays\u002Freddit-post","06.catalog\u002F03.social-overlays\u002F03.reddit-post",{"title":343,"path":344,"stem":345},"Spotify 正在播放","\u002Fcatalog\u002Fsocial-overlays\u002Fspotify-card","06.catalog\u002F03.social-overlays\u002F04.spotify-card",{"title":347,"path":348,"stem":349},"TikTok 关注","\u002Fcatalog\u002Fsocial-overlays\u002Ftiktok-follow","06.catalog\u002F03.social-overlays\u002F05.tiktok-follow",{"title":351,"path":352,"stem":353},"X 帖子卡片","\u002Fcatalog\u002Fsocial-overlays\u002Fx-post","06.catalog\u002F03.social-overlays\u002F06.x-post",{"title":355,"path":356,"stem":357},"YouTube 下方三分之一","\u002Fcatalog\u002Fsocial-overlays\u002Fyt-lower-third","06.catalog\u002F03.social-overlays\u002F07.yt-lower-third",{"title":359,"icon":360,"path":361,"stem":362,"children":363,"page":30},"着色器过渡","i-lucide-wand-2","\u002Fcatalog\u002Fshader-transitions","06.catalog\u002F04.shader-transitions",[364,368,372,376,380,384,388,392,396,400,404,408,412,416],{"title":365,"path":366,"stem":367},"色散径向分裂","\u002Fcatalog\u002Fshader-transitions\u002Fchromatic-radial-split","06.catalog\u002F04.shader-transitions\u002F01.chromatic-radial-split",{"title":369,"path":370,"stem":371},"电影感变焦","\u002Fcatalog\u002Fshader-transitions\u002Fcinematic-zoom","06.catalog\u002F04.shader-transitions\u002F02.cinematic-zoom",{"title":373,"path":374,"stem":375},"交叉扭曲变形","\u002Fcatalog\u002Fshader-transitions\u002Fcross-warp-morph","06.catalog\u002F04.shader-transitions\u002F03.cross-warp-morph",{"title":377,"path":378,"stem":379},"域扭曲溶解","\u002Fcatalog\u002Fshader-transitions\u002Fdomain-warp-dissolve","06.catalog\u002F04.shader-transitions\u002F04.domain-warp-dissolve",{"title":381,"path":382,"stem":383},"白色闪光过渡","\u002Fcatalog\u002Fshader-transitions\u002Fflash-through-white","06.catalog\u002F04.shader-transitions\u002F05.flash-through-white",{"title":385,"path":386,"stem":387},"故障效果","\u002Fcatalog\u002Fshader-transitions\u002Fglitch","06.catalog\u002F04.shader-transitions\u002F06.glitch",{"title":389,"path":390,"stem":391},"引力透镜","\u002Fcatalog\u002Fshader-transitions\u002Fgravitational-lens","06.catalog\u002F04.shader-transitions\u002F07.gravitational-lens",{"title":393,"path":394,"stem":395},"光线泄漏","\u002Fcatalog\u002Fshader-transitions\u002Flight-leak","06.catalog\u002F04.shader-transitions\u002F08.light-leak",{"title":397,"path":398,"stem":399},"褶皱燃烧","\u002Fcatalog\u002Fshader-transitions\u002Fridged-burn","06.catalog\u002F04.shader-transitions\u002F09.ridged-burn",{"title":401,"path":402,"stem":403},"涟漪波纹","\u002Fcatalog\u002Fshader-transitions\u002Fripple-waves","06.catalog\u002F04.shader-transitions\u002F10.ripple-waves",{"title":405,"path":406,"stem":407},"SDF 光圈","\u002Fcatalog\u002Fshader-transitions\u002Fsdf-iris","06.catalog\u002F04.shader-transitions\u002F11.sdf-iris",{"title":409,"path":410,"stem":411},"漩涡涡流","\u002Fcatalog\u002Fshader-transitions\u002Fswirl-vortex","06.catalog\u002F04.shader-transitions\u002F12.swirl-vortex",{"title":413,"path":414,"stem":415},"热浪扭曲","\u002Fcatalog\u002Fshader-transitions\u002Fthermal-distortion","06.catalog\u002F04.shader-transitions\u002F13.thermal-distortion",{"title":417,"path":418,"stem":419},"快速摇摄","\u002Fcatalog\u002Fshader-transitions\u002Fwhip-pan","06.catalog\u002F04.shader-transitions\u002F14.whip-pan",{"title":421,"icon":422,"path":423,"stem":424,"children":425,"page":30},"CSS 过渡","i-lucide-repeat","\u002Fcatalog\u002Fcss-transitions","06.catalog\u002F05.css-transitions",[426,430,434,438,442,446,450,454,458,462,466,470,474],{"title":427,"path":428,"stem":429},"3D 过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-3d","06.catalog\u002F05.css-transitions\u002F01.transitions-3d",{"title":431,"path":432,"stem":433},"模糊过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-blur","06.catalog\u002F05.css-transitions\u002F02.transitions-blur",{"title":435,"path":436,"stem":437},"覆盖过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-cover","06.catalog\u002F05.css-transitions\u002F03.transitions-cover",{"title":439,"path":440,"stem":441},"破碎过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-destruction","06.catalog\u002F05.css-transitions\u002F04.transitions-destruction",{"title":443,"path":444,"stem":445},"溶解过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-dissolve","06.catalog\u002F05.css-transitions\u002F05.transitions-dissolve",{"title":447,"path":448,"stem":449},"扭曲过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-distortion","06.catalog\u002F05.css-transitions\u002F06.transitions-distortion",{"title":451,"path":452,"stem":453},"网格过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-grid","06.catalog\u002F05.css-transitions\u002F07.transitions-grid",{"title":455,"path":456,"stem":457},"光效过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-light","06.catalog\u002F05.css-transitions\u002F08.transitions-light",{"title":459,"path":460,"stem":461},"机械过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-mechanical","06.catalog\u002F05.css-transitions\u002F09.transitions-mechanical",{"title":463,"path":464,"stem":465},"其他过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-other","06.catalog\u002F05.css-transitions\u002F10.transitions-other",{"title":467,"path":468,"stem":469},"推移过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-push","06.catalog\u002F05.css-transitions\u002F11.transitions-push",{"title":471,"path":472,"stem":473},"径向过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-radial","06.catalog\u002F05.css-transitions\u002F12.transitions-radial",{"title":475,"path":476,"stem":477},"缩放过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-scale","06.catalog\u002F05.css-transitions\u002F13.transitions-scale",{"title":479,"icon":480,"path":481,"stem":482,"children":483,"page":30},"展示","i-lucide-monitor-play","\u002Fcatalog\u002Fshowcase","06.catalog\u002F06.showcase",[484,488,492,496,500,504,508],{"title":485,"path":486,"stem":487},"应用展示","\u002Fcatalog\u002Fshowcase\u002Fapp-showcase","06.catalog\u002F06.showcase\u002F01.app-showcase",{"title":489,"path":490,"stem":491},"Apple 金额计数器","\u002Fcatalog\u002Fshowcase\u002Fapple-money-count","06.catalog\u002F06.showcase\u002F02.apple-money-count",{"title":493,"path":494,"stem":495},"蓝色毛衣开场视频","\u002Fcatalog\u002Fshowcase\u002Fblue-sweater-intro-video","06.catalog\u002F06.showcase\u002F03.blue-sweater-intro-video",{"title":497,"path":498,"stem":499},"朝鲜封锁","\u002Fcatalog\u002Fshowcase\u002Fnorth-korea-locked-down","06.catalog\u002F06.showcase\u002F04.north-korea-locked-down",{"title":501,"path":502,"stem":503},"纽约巴黎航班","\u002Fcatalog\u002Fshowcase\u002Fnyc-paris-flight","06.catalog\u002F06.showcase\u002F05.nyc-paris-flight",{"title":505,"path":506,"stem":507},"3D UI 展示","\u002Fcatalog\u002Fshowcase\u002Fui-3d-reveal","06.catalog\u002F06.showcase\u002F06.ui-3d-reveal",{"title":509,"path":510,"stem":511},"VPN YouTube 广告片段","\u002Fcatalog\u002Fshowcase\u002Fvpn-youtube-spot","06.catalog\u002F06.showcase\u002F07.vpn-youtube-spot",{"title":513,"icon":514,"path":515,"stem":516,"children":517,"page":30},"数据","i-lucide-bar-chart-3","\u002Fcatalog\u002Fdata","06.catalog\u002F07.data",[518,522,526,530,534,538,542],{"title":519,"path":520,"stem":521},"数据图表","\u002Fcatalog\u002Fdata\u002Fdata-chart","06.catalog\u002F07.data\u002F01.data-chart",{"title":523,"path":524,"stem":525},"西班牙地图","\u002Fcatalog\u002Fdata\u002Fspain-map","06.catalog\u002F07.data\u002F02.spain-map",{"title":527,"path":528,"stem":529},"美国地图","\u002Fcatalog\u002Fdata\u002Fus-map","06.catalog\u002F07.data\u002F03.us-map",{"title":531,"path":532,"stem":533},"美国气泡地图","\u002Fcatalog\u002Fdata\u002Fus-map-bubble","06.catalog\u002F07.data\u002F04.us-map-bubble",{"title":535,"path":536,"stem":537},"美国流动地图","\u002Fcatalog\u002Fdata\u002Fus-map-flow","06.catalog\u002F07.data\u002F05.us-map-flow",{"title":539,"path":540,"stem":541},"美国六边形网格地图","\u002Fcatalog\u002Fdata\u002Fus-map-hex","06.catalog\u002F07.data\u002F06.us-map-hex",{"title":543,"path":544,"stem":545},"世界地图","\u002Fcatalog\u002Fdata\u002Fworld-map","06.catalog\u002F07.data\u002F07.world-map",{"title":547,"icon":548,"path":549,"stem":550,"children":551,"page":30},"效果","i-lucide-sparkles","\u002Fcatalog\u002Feffects","06.catalog\u002F08.effects",[552,556,560,564,568,572,576,580],{"title":553,"path":554,"stem":555},"差值混合","\u002Fcatalog\u002Feffects\u002Fcaption-blend-difference","06.catalog\u002F08.effects\u002F01.caption-blend-difference",{"title":557,"path":558,"stem":559},"胶片颗粒叠加","\u002Fcatalog\u002Feffects\u002Fgrain-overlay","06.catalog\u002F08.effects\u002F02.grain-overlay",{"title":561,"path":562,"stem":563},"网格像素化擦除","\u002Fcatalog\u002Feffects\u002Fgrid-pixelate-wipe","06.catalog\u002F08.effects\u002F03.grid-pixelate-wipe",{"title":565,"path":566,"stem":567},"视差缩小","\u002Fcatalog\u002Feffects\u002Fparallax-unzoom","06.catalog\u002F08.effects\u002F04.parallax-unzoom",{"title":569,"path":570,"stem":571},"视差放大","\u002Fcatalog\u002Feffects\u002Fparallax-zoom","06.catalog\u002F08.effects\u002F05.parallax-zoom",{"title":573,"path":574,"stem":575},"微光扫过","\u002Fcatalog\u002Feffects\u002Fshimmer-sweep","06.catalog\u002F08.effects\u002F06.shimmer-sweep",{"title":577,"path":578,"stem":579},"纹理遮罩文字","\u002Fcatalog\u002Feffects\u002Ftexture-mask-text","06.catalog\u002F08.effects\u002F07.texture-mask-text",{"title":581,"path":582,"stem":583},"暗角","\u002Fcatalog\u002Feffects\u002Fvignette","06.catalog\u002F08.effects\u002F08.vignette",{"title":585,"icon":586,"path":587,"stem":588,"children":589,"page":30},"区块","i-lucide-box","\u002Fcatalog\u002Fblocks","06.catalog\u002F09.blocks",[590,594],{"title":591,"path":592,"stem":593},"流程图","\u002Fcatalog\u002Fblocks\u002Fflowchart","06.catalog\u002F09.blocks\u002F01.flowchart",{"title":595,"path":596,"stem":597},"Logo 片尾","\u002Fcatalog\u002Fblocks\u002Flogo-outro","06.catalog\u002F09.blocks\u002F02.logo-outro",{"title":599,"icon":600,"path":601,"stem":602,"children":603,"page":30},"代码片段","i-lucide-code-2","\u002Fcatalog\u002Fcode-snippets","06.catalog\u002F10.code-snippets",[604,608,612,616,620,624,628,632,636,640,644,648],{"title":605,"path":606,"stem":607},"Dark 2026","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-dark-2026","06.catalog\u002F10.code-snippets\u002F01.code-snippet-dark-2026",{"title":609,"path":610,"stem":611},"Dark Modern","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-dark-modern","06.catalog\u002F10.code-snippets\u002F02.code-snippet-dark-modern",{"title":613,"path":614,"stem":615},"Dark+","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-dark-plus","06.catalog\u002F10.code-snippets\u002F03.code-snippet-dark-plus",{"title":617,"path":618,"stem":619},"High Contrast","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-high-contrast","06.catalog\u002F10.code-snippets\u002F04.code-snippet-high-contrast",{"title":621,"path":622,"stem":623},"High Contrast Light","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-high-contrast-light","06.catalog\u002F10.code-snippets\u002F05.code-snippet-high-contrast-light",{"title":625,"path":626,"stem":627},"Light 2026","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-light-2026","06.catalog\u002F10.code-snippets\u002F06.code-snippet-light-2026",{"title":629,"path":630,"stem":631},"Light Modern","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-light-modern","06.catalog\u002F10.code-snippets\u002F07.code-snippet-light-modern",{"title":633,"path":634,"stem":635},"Light+","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-light-plus","06.catalog\u002F10.code-snippets\u002F08.code-snippet-light-plus",{"title":637,"path":638,"stem":639},"Monokai","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-monokai","06.catalog\u002F10.code-snippets\u002F09.code-snippet-monokai",{"title":641,"path":642,"stem":643},"Solarized Light","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-solarized-light","06.catalog\u002F10.code-snippets\u002F10.code-snippet-solarized-light",{"title":645,"path":646,"stem":647},"Visual Studio Dark","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-visual-studio-dark","06.catalog\u002F10.code-snippets\u002F11.code-snippet-visual-studio-dark",{"title":649,"path":650,"stem":651},"Visual Studio Light","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-visual-studio-light","06.catalog\u002F10.code-snippets\u002F12.code-snippet-visual-studio-light",{"title":653,"icon":654,"path":655,"stem":656,"children":657,"page":30},"参考","i-lucide-book-marked","\u002Freference","07.reference",[658,662,666,670,674,678,682],{"title":659,"path":660,"stem":661},"HTML Schema 参考","\u002Freference\u002Fhtml-schema","07.reference\u002F01.html-schema",{"title":663,"path":664,"stem":665},"贡献指南","\u002Freference\u002Fcontributing","07.reference\u002F02.contributing",{"title":667,"path":668,"stem":669},"贡献到 Catalog","\u002Freference\u002Fcatalog","07.reference\u002F03.catalog",{"title":671,"path":672,"stem":673},"发布渠道","\u002Freference\u002Frelease-channels","07.reference\u002F04.release-channels",{"title":675,"path":676,"stem":677},"测试本地 CLI 变更","\u002Freference\u002Ftesting-local-changes","07.reference\u002F05.testing-local-changes",{"title":679,"path":680,"stem":681},"Studio 手动 DOM 编辑","\u002Freference\u002Fstudio-manual-dom-editing","07.reference\u002F06.studio-manual-dom-editing",{"title":683,"path":684,"stem":685},"采用者","\u002Freference\u002Fadopters","07.reference\u002F07.adopters",{"id":687,"title":679,"body":688,"description":1662,"extension":1663,"links":1664,"meta":1665,"navigation":1666,"path":680,"seo":1667,"stem":681,"__hash__":1668},"docs\u002F07.reference\u002F06.studio-manual-dom-editing.md",{"type":689,"value":690,"toc":1630},"minimark",[691,695,699,702,749,752,755,759,782,785,788,802,811,827,830,835,942,959,962,973,976,979,995,998,1001,1032,1035,1046,1049,1052,1058,1082,1085,1088,1091,1116,1119,1122,1125,1144,1147,1153,1157,1160,1163,1177,1180,1191,1194,1197,1200,1207,1210,1224,1227,1245,1248,1251,1254,1289,1296,1299,1305,1307,1321,1328,1331,1334,1336,1353,1363,1366,1369,1395,1398,1401,1404,1506,1509,1556,1559,1566,1569,1598,1601,1604,1610,1627],[692,693,694],"p",{},"本页面记录了 HyperFrames Studio 中当前的手动 DOM 编辑功能。它反映的是 Studio 检查器中已上线的实现，而非早期探索第三方 transform 引擎的设计草案。",[696,697,698],"h2",{"id":698},"已上线的功能",[692,700,701],{},"Studio 现在支持在预览中进行直接的 DOM 编辑工作流：",[703,704,705,709,712,715,723,730,733,736,739,742],"ul",{},[706,707,708],"li",{},"在预览中直接选择受支持的元素",[706,710,711],{},"在当前选择周围显示编辑器管理的覆盖层",[706,713,714],{},"当几何信息可安全处理时，在画布上移动和调整受支持元素的大小",[706,716,717,718,722],{},"通过显式的 ",[719,720,721],"code",{},"Make movable"," 操作分离符合条件的布局控制图层",[706,724,725,726,729],{},"从右侧 ",[719,727,728],{},"Design"," 检查器编辑样式属性",[706,731,732],{},"编辑安全的文字承载选择中的文字图层，包括空文字值",[706,734,735],{},"为多文字选择添加和移除子文字图层",[706,737,738],{},"编辑纯色填充、渐变、项目资源图片填充、外部图片填充、不透明度、圆角、flex 元数据、排版和混合模式",[706,740,741],{},"从主视图深入嵌套 composition，而非假装每个内部节点都可以就地编辑",[706,743,744,745,748],{},"从右侧检查器生成元素作用域的 ",[719,746,747],{},"Ask agent"," prompt 包",[692,750,751],{},"重要的保守原则是：Studio 只暴露它能以确定性行为往返写回 HTML 的交互。",[696,753,754],{"id":754},"当前用户体验",[756,757,758],"h3",{"id":758},"预览选择",[703,760,761,764,767,770,776,779],{},[706,762,763],{},"单击选择预览中可补丁的元素。",[706,765,766],{},"选择覆盖层在 Studio chrome 中渲染，不注入到创作内容中。",[706,768,769],{},"覆盖层在以下情况被清除：",[706,771,772,775],{},[719,773,774],{},"Inspector"," 面板关闭时",[706,777,778],{},"用户在预览中点击空白区域时",[706,780,781],{},"源刷新后底层元素消失时",[756,783,784],{"id":784},"覆盖层行为",[692,786,787],{},"覆盖层提供：",[703,789,790,793,796,799],{},[706,791,792],{},"选择边界",[706,794,795],{},"受支持元素的拖拽行为",[706,797,798],{},"当宽度和高度可安全补丁时的调整大小手柄",[706,800,801],{},"不支持移动时的阻止拖拽反馈",[692,803,804,805,807,808,810],{},"覆盖层刻意不包含浮动操作工具栏。",[719,806,747],{}," 位于右侧检查器头部，样式控件在 ",[719,809,728],{}," 面板中。",[692,812,813,814,817,818,822,823,826],{},"当前实现在 ",[719,815,816],{},"DomEditOverlay.tsx"," 中使用 Studio 管理的指针处理。它",[819,820,821],"strong",{},"不","使用 ",[719,824,825],{},"Moveable","。",[756,828,829],{"id":829},"检查器行为",[692,831,832,834],{},[719,833,728],{}," 面板当前包含：",[703,836,837,842,845,848,853,858,861,866,869,874,877,880,885,888,891,894,897,900,903,908,911,914,917,920,925,928,931,934,939],{},[706,838,839],{},[719,840,841],{},"Layout",[706,843,844],{},"X \u002F Y \u002F W \u002F H 字段",[706,846,847],{},"滚轮和方向键数值微调",[706,849,850,852],{},[719,851,721],{}," 用于可以安全分离的块级布局控制图层",[706,854,855],{},[719,856,857],{},"Flex",[706,859,860],{},"direction、justify、align、gap、clip content",[706,862,863],{},[719,864,865],{},"Radius",[706,867,868],{},"滑块 + 实时读数",[706,870,871],{},[719,872,873],{},"Blending",[706,875,876],{},"不透明度滑块 + 实时读数",[706,878,879],{},"混合模式",[706,881,882],{},[719,883,884],{},"Fill",[706,886,887],{},"纯色",[706,889,890],{},"多色标渐变编辑",[706,892,893],{},"项目资源图片填充",[706,895,896],{},"内联图片上传到项目资源列表",[706,898,899],{},"外部图片 URL 填充",[706,901,902],{},"文字颜色",[706,904,905],{},[719,906,907],{},"Color picker",[706,909,910],{},"视口限制的浮动拾色器",[706,912,913],{},"饱和度 \u002F 亮度十字准线",[706,915,916],{},"色相和透明度滑块",[706,918,919],{},"十六进制输入",[706,921,922],{},[719,923,924],{},"Text",[706,926,927],{},"当选择可安全补丁时直接编辑文字图层",[706,929,930],{},"为子文字选择添加 \u002F 移除文字图层",[706,932,933],{},"字体大小、粗细和字族控件",[706,935,936],{},[719,937,938],{},"Selection colors",[706,940,941],{},"当前选择中检测到的颜色摘要",[692,943,944,945,948,949,952,953,955,956,958],{},"检查器刻意与 ",[719,946,947],{},"Renders"," 分离，右侧面板有 ",[719,950,951],{},"Design \u002F Renders"," 标签切换。切换到 ",[719,954,947],{}," 不意味着头部的 ",[719,957,774],{}," 面板被关闭。",[696,960,961],{"id":961},"什么算作可编辑",[692,963,964,965,968,969,972],{},"Studio 为每个选择构建一个 ",[719,966,967],{},"DomEditSelection"," 和 ",[719,970,971],{},"DomEditCapabilities"," 对象。",[756,974,975],{"id":975},"选择要求",[692,977,978],{},"节点只有在可以被标识为稳定的补丁目标时才对 Studio 有用，例如：",[703,980,981,986,989,992],{},[706,982,983],{},[719,984,985],{},"id",[706,987,988],{},"稳定选择器",[706,990,991],{},"限定在正确源文件中的选择器索引",[706,993,994],{},"涉及主视图时的 composition 宿主映射",[756,996,997],{"id":997},"移动支持",[692,999,1000],{},"仅在选中元素满足以下条件时允许移动：",[703,1002,1003,1006,1016,1025],{},[706,1004,1005],{},"有稳定的补丁目标",[706,1007,1008,1009,1012,1013],{},"为 ",[719,1010,1011],{},"absolute"," 或 ",[719,1014,1015],{},"fixed",[706,1017,1018,968,1021,1024],{},[719,1019,1020],{},"left",[719,1022,1023],{},"top"," 值可解析为像素值",[706,1026,1027,1028,1031],{},"不由 transform 驱动（",[719,1029,1030],{},"transform: none","）",[756,1033,1034],{"id":1034},"调整大小支持",[692,1036,1037,1038,1041,1042,1045],{},"仅在移动已被允许且 Studio 可以安全补丁像素 ",[719,1039,1040],{},"width"," 和\u002F或 ",[719,1043,1044],{},"height"," 时允许调整大小。",[756,1047,1048],{"id":1048},"从布局分离支持",[692,1050,1051],{},"某些块级图层可被选择和样式编辑，但由于 flex、grid 或正常文档流控制其位置，无法直接移动。",[692,1053,1054,1055,1057],{},"对于这些图层，Studio 可以暴露 ",[719,1056,721],{}," 而非在拖拽时静默转换。该操作测量相对于 composition 根的当前可视矩形，并写入保守的内联几何信息：",[703,1059,1060,1065,1077],{},[706,1061,1062],{},[719,1063,1064],{},"position: absolute",[706,1066,1067,1069,1070,1069,1072,968,1074,1076],{},[719,1068,1020],{},"、",[719,1071,1023],{},[719,1073,1040],{},[719,1075,1044],{}," 以像素为单位",[706,1078,1079],{},[719,1080,1081],{},"margin: 0",[692,1083,1084],{},"UI 会说明此操作将图层从 flex\u002Fgrid 流中分离并保持当前可视位置。内联文字节点不能直接分离。",[756,1086,1087],{"id":1087},"文字编辑支持",[692,1089,1090],{},"仅在安全的文字承载选择中允许文字编辑：",[703,1092,1093,1107,1110,1113],{},[706,1094,1095,1096,1069,1099,1069,1102,1069,1104,1106],{},"受支持的文字承载标签，如 ",[719,1097,1098],{},"div",[719,1100,1101],{},"span",[719,1103,692],{},[719,1105,819],{}," 和标题",[706,1108,1109],{},"自身文字选择或叶子级子文字图层",[706,1111,1112],{},"用户清除内容后的空文字值",[706,1114,1115],{},"非 composition 宿主",[692,1117,1118],{},"对于多文字选择，Studio 显示文字图层列表。用户可以选择特定文字图层、实时编辑内容、更改大小和粗细和字族、添加同级文字图层或移除活动图层。",[756,1120,1121],{"id":1121},"不支持的示例",[692,1123,1124],{},"Studio 刻意不提供以下场景的直接几何编辑：",[703,1126,1127,1132,1135,1138,1141],{},[706,1128,1129,1130],{},"位置由布局衍生的 flex\u002Fgrid 子元素，除非用户选择 ",[719,1131,721],{},[706,1133,1134],{},"由 transform 驱动的几何信息",[706,1136,1137],{},"用户仍在主视图中时的嵌套 composition 内部",[706,1139,1140],{},"没有稳定补丁目标的节点",[706,1142,1143],{},"内联文字 span 作为几何目标",[692,1145,1146],{},"当几何编辑被阻止但样式编辑仍然安全时，检查器会显示选择以及直接几何编辑不可用的原因。",[692,1148,1149,1150,1152],{},"如果用户尝试拖拽被阻止的图层，Studio 会显示 toast 提示。布局控制的图层会引导用户使用 ",[719,1151,721],{},"；transform 驱动或不安全的目标会解释直接移动\u002F调整大小仅限于绝对或固定像素几何且无 transform 驱动布局。",[696,1154,1156],{"id":1155},"嵌套-composition-规则","嵌套 Composition 规则",[692,1158,1159],{},"嵌套 composition 被显式处理。",[756,1161,1162],{"id":1162},"主视图中",[703,1164,1165,1168,1171,1174],{},[706,1166,1167],{},"点击嵌套 composition 内部的内容会映射回 composition 宿主",[706,1169,1170],{},"受支持的 composition 宿主在其宿主几何信息安全时可以整体移动",[706,1172,1173],{},"Studio 不从主预览暴露直接的内部节点几何编辑",[706,1175,1176],{},"双击深入子 composition",[756,1178,1179],{"id":1179},"深入后",[703,1181,1182,1185,1188],{},[706,1183,1184],{},"Studio 正常解析该 composition 内部的选择",[706,1186,1187],{},"如果选中的内部节点满足能力规则，直接移动\u002F调整大小再次可用",[706,1189,1190],{},"文字、填充、渐变、图片、圆角、不透明度和排版编辑应用于选中的内部节点",[692,1192,1193],{},"这保持了 Studio 对当前编辑上下文能安全补丁的内容的诚实性。",[696,1195,1196],{"id":1196},"源码补丁模型",[692,1198,1199],{},"Studio 仍然以创作的 HTML 作为真实来源。",[692,1201,1202,1203,1206],{},"手动 DOM 编辑流程通过 ",[719,1204,1205],{},"packages\u002Fstudio\u002Fsrc\u002Futils\u002FsourcePatcher.ts"," 中现有的补丁管道来补丁源码。",[692,1208,1209],{},"检查器使用的当前补丁类型包括：",[703,1211,1212,1215,1218,1221],{},[706,1213,1214],{},"内联样式补丁",[706,1216,1217],{},"时间轴链接编辑路径的属性补丁",[706,1219,1220],{},"文字内容补丁",[706,1222,1223],{},"从布局分离的样式补丁",[692,1225,1226],{},"流程为：",[1228,1229,1230,1233,1236,1239,1242],"ol",{},[706,1231,1232],{},"用户在预览中选择或操作一个元素",[706,1234,1235],{},"Studio 解析稳定目标",[706,1237,1238],{},"预览为交互反馈进行乐观更新",[706,1240,1241],{},"补丁写回源码",[706,1243,1244],{},"预览刷新并重新附加选择",[696,1246,1247],{"id":1247},"渐变编辑",[692,1249,1250],{},"当前渐变编辑器是一个结构化的 Studio 控件，而非原始 CSS 文本字段。",[692,1252,1253],{},"它支持：",[703,1255,1256,1268,1271,1274,1277,1280,1283,1286],{},[706,1257,1258,1069,1261,968,1264,1267],{},[719,1259,1260],{},"linear",[719,1262,1263],{},"radial",[719,1265,1266],{},"conic"," 渐变",[706,1269,1270],{},"重复变体",[706,1272,1273],{},"多个色标",[706,1275,1276],{},"通过点击预览条插入色标",[706,1278,1279],{},"移除色标",[706,1281,1282],{},"角度控制",[706,1284,1285],{},"径向形状和大小控制",[706,1287,1288],{},"径向\u002F锥形中心控制",[692,1290,1291,1292,1295],{},"编辑器仍然序列化为 CSS ",[719,1293,1294],{},"background-image","，但检查器使用解析后的渐变模型，而非强制用户输入原始渐变语法。",[696,1297,1298],{"id":1298},"图片填充编辑",[692,1300,1301,1302,1304],{},"图片填充编辑器不再只是一个原始的 ",[719,1303,1294],{}," 输入。",[692,1306,1253],{},[703,1308,1309,1312,1315,1318],{},[706,1310,1311],{},"选择现有的项目图片资源",[706,1313,1314],{},"从填充面板上传图片（同时添加到 Assets 选项卡）",[706,1316,1317],{},"在面板中预览选中的项目资源",[706,1319,1320],{},"当图片不是项目资源时输入外部 URL",[692,1322,1323,1324,1327],{},"Studio 将项目资源选择序列化为 ",[719,1325,1326],{},"background-image: url(...)","，并重写资源 URL 使嵌套子 composition 预览仍能正确解析图片。",[696,1329,1330],{"id":1330},"颜色编辑",[692,1332,1333],{},"颜色编辑器是自定义的 Studio 弹出面板，而非浏览器原生颜色对话框。",[692,1335,1253],{},[703,1337,1338,1341,1344,1347,1350],{},[706,1339,1340],{},"从整个颜色行打开",[706,1342,1343],{},"保持在视口内靠近点击颜色的位置",[706,1345,1346],{},"带可见十字准线指南的饱和度\u002F亮度拾取",[706,1348,1349],{},"带可见手柄的色相和透明度控制",[706,1351,1352],{},"当前颜色色块、读数和十六进制输入",[692,1354,1355,1356,1012,1359,1362],{},"拾色器写入 CSS ",[719,1357,1358],{},"rgb(...)",[719,1360,1361],{},"rgba(...)"," 值，并在编辑过程中保留 alpha 通道。",[696,1364,1365],{"id":1365},"数值微调",[692,1367,1368],{},"数值布局\u002F细节输入支持轻量级的设计工具式微调：",[703,1370,1371,1374,1383,1389],{},[706,1372,1373],{},"在聚焦字段上使用鼠标滚轮",[706,1375,1376,1379,1380],{},[719,1377,1378],{},"ArrowUp"," \u002F ",[719,1381,1382],{},"ArrowDown",[706,1384,1385,1388],{},[719,1386,1387],{},"Shift"," 用于较大步长",[706,1390,1391,1394],{},[719,1392,1393],{},"Alt"," 用于更精细步长",[692,1396,1397],{},"当前用于检查器中的所有数值提交字段，包括布局度量和可干净解析为值加单位的其他数值文本输入。",[696,1399,1400],{"id":1400},"负责该功能的文件",[692,1402,1403],{},"主要实现位于：",[703,1405,1406,1411,1414,1417,1420,1423,1426,1431,1434,1439,1442,1447,1450,1453,1456,1459,1464,1467,1472,1475,1480,1483,1488,1491,1496,1499,1503],{},[706,1407,1408],{},[719,1409,1410],{},"packages\u002Fstudio\u002Fsrc\u002FApp.tsx",[706,1412,1413],{},"整体检查器接线",[706,1415,1416],{},"选择生命周期",[706,1418,1419],{},"预览命中测试",[706,1421,1422],{},"持久化钩子",[706,1424,1425],{},"从布局分离的提交流程",[706,1427,1428],{},[719,1429,1430],{},"packages\u002Fstudio\u002Fsrc\u002Fcomponents\u002Feditor\u002FDomEditOverlay.tsx",[706,1432,1433],{},"覆盖层方框、拖拽、调整大小、阻止拖拽反馈",[706,1435,1436],{},[719,1437,1438],{},"packages\u002Fstudio\u002Fsrc\u002Fcomponents\u002Feditor\u002FPropertyPanel.tsx",[706,1440,1441],{},"右侧检查器 UI",[706,1443,1444],{},[719,1445,1446],{},"packages\u002Fstudio\u002Fsrc\u002Fcomponents\u002Feditor\u002FdomEditing.ts",[706,1448,1449],{},"选择解析",[706,1451,1452],{},"能力门控",[706,1454,1455],{},"文本字段建模",[706,1457,1458],{},"prompt 生成",[706,1460,1461],{},[719,1462,1463],{},"packages\u002Fstudio\u002Fsrc\u002Fcomponents\u002Feditor\u002FcolorValue.ts",[706,1465,1466],{},"颜色解析、HSV 转换和 CSS 颜色序列化",[706,1468,1469],{},[719,1470,1471],{},"packages\u002Fstudio\u002Fsrc\u002Fcomponents\u002Feditor\u002FfloatingPanel.ts",[706,1473,1474],{},"颜色拾取的视口安全浮动面板定位",[706,1476,1477],{},[719,1478,1479],{},"packages\u002Fstudio\u002Fsrc\u002Fcomponents\u002Feditor\u002FfontAssets.ts",[706,1481,1482],{},"导入的字体资源辅助函数",[706,1484,1485],{},[719,1486,1487],{},"packages\u002Fstudio\u002Fsrc\u002Fcomponents\u002Feditor\u002FfontCatalog.ts",[706,1489,1490],{},"Google 字体目录元数据和样式表 URL",[706,1492,1493],{},[719,1494,1495],{},"packages\u002Fstudio\u002Fsrc\u002Fcomponents\u002Feditor\u002FgradientValue.ts",[706,1497,1498],{},"渐变解析、序列化和色标编辑辅助函数",[706,1500,1501],{},[719,1502,1205],{},[706,1504,1505],{},"源码补丁持久化",[692,1507,1508],{},"支持性的 Studio shell 变更也涉及：",[703,1510,1511,1516,1521,1526,1531,1536,1541,1546,1551],{},[706,1512,1513],{},[719,1514,1515],{},"packages\u002Fstudio\u002Fsrc\u002Fcomponents\u002Fnle\u002FNLELayout.tsx",[706,1517,1518],{},[719,1519,1520],{},"packages\u002Fstudio\u002Fsrc\u002Fcomponents\u002Fnle\u002FNLEPreview.tsx",[706,1522,1523],{},[719,1524,1525],{},"packages\u002Fstudio\u002Fsrc\u002Fcomponents\u002Fsidebar\u002FCompositionsTab.tsx",[706,1527,1528],{},[719,1529,1530],{},"packages\u002Fstudio\u002Fsrc\u002Fcomponents\u002Fsidebar\u002FLeftSidebar.tsx",[706,1532,1533],{},[719,1534,1535],{},"packages\u002Fstudio\u002Fsrc\u002Fplayer\u002Fcomponents\u002FPlayer.tsx",[706,1537,1538],{},[719,1539,1540],{},"packages\u002Fstudio\u002Fsrc\u002Fplayer\u002Fcomponents\u002FTimeline.tsx",[706,1542,1543],{},[719,1544,1545],{},"packages\u002Fstudio\u002Fsrc\u002Fplayer\u002Fcomponents\u002FTimelineClip.tsx",[706,1547,1548],{},[719,1549,1550],{},"packages\u002Fstudio\u002Fsrc\u002Fplayer\u002Fhooks\u002FuseTimelinePlayer.ts",[706,1552,1553],{},[719,1554,1555],{},"packages\u002Fstudio\u002Fsrc\u002Futils\u002FmediaTypes.ts",[696,1557,1558],{"id":1558},"当前限制",[692,1560,1561,1562,1565],{},"该功能刻意",[819,1563,1564],{},"不是","一个完整的通用可视化构建器。",[692,1567,1568],{},"目前仍不支持：",[703,1570,1571,1574,1577,1580,1583,1586,1589,1592,1595],{},[706,1572,1573],{},"旋转",[706,1575,1576],{},"任意 transform",[706,1578,1579],{},"吸附和对齐指南",[706,1581,1582],{},"多选",[706,1584,1585],{},"框选",[706,1587,1588],{},"无论布局模型如何自由编辑每个 DOM 节点",[706,1590,1591],{},"不深入就直接从主预览编辑嵌套子 composition 内部",[706,1593,1594],{},"拖拽时自动转换为绝对定位（无用户确认）",[706,1596,1597],{},"内联文字 span 的直接几何编辑",[696,1599,1600],{"id":1600},"总结",[692,1602,1603],{},"Studio 手动 DOM 编辑现在是一个狭窄、确定性的可视化编辑层，覆盖在创作的 HTML 之上。",[692,1605,1606,1607,1609],{},"它",[819,1608,821],{},"试图让整个 DOM 可自由编辑。相反，它：",[703,1611,1612,1615,1618,1621,1624],{},[706,1613,1614],{},"以源码 HTML 为真实来源",[706,1616,1617],{},"只暴露可补丁的交互",[706,1619,1620],{},"使用 Studio 管理的覆盖层进行直接操作",[706,1622,1623],{},"为用户提供真正的检查器进行安全的样式和文字编辑",[706,1625,1626],{},"将嵌套 composition 视为深入边界，而非将它们展平为不安全的编辑表面",[692,1628,1629],{},"这种权衡是当前功能感觉可靠而非具有欺骗性的原因。",{"title":1631,"searchDepth":1632,"depth":1633,"links":1634},"",1,2,[1635,1636,1642,1650,1654,1655,1656,1657,1658,1659,1660,1661],{"id":698,"depth":1633,"text":698},{"id":754,"depth":1633,"text":754,"children":1637},[1638,1640,1641],{"id":758,"depth":1639,"text":758},3,{"id":784,"depth":1639,"text":784},{"id":829,"depth":1639,"text":829},{"id":961,"depth":1633,"text":961,"children":1643},[1644,1645,1646,1647,1648,1649],{"id":975,"depth":1639,"text":975},{"id":997,"depth":1639,"text":997},{"id":1034,"depth":1639,"text":1034},{"id":1048,"depth":1639,"text":1048},{"id":1087,"depth":1639,"text":1087},{"id":1121,"depth":1639,"text":1121},{"id":1155,"depth":1633,"text":1156,"children":1651},[1652,1653],{"id":1162,"depth":1639,"text":1162},{"id":1179,"depth":1639,"text":1179},{"id":1196,"depth":1633,"text":1196},{"id":1247,"depth":1633,"text":1247},{"id":1298,"depth":1633,"text":1298},{"id":1330,"depth":1633,"text":1330},{"id":1365,"depth":1633,"text":1365},{"id":1400,"depth":1633,"text":1400},{"id":1558,"depth":1633,"text":1558},{"id":1600,"depth":1633,"text":1600},"Studio 手动 DOM 编辑检查器当前提供的功能，包括能力、用户体验和限制。","md",null,{},true,{"title":679,"description":1662},"3etw8UGuW-E3LvbZazWfBq7XHh1wC1vQ3ivaq4ag5tE",[1670,1672],{"title":675,"path":676,"stem":677,"description":1671,"children":-1},"如何使用本地构建在 monorepo 外部测试未发布的 CLI 变更。",{"title":683,"path":684,"stem":685,"description":1673,"children":-1},"在生产中使用 HyperFrames 或积极评估的组织。",1780322255609]