sketchmark 2.0.0 → 2.1.0

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 (132) hide show
  1. package/ANIMATABLE_MATRIX.md +177 -0
  2. package/KERNEL_SPEC.md +412 -0
  3. package/PACKS.md +81 -0
  4. package/PRESETS.md +182 -0
  5. package/README.md +274 -188
  6. package/bin/editor-ui.cjs +2285 -0
  7. package/bin/preview-ui.cjs +74 -0
  8. package/bin/sketchmark.cjs +648 -2008
  9. package/dist/src/animatable.d.ts +21 -0
  10. package/dist/src/animatable.js +439 -0
  11. package/dist/src/builders/index.d.ts +1 -11
  12. package/dist/src/builders/index.js +1 -19
  13. package/dist/src/diagnostics.js +1 -64
  14. package/dist/src/edit.d.ts +27 -0
  15. package/dist/src/edit.js +162 -0
  16. package/dist/src/index.d.ts +4 -13
  17. package/dist/src/index.js +4 -13
  18. package/dist/src/keyframes.d.ts +48 -0
  19. package/dist/src/keyframes.js +182 -0
  20. package/dist/src/motion.d.ts +4 -0
  21. package/dist/src/motion.js +262 -0
  22. package/dist/src/normalize.js +120 -151
  23. package/dist/src/presets/characters.d.ts +15 -0
  24. package/dist/src/presets/characters.js +113 -0
  25. package/dist/src/presets/compose.d.ts +5 -0
  26. package/dist/src/presets/compose.js +80 -0
  27. package/dist/src/presets/effects.d.ts +40 -0
  28. package/dist/src/presets/effects.js +79 -0
  29. package/dist/src/presets/helpers.d.ts +33 -0
  30. package/dist/src/presets/helpers.js +165 -0
  31. package/dist/src/presets/index.d.ts +9 -0
  32. package/dist/src/presets/index.js +48 -0
  33. package/dist/src/presets/motions.d.ts +33 -0
  34. package/dist/src/presets/motions.js +75 -0
  35. package/dist/src/presets/scenes.d.ts +35 -0
  36. package/dist/src/presets/scenes.js +134 -0
  37. package/dist/src/presets/shapes.d.ts +71 -0
  38. package/dist/src/presets/shapes.js +96 -0
  39. package/dist/src/presets/transitions.d.ts +29 -0
  40. package/dist/src/presets/transitions.js +113 -0
  41. package/dist/src/presets/types.d.ts +34 -0
  42. package/dist/src/presets/types.js +2 -0
  43. package/dist/src/render/html.js +1 -4
  44. package/dist/src/render/svg.d.ts +2 -2
  45. package/dist/src/render/svg.js +86 -82
  46. package/dist/src/render/three-html.js +67 -113
  47. package/dist/src/scenes.js +1 -0
  48. package/dist/src/schema.js +218 -280
  49. package/dist/src/shapes/builtins.js +11 -47
  50. package/dist/src/shapes/common.js +12 -11
  51. package/dist/src/shapes/registry.d.ts +0 -1
  52. package/dist/src/shapes/registry.js +0 -4
  53. package/dist/src/shapes/types.d.ts +1 -3
  54. package/dist/src/types.d.ts +57 -288
  55. package/dist/src/utils.d.ts +2 -11
  56. package/dist/src/utils.js +13 -70
  57. package/dist/src/validate.js +321 -275
  58. package/dist/tests/run.js +576 -510
  59. package/examples/1730642890464.jpg +0 -0
  60. package/examples/app-screen.svg +1 -0
  61. package/examples/app-screen.visual.json +503 -0
  62. package/examples/dashboard-table.svg +1 -0
  63. package/examples/dashboard-table.visual.json +708 -0
  64. package/examples/dev-docs.svg +1 -0
  65. package/examples/dev-docs.visual.json +248 -0
  66. package/examples/explainer.mp4 +0 -0
  67. package/examples/explainer.visual.json +1713 -0
  68. package/examples/group-origin-effects-lab-check.svg +1 -0
  69. package/examples/group-origin-effects-lab.visual.json +1880 -0
  70. package/examples/image-clip-radius.visual.json +271 -0
  71. package/examples/make-app-screen.cjs +368 -0
  72. package/examples/make-dashboard-table.cjs +277 -0
  73. package/examples/make-dev-docs.cjs +233 -0
  74. package/examples/make-explainer.cjs +438 -0
  75. package/examples/make-group-origin-effects-lab.cjs +370 -0
  76. package/examples/make-image-clip-radius.cjs +169 -0
  77. package/examples/make-modal-dialog.cjs +355 -0
  78. package/examples/make-origin-effects-lab.cjs +311 -0
  79. package/examples/make-preset-character-motion.cjs +32 -0
  80. package/examples/make-presets-demo.cjs +30 -0
  81. package/examples/make-pricing.cjs +286 -0
  82. package/examples/make-product-demo.cjs +468 -0
  83. package/examples/make-product-hero.cjs +223 -0
  84. package/examples/make-release-notes.cjs +333 -0
  85. package/examples/make-settings-panel.cjs +435 -0
  86. package/examples/make-split-preview.cjs +248 -0
  87. package/examples/make-storyboard.cjs +215 -0
  88. package/examples/make-transcript.cjs +234 -0
  89. package/examples/make-typography-test.cjs +397 -0
  90. package/examples/make-ui-demo-explainer.cjs +1094 -0
  91. package/examples/make-ui-flow.cjs +762 -0
  92. package/examples/make-walkthrough.cjs +815 -0
  93. package/examples/modal-dialog.svg +1 -0
  94. package/examples/modal-dialog.visual.json +239 -0
  95. package/examples/origin-effects-lab-check.svg +1 -0
  96. package/examples/origin-effects-lab.visual.json +1412 -0
  97. package/examples/preset-character-motion.visual.json +949 -0
  98. package/examples/presets-demo.visual.json +787 -0
  99. package/examples/pricing.svg +1 -0
  100. package/examples/pricing.visual.json +652 -0
  101. package/examples/product-demo.mp4 +0 -0
  102. package/examples/product-demo.visual.json +866 -0
  103. package/examples/product-hero.svg +1 -0
  104. package/examples/product-hero.visual.json +242 -0
  105. package/examples/release-notes.svg +1 -0
  106. package/examples/release-notes.visual.json +467 -0
  107. package/examples/settings-panel.svg +1 -0
  108. package/examples/settings-panel.visual.json +501 -0
  109. package/examples/split-preview.svg +1 -0
  110. package/examples/split-preview.visual.json +124 -0
  111. package/examples/storyboard.svg +1 -0
  112. package/examples/storyboard.visual.json +312 -0
  113. package/examples/transcript.svg +1 -0
  114. package/examples/transcript.visual.json +407 -0
  115. package/examples/typography-indent-check.svg +1 -0
  116. package/examples/typography-lineheight-0.svg +1 -0
  117. package/examples/typography-lineheight-2.svg +1 -0
  118. package/examples/typography-test-check.svg +1 -0
  119. package/examples/typography-test.svg +1 -0
  120. package/examples/typography-test.visual.json +757 -0
  121. package/examples/ui-demo-explainer-billing.svg +1 -0
  122. package/examples/ui-demo-explainer-check.svg +1 -0
  123. package/examples/ui-demo-explainer-save.svg +1 -0
  124. package/examples/ui-demo-explainer-toggle.svg +1 -0
  125. package/examples/ui-demo-explainer.mp4 +0 -0
  126. package/examples/ui-demo-explainer.visual.json +2597 -0
  127. package/examples/ui-flow.mp4 +0 -0
  128. package/examples/ui-flow.visual.json +1211 -0
  129. package/examples/walkthrough.mp4 +0 -0
  130. package/examples/walkthrough.visual.json +1372 -0
  131. package/package.json +52 -52
  132. package/schema/visual.schema.json +1086 -930
package/examples/ui-demo-explainer-billing.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720" role="img"><rect x="0" y="0" width="1280" height="720" fill="#07111f"/><text id="intro-title" opacity="0" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="42" font-weight="700" fill="#f8fafc"><tspan x="640" y="92">Explaining a UI demo with cursor + zoom</tspan></text><text id="intro-subtitle" opacity="0" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="18" font-weight="400" fill="#93a9c7"><tspan x="640" y="138">One clean screen. One action at a time.</tspan></text><g id="caption_overview" opacity="0" transform="translate(330 584)"><path id="caption_overview-bg" d="M 22 0 L 598 0 Q 620 0 620 22 L 620 70 Q 620 92 598 92 L 22 92 Q 0 92 0 70 L 0 22 Q 0 0 22 0 Z" fill="#09192e" stroke="#173054" stroke-width="1.5"/><g id="caption_overview-chip" transform="translate(20 18)"><path id="caption_overview-chip-bg" d="M 14 0 L 82 0 Q 96 0 96 14 L 96 14 Q 96 28 82 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z" fill="#0b2648" stroke="#1d4c7f" stroke-width="1"/><text id="caption_overview-chip-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="700" fill="#7dd3fc"><tspan x="48" y="14">Overview</tspan></text></g><text id="caption_overview-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#e2e8f0"><tspan x="20" y="63.5">Start wide, show the whole product, and establish where the user is.</tspan></text></g><g id="caption_notifications" opacity="0" transform="translate(330 584)"><path id="caption_notifications-bg" d="M 22 0 L 598 0 Q 620 0 620 22 L 620 70 Q 620 92 598 92 L 22 92 Q 0 92 0 70 L 0 22 Q 0 0 22 0 Z" fill="#09192e" stroke="#173054" stroke-width="1.5"/><g id="caption_notifications-chip" transform="translate(20 18)"><path id="caption_notifications-chip-bg" d="M 14 0 L 82 0 Q 96 0 96 14 L 96 14 Q 96 28 82 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z" fill="#0b2648" stroke="#1d4c7f" stroke-width="1"/><text id="caption_notifications-chip-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="700" fill="#7dd3fc"><tspan x="48" y="14">Interaction</tspan></text></g><text id="caption_notifications-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#e2e8f0"><tspan x="20" y="63.5">Zoom into the control, move the cursor with intent, and make a single change.</tspan></text></g><g id="caption_billing" opacity="1" transform="translate(330 584)"><path id="caption_billing-bg" d="M 22 0 L 598 0 Q 620 0 620 22 L 620 70 Q 620 92 598 92 L 22 92 Q 0 92 0 70 L 0 22 Q 0 0 22 0 Z" fill="#09192e" stroke="#173054" stroke-width="1.5"/><g id="caption_billing-chip" transform="translate(20 18)"><path id="caption_billing-chip-bg" d="M 14 0 L 82 0 Q 96 0 96 14 L 96 14 Q 96 28 82 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z" fill="#0b2648" stroke="#1d4c7f" stroke-width="1"/><text id="caption_billing-chip-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="700" fill="#7dd3fc"><tspan x="48" y="14">Plan change</tspan></text></g><text id="caption_billing-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#e2e8f0"><tspan x="20" y="63.5">Use camera zoom to spotlight one setting instead of crowding the screen.</tspan></text></g><g id="caption_save" opacity="0" transform="translate(330 604)"><path id="caption_save-bg" d="M 22 0 L 598 0 Q 620 0 620 22 L 620 70 Q 620 92 598 92 L 22 92 Q 0 92 0 70 L 0 22 Q 0 0 22 0 Z" fill="#09192e" stroke="#173054" stroke-width="1.5"/><g id="caption_save-chip" transform="translate(20 18)"><path id="caption_save-chip-bg" d="M 14 0 L 82 0 Q 96 0 96 14 L 96 14 Q 96 28 82 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z" fill="#0b2648" stroke="#1d4c7f" stroke-width="1"/><text id="caption_save-chip-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="700" fill="#7dd3fc"><tspan x="48" y="14">Confirmation</tspan></text></g><text id="caption_save-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#e2e8f0"><tspan x="20" y="63.5">End on the save action and a visible success state so the flow feels complete.</tspan></text></g><g id="app-camera" opacity="1" transform="translate(90.63999999999999 -156.60000000000002) translate(-90.63999999999999 156.60000000000002) scale(1.26 1.26) translate(90.63999999999999 -156.60000000000002)"><g id="shell" transform="translate(0 0)"><path id="shell-bg" d="M 24 0 L 1096 0 Q 1120 0 1120 24 L 1120 556 Q 1120 580 1096 580 L 24 580 Q 0 580 0 556 L 0 24 Q 0 0 24 0 Z" fill="#f8fafc" stroke="#dbe4f0" stroke-width="1.5"/><path id="shell-top" d="M 24 0 L 1096 0 Q 1120 0 1120 24 L 1120 34 Q 1120 58 1096 58 L 24 58 Q 0 58 0 34 L 0 24 Q 0 0 24 0 Z" fill="#ffffff" stroke="#dbe4f0" stroke-width="1"/><path id="shell-sidebar" d="M 24 0 L 184 0 Q 208 0 208 24 L 208 556 Q 208 580 184 580 L 24 580 Q 0 580 0 556 L 0 24 Q 0 0 24 0 Z" fill="#0f172a" stroke="none" stroke-width="0"/><path id="shell-content-bg" d="M 208 58 L 1120 58 Q 1120 58 1120 58 L 1120 580 Q 1120 580 1120 580 L 208 580 Q 208 580 208 580 L 208 58 Q 208 58 208 58 Z" fill="#eff4fb" stroke="none" stroke-width="0"/></g><g id="sidebar" transform="translate(0 0)"><text id="brand-mark" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="19" font-weight="700" fill="#f8fafc"><tspan x="32" y="33.5">sketchmark</tspan></text><text id="brand-sub" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="500" fill="#9fb3cf"><tspan x="32" y="51.5">workspace demo</tspan></text><g id="nav-home" transform="translate(20 108)"><path id="nav-home-bg" d="M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z" fill="none" stroke="none" stroke-width="1"/><text id="nav-home-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#dbe5f2"><tspan x="16" y="16.5">Overview</tspan></text></g><g id="nav-projects" transform="translate(20 154)"><path id="nav-projects-bg" d="M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z" fill="none" stroke="none" stroke-width="1"/><text id="nav-projects-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#dbe5f2"><tspan x="16" y="16.5">Projects</tspan></text></g><g id="nav-settings" transform="translate(20 200)"><path id="nav-settings-bg" d="M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z" fill="#eff6ff" stroke="#bfdbfe" stroke-width="1"/><text id="nav-settings-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="700" fill="#2563eb"><tspan x="16" y="16.5">Team Settings</tspan></text></g><g id="nav-billing" transform="translate(20 246)"><path id="nav-billing-bg" d="M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z" fill="none" stroke="none" stroke-width="1"/><text id="nav-billing-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#dbe5f2"><tspan x="16" y="16.5">Billing</tspan></text></g><g id="nav-audit" transform="translate(20 292)"><path id="nav-audit-bg" d="M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z" fill="none" stroke="none" stroke-width="1"/><text id="nav-audit-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#dbe5f2"><tspan x="16" y="16.5">Audit Log</tspan></text></g><g id="sidebar-footer-chip" transform="translate(28 488)"><path id="sidebar-chip-bg" d="M 12 0 L 140 0 Q 152 0 152 12 L 152 28 Q 152 40 140 40 L 12 40 Q 0 40 0 28 L 0 12 Q 0 0 12 0 Z" fill="#112544" stroke="#20406f" stroke-width="1"/><text id="sidebar-chip-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#bfdbfe"><tspan x="16" y="18">4 teammates online</tspan></text></g></g><g id="topbar" transform="translate(232 12)"><path id="search-bg" d="M 10 0 L 290 0 Q 300 0 300 10 L 300 24 Q 300 34 290 34 L 10 34 Q 0 34 0 24 L 0 10 Q 0 0 10 0 Z" fill="#f8fafc" stroke="#d7e2f0" stroke-width="1"/><text id="search-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#94a3b8"><tspan x="16" y="16">Search settings, billing, teammates</tspan></text><g id="top-chip" transform="translate(724 2)"><path id="top-chip-bg" d="M 15 0 L 113 0 Q 128 0 128 15 L 128 15 Q 128 30 113 30 L 15 30 Q 0 30 0 15 L 0 15 Q 0 0 15 0 Z" fill="#102444" stroke="#264b87" stroke-width="1"/><text id="top-chip-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#93c5fd"><tspan x="64" y="15">Preview mode</tspan></text></g><g id="top-avatar" transform="translate(974 0)"><path id="top-avatar-circle" d="M 0 17 a 17 17 0 1 0 34 0 a 17 17 0 1 0 -34 0" fill="#c7d2fe" stroke="none" stroke-width="0"/><text id="top-avatar-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="700" fill="#1e3a8a"><tspan x="17" y="17">JD</tspan></text></g></g><g id="page-header" transform="translate(236 92)"><text id="page-eyebrow" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#2563eb"><tspan x="0" y="6">Team workspace</tspan></text><text id="page-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="30" font-weight="700" fill="#0f172a"><tspan x="0" y="37">Settings that stay easy to explain</tspan></text><text id="page-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#475569"><tspan x="0" y="71.5">A demo flow works best when the camera and cursor both guide attention.</tspan></text></g><g id="profile-card" transform="translate(236 96)"><path id="profile-card-bg" d="M 20 0 L 338 0 Q 358 0 358 20 L 358 178 Q 358 198 338 198 L 20 198 Q 0 198 0 178 L 0 20 Q 0 0 20 0 Z" fill="#ffffff" stroke="#dbe4f0" stroke-width="1"/><text id="profile-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="17" font-weight="600" fill="#0f172a"><tspan x="24" y="28.5">Workspace profile</tspan></text><text id="profile-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#475569"><tspan x="24" y="50.5">Show identity details before you zoom into smaller controls.</tspan></text><g id="profile-avatar" transform="translate(24 88)"><path id="profile-avatar-circle" d="M 0 24 a 24 24 0 1 0 48 0 a 24 24 0 1 0 -48 0" fill="#bfdbfe" stroke="none" stroke-width="0"/><text id="profile-avatar-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="700" fill="#1e3a8a"><tspan x="24" y="24">NS</tspan></text></g><text id="profile-name" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="18" font-weight="600" fill="#0f172a"><tspan x="86" y="99">Northstar Studio</tspan></text><text id="profile-meta" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#64748b"><tspan x="86" y="122">8 members • EU region</tspan></text><g id="profile-field-1" transform="translate(24 152)"><text id="profile-field-1-label" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="600" fill="#64748b"><tspan x="0" y="5.5">Workspace name</tspan></text><path id="profile-field-1-line" d="M 0 24 L 150 24" fill="none" stroke="#e5edf6" stroke-width="2"/></g><g id="profile-field-2" transform="translate(186 152)"><text id="profile-field-2-label" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="600" fill="#64748b"><tspan x="0" y="5.5">Support email</tspan></text><path id="profile-field-2-line" d="M 0 24 L 148 24" fill="none" stroke="#e5edf6" stroke-width="2"/></g></g><g id="notifications-card" transform="translate(618 96)"><path id="notifications-card-bg" d="M 20 0 L 410 0 Q 430 0 430 20 L 430 178 Q 430 198 410 198 L 20 198 Q 0 198 0 178 L 0 20 Q 0 0 20 0 Z" fill="#ffffff" stroke="#dbe4f0" stroke-width="1"/><text id="notif-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="17" font-weight="600" fill="#0f172a"><tspan x="24" y="28.5">Notifications</tspan></text><text id="notif-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#475569"><tspan x="24" y="50.5">Zooming here turns a tiny toggle into a clear, narrated moment.</tspan></text><g id="notif-weekly" transform="translate(24 82)"><text id="notif-weekly-label" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="600" fill="#0f172a"><tspan x="0" y="7.5">Weekly summary</tspan></text><text id="notif-weekly-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#475569"><tspan x="0" y="28">Send one digest every Monday morning.</tspan></text><path id="notif-weekly-toggle-bg" d="M 315 8 L 341 8 Q 356 8 356 23 L 356 23 Q 356 38 341 38 L 315 38 Q 300 38 300 23 L 300 23 Q 300 8 315 8 Z" fill="#2563eb" stroke="none" stroke-width="0"/><path id="notif-weekly-toggle-knob" transform="translate(26 0)" d="M 297 23 a 11 11 0 1 0 22 0 a 11 11 0 1 0 -22 0" fill="#ffffff" stroke="none" stroke-width="0"/></g><path id="notif-divider-1" d="M 24 128 L 406 128" fill="none" stroke="#e5edf6" stroke-width="1"/><g id="notif-incidents" transform="translate(24 140)"><text id="notif-incidents-label" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="600" fill="#0f172a"><tspan x="0" y="7.5">Critical incidents</tspan></text><text id="notif-incidents-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#475569"><tspan x="0" y="28">Always enabled for admins and owners.</tspan></text><path id="notif-incidents-toggle-bg" d="M 315 8 L 341 8 Q 356 8 356 23 L 356 23 Q 356 38 341 38 L 315 38 Q 300 38 300 23 L 300 23 Q 300 8 315 8 Z" fill="#2563eb" stroke="none" stroke-width="0"/><path id="notif-incidents-toggle-knob" d="M 323 23 a 11 11 0 1 0 22 0 a 11 11 0 1 0 -22 0" fill="#ffffff" stroke="none" stroke-width="0"/></g></g><g id="billing-card" transform="translate(236 316)"><path id="billing-card-bg" d="M 20 0 L 380 0 Q 400 0 400 20 L 400 168 Q 400 188 380 188 L 20 188 Q 0 188 0 168 L 0 20 Q 0 0 20 0 Z" fill="#ffffff" stroke="#dbe4f0" stroke-width="1"/><text id="billing-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="17" font-weight="600" fill="#0f172a"><tspan x="24" y="28.5">Billing</tspan></text><text id="billing-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#475569"><tspan x="24" y="50.5">Use a small motion change to make plan selection feel deliberate.</tspan></text><path id="billing-segment-bg" d="M 38 82 L 196 82 Q 210 82 210 96 L 210 110 Q 210 124 196 124 L 38 124 Q 24 124 24 110 L 24 96 Q 24 82 38 82 Z" fill="#edf3fb" stroke="#d8e4f2" stroke-width="1"/><path id="billing-segment-highlight" transform="translate(87.1381858273708 0)" d="M 42 88 L 100 88 Q 112 88 112 100 L 112 106 Q 112 118 100 118 L 42 118 Q 30 118 30 106 L 30 100 Q 30 88 42 88 Z" fill="#dbeafe" stroke="#93c5fd" stroke-width="1"/><text id="billing-monthly-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="600" fill="#64748b"><tspan x="71" y="103">Monthly</tspan></text><text id="billing-annual-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="600" fill="#2563eb"><tspan x="160" y="103">Annual</tspan></text><text id="billing-price" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="28" font-weight="700" fill="#0f172a"><tspan x="24" y="154">$49 / seat / month</tspan></text><text id="billing-price-note" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#10b981"><tspan x="24" y="176">Annual billing unlocks a 20% savings and a cleaner renewal cycle.</tspan></text></g><g id="review-card" transform="translate(658 332)"><path id="review-card-bg" d="M 20 0 L 370 0 Q 390 0 390 20 L 390 152 Q 390 172 370 172 L 20 172 Q 0 172 0 152 L 0 20 Q 0 0 20 0 Z" fill="#ffffff" stroke="#dbe4f0" stroke-width="1"/><text id="review-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="17" font-weight="600" fill="#0f172a"><tspan x="24" y="28.5">Review changes</tspan></text><text id="review-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#475569"><tspan x="24" y="50.5">End the sequence on a single confident action: save and show success.</tspan></text><g id="review-pill-1" transform="translate(24 78)"><path id="review-pill-1-bg" d="M 15 0 L 95 0 Q 110 0 110 15 L 110 15 Q 110 30 95 30 L 15 30 Q 0 30 0 15 L 0 15 Q 0 0 15 0 Z" fill="#eff6ff" stroke="#bfdbfe" stroke-width="1"/><text id="review-pill-1-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#2563eb"><tspan x="55" y="15">Weekly summary</tspan></text></g><g id="review-pill-2" transform="translate(144 78)"><path id="review-pill-2-bg" d="M 15 0 L 73 0 Q 88 0 88 15 L 88 15 Q 88 30 73 30 L 15 30 Q 0 30 0 15 L 0 15 Q 0 0 15 0 Z" fill="#ecfdf5" stroke="#a7f3d0" stroke-width="1"/><text id="review-pill-2-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#10b981"><tspan x="44" y="15">Annual</tspan></text></g><g id="save-button" transform="translate(24 106)"><path id="save-button-bg" d="M 14 0 L 126 0 Q 140 0 140 14 L 140 30 Q 140 44 126 44 L 14 44 Q 0 44 0 30 L 0 14 Q 0 0 14 0 Z" fill="#2563eb" stroke="none" stroke-width="0"/><text id="save-button-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#ffffff"><tspan x="70" y="22">Save changes</tspan></text></g><g id="ghost-button" transform="translate(176 106)"><path id="ghost-button-bg" d="M 14 0 L 96 0 Q 110 0 110 14 L 110 30 Q 110 44 96 44 L 14 44 Q 0 44 0 30 L 0 14 Q 0 0 14 0 Z" fill="#ffffff" stroke="#d4e0ee" stroke-width="1"/><text id="ghost-button-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="500" fill="#64748b"><tspan x="55" y="22">Cancel</tspan></text></g></g><g id="toast" opacity="0" transform="translate(760 8)"><path id="toast-bg" d="M 16 0 L 276 0 Q 292 0 292 16 L 292 46 Q 292 62 276 62 L 16 62 Q 0 62 0 46 L 0 16 Q 0 0 16 0 Z" fill="#ffffff" stroke="#bfe9d8" stroke-width="1.5"/><path id="toast-dot" d="M 15 31 a 9 9 0 1 0 18 0 a 9 9 0 1 0 -18 0" fill="#d1fae5" stroke="none" stroke-width="0"/><text id="toast-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="700" fill="#0f172a"><tspan x="42" y="23">Changes saved</tspan></text><text id="toast-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#475569"><tspan x="42" y="40">Notifications and billing have been updated.</tspan></text></g><path id="focus_notifications" opacity="0" d="M 634 88 L 1032 88 Q 1056 88 1056 112 L 1056 278 Q 1056 302 1032 302 L 634 302 Q 610 302 610 278 L 610 112 Q 610 88 634 88 Z" fill="none" stroke="#22d3ee" stroke-width="2" stroke-dasharray="8 6"/><path id="focus_billing" opacity="0.85" d="M 252 308 L 620 308 Q 644 308 644 332 L 644 488 Q 644 512 620 512 L 252 512 Q 228 512 228 488 L 228 332 Q 228 308 252 308 Z" fill="none" stroke="#22d3ee" stroke-width="2" stroke-dasharray="8 6"/><path id="focus_review" opacity="0" d="M 674 324 L 1032 324 Q 1056 324 1056 348 L 1056 488 Q 1056 512 1032 512 L 674 512 Q 650 512 650 488 L 650 348 Q 650 324 674 324 Z" fill="none" stroke="#22d3ee" stroke-width="2" stroke-dasharray="8 6"/><path id="click_weekly" opacity="0" transform="translate(970 201) scale(1.5 1.5) translate(-970 -201)" d="M 954 201 a 16 16 0 1 0 32 0 a 16 16 0 1 0 -32 0" fill="none" stroke="#38bdf8" stroke-width="2"/><path id="click_annual" opacity="0.3500000000000062" transform="translate(396 419) scale(0.7106106946593777 0.7106106946593777) translate(-396 -419)" d="M 380 419 a 16 16 0 1 0 32 0 a 16 16 0 1 0 -32 0" fill="none" stroke="#38bdf8" stroke-width="2"/><path id="click_save" opacity="0" transform="translate(752 460) scale(0.4 0.4) translate(-752 -460)" d="M 736 460 a 16 16 0 1 0 32 0 a 16 16 0 1 0 -32 0" fill="none" stroke="#38bdf8" stroke-width="2"/><g id="cursor" transform="translate(396 419)"><path id="cursor-arrow" d="M 0 0 L 0 22 L 6 18 L 10 28 L 15 26 L 11 16 L 20 16 Z" fill="#0f172a" stroke="#ffffff" stroke-width="1.6"/></g></g></svg>
package/examples/ui-demo-explainer-check.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720" role="img"><rect x="0" y="0" width="1280" height="720" fill="#07111f"/><text id="intro-title" opacity="0" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="42" font-weight="700" fill="#f8fafc"><tspan x="640" y="92">Explaining a UI demo with cursor + zoom</tspan></text><text id="intro-subtitle" opacity="0" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="18" font-weight="400" fill="#93a9c7"><tspan x="640" y="138">One clean screen. One action at a time.</tspan></text><g id="caption_overview" opacity="0" transform="translate(330 584)"><path id="caption_overview-bg" d="M 22 0 L 598 0 Q 620 0 620 22 L 620 70 Q 620 92 598 92 L 22 92 Q 0 92 0 70 L 0 22 Q 0 0 22 0 Z" fill="#09192e" stroke="#173054" stroke-width="1.5"/><g id="caption_overview-chip" transform="translate(20 18)"><path id="caption_overview-chip-bg" d="M 14 0 L 82 0 Q 96 0 96 14 L 96 14 Q 96 28 82 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z" fill="#0b2648" stroke="#1d4c7f" stroke-width="1"/><text id="caption_overview-chip-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="700" fill="#7dd3fc"><tspan x="48" y="14">Overview</tspan></text></g><text id="caption_overview-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#e2e8f0"><tspan x="20" y="63.5">Start wide, show the whole product, and establish where the user is.</tspan></text></g><g id="caption_notifications" opacity="1" transform="translate(330 584)"><path id="caption_notifications-bg" d="M 22 0 L 598 0 Q 620 0 620 22 L 620 70 Q 620 92 598 92 L 22 92 Q 0 92 0 70 L 0 22 Q 0 0 22 0 Z" fill="#09192e" stroke="#173054" stroke-width="1.5"/><g id="caption_notifications-chip" transform="translate(20 18)"><path id="caption_notifications-chip-bg" d="M 14 0 L 82 0 Q 96 0 96 14 L 96 14 Q 96 28 82 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z" fill="#0b2648" stroke="#1d4c7f" stroke-width="1"/><text id="caption_notifications-chip-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="700" fill="#7dd3fc"><tspan x="48" y="14">Interaction</tspan></text></g><text id="caption_notifications-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#e2e8f0"><tspan x="20" y="63.5">Zoom into the control, move the cursor with intent, and make a single change.</tspan></text></g><g id="caption_billing" opacity="0" transform="translate(330 604)"><path id="caption_billing-bg" d="M 22 0 L 598 0 Q 620 0 620 22 L 620 70 Q 620 92 598 92 L 22 92 Q 0 92 0 70 L 0 22 Q 0 0 22 0 Z" fill="#09192e" stroke="#173054" stroke-width="1.5"/><g id="caption_billing-chip" transform="translate(20 18)"><path id="caption_billing-chip-bg" d="M 14 0 L 82 0 Q 96 0 96 14 L 96 14 Q 96 28 82 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z" fill="#0b2648" stroke="#1d4c7f" stroke-width="1"/><text id="caption_billing-chip-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="700" fill="#7dd3fc"><tspan x="48" y="14">Plan change</tspan></text></g><text id="caption_billing-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#e2e8f0"><tspan x="20" y="63.5">Use camera zoom to spotlight one setting instead of crowding the screen.</tspan></text></g><g id="caption_save" opacity="0" transform="translate(330 604)"><path id="caption_save-bg" d="M 22 0 L 598 0 Q 620 0 620 22 L 620 70 Q 620 92 598 92 L 22 92 Q 0 92 0 70 L 0 22 Q 0 0 22 0 Z" fill="#09192e" stroke="#173054" stroke-width="1.5"/><g id="caption_save-chip" transform="translate(20 18)"><path id="caption_save-chip-bg" d="M 14 0 L 82 0 Q 96 0 96 14 L 96 14 Q 96 28 82 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z" fill="#0b2648" stroke="#1d4c7f" stroke-width="1"/><text id="caption_save-chip-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="700" fill="#7dd3fc"><tspan x="48" y="14">Confirmation</tspan></text></g><text id="caption_save-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#e2e8f0"><tspan x="20" y="63.5">End on the save action and a visible success state so the flow feels complete.</tspan></text></g><g id="app-camera" opacity="1" transform="translate(-384.5899999999999 120.15) translate(384.5899999999999 -120.15) scale(1.23 1.23) translate(-384.5899999999999 120.15)"><g id="shell" transform="translate(0 0)"><path id="shell-bg" d="M 24 0 L 1096 0 Q 1120 0 1120 24 L 1120 556 Q 1120 580 1096 580 L 24 580 Q 0 580 0 556 L 0 24 Q 0 0 24 0 Z" fill="#f8fafc" stroke="#dbe4f0" stroke-width="1.5"/><path id="shell-top" d="M 24 0 L 1096 0 Q 1120 0 1120 24 L 1120 34 Q 1120 58 1096 58 L 24 58 Q 0 58 0 34 L 0 24 Q 0 0 24 0 Z" fill="#ffffff" stroke="#dbe4f0" stroke-width="1"/><path id="shell-sidebar" d="M 24 0 L 184 0 Q 208 0 208 24 L 208 556 Q 208 580 184 580 L 24 580 Q 0 580 0 556 L 0 24 Q 0 0 24 0 Z" fill="#0f172a" stroke="none" stroke-width="0"/><path id="shell-content-bg" d="M 208 58 L 1120 58 Q 1120 58 1120 58 L 1120 580 Q 1120 580 1120 580 L 208 580 Q 208 580 208 580 L 208 58 Q 208 58 208 58 Z" fill="#eff4fb" stroke="none" stroke-width="0"/></g><g id="sidebar" transform="translate(0 0)"><text id="brand-mark" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="19" font-weight="700" fill="#f8fafc"><tspan x="32" y="33.5">sketchmark</tspan></text><text id="brand-sub" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="500" fill="#9fb3cf"><tspan x="32" y="51.5">workspace demo</tspan></text><g id="nav-home" transform="translate(20 108)"><path id="nav-home-bg" d="M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z" fill="none" stroke="none" stroke-width="1"/><text id="nav-home-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#dbe5f2"><tspan x="16" y="16.5">Overview</tspan></text></g><g id="nav-projects" transform="translate(20 154)"><path id="nav-projects-bg" d="M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z" fill="none" stroke="none" stroke-width="1"/><text id="nav-projects-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#dbe5f2"><tspan x="16" y="16.5">Projects</tspan></text></g><g id="nav-settings" transform="translate(20 200)"><path id="nav-settings-bg" d="M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z" fill="#eff6ff" stroke="#bfdbfe" stroke-width="1"/><text id="nav-settings-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="700" fill="#2563eb"><tspan x="16" y="16.5">Team Settings</tspan></text></g><g id="nav-billing" transform="translate(20 246)"><path id="nav-billing-bg" d="M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z" fill="none" stroke="none" stroke-width="1"/><text id="nav-billing-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#dbe5f2"><tspan x="16" y="16.5">Billing</tspan></text></g><g id="nav-audit" transform="translate(20 292)"><path id="nav-audit-bg" d="M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z" fill="none" stroke="none" stroke-width="1"/><text id="nav-audit-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#dbe5f2"><tspan x="16" y="16.5">Audit Log</tspan></text></g><g id="sidebar-footer-chip" transform="translate(28 488)"><path id="sidebar-chip-bg" d="M 12 0 L 140 0 Q 152 0 152 12 L 152 28 Q 152 40 140 40 L 12 40 Q 0 40 0 28 L 0 12 Q 0 0 12 0 Z" fill="#112544" stroke="#20406f" stroke-width="1"/><text id="sidebar-chip-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#bfdbfe"><tspan x="16" y="18">4 teammates online</tspan></text></g></g><g id="topbar" transform="translate(232 12)"><path id="search-bg" d="M 10 0 L 290 0 Q 300 0 300 10 L 300 24 Q 300 34 290 34 L 10 34 Q 0 34 0 24 L 0 10 Q 0 0 10 0 Z" fill="#f8fafc" stroke="#d7e2f0" stroke-width="1"/><text id="search-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#94a3b8"><tspan x="16" y="16">Search settings, billing, teammates</tspan></text><g id="top-chip" transform="translate(724 2)"><path id="top-chip-bg" d="M 15 0 L 113 0 Q 128 0 128 15 L 128 15 Q 128 30 113 30 L 15 30 Q 0 30 0 15 L 0 15 Q 0 0 15 0 Z" fill="#102444" stroke="#264b87" stroke-width="1"/><text id="top-chip-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#93c5fd"><tspan x="64" y="15">Preview mode</tspan></text></g><g id="top-avatar" transform="translate(974 0)"><path id="top-avatar-circle" d="M 0 17 a 17 17 0 1 0 34 0 a 17 17 0 1 0 -34 0" fill="#c7d2fe" stroke="none" stroke-width="0"/><text id="top-avatar-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="700" fill="#1e3a8a"><tspan x="17" y="17">JD</tspan></text></g></g><g id="page-header" transform="translate(236 92)"><text id="page-eyebrow" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#2563eb"><tspan x="0" y="6">Team workspace</tspan></text><text id="page-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="30" font-weight="700" fill="#0f172a"><tspan x="0" y="37">Settings that stay easy to explain</tspan></text><text id="page-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#475569"><tspan x="0" y="71.5">A demo flow works best when the camera and cursor both guide attention.</tspan></text></g><g id="profile-card" transform="translate(236 96)"><path id="profile-card-bg" d="M 20 0 L 338 0 Q 358 0 358 20 L 358 178 Q 358 198 338 198 L 20 198 Q 0 198 0 178 L 0 20 Q 0 0 20 0 Z" fill="#ffffff" stroke="#dbe4f0" stroke-width="1"/><text id="profile-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="17" font-weight="600" fill="#0f172a"><tspan x="24" y="28.5">Workspace profile</tspan></text><text id="profile-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#475569"><tspan x="24" y="50.5">Show identity details before you zoom into smaller controls.</tspan></text><g id="profile-avatar" transform="translate(24 88)"><path id="profile-avatar-circle" d="M 0 24 a 24 24 0 1 0 48 0 a 24 24 0 1 0 -48 0" fill="#bfdbfe" stroke="none" stroke-width="0"/><text id="profile-avatar-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="700" fill="#1e3a8a"><tspan x="24" y="24">NS</tspan></text></g><text id="profile-name" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="18" font-weight="600" fill="#0f172a"><tspan x="86" y="99">Northstar Studio</tspan></text><text id="profile-meta" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#64748b"><tspan x="86" y="122">8 members • EU region</tspan></text><g id="profile-field-1" transform="translate(24 152)"><text id="profile-field-1-label" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="600" fill="#64748b"><tspan x="0" y="5.5">Workspace name</tspan></text><path id="profile-field-1-line" d="M 0 24 L 150 24" fill="none" stroke="#e5edf6" stroke-width="2"/></g><g id="profile-field-2" transform="translate(186 152)"><text id="profile-field-2-label" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="600" fill="#64748b"><tspan x="0" y="5.5">Support email</tspan></text><path id="profile-field-2-line" d="M 0 24 L 148 24" fill="none" stroke="#e5edf6" stroke-width="2"/></g></g><g id="notifications-card" transform="translate(618 96)"><path id="notifications-card-bg" d="M 20 0 L 410 0 Q 430 0 430 20 L 430 178 Q 430 198 410 198 L 20 198 Q 0 198 0 178 L 0 20 Q 0 0 20 0 Z" fill="#ffffff" stroke="#dbe4f0" stroke-width="1"/><text id="notif-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="17" font-weight="600" fill="#0f172a"><tspan x="24" y="28.5">Notifications</tspan></text><text id="notif-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#475569"><tspan x="24" y="50.5">Zooming here turns a tiny toggle into a clear, narrated moment.</tspan></text><g id="notif-weekly" transform="translate(24 82)"><text id="notif-weekly-label" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="600" fill="#0f172a"><tspan x="0" y="7.5">Weekly summary</tspan></text><text id="notif-weekly-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#475569"><tspan x="0" y="28">Send one digest every Monday morning.</tspan></text><path id="notif-weekly-toggle-bg" d="M 315 8 L 341 8 Q 356 8 356 23 L 356 23 Q 356 38 341 38 L 315 38 Q 300 38 300 23 L 300 23 Q 300 8 315 8 Z" fill="#2563eb" stroke="none" stroke-width="0"/><path id="notif-weekly-toggle-knob" transform="translate(26 0)" d="M 297 23 a 11 11 0 1 0 22 0 a 11 11 0 1 0 -22 0" fill="#ffffff" stroke="none" stroke-width="0"/></g><path id="notif-divider-1" d="M 24 128 L 406 128" fill="none" stroke="#e5edf6" stroke-width="1"/><g id="notif-incidents" transform="translate(24 140)"><text id="notif-incidents-label" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="600" fill="#0f172a"><tspan x="0" y="7.5">Critical incidents</tspan></text><text id="notif-incidents-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#475569"><tspan x="0" y="28">Always enabled for admins and owners.</tspan></text><path id="notif-incidents-toggle-bg" d="M 315 8 L 341 8 Q 356 8 356 23 L 356 23 Q 356 38 341 38 L 315 38 Q 300 38 300 23 L 300 23 Q 300 8 315 8 Z" fill="#2563eb" stroke="none" stroke-width="0"/><path id="notif-incidents-toggle-knob" d="M 323 23 a 11 11 0 1 0 22 0 a 11 11 0 1 0 -22 0" fill="#ffffff" stroke="none" stroke-width="0"/></g></g><g id="billing-card" transform="translate(236 316)"><path id="billing-card-bg" d="M 20 0 L 380 0 Q 400 0 400 20 L 400 168 Q 400 188 380 188 L 20 188 Q 0 188 0 168 L 0 20 Q 0 0 20 0 Z" fill="#ffffff" stroke="#dbe4f0" stroke-width="1"/><text id="billing-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="17" font-weight="600" fill="#0f172a"><tspan x="24" y="28.5">Billing</tspan></text><text id="billing-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#475569"><tspan x="24" y="50.5">Use a small motion change to make plan selection feel deliberate.</tspan></text><path id="billing-segment-bg" d="M 38 82 L 196 82 Q 210 82 210 96 L 210 110 Q 210 124 196 124 L 38 124 Q 24 124 24 110 L 24 96 Q 24 82 38 82 Z" fill="#edf3fb" stroke="#d8e4f2" stroke-width="1"/><path id="billing-segment-highlight" d="M 42 88 L 100 88 Q 112 88 112 100 L 112 106 Q 112 118 100 118 L 42 118 Q 30 118 30 106 L 30 100 Q 30 88 42 88 Z" fill="#dbeafe" stroke="#93c5fd" stroke-width="1"/><text id="billing-monthly-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="600" fill="#4f6eab"><tspan x="71" y="103">Monthly</tspan></text><text id="billing-annual-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="600" fill="#3a69cb"><tspan x="160" y="103">Annual</tspan></text><text id="billing-price" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="28" font-weight="700" fill="#0f172a"><tspan x="24" y="154">$49 / seat / month</tspan></text><text id="billing-price-note" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#10b981"><tspan x="24" y="176">Annual billing unlocks a 20% savings and a cleaner renewal cycle.</tspan></text></g><g id="review-card" transform="translate(658 332)"><path id="review-card-bg" d="M 20 0 L 370 0 Q 390 0 390 20 L 390 152 Q 390 172 370 172 L 20 172 Q 0 172 0 152 L 0 20 Q 0 0 20 0 Z" fill="#ffffff" stroke="#dbe4f0" stroke-width="1"/><text id="review-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="17" font-weight="600" fill="#0f172a"><tspan x="24" y="28.5">Review changes</tspan></text><text id="review-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#475569"><tspan x="24" y="50.5">End the sequence on a single confident action: save and show success.</tspan></text><g id="review-pill-1" transform="translate(24 78)"><path id="review-pill-1-bg" d="M 15 0 L 95 0 Q 110 0 110 15 L 110 15 Q 110 30 95 30 L 15 30 Q 0 30 0 15 L 0 15 Q 0 0 15 0 Z" fill="#eff6ff" stroke="#bfdbfe" stroke-width="1"/><text id="review-pill-1-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#2563eb"><tspan x="55" y="15">Weekly summary</tspan></text></g><g id="review-pill-2" transform="translate(144 78)"><path id="review-pill-2-bg" d="M 15 0 L 73 0 Q 88 0 88 15 L 88 15 Q 88 30 73 30 L 15 30 Q 0 30 0 15 L 0 15 Q 0 0 15 0 Z" fill="#ecfdf5" stroke="#a7f3d0" stroke-width="1"/><text id="review-pill-2-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#10b981"><tspan x="44" y="15">Annual</tspan></text></g><g id="save-button" transform="translate(24 106)"><path id="save-button-bg" d="M 14 0 L 126 0 Q 140 0 140 14 L 140 30 Q 140 44 126 44 L 14 44 Q 0 44 0 30 L 0 14 Q 0 0 14 0 Z" fill="#2563eb" stroke="none" stroke-width="0"/><text id="save-button-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#ffffff"><tspan x="70" y="22">Save changes</tspan></text></g><g id="ghost-button" transform="translate(176 106)"><path id="ghost-button-bg" d="M 14 0 L 96 0 Q 110 0 110 14 L 110 30 Q 110 44 96 44 L 14 44 Q 0 44 0 30 L 0 14 Q 0 0 14 0 Z" fill="#ffffff" stroke="#d4e0ee" stroke-width="1"/><text id="ghost-button-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="500" fill="#64748b"><tspan x="55" y="22">Cancel</tspan></text></g></g><g id="toast" opacity="0" transform="translate(760 8)"><path id="toast-bg" d="M 16 0 L 276 0 Q 292 0 292 16 L 292 46 Q 292 62 276 62 L 16 62 Q 0 62 0 46 L 0 16 Q 0 0 16 0 Z" fill="#ffffff" stroke="#bfe9d8" stroke-width="1.5"/><path id="toast-dot" d="M 15 31 a 9 9 0 1 0 18 0 a 9 9 0 1 0 -18 0" fill="#d1fae5" stroke="none" stroke-width="0"/><text id="toast-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="700" fill="#0f172a"><tspan x="42" y="23">Changes saved</tspan></text><text id="toast-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#475569"><tspan x="42" y="40">Notifications and billing have been updated.</tspan></text></g><path id="focus_notifications" opacity="0.85" d="M 634 88 L 1032 88 Q 1056 88 1056 112 L 1056 278 Q 1056 302 1032 302 L 634 302 Q 610 302 610 278 L 610 112 Q 610 88 634 88 Z" fill="none" stroke="#22d3ee" stroke-width="2" stroke-dasharray="8 6"/><path id="focus_billing" opacity="0" d="M 252 308 L 620 308 Q 644 308 644 332 L 644 488 Q 644 512 620 512 L 252 512 Q 228 512 228 488 L 228 332 Q 228 308 252 308 Z" fill="none" stroke="#22d3ee" stroke-width="2" stroke-dasharray="8 6"/><path id="focus_review" opacity="0" d="M 674 324 L 1032 324 Q 1056 324 1056 348 L 1056 488 Q 1056 512 1032 512 L 674 512 Q 650 512 650 488 L 650 348 Q 650 324 674 324 Z" fill="none" stroke="#22d3ee" stroke-width="2" stroke-dasharray="8 6"/><path id="click_weekly" opacity="0.07777777777777861" transform="translate(980 192) scale(1.495108671784397 1.495108671784397) translate(-980 -192)" d="M 964 192 a 16 16 0 1 0 32 0 a 16 16 0 1 0 -32 0" fill="none" stroke="#38bdf8" stroke-width="2"/><path id="click_annual" opacity="0" transform="translate(390 378) scale(0.4 0.4) translate(-390 -378)" d="M 374 378 a 16 16 0 1 0 32 0 a 16 16 0 1 0 -32 0" fill="none" stroke="#38bdf8" stroke-width="2"/><path id="click_save" opacity="0" transform="translate(776 448) scale(0.4 0.4) translate(-776 -448)" d="M 760 448 a 16 16 0 1 0 32 0 a 16 16 0 1 0 -32 0" fill="none" stroke="#38bdf8" stroke-width="2"/><g id="cursor" transform="translate(970 174)"><path id="cursor-arrow" d="M 0 0 L 0 22 L 6 18 L 10 28 L 15 26 L 11 16 L 20 16 Z" fill="#0f172a" stroke="#ffffff" stroke-width="1.6"/></g></g></svg>
package/examples/ui-demo-explainer-save.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720" role="img"><rect x="0" y="0" width="1280" height="720" fill="#07111f"/><text id="intro-title" opacity="0" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="42" font-weight="700" fill="#f8fafc"><tspan x="640" y="92">Explaining a UI demo with cursor + zoom</tspan></text><text id="intro-subtitle" opacity="0" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="18" font-weight="400" fill="#93a9c7"><tspan x="640" y="138">One clean screen. One action at a time.</tspan></text><g id="caption_overview" opacity="0" transform="translate(330 584)"><path id="caption_overview-bg" d="M 22 0 L 598 0 Q 620 0 620 22 L 620 70 Q 620 92 598 92 L 22 92 Q 0 92 0 70 L 0 22 Q 0 0 22 0 Z" fill="#09192e" stroke="#173054" stroke-width="1.5"/><g id="caption_overview-chip" transform="translate(20 18)"><path id="caption_overview-chip-bg" d="M 14 0 L 82 0 Q 96 0 96 14 L 96 14 Q 96 28 82 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z" fill="#0b2648" stroke="#1d4c7f" stroke-width="1"/><text id="caption_overview-chip-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="700" fill="#7dd3fc"><tspan x="48" y="14">Overview</tspan></text></g><text id="caption_overview-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#e2e8f0"><tspan x="20" y="63.5">Start wide, show the whole product, and establish where the user is.</tspan></text></g><g id="caption_notifications" opacity="0" transform="translate(330 584)"><path id="caption_notifications-bg" d="M 22 0 L 598 0 Q 620 0 620 22 L 620 70 Q 620 92 598 92 L 22 92 Q 0 92 0 70 L 0 22 Q 0 0 22 0 Z" fill="#09192e" stroke="#173054" stroke-width="1.5"/><g id="caption_notifications-chip" transform="translate(20 18)"><path id="caption_notifications-chip-bg" d="M 14 0 L 82 0 Q 96 0 96 14 L 96 14 Q 96 28 82 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z" fill="#0b2648" stroke="#1d4c7f" stroke-width="1"/><text id="caption_notifications-chip-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="700" fill="#7dd3fc"><tspan x="48" y="14">Interaction</tspan></text></g><text id="caption_notifications-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#e2e8f0"><tspan x="20" y="63.5">Zoom into the control, move the cursor with intent, and make a single change.</tspan></text></g><g id="caption_billing" opacity="0" transform="translate(330 584)"><path id="caption_billing-bg" d="M 22 0 L 598 0 Q 620 0 620 22 L 620 70 Q 620 92 598 92 L 22 92 Q 0 92 0 70 L 0 22 Q 0 0 22 0 Z" fill="#09192e" stroke="#173054" stroke-width="1.5"/><g id="caption_billing-chip" transform="translate(20 18)"><path id="caption_billing-chip-bg" d="M 14 0 L 82 0 Q 96 0 96 14 L 96 14 Q 96 28 82 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z" fill="#0b2648" stroke="#1d4c7f" stroke-width="1"/><text id="caption_billing-chip-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="700" fill="#7dd3fc"><tspan x="48" y="14">Plan change</tspan></text></g><text id="caption_billing-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#e2e8f0"><tspan x="20" y="63.5">Use camera zoom to spotlight one setting instead of crowding the screen.</tspan></text></g><g id="caption_save" opacity="1" transform="translate(330 584)"><path id="caption_save-bg" d="M 22 0 L 598 0 Q 620 0 620 22 L 620 70 Q 620 92 598 92 L 22 92 Q 0 92 0 70 L 0 22 Q 0 0 22 0 Z" fill="#09192e" stroke="#173054" stroke-width="1.5"/><g id="caption_save-chip" transform="translate(20 18)"><path id="caption_save-chip-bg" d="M 14 0 L 82 0 Q 96 0 96 14 L 96 14 Q 96 28 82 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z" fill="#0b2648" stroke="#1d4c7f" stroke-width="1"/><text id="caption_save-chip-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="700" fill="#7dd3fc"><tspan x="48" y="14">Confirmation</tspan></text></g><text id="caption_save-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#e2e8f0"><tspan x="20" y="63.5">End on the save action and a visible success state so the flow feels complete.</tspan></text></g><g id="app-camera" opacity="1" transform="translate(-503.02 -200.12) translate(503.02 200.12) scale(1.34 1.34) translate(-503.02 -200.12)"><g id="shell" transform="translate(0 0)"><path id="shell-bg" d="M 24 0 L 1096 0 Q 1120 0 1120 24 L 1120 556 Q 1120 580 1096 580 L 24 580 Q 0 580 0 556 L 0 24 Q 0 0 24 0 Z" fill="#f8fafc" stroke="#dbe4f0" stroke-width="1.5"/><path id="shell-top" d="M 24 0 L 1096 0 Q 1120 0 1120 24 L 1120 34 Q 1120 58 1096 58 L 24 58 Q 0 58 0 34 L 0 24 Q 0 0 24 0 Z" fill="#ffffff" stroke="#dbe4f0" stroke-width="1"/><path id="shell-sidebar" d="M 24 0 L 184 0 Q 208 0 208 24 L 208 556 Q 208 580 184 580 L 24 580 Q 0 580 0 556 L 0 24 Q 0 0 24 0 Z" fill="#0f172a" stroke="none" stroke-width="0"/><path id="shell-content-bg" d="M 208 58 L 1120 58 Q 1120 58 1120 58 L 1120 580 Q 1120 580 1120 580 L 208 580 Q 208 580 208 580 L 208 58 Q 208 58 208 58 Z" fill="#eff4fb" stroke="none" stroke-width="0"/></g><g id="sidebar" transform="translate(0 0)"><text id="brand-mark" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="19" font-weight="700" fill="#f8fafc"><tspan x="32" y="33.5">sketchmark</tspan></text><text id="brand-sub" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="500" fill="#9fb3cf"><tspan x="32" y="51.5">workspace demo</tspan></text><g id="nav-home" transform="translate(20 108)"><path id="nav-home-bg" d="M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z" fill="none" stroke="none" stroke-width="1"/><text id="nav-home-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#dbe5f2"><tspan x="16" y="16.5">Overview</tspan></text></g><g id="nav-projects" transform="translate(20 154)"><path id="nav-projects-bg" d="M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z" fill="none" stroke="none" stroke-width="1"/><text id="nav-projects-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#dbe5f2"><tspan x="16" y="16.5">Projects</tspan></text></g><g id="nav-settings" transform="translate(20 200)"><path id="nav-settings-bg" d="M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z" fill="#eff6ff" stroke="#bfdbfe" stroke-width="1"/><text id="nav-settings-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="700" fill="#2563eb"><tspan x="16" y="16.5">Team Settings</tspan></text></g><g id="nav-billing" transform="translate(20 246)"><path id="nav-billing-bg" d="M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z" fill="none" stroke="none" stroke-width="1"/><text id="nav-billing-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#dbe5f2"><tspan x="16" y="16.5">Billing</tspan></text></g><g id="nav-audit" transform="translate(20 292)"><path id="nav-audit-bg" d="M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z" fill="none" stroke="none" stroke-width="1"/><text id="nav-audit-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#dbe5f2"><tspan x="16" y="16.5">Audit Log</tspan></text></g><g id="sidebar-footer-chip" transform="translate(28 488)"><path id="sidebar-chip-bg" d="M 12 0 L 140 0 Q 152 0 152 12 L 152 28 Q 152 40 140 40 L 12 40 Q 0 40 0 28 L 0 12 Q 0 0 12 0 Z" fill="#112544" stroke="#20406f" stroke-width="1"/><text id="sidebar-chip-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#bfdbfe"><tspan x="16" y="18">4 teammates online</tspan></text></g></g><g id="topbar" transform="translate(232 12)"><path id="search-bg" d="M 10 0 L 290 0 Q 300 0 300 10 L 300 24 Q 300 34 290 34 L 10 34 Q 0 34 0 24 L 0 10 Q 0 0 10 0 Z" fill="#f8fafc" stroke="#d7e2f0" stroke-width="1"/><text id="search-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#94a3b8"><tspan x="16" y="16">Search settings, billing, teammates</tspan></text><g id="top-chip" transform="translate(724 2)"><path id="top-chip-bg" d="M 15 0 L 113 0 Q 128 0 128 15 L 128 15 Q 128 30 113 30 L 15 30 Q 0 30 0 15 L 0 15 Q 0 0 15 0 Z" fill="#102444" stroke="#264b87" stroke-width="1"/><text id="top-chip-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#93c5fd"><tspan x="64" y="15">Preview mode</tspan></text></g><g id="top-avatar" transform="translate(974 0)"><path id="top-avatar-circle" d="M 0 17 a 17 17 0 1 0 34 0 a 17 17 0 1 0 -34 0" fill="#c7d2fe" stroke="none" stroke-width="0"/><text id="top-avatar-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="700" fill="#1e3a8a"><tspan x="17" y="17">JD</tspan></text></g></g><g id="page-header" transform="translate(236 92)"><text id="page-eyebrow" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#2563eb"><tspan x="0" y="6">Team workspace</tspan></text><text id="page-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="30" font-weight="700" fill="#0f172a"><tspan x="0" y="37">Settings that stay easy to explain</tspan></text><text id="page-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#475569"><tspan x="0" y="71.5">A demo flow works best when the camera and cursor both guide attention.</tspan></text></g><g id="profile-card" transform="translate(236 96)"><path id="profile-card-bg" d="M 20 0 L 338 0 Q 358 0 358 20 L 358 178 Q 358 198 338 198 L 20 198 Q 0 198 0 178 L 0 20 Q 0 0 20 0 Z" fill="#ffffff" stroke="#dbe4f0" stroke-width="1"/><text id="profile-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="17" font-weight="600" fill="#0f172a"><tspan x="24" y="28.5">Workspace profile</tspan></text><text id="profile-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#475569"><tspan x="24" y="50.5">Show identity details before you zoom into smaller controls.</tspan></text><g id="profile-avatar" transform="translate(24 88)"><path id="profile-avatar-circle" d="M 0 24 a 24 24 0 1 0 48 0 a 24 24 0 1 0 -48 0" fill="#bfdbfe" stroke="none" stroke-width="0"/><text id="profile-avatar-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="700" fill="#1e3a8a"><tspan x="24" y="24">NS</tspan></text></g><text id="profile-name" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="18" font-weight="600" fill="#0f172a"><tspan x="86" y="99">Northstar Studio</tspan></text><text id="profile-meta" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#64748b"><tspan x="86" y="122">8 members • EU region</tspan></text><g id="profile-field-1" transform="translate(24 152)"><text id="profile-field-1-label" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="600" fill="#64748b"><tspan x="0" y="5.5">Workspace name</tspan></text><path id="profile-field-1-line" d="M 0 24 L 150 24" fill="none" stroke="#e5edf6" stroke-width="2"/></g><g id="profile-field-2" transform="translate(186 152)"><text id="profile-field-2-label" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="600" fill="#64748b"><tspan x="0" y="5.5">Support email</tspan></text><path id="profile-field-2-line" d="M 0 24 L 148 24" fill="none" stroke="#e5edf6" stroke-width="2"/></g></g><g id="notifications-card" transform="translate(618 96)"><path id="notifications-card-bg" d="M 20 0 L 410 0 Q 430 0 430 20 L 430 178 Q 430 198 410 198 L 20 198 Q 0 198 0 178 L 0 20 Q 0 0 20 0 Z" fill="#ffffff" stroke="#dbe4f0" stroke-width="1"/><text id="notif-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="17" font-weight="600" fill="#0f172a"><tspan x="24" y="28.5">Notifications</tspan></text><text id="notif-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#475569"><tspan x="24" y="50.5">Zooming here turns a tiny toggle into a clear, narrated moment.</tspan></text><g id="notif-weekly" transform="translate(24 82)"><text id="notif-weekly-label" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="600" fill="#0f172a"><tspan x="0" y="7.5">Weekly summary</tspan></text><text id="notif-weekly-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#475569"><tspan x="0" y="28">Send one digest every Monday morning.</tspan></text><path id="notif-weekly-toggle-bg" d="M 315 8 L 341 8 Q 356 8 356 23 L 356 23 Q 356 38 341 38 L 315 38 Q 300 38 300 23 L 300 23 Q 300 8 315 8 Z" fill="#2563eb" stroke="none" stroke-width="0"/><path id="notif-weekly-toggle-knob" transform="translate(26 0)" d="M 297 23 a 11 11 0 1 0 22 0 a 11 11 0 1 0 -22 0" fill="#ffffff" stroke="none" stroke-width="0"/></g><path id="notif-divider-1" d="M 24 128 L 406 128" fill="none" stroke="#e5edf6" stroke-width="1"/><g id="notif-incidents" transform="translate(24 140)"><text id="notif-incidents-label" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="600" fill="#0f172a"><tspan x="0" y="7.5">Critical incidents</tspan></text><text id="notif-incidents-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#475569"><tspan x="0" y="28">Always enabled for admins and owners.</tspan></text><path id="notif-incidents-toggle-bg" d="M 315 8 L 341 8 Q 356 8 356 23 L 356 23 Q 356 38 341 38 L 315 38 Q 300 38 300 23 L 300 23 Q 300 8 315 8 Z" fill="#2563eb" stroke="none" stroke-width="0"/><path id="notif-incidents-toggle-knob" d="M 323 23 a 11 11 0 1 0 22 0 a 11 11 0 1 0 -22 0" fill="#ffffff" stroke="none" stroke-width="0"/></g></g><g id="billing-card" transform="translate(236 316)"><path id="billing-card-bg" d="M 20 0 L 380 0 Q 400 0 400 20 L 400 168 Q 400 188 380 188 L 20 188 Q 0 188 0 168 L 0 20 Q 0 0 20 0 Z" fill="#ffffff" stroke="#dbe4f0" stroke-width="1"/><text id="billing-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="17" font-weight="600" fill="#0f172a"><tspan x="24" y="28.5">Billing</tspan></text><text id="billing-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#475569"><tspan x="24" y="50.5">Use a small motion change to make plan selection feel deliberate.</tspan></text><path id="billing-segment-bg" d="M 38 82 L 196 82 Q 210 82 210 96 L 210 110 Q 210 124 196 124 L 38 124 Q 24 124 24 110 L 24 96 Q 24 82 38 82 Z" fill="#edf3fb" stroke="#d8e4f2" stroke-width="1"/><path id="billing-segment-highlight" transform="translate(89 0)" d="M 42 88 L 100 88 Q 112 88 112 100 L 112 106 Q 112 118 100 118 L 42 118 Q 30 118 30 106 L 30 100 Q 30 88 42 88 Z" fill="#dbeafe" stroke="#93c5fd" stroke-width="1"/><text id="billing-monthly-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="600" fill="#64748b"><tspan x="71" y="103">Monthly</tspan></text><text id="billing-annual-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="600" fill="#2563eb"><tspan x="160" y="103">Annual</tspan></text><text id="billing-price" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="28" font-weight="700" fill="#0f172a"><tspan x="24" y="154">$39 / seat / month</tspan></text><text id="billing-price-note" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#10b981"><tspan x="24" y="176">Annual billing unlocks a 20% savings and a cleaner renewal cycle.</tspan></text></g><g id="review-card" transform="translate(658 332)"><path id="review-card-bg" d="M 20 0 L 370 0 Q 390 0 390 20 L 390 152 Q 390 172 370 172 L 20 172 Q 0 172 0 152 L 0 20 Q 0 0 20 0 Z" fill="#ffffff" stroke="#dbe4f0" stroke-width="1"/><text id="review-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="17" font-weight="600" fill="#0f172a"><tspan x="24" y="28.5">Review changes</tspan></text><text id="review-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#475569"><tspan x="24" y="50.5">End the sequence on a single confident action: save and show success.</tspan></text><g id="review-pill-1" transform="translate(24 78)"><path id="review-pill-1-bg" d="M 15 0 L 95 0 Q 110 0 110 15 L 110 15 Q 110 30 95 30 L 15 30 Q 0 30 0 15 L 0 15 Q 0 0 15 0 Z" fill="#eff6ff" stroke="#bfdbfe" stroke-width="1"/><text id="review-pill-1-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#2563eb"><tspan x="55" y="15">Weekly summary</tspan></text></g><g id="review-pill-2" transform="translate(144 78)"><path id="review-pill-2-bg" d="M 15 0 L 73 0 Q 88 0 88 15 L 88 15 Q 88 30 73 30 L 15 30 Q 0 30 0 15 L 0 15 Q 0 0 15 0 Z" fill="#ecfdf5" stroke="#a7f3d0" stroke-width="1"/><text id="review-pill-2-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#10b981"><tspan x="44" y="15">Annual</tspan></text></g><g id="save-button" transform="translate(24 106) translate(46 -84) scale(0.95 0.95) translate(-46 84)"><path id="save-button-bg" d="M 14 0 L 126 0 Q 140 0 140 14 L 140 30 Q 140 44 126 44 L 14 44 Q 0 44 0 30 L 0 14 Q 0 0 14 0 Z" fill="#2563eb" stroke="none" stroke-width="0"/><text id="save-button-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#ffffff"><tspan x="70" y="22">Save changes</tspan></text></g><g id="ghost-button" transform="translate(176 106)"><path id="ghost-button-bg" d="M 14 0 L 96 0 Q 110 0 110 14 L 110 30 Q 110 44 96 44 L 14 44 Q 0 44 0 30 L 0 14 Q 0 0 14 0 Z" fill="#ffffff" stroke="#d4e0ee" stroke-width="1"/><text id="ghost-button-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="500" fill="#64748b"><tspan x="55" y="22">Cancel</tspan></text></g></g><g id="toast" opacity="0" transform="translate(760 8)"><path id="toast-bg" d="M 16 0 L 276 0 Q 292 0 292 16 L 292 46 Q 292 62 276 62 L 16 62 Q 0 62 0 46 L 0 16 Q 0 0 16 0 Z" fill="#ffffff" stroke="#bfe9d8" stroke-width="1.5"/><path id="toast-dot" d="M 15 31 a 9 9 0 1 0 18 0 a 9 9 0 1 0 -18 0" fill="#d1fae5" stroke="none" stroke-width="0"/><text id="toast-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="700" fill="#0f172a"><tspan x="42" y="23">Changes saved</tspan></text><text id="toast-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#475569"><tspan x="42" y="40">Notifications and billing have been updated.</tspan></text></g><path id="focus_notifications" opacity="0" d="M 634 88 L 1032 88 Q 1056 88 1056 112 L 1056 278 Q 1056 302 1032 302 L 634 302 Q 610 302 610 278 L 610 112 Q 610 88 634 88 Z" fill="none" stroke="#22d3ee" stroke-width="2" stroke-dasharray="8 6"/><path id="focus_billing" opacity="0" d="M 252 308 L 620 308 Q 644 308 644 332 L 644 488 Q 644 512 620 512 L 252 512 Q 228 512 228 488 L 228 332 Q 228 308 252 308 Z" fill="none" stroke="#22d3ee" stroke-width="2" stroke-dasharray="8 6"/><path id="focus_review" opacity="0.85" d="M 674 324 L 1032 324 Q 1056 324 1056 348 L 1056 488 Q 1056 512 1032 512 L 674 512 Q 650 512 650 488 L 650 348 Q 650 324 674 324 Z" fill="none" stroke="#22d3ee" stroke-width="2" stroke-dasharray="8 6"/><path id="click_weekly" opacity="0" transform="translate(970 201) scale(1.5 1.5) translate(-970 -201)" d="M 954 201 a 16 16 0 1 0 32 0 a 16 16 0 1 0 -32 0" fill="none" stroke="#38bdf8" stroke-width="2"/><path id="click_annual" opacity="0" transform="translate(396 419) scale(1.5 1.5) translate(-396 -419)" d="M 380 419 a 16 16 0 1 0 32 0 a 16 16 0 1 0 -32 0" fill="none" stroke="#38bdf8" stroke-width="2"/><path id="click_save" opacity="0.6999999999999751" transform="translate(752 460) scale(0.9157434957868174 0.9157434957868174) translate(-752 -460)" d="M 736 460 a 16 16 0 1 0 32 0 a 16 16 0 1 0 -32 0" fill="none" stroke="#38bdf8" stroke-width="2"/><g id="cursor" transform="translate(752 460)"><path id="cursor-arrow" d="M 0 0 L 0 22 L 6 18 L 10 28 L 15 26 L 11 16 L 20 16 Z" fill="#0f172a" stroke="#ffffff" stroke-width="1.6"/></g></g></svg>
package/examples/ui-demo-explainer-toggle.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720" role="img"><rect x="0" y="0" width="1280" height="720" fill="#07111f"/><text id="intro-title" opacity="0" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="42" font-weight="700" fill="#f8fafc"><tspan x="640" y="92">Explaining a UI demo with cursor + zoom</tspan></text><text id="intro-subtitle" opacity="0" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="18" font-weight="400" fill="#93a9c7"><tspan x="640" y="138">One clean screen. One action at a time.</tspan></text><g id="caption_overview" opacity="0" transform="translate(330 584)"><path id="caption_overview-bg" d="M 22 0 L 598 0 Q 620 0 620 22 L 620 70 Q 620 92 598 92 L 22 92 Q 0 92 0 70 L 0 22 Q 0 0 22 0 Z" fill="#09192e" stroke="#173054" stroke-width="1.5"/><g id="caption_overview-chip" transform="translate(20 18)"><path id="caption_overview-chip-bg" d="M 14 0 L 82 0 Q 96 0 96 14 L 96 14 Q 96 28 82 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z" fill="#0b2648" stroke="#1d4c7f" stroke-width="1"/><text id="caption_overview-chip-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="700" fill="#7dd3fc"><tspan x="48" y="14">Overview</tspan></text></g><text id="caption_overview-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#e2e8f0"><tspan x="20" y="63.5">Start wide, show the whole product, and establish where the user is.</tspan></text></g><g id="caption_notifications" opacity="1" transform="translate(330 584)"><path id="caption_notifications-bg" d="M 22 0 L 598 0 Q 620 0 620 22 L 620 70 Q 620 92 598 92 L 22 92 Q 0 92 0 70 L 0 22 Q 0 0 22 0 Z" fill="#09192e" stroke="#173054" stroke-width="1.5"/><g id="caption_notifications-chip" transform="translate(20 18)"><path id="caption_notifications-chip-bg" d="M 14 0 L 82 0 Q 96 0 96 14 L 96 14 Q 96 28 82 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z" fill="#0b2648" stroke="#1d4c7f" stroke-width="1"/><text id="caption_notifications-chip-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="700" fill="#7dd3fc"><tspan x="48" y="14">Interaction</tspan></text></g><text id="caption_notifications-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#e2e8f0"><tspan x="20" y="63.5">Zoom into the control, move the cursor with intent, and make a single change.</tspan></text></g><g id="caption_billing" opacity="0" transform="translate(330 604)"><path id="caption_billing-bg" d="M 22 0 L 598 0 Q 620 0 620 22 L 620 70 Q 620 92 598 92 L 22 92 Q 0 92 0 70 L 0 22 Q 0 0 22 0 Z" fill="#09192e" stroke="#173054" stroke-width="1.5"/><g id="caption_billing-chip" transform="translate(20 18)"><path id="caption_billing-chip-bg" d="M 14 0 L 82 0 Q 96 0 96 14 L 96 14 Q 96 28 82 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z" fill="#0b2648" stroke="#1d4c7f" stroke-width="1"/><text id="caption_billing-chip-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="700" fill="#7dd3fc"><tspan x="48" y="14">Plan change</tspan></text></g><text id="caption_billing-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#e2e8f0"><tspan x="20" y="63.5">Use camera zoom to spotlight one setting instead of crowding the screen.</tspan></text></g><g id="caption_save" opacity="0" transform="translate(330 604)"><path id="caption_save-bg" d="M 22 0 L 598 0 Q 620 0 620 22 L 620 70 Q 620 92 598 92 L 22 92 Q 0 92 0 70 L 0 22 Q 0 0 22 0 Z" fill="#09192e" stroke="#173054" stroke-width="1.5"/><g id="caption_save-chip" transform="translate(20 18)"><path id="caption_save-chip-bg" d="M 14 0 L 82 0 Q 96 0 96 14 L 96 14 Q 96 28 82 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z" fill="#0b2648" stroke="#1d4c7f" stroke-width="1"/><text id="caption_save-chip-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="700" fill="#7dd3fc"><tspan x="48" y="14">Confirmation</tspan></text></g><text id="caption_save-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#e2e8f0"><tspan x="20" y="63.5">End on the save action and a visible success state so the flow feels complete.</tspan></text></g><g id="app-camera" opacity="1" transform="translate(-384.5899999999999 120.15) translate(384.5899999999999 -120.15) scale(1.23 1.23) translate(-384.5899999999999 120.15)"><g id="shell" transform="translate(0 0)"><path id="shell-bg" d="M 24 0 L 1096 0 Q 1120 0 1120 24 L 1120 556 Q 1120 580 1096 580 L 24 580 Q 0 580 0 556 L 0 24 Q 0 0 24 0 Z" fill="#f8fafc" stroke="#dbe4f0" stroke-width="1.5"/><path id="shell-top" d="M 24 0 L 1096 0 Q 1120 0 1120 24 L 1120 34 Q 1120 58 1096 58 L 24 58 Q 0 58 0 34 L 0 24 Q 0 0 24 0 Z" fill="#ffffff" stroke="#dbe4f0" stroke-width="1"/><path id="shell-sidebar" d="M 24 0 L 184 0 Q 208 0 208 24 L 208 556 Q 208 580 184 580 L 24 580 Q 0 580 0 556 L 0 24 Q 0 0 24 0 Z" fill="#0f172a" stroke="none" stroke-width="0"/><path id="shell-content-bg" d="M 208 58 L 1120 58 Q 1120 58 1120 58 L 1120 580 Q 1120 580 1120 580 L 208 580 Q 208 580 208 580 L 208 58 Q 208 58 208 58 Z" fill="#eff4fb" stroke="none" stroke-width="0"/></g><g id="sidebar" transform="translate(0 0)"><text id="brand-mark" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="19" font-weight="700" fill="#f8fafc"><tspan x="32" y="33.5">sketchmark</tspan></text><text id="brand-sub" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="500" fill="#9fb3cf"><tspan x="32" y="51.5">workspace demo</tspan></text><g id="nav-home" transform="translate(20 108)"><path id="nav-home-bg" d="M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z" fill="none" stroke="none" stroke-width="1"/><text id="nav-home-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#dbe5f2"><tspan x="16" y="16.5">Overview</tspan></text></g><g id="nav-projects" transform="translate(20 154)"><path id="nav-projects-bg" d="M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z" fill="none" stroke="none" stroke-width="1"/><text id="nav-projects-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#dbe5f2"><tspan x="16" y="16.5">Projects</tspan></text></g><g id="nav-settings" transform="translate(20 200)"><path id="nav-settings-bg" d="M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z" fill="#eff6ff" stroke="#bfdbfe" stroke-width="1"/><text id="nav-settings-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="700" fill="#2563eb"><tspan x="16" y="16.5">Team Settings</tspan></text></g><g id="nav-billing" transform="translate(20 246)"><path id="nav-billing-bg" d="M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z" fill="none" stroke="none" stroke-width="1"/><text id="nav-billing-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#dbe5f2"><tspan x="16" y="16.5">Billing</tspan></text></g><g id="nav-audit" transform="translate(20 292)"><path id="nav-audit-bg" d="M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z" fill="none" stroke="none" stroke-width="1"/><text id="nav-audit-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#dbe5f2"><tspan x="16" y="16.5">Audit Log</tspan></text></g><g id="sidebar-footer-chip" transform="translate(28 488)"><path id="sidebar-chip-bg" d="M 12 0 L 140 0 Q 152 0 152 12 L 152 28 Q 152 40 140 40 L 12 40 Q 0 40 0 28 L 0 12 Q 0 0 12 0 Z" fill="#112544" stroke="#20406f" stroke-width="1"/><text id="sidebar-chip-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#bfdbfe"><tspan x="16" y="18">4 teammates online</tspan></text></g></g><g id="topbar" transform="translate(232 12)"><path id="search-bg" d="M 10 0 L 290 0 Q 300 0 300 10 L 300 24 Q 300 34 290 34 L 10 34 Q 0 34 0 24 L 0 10 Q 0 0 10 0 Z" fill="#f8fafc" stroke="#d7e2f0" stroke-width="1"/><text id="search-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#94a3b8"><tspan x="16" y="16">Search settings, billing, teammates</tspan></text><g id="top-chip" transform="translate(724 2)"><path id="top-chip-bg" d="M 15 0 L 113 0 Q 128 0 128 15 L 128 15 Q 128 30 113 30 L 15 30 Q 0 30 0 15 L 0 15 Q 0 0 15 0 Z" fill="#102444" stroke="#264b87" stroke-width="1"/><text id="top-chip-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#93c5fd"><tspan x="64" y="15">Preview mode</tspan></text></g><g id="top-avatar" transform="translate(974 0)"><path id="top-avatar-circle" d="M 0 17 a 17 17 0 1 0 34 0 a 17 17 0 1 0 -34 0" fill="#c7d2fe" stroke="none" stroke-width="0"/><text id="top-avatar-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="700" fill="#1e3a8a"><tspan x="17" y="17">JD</tspan></text></g></g><g id="page-header" transform="translate(236 92)"><text id="page-eyebrow" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#2563eb"><tspan x="0" y="6">Team workspace</tspan></text><text id="page-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="30" font-weight="700" fill="#0f172a"><tspan x="0" y="37">Settings that stay easy to explain</tspan></text><text id="page-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#475569"><tspan x="0" y="71.5">A demo flow works best when the camera and cursor both guide attention.</tspan></text></g><g id="profile-card" transform="translate(236 96)"><path id="profile-card-bg" d="M 20 0 L 338 0 Q 358 0 358 20 L 358 178 Q 358 198 338 198 L 20 198 Q 0 198 0 178 L 0 20 Q 0 0 20 0 Z" fill="#ffffff" stroke="#dbe4f0" stroke-width="1"/><text id="profile-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="17" font-weight="600" fill="#0f172a"><tspan x="24" y="28.5">Workspace profile</tspan></text><text id="profile-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#475569"><tspan x="24" y="50.5">Show identity details before you zoom into smaller controls.</tspan></text><g id="profile-avatar" transform="translate(24 88)"><path id="profile-avatar-circle" d="M 0 24 a 24 24 0 1 0 48 0 a 24 24 0 1 0 -48 0" fill="#bfdbfe" stroke="none" stroke-width="0"/><text id="profile-avatar-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="700" fill="#1e3a8a"><tspan x="24" y="24">NS</tspan></text></g><text id="profile-name" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="18" font-weight="600" fill="#0f172a"><tspan x="86" y="99">Northstar Studio</tspan></text><text id="profile-meta" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#64748b"><tspan x="86" y="122">8 members • EU region</tspan></text><g id="profile-field-1" transform="translate(24 152)"><text id="profile-field-1-label" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="600" fill="#64748b"><tspan x="0" y="5.5">Workspace name</tspan></text><path id="profile-field-1-line" d="M 0 24 L 150 24" fill="none" stroke="#e5edf6" stroke-width="2"/></g><g id="profile-field-2" transform="translate(186 152)"><text id="profile-field-2-label" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="600" fill="#64748b"><tspan x="0" y="5.5">Support email</tspan></text><path id="profile-field-2-line" d="M 0 24 L 148 24" fill="none" stroke="#e5edf6" stroke-width="2"/></g></g><g id="notifications-card" transform="translate(618 96)"><path id="notifications-card-bg" d="M 20 0 L 410 0 Q 430 0 430 20 L 430 178 Q 430 198 410 198 L 20 198 Q 0 198 0 178 L 0 20 Q 0 0 20 0 Z" fill="#ffffff" stroke="#dbe4f0" stroke-width="1"/><text id="notif-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="17" font-weight="600" fill="#0f172a"><tspan x="24" y="28.5">Notifications</tspan></text><text id="notif-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#475569"><tspan x="24" y="50.5">Zooming here turns a tiny toggle into a clear, narrated moment.</tspan></text><g id="notif-weekly" transform="translate(24 82)"><text id="notif-weekly-label" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="600" fill="#0f172a"><tspan x="0" y="7.5">Weekly summary</tspan></text><text id="notif-weekly-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#475569"><tspan x="0" y="28">Send one digest every Monday morning.</tspan></text><path id="notif-weekly-toggle-bg" d="M 315 8 L 341 8 Q 356 8 356 23 L 356 23 Q 356 38 341 38 L 315 38 Q 300 38 300 23 L 300 23 Q 300 8 315 8 Z" fill="#dbe3ee" stroke="none" stroke-width="0"/><path id="notif-weekly-toggle-knob" d="M 297 23 a 11 11 0 1 0 22 0 a 11 11 0 1 0 -22 0" fill="#ffffff" stroke="none" stroke-width="0"/></g><path id="notif-divider-1" d="M 24 128 L 406 128" fill="none" stroke="#e5edf6" stroke-width="1"/><g id="notif-incidents" transform="translate(24 140)"><text id="notif-incidents-label" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="600" fill="#0f172a"><tspan x="0" y="7.5">Critical incidents</tspan></text><text id="notif-incidents-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#475569"><tspan x="0" y="28">Always enabled for admins and owners.</tspan></text><path id="notif-incidents-toggle-bg" d="M 315 8 L 341 8 Q 356 8 356 23 L 356 23 Q 356 38 341 38 L 315 38 Q 300 38 300 23 L 300 23 Q 300 8 315 8 Z" fill="#2563eb" stroke="none" stroke-width="0"/><path id="notif-incidents-toggle-knob" d="M 323 23 a 11 11 0 1 0 22 0 a 11 11 0 1 0 -22 0" fill="#ffffff" stroke="none" stroke-width="0"/></g></g><g id="billing-card" transform="translate(236 316)"><path id="billing-card-bg" d="M 20 0 L 380 0 Q 400 0 400 20 L 400 168 Q 400 188 380 188 L 20 188 Q 0 188 0 168 L 0 20 Q 0 0 20 0 Z" fill="#ffffff" stroke="#dbe4f0" stroke-width="1"/><text id="billing-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="17" font-weight="600" fill="#0f172a"><tspan x="24" y="28.5">Billing</tspan></text><text id="billing-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#475569"><tspan x="24" y="50.5">Use a small motion change to make plan selection feel deliberate.</tspan></text><path id="billing-segment-bg" d="M 38 82 L 196 82 Q 210 82 210 96 L 210 110 Q 210 124 196 124 L 38 124 Q 24 124 24 110 L 24 96 Q 24 82 38 82 Z" fill="#edf3fb" stroke="#d8e4f2" stroke-width="1"/><path id="billing-segment-highlight" d="M 42 88 L 100 88 Q 112 88 112 100 L 112 106 Q 112 118 100 118 L 42 118 Q 30 118 30 106 L 30 100 Q 30 88 42 88 Z" fill="#dbeafe" stroke="#93c5fd" stroke-width="1"/><text id="billing-monthly-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="600" fill="#4d6eae"><tspan x="71" y="103">Monthly</tspan></text><text id="billing-annual-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="600" fill="#3c69c8"><tspan x="160" y="103">Annual</tspan></text><text id="billing-price" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="28" font-weight="700" fill="#0f172a"><tspan x="24" y="154">$49 / seat / month</tspan></text><text id="billing-price-note" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#10b981"><tspan x="24" y="176">Annual billing unlocks a 20% savings and a cleaner renewal cycle.</tspan></text></g><g id="review-card" transform="translate(658 332)"><path id="review-card-bg" d="M 20 0 L 370 0 Q 390 0 390 20 L 390 152 Q 390 172 370 172 L 20 172 Q 0 172 0 152 L 0 20 Q 0 0 20 0 Z" fill="#ffffff" stroke="#dbe4f0" stroke-width="1"/><text id="review-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="17" font-weight="600" fill="#0f172a"><tspan x="24" y="28.5">Review changes</tspan></text><text id="review-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#475569"><tspan x="24" y="50.5">End the sequence on a single confident action: save and show success.</tspan></text><g id="review-pill-1" transform="translate(24 78)"><path id="review-pill-1-bg" d="M 15 0 L 95 0 Q 110 0 110 15 L 110 15 Q 110 30 95 30 L 15 30 Q 0 30 0 15 L 0 15 Q 0 0 15 0 Z" fill="#eff6ff" stroke="#bfdbfe" stroke-width="1"/><text id="review-pill-1-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#2563eb"><tspan x="55" y="15">Weekly summary</tspan></text></g><g id="review-pill-2" transform="translate(144 78)"><path id="review-pill-2-bg" d="M 15 0 L 73 0 Q 88 0 88 15 L 88 15 Q 88 30 73 30 L 15 30 Q 0 30 0 15 L 0 15 Q 0 0 15 0 Z" fill="#ecfdf5" stroke="#a7f3d0" stroke-width="1"/><text id="review-pill-2-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#10b981"><tspan x="44" y="15">Annual</tspan></text></g><g id="save-button" transform="translate(24 106)"><path id="save-button-bg" d="M 14 0 L 126 0 Q 140 0 140 14 L 140 30 Q 140 44 126 44 L 14 44 Q 0 44 0 30 L 0 14 Q 0 0 14 0 Z" fill="#2563eb" stroke="none" stroke-width="0"/><text id="save-button-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#ffffff"><tspan x="70" y="22">Save changes</tspan></text></g><g id="ghost-button" transform="translate(176 106)"><path id="ghost-button-bg" d="M 14 0 L 96 0 Q 110 0 110 14 L 110 30 Q 110 44 96 44 L 14 44 Q 0 44 0 30 L 0 14 Q 0 0 14 0 Z" fill="#ffffff" stroke="#d4e0ee" stroke-width="1"/><text id="ghost-button-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="500" fill="#64748b"><tspan x="55" y="22">Cancel</tspan></text></g></g><g id="toast" opacity="0" transform="translate(760 8)"><path id="toast-bg" d="M 16 0 L 276 0 Q 292 0 292 16 L 292 46 Q 292 62 276 62 L 16 62 Q 0 62 0 46 L 0 16 Q 0 0 16 0 Z" fill="#ffffff" stroke="#bfe9d8" stroke-width="1.5"/><path id="toast-dot" d="M 15 31 a 9 9 0 1 0 18 0 a 9 9 0 1 0 -18 0" fill="#d1fae5" stroke="none" stroke-width="0"/><text id="toast-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="700" fill="#0f172a"><tspan x="42" y="23">Changes saved</tspan></text><text id="toast-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#475569"><tspan x="42" y="40">Notifications and billing have been updated.</tspan></text></g><path id="focus_notifications" opacity="0.85" d="M 634 88 L 1032 88 Q 1056 88 1056 112 L 1056 278 Q 1056 302 1032 302 L 634 302 Q 610 302 610 278 L 610 112 Q 610 88 634 88 Z" fill="none" stroke="#22d3ee" stroke-width="2" stroke-dasharray="8 6"/><path id="focus_billing" opacity="0" d="M 252 308 L 620 308 Q 644 308 644 332 L 644 488 Q 644 512 620 512 L 252 512 Q 228 512 228 488 L 228 332 Q 228 308 252 308 Z" fill="none" stroke="#22d3ee" stroke-width="2" stroke-dasharray="8 6"/><path id="focus_review" opacity="0" d="M 674 324 L 1032 324 Q 1056 324 1056 348 L 1056 488 Q 1056 512 1032 512 L 674 512 Q 650 512 650 488 L 650 348 Q 650 324 674 324 Z" fill="none" stroke="#22d3ee" stroke-width="2" stroke-dasharray="8 6"/><path id="click_weekly" opacity="0.34999999999999376" transform="translate(970 201) scale(0.7106106946593777 0.7106106946593777) translate(-970 -201)" d="M 954 201 a 16 16 0 1 0 32 0 a 16 16 0 1 0 -32 0" fill="none" stroke="#38bdf8" stroke-width="2"/><path id="click_annual" opacity="0" transform="translate(396 419) scale(0.4 0.4) translate(-396 -419)" d="M 380 419 a 16 16 0 1 0 32 0 a 16 16 0 1 0 -32 0" fill="none" stroke="#38bdf8" stroke-width="2"/><path id="click_save" opacity="0" transform="translate(752 460) scale(0.4 0.4) translate(-752 -460)" d="M 736 460 a 16 16 0 1 0 32 0 a 16 16 0 1 0 -32 0" fill="none" stroke="#38bdf8" stroke-width="2"/><g id="cursor" transform="translate(970 201)"><path id="cursor-arrow" d="M 0 0 L 0 22 L 6 18 L 10 28 L 15 26 L 11 16 L 20 16 Z" fill="#0f172a" stroke="#ffffff" stroke-width="1.6"/></g></g></svg>
package/examples/ui-demo-explainer.mp4 ADDED
Binary file