opendevbrowser 0.0.16 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (616) hide show
  1. package/README.md +201 -79
  2. package/dist/annotate/agent-inbox-store.d.ts +58 -0
  3. package/dist/annotate/agent-inbox-store.d.ts.map +1 -0
  4. package/dist/annotate/agent-inbox.d.ts +25 -0
  5. package/dist/annotate/agent-inbox.d.ts.map +1 -0
  6. package/dist/annotate/direct-annotator.d.ts.map +1 -1
  7. package/dist/annotate/timeout-messages.d.ts +4 -0
  8. package/dist/annotate/timeout-messages.d.ts.map +1 -0
  9. package/dist/automation/coordinator.d.ts +55 -0
  10. package/dist/automation/coordinator.d.ts.map +1 -0
  11. package/dist/browser/annotation-manager.d.ts +7 -1
  12. package/dist/browser/annotation-manager.d.ts.map +1 -1
  13. package/dist/browser/browser-manager.d.ts +153 -48
  14. package/dist/browser/browser-manager.d.ts.map +1 -1
  15. package/dist/browser/canvas-client.d.ts +54 -0
  16. package/dist/browser/canvas-client.d.ts.map +1 -0
  17. package/dist/browser/canvas-code-sync-manager.d.ts +87 -0
  18. package/dist/browser/canvas-code-sync-manager.d.ts.map +1 -0
  19. package/dist/browser/canvas-manager.d.ts +122 -0
  20. package/dist/browser/canvas-manager.d.ts.map +1 -0
  21. package/dist/browser/canvas-runtime-preview-bridge.d.ts +20 -0
  22. package/dist/browser/canvas-runtime-preview-bridge.d.ts.map +1 -0
  23. package/dist/browser/canvas-session-sync-manager.d.ts +21 -0
  24. package/dist/browser/canvas-session-sync-manager.d.ts.map +1 -0
  25. package/dist/browser/global-challenge-coordinator.d.ts +27 -0
  26. package/dist/browser/global-challenge-coordinator.d.ts.map +1 -0
  27. package/dist/browser/manager-types.d.ts +179 -1
  28. package/dist/browser/manager-types.d.ts.map +1 -1
  29. package/dist/browser/ops-browser-manager.d.ts +114 -4
  30. package/dist/browser/ops-browser-manager.d.ts.map +1 -1
  31. package/dist/browser/ops-client.d.ts +17 -1
  32. package/dist/browser/ops-client.d.ts.map +1 -1
  33. package/dist/browser/playwright-runtime.d.ts +4 -0
  34. package/dist/browser/playwright-runtime.d.ts.map +1 -0
  35. package/dist/browser/review-surface.d.ts +9 -0
  36. package/dist/browser/review-surface.d.ts.map +1 -0
  37. package/dist/browser/screencast-recorder.d.ts +57 -0
  38. package/dist/browser/screencast-recorder.d.ts.map +1 -0
  39. package/dist/browser/session-inspector.d.ts +71 -0
  40. package/dist/browser/session-inspector.d.ts.map +1 -0
  41. package/dist/browser/session-store.d.ts +5 -1
  42. package/dist/browser/session-store.d.ts.map +1 -1
  43. package/dist/browser/system-chrome-cookies.d.ts +46 -0
  44. package/dist/browser/system-chrome-cookies.d.ts.map +1 -0
  45. package/dist/browser/target-manager.d.ts +1 -0
  46. package/dist/browser/target-manager.d.ts.map +1 -1
  47. package/dist/cache/chrome-locator.d.ts.map +1 -1
  48. package/dist/cache/chrome-user-data.d.ts +17 -0
  49. package/dist/cache/chrome-user-data.d.ts.map +1 -0
  50. package/dist/canvas/adapter-plugins/loader.d.ts +13 -0
  51. package/dist/canvas/adapter-plugins/loader.d.ts.map +1 -0
  52. package/dist/canvas/adapter-plugins/manifest.d.ts +146 -0
  53. package/dist/canvas/adapter-plugins/manifest.d.ts.map +1 -0
  54. package/dist/canvas/adapter-plugins/types.d.ts +83 -0
  55. package/dist/canvas/adapter-plugins/types.d.ts.map +1 -0
  56. package/dist/canvas/adapter-plugins/validator.d.ts +10 -0
  57. package/dist/canvas/adapter-plugins/validator.d.ts.map +1 -0
  58. package/dist/canvas/code-sync/apply-tsx.d.ts +25 -0
  59. package/dist/canvas/code-sync/apply-tsx.d.ts.map +1 -0
  60. package/dist/canvas/code-sync/graph.d.ts +5 -0
  61. package/dist/canvas/code-sync/graph.d.ts.map +1 -0
  62. package/dist/canvas/code-sync/hash.d.ts +3 -0
  63. package/dist/canvas/code-sync/hash.d.ts.map +1 -0
  64. package/dist/canvas/code-sync/import.d.ts +19 -0
  65. package/dist/canvas/code-sync/import.d.ts.map +1 -0
  66. package/dist/canvas/code-sync/manifest.d.ts +6 -0
  67. package/dist/canvas/code-sync/manifest.d.ts.map +1 -0
  68. package/dist/canvas/code-sync/tsx-adapter.d.ts +8 -0
  69. package/dist/canvas/code-sync/tsx-adapter.d.ts.map +1 -0
  70. package/dist/canvas/code-sync/types.d.ts +244 -0
  71. package/dist/canvas/code-sync/types.d.ts.map +1 -0
  72. package/dist/canvas/code-sync/write.d.ts +9 -0
  73. package/dist/canvas/code-sync/write.d.ts.map +1 -0
  74. package/dist/canvas/document-store.d.ts +91 -0
  75. package/dist/canvas/document-store.d.ts.map +1 -0
  76. package/dist/canvas/export.d.ts +12 -0
  77. package/dist/canvas/export.d.ts.map +1 -0
  78. package/dist/canvas/framework-adapters/custom-elements-v1.d.ts +3 -0
  79. package/dist/canvas/framework-adapters/custom-elements-v1.d.ts.map +1 -0
  80. package/dist/canvas/framework-adapters/html-static-v1.d.ts +3 -0
  81. package/dist/canvas/framework-adapters/html-static-v1.d.ts.map +1 -0
  82. package/dist/canvas/framework-adapters/markup.d.ts +9 -0
  83. package/dist/canvas/framework-adapters/markup.d.ts.map +1 -0
  84. package/dist/canvas/framework-adapters/react-tsx-v2.d.ts +3 -0
  85. package/dist/canvas/framework-adapters/react-tsx-v2.d.ts.map +1 -0
  86. package/dist/canvas/framework-adapters/registry.d.ts +12 -0
  87. package/dist/canvas/framework-adapters/registry.d.ts.map +1 -0
  88. package/dist/canvas/framework-adapters/svelte-sfc-v1.d.ts +3 -0
  89. package/dist/canvas/framework-adapters/svelte-sfc-v1.d.ts.map +1 -0
  90. package/dist/canvas/framework-adapters/types.d.ts +57 -0
  91. package/dist/canvas/framework-adapters/types.d.ts.map +1 -0
  92. package/dist/canvas/framework-adapters/vue-sfc-v1.d.ts +3 -0
  93. package/dist/canvas/framework-adapters/vue-sfc-v1.d.ts.map +1 -0
  94. package/dist/canvas/kits/catalog.d.ts +5 -0
  95. package/dist/canvas/kits/catalog.d.ts.map +1 -0
  96. package/dist/canvas/library-adapters/react/index.d.ts +3 -0
  97. package/dist/canvas/library-adapters/react/index.d.ts.map +1 -0
  98. package/dist/canvas/library-adapters/registry.d.ts +11 -0
  99. package/dist/canvas/library-adapters/registry.d.ts.map +1 -0
  100. package/dist/canvas/library-adapters/types.d.ts +43 -0
  101. package/dist/canvas/library-adapters/types.d.ts.map +1 -0
  102. package/dist/canvas/repo-store.d.ts +12 -0
  103. package/dist/canvas/repo-store.d.ts.map +1 -0
  104. package/dist/canvas/starters/catalog.d.ts +34 -0
  105. package/dist/canvas/starters/catalog.d.ts.map +1 -0
  106. package/dist/canvas/surface-palette.d.ts +15 -0
  107. package/dist/canvas/surface-palette.d.ts.map +1 -0
  108. package/dist/canvas/token-references.d.ts +22 -0
  109. package/dist/canvas/token-references.d.ts.map +1 -0
  110. package/dist/canvas/types.d.ts +594 -0
  111. package/dist/canvas/types.d.ts.map +1 -0
  112. package/dist/canvas-runtime-preview-bridge-HBEHXM4T.js +7 -0
  113. package/dist/canvas-runtime-preview-bridge-HBEHXM4T.js.map +1 -0
  114. package/dist/challenges/action-loop.d.ts +13 -0
  115. package/dist/challenges/action-loop.d.ts.map +1 -0
  116. package/dist/challenges/capability-matrix.d.ts +3 -0
  117. package/dist/challenges/capability-matrix.d.ts.map +1 -0
  118. package/dist/challenges/evidence-bundle.d.ts +48 -0
  119. package/dist/challenges/evidence-bundle.d.ts.map +1 -0
  120. package/dist/challenges/governed-adapter-gateway.d.ts +4 -0
  121. package/dist/challenges/governed-adapter-gateway.d.ts.map +1 -0
  122. package/dist/challenges/human-yield-gate.d.ts +20 -0
  123. package/dist/challenges/human-yield-gate.d.ts.map +1 -0
  124. package/dist/challenges/index.d.ts +15 -0
  125. package/dist/challenges/index.d.ts.map +1 -0
  126. package/dist/challenges/interpreter.d.ts +3 -0
  127. package/dist/challenges/interpreter.d.ts.map +1 -0
  128. package/dist/challenges/optional-computer-use-bridge.d.ts +9 -0
  129. package/dist/challenges/optional-computer-use-bridge.d.ts.map +1 -0
  130. package/dist/challenges/orchestrator.d.ts +32 -0
  131. package/dist/challenges/orchestrator.d.ts.map +1 -0
  132. package/dist/challenges/outcome-recorder.d.ts +8 -0
  133. package/dist/challenges/outcome-recorder.d.ts.map +1 -0
  134. package/dist/challenges/owned-environment-lane.d.ts +3 -0
  135. package/dist/challenges/owned-environment-lane.d.ts.map +1 -0
  136. package/dist/challenges/policy-gate.d.ts +9 -0
  137. package/dist/challenges/policy-gate.d.ts.map +1 -0
  138. package/dist/challenges/sanctioned-identity-lane.d.ts +3 -0
  139. package/dist/challenges/sanctioned-identity-lane.d.ts.map +1 -0
  140. package/dist/challenges/service-adapter-lane.d.ts +3 -0
  141. package/dist/challenges/service-adapter-lane.d.ts.map +1 -0
  142. package/dist/challenges/strategy-selector.d.ts +10 -0
  143. package/dist/challenges/strategy-selector.d.ts.map +1 -0
  144. package/dist/challenges/types.d.ts +277 -0
  145. package/dist/challenges/types.d.ts.map +1 -0
  146. package/dist/challenges/verification-gate.d.ts +15 -0
  147. package/dist/challenges/verification-gate.d.ts.map +1 -0
  148. package/dist/chunk-5FZQJRBQ.js +15256 -0
  149. package/dist/chunk-5FZQJRBQ.js.map +1 -0
  150. package/dist/{chunk-7W3SPXIB.js → chunk-FUSXMW3G.js} +4 -1
  151. package/dist/chunk-L57D35TB.js +33513 -0
  152. package/dist/chunk-L57D35TB.js.map +1 -0
  153. package/dist/chunk-TBUCZX4A.js +34 -0
  154. package/dist/chunk-TBUCZX4A.js.map +1 -0
  155. package/dist/chunk-Y2KL55OG.js +59 -0
  156. package/dist/chunk-Y2KL55OG.js.map +1 -0
  157. package/dist/chunk-YBQECXZX.js +409 -0
  158. package/dist/chunk-YBQECXZX.js.map +1 -0
  159. package/dist/cli/args.d.ts +4 -4
  160. package/dist/cli/args.d.ts.map +1 -1
  161. package/dist/cli/commands/annotate.d.ts +11 -0
  162. package/dist/cli/commands/annotate.d.ts.map +1 -1
  163. package/dist/cli/commands/artifacts.d.ts.map +1 -1
  164. package/dist/cli/commands/canvas.d.ts +45 -0
  165. package/dist/cli/commands/canvas.d.ts.map +1 -0
  166. package/dist/cli/commands/daemon.d.ts +7 -0
  167. package/dist/cli/commands/daemon.d.ts.map +1 -1
  168. package/dist/cli/commands/desktop/accessibility-snapshot.d.ts +3 -0
  169. package/dist/cli/commands/desktop/accessibility-snapshot.d.ts.map +1 -0
  170. package/dist/cli/commands/desktop/active-window.d.ts +3 -0
  171. package/dist/cli/commands/desktop/active-window.d.ts.map +1 -0
  172. package/dist/cli/commands/desktop/capture-desktop.d.ts +3 -0
  173. package/dist/cli/commands/desktop/capture-desktop.d.ts.map +1 -0
  174. package/dist/cli/commands/desktop/capture-window.d.ts +3 -0
  175. package/dist/cli/commands/desktop/capture-window.d.ts.map +1 -0
  176. package/dist/cli/commands/desktop/shared.d.ts +19 -0
  177. package/dist/cli/commands/desktop/shared.d.ts.map +1 -0
  178. package/dist/cli/commands/desktop/status.d.ts +3 -0
  179. package/dist/cli/commands/desktop/status.d.ts.map +1 -0
  180. package/dist/cli/commands/desktop/windows.d.ts +3 -0
  181. package/dist/cli/commands/desktop/windows.d.ts.map +1 -0
  182. package/dist/cli/commands/devtools/dialog.d.ts +19 -0
  183. package/dist/cli/commands/devtools/dialog.d.ts.map +1 -0
  184. package/dist/cli/commands/devtools/perf.d.ts.map +1 -1
  185. package/dist/cli/commands/devtools/screencast-start.d.ts +20 -0
  186. package/dist/cli/commands/devtools/screencast-start.d.ts.map +1 -0
  187. package/dist/cli/commands/devtools/screencast-stop.d.ts +17 -0
  188. package/dist/cli/commands/devtools/screencast-stop.d.ts.map +1 -0
  189. package/dist/cli/commands/devtools/screenshot.d.ts +3 -0
  190. package/dist/cli/commands/devtools/screenshot.d.ts.map +1 -1
  191. package/dist/cli/commands/dom/attr.d.ts.map +1 -1
  192. package/dist/cli/commands/dom/checked.d.ts.map +1 -1
  193. package/dist/cli/commands/dom/enabled.d.ts.map +1 -1
  194. package/dist/cli/commands/dom/html.d.ts.map +1 -1
  195. package/dist/cli/commands/dom/text.d.ts.map +1 -1
  196. package/dist/cli/commands/dom/value.d.ts.map +1 -1
  197. package/dist/cli/commands/dom/visible.d.ts.map +1 -1
  198. package/dist/cli/commands/export/clone-component.d.ts +9 -0
  199. package/dist/cli/commands/export/clone-component.d.ts.map +1 -1
  200. package/dist/cli/commands/export/clone-page.d.ts +8 -0
  201. package/dist/cli/commands/export/clone-page.d.ts.map +1 -1
  202. package/dist/cli/commands/interact/check.d.ts.map +1 -1
  203. package/dist/cli/commands/interact/click.d.ts.map +1 -1
  204. package/dist/cli/commands/interact/hover.d.ts.map +1 -1
  205. package/dist/cli/commands/interact/pointer-down.d.ts +7 -0
  206. package/dist/cli/commands/interact/pointer-down.d.ts.map +1 -0
  207. package/dist/cli/commands/interact/pointer-drag.d.ts +7 -0
  208. package/dist/cli/commands/interact/pointer-drag.d.ts.map +1 -0
  209. package/dist/cli/commands/interact/pointer-move.d.ts +7 -0
  210. package/dist/cli/commands/interact/pointer-move.d.ts.map +1 -0
  211. package/dist/cli/commands/interact/pointer-shared.d.ts +6 -0
  212. package/dist/cli/commands/interact/pointer-shared.d.ts.map +1 -0
  213. package/dist/cli/commands/interact/pointer-up.d.ts +7 -0
  214. package/dist/cli/commands/interact/pointer-up.d.ts.map +1 -0
  215. package/dist/cli/commands/interact/press.d.ts.map +1 -1
  216. package/dist/cli/commands/interact/scroll-into-view.d.ts.map +1 -1
  217. package/dist/cli/commands/interact/scroll.d.ts.map +1 -1
  218. package/dist/cli/commands/interact/select.d.ts.map +1 -1
  219. package/dist/cli/commands/interact/type.d.ts.map +1 -1
  220. package/dist/cli/commands/interact/uncheck.d.ts.map +1 -1
  221. package/dist/cli/commands/interact/upload.d.ts +18 -0
  222. package/dist/cli/commands/interact/upload.d.ts.map +1 -0
  223. package/dist/cli/commands/macro-resolve.d.ts +2 -0
  224. package/dist/cli/commands/macro-resolve.d.ts.map +1 -1
  225. package/dist/cli/commands/native.d.ts +22 -8
  226. package/dist/cli/commands/native.d.ts.map +1 -1
  227. package/dist/cli/commands/nav/goto.d.ts.map +1 -1
  228. package/dist/cli/commands/nav/review.d.ts +7 -0
  229. package/dist/cli/commands/nav/review.d.ts.map +1 -0
  230. package/dist/cli/commands/nav/snapshot.d.ts.map +1 -1
  231. package/dist/cli/commands/nav/wait.d.ts.map +1 -1
  232. package/dist/cli/commands/pages/open.d.ts.map +1 -1
  233. package/dist/cli/commands/product-video.d.ts +2 -0
  234. package/dist/cli/commands/product-video.d.ts.map +1 -1
  235. package/dist/cli/commands/research.d.ts +3 -0
  236. package/dist/cli/commands/research.d.ts.map +1 -1
  237. package/dist/cli/commands/run.d.ts +14 -0
  238. package/dist/cli/commands/run.d.ts.map +1 -1
  239. package/dist/cli/commands/serve.d.ts +1 -21
  240. package/dist/cli/commands/serve.d.ts.map +1 -1
  241. package/dist/cli/commands/session/connect.d.ts.map +1 -1
  242. package/dist/cli/commands/session/disconnect.d.ts.map +1 -1
  243. package/dist/cli/commands/session/inspector.d.ts +21 -0
  244. package/dist/cli/commands/session/inspector.d.ts.map +1 -0
  245. package/dist/cli/commands/session/launch.d.ts.map +1 -1
  246. package/dist/cli/commands/shopping.d.ts +5 -0
  247. package/dist/cli/commands/shopping.d.ts.map +1 -1
  248. package/dist/cli/commands/status.d.ts +2 -9
  249. package/dist/cli/commands/status.d.ts.map +1 -1
  250. package/dist/cli/commands/targets/new.d.ts.map +1 -1
  251. package/dist/cli/daemon-autostart.d.ts +11 -0
  252. package/dist/cli/daemon-autostart.d.ts.map +1 -1
  253. package/dist/cli/daemon-client.d.ts +3 -0
  254. package/dist/cli/daemon-client.d.ts.map +1 -1
  255. package/dist/cli/daemon-commands.d.ts.map +1 -1
  256. package/dist/cli/daemon-state.d.ts +16 -0
  257. package/dist/cli/daemon-state.d.ts.map +1 -1
  258. package/dist/cli/daemon-status.d.ts +7 -2
  259. package/dist/cli/daemon-status.d.ts.map +1 -1
  260. package/dist/cli/daemon.d.ts +1 -0
  261. package/dist/cli/daemon.d.ts.map +1 -1
  262. package/dist/cli/help.d.ts +19 -3
  263. package/dist/cli/help.d.ts.map +1 -1
  264. package/dist/cli/index.js +2927 -932
  265. package/dist/cli/index.js.map +1 -1
  266. package/dist/cli/install-autostart-output.d.ts +6 -0
  267. package/dist/cli/install-autostart-output.d.ts.map +1 -0
  268. package/dist/cli/install-autostart-reconciliation.d.ts +23 -0
  269. package/dist/cli/install-autostart-reconciliation.d.ts.map +1 -0
  270. package/dist/cli/installers/skills.d.ts +42 -6
  271. package/dist/cli/installers/skills.d.ts.map +1 -1
  272. package/dist/cli/output.d.ts +3 -0
  273. package/dist/cli/output.d.ts.map +1 -1
  274. package/dist/cli/remote-canvas-manager.d.ts +8 -0
  275. package/dist/cli/remote-canvas-manager.d.ts.map +1 -0
  276. package/dist/cli/remote-desktop-runtime.d.ts +15 -0
  277. package/dist/cli/remote-desktop-runtime.d.ts.map +1 -0
  278. package/dist/cli/remote-manager.d.ts +27 -3
  279. package/dist/cli/remote-manager.d.ts.map +1 -1
  280. package/dist/cli/remote-relay.d.ts +2 -0
  281. package/dist/cli/remote-relay.d.ts.map +1 -1
  282. package/dist/cli/transport-timeouts.d.ts +8 -0
  283. package/dist/cli/transport-timeouts.d.ts.map +1 -0
  284. package/dist/cli/utils/http.d.ts +9 -0
  285. package/dist/cli/utils/http.d.ts.map +1 -1
  286. package/dist/cli/utils/parse.d.ts +3 -0
  287. package/dist/cli/utils/parse.d.ts.map +1 -1
  288. package/dist/cli/utils/skills.d.ts +1 -2
  289. package/dist/cli/utils/skills.d.ts.map +1 -1
  290. package/dist/cli/utils/workflow-message.d.ts +2 -0
  291. package/dist/cli/utils/workflow-message.d.ts.map +1 -0
  292. package/dist/config.d.ts +47 -0
  293. package/dist/config.d.ts.map +1 -1
  294. package/dist/core/bootstrap.d.ts.map +1 -1
  295. package/dist/core/index.d.ts +1 -0
  296. package/dist/core/index.d.ts.map +1 -1
  297. package/dist/core/logging.d.ts +3 -1
  298. package/dist/core/logging.d.ts.map +1 -1
  299. package/dist/core/runtime-assemblies.d.ts +22 -0
  300. package/dist/core/runtime-assemblies.d.ts.map +1 -0
  301. package/dist/core/types.d.ts +17 -0
  302. package/dist/core/types.d.ts.map +1 -1
  303. package/dist/desktop/audit.d.ts +37 -0
  304. package/dist/desktop/audit.d.ts.map +1 -0
  305. package/dist/desktop/errors.d.ts +7 -0
  306. package/dist/desktop/errors.d.ts.map +1 -0
  307. package/dist/desktop/index.d.ts +6 -0
  308. package/dist/desktop/index.d.ts.map +1 -0
  309. package/dist/desktop/runtime.d.ts +26 -0
  310. package/dist/desktop/runtime.d.ts.map +1 -0
  311. package/dist/desktop/types.d.ts +76 -0
  312. package/dist/desktop/types.d.ts.map +1 -0
  313. package/dist/extension-extractor.d.ts +6 -0
  314. package/dist/extension-extractor.d.ts.map +1 -1
  315. package/dist/fs-UMRKOBNN.js +7 -0
  316. package/dist/fs-UMRKOBNN.js.map +1 -0
  317. package/dist/index.d.ts.map +1 -1
  318. package/dist/index.js +1221 -460
  319. package/dist/index.js.map +1 -1
  320. package/dist/integrations/figma/assets.d.ts +13 -0
  321. package/dist/integrations/figma/assets.d.ts.map +1 -0
  322. package/dist/integrations/figma/auth.d.ts +3 -0
  323. package/dist/integrations/figma/auth.d.ts.map +1 -0
  324. package/dist/integrations/figma/client.d.ts +42 -0
  325. package/dist/integrations/figma/client.d.ts.map +1 -0
  326. package/dist/integrations/figma/mappers.d.ts +23 -0
  327. package/dist/integrations/figma/mappers.d.ts.map +1 -0
  328. package/dist/integrations/figma/normalize.d.ts +99 -0
  329. package/dist/integrations/figma/normalize.d.ts.map +1 -0
  330. package/dist/integrations/figma/url.d.ts +17 -0
  331. package/dist/integrations/figma/url.d.ts.map +1 -0
  332. package/dist/integrations/figma/variables.d.ts +21 -0
  333. package/dist/integrations/figma/variables.d.ts.map +1 -0
  334. package/dist/macros/execute-runtime.d.ts +19 -0
  335. package/dist/macros/execute-runtime.d.ts.map +1 -0
  336. package/dist/macros/execute.d.ts +3 -1
  337. package/dist/macros/execute.d.ts.map +1 -1
  338. package/dist/{macros-NUBRM44Y.js → macros-ND2M7LWU.js} +2 -2
  339. package/dist/opendevbrowser.d.ts.map +1 -1
  340. package/dist/opendevbrowser.js +1221 -460
  341. package/dist/opendevbrowser.js.map +1 -1
  342. package/dist/providers/blocker.d.ts.map +1 -1
  343. package/dist/providers/browser-fallback.d.ts +30 -0
  344. package/dist/providers/browser-fallback.d.ts.map +1 -0
  345. package/dist/providers/constraint.d.ts +45 -0
  346. package/dist/providers/constraint.d.ts.map +1 -0
  347. package/dist/providers/index.d.ts +11 -2
  348. package/dist/providers/index.d.ts.map +1 -1
  349. package/dist/providers/policy.d.ts.map +1 -1
  350. package/dist/providers/product-video-compiler.d.ts +92 -0
  351. package/dist/providers/product-video-compiler.d.ts.map +1 -0
  352. package/dist/providers/registry.d.ts +37 -1
  353. package/dist/providers/registry.d.ts.map +1 -1
  354. package/dist/providers/renderer.d.ts.map +1 -1
  355. package/dist/providers/research-compiler.d.ts +64 -0
  356. package/dist/providers/research-compiler.d.ts.map +1 -0
  357. package/dist/providers/research-executor.d.ts +27 -0
  358. package/dist/providers/research-executor.d.ts.map +1 -0
  359. package/dist/providers/runtime-bundle.d.ts +26 -0
  360. package/dist/providers/runtime-bundle.d.ts.map +1 -0
  361. package/dist/providers/runtime-factory.d.ts +6 -1
  362. package/dist/providers/runtime-factory.d.ts.map +1 -1
  363. package/dist/providers/runtime-policy.d.ts +24 -0
  364. package/dist/providers/runtime-policy.d.ts.map +1 -0
  365. package/dist/providers/shared/anti-bot-policy.d.ts +3 -2
  366. package/dist/providers/shared/anti-bot-policy.d.ts.map +1 -1
  367. package/dist/providers/shopping/index.d.ts +11 -1
  368. package/dist/providers/shopping/index.d.ts.map +1 -1
  369. package/dist/providers/shopping-compiler.d.ts +51 -0
  370. package/dist/providers/shopping-compiler.d.ts.map +1 -0
  371. package/dist/providers/shopping-executor.d.ts +18 -0
  372. package/dist/providers/shopping-executor.d.ts.map +1 -0
  373. package/dist/providers/shopping-postprocess.d.ts +46 -0
  374. package/dist/providers/shopping-postprocess.d.ts.map +1 -0
  375. package/dist/providers/shopping-workflow.d.ts +33 -0
  376. package/dist/providers/shopping-workflow.d.ts.map +1 -0
  377. package/dist/providers/social/platform.d.ts +2 -1
  378. package/dist/providers/social/platform.d.ts.map +1 -1
  379. package/dist/providers/social/search-quality.d.ts +16 -0
  380. package/dist/providers/social/search-quality.d.ts.map +1 -0
  381. package/dist/providers/social/youtube-resolver.d.ts +2 -1
  382. package/dist/providers/social/youtube-resolver.d.ts.map +1 -1
  383. package/dist/providers/social/youtube.d.ts.map +1 -1
  384. package/dist/providers/types.d.ts +116 -4
  385. package/dist/providers/types.d.ts.map +1 -1
  386. package/dist/providers/web/crawl-worker.d.ts.map +1 -1
  387. package/dist/providers/web/extract.d.ts +16 -0
  388. package/dist/providers/web/extract.d.ts.map +1 -1
  389. package/dist/providers/web/index.d.ts.map +1 -1
  390. package/dist/providers/workflow-contracts.d.ts +53 -0
  391. package/dist/providers/workflow-contracts.d.ts.map +1 -0
  392. package/dist/providers/workflows.d.ts +30 -6
  393. package/dist/providers/workflows.d.ts.map +1 -1
  394. package/dist/providers-G36AM3Z2.js +121 -0
  395. package/dist/providers-G36AM3Z2.js.map +1 -0
  396. package/dist/public-surface/generated-manifest.d.ts +1168 -0
  397. package/dist/public-surface/generated-manifest.d.ts.map +1 -0
  398. package/dist/public-surface/source.d.ts +437 -0
  399. package/dist/public-surface/source.d.ts.map +1 -0
  400. package/dist/relay/protocol.d.ts +108 -4
  401. package/dist/relay/protocol.d.ts.map +1 -1
  402. package/dist/relay/relay-endpoints.d.ts +21 -0
  403. package/dist/relay/relay-endpoints.d.ts.map +1 -1
  404. package/dist/relay/relay-server.d.ts +32 -1
  405. package/dist/relay/relay-server.d.ts.map +1 -1
  406. package/dist/relay/relay-types.d.ts +3 -0
  407. package/dist/relay/relay-types.d.ts.map +1 -1
  408. package/dist/skills/bundled-skill-directories.d.ts +8 -0
  409. package/dist/skills/bundled-skill-directories.d.ts.map +1 -0
  410. package/dist/skills/skill-loader.d.ts +9 -1
  411. package/dist/skills/skill-loader.d.ts.map +1 -1
  412. package/dist/skills/skill-loader.js +7 -0
  413. package/dist/skills/skill-loader.js.map +1 -0
  414. package/dist/skills/skill-nudge.d.ts.map +1 -1
  415. package/dist/skills/types.d.ts +31 -0
  416. package/dist/skills/types.d.ts.map +1 -1
  417. package/dist/snapshot/ops-snapshot.d.ts +1 -1
  418. package/dist/snapshot/ops-snapshot.d.ts.map +1 -1
  419. package/dist/snapshot/refs.d.ts +6 -1
  420. package/dist/snapshot/refs.d.ts.map +1 -1
  421. package/dist/snapshot/snapshotter.d.ts.map +1 -1
  422. package/dist/tools/annotate.d.ts.map +1 -1
  423. package/dist/tools/canvas.d.ts +4 -0
  424. package/dist/tools/canvas.d.ts.map +1 -0
  425. package/dist/tools/check.d.ts.map +1 -1
  426. package/dist/tools/click.d.ts.map +1 -1
  427. package/dist/tools/clone_component.d.ts.map +1 -1
  428. package/dist/tools/clone_page.d.ts.map +1 -1
  429. package/dist/tools/connect.d.ts.map +1 -1
  430. package/dist/tools/deps.d.ts +6 -0
  431. package/dist/tools/deps.d.ts.map +1 -1
  432. package/dist/tools/desktop-shared.d.ts +6 -0
  433. package/dist/tools/desktop-shared.d.ts.map +1 -0
  434. package/dist/tools/desktop_accessibility_snapshot.d.ts +4 -0
  435. package/dist/tools/desktop_accessibility_snapshot.d.ts.map +1 -0
  436. package/dist/tools/desktop_active_window.d.ts +4 -0
  437. package/dist/tools/desktop_active_window.d.ts.map +1 -0
  438. package/dist/tools/desktop_capture_desktop.d.ts +4 -0
  439. package/dist/tools/desktop_capture_desktop.d.ts.map +1 -0
  440. package/dist/tools/desktop_capture_window.d.ts +4 -0
  441. package/dist/tools/desktop_capture_window.d.ts.map +1 -0
  442. package/dist/tools/desktop_status.d.ts +4 -0
  443. package/dist/tools/desktop_status.d.ts.map +1 -0
  444. package/dist/tools/desktop_windows.d.ts +4 -0
  445. package/dist/tools/desktop_windows.d.ts.map +1 -0
  446. package/dist/tools/dialog.d.ts +4 -0
  447. package/dist/tools/dialog.d.ts.map +1 -0
  448. package/dist/tools/dom_get_html.d.ts.map +1 -1
  449. package/dist/tools/dom_get_text.d.ts.map +1 -1
  450. package/dist/tools/get_attr.d.ts.map +1 -1
  451. package/dist/tools/get_value.d.ts.map +1 -1
  452. package/dist/tools/goto.d.ts.map +1 -1
  453. package/dist/tools/hover.d.ts.map +1 -1
  454. package/dist/tools/index.d.ts +3 -0
  455. package/dist/tools/index.d.ts.map +1 -1
  456. package/dist/tools/is_checked.d.ts.map +1 -1
  457. package/dist/tools/is_enabled.d.ts.map +1 -1
  458. package/dist/tools/is_visible.d.ts.map +1 -1
  459. package/dist/tools/launch.d.ts.map +1 -1
  460. package/dist/tools/macro_resolve.d.ts.map +1 -1
  461. package/dist/tools/perf.d.ts.map +1 -1
  462. package/dist/tools/pointer_down.d.ts +4 -0
  463. package/dist/tools/pointer_down.d.ts.map +1 -0
  464. package/dist/tools/pointer_drag.d.ts +4 -0
  465. package/dist/tools/pointer_drag.d.ts.map +1 -0
  466. package/dist/tools/pointer_move.d.ts +4 -0
  467. package/dist/tools/pointer_move.d.ts.map +1 -0
  468. package/dist/tools/pointer_up.d.ts +4 -0
  469. package/dist/tools/pointer_up.d.ts.map +1 -0
  470. package/dist/tools/press.d.ts.map +1 -1
  471. package/dist/tools/product_video_run.d.ts.map +1 -1
  472. package/dist/tools/prompting_guide.d.ts.map +1 -1
  473. package/dist/tools/research_run.d.ts.map +1 -1
  474. package/dist/tools/response.d.ts +4 -1
  475. package/dist/tools/response.d.ts.map +1 -1
  476. package/dist/tools/review.d.ts +4 -0
  477. package/dist/tools/review.d.ts.map +1 -0
  478. package/dist/tools/screencast_start.d.ts +4 -0
  479. package/dist/tools/screencast_start.d.ts.map +1 -0
  480. package/dist/tools/screencast_stop.d.ts +4 -0
  481. package/dist/tools/screencast_stop.d.ts.map +1 -0
  482. package/dist/tools/screenshot.d.ts.map +1 -1
  483. package/dist/tools/scroll.d.ts.map +1 -1
  484. package/dist/tools/scroll_into_view.d.ts.map +1 -1
  485. package/dist/tools/select.d.ts.map +1 -1
  486. package/dist/tools/session_inspector.d.ts +4 -0
  487. package/dist/tools/session_inspector.d.ts.map +1 -0
  488. package/dist/tools/shopping_run.d.ts.map +1 -1
  489. package/dist/tools/skill_list.d.ts.map +1 -1
  490. package/dist/tools/skill_load.d.ts.map +1 -1
  491. package/dist/tools/snapshot.d.ts.map +1 -1
  492. package/dist/tools/type.d.ts.map +1 -1
  493. package/dist/tools/uncheck.d.ts.map +1 -1
  494. package/dist/tools/upload.d.ts +4 -0
  495. package/dist/tools/upload.d.ts.map +1 -0
  496. package/dist/tools/wait.d.ts.map +1 -1
  497. package/dist/tools/workflow-runtime.d.ts +4 -2
  498. package/dist/tools/workflow-runtime.d.ts.map +1 -1
  499. package/dist/utils/package-assets.d.ts +4 -0
  500. package/dist/utils/package-assets.d.ts.map +1 -0
  501. package/extension/canvas.html +1006 -0
  502. package/extension/dist/annotate-content.css +15 -6
  503. package/extension/dist/annotate-content.js +175 -35
  504. package/extension/dist/annotation-payload.js +199 -0
  505. package/extension/dist/background.js +544 -69
  506. package/extension/dist/canvas/canvas-runtime.js +1490 -0
  507. package/extension/dist/canvas/model.js +341 -0
  508. package/extension/dist/canvas/viewport-fit.js +67 -0
  509. package/extension/dist/canvas-page.js +3609 -0
  510. package/extension/dist/ops/dom-bridge.js +255 -3
  511. package/extension/dist/ops/ops-runtime.js +3324 -301
  512. package/extension/dist/ops/ops-session-store.js +97 -112
  513. package/extension/dist/ops/snapshot-builder.js +2 -2
  514. package/extension/dist/ops/snapshot-shared.js +2 -2
  515. package/extension/dist/ops/target-session-coordinator.js +159 -0
  516. package/extension/dist/popup.js +201 -42
  517. package/extension/dist/services/CDPRouter.js +1567 -63
  518. package/extension/dist/services/ConnectionManager.js +453 -78
  519. package/extension/dist/services/RelayClient.js +79 -30
  520. package/extension/dist/services/TabManager.js +118 -22
  521. package/extension/dist/services/TargetSessionMap.js +127 -3
  522. package/extension/dist/services/attach-errors.js +20 -0
  523. package/extension/dist/services/cdp-router-commands.js +135 -8
  524. package/extension/dist/services/url-restrictions.js +9 -13
  525. package/extension/dist/types.js +2 -0
  526. package/extension/manifest.json +2 -2
  527. package/extension/popup.html +59 -6
  528. package/package.json +19 -9
  529. package/skills/AGENTS.md +8 -4
  530. package/skills/opendevbrowser-best-practices/SKILL.md +183 -6
  531. package/skills/opendevbrowser-best-practices/artifacts/browser-agent-known-issues-matrix.md +1 -0
  532. package/skills/opendevbrowser-best-practices/artifacts/canvas-governance-playbook.md +141 -0
  533. package/skills/opendevbrowser-best-practices/artifacts/command-channel-reference.md +129 -19
  534. package/skills/opendevbrowser-best-practices/artifacts/parity-gates.md +9 -2
  535. package/skills/opendevbrowser-best-practices/artifacts/provider-workflows.md +6 -0
  536. package/skills/opendevbrowser-best-practices/artifacts/skill-runtime-surface-matrix.md +58 -0
  537. package/skills/opendevbrowser-best-practices/assets/templates/canvas-blocker-checklist.json +70 -0
  538. package/skills/opendevbrowser-best-practices/assets/templates/canvas-feedback-eval.json +73 -0
  539. package/skills/opendevbrowser-best-practices/assets/templates/canvas-generation-plan.v1.json +67 -0
  540. package/skills/opendevbrowser-best-practices/assets/templates/canvas-handshake-example.json +126 -0
  541. package/skills/opendevbrowser-best-practices/assets/templates/robustness-checklist.json +57 -0
  542. package/skills/opendevbrowser-best-practices/assets/templates/skill-runtime-pack-matrix.json +674 -0
  543. package/skills/opendevbrowser-best-practices/assets/templates/surface-audit-checklist.json +12 -3
  544. package/skills/opendevbrowser-best-practices/scripts/odb-workflow.sh +107 -12
  545. package/skills/opendevbrowser-best-practices/scripts/resolve-odb-cli.sh +100 -0
  546. package/skills/opendevbrowser-best-practices/scripts/run-robustness-audit.sh +83 -1
  547. package/skills/opendevbrowser-best-practices/scripts/validate-skill-assets.sh +365 -84
  548. package/skills/opendevbrowser-best-practices/scripts/validator-fixture-cli.sh +208 -0
  549. package/skills/opendevbrowser-continuity-ledger/SKILL.md +14 -1
  550. package/skills/opendevbrowser-continuity-ledger/scripts/validate-skill-assets.sh +61 -0
  551. package/skills/opendevbrowser-data-extraction/SKILL.md +6 -0
  552. package/skills/opendevbrowser-data-extraction/scripts/validate-skill-assets.sh +112 -0
  553. package/skills/opendevbrowser-design-agent/SKILL.md +275 -0
  554. package/skills/opendevbrowser-design-agent/artifacts/app-shell-and-state-wiring.md +84 -0
  555. package/skills/opendevbrowser-design-agent/artifacts/async-search-state-ownership.md +58 -0
  556. package/skills/opendevbrowser-design-agent/artifacts/component-pattern-index.md +130 -0
  557. package/skills/opendevbrowser-design-agent/artifacts/design-contract-playbook.md +157 -0
  558. package/skills/opendevbrowser-design-agent/artifacts/design-release-gate.md +40 -0
  559. package/skills/opendevbrowser-design-agent/artifacts/design-workflows.md +153 -0
  560. package/skills/opendevbrowser-design-agent/artifacts/existing-surface-adaptation.md +56 -0
  561. package/skills/opendevbrowser-design-agent/artifacts/external-pattern-synthesis.md +103 -0
  562. package/skills/opendevbrowser-design-agent/artifacts/frontend-evaluation-rubric.md +61 -0
  563. package/skills/opendevbrowser-design-agent/artifacts/implementation-anti-patterns.md +163 -0
  564. package/skills/opendevbrowser-design-agent/artifacts/isolated-preview-validation.md +68 -0
  565. package/skills/opendevbrowser-design-agent/artifacts/loading-and-feedback-surfaces.md +56 -0
  566. package/skills/opendevbrowser-design-agent/artifacts/opendevbrowser-ui-example-map.md +44 -0
  567. package/skills/opendevbrowser-design-agent/artifacts/performance-audit-playbook.md +70 -0
  568. package/skills/opendevbrowser-design-agent/artifacts/research-harvest-workflow.md +81 -0
  569. package/skills/opendevbrowser-design-agent/artifacts/scroll-reveal-surface-planning.md +64 -0
  570. package/skills/opendevbrowser-design-agent/artifacts/state-ownership-matrix.md +36 -0
  571. package/skills/opendevbrowser-design-agent/artifacts/theming-and-token-ownership.md +43 -0
  572. package/skills/opendevbrowser-design-agent/assets/templates/canvas-generation-plan.design.v1.json +58 -0
  573. package/skills/opendevbrowser-design-agent/assets/templates/design-audit-report.v1.md +34 -0
  574. package/skills/opendevbrowser-design-agent/assets/templates/design-brief.v1.md +40 -0
  575. package/skills/opendevbrowser-design-agent/assets/templates/design-contract.v1.json +226 -0
  576. package/skills/opendevbrowser-design-agent/assets/templates/design-release-gate.v1.json +35 -0
  577. package/skills/opendevbrowser-design-agent/assets/templates/design-review-checklist.json +57 -0
  578. package/skills/opendevbrowser-design-agent/assets/templates/real-surface-design-matrix.json +32 -0
  579. package/skills/opendevbrowser-design-agent/assets/templates/reference-pattern-board.v1.json +31 -0
  580. package/skills/opendevbrowser-design-agent/scripts/design-workflow.sh +171 -0
  581. package/skills/opendevbrowser-design-agent/scripts/extract-canvas-plan.sh +56 -0
  582. package/skills/opendevbrowser-design-agent/scripts/validate-skill-assets.sh +223 -0
  583. package/skills/opendevbrowser-form-testing/SKILL.md +19 -3
  584. package/skills/opendevbrowser-form-testing/artifacts/form-workflows.md +5 -4
  585. package/skills/opendevbrowser-form-testing/assets/templates/challenge-decision-tree.json +2 -0
  586. package/skills/opendevbrowser-form-testing/scripts/validate-skill-assets.sh +109 -0
  587. package/skills/opendevbrowser-login-automation/SKILL.md +21 -3
  588. package/skills/opendevbrowser-login-automation/artifacts/login-workflows.md +5 -4
  589. package/skills/opendevbrowser-login-automation/assets/templates/auth-signals.json +5 -0
  590. package/skills/opendevbrowser-login-automation/assets/templates/login-scenario-matrix.json +3 -2
  591. package/skills/opendevbrowser-login-automation/scripts/run-login-workflow.sh +17 -1
  592. package/skills/opendevbrowser-login-automation/scripts/validate-skill-assets.sh +133 -0
  593. package/skills/opendevbrowser-product-presentation-asset/SKILL.md +23 -11
  594. package/skills/opendevbrowser-product-presentation-asset/artifacts/asset-pack-assembly.md +5 -3
  595. package/skills/opendevbrowser-product-presentation-asset/assets/templates/shot-list.md +2 -0
  596. package/skills/opendevbrowser-product-presentation-asset/assets/templates/video-assembly.md +3 -2
  597. package/skills/opendevbrowser-product-presentation-asset/scripts/capture-screenshots.sh +5 -1
  598. package/skills/opendevbrowser-product-presentation-asset/scripts/collect-product.sh +6 -2
  599. package/skills/opendevbrowser-product-presentation-asset/scripts/download-images.sh +5 -1
  600. package/skills/opendevbrowser-product-presentation-asset/scripts/render-video-brief.sh +20 -7
  601. package/skills/opendevbrowser-product-presentation-asset/scripts/validate-skill-assets.sh +39 -0
  602. package/skills/opendevbrowser-product-presentation-asset/scripts/write-manifest.sh +5 -1
  603. package/skills/opendevbrowser-research/SKILL.md +14 -6
  604. package/skills/opendevbrowser-research/scripts/render-output.sh +5 -1
  605. package/skills/opendevbrowser-research/scripts/run-research.sh +5 -1
  606. package/skills/opendevbrowser-research/scripts/validate-skill-assets.sh +45 -0
  607. package/skills/opendevbrowser-research/scripts/write-artifacts.sh +5 -1
  608. package/skills/opendevbrowser-shopping/SKILL.md +20 -1
  609. package/skills/opendevbrowser-shopping/scripts/normalize-offers.sh +6 -2
  610. package/skills/opendevbrowser-shopping/scripts/run-deal-hunt.sh +5 -1
  611. package/skills/opendevbrowser-shopping/scripts/run-shopping.sh +5 -1
  612. package/skills/opendevbrowser-shopping/scripts/validate-skill-assets.sh +54 -0
  613. package/dist/chunk-ST7CO5FA.js +0 -18668
  614. package/dist/chunk-ST7CO5FA.js.map +0 -1
  615. /package/dist/{chunk-7W3SPXIB.js.map → chunk-FUSXMW3G.js.map} +0 -0
  616. /package/dist/{macros-NUBRM44Y.js.map → macros-ND2M7LWU.js.map} +0 -0
package/extension/canvas.html ADDED
@@ -0,0 +1,1006 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>OpenDevBrowser Canvas</title>
7
+ <style>
8
+ :root {
9
+ color-scheme: dark;
10
+ --bg: #06101a;
11
+ --panel: rgba(10, 20, 32, 0.9);
12
+ --panel-border: rgba(148, 163, 184, 0.14);
13
+ --text: #e6eef8;
14
+ --muted: #8fa4bb;
15
+ --surface-bg: #ffffff;
16
+ --surface-grid: rgba(148, 163, 184, 0.18);
17
+ --surface-text: #0f172a;
18
+ --accent: #20d5c6;
19
+ --accent-strong: #0ea5e9;
20
+ --danger: #fb7185;
21
+ --shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
22
+ }
23
+
24
+ * {
25
+ box-sizing: border-box;
26
+ }
27
+
28
+ body {
29
+ margin: 0;
30
+ min-height: 100vh;
31
+ font-family: "Segoe UI", sans-serif;
32
+ color: var(--text);
33
+ background:
34
+ radial-gradient(circle at top left, rgba(32, 213, 198, 0.12), transparent 26rem),
35
+ radial-gradient(circle at top right, rgba(14, 165, 233, 0.16), transparent 22rem),
36
+ linear-gradient(180deg, #06101a 0%, #08131f 100%);
37
+ }
38
+
39
+ button,
40
+ input,
41
+ textarea {
42
+ font: inherit;
43
+ }
44
+
45
+ .canvas-shell {
46
+ display: grid;
47
+ gap: 18px;
48
+ min-height: 100vh;
49
+ padding: 22px;
50
+ }
51
+
52
+ .canvas-header,
53
+ .canvas-toolbar,
54
+ .canvas-sidebar,
55
+ .canvas-stage-card,
56
+ .canvas-preview-card {
57
+ border: 1px solid var(--panel-border);
58
+ background: var(--panel);
59
+ box-shadow: var(--shadow);
60
+ backdrop-filter: blur(16px);
61
+ }
62
+
63
+ .canvas-header {
64
+ display: grid;
65
+ gap: 14px;
66
+ padding: 18px 20px;
67
+ border-radius: 22px;
68
+ }
69
+
70
+ .canvas-title-row,
71
+ .canvas-toolbar {
72
+ display: flex;
73
+ flex-wrap: wrap;
74
+ align-items: center;
75
+ justify-content: space-between;
76
+ gap: 12px;
77
+ }
78
+
79
+ .canvas-title {
80
+ margin: 0;
81
+ font-size: 1.35rem;
82
+ font-weight: 700;
83
+ letter-spacing: 0.01em;
84
+ }
85
+
86
+ .canvas-badges {
87
+ display: flex;
88
+ flex-wrap: wrap;
89
+ gap: 8px;
90
+ }
91
+
92
+ .canvas-badge {
93
+ display: inline-flex;
94
+ align-items: center;
95
+ gap: 6px;
96
+ padding: 6px 10px;
97
+ border-radius: 999px;
98
+ border: 1px solid rgba(32, 213, 198, 0.22);
99
+ background: rgba(32, 213, 198, 0.08);
100
+ color: #d7fbf7;
101
+ font-size: 0.82rem;
102
+ text-transform: capitalize;
103
+ }
104
+
105
+ .canvas-meta {
106
+ display: flex;
107
+ flex-wrap: wrap;
108
+ gap: 12px 18px;
109
+ color: var(--muted);
110
+ font-size: 0.9rem;
111
+ }
112
+
113
+ .canvas-toolbar {
114
+ padding: 12px 16px;
115
+ border-radius: 18px;
116
+ }
117
+
118
+ .canvas-actions,
119
+ .canvas-toolbar-meta {
120
+ display: flex;
121
+ flex-wrap: wrap;
122
+ gap: 10px;
123
+ align-items: center;
124
+ }
125
+
126
+ .canvas-button {
127
+ border: 1px solid rgba(143, 164, 187, 0.24);
128
+ background: rgba(143, 164, 187, 0.08);
129
+ color: var(--text);
130
+ padding: 8px 12px;
131
+ border-radius: 12px;
132
+ cursor: pointer;
133
+ }
134
+
135
+ .canvas-button:disabled {
136
+ opacity: 0.55;
137
+ cursor: default;
138
+ }
139
+
140
+ .canvas-button-primary {
141
+ border-color: rgba(32, 213, 198, 0.26);
142
+ background: rgba(32, 213, 198, 0.12);
143
+ }
144
+
145
+ .canvas-button-danger {
146
+ border-color: rgba(251, 113, 133, 0.26);
147
+ background: rgba(251, 113, 133, 0.12);
148
+ color: #ffd7dd;
149
+ }
150
+
151
+ .canvas-layout {
152
+ display: grid;
153
+ grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(300px, 380px);
154
+ gap: 18px;
155
+ align-items: start;
156
+ min-height: 0;
157
+ flex: 1 1 auto;
158
+ }
159
+
160
+ .canvas-sidebar,
161
+ .canvas-preview-card {
162
+ display: grid;
163
+ gap: 18px;
164
+ align-self: start;
165
+ align-content: start;
166
+ padding: 18px;
167
+ border-radius: 24px;
168
+ }
169
+
170
+ .canvas-stage-card {
171
+ display: grid;
172
+ gap: 12px;
173
+ align-self: start;
174
+ padding: 14px;
175
+ border-radius: 28px;
176
+ min-height: 70vh;
177
+ overflow: hidden;
178
+ }
179
+
180
+ .canvas-stage-meta {
181
+ display: flex;
182
+ flex-wrap: wrap;
183
+ justify-content: space-between;
184
+ gap: 10px;
185
+ color: var(--muted);
186
+ font-size: 0.85rem;
187
+ }
188
+
189
+ .canvas-stage {
190
+ position: relative;
191
+ min-height: 64vh;
192
+ border-radius: 20px;
193
+ background:
194
+ linear-gradient(var(--surface-grid) 1px, transparent 1px),
195
+ linear-gradient(90deg, var(--surface-grid) 1px, transparent 1px),
196
+ var(--surface-bg);
197
+ background-size: 32px 32px, 32px 32px, auto;
198
+ overflow: hidden;
199
+ overscroll-behavior: contain;
200
+ cursor: grab;
201
+ }
202
+
203
+ .canvas-stage[data-mode="panning"] {
204
+ cursor: grabbing;
205
+ }
206
+
207
+ .canvas-stage-inner {
208
+ position: absolute;
209
+ inset: 0;
210
+ transform-origin: 0 0;
211
+ }
212
+
213
+ .canvas-node {
214
+ position: absolute;
215
+ display: block;
216
+ margin: 0;
217
+ border: 0;
218
+ background: transparent;
219
+ color: var(--surface-text);
220
+ box-shadow: none;
221
+ user-select: none;
222
+ overflow: hidden;
223
+ transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
224
+ will-change: transform;
225
+ }
226
+
227
+ .canvas-node[data-selected="true"] {
228
+ outline: 2px solid rgba(32, 213, 198, 0.7);
229
+ outline-offset: 3px;
230
+ }
231
+
232
+ .canvas-node:hover {
233
+ transform: translateY(-2px);
234
+ box-shadow: 0 14px 28px rgba(2, 8, 23, 0.28);
235
+ filter: brightness(1.03);
236
+ }
237
+
238
+ .canvas-node button,
239
+ .canvas-node input,
240
+ .canvas-node textarea {
241
+ font: inherit;
242
+ }
243
+
244
+ .canvas-node-row,
245
+ .canvas-node-tabs-trigger {
246
+ display: inline-flex;
247
+ align-items: center;
248
+ justify-content: center;
249
+ gap: 10px;
250
+ width: 100%;
251
+ min-height: 100%;
252
+ }
253
+
254
+ .canvas-node-tabs-trigger {
255
+ border-radius: inherit;
256
+ background: rgba(15, 23, 42, 0.06);
257
+ padding: 6px 10px;
258
+ }
259
+
260
+ .canvas-node-label {
261
+ line-height: 1.1;
262
+ }
263
+
264
+ .canvas-node-card-header {
265
+ display: flex;
266
+ align-items: flex-start;
267
+ justify-content: space-between;
268
+ gap: 12px;
269
+ }
270
+
271
+ .canvas-node-card-title {
272
+ font-size: 1em;
273
+ font-weight: 700;
274
+ line-height: 1.2;
275
+ }
276
+
277
+ .canvas-node-card-copy {
278
+ display: grid;
279
+ gap: 8px;
280
+ margin-top: 12px;
281
+ color: inherit;
282
+ opacity: 0.84;
283
+ font-size: 0.92em;
284
+ line-height: 1.45;
285
+ }
286
+
287
+ .canvas-node-card-copy p {
288
+ margin: 0;
289
+ }
290
+
291
+ .canvas-node-inline-list {
292
+ display: flex;
293
+ flex-wrap: wrap;
294
+ gap: 16px;
295
+ align-items: center;
296
+ }
297
+
298
+ .canvas-node-inline-item {
299
+ white-space: nowrap;
300
+ }
301
+
302
+ .canvas-node-icon,
303
+ .canvas-node-icon-stack {
304
+ display: inline-flex;
305
+ align-items: center;
306
+ justify-content: center;
307
+ gap: 8px;
308
+ flex: none;
309
+ }
310
+
311
+ .canvas-node-icon {
312
+ width: 1.1rem;
313
+ height: 1.1rem;
314
+ border-radius: 999px;
315
+ font-size: 0.88rem;
316
+ line-height: 1;
317
+ }
318
+
319
+ .canvas-node-icon svg {
320
+ width: 100%;
321
+ height: 100%;
322
+ display: block;
323
+ }
324
+
325
+ .canvas-node-icon[data-library="tabler"] {
326
+ color: #dff5ff;
327
+ }
328
+
329
+ .canvas-node-icon[data-library="microsoft-fluent-ui-system-icons"] {
330
+ color: #fee2ff;
331
+ }
332
+
333
+ .canvas-node-icon[data-library="3dicons"] {
334
+ background: linear-gradient(145deg, #7ef9e9 0%, #22c3ee 48%, #ff7aa2 100%);
335
+ color: #06101a;
336
+ }
337
+
338
+ .canvas-node-icon[data-library="@lobehub/fluent-emoji-3d"] {
339
+ font-size: 1rem;
340
+ }
341
+
342
+ .canvas-node-media-shell {
343
+ display: grid;
344
+ place-items: center;
345
+ background: rgba(15, 23, 42, 0.04);
346
+ }
347
+
348
+ .canvas-node-media,
349
+ .canvas-node-media-placeholder {
350
+ width: 100%;
351
+ }
352
+
353
+ .canvas-node-media-image,
354
+ .canvas-node-media-video {
355
+ height: 100%;
356
+ object-fit: cover;
357
+ }
358
+
359
+ .canvas-node-media-audio {
360
+ min-height: 52px;
361
+ }
362
+
363
+ .canvas-node-media-placeholder {
364
+ display: inline-flex;
365
+ align-items: center;
366
+ justify-content: center;
367
+ min-height: 100%;
368
+ padding: 14px;
369
+ color: rgba(229, 239, 248, 0.7);
370
+ font-size: 0.84rem;
371
+ text-transform: capitalize;
372
+ }
373
+
374
+ .canvas-panel {
375
+ display: grid;
376
+ gap: 12px;
377
+ }
378
+
379
+ .canvas-panel h2 {
380
+ margin: 0;
381
+ font-size: 0.82rem;
382
+ letter-spacing: 0.08em;
383
+ text-transform: uppercase;
384
+ color: var(--muted);
385
+ }
386
+
387
+ .canvas-panel-header {
388
+ display: flex;
389
+ align-items: center;
390
+ justify-content: space-between;
391
+ gap: 12px;
392
+ }
393
+
394
+ .canvas-panel-subtitle,
395
+ .canvas-history-status {
396
+ font-size: 0.78rem;
397
+ color: var(--muted);
398
+ line-height: 1.35;
399
+ }
400
+
401
+ .canvas-page-select {
402
+ width: 100%;
403
+ border: 1px solid rgba(143, 164, 187, 0.18);
404
+ background: rgba(4, 11, 18, 0.64);
405
+ color: var(--text);
406
+ padding: 10px 12px;
407
+ border-radius: 12px;
408
+ }
409
+
410
+ .canvas-summary-list,
411
+ .canvas-feedback-list,
412
+ .canvas-token-list {
413
+ display: grid;
414
+ gap: 10px;
415
+ }
416
+
417
+ .canvas-summary-item,
418
+ .canvas-feedback-item,
419
+ .canvas-token-item {
420
+ display: grid;
421
+ gap: 4px;
422
+ padding-bottom: 10px;
423
+ border-bottom: 1px solid rgba(148, 163, 184, 0.12);
424
+ }
425
+
426
+ .canvas-summary-item:last-child,
427
+ .canvas-feedback-item:last-child {
428
+ padding-bottom: 0;
429
+ border-bottom: 0;
430
+ }
431
+
432
+ .canvas-summary-label,
433
+ .canvas-feedback-meta {
434
+ font-size: 0.72rem;
435
+ letter-spacing: 0.08em;
436
+ text-transform: uppercase;
437
+ color: var(--muted);
438
+ }
439
+
440
+ .canvas-summary-value,
441
+ .canvas-feedback-message {
442
+ font-size: 0.92rem;
443
+ line-height: 1.45;
444
+ word-break: break-word;
445
+ }
446
+
447
+ .canvas-feedback-severity-warning {
448
+ color: #facc15;
449
+ }
450
+
451
+ .canvas-feedback-severity-error {
452
+ color: #fb7185;
453
+ }
454
+
455
+ .canvas-field {
456
+ display: grid;
457
+ gap: 8px;
458
+ }
459
+
460
+ .canvas-actions-grid {
461
+ display: grid;
462
+ grid-template-columns: repeat(2, minmax(0, 1fr));
463
+ gap: 8px;
464
+ }
465
+
466
+ .canvas-actions-grid .canvas-button {
467
+ width: 100%;
468
+ }
469
+
470
+ .canvas-field label {
471
+ color: var(--muted);
472
+ font-size: 0.82rem;
473
+ }
474
+
475
+ .canvas-input,
476
+ .canvas-textarea {
477
+ width: 100%;
478
+ border: 1px solid rgba(143, 164, 187, 0.18);
479
+ background: rgba(4, 11, 18, 0.64);
480
+ color: var(--text);
481
+ padding: 10px 12px;
482
+ border-radius: 12px;
483
+ }
484
+
485
+ .canvas-textarea {
486
+ min-height: 92px;
487
+ resize: vertical;
488
+ }
489
+
490
+ .canvas-field-grid,
491
+ .canvas-property-grid {
492
+ display: grid;
493
+ gap: 10px;
494
+ grid-template-columns: repeat(2, minmax(0, 1fr));
495
+ }
496
+
497
+ .canvas-properties-grid {
498
+ display: grid;
499
+ gap: 12px;
500
+ }
501
+
502
+ .canvas-property-section {
503
+ display: grid;
504
+ gap: 10px;
505
+ padding: 12px;
506
+ border-radius: 16px;
507
+ border: 1px solid rgba(148, 163, 184, 0.12);
508
+ background: rgba(4, 11, 18, 0.42);
509
+ }
510
+
511
+ .canvas-property-section h3 {
512
+ margin: 0;
513
+ font-size: 0.76rem;
514
+ letter-spacing: 0.08em;
515
+ text-transform: uppercase;
516
+ color: var(--muted);
517
+ }
518
+
519
+ .canvas-layer-list,
520
+ .canvas-layer-children {
521
+ display: grid;
522
+ gap: 8px;
523
+ }
524
+
525
+ .canvas-layer-row {
526
+ display: grid;
527
+ gap: 8px;
528
+ padding: 10px;
529
+ border-radius: 14px;
530
+ border: 1px solid rgba(148, 163, 184, 0.12);
531
+ background: rgba(4, 11, 18, 0.44);
532
+ }
533
+
534
+ .canvas-layer-row[data-selected="true"] {
535
+ border-color: rgba(32, 213, 198, 0.3);
536
+ background: rgba(32, 213, 198, 0.08);
537
+ }
538
+
539
+ .canvas-layer-row[data-hidden="true"] {
540
+ opacity: 0.7;
541
+ }
542
+
543
+ .canvas-layer-head,
544
+ .canvas-layer-main,
545
+ .canvas-history-row,
546
+ .canvas-annotation-mode {
547
+ display: flex;
548
+ align-items: center;
549
+ gap: 8px;
550
+ }
551
+
552
+ .canvas-layer-main {
553
+ flex: 1 1 auto;
554
+ min-width: 0;
555
+ }
556
+
557
+ .canvas-layer-toggle,
558
+ .canvas-layer-visibility {
559
+ width: 32px;
560
+ min-width: 32px;
561
+ padding: 6px 0;
562
+ text-align: center;
563
+ }
564
+
565
+ .canvas-layer-name-input {
566
+ flex: 1 1 auto;
567
+ min-width: 0;
568
+ border: 1px solid rgba(143, 164, 187, 0.18);
569
+ background: rgba(4, 11, 18, 0.5);
570
+ color: var(--text);
571
+ padding: 8px 10px;
572
+ border-radius: 10px;
573
+ }
574
+
575
+ .canvas-layer-meta,
576
+ .canvas-empty-inline {
577
+ font-size: 0.76rem;
578
+ color: var(--muted);
579
+ line-height: 1.35;
580
+ }
581
+
582
+ .canvas-pill-list {
583
+ display: flex;
584
+ flex-wrap: wrap;
585
+ gap: 8px;
586
+ }
587
+
588
+ .canvas-pill {
589
+ display: inline-flex;
590
+ align-items: center;
591
+ padding: 5px 9px;
592
+ border-radius: 999px;
593
+ background: rgba(143, 164, 187, 0.12);
594
+ color: var(--text);
595
+ font-size: 0.76rem;
596
+ }
597
+
598
+ .canvas-stage-overlay {
599
+ position: absolute;
600
+ inset: 0;
601
+ pointer-events: none;
602
+ }
603
+
604
+ .canvas-stage-marquee {
605
+ position: absolute;
606
+ border: 1px solid rgba(32, 213, 198, 0.85);
607
+ background: rgba(32, 213, 198, 0.14);
608
+ border-radius: 12px;
609
+ box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.28);
610
+ }
611
+
612
+ .canvas-annotation-list {
613
+ display: grid;
614
+ gap: 10px;
615
+ }
616
+
617
+ .canvas-annotation-item {
618
+ display: grid;
619
+ gap: 8px;
620
+ padding: 10px;
621
+ border-radius: 14px;
622
+ border: 1px solid rgba(148, 163, 184, 0.16);
623
+ background: rgba(4, 11, 18, 0.52);
624
+ }
625
+
626
+ .canvas-annotation-head {
627
+ display: flex;
628
+ justify-content: space-between;
629
+ gap: 10px;
630
+ align-items: flex-start;
631
+ }
632
+
633
+ .canvas-annotation-title {
634
+ font-size: 0.9rem;
635
+ line-height: 1.35;
636
+ word-break: break-word;
637
+ }
638
+
639
+ .canvas-annotation-meta {
640
+ font-size: 0.76rem;
641
+ color: var(--muted);
642
+ }
643
+
644
+ .canvas-annotation-empty {
645
+ font-size: 0.82rem;
646
+ color: var(--muted);
647
+ padding: 12px;
648
+ border-radius: 12px;
649
+ border: 1px dashed rgba(148, 163, 184, 0.2);
650
+ text-align: center;
651
+ }
652
+
653
+ .canvas-preview-frame {
654
+ width: 100%;
655
+ min-height: 42vh;
656
+ border: 0;
657
+ border-radius: 18px;
658
+ background: #ffffff;
659
+ }
660
+
661
+ .canvas-empty {
662
+ display: grid;
663
+ place-items: center;
664
+ min-height: 42vh;
665
+ border-radius: 18px;
666
+ border: 1px dashed rgba(148, 163, 184, 0.24);
667
+ color: var(--muted);
668
+ text-align: center;
669
+ padding: 24px;
670
+ }
671
+
672
+ @media (max-width: 1180px) {
673
+ .canvas-layout {
674
+ grid-template-columns: 1fr;
675
+ }
676
+
677
+ .canvas-stage-card,
678
+ .canvas-stage {
679
+ min-height: 52vh;
680
+ }
681
+ }
682
+
683
+ @media (prefers-reduced-motion: reduce) {
684
+ .canvas-node {
685
+ transition: none;
686
+ }
687
+
688
+ .canvas-node:hover {
689
+ transform: none;
690
+ box-shadow: none;
691
+ filter: none;
692
+ }
693
+ }
694
+ </style>
695
+ </head>
696
+ <body>
697
+ <main class="canvas-shell">
698
+ <section class="canvas-header">
699
+ <div class="canvas-title-row">
700
+ <h1 class="canvas-title" id="canvas-title">OpenDevBrowser Canvas</h1>
701
+ <div class="canvas-badges" id="canvas-badges"></div>
702
+ </div>
703
+ <div class="canvas-meta" id="canvas-meta"></div>
704
+ </section>
705
+
706
+ <section class="canvas-toolbar">
707
+ <div class="canvas-actions">
708
+ <button class="canvas-button" id="canvas-history-undo" type="button">Undo</button>
709
+ <button class="canvas-button" id="canvas-history-redo" type="button">Redo</button>
710
+ <button class="canvas-button" id="canvas-duplicate-node" type="button">Duplicate</button>
711
+ <button class="canvas-button canvas-button-primary" id="canvas-add-note" type="button">Add Note</button>
712
+ <button class="canvas-button" id="canvas-reset-view" type="button">Reset View</button>
713
+ <button class="canvas-button canvas-button-danger" id="canvas-delete-node" type="button">Delete Selected</button>
714
+ </div>
715
+ <div class="canvas-toolbar-meta" id="canvas-toolbar-meta"></div>
716
+ </section>
717
+
718
+ <section class="canvas-layout">
719
+ <aside class="canvas-sidebar">
720
+ <section class="canvas-panel">
721
+ <h2>Session Summary</h2>
722
+ <div class="canvas-summary-list" id="canvas-summary"></div>
723
+ </section>
724
+ <section class="canvas-panel">
725
+ <div class="canvas-panel-header">
726
+ <h2>Pages & Layers</h2>
727
+ <span class="canvas-panel-subtitle" id="canvas-page-details">No page selected.</span>
728
+ </div>
729
+ <div class="canvas-field">
730
+ <label for="canvas-page-select">Active Page</label>
731
+ <select class="canvas-page-select" id="canvas-page-select"></select>
732
+ </div>
733
+ <div class="canvas-layer-list" id="canvas-layers-tree"></div>
734
+ </section>
735
+ <section class="canvas-panel">
736
+ <h2>Feedback</h2>
737
+ <div class="canvas-feedback-list" id="canvas-feedback"></div>
738
+ </section>
739
+ <section class="canvas-panel">
740
+ <h2>Annotations</h2>
741
+ <div class="canvas-annotation-mode">
742
+ <label for="canvas-annotation-mode">Capture Mode</label>
743
+ <select class="canvas-page-select" id="canvas-annotation-mode">
744
+ <option value="selected">Selected node</option>
745
+ <option value="region">Stage region</option>
746
+ </select>
747
+ </div>
748
+ <div class="canvas-actions-grid">
749
+ <button class="canvas-button canvas-button-primary" id="canvas-annotation-add" type="button">Add Selected</button>
750
+ <button class="canvas-button" id="canvas-annotation-copy" type="button">Copy All</button>
751
+ </div>
752
+ <div class="canvas-actions-grid">
753
+ <button class="canvas-button" id="canvas-annotation-send" type="button">Send All</button>
754
+ <div></div>
755
+ </div>
756
+ <div class="canvas-field">
757
+ <label for="canvas-annotation-context">Context</label>
758
+ <textarea class="canvas-textarea" id="canvas-annotation-context" placeholder="Optional context for agent payloads"></textarea>
759
+ </div>
760
+ <div class="canvas-annotation-list" id="canvas-annotation-list">
761
+ <div class="canvas-annotation-empty">No canvas annotations captured yet.</div>
762
+ </div>
763
+ </section>
764
+ </aside>
765
+
766
+ <section class="canvas-stage-card">
767
+ <div class="canvas-stage-meta">
768
+ <div id="canvas-stage-meta">No canvas loaded.</div>
769
+ <div id="canvas-stage-hint">Drag to pan. Scroll to zoom. Drag nodes to move them.</div>
770
+ </div>
771
+ <div class="canvas-stage" id="canvas-stage">
772
+ <div class="canvas-stage-inner" id="canvas-stage-inner"></div>
773
+ <div class="canvas-stage-overlay" id="canvas-stage-overlay"></div>
774
+ </div>
775
+ </section>
776
+
777
+ <section class="canvas-preview-card">
778
+ <section class="canvas-panel">
779
+ <div class="canvas-panel-header">
780
+ <h2>History</h2>
781
+ <span class="canvas-history-status" id="canvas-history-status">No history yet.</span>
782
+ </div>
783
+ <div class="canvas-history-row">
784
+ <button class="canvas-button" id="canvas-history-panel-undo" type="button">Undo</button>
785
+ <button class="canvas-button" id="canvas-history-panel-redo" type="button">Redo</button>
786
+ </div>
787
+ </section>
788
+ <section class="canvas-panel">
789
+ <div class="canvas-panel-header">
790
+ <h2>Properties</h2>
791
+ <span class="canvas-panel-subtitle" id="canvas-properties-status">No node selected.</span>
792
+ </div>
793
+ <div class="canvas-properties-grid">
794
+ <div class="canvas-property-section">
795
+ <h3>Identity</h3>
796
+ <div class="canvas-field">
797
+ <label for="canvas-node-name">Node Name</label>
798
+ <input class="canvas-input" id="canvas-node-name" type="text" />
799
+ </div>
800
+ <div class="canvas-field">
801
+ <label for="canvas-node-text">Node Text</label>
802
+ <textarea class="canvas-textarea" id="canvas-node-text"></textarea>
803
+ </div>
804
+ </div>
805
+ <div class="canvas-property-section">
806
+ <h3>Layout</h3>
807
+ <div class="canvas-property-grid">
808
+ <div class="canvas-field">
809
+ <label for="canvas-node-x">X</label>
810
+ <input class="canvas-input" id="canvas-node-x" type="number" />
811
+ </div>
812
+ <div class="canvas-field">
813
+ <label for="canvas-node-y">Y</label>
814
+ <input class="canvas-input" id="canvas-node-y" type="number" />
815
+ </div>
816
+ <div class="canvas-field">
817
+ <label for="canvas-node-width">Width</label>
818
+ <input class="canvas-input" id="canvas-node-width" type="number" min="1" />
819
+ </div>
820
+ <div class="canvas-field">
821
+ <label for="canvas-node-height">Height</label>
822
+ <input class="canvas-input" id="canvas-node-height" type="number" min="1" />
823
+ </div>
824
+ <div class="canvas-field">
825
+ <label for="canvas-style-padding">Padding</label>
826
+ <input class="canvas-input" id="canvas-style-padding" type="text" />
827
+ </div>
828
+ <div class="canvas-field">
829
+ <label for="canvas-style-gap">Gap</label>
830
+ <input class="canvas-input" id="canvas-style-gap" type="text" />
831
+ </div>
832
+ </div>
833
+ </div>
834
+ <div class="canvas-property-section">
835
+ <h3>Typography</h3>
836
+ <div class="canvas-property-grid">
837
+ <div class="canvas-field">
838
+ <label for="canvas-style-font-size">Font Size</label>
839
+ <input class="canvas-input" id="canvas-style-font-size" type="text" />
840
+ </div>
841
+ <div class="canvas-field">
842
+ <label for="canvas-style-font-weight">Weight</label>
843
+ <input class="canvas-input" id="canvas-style-font-weight" type="text" />
844
+ </div>
845
+ <div class="canvas-field">
846
+ <label for="canvas-style-line-height">Line Height</label>
847
+ <input class="canvas-input" id="canvas-style-line-height" type="text" />
848
+ </div>
849
+ <div class="canvas-field">
850
+ <label for="canvas-style-color">Text Color</label>
851
+ <input class="canvas-input" id="canvas-style-color" type="text" />
852
+ </div>
853
+ </div>
854
+ </div>
855
+ <div class="canvas-property-section">
856
+ <h3>Surface</h3>
857
+ <div class="canvas-property-grid">
858
+ <div class="canvas-field">
859
+ <label for="canvas-style-background">Background</label>
860
+ <input class="canvas-input" id="canvas-style-background" type="text" />
861
+ </div>
862
+ <div class="canvas-field">
863
+ <label for="canvas-style-border-color">Border Color</label>
864
+ <input class="canvas-input" id="canvas-style-border-color" type="text" />
865
+ </div>
866
+ <div class="canvas-field">
867
+ <label for="canvas-style-border-width">Border Width</label>
868
+ <input class="canvas-input" id="canvas-style-border-width" type="text" />
869
+ </div>
870
+ <div class="canvas-field">
871
+ <label for="canvas-style-border-radius">Border Radius</label>
872
+ <input class="canvas-input" id="canvas-style-border-radius" type="text" />
873
+ </div>
874
+ <div class="canvas-field">
875
+ <label for="canvas-style-shadow">Shadow</label>
876
+ <input class="canvas-input" id="canvas-style-shadow" type="text" />
877
+ </div>
878
+ </div>
879
+ </div>
880
+ <div class="canvas-property-section">
881
+ <h3>Binding & Accessibility</h3>
882
+ <div class="canvas-property-grid">
883
+ <div class="canvas-field">
884
+ <label for="canvas-binding-kind">Binding Kind</label>
885
+ <input class="canvas-input" id="canvas-binding-kind" type="text" />
886
+ </div>
887
+ <div class="canvas-field">
888
+ <label for="canvas-binding-component">Component Name</label>
889
+ <input class="canvas-input" id="canvas-binding-component" type="text" />
890
+ </div>
891
+ <div class="canvas-field">
892
+ <label for="canvas-binding-selector">Selector</label>
893
+ <input class="canvas-input" id="canvas-binding-selector" type="text" />
894
+ </div>
895
+ <div class="canvas-field">
896
+ <label for="canvas-a11y-role">A11y Role</label>
897
+ <input class="canvas-input" id="canvas-a11y-role" type="text" />
898
+ </div>
899
+ <div class="canvas-field">
900
+ <label for="canvas-a11y-label">A11y Label</label>
901
+ <input class="canvas-input" id="canvas-a11y-label" type="text" />
902
+ </div>
903
+ </div>
904
+ </div>
905
+ <div class="canvas-property-section">
906
+ <h3>Selection Metadata</h3>
907
+ <div class="canvas-summary-list" id="canvas-selection-meta"></div>
908
+ </div>
909
+ </div>
910
+ </section>
911
+ <section class="canvas-panel">
912
+ <div class="canvas-panel-header">
913
+ <h2>Tokens</h2>
914
+ <span class="canvas-panel-subtitle" id="canvas-token-status">Edit collections, modes, aliases, and bindings.</span>
915
+ </div>
916
+ <div class="canvas-property-section">
917
+ <h3>Collections & Modes</h3>
918
+ <div class="canvas-property-grid">
919
+ <div class="canvas-field">
920
+ <label for="canvas-token-collection-select">Collection</label>
921
+ <select class="canvas-page-select" id="canvas-token-collection-select"></select>
922
+ </div>
923
+ <div class="canvas-field">
924
+ <label for="canvas-token-collection-name">New Collection</label>
925
+ <input class="canvas-input" id="canvas-token-collection-name" type="text" placeholder="brand" />
926
+ </div>
927
+ <div class="canvas-field">
928
+ <label>&nbsp;</label>
929
+ <button class="canvas-button" id="canvas-token-collection-create" type="button">Create Collection</button>
930
+ </div>
931
+ <div class="canvas-field">
932
+ <label for="canvas-token-mode-select">Mode</label>
933
+ <select class="canvas-page-select" id="canvas-token-mode-select"></select>
934
+ </div>
935
+ <div class="canvas-field">
936
+ <label for="canvas-token-mode-name">New Mode</label>
937
+ <input class="canvas-input" id="canvas-token-mode-name" type="text" placeholder="night" />
938
+ </div>
939
+ <div class="canvas-field">
940
+ <label>&nbsp;</label>
941
+ <button class="canvas-button" id="canvas-token-mode-create" type="button">Create Mode</button>
942
+ </div>
943
+ </div>
944
+ </div>
945
+ <div class="canvas-property-section">
946
+ <h3>Token Editor</h3>
947
+ <div class="canvas-property-grid">
948
+ <div class="canvas-field">
949
+ <label for="canvas-token-path">Token Path</label>
950
+ <input class="canvas-input" id="canvas-token-path" type="text" placeholder="theme.primary" />
951
+ </div>
952
+ <div class="canvas-field">
953
+ <label for="canvas-token-value">Value</label>
954
+ <input class="canvas-input" id="canvas-token-value" type="text" placeholder="#111827" />
955
+ </div>
956
+ <div class="canvas-field">
957
+ <label for="canvas-token-alias">Alias Target</label>
958
+ <input class="canvas-input" id="canvas-token-alias" type="text" placeholder="theme.primary" />
959
+ </div>
960
+ <div class="canvas-field">
961
+ <label for="canvas-token-binding-property">Bind Property</label>
962
+ <select class="canvas-page-select" id="canvas-token-binding-property">
963
+ <option value="backgroundColor">backgroundColor</option>
964
+ <option value="color">color</option>
965
+ <option value="borderColor">borderColor</option>
966
+ <option value="borderRadius">borderRadius</option>
967
+ <option value="boxShadow">boxShadow</option>
968
+ <option value="fontSize">fontSize</option>
969
+ </select>
970
+ </div>
971
+ <div class="canvas-field">
972
+ <label>&nbsp;</label>
973
+ <button class="canvas-button canvas-button-primary" id="canvas-token-save" type="button">Save Token</button>
974
+ </div>
975
+ <div class="canvas-field">
976
+ <label>&nbsp;</label>
977
+ <button class="canvas-button" id="canvas-token-bind" type="button">Bind Selected Node</button>
978
+ </div>
979
+ <div class="canvas-field">
980
+ <label>&nbsp;</label>
981
+ <button class="canvas-button" id="canvas-token-binding-clear" type="button">Clear Binding</button>
982
+ </div>
983
+ </div>
984
+ </div>
985
+ <div class="canvas-property-section">
986
+ <h3>Usage</h3>
987
+ <div class="canvas-token-list" id="canvas-token-summary"></div>
988
+ <div class="canvas-summary-list" id="canvas-token-usage"></div>
989
+ </div>
990
+ </section>
991
+ <section class="canvas-panel">
992
+ <h2>Live Preview</h2>
993
+ <iframe
994
+ class="canvas-preview-frame"
995
+ id="canvas-preview"
996
+ sandbox=""
997
+ referrerpolicy="no-referrer"
998
+ title="OpenDevBrowser Canvas Preview"></iframe>
999
+ <div class="canvas-empty" id="canvas-empty">Waiting for canvas state...</div>
1000
+ </section>
1001
+ </section>
1002
+ </section>
1003
+ </main>
1004
+ <script type="module" src="./dist/canvas-page.js"></script>
1005
+ </body>
1006
+ </html>