@vanillaskyai/video 0.8.1 → 0.8.2

package/CHANGELOG.md

@@ -4,6 +4,10 @@ VanillaSky follows semantic versioning. This changelog begins with the 0.1 beta.
 
 ## Unreleased
 
+## 0.8.2
+
+- Adds Docs and GitHub links plus an inline About section to the default VideoChat Settings, keeping developer discovery within the shared interface.
+
 ## 0.8.1
 
 - Gives the default `VideoChat` an immersive video canvas, floating voice and text input, contextual playback controls, readable on-video subtitles, and unified dark settings and history. Controls yield to the first subtitle and return on interaction; the stage adapts across desktop and mobile.

package/dist/react.js

@@ -3531,6 +3531,7 @@ function VideoChat({ options = {}, className, welcomeTitle }) {
   const [modeId, setModeId] = useState6(options.mode ?? defaultMode.id);
   const [historyOpen, setHistoryOpen] = useState6(false);
   const [settingsOpen, setSettingsOpen] = useState6(false);
+  const [aboutOpen, setAboutOpen] = useState6(false);
   const [captionsOn, setCaptionsOn] = useState6(true);
   const [captionsExpanded, setCaptionsExpanded] = useState6(false);
   const [alwaysShowControls, setAlwaysShowControls] = useState6(false);
@@ -3884,7 +3885,23 @@ function VideoChat({ options = {}, className, welcomeTitle }) {
                     /* @__PURE__ */ jsx7("span", { children: /* @__PURE__ */ jsx7("strong", { children: option.label }) })
                   ] }, option.id))
                 ] }),
-                /* @__PURE__ */ jsx7("p", { className: "settings-note", children: "Creation and style changes apply to your next question." })
+                /* @__PURE__ */ jsx7("p", { className: "settings-note", children: "Creation and style changes apply to your next question." }),
+                /* @__PURE__ */ jsxs6("nav", { className: "developer-links", "aria-label": "Build with VanillaSky", children: [
+                  /* @__PURE__ */ jsx7("p", { className: "section-label", children: "Build with VanillaSky" }),
+                  /* @__PURE__ */ jsxs6("a", { href: "https://github.com/VanillaSkyAi/video/blob/main/docs/getting-started.md", target: "_blank", rel: "noopener noreferrer", children: [
+                    "Docs",
+                    /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2197" })
+                  ] }),
+                  /* @__PURE__ */ jsxs6("button", { type: "button", "aria-expanded": aboutOpen, "aria-controls": `${instanceId}-about`, onClick: () => setAboutOpen((open) => !open), children: [
+                    "About",
+                    /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: aboutOpen ? "\u2212" : "+" })
+                  ] }),
+                  /* @__PURE__ */ jsx7("div", { id: `${instanceId}-about`, className: "developer-about", role: "region", "aria-label": "About VanillaSky", hidden: !aboutOpen, children: /* @__PURE__ */ jsx7("p", { children: "VanillaSky is an open-source SDK for conversations that answer in video. Developers connect their own AI providers through their application server." }) }),
+                  /* @__PURE__ */ jsxs6("a", { href: "https://github.com/VanillaSkyAi/video", target: "_blank", rel: "noopener noreferrer", children: [
+                    "GitHub",
+                    /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2197" })
+                  ] })
+                ] })
               ]
             }
           )

package/docs/reference/design-system.html

@@ -89,7 +89,14 @@ body { background: #080b16; }
 <div class="doc-preview"><header class="chrome"><div class="session-brand"><img class="brand-logo" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjE1NSAxMTMgMTY5MCA0MjIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMTU1IDExMyAxNjkwIDQyMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOnVybCgjU1ZHSURfMV8pO30KCS5zdDF7ZmlsbDp1cmwoI1NWR0lEXzAwMDAwMDEzMTc5MjQ3NzkzMzEzNjczNjYwMDAwMDA5NTAyNDY0NTI0MDQ3MTc5Njg2Xyk7fQoJLnN0MntmaWxsOnVybCgjU1ZHSURfMDAwMDAxMTQwNzU2MTAxNzA2MjA3NDYzMDAwMDAwMTMwNzY4NTczMjc1MDMwNTk4NTJfKTt9Cgkuc3Qze2ZpbGw6dXJsKCNTVkdJRF8wMDAwMDAzOTg0Mzk1Mzc4NTIyOTI0Mjg4MDAwMDAwODQwMzMzMzkyMDEyMjcwNTMyOF8pO30KCS5zdDR7ZmlsbDp1cmwoI1NWR0lEXzAwMDAwMDI3NTkyNTEzNTc2NDg3NDgzMzAwMDAwMDE2NzQwODQ2NzM4OTM4NjE5NzkyXyk7fQoJLnN0NXtmaWxsOnVybCgjU1ZHSURfMDAwMDAwNzM2ODI1Njc2NTkxMzUzNzk0NjAwMDAwMDQyOTE4NTk2MTM4MzIzNjcyNDZfKTt9Cgkuc3Q2e2ZpbGw6dXJsKCNTVkdJRF8wMDAwMDA0MzQyOTI4Mzg1Nzk2OTQ0NDE5MDAwMDAwNzg0MjM5Nzg0MTEwMTYxNjAxN18pO30KCS5zdDd7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPGc+Cgk8Zz4KCQk8Zz4KCQkJCgkJCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjE0NC43Mzg4IiB5MT0iMzYxLjU0MjIiIHgyPSIxMTQ1LjM4NjYiIHkyPSIzMDguNTkwNyIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDY1MCkiPgoJCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0UwNEY4QSIvPgoJCQkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0VDOUEyQyIvPgoJCQk8L2xpbmVhckdyYWRpZW50PgoJCQk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDMxLjkzLDI5OC42N2MtMC42Mi0wLjYtMS4zNi0xLjExLTIuMTktMS41N2MtMi40Mi0xLjMyLTUuNjQtMS45OC05LjctMS45OAoJCQkJYy0xNi4xMiwwLTMwLjQ0LTEuMDYtNDIuOTctMy4xOWMxMS44My0zMi4yLDE3Ljc2LTYxLjkyLDE3Ljc2LTg5LjE1YzAtMTguOTMtNC40NS0zMy44NC0xMy4zMi00NC43NAoJCQkJYy04Ljg5LTEwLjg3LTIwLjg5LTE2LjMyLTM2LjA1LTE2LjMyYy0xMi4zMiwwLTIzLjUsMy4xOS0zMy41NSw5LjU5Yy0xMC4wOCw2LjQtMTgsMTYuMDQtMjMuOCwyOC45NQoJCQkJYy01LjgxLDEyLjg5LTguNywyOC43LTguNyw0Ny40MWMwLDE4LjcsMy42NiwzNS4yMSwxMSw0OS41NGM3LjM0LDE0LjMyLDE4LjIzLDI1Ljk5LDMyLjY3LDM0Ljk3CgkJCQljLTEyLjA2LDI1LjgyLTI1LjMzLDQ3LjI0LTM5Ljc2LDY0LjI4Yy0xNC40NiwxNy4wNi0yNy44MiwyNS41Ny00MC4xNCwyNS41N2MtMTIuMDYsMC0yMS4xMi05LjQtMjcuMTYtMjguMjMKCQkJCWMtNi4wNC0xOC44Mi05LjA2LTQ2LjMzLTkuMDYtODIuNTZjMC0zNC41NSwzLjU1LTczLjE1LDEwLjY2LTExNS43NmMwLjQ3LTMuNzksMC43LTYuNCwwLjctNy44MWMwLTEzLjUxLTcuODEtMjAuMjUtMjMuNDQtMjAuMjUKCQkJCWMtOS40NywwLTE2LjE1LDIuMTktMjAuMDYsNi41N3MtNi45MywxMi43NC05LjA2LDI1LjA0Yy01LjkzLDMzLjE0LTguODcsNzAuNTQtOC44NywxMTIuMjFjMCw0OC43OCw2LjA0LDg3LjQ5LDE4LjEsMTE2LjEyCgkJCQljMTIuMDgsMjguNjcsMzAuNDIsNDIuOTcsNTUuMDUsNDIuOTdjMjMuOTEsMCw0Ny43Ni0xMS42NCw3MS41Ni0zNC45N2MyMy44LTIzLjMzLDQ0LjA4LTUyLjYxLDYwLjktODcuODkKCQkJCWMxMC42MSwyLjQsMjIuMzMsMy43OSwzNS4xNCw0LjIxYzQuOTMsMC4xNywxMC4wMiwwLjE3LDE1LjI5LDAuMDRjNy44MS0wLjIzLDEzLjU1LTIuNzIsMTcuMjMtNy40NQoJCQkJYzMuNjYtNC43NCw1LjUxLTEwLjE3LDUuNTEtMTYuMzJDNDM1LjY3LDMwNC4xMiw0MzQuNDIsMzAxLjA0LDQzMS45MywyOTguNjd6IE0zMzcuNjUsMjc2LjY2CgkJCQljLTE0LjkxLTExLjEzLTIyLjM4LTI4LjI5LTIyLjM4LTUxLjVjMC0xMy43MiwyLjAyLTI0LjMzLDYuMDQtMzEuNzhjNC4wNC03LjQ1LDkuMjUtMTEuMTksMTUuNjMtMTEuMTkKCQkJCWM0LjQ5LDAsOC4wNiwyLjMsMTAuNjYsNi45M2MyLjYsNC42MiwzLjkxLDExLjg5LDMuOTEsMjEuODNDMzUxLjUsMjI4LjI0LDM0Ni44NywyNTAuMTUsMzM3LjY1LDI3Ni42NnoiLz4KCQkJCgkJCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzAwMDAwMDg5NTUyODM1Mzg3NjQwNjA5ODkwMDAwMDA0ODExOTA0NjIyNjQ2MDYyNzMyXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMzcuMjUzNSIgeTE9IjMwOC44OTY2IiB4Mj0iMTEzNy45MDE0IiB5Mj0iMjU1Ljk0NTEiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCA2NTApIj4KCQkJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNFMDRGOEEiLz4KCQkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNFQzlBMkMiLz4KCQkJPC9saW5lYXJHcmFkaWVudD4KCQkJPHBhdGggc3R5bGU9ImZpbGw6dXJsKCNTVkdJRF8wMDAwMDA4OTU1MjgzNTM4NzY0MDYwOTg5MDAwMDAwNDgxMTkwNDYyMjY0NjA2MjczMl8pOyIgZD0iTTc0Ny45LDM3My42MQoJCQkJYy0xLjc3LTIuODUtNC4yMS00LjI3LTcuMjgtNC4yN2MtMy41NSwwLTYuNzQsMS42Ni05LjU5LDQuOTZjLTQuMSw0LjkxLTcuODcsOS4yNy0xMS4zMiwxMy4xM2MtNS43Nyw2LjQ1LTEwLjcsMTEuNDctMTQuNzgsMTUuMQoJCQkJYy02LjUxLDUuODEtMTIuMTMsOC43LTE2Ljg3LDguN2MtNi44NywwLTEwLjMtNC43Mi0xMC4zLTE0LjE5YzAtNi42MiwyLjI2LTIwLjI1LDYuNzYtNDAuODRjNS4yMS0yNC4xNiw3LjgxLTQwLjg0LDcuODEtNTAuMDkKCQkJCWMwLTE1LjM4LTcuNy0yMy4wOC0yMy4wOC0yMy4wOGMtNy44MSwwLTE2LjQsMi43NC0yNS43NCw4LjE3Yy05LjM2LDUuNDUtMTguODksMTQuNTctMjguNTksMjcuMzUKCQkJCWMtOS43MiwxMi43OC0xOC40OCwyOS4zNi0yNi4yOSw0OS43MWMwLjk0LTEwLjQsMi4xMy0xOS4xNywzLjU1LTI2LjI3YzEuNDMtNy4xLDMuMzItMTUuMzgsNS43LTI0Ljg1CgkJCQljMy41NS0xMy4yNyw1LjMyLTIxLjc4LDUuMzItMjUuNTdjMC0zLjMyLTAuOTYtNS41Ny0yLjg1LTYuNzZjLTEuODktMS4xNy01LjIxLTEuNzctOS45NS0xLjc3Yy04Ljc2LDAtMTUuNTcsMS42LTIwLjQyLDQuNzkKCQkJCWMtNC44NSwzLjIxLTguMzQsOC4yMy0xMC40NywxNS4xYy04LjM0LDI2LjM4LTEyLjcsNTQuMTYtMTMuMSw4My4zNGMtMC4wMiwxLjQ1LTAuMDQsMi45MS0wLjA0LDQuMzhjMCwxNiwxLjA4LDI4LjY3LDMuMjYsMzcuOTcKCQkJCWMwLjY0LDIuNzksMS40LDUuMywyLjI1LDcuNDljMy42Niw5LjQ3LDkuOTgsMTQuMTksMTguOTgsMTQuMTljNy4zNCwwLDEyLjc0LTEuOTQsMTYuMTctNS44NWMzLjQyLTMuOTEsNi40NC0xMS40Miw5LjA0LTIyLjU1CgkJCQljMy41Ny0xNC40NCw4LjIzLTI4LjE4LDE0LjA0LTQxLjJjNS43OS0xMy4wMiwxMS40Ny0yMy41LDE3LjA0LTMxLjQyYzUuNTctNy45Myw5Ljg5LTExLjkxLDEyLjk2LTExLjkxCgkJCQljMi42LDAsMy45MSwxLjkxLDMuOTEsNS42OGMwLDUuNy0xLjU1LDE1Ljk4LTQuNjIsMzAuOTFjLTMuMzIsMTcuMDQtNC45NiwyOC44Ny00Ljk2LDM1LjVjMCwxMy4yNywzLjA4LDIzLjM4LDkuMjMsMzAuMzYKCQkJCWM2LjE1LDYuOTgsMTUuMjcsMTAuNDcsMjcuMzUsMTAuNDdjMTQuOTEsMCwyOC4yMy00LjAyLDM5Ljk1LTEyLjA2YzUuMTctMy41NywxMC4xOS03LjU1LDE1LjA4LTExLjk2CgkJCQljNi4xNS01LjYyLDEyLjA4LTExLjkzLDE3Ljc4LTE4Ljk1YzQuNDktNS4xOSw2Ljc0LTEyLjUzLDYuNzQtMjJDNzUwLjU2LDM4MC4zNCw3NDkuNjcsMzc2LjQ0LDc0Ny45LDM3My42MXoiLz4KCQkJCgkJCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzAwMDAwMDM2OTY2Mjg4NDUyMDI4MTAzOTgwMDAwMDA2MTQ5NTUyMTE1MTU0NzIxOTQ4XyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMzkuNzQyOCIgeTE9IjM1NS45MzgyIiB4Mj0iMTE0MC4zOTA3IiB5Mj0iMzAyLjk4NjciIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCA2NTApIj4KCQkJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNFMDRGOEEiLz4KCQkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNFQzlBMkMiLz4KCQkJPC9saW5lYXJHcmFkaWVudD4KCQkJPHBhdGggc3R5bGU9ImZpbGw6dXJsKCNTVkdJRF8wMDAwMDAzNjk2NjI4ODQ1MjAyODEwMzk4MDAwMDAwNjE0OTU1MjExNTE1NDcyMTk0OF8pOyIgZD0iTTgzMy40OCwzNzMuNjEKCQkJCWMtMS43Ny0yLjg1LTQuMjEtNC4yNy03LjI4LTQuMjdjLTMuNTUsMC02Ljc2LDEuNjYtOS41OSw0Ljk2Yy0yLjEzLDIuNTctNC4xNyw0Ljk4LTYuMTMsNy4yN2MtNy44NSw5LjEzLTE0LjMyLDE2LjA4LTE5LjQ0LDIwLjgKCQkJCWMtNi40LDUuOTMtMTEuNzIsOC44Ny0xNS45OCw4Ljg3Yy00LjQ5LDAtNy43LTEuODktOS41OS01LjY4Yy0xLjg5LTMuNzctMi44My05LjIzLTIuODMtMTYuMzJjMC05LjI1LDIuODMtMjYuODcsOC41MS01Mi45MgoJCQkJYzQuNDktMjEuNTMsNi43Ni0zNS4yNyw2Ljc2LTQxLjJjMC04LjA0LTYuMDQtMTIuMDgtMTguMTItMTIuMDhjLTcuODEsMC0xMy40OSwxLjQzLTE3LjA0LDQuMjdjLTMuNTUsMi44NS02LjQsOC4wNi04LjUzLDE1LjYzCgkJCQljLTQuMjcsMTQuNDQtNy43NiwzMC4wMS0xMC40Nyw0Ni43MWMtMi40NSwxNS4wNi0zLjc5LDI3LjY1LTQuMDQsMzcuOGMtMC4wMiwxLjA5LTAuMDQsMi4xNy0wLjA0LDMuMjEKCQkJCWMwLDE0LjA0LDIuMTMsMjUuOTEsNi4zOCwzNS42M2MxLjE5LDIuNzQsMi41Nyw1LjMsNC4xLDcuN2M2Ljk4LDEwLjg5LDE4LjE1LDE2LjMyLDMzLjU1LDE2LjMyYzE3Ljg3LDAsMzYuOTEtMTEuMDIsNTcuMTYtMzMuMQoJCQkJYzIuODEtMy4wOCw1LjY2LTYuMzYsOC41My05Ljg3YzQuNTEtNS4xOSw2Ljc2LTEyLjUzLDYuNzYtMjJDODM2LjE0LDM4MC4zNCw4MzUuMjYsMzc2LjQ0LDgzMy40OCwzNzMuNjF6IE03OTIuMTIsMjEwLjYxCgkJCQljLTUuNDUtNC4yNy0xMi41Ny02LjQtMjEuMzItNi40Yy05LjcsMC0xNy44MiwyLjc3LTI0LjMzLDguMzRjLTYuNTEsNS41Ny05Ljc2LDEyLjQ5LTkuNzYsMjAuNzhjMCw4LjI4LDIuNDksMTQuNzQsNy40NSwxOS4zNAoJCQkJYzQuOTgsNC42MiwxMi40NCw2LjkzLDIyLjM4LDYuOTNjMTAuMTcsMCwxOC4zNC0yLjc3LDI0LjUtOC4zNGM2LjE1LTUuNTUsOS4yMy0xMy4wOCw5LjIzLTIyLjU1CgkJCQlDODAwLjI3LDIyMC45LDc5Ny41NSwyMTQuODYsNzkyLjEyLDIxMC42MXoiLz4KCQkJCgkJCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzAwMDAwMTY5NTQ0MDU3OTMxOTgyMTQwNjIwMDAwMDAzNjMwOTA4MjUzMDQ2NjA0NDcxXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxNDIuNDM4MiIgeTE9IjQwNi44NzQ3IiB4Mj0iMTE0My4wODYxIiB5Mj0iMzUzLjkyMzIiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCA2NTApIj4KCQkJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNFMDRGOEEiLz4KCQkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNFQzlBMkMiLz4KCQkJPC9saW5lYXJHcmFkaWVudD4KCQkJPHBhdGggc3R5bGU9ImZpbGw6dXJsKCNTVkdJRF8wMDAwMDE2OTU0NDA1NzkzMTk4MjE0MDYyMDAwMDAwMzYzMDkwODI1MzA0NjYwNDQ3MV8pOyIgZD0iTTk0Ny40NywzNzMuNjEKCQkJCWMtMS43Ny0yLjg1LTQuMjEtNC4yNy03LjI4LTQuMjdjLTMuNTUsMC02Ljc0LDEuNjYtOS41OSw0Ljk2Yy0yLjExLDIuNTMtNC4xNyw0LjkxLTYuMTUsNy4xMwoJCQkJYy04LjYyLDkuNzktMTUuOTMsMTYuOTUtMjEuODksMjEuNDZjLTcuMzQsNS41Ny0xNS44Nyw4LjM0LTI1LjU3LDguMzRjLTYuMTcsMC0xMS4xMy0yLjA2LTE0LjkzLTYuMjEKCQkJCWMtMy43OS00LjEzLTYuNTEtMTEuMDYtOC4xNy0yMC43OGMyNi43Ni0zNi40NCw0Ny45NS03My4yNiw2My41OC0xMTAuNDRjMTUuNjMtMzcuMTYsMjMuNDQtNjkuODQsMjMuNDQtOTguMDIKCQkJCWMwLTE5LjY1LTMuMjYtMzQuNzQtOS43OC00NS4yN2MtNi41MS0xMC41My0xNS40NC0xNS44LTI2LjgtMTUuOGMtMjAuMTQsMC0zNy40OCwxMy4yNS01Mi4wMywzOS43NgoJCQkJYy0xNC41NywyNi41MS0yNS41Nyw1OC4yNC0zMy4wMyw5NS4xN2MtNy40NSwzNi45My0xMS4xOSw2OS44NC0xMS4xOSw5OC43NGMwLDExLjk1LDAuNzksMjMsMi40LDMzLjE4CgkJCQljMi4wNiwxMy40LDUuNTMsMjUuMjcsMTAuMzgsMzUuNjNjMC43NCwxLjYsMS41MSwzLjE3LDIuMzIsNC43YzEwLjA2LDE4Ljk1LDI1LjUsMjguNCw0Ni4zNSwyOC40CgkJCQljMTUuMTQsMCwyOC42OS00LjAyLDQwLjY1LTEyLjA2YzguNjgtNS44NSwxNi44OS0xMi44NywyNC42NS0yMS4xYzIuOTEtMy4wOSw1Ljc3LTYuMzgsOC41Ny05LjgxYzQuNDktNS4xOSw2Ljc0LTEyLjUzLDYuNzQtMjIKCQkJCUM5NTAuMTMsMzgwLjM0LDk0OS4yNCwzNzYuNDQsOTQ3LjQ3LDM3My42MXogTTg1OS45MiwyNTIuNTFjNS4yMS0yOS4xMiwxMS4yNS01My41LDE4LjEyLTczLjE1CgkJCQljNi44Ny0xOS42NiwxMy4wMi0yOS40OCwxOC40OC0yOS40OGM2LjYyLDAsOS45NSw5LDkuOTUsMjYuOTljMCwyMi45Ny00Ljk4LDQ4LjM1LTE0LjkzLDc2LjE3cy0yMy4zMyw1NS41OC00MC4xMiw4My4yOAoJCQkJQzg1MS44OCwzMDkuNTUsODU0LjcxLDI4MS42Miw4NTkuOTIsMjUyLjUxeiIvPgoJCQkKCQkJCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMDAwMDAwOTYwMzk0OTc1NDgzNzkyMzk0NjAwMDAwMTc2ODAwODc0NTg3MzgyMjU1NjVfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjE0Mi43NTY1IiB5MT0iNDEyLjg4ODMiIHgyPSIxMTQzLjQwNDMiIHkyPSIzNTkuOTM2OCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDY1MCkiPgoJCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0UwNEY4QSIvPgoJCQkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0VDOUEyQyIvPgoJCQk8L2xpbmVhckdyYWRpZW50PgoJCQk8cGF0aCBzdHlsZT0iZmlsbDp1cmwoI1NWR0lEXzAwMDAwMDk2MDM5NDk3NTQ4Mzc5MjM5NDYwMDAwMDE3NjgwMDg3NDU4NzM4MjI1NTY1Xyk7IiBkPSJNMTA2MS40NSwzNzMuNjEKCQkJCWMtMS43Ny0yLjg1LTQuMjEtNC4yNy03LjI3LTQuMjdjLTMuNTcsMC02Ljc2LDEuNjYtOS42MSw0Ljk2Yy03LjE3LDguNTMtMTMuNTUsMTUuNDctMTkuMTIsMjAuODMKCQkJCWMtMy4yNSwzLjEzLTYuMjMsNS43Mi04LjkzLDcuNzZjLTcuMzQsNS41Ny0xNS44Nyw4LjM0LTI1LjU3LDguMzRjLTYuMTUsMC0xMS4xMy0yLjA2LTE0LjkxLTYuMjEKCQkJCWMtMy43OS00LjEzLTYuNTMtMTEuMDYtOC4xNy0yMC43OGMyNi43NC0zNi40NCw0Ny45My03My4yNiw2My41Ni0xMTAuNDRjMTUuNjMtMzcuMTYsMjMuNDQtNjkuODQsMjMuNDQtOTguMDIKCQkJCWMwLTE5LjY1LTMuMjUtMzQuNzQtOS43Ni00NS4yN2MtNi41My0xMC41My0xNS40Ni0xNS44LTI2LjgyLTE1LjhjLTIwLjEyLDAtMzcuNDYsMTMuMjUtNTIuMDMsMzkuNzYKCQkJCWMtMTQuNTUsMjYuNTEtMjUuNTcsNTguMjQtMzMuMDMsOTUuMTdjLTcuNDUsMzYuOTMtMTEuMTksNjkuODQtMTEuMTksOTguNzRjMCwxMS44OSwwLjc5LDIyLjkxLDIuMzgsMzMuMDQKCQkJCWMyLjA2LDEzLjQyLDUuNTMsMjUuMzMsMTAuMzgsMzUuNzFjMC43NCwxLjYyLDEuNTMsMy4yMSwyLjM0LDQuNzZjMTAuMDYsMTguOTUsMjUuNTEsMjguNCw0Ni4zNSwyOC40CgkJCQljMTUuMTUsMCwyOC43LTQuMDIsNDAuNjUtMTIuMDZjMy43OS0yLjU3LDcuNTEtNS4zNCwxMS4xMi04LjM2YzcuNzgtNi40NSwxNS4xNC0xMy45NywyMi4xLTIyLjU1YzQuNDktNS4xOSw2Ljc0LTEyLjUzLDYuNzQtMjIKCQkJCUMxMDY0LjExLDM4MC4zNCwxMDYzLjIzLDM3Ni40NCwxMDYxLjQ1LDM3My42MXogTTk3My45MywyNTIuNTFjNS4xOS0yOS4xMiwxMS4yMy01My41LDE4LjEtNzMuMTUKCQkJCWM2Ljg3LTE5LjY2LDEzLjAyLTI5LjQ4LDE4LjQ4LTI5LjQ4YzYuNjIsMCw5Ljk1LDksOS45NSwyNi45OWMwLDIyLjk3LTQuOTgsNDguMzUtMTQuOTEsNzYuMTcKCQkJCWMtOS45NSwyNy44Mi0yMy4zMyw1NS41OC00MC4xNCw4My4yOEM5NjUuODcsMzA5LjU1LDk2OC43MiwyODEuNjIsOTczLjkzLDI1Mi41MXoiLz4KCQkJCgkJCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzAwMDAwMDQ0ODY0NDU5ODE4NDk5ODM0NDgwMDAwMDE0NzUwODc5MzcyMTAyNDYzMzk3XyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMzguNTg5NCIgeTE9IjMzNC4xNDA1IiB4Mj0iMTEzOS4yMzcyIiB5Mj0iMjgxLjE4OSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDY1MCkiPgoJCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0UwNEY4QSIvPgoJCQkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0VDOUEyQyIvPgoJCQk8L2xpbmVhckdyYWRpZW50PgoJCQk8cGF0aCBzdHlsZT0iZmlsbDp1cmwoI1NWR0lEXzAwMDAwMDQ0ODY0NDU5ODE4NDk5ODM0NDgwMDAwMDE0NzUwODc5MzcyMTAyNDYzMzk3Xyk7IiBkPSJNMTIwMi41MiwzODIuNzQKCQkJCWMtNC40Myw1Ljc2LTEwLjMsMTIuNTctMTcuMjMsMTguN2MwLDAtMTEuMTIsOS44NS0yMS4zOCw5Ljc5Yy0yLjMsMC00LjA5LTAuOTEtNC4wOS0wLjkxYy0xLjA2LTAuNTMtMi0xLjI4LTIuODMtMi4yOAoJCQkJYy0xLjc3LTIuMTMtMi42Ni00Ljk2LTIuNjYtOC41M2MwLTEwLjY0LDIuNzItMjkuNTksOC4xNy01Ni44YzQuMDYtMjAuMjcsNy40NC0zMC4xMSw1LjMyLTM1LjUyCgkJCQljLTcuMjYtMTguNTctMzcuNDUtMjcuMDctNjAuNy0yMy43N2MtMTUuNTgsMi4yMS0yNi40Myw5LjMtMzMuNTgsMTQuMzZjLTE0LjU3LDEwLjMtMjYuMjMsMjMuOTEtMzQuOTksNDAuODQKCQkJCXMtMTMuMTMsMzQuODgtMTMuMTMsNTMuOGMwLDAuOTEsMC4wMiwxLjgxLDAuMDYsMi43MmMwLjM2LDEzLjc4LDMuNjIsMjUuMzYsOS44MSwzNC43NGMxLDEuNTUsMi4wOSwzLjAyLDMuMjYsNC40NQoJCQkJYzguNzYsMTAuNjQsMjAuNDgsMTUuOTcsMzUuMTYsMTUuOTdjMTguNywwLDM0LjIxLTkuOTUsNDYuNTItMjkuODJjMy4zMiw5LjIzLDguMjMsMTYuNTEsMTQuNzQsMjEuODMKCQkJCWM2LjUxLDUuMzIsMTMuNjgsNy45OCwyMS40OSw3Ljk4YzEwLjE3LDAsMjAuNy00LjEzLDMxLjYxLTEyLjQyYzguNC02LjM4LDE2LjQyLTEzLjg5LDI0LjEtMjIuNTMKCQkJCUMxMjA1LjYyLDQwMy4xNiwxMjAzLjI4LDM5MS4yMywxMjAyLjUyLDM4Mi43NHogTTExMTEuNzEsMzgwLjdjLTIuMTMsMTAuMTktNS41NywxOC4zNC0xMC4zLDI0LjUxCgkJCQljLTQuNzQsNi4xNS05LjcsOS4yMy0xNC45MSw5LjIzYy01LjIxLDAtOS4zLTEuNzctMTIuMjUtNS4zMmMtMi45Ni0zLjU3LTQuNDUtOS00LjQ1LTE2LjM0YzAtMTMuMjcsMi40OS0yNS44LDcuNDUtMzcuNjUKCQkJCWM0Ljk4LTExLjgzLDExLjY2LTIxLjM2LDIwLjA4LTI4LjU5YzguNC03LjIxLDE3LjU3LTEwLjk1LDI3LjUxLTExLjE3TDExMTEuNzEsMzgwLjd6Ii8+CgkJCQoJCQkJPGxpbmVhckdyYWRpZW50IGlkPSJTVkdJRF8wMDAwMDAxMzg4NDE0OTU1MTMwMDcxMDUxMDAwMDAwOTQ1NjEzMzk1NjE1Mjg5NDYxMl8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTMyLjA3ODgiIHkxPSIyOTkuOTE3OCIgeDI9IjExMzIuNzI2NyIgeTI9IjI0Ni45NjY0IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDAgNjUwKSI+CgkJCQk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojRTA0RjhBIi8+CgkJCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRUM5QTJDIi8+CgkJCTwvbGluZWFyR3JhZGllbnQ+CgkJCTxwYXRoIHN0eWxlPSJmaWxsOnVybCgjU1ZHSURfMDAwMDAwMTM4ODQxNDk1NTEzMDA3MTA1MTAwMDAwMDk0NTYxMzM5NTYxNTI4OTQ2MTJfKTsiIGQ9Ik01NDkuMjksMzgyLjc0CgkJCQljLTQuNDMsNS43Ni0xMC4zLDEyLjU3LTE3LjIzLDE4LjdjMCwwLTExLjEyLDkuODUtMjEuMzgsOS43OWMtMi4zLDAtNC4wOS0wLjkxLTQuMDktMC45MWMtMS4wNi0wLjUzLTItMS4yOC0yLjgzLTIuMjgKCQkJCWMtMS43Ny0yLjEzLTIuNjYtNC45Ni0yLjY2LTguNTNjMC0xMC42NCwyLjcyLTI5LjU5LDguMTctNTYuOGM0LjA2LTIwLjI3LDcuNDQtMzAuMTEsNS4zMi0zNS41MgoJCQkJYy03LjI2LTE4LjU3LTM3LjQ1LTI3LjA3LTYwLjctMjMuNzdjLTE1LjU4LDIuMjEtMjYuNDMsOS4zLTMzLjU4LDE0LjM2Yy0xNC41NywxMC4zLTI2LjIzLDIzLjkxLTM0Ljk5LDQwLjg0CgkJCQljLTguNzYsMTYuOTMtMTMuMTMsMzQuODgtMTMuMTMsNTMuOGMwLDAuOTEsMC4wMiwxLjgxLDAuMDYsMi43MmMwLjM2LDEzLjc4LDMuNjIsMjUuMzYsOS44MSwzNC43NGMxLDEuNTUsMi4wOSwzLjAyLDMuMjYsNC40NQoJCQkJYzguNzYsMTAuNjQsMjAuNDgsMTUuOTcsMzUuMTYsMTUuOTdjMTguNywwLDM0LjIxLTkuOTUsNDYuNTItMjkuODJjMy4zMiw5LjIzLDguMjMsMTYuNTEsMTQuNzQsMjEuODMKCQkJCWM2LjUxLDUuMzIsMTMuNjgsNy45OCwyMS40OSw3Ljk4YzEwLjE3LDAsMjAuNy00LjEzLDMxLjYxLTEyLjQyYzguNC02LjM4LDE2LjQyLTEzLjg5LDI0LjEtMjIuNTMKCQkJCUM1NTIuMzksNDAzLjE2LDU1MC4wNSwzOTEuMjMsNTQ5LjI5LDM4Mi43NHogTTQ1OC40OCwzODAuN2MtMi4xMywxMC4xOS01LjU3LDE4LjM0LTEwLjMsMjQuNTFjLTQuNzQsNi4xNS05LjcsOS4yMy0xNC45MSw5LjIzCgkJCQlzLTkuMy0xLjc3LTEyLjI1LTUuMzJjLTIuOTYtMy41Ny00LjQ1LTktNC40NS0xNi4zNGMwLTEzLjI3LDIuNDktMjUuOCw3LjQ1LTM3LjY1YzQuOTgtMTEuODMsMTEuNjYtMjEuMzYsMjAuMDgtMjguNTkKCQkJCWM4LjQtNy4yMSwxNy41Ny0xMC45NSwyNy41MS0xMS4xN0w0NTguNDgsMzgwLjd6Ii8+CgkJPC9nPgoJPC9nPgoJPGc+CgkJPHBhdGggY2xhc3M9InN0NyIgZD0iTTEyODguNTksMjMwLjcyYzMuNjQtMi45MSw3LjktNS4xLDEyLjc2LTYuNTZjNC44Ni0xLjQ2LDkuOTktMi4xOSwxNS4zMi0yLjE5YzguNTMsMCwxNS44OCwxLjE1LDIyLjA5LDMuNDUKCQkJYzYuMiwyLjMzLDExLjg0LDUuNDMsMTYuOTcsOS4zYzUuMSwzLjksOS43Nyw4LjQ2LDE0LjAzLDEzLjY4YzQuMjUsNS4yNCw4LjY5LDEwLjksMTMuMzIsMTYuOTdsMzcuMjItMzIuODMKCQkJYy03LjMxLTguNTEtMTQuNTktMTYuMDUtMjEuOS0yMi42M2MtNy4yOC02LjU2LTE1LjA5LTEyLjE1LTIzLjMzLTE2Ljc4Yy04LjI3LTQuNjEtMTcuMTEtOC4xMy0yNi40Ni0xMC41NwoJCQljLTkuMzgtMi40Mi0xOS44OC0zLjY0LTMxLjU2LTMuNjRjLTExLjkxLDAtMjMuNTksMS42OS0zNS4wNCw1LjFjLTExLjQyLDMuNDEtMjEuNjQsOC4zOS0zMC42NCwxNC45NwoJCQljLTksNi41Ni0xNi4yNCwxNC44My0yMS43MSwyNC43OWMtNS40NSw5Ljk5LTguMiwyMS41Mi04LjIsMzQuNjZjMCwxMy42MywzLjQxLDI1LjA1LDEwLjIyLDM0LjMxCgkJCWM2LjgxLDkuMjMsMTUuMzcsMTcuMDgsMjUuNzEsMjMuNTJjMTAuMzQsNi40NiwyMS41NSwxMS45MSwzMy41OCwxNi40MmMxMi4wMyw0LjQ5LDIzLjIyLDguOTMsMzMuNTUsMTMuMzIKCQkJYzEwLjM0LDQuMzcsMTguOTIsOS4wNSwyNS43MywxNC4wM2M2Ljc5LDUsMTAuMjIsMTEuMjYsMTAuMjIsMTguOGMwLDUuNTktMS40MSwxMC4zOS00LjIxLDE0LjRjLTIuOCw0LjAyLTYuMjcsNy4zNS0xMC4zOSwxMC4wMwoJCQljLTQuMTYsMi42OC04Ljc2LDQuNy0xMy44Niw2LjAyYy01LjEyLDEuMzQtMTAuMSwyLjAyLTE0Ljk3LDIuMDJjLTksMC0xNy4wOC0xLjI5LTI0LjI3LTMuODNjLTEuMzYtMC40OS0xMC41NS0zLjY5LTE5LjUtMTAuMjIKCQkJYy0xOS42OS0xNC4zOC0yNi45Ny0zNi42My0yOS4xMS00NC4xM2MtMTAuOTcsOS40LTIxLjkyLDE4LjgtMzIuOSwyOC4yYzEuMzYsOS44NSw1LjQsMjYuNjcsMTguNTksNDAuNzQKCQkJYzguMjcsOC44MSwxNy41MywxMy42LDI0LjYzLDE3LjUxYzguNjUsNC43NSwxNy45Myw4LjI3LDI3LjkyLDEwLjU3YzkuOTYsMi4zLDIxLjE1LDMuNDgsMzMuNTUsMy40OAoJCQljMTAuNzEsMCwyMS45LTEuNzIsMzMuNTgtNS4xMmMxMS42OC0zLjM4LDIyLjM3LTguMzksMzIuMS0xNC45NGM5LjczLTYuNTgsMTcuNzYtMTQuNjYsMjQuMDgtMjQuMjcKCQkJYzYuMzItOS41OSw5LjQ3LTIwLjYxLDkuNDctMzMuMDFjMC0xMy42MS0zLjQxLTI1LjA1LTEwLjItMzQuMjhjLTYuODEtOS4yNi0xNS4zOS0xNy4wNC0yNS43My0yMy4zNgoJCQljLTEwLjM0LTYuMzItMjEuNDgtMTEuNjgtMzMuMzctMTYuMDVjLTExLjk0LTQuMzctMjMuMDUtOC42OS0zMy4zOS0xMi45NWMtMTAuMzQtNC4yNS0xOC45Mi04Ljk1LTI1LjczLTE0LjA1CgkJCWMtNi44MS01LjEtMTAuMi0xMS40Mi0xMC4yLTE4Ljk2YzAtNS41OSwxLjA4LTEwLjYsMy4yNy0xNC45N0MxMjgyLjAxLDIzNy4zLDEyODQuOTUsMjMzLjY1LDEyODguNTksMjMwLjcyeiIvPgoJCTxwYXRoIGNsYXNzPSJzdDciIGQ9Ik0xNzg3LjY1LDI1NC44bC01My4yNywxMTkuM2wtNTMuNjItMTE5LjNoLTM1LjM5aC0yMC44aC00NS4yM2wtNzguMDYsNjIuMzljMCwwLTAuODItMTQ2LjU1LTEuMTUtMTU0LjE3CgkJCWMtOC43Miw3LjYxLTE3LjQxLDE1LjIzLTI2LjEzLDIyLjg0Yy04LjY3LDcuNTktMTcuMzIsMTUuMTYtMjUuOTksMjIuNzJ2MzAuNTJ2MjA3Ljk1aDUzLjI3VjM3NC4xbDEyLjM4LTEwLjIybDYzLjQ5LDgzLjE4aDYxLjI4CgkJCWwtODUuNzItMTE1LjI4bDc3LjQ3LTY0LjM2bDc1LjczLDE3MC41MmwtNDEuNTksOTQuODZoNTUuNDVsMTIzLjMxLTI3OEwxNzg3LjY1LDI1NC44TDE3ODcuNjUsMjU0Ljh6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==" alt="VanillaSky"></div><div class="group"><button class="round" type="button" data-go="conversation" aria-label="New session"><svg data-icon="plus"></svg></button><button class="pill" type="button" data-go="history-demo"><svg data-icon="history"></svg><span class="nav-label">History</span></button></div><div class="group"><button class="round" type="button" id="voice-demo" aria-label="Turn voice off" aria-pressed="true"><svg data-icon="sound"></svg></button><button class="round" type="button" data-go="settings-demo" aria-label="Settings"><svg data-icon="settings"></svg></button></div></header></div>
 <div class="surface-grid"><div class="surface" style="background:var(--vs-media-ground)"><strong>Canvas</strong><code>--vs-media-ground</code></div><div class="surface" style="background:var(--vs-media-glass)"><strong>Glass</strong><code>--vs-media-glass</code></div><div class="surface" style="background:var(--vs-media-hover)"><strong>Hover</strong><code>--vs-media-hover</code></div><div class="surface" style="background:var(--vs-media-selected)"><strong>Selected</strong><code>--vs-media-selected</code></div></div></section>
 <section class="doc-section" id="panels"><div class="section-heading"><span class="number">02</span><h2>A place for the details</h2></div><p class="section-copy">Settings and history share the same glass surface. Switches describe the current experience; visuals and style apply to the next question. Try the controls below.</p><div class="doc-grid">
-<div class="doc-preview popover-demo" id="settings-demo"><div class="sheet-popover settings"><header class="popover-heading"><h2>Settings</h2><button class="round" type="button" data-go="panels" aria-label="Back to section heading"><svg data-icon="close"></svg></button></header><fieldset class="playback-options"><legend>Watching</legend><label class="switch-row"><span><strong>Subtitles</strong><small>Read along with the answer</small></span><input type="checkbox" role="switch" checked id="show-captions"></label><label class="switch-row"><span><strong>Keep controls visible</strong><small>Keep the input bar on screen</small></span><input type="checkbox" role="switch"></label></fieldset><fieldset class="visual-options"><legend>Video creation</legend><label class="choice-row"><input type="radio" name="visuals" checked><span><strong>Templates only</strong><small>Animated text, diagrams and charts</small></span></label><label class="choice-row"><input type="radio" name="visuals"><span><strong>Some AI video</strong><small>Animation with one AI-generated scene</small></span></label><label class="choice-row"><input type="radio" name="visuals"><span><strong>Full AI video</strong><small>AI-generated footage · billed per clip</small></span></label></fieldset><fieldset class="style-options"><legend>Video style</legend><label><input type="radio" name="style" checked><span>Documentary</span></label><label><input type="radio" name="style"><span>Illustrated</span></label><label><input type="radio" name="style"><span>Blueprint</span></label></fieldset><p class="settings-note">Creation and style changes apply to your next question.</p></div></div>
+<div class="doc-preview popover-demo" id="settings-demo"><div class="sheet-popover settings"><header class="popover-heading"><h2>Settings</h2><button class="round" type="button" data-go="panels" aria-label="Back to section heading"><svg data-icon="close"></svg></button></header><fieldset class="playback-options"><legend>Watching</legend><label class="switch-row"><span><strong>Subtitles</strong><small>Read along with the answer</small></span><input type="checkbox" role="switch" checked id="show-captions"></label><label class="switch-row"><span><strong>Keep controls visible</strong><small>Keep the input bar on screen</small></span><input type="checkbox" role="switch"></label></fieldset><fieldset class="visual-options"><legend>Video creation</legend><label class="choice-row"><input type="radio" name="visuals" checked><span><strong>Templates only</strong><small>Animated text, diagrams and charts</small></span></label><label class="choice-row"><input type="radio" name="visuals"><span><strong>Some AI video</strong><small>Animation with one AI-generated scene</small></span></label><label class="choice-row"><input type="radio" name="visuals"><span><strong>Full AI video</strong><small>AI-generated footage · billed per clip</small></span></label></fieldset><fieldset class="style-options"><legend>Video style</legend><label><input type="radio" name="style" checked><span>Documentary</span></label><label><input type="radio" name="style"><span>Illustrated</span></label><label><input type="radio" name="style"><span>Blueprint</span></label></fieldset><p class="settings-note">Creation and style changes apply to your next question.</p>
+        <nav class="developer-links" aria-label="Build with VanillaSky">
+          <p class="section-label">Build with VanillaSky</p>
+          <a href="https://github.com/VanillaSkyAi/video/blob/main/docs/getting-started.md" target="_blank" rel="noopener noreferrer">Docs<span aria-hidden="true">↗</span></a>
+          <button type="button" id="about-demo-button" aria-expanded="false" aria-controls="about-demo">About<span aria-hidden="true">+</span></button>
+          <div id="about-demo" class="developer-about" role="region" aria-label="About VanillaSky" hidden><p>VanillaSky is an open-source SDK for conversations that answer in video. Developers connect their own AI providers through their application server.</p></div>
+          <a href="https://github.com/VanillaSkyAi/video" target="_blank" rel="noopener noreferrer">GitHub<span aria-hidden="true">↗</span></a>
+        </nav></div></div>
 <div class="doc-stack"><div class="doc-preview popover-demo" id="history-demo"><nav class="sheet-popover history" aria-label="Example session history"><div class="popover-heading"><h2>History</h2><button class="round" type="button" data-go="panels" aria-label="Back to section heading"><svg data-icon="close"></svg></button></div><section><h3 class="section-label">Current session</h3><button class="history-row current" type="button"><span class="index">01</span><span class="prompt">Why does the ocean look blue?<small>Now playing</small></span></button><button class="history-row" type="button"><span class="index">02</span><span class="prompt">What lives in the deepest part?</span></button></section><section><h3 class="section-label">Earlier sessions</h3><button class="history-row" type="button"><svg data-icon="history"></svg><span class="prompt">A different way to see the stars<small>3 completed answers</small></span></button></section></nav></div><p class="doc-note">Select a history row to try its selected state. In the experience, selecting an answer replays its video and clears the previous draft. History retains up to ten sessions in memory, including completed answers. The host owns durable persistence.</p></div>
 </div></section>
 <section class="doc-section" id="conversation"><div class="section-heading"><span class="number">03</span><h2>One field. Every follow-up.</h2></div><p class="section-copy">Speak or type directly over the picture. Beginning a question pauses playback. Sending starts the next answer; canceling returns to the previous playback state.</p><div class="doc-preview"><div class="demo-toolbar" aria-label="Composer preview states"><button type="button" data-state="ready" aria-pressed="true">Ready</button><button type="button" data-state="listening" aria-pressed="false">Listening</button><button type="button" data-state="thinking" aria-pressed="false">Transcribing</button></div><div class="conversation-composer"><div class="composer-meta"><span id="composer-status" role="status">Interactive preview · no microphone or model call</span></div><form class="composer" id="composer-demo"><button class="ghost transport" type="button" aria-label="Play preview" id="play-demo"><svg data-icon="play"></svg></button><label class="sr-only" for="demo-question">Question</label><textarea id="demo-question" rows="1" placeholder="Ask a follow-up…"></textarea><button class="ghost" type="button" id="mic-demo" aria-label="Preview listening state" aria-pressed="false"><svg data-icon="mic"></svg></button><button class="send" type="submit" aria-label="Preview send" disabled><svg data-icon="send"></svg></button></form></div></div><p class="doc-note">44px targets. 10px between microphone and send. The field grows to 120px and keeps the controls within reach.</p></section>
@@ -101,6 +108,7 @@ body { background: #080b16; }
 <script>
 for (const svg of document.querySelectorAll('svg[data-icon]')) { svg.setAttribute('viewBox','0 0 24 24'); svg.setAttribute('width','18'); svg.setAttribute('height','18'); svg.setAttribute('fill','none'); svg.setAttribute('stroke','currentColor'); svg.setAttribute('stroke-width','1.75'); svg.setAttribute('stroke-linecap','round'); svg.setAttribute('stroke-linejoin','round'); svg.setAttribute('aria-hidden','true'); const use=document.createElementNS('http://www.w3.org/2000/svg','use'); use.setAttribute('href','#'+svg.dataset.icon); svg.append(use); }
 const byId=id=>document.getElementById(id);
+byId('about-demo-button').addEventListener('click', event => { const button = event.currentTarget; const open = button.getAttribute('aria-expanded') !== 'true'; button.setAttribute('aria-expanded', String(open)); button.querySelector('span').textContent = open ? '−' : '+'; byId('about-demo').hidden = !open; });
 for (const button of document.querySelectorAll('[data-go]')) button.addEventListener('click',()=>byId(button.dataset.go).scrollIntoView({block:'start'}));
 byId('voice-demo').addEventListener('click',event=>{const b=event.currentTarget; const on=b.getAttribute('aria-pressed')!=='true'; b.setAttribute('aria-pressed',String(on)); b.setAttribute('aria-label',on?'Turn voice off':'Turn voice on'); b.style.opacity=on?'1':'.5';});
 for (const row of document.querySelectorAll('.history-row')) row.addEventListener('click',()=>{document.querySelectorAll('.history-row').forEach(r=>r.classList.remove('current'));row.classList.add('current');});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanillaskyai/video",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "Open-source voice-and-video chat SDK for AI applications.",
   "keywords": [
     "video-chat",

package/starters/video-chat/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vanillaskyai/video": "0.8.1",
+    "@vanillaskyai/video": "0.8.2",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "@ai-sdk/anthropic": "^3.0.0",

package/styles/video-chat.css

@@ -968,6 +968,15 @@
 
 .vanillasky-video-chat .settings-note { margin: 0; padding: 0 3px; color: #aeb2c7; font-size: 11px; line-height: 1.5; }
 
+.vanillasky-video-chat .developer-links { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / 12%); }
+.vanillasky-video-chat .developer-links .section-label { padding-bottom: 4px; }
+.vanillasky-video-chat .developer-links :is(a, button) { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 12px; color: var(--vs-fg); font-size: 13px; line-height: 1.4; text-decoration: none; }
+.vanillasky-video-chat .developer-links :is(a, button):hover { background: var(--vs-surface-hover); }
+.vanillasky-video-chat .developer-links :is(a, button) span { color: var(--vs-fg-muted); font-size: 18px; }
+.vanillasky-video-chat .developer-links button { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; font-family: inherit; }
+.vanillasky-video-chat .developer-about p { margin: 0; padding: 2px 12px 12px; color: var(--vs-fg-muted); font-size: 12px; line-height: 1.6; }
+
+
 .vanillasky-video-chat .history { display: grid; gap: 4px; }
 
 .vanillasky-video-chat .history .section-label { padding-top: 8px; padding-bottom: 5px; }