diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index c975bd9..8f66556 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -111,7 +111,7 @@ jobs: tablet-tests: name: Tablet Tests runs-on: ubuntu-latest - timeout-minutes: 20 + timeout-minutes: 45 steps: - name: Checkout diff --git a/LICENSE b/LICENSE index dafb8d0..94526d0 100644 --- a/LICENSE +++ b/LICENSE @@ -19,17 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - ---- - -Third-Party Licenses: - -Open Color -Copyright (c) 2016 Heeyeun Jeong -MIT License -https://yeun.github.io/open-color/ - -Phosphor Icons -Copyright (c) 2020 Phosphor Icons -MIT License -https://phosphoricons.com/ diff --git a/README.md b/README.md index 5202701..914f6de 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Vanduo Framework v1.3.4 +# Vanduo Framework v1.3.5

Vanduo Framework Banner @@ -7,115 +7,34 @@

NPM Version Build Status - Minified Size License

-**Essential just like water is.** +**Essential just like water is.** -- **Pure HTML, CSS, JS** -- **No third party dependencies** -- **Free and open source.** +Vanduo is a lightweight, zero-dependency UI framework built with pure HTML, CSS, and JavaScript. It ships 46+ components, responsive utilities, dark mode support, and a flexible theming system. -## Overview +[Browse Docs](https://vanduo.dev/#docs) -A lightweight, pure HTML/CSS/JS framework with **46+ components** for designing beautiful interfaces. Zero runtime dependencies, no mandatory build tools, just clean and simple code. +## Highlights -[**Browse Full Documentation →**](https://vanduo.dev/#docs) - -## Features - -- 🎨 **Pure CSS/JS** - No libraries, no dependencies -- 🚀 **Lightweight** - Minimal file size, maximum performance -- 📱 **Responsive** - Mobile-first design approach -- 🎯 **Utility-First** - Flexible utility classes for rapid development -- 🧩 **Modular** - Import only what you need -- ♿ **Accessible** - Built with accessibility in mind (WCAG 2.1 AA) -- 🌙 **Dark Mode** - Automatic OS preference detection + manual toggle -- 🌗 **Theme Switcher** - Lightweight light/dark/system toggle with shared preference storage -- 🎛️ **Theme Customizer** - Real-time color, radius, font, and mode customization -- 🔍 **SEO-Ready** - Comprehensive meta tags, structured data, and sitemap - ---- - -## What's New in v1.3.4 - -v1.3.4 introduces the Glass Effects system — no breaking changes: - -- **New `effects/glass.css` module.** Core `.vd-glass` class with `backdrop-filter` blur, translucent background, specular highlight, and noise texture. Size variants (`vd-glass-sm / md / lg / xl`), modifiers (`vd-glass-tinted`, `vd-glass-floating`, `vd-glass-contrast`), and full `prefers-reduced-transparency` / `@supports not (backdrop-filter)` fallbacks. -- **Glass design tokens.** `--vd-glass-blur`, `--vd-glass-saturate`, `--vd-glass-bg-opacity`, `--vd-glass-bg-light/dark`, `--vd-glass-border-light/dark`, `--vd-glass-shadow`, `--vd-glass-highlight-alpha`, `--vd-glass-noise-opacity` — all with automatic dark-mode overrides and `--vd-glass-*` aliases. -- **Component glass variants.** Opt-in `.vd-*-glass` modifier added to Navbar, Modal, Dropdown, Tooltip, Toast, Card, and FAB. -- **Scroll-activated glass.** `initScrollWatcher()` in `navbar.js` activates `.vd-navbar-glass` transparently at rest and frosted on scroll (configurable via `data-scroll-threshold`). Generic `data-glass-scroll` + `data-glass-sentinel` attribute API (new `glass.js`, `IntersectionObserver`) brings the same pattern to any element via `.is-glass-active`. -- **vd-hex selection fix.** `VdHexGrid` re-syncs `selectedHex` references after grid regeneration, preventing stale coordinates during rotation. - -## What's New in v1.3.3 - -v1.3.3 is a maintenance release with no breaking changes: - -- **Theme default primary alignment.** `ThemeCustomizer` and `ThemeSwitcher` normalize stale `black`/`amber` primary pairs against `localStorage` and `prefers-color-scheme`, so light, dark, and system modes stay consistent with `data-primary` after reloads and OS theme changes. -- **Documentation site.** Theme customizer demo storage keys align with framework (`vanduo-radius`, `vanduo-font-preference`); changelog and CDN pins updated to v1.3.3. - ---- - -## What's New in v1.3.2 - -v1.3.2 is a component release centered on audio playback, with no breaking changes: - -- **New Music Player component.** Ships a zero-dependency HTML5 audio player with play/pause, previous/next, volume, track title, and optional progress, shuffle, and playlist controls. -- **Framework-friendly API.** Accepts a plain JavaScript tracks array (`[{ name, url }]`), exposes custom events, and supports programmatic control through `window.VanduoMusicPlayer`. -- **Responsive player layout.** Control wrapping and volume sizing were tuned so the component stays usable across compact, inline, and mobile layouts. -- **Release coverage and artifacts updated.** Package metadata, generated bundles, `llms.txt`, and release-facing README examples now point at v1.3.2. - -The framework now ships **46+ components**, including the new Music Player and the additions below. - -| Component | Vanduo Name | Type | -|---|---|---| -| Carousel | Flow | CSS + JS | -| Music Player | Music Player | CSS + JS | -| Popover | Bubble | CSS + JS | -| Scrollspy | Waypoint | CSS + JS | -| Offcanvas | — (enhanced Sidenav) | CSS + JS | -| Ripple / Waves | Ripple | CSS + JS | -| Floating Action Button | FAB | CSS-only | -| Sticky | Affix | CSS + JS | -| Autocomplete | Suggest | CSS + JS | -| Form Validation | Validate | JS | -| Date Picker | Datepicker | CSS + JS | -| Time Picker | Timepicker | CSS + JS | -| Stepper | Stepper | CSS + JS | -| Timeline | Timeline | CSS-only | -| Rating | Rating | CSS + JS | -| Transfer / Multi-select | Transfer | CSS + JS | -| Tree View | Tree | CSS + JS | -| Spotlight / Feature Discovery | Spotlight | CSS + JS | - ---- +- Pure CSS/JS with no runtime dependencies +- Modular architecture with optional per-component imports +- Built-in dark/light/system theme switching +- Runtime Theme Customizer for color, font, and radius tokens +- Accessibility-focused components and utilities ## Quick Start -### Option 1: CDN (Recommended) - -The quickest way to get started — no install, no build step. Add two lines to any HTML file: +### CDN (recommended) ```html - - - - - + + ``` -**Pin to a specific version** for production: -```html - - - -``` - -### Option 2: Download - -[**Download the dist/ folder**](https://github.com/vanduo-oss/framework/tree/main/dist) and include locally — no internet connection required at runtime: +### Local dist files ```html @@ -123,97 +42,37 @@ The quickest way to get started — no install, no build step. Add two lines to ``` -The `dist/` folder is **self-contained** (CSS, JS, Fonts, Icons). - -### Option 3: Source Files - -For development or when you need more control, use the unminified source: - -```html - - - -``` - -### Option 4: With a Bundler (Vite) - -> **Requires a build tool.** The imports below use bare module specifiers (`@vanduo-oss/framework`) which browsers cannot resolve on their own. For static HTML files, use the CDN or Download options above. - -Scaffold a Vite project and install Vanduo: +### Package install (bundlers) ```bash -pnpm create vite my-app --template vanilla -cd my-app pnpm add @vanduo-oss/framework ``` -Import in your entry file (e.g. `main.js`): - ```js import '@vanduo-oss/framework/css'; import { Vanduo } from '@vanduo-oss/framework'; -Vanduo.init(); -``` - -**Why pnpm?** pnpm enforces a strict lockfile and creates an isolated `node_modules` structure. Vanduo's `.npmrc` security policies work best with pnpm out of the box. - -*(Note: `npm install @vanduo-oss/framework` and `yarn add @vanduo-oss/framework` will also work, but they do not enforce the same strict lockfile and isolated `node_modules` security guarantees.)* - ---- - -## LLM Access - -This project includes an [`llms.txt`](llms.txt) file — a structured markdown summary designed for AI assistants and LLM-powered code editors. It provides quick access to framework documentation, component references, and usage patterns. ---- - -## Release Assets (Maintainers) - -Use the hardened upload script to attach only approved bundle artifacts from `dist/`: - -```bash -pnpm run release:assets -- v1.3.4 +Vanduo.init(); ``` -Notes: -- If tag is omitted, it defaults to `v` + version from `package.json`. -- Use `--dry-run` to preview files without uploading. - ---- - -## Documentation +## Docs and Resources -Comprehensive documentation for all components, utilities, and customization options is available at vanduo.dev. - -[**View Documentation**](https://vanduo.dev/#docs) - -### Key Capabilities - -* **Dark Mode**: Works automatically with system preferences. Can be forced via `data-theme="dark"` on ``. -* **Theme Switcher**: Lightweight light/dark/system toggle that can coexist with Theme Customizer. -* **Theme Customizer**: Built-in runtime tool to change colors, fonts, and radius. -* **Modular Imports**: Import only specific components (e.g., `css/components/buttons.css`) to keep your site lean. -* **Icons**: Includes [Phosphor Icons](https://phosphoricons.com) (Regular + Fill weights bundled). - ---- +- Website: [vanduo.dev](https://vanduo.dev) +- Docs: [vanduo.dev/#docs](https://vanduo.dev/#docs) +- npm: [@vanduo-oss/framework](https://www.npmjs.com/package/@vanduo-oss/framework) +- Releases: [GitHub Releases](https://github.com/vanduo-oss/framework/releases) +- LLM reference: [`llms.txt`](llms.txt) ## Project Structure -``` +```text vanduo-framework/ -├── dist/ # Production ready files (minified) -├── css/ -│ ├── vanduo.css # Main framework file (imports all) -│ ├── core/ # Foundation (colors, typography, grid) -│ ├── components/ # UI components (buttons, cards, etc) -│ ├── utilities/ # Utility classes -│ └── effects/ # Visual effects -├── js/ -│ ├── vanduo.js # Main entry point -│ └── components/ # Component logic -├── icons/ # Phosphor Icons -├── fonts/ # Web fonts -└── tests/ # Framework test suite +├── dist/ # Production bundles +├── css/ # Core, components, utilities, effects +├── js/ # Framework runtime and components +├── fonts/ # Bundled web fonts +├── icons/ # Phosphor icons bundle +└── tests/ # Playwright + linting ``` ## Browser Support @@ -225,12 +84,10 @@ vanduo-framework/ ## License -MIT License - see [LICENSE](LICENSE) file for details. +MIT - see [LICENSE](LICENSE). +Third-party notices are listed in [THIRD-PARTY-LICENSES](THIRD-PARTY-LICENSES). ## Credits -- **Color System**: [Open Color](https://yeun.github.io/open-color/) by Heeyeun Jeong (MIT License) -- **Icons**: [Phosphor Icons](https://phosphoricons.com) (MIT License) - ---- -Vanduo Framework - Built with ❤️ for the web. +- [Open Color](https://yeun.github.io/open-color/) (MIT) +- [Phosphor Icons](https://phosphoricons.com/) (MIT) diff --git a/THIRD-PARTY-LICENSES b/THIRD-PARTY-LICENSES new file mode 100644 index 0000000..29c0520 --- /dev/null +++ b/THIRD-PARTY-LICENSES @@ -0,0 +1,14 @@ +Third-Party Licenses +==================== + +Open Color +---------- +Copyright (c) 2016 Heeyeun Jeong +License: MIT +Source: https://yeun.github.io/open-color/ + +Phosphor Icons +-------------- +Copyright (c) 2020 Phosphor Icons +License: MIT +Source: https://phosphoricons.com/ diff --git a/css/components/tooltips.css b/css/components/tooltips.css index be80964..bb41449 100644 --- a/css/components/tooltips.css +++ b/css/components/tooltips.css @@ -5,11 +5,11 @@ :root { /* Tooltip Colors */ - --tooltip-bg: var(--color-gray-900); - --tooltip-bg-light: var(--color-white); + --tooltip-bg: var(--color-white); + --tooltip-bg-light: var(--color-gray-100); --tooltip-bg-dark: var(--color-gray-900); - --tooltip-text-color: var(--color-white); - --tooltip-text-color-light: var(--color-gray-900); + --tooltip-text-color: var(--color-gray-900); + --tooltip-text-color-light: var(--color-gray-800); --tooltip-text-color-dark: var(--color-white); /* Tooltip Spacing (Fibonacci pairs: x/y ratio ~ phi) */ @@ -39,16 +39,16 @@ /* Dark Theme Overrides */ [data-theme="dark"] { - --tooltip-bg: var(--color-gray-100); - --tooltip-text-color: var(--color-gray-900); + --tooltip-bg: var(--color-gray-900); + --tooltip-text-color: var(--color-white); --tooltip-bg-light: var(--color-gray-800); --tooltip-text-color-light: var(--color-gray-100); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { - --tooltip-bg: var(--color-gray-100); - --tooltip-text-color: var(--color-gray-900); + --tooltip-bg: var(--color-gray-900); + --tooltip-text-color: var(--color-white); --tooltip-bg-light: var(--color-gray-800); --tooltip-text-color-light: var(--color-gray-100); } diff --git a/css/effects/morph.css b/css/effects/morph.css new file mode 100644 index 0000000..4178e97 --- /dev/null +++ b/css/effects/morph.css @@ -0,0 +1,259 @@ +/** + * Vanduo Framework - Water Morph Effect + * Liquid wave content-swap animation on click + * + * Usage: + * Add `.vd-morph` (or `data-vd-morph`) to any element. + * Inside it, place: + * .vd-morph-wave — radial wave layer (auto-created by JS if missing) + * .vd-morph-shine — light-sweep layer (auto-created by JS if missing) + * .vd-morph-content.vd-morph-current — visible state + * .vd-morph-content.vd-morph-next — hidden next state + */ + +:root { + --morph-duration: 0.75s; + --morph-easing: cubic-bezier(0.2, 0.8, 0.35, 1); + --morph-blur-peak: 11px; + --morph-wave-color: var(--color-primary, #3b82f6); +} + +/* ========== Base ========== */ + +.vd-morph, +[data-vd-morph] { + position: relative; + overflow: hidden; + cursor: pointer; + -webkit-tap-highlight-color: transparent; +} + +/* ========== Wave Layer ========== */ + +.vd-morph-wave { + position: absolute; + border-radius: 50%; + background: + radial-gradient(circle at 32% 28%, + color-mix(in srgb, #fff 55%, transparent) 0%, + color-mix(in srgb, #fff 18%, transparent) 18%, + transparent 38%), + radial-gradient(circle at 68% 70%, + color-mix(in srgb, #fff 30%, transparent) 0%, + transparent 30%), + radial-gradient(circle at 50% 50%, + color-mix(in srgb, var(--morph-wave-color) 96%, #a8d8ff) 0%, + color-mix(in srgb, var(--morph-wave-color) 82%, #7ec8ff) 35%, + color-mix(in srgb, var(--morph-wave-color) 70%, #5ba4f5) 65%, + color-mix(in srgb, var(--morph-wave-color) 90%, #4478f0) 100%); + pointer-events: none; + opacity: 0; + transform: translate(-50%, -50%); + will-change: width, height, opacity, filter; +} + +.vd-morph.is-morphing .vd-morph-wave { + animation: vd-morph-expand var(--morph-duration) var(--morph-easing) forwards; +} + +.vd-morph.is-morphing .vd-morph-wave::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + border-radius: 50%; + background: + radial-gradient(circle at 50% 50%, + color-mix(in srgb, var(--morph-wave-color) 70%, #b0e0ff) 0%, + color-mix(in srgb, var(--morph-wave-color) 50%, #88c0ff) 45%, + transparent 80%); + transform: translate(-50%, -50%); + opacity: 0; + animation: vd-morph-expand2 var(--morph-duration) var(--morph-easing) 0.08s forwards; +} + +@keyframes vd-morph-expand { + 0% { + width: 0; + height: 0; + opacity: 0; + filter: blur(0px) saturate(2); + } + 6% { + opacity: 1; + filter: blur(1px) saturate(2.2); + } + 35% { + opacity: 0.92; + filter: blur(6px) saturate(1.7); + } + 68% { + width: 360%; + height: 360%; + opacity: 0.6; + filter: blur(var(--morph-blur-peak)) saturate(1.3); + } + 100% { + width: 360%; + height: 360%; + opacity: 0; + filter: blur(7px) saturate(1); + } +} + +@keyframes vd-morph-expand2 { + 0% { + width: 0; + height: 0; + opacity: 0; + filter: blur(0px); + } + 10% { + opacity: 0.7; + filter: blur(3px); + } + 60% { + width: 280%; + height: 280%; + opacity: 0.38; + filter: blur(14px); + } + 100% { + width: 280%; + height: 280%; + opacity: 0; + filter: blur(10px); + } +} + +/* ========== Shine Sweep ========== */ + +.vd-morph-shine { + position: absolute; + top: 0; + left: -110%; + width: 80%; + height: 100%; + background: linear-gradient( + 105deg, + transparent 0%, + color-mix(in srgb, #fff 10%, transparent) 35%, + color-mix(in srgb, #fff 52%, transparent) 50%, + color-mix(in srgb, #fff 10%, transparent) 65%, + transparent 100% + ); + pointer-events: none; + opacity: 0; + transform: skewX(-12deg); + will-change: left, opacity; +} + +.vd-morph.is-morphing .vd-morph-shine { + animation: vd-morph-shine 0.72s cubic-bezier(0.3, 0.65, 0.5, 1) 0.04s forwards; +} + +@keyframes vd-morph-shine { + 0% { + left: -110%; + opacity: 0; + } + 15% { + opacity: 0.9; + } + 72% { + opacity: 0.4; + } + 100% { + left: 130%; + opacity: 0; + } +} + +/* ========== Completion Bounce ========== */ + +.vd-morph.morph-done { + animation: vd-morph-bounce 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +@keyframes vd-morph-bounce { + 0% { transform: scale(0.97); } + 60% { transform: scale(1.025); } + 100% { transform: scale(1); } +} + +/* ========== Content Layers ========== */ + +.vd-morph-content { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + gap: 0.45rem; + pointer-events: none; + will-change: opacity, transform, filter; +} + +.vd-morph-current { + opacity: 1; + transform: scale(1) translateY(0); + filter: blur(0px); + z-index: 2; + transition: + opacity 0.28s cubic-bezier(0.4, 0, 0.6, 1), + transform 0.28s cubic-bezier(0.4, 0, 0.6, 1), + filter 0.28s ease; +} + +.vd-morph-next { + opacity: 0; + transform: scale(0.86) translateY(4px); + filter: blur(3px); + z-index: 1; + transition: + opacity 0.3s cubic-bezier(0, 0, 0.2, 1), + transform 0.3s cubic-bezier(0, 0, 0.2, 1), + filter 0.3s ease; +} + +.vd-morph.is-morphing .vd-morph-current { + opacity: 0; + transform: scale(0.82) translateY(-4px); + filter: blur(4px); + transition-duration: 0.2s; + transition-delay: 0s; +} + +.vd-morph.is-morphing .vd-morph-next { + opacity: 1; + transform: scale(1) translateY(0); + filter: blur(0px); + transition-duration: 0.3s; + transition-delay: 0.25s; +} + +/* ========== Size Variants ========== */ + +.vd-morph-sm { + --morph-duration: 0.5s; + --morph-blur-peak: 7px; +} + +.vd-morph-lg { + --morph-duration: 1s; + --morph-blur-peak: 16px; +} + +/* ========== Accessibility ========== */ + +@media (prefers-reduced-motion: reduce) { + .vd-morph, + .vd-morph-content, + .vd-morph-wave, + .vd-morph-shine { + transition: none !important; + animation: none !important; + } +} diff --git a/css/vanduo.css b/css/vanduo.css index 75c50a6..14afcff 100644 --- a/css/vanduo.css +++ b/css/vanduo.css @@ -76,6 +76,7 @@ /* Effects - Phase 7 */ @import url('effects/parallax.css'); @import url('effects/glass.css'); +@import url('effects/morph.css'); /* Components - Phase 9 (New) */ @import url('components/draggable.css'); diff --git a/dist/build-info.json b/dist/build-info.json index 0b3bfd3..3bc82cc 100644 --- a/dist/build-info.json +++ b/dist/build-info.json @@ -1,6 +1,6 @@ { - "version": "1.3.4", - "builtAt": "2026-04-14T21:21:55.517Z", - "commit": "73e3db5", + "version": "1.3.5", + "builtAt": "2026-04-15T18:39:53.955Z", + "commit": "3ca4f62", "mode": "development+production" } \ No newline at end of file diff --git a/dist/vanduo.cjs.js b/dist/vanduo.cjs.js index 1add41b..ef1a29d 100644 --- a/dist/vanduo.cjs.js +++ b/dist/vanduo.cjs.js @@ -1,4 +1,4 @@ -/*! Vanduo v1.3.4 | Built: 2026-04-14T21:21:55.517Z | git:73e3db5 | development */ +/*! Vanduo v1.3.5 | Built: 2026-04-15T18:39:53.955Z | git:3ca4f62 | development */ var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; @@ -132,7 +132,7 @@ module.exports = __toCommonJS(index_exports); // js/vanduo.js (function() { "use strict"; - const VANDUO_VERSION = true ? "1.3.4" : "0.0.0-dev"; + const VANDUO_VERSION = true ? "1.3.5" : "0.0.0-dev"; const Vanduo2 = { version: VANDUO_VERSION, components: {}, @@ -6597,6 +6597,117 @@ module.exports = __toCommonJS(index_exports); window.VanduoGlassScroll = GlassScroll; })(); +// js/components/morph.js +(function() { + "use strict"; + const MORPH_DURATION_MS = 750; + const Morph = { + instances: /* @__PURE__ */ new Map(), + init: function() { + const elements = document.querySelectorAll(".vd-morph, [data-vd-morph]"); + elements.forEach(function(el) { + if (Morph.instances.has(el)) return; + if (el.getAttribute("data-vd-morph") === "manual") return; + Morph.initInstance(el); + }); + }, + initInstance: function(el) { + Morph._ensureLayers(el); + const cleanup = []; + let morphing = false; + const handleClick = function(e) { + if (morphing) return; + Morph._runMorph(el, e, function() { + morphing = false; + }); + morphing = true; + }; + el.addEventListener("click", handleClick); + cleanup.push(function() { + el.removeEventListener("click", handleClick); + }); + this.instances.set(el, { cleanup }); + }, + morph: function(el) { + if (!el) return; + if (!this.instances.has(el)) this.initInstance(el); + this._runMorph(el, null, null); + }, + destroy: function(el) { + const instance = this.instances.get(el); + if (!instance) return; + instance.cleanup.forEach(function(fn) { + fn(); + }); + this.instances.delete(el); + }, + destroyAll: function() { + this.instances.forEach(function(_, el) { + Morph.destroy(el); + }); + }, + /* ── Internal helpers ── */ + _ensureLayers: function(el) { + if (!el.querySelector(".vd-morph-wave")) { + const wave = document.createElement("span"); + wave.className = "vd-morph-wave"; + wave.setAttribute("aria-hidden", "true"); + el.insertBefore(wave, el.firstChild); + } + if (!el.querySelector(".vd-morph-shine")) { + const shine = document.createElement("span"); + shine.className = "vd-morph-shine"; + shine.setAttribute("aria-hidden", "true"); + const waveEl = el.querySelector(".vd-morph-wave"); + if (waveEl && waveEl.nextSibling) { + el.insertBefore(shine, waveEl.nextSibling); + } else { + el.insertBefore(shine, el.firstChild); + } + } + }, + _runMorph: function(el, pointerEvent, onComplete) { + const wave = el.querySelector(".vd-morph-wave"); + if (wave) { + const rect = el.getBoundingClientRect(); + const cx = rect.left + rect.width / 2; + const cy = rect.top + rect.height / 2; + const px = pointerEvent ? pointerEvent.clientX || cx : cx; + const py = pointerEvent ? pointerEvent.clientY || cy : cy; + wave.style.left = px - rect.left + "px"; + wave.style.top = py - rect.top + "px"; + } + el.classList.add("is-morphing"); + let duration = MORPH_DURATION_MS; + const custom = getComputedStyle(el).getPropertyValue("--morph-duration"); + if (custom) { + const parsed = parseFloat(custom); + if (!isNaN(parsed)) duration = parsed * (custom.indexOf("ms") !== -1 ? 1 : 1e3); + } + setTimeout(function() { + el.classList.remove("is-morphing"); + const current = el.querySelector(".vd-morph-current"); + const next = el.querySelector(".vd-morph-next"); + if (current && next) { + current.classList.remove("vd-morph-current"); + current.classList.add("vd-morph-next"); + next.classList.remove("vd-morph-next"); + next.classList.add("vd-morph-current"); + } + el.classList.add("morph-done"); + setTimeout(function() { + el.classList.remove("morph-done"); + }, 350); + if (typeof onComplete === "function") onComplete(); + }, duration); + } + }; + if (typeof window.Vanduo !== "undefined") { + window.Vanduo.register("morph", Morph); + } + window.VanduoMorph = Morph; +})(); + // js/components/flow.js (function() { "use strict"; diff --git a/dist/vanduo.cjs.js.map b/dist/vanduo.cjs.js.map index b6ae493..fdef61d 100644 --- a/dist/vanduo.cjs.js.map +++ b/dist/vanduo.cjs.js.map @@ -1,7 +1,7 @@ { "version": 3, - "sources": ["../js/index.js", "../js/utils/lifecycle.js", "../js/vanduo.js", "../js/components/code-snippet.js", "../js/components/collapsible.js", "../js/components/dropdown.js", "../js/components/font-switcher.js", "../js/components/grid.js", "../js/components/image-box.js", "../js/components/modals.js", "../js/components/navbar.js", "../js/components/pagination.js", "../js/components/parallax.js", "../js/components/preloader.js", "../js/components/select.js", "../js/components/sidenav.js", "../js/components/tabs.js", "../js/components/theme-customizer.js", "../js/components/theme-switcher.js", "../js/components/toast.js", "../js/components/tooltips.js", "../js/components/doc-search.js", "../js/components/draggable.js", "../js/components/lazy-load.js", "../js/components/glass.js", "../js/components/flow.js", "../js/components/bubble.js", "../js/components/waypoint.js", "../js/components/ripple.js", "../js/components/affix.js", "../js/components/suggest.js", "../js/components/validate.js", "../js/components/datepicker.js", "../js/components/timepicker.js", "../js/components/stepper.js", "../js/components/rating.js", "../js/components/transfer.js", "../js/components/tree.js", "../js/components/spotlight.js", "../js/components/music-player.js"], - "sourcesContent": ["/**\n * Vanduo Framework - Bundle Entry Point\n * This file imports all framework components for bundling.\n *\n * All component files are side-effect modules that:\n * 1. Define their component object\n * 2. Register with window.Vanduo via Vanduo.register()\n * 3. Expose a convenience global (e.g. window.VanduoTooltips)\n *\n * The IIFE build uses `globalName: 'VanduoBundle'` so that esbuild's\n * wrapper variable does NOT shadow the real `window.Vanduo` that the\n * side-effect scripts create. After the bundle executes, `window.Vanduo`\n * is the fully-populated framework object.\n *\n * For ESM/CJS consumers we re-export `window.Vanduo` as the default\n * and named export so `import { Vanduo }` and `const { Vanduo } = require()`\n * both work.\n */\n\n// Utilities (must load first \u2014 helpers defines `ready()`, `safeStorageGet()` etc.)\nimport './utils/helpers.js';\nimport './utils/lifecycle.js';\n\n// Core framework object (creates window.Vanduo)\nimport './vanduo.js';\n\n// Components (each registers itself with window.Vanduo)\nimport './components/code-snippet.js';\nimport './components/collapsible.js';\nimport './components/dropdown.js';\nimport './components/font-switcher.js';\nimport './components/grid.js';\nimport './components/image-box.js';\nimport './components/modals.js';\nimport './components/navbar.js';\nimport './components/pagination.js';\nimport './components/parallax.js';\nimport './components/preloader.js';\nimport './components/select.js';\nimport './components/sidenav.js';\nimport './components/tabs.js';\nimport './components/theme-customizer.js';\nimport './components/theme-switcher.js';\nimport './components/toast.js';\nimport './components/tooltips.js';\nimport './components/doc-search.js';\nimport './components/draggable.js';\nimport './components/lazy-load.js';\n\n// Effects (glass scroll activation)\nimport './components/glass.js';\n\n// Phase 10 (v1.2.7) components\nimport './components/flow.js';\nimport './components/bubble.js';\nimport './components/waypoint.js';\nimport './components/ripple.js';\nimport './components/affix.js';\nimport './components/suggest.js';\nimport './components/validate.js';\nimport './components/datepicker.js';\nimport './components/timepicker.js';\nimport './components/stepper.js';\nimport './components/rating.js';\nimport './components/transfer.js';\nimport './components/tree.js';\nimport './components/spotlight.js';\nimport './components/music-player.js';\n\n// Re-export for ESM / CJS consumers\nconst Vanduo = window.Vanduo;\nexport { Vanduo };\nexport default Vanduo;\n", "/**\n * Vanduo Framework - Lifecycle Manager\n * Central registry for component instances and cleanup\n * Prevents memory leaks in SPAs by tracking event listeners\n */\n\n(function() {\n 'use strict';\n\n /**\n * Lifecycle Manager\n * Simple registry that tracks component instances and their cleanup functions\n */\n const Lifecycle = {\n // Map of element -> { componentName, cleanupFunctions }\n instances: new Map(),\n\n /**\n * Register a component instance\n * @param {HTMLElement} element - The DOM element\n * @param {string} componentName - Name of the component\n * @param {Array} cleanupFns - Functions to call on destroy\n */\n register: function(element, componentName, cleanupFns = []) {\n if (this.instances.has(element)) {\n // Already registered, merge cleanup functions\n const existing = this.instances.get(element);\n existing.cleanup = existing.cleanup.concat(cleanupFns);\n return;\n }\n\n this.instances.set(element, {\n component: componentName,\n cleanup: cleanupFns,\n registeredAt: Date.now()\n });\n },\n\n /**\n * Unregister a single element and run its cleanup\n * @param {HTMLElement} element - The element to unregister\n */\n unregister: function(element) {\n const instance = this.instances.get(element);\n if (!instance) return;\n\n // Run all cleanup functions\n instance.cleanup.forEach(function(fn) {\n try {\n fn();\n } catch (e) {\n console.warn('[Vanduo Lifecycle] Cleanup error:', e);\n }\n });\n\n this.instances.delete(element);\n },\n\n /**\n * Destroy all instances of a specific component\n * @param {string} componentName - Optional component name filter\n */\n destroyAll: function(componentName) {\n const toRemove = [];\n\n this.instances.forEach(function(instance, element) {\n if (!componentName || instance.component === componentName) {\n toRemove.push(element);\n }\n });\n\n toRemove.forEach(function(element) {\n Lifecycle.unregister(element);\n });\n },\n\n /**\n * Destroy all instances within a specific container\n * Useful for SPAs when navigating between pages\n * @param {HTMLElement} container - Container element\n */\n destroyAllInContainer: function(container) {\n const toRemove = [];\n\n this.instances.forEach(function(instance, element) {\n if (container.contains(element)) {\n toRemove.push(element);\n }\n });\n\n toRemove.forEach(function(element) {\n Lifecycle.unregister(element);\n });\n },\n\n /**\n * Get all registered instances (for debugging)\n * @returns {Array} Array of instance info objects\n */\n getAll: function() {\n const result = [];\n this.instances.forEach(function(instance, element) {\n result.push({\n element: element,\n component: instance.component,\n registeredAt: instance.registeredAt\n });\n });\n return result;\n },\n\n /**\n * Check if an element is registered\n * @param {HTMLElement} element - The element to check\n * @returns {boolean}\n */\n has: function(element) {\n return this.instances.has(element);\n }\n };\n\n // Auto-cleanup on page unload\n window.addEventListener('beforeunload', function() {\n Lifecycle.destroyAll();\n });\n\n // Expose globally\n window.VanduoLifecycle = Lifecycle;\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('lifecycle', Lifecycle);\n }\n\n})();\n", "/**\n * Vanduo Framework - Main JavaScript File\n */\n\n(function () {\n 'use strict';\n\n const VANDUO_VERSION = typeof __VANDUO_VERSION__ !== 'undefined' ? __VANDUO_VERSION__ : '0.0.0-dev';\n\n /**\n * Vanduo Framework Object\n */\n const Vanduo = {\n version: VANDUO_VERSION,\n components: {},\n\n /**\n * Initialize framework\n * Call this after DOM is ready and all components are loaded\n */\n init: function () {\n // Initialize components when DOM is ready\n if (typeof ready !== 'undefined') {\n ready(() => {\n this.initComponents();\n });\n } else {\n // Fallback if helpers.js is not loaded\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => {\n this.initComponents();\n });\n } else {\n this.initComponents();\n }\n }\n },\n\n /**\n * Initialize all components\n */\n initComponents: function () {\n // Initialize all registered components\n Object.keys(this.components).forEach((name) => {\n const component = this.components[name];\n if (component.init && typeof component.init === 'function') {\n try {\n component.init();\n } catch (e) {\n console.warn('[Vanduo] Failed to initialize component \"' + name + '\":', e);\n }\n }\n });\n\n console.log('Vanduo Framework v' + this.version + ' initialized');\n },\n\n /**\n * Register a component\n * @param {string} name - Component name\n * @param {Object} component - Component object with init method\n */\n register: function (name, component) {\n this.components[name] = component;\n // Note: Components are NOT auto-initialized on registration\n // Call Vanduo.init() explicitly after all components are registered\n },\n\n /**\n * Re-initialize a component (useful after dynamic DOM changes)\n * @param {string} name - Component name\n */\n reinit: function (name) {\n const component = this.components[name];\n if (component && component.init && typeof component.init === 'function') {\n try {\n component.init();\n } catch (e) {\n console.warn('[Vanduo] Failed to reinitialize component \"' + name + '\":', e);\n }\n }\n },\n\n /**\n * Destroy all component instances and clean up event listeners\n * Uses lifecycle manager for memory leak prevention\n */\n destroyAll: function () {\n // First, destroy components that have their own destroyAll\n const names = Object.keys(this.components);\n for (let i = 0; i < names.length; i++) {\n const component = this.components[names[i]];\n if (component && component.destroyAll && typeof component.destroyAll === 'function') {\n try {\n component.destroyAll();\n } catch (e) {\n console.warn('[Vanduo] Failed to destroy component \"' + names[i] + '\":', e);\n }\n }\n }\n\n // Then, cleanup any remaining registered elements via lifecycle manager\n if (typeof window.VanduoLifecycle !== 'undefined') {\n window.VanduoLifecycle.destroyAll();\n }\n },\n\n /**\n * Get component instance\n * @param {string} name - Component name\n * @returns {Object|null}\n */\n getComponent: function (name) {\n return this.components[name] || null;\n }\n };\n\n // Expose to global scope\n window.Vanduo = Vanduo;\n\n})();\n", "/**\n * Vanduo Framework - Code Snippet Component\n * Copyable code blocks with tabs, syntax highlighting, and HTML extraction\n */\n\n(function () {\n 'use strict';\n\n /**\n * Code Snippet Component\n */\n const CodeSnippet = {\n _snippetIdCounter: 0,\n\n getSnippetInstanceId: function (snippet) {\n if (snippet.dataset.codeSnippetId) {\n return snippet.dataset.codeSnippetId;\n }\n\n const baseId = (snippet.id || '').trim();\n if (baseId) {\n snippet.dataset.codeSnippetId = `snippet-${baseId}`;\n return snippet.dataset.codeSnippetId;\n }\n\n this._snippetIdCounter += 1;\n snippet.dataset.codeSnippetId = `snippet-auto-${this._snippetIdCounter}`;\n return snippet.dataset.codeSnippetId;\n },\n\n addListener: function (snippet, target, event, handler) {\n if (!target) return;\n target.addEventListener(event, handler);\n if (!snippet._codeSnippetCleanup) {\n snippet._codeSnippetCleanup = [];\n }\n snippet._codeSnippetCleanup.push(() => target.removeEventListener(event, handler));\n },\n\n /**\n * Initialize all code snippet components\n */\n init: function () {\n const snippets = document.querySelectorAll('.vd-code-snippet');\n\n snippets.forEach(snippet => {\n if (!snippet.dataset.initialized) {\n this.initSnippet(snippet);\n }\n });\n },\n\n /**\n * Initialize a single code snippet\n * @param {HTMLElement} snippet - Code snippet container element\n */\n initSnippet: function (snippet) {\n snippet.dataset.initialized = 'true';\n snippet._codeSnippetCleanup = [];\n\n // Handle collapsible toggle\n const toggle = snippet.querySelector('.vd-code-snippet-toggle');\n const content = snippet.querySelector('.vd-code-snippet-content');\n\n if (toggle && content) {\n this.initCollapsible(snippet, toggle, content);\n }\n\n // Handle tabs\n const tabs = snippet.querySelectorAll('.vd-code-snippet-tab');\n const panes = snippet.querySelectorAll('.vd-code-snippet-pane');\n\n if (tabs.length > 0) {\n this.initTabs(snippet, tabs, panes);\n }\n\n // Handle copy button\n const copyBtn = snippet.querySelector('.vd-code-snippet-copy');\n if (copyBtn) {\n this.initCopyButton(snippet, copyBtn);\n }\n\n // Handle HTML extraction\n const extractPanes = snippet.querySelectorAll('[data-extract]');\n extractPanes.forEach(pane => {\n this.extractHtml(pane);\n });\n\n // Handle line numbers\n const lineNumberPanes = snippet.querySelectorAll('.has-line-numbers');\n lineNumberPanes.forEach(pane => {\n this.addLineNumbers(pane);\n });\n },\n\n /**\n * Initialize collapsible functionality\n * @param {HTMLElement} snippet - Code snippet container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} content - Collapsible content\n */\n initCollapsible: function (snippet, toggle, content) {\n // Set initial state\n const isExpanded = snippet.dataset.expanded === 'true';\n toggle.setAttribute('aria-expanded', isExpanded);\n content.dataset.visible = isExpanded;\n\n this.addListener(snippet, toggle, 'click', () => {\n const expanded = snippet.dataset.expanded === 'true';\n snippet.dataset.expanded = !expanded;\n toggle.setAttribute('aria-expanded', !expanded);\n content.dataset.visible = !expanded;\n\n // Extract HTML on first expand if needed\n if (!expanded) {\n const extractPanes = content.querySelectorAll('[data-extract]:not([data-extracted])');\n extractPanes.forEach(pane => {\n this.extractHtml(pane);\n });\n }\n\n // Dispatch event\n const event = new CustomEvent('codesnippet:toggle', {\n bubbles: true,\n detail: { snippet, expanded: !expanded }\n });\n snippet.dispatchEvent(event);\n });\n },\n\n /**\n * Initialize tab functionality\n * @param {HTMLElement} snippet - Code snippet container\n * @param {NodeList} tabs - Tab buttons\n * @param {NodeList} panes - Code panes\n */\n initTabs: function (snippet, tabs, panes) {\n const snippetId = this.getSnippetInstanceId(snippet);\n\n // Set up ARIA attributes\n const tabList = snippet.querySelector('.vd-code-snippet-tabs');\n if (tabList) {\n tabList.setAttribute('role', 'tablist');\n }\n\n tabs.forEach((tab, index) => {\n const lang = tab.dataset.lang;\n const isActive = tab.classList.contains('is-active');\n\n // Set ARIA attributes\n tab.setAttribute('role', 'tab');\n tab.setAttribute('aria-selected', isActive);\n tab.setAttribute('tabindex', isActive ? '0' : '-1');\n tab.id = tab.id || `code-tab-${snippetId}-${lang || 'tab'}-${index}`;\n\n // Find corresponding pane\n const pane = snippet.querySelector(`.vd-code-snippet-pane[data-lang=\"${lang}\"]`);\n if (pane) {\n pane.id = pane.id || `code-pane-${snippetId}-${lang || 'pane'}-${index}`;\n pane.setAttribute('role', 'tabpanel');\n tab.setAttribute('aria-controls', pane.id);\n pane.setAttribute('aria-labelledby', tab.id);\n }\n\n // Click handler\n this.addListener(snippet, tab, 'click', () => {\n this.switchTab(snippet, tab, tabs, panes);\n });\n\n // Keyboard navigation\n this.addListener(snippet, tab, 'keydown', (e) => {\n this.handleTabKeydown(e, snippet, tabs, panes);\n });\n });\n },\n\n /**\n * Switch to a specific tab\n * @param {HTMLElement} snippet - Code snippet container\n * @param {HTMLElement} activeTab - Tab to activate\n * @param {NodeList} tabs - All tab buttons\n * @param {NodeList} panes - All code panes\n */\n switchTab: function (snippet, activeTab, tabs, panes) {\n const lang = activeTab.dataset.lang;\n\n // Deactivate all tabs\n tabs.forEach(tab => {\n tab.classList.remove('is-active');\n tab.setAttribute('aria-selected', 'false');\n tab.setAttribute('tabindex', '-1');\n });\n\n // Hide all panes\n panes.forEach(pane => {\n pane.classList.remove('is-active');\n });\n\n // Activate selected tab\n activeTab.classList.add('is-active');\n activeTab.setAttribute('aria-selected', 'true');\n activeTab.setAttribute('tabindex', '0');\n\n // Show corresponding pane\n const activePane = snippet.querySelector(`.vd-code-snippet-pane[data-lang=\"${lang}\"]`);\n if (activePane) {\n activePane.classList.add('is-active');\n }\n\n // Dispatch event\n const event = new CustomEvent('codesnippet:tabchange', {\n bubbles: true,\n detail: { snippet, tab: activeTab, lang }\n });\n snippet.dispatchEvent(event);\n },\n\n /**\n * Handle keyboard navigation for tabs\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} snippet - Code snippet container\n * @param {NodeList} tabs - All tab buttons\n * @param {NodeList} panes - All code panes\n */\n handleTabKeydown: function (e, snippet, tabs, panes) {\n const tabArray = Array.from(tabs);\n const currentIndex = tabArray.indexOf(e.target);\n let newIndex;\n\n switch (e.key) {\n case 'ArrowLeft':\n e.preventDefault();\n newIndex = currentIndex > 0 ? currentIndex - 1 : tabArray.length - 1;\n break;\n case 'ArrowRight':\n e.preventDefault();\n newIndex = currentIndex < tabArray.length - 1 ? currentIndex + 1 : 0;\n break;\n case 'Home':\n e.preventDefault();\n newIndex = 0;\n break;\n case 'End':\n e.preventDefault();\n newIndex = tabArray.length - 1;\n break;\n default:\n return;\n }\n\n if (newIndex !== currentIndex) {\n tabArray[newIndex].focus();\n this.switchTab(snippet, tabArray[newIndex], tabs, panes);\n }\n },\n\n /**\n * Initialize copy button\n * @param {HTMLElement} snippet - Code snippet container\n * @param {HTMLElement} copyBtn - Copy button element\n */\n initCopyButton: function (snippet, copyBtn) {\n this.addListener(snippet, copyBtn, 'click', async () => {\n await this.copyCode(snippet, copyBtn);\n });\n },\n\n /**\n * Copy code to clipboard\n * @param {HTMLElement} snippet - Code snippet container\n * @param {HTMLElement} copyBtn - Copy button element\n */\n copyCode: async function (snippet, copyBtn) {\n const activePane = snippet.querySelector('.vd-code-snippet-pane.is-active') ||\n snippet.querySelector('.vd-code-snippet-pane');\n\n if (!activePane) {\n console.warn('CodeSnippet: No code pane found');\n return;\n }\n\n const codeElement = activePane.querySelector('code') || activePane;\n const code = codeElement.textContent;\n\n let copySuccess;\n try {\n await navigator.clipboard.writeText(code);\n copySuccess = true;\n } catch (_err) {\n // Fallback for older browsers\n copySuccess = this.fallbackCopy(code);\n }\n this.showCopyFeedback(copyBtn, copySuccess);\n\n // Dispatch event\n const event = new CustomEvent('codesnippet:copy', {\n bubbles: true,\n detail: { snippet, code, success: copySuccess }\n });\n snippet.dispatchEvent(event);\n },\n\n /**\n * Fallback copy method for older browsers\n * @param {string} text - Text to copy\n * @returns {boolean} Success status\n */\n fallbackCopy: function (text) {\n const textarea = document.createElement('textarea');\n textarea.value = text;\n textarea.style.position = 'fixed';\n textarea.style.left = '-9999px';\n textarea.style.top = '-9999px';\n document.body.appendChild(textarea);\n textarea.focus();\n textarea.select();\n\n let success = false;\n try {\n success = document.execCommand('copy');\n } catch (err) {\n console.warn('CodeSnippet: Fallback copy failed', err);\n }\n\n document.body.removeChild(textarea);\n return success;\n },\n\n /**\n * Show copy feedback\n * @param {HTMLElement} copyBtn - Copy button element\n * @param {boolean} success - Whether copy was successful\n */\n showCopyFeedback: function (copyBtn, success) {\n if (success) {\n copyBtn.classList.add('is-copied');\n\n // Announce to screen readers\n const announcement = document.createElement('span');\n announcement.setAttribute('role', 'status');\n announcement.setAttribute('aria-live', 'polite');\n announcement.className = 'sr-only';\n announcement.textContent = 'Code copied to clipboard';\n copyBtn.appendChild(announcement);\n\n setTimeout(() => {\n copyBtn.classList.remove('is-copied');\n if (announcement.parentNode) {\n announcement.parentNode.removeChild(announcement);\n }\n }, 2000);\n }\n },\n\n /**\n * Extract HTML from a demo element\n * @param {HTMLElement} pane - Code pane with data-extract attribute\n */\n extractHtml: function (pane) {\n const selector = pane.dataset.extract;\n if (!selector) return;\n\n const source = document.querySelector(selector);\n if (!source) {\n console.warn(`CodeSnippet: Source element not found: ${selector}`);\n return;\n }\n\n // Get inner HTML\n let html = source.innerHTML;\n\n // Format the HTML\n html = this.formatHtml(html);\n\n // Escape for display\n html = this.escapeHtml(html);\n\n // Apply syntax highlighting\n html = this.highlightHtml(html);\n\n // Set content via DOM API to avoid string-based HTML insertion\n const codeEl = document.createElement('code');\n codeEl.innerHTML = html;\n pane.replaceChildren(codeEl);\n pane.dataset.extracted = 'true';\n },\n\n /**\n * Format HTML with proper indentation\n * @param {string} html - Raw HTML string\n * @returns {string} Formatted HTML\n */\n formatHtml: function (html) {\n // Remove leading/trailing whitespace\n html = html.trim();\n\n // Simple formatting: normalize whitespace\n // Split by tags, then rejoin with proper indentation\n const lines = html.split('\\n');\n let indent = 0;\n const indentSize = 2;\n const formattedLines = [];\n\n lines.forEach(line => {\n line = line.trim();\n if (!line) return;\n\n // Check for closing tags at start\n if (line.match(/^<\\/\\w/)) {\n indent = Math.max(0, indent - indentSize);\n }\n\n formattedLines.push(' '.repeat(indent) + line);\n\n // Check for opening tags (not self-closing)\n // Use short fixed-length regex + indexOf to prevent ReDoS\n const hasOpenTag = /<[a-zA-Z]/.test(line);\n const isSelfClosing = line.includes('/>');\n if (hasOpenTag && !isSelfClosing) {\n // Don't indent for void elements\n if (!line.match(/<(br|hr|img|input|meta|link|area|base|col|embed|param|source|track|wbr)/i)) {\n // Only indent if not also closing on same line\n if (!line.match(/<\\/\\w+>$/)) {\n indent += indentSize;\n }\n }\n }\n });\n\n return formattedLines.join('\\n');\n },\n\n /**\n * Escape HTML entities for display\n * @param {string} html - HTML string\n * @returns {string} Escaped HTML\n */\n escapeHtml: function (html) {\n const div = document.createElement('div');\n div.textContent = html;\n return div.innerHTML;\n },\n\n /**\n * Apply syntax highlighting to HTML\n * @param {string} html - Escaped HTML string\n * @returns {string} HTML with syntax highlighting spans\n */\n highlightHtml: function (html) {\n // Highlight HTML tags\n html = html.replace(/(<\\/?)([\\w-]+)/g, '$1$2');\n\n // Highlight attributes\n html = html.replace(/([\\w-]+)(=)("|')/g, '$1$2$3');\n\n // Highlight attribute values (strings)\n html = html.replace(/("|')([^&]*)("|')/g, '$1$2$3');\n\n // Highlight comments\n html = html.replace(/(<!--)(.*?)(-->)/g, '$1$2$3');\n\n return html;\n },\n\n /**\n * Apply syntax highlighting to CSS\n * @param {string} css - CSS string\n * @returns {string} CSS with syntax highlighting spans\n */\n highlightCss: function (css) {\n // Highlight selectors \u2014 use non-backtracking bounded pattern\n css = css.replace(/([.#]?[a-zA-Z][a-zA-Z0-9_-]{0,200})(\\s*\\{)/g, '$1$2');\n\n // Highlight properties \u2014 use non-backtracking bounded pattern\n css = css.replace(/([a-zA-Z][a-zA-Z0-9_-]{0,200})(\\s*:)/g, '$1$2');\n\n // Highlight values\n css = css.replace(/:\\s*([^;{}]+)(;)/g, ': $1$2');\n\n // Highlight units\n css = css.replace(/(\\d+)(px|rem|em|%|vh|vw|deg|s|ms)/g, '$1$2');\n\n // Highlight comments\n css = css.replace(/(\\/\\*[\\s\\S]*?\\*\\/)/g, '$1');\n\n return css;\n },\n\n /**\n * Apply syntax highlighting to JavaScript\n * @param {string} js - JavaScript string\n * @returns {string} JS with syntax highlighting spans\n */\n highlightJs: function (js) {\n // Highlight keywords\n const keywords = ['const', 'let', 'var', 'function', 'return', 'if', 'else', 'for', 'while', 'switch', 'case', 'break', 'continue', 'new', 'this', 'class', 'extends', 'import', 'export', 'default', 'async', 'await', 'try', 'catch', 'throw', 'typeof', 'instanceof'];\n keywords.forEach(kw => {\n const regex = new RegExp(`\\\\b(${kw})\\\\b`, 'g');\n js = js.replace(regex, '$1');\n });\n\n // Highlight strings (limit to 10 000 chars to prevent polynomial backtracking)\n js = js.replace(/('(?:[^'\\\\]|\\\\.){0,10000}'|\"(?:[^\"\\\\]|\\\\.){0,10000}\"|`(?:[^`\\\\]|\\\\.){0,10000}`)/g, '$1');\n\n // Highlight numbers\n js = js.replace(/\\b(\\d+\\.?\\d*)\\b/g, '$1');\n\n // Highlight function calls\n js = js.replace(/\\b([\\w]+)(\\s*\\()/g, '$1$2');\n\n // Highlight comments\n js = js.replace(/(\\/\\/.*$)/gm, '$1');\n js = js.replace(/(\\/\\*[\\s\\S]*?\\*\\/)/g, '$1');\n\n return js;\n },\n\n /**\n * Add line numbers to a code pane\n * @param {HTMLElement} pane - Code pane element\n */\n addLineNumbers: function (pane) {\n const code = pane.querySelector('code');\n if (!code) return;\n\n const lines = code.innerHTML.split('\\n');\n const lineCount = lines.length;\n\n // Create line numbers container\n const lineNumbers = document.createElement('div');\n lineNumbers.className = 'vd-code-snippet-line-numbers';\n lineNumbers.setAttribute('aria-hidden', 'true');\n\n for (let i = 1; i <= lineCount; i++) {\n const lineNum = document.createElement('span');\n lineNum.textContent = i;\n lineNumbers.appendChild(lineNum);\n }\n\n // Wrap code content\n const codeWrapper = document.createElement('div');\n codeWrapper.className = 'vd-code-snippet-code';\n codeWrapper.appendChild(code.cloneNode(true));\n\n // Replace code with new structure\n code.parentNode.removeChild(code);\n pane.appendChild(lineNumbers);\n pane.appendChild(codeWrapper);\n },\n\n /**\n * Programmatically expand a code snippet\n * @param {string|HTMLElement} snippet - Snippet selector or element\n */\n expand: function (snippet) {\n if (typeof snippet === 'string') {\n snippet = document.querySelector(snippet);\n }\n if (!snippet) return;\n\n snippet.dataset.expanded = 'true';\n const toggle = snippet.querySelector('.vd-code-snippet-toggle');\n const content = snippet.querySelector('.vd-code-snippet-content');\n\n if (toggle) toggle.setAttribute('aria-expanded', 'true');\n if (content) content.dataset.visible = 'true';\n },\n\n /**\n * Programmatically collapse a code snippet\n * @param {string|HTMLElement} snippet - Snippet selector or element\n */\n collapse: function (snippet) {\n if (typeof snippet === 'string') {\n snippet = document.querySelector(snippet);\n }\n if (!snippet) return;\n\n snippet.dataset.expanded = 'false';\n const toggle = snippet.querySelector('.vd-code-snippet-toggle');\n const content = snippet.querySelector('.vd-code-snippet-content');\n\n if (toggle) toggle.setAttribute('aria-expanded', 'false');\n if (content) content.dataset.visible = 'false';\n },\n\n /**\n * Programmatically switch to a specific language tab\n * @param {string|HTMLElement} snippet - Snippet selector or element\n * @param {string} lang - Language to switch to (html, css, js)\n */\n showLang: function (snippet, lang) {\n if (typeof snippet === 'string') {\n snippet = document.querySelector(snippet);\n }\n if (!snippet) return;\n\n const tab = snippet.querySelector(`.vd-code-snippet-tab[data-lang=\"${lang}\"]`);\n const tabs = snippet.querySelectorAll('.vd-code-snippet-tab');\n const panes = snippet.querySelectorAll('.vd-code-snippet-pane');\n\n if (tab) {\n this.switchTab(snippet, tab, tabs, panes);\n }\n },\n\n /**\n * Destroy a code snippet instance and clean up listeners\n * @param {string|HTMLElement} snippet - Snippet selector or element\n */\n destroy: function (snippet) {\n if (typeof snippet === 'string') {\n snippet = document.querySelector(snippet);\n }\n if (!snippet) return;\n\n if (snippet._codeSnippetCleanup) {\n snippet._codeSnippetCleanup.forEach(fn => fn());\n delete snippet._codeSnippetCleanup;\n }\n\n delete snippet.dataset.initialized;\n },\n\n /**\n * Destroy all code snippet instances\n */\n destroyAll: function () {\n const snippets = document.querySelectorAll('.vd-code-snippet[data-initialized=\"true\"]');\n snippets.forEach(snippet => this.destroy(snippet));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('codeSnippet', CodeSnippet);\n }\n\n // Also expose globally for convenience\n window.CodeSnippet = CodeSnippet;\n\n})();\n", "/**\n * Vanduo Framework - Collapsible Component\n * JavaScript functionality for collapsible/accordion components\n */\n\n(function() {\n 'use strict';\n\n /**\n * Collapsible Component\n */\n const Collapsible = {\n // Store initialized containers and their cleanup functions\n instances: new Map(),\n\n /**\n * Initialize collapsible components\n */\n init: function() {\n const collapsibles = document.querySelectorAll('.vd-collapsible, .accordion');\n\n collapsibles.forEach(container => {\n if (this.instances.has(container)) {\n return;\n }\n this.initCollapsible(container);\n });\n },\n\n /**\n * Initialize a collapsible container\n * @param {HTMLElement} container - Collapsible container\n */\n initCollapsible: function(container) {\n const isAccordion = container.classList.contains('accordion');\n const items = container.querySelectorAll('.vd-collapsible-item, .accordion-item');\n const cleanupFunctions = [];\n\n items.forEach(item => {\n const header = item.querySelector('.vd-collapsible-header, .accordion-header');\n const body = item.querySelector('.vd-collapsible-body, .accordion-body');\n const trigger = item.querySelector('.vd-collapsible-trigger, .accordion-trigger') || header;\n\n if (!header || !body) {\n return;\n }\n\n // Set initial state\n if (item.classList.contains('is-open')) {\n this.openItem(item, body, false);\n } else {\n this.closeItem(item, body, false);\n }\n\n // Add click handler\n const clickHandler = (e) => {\n e.preventDefault();\n this.toggleItem(item, body, container, isAccordion);\n };\n trigger.addEventListener('click', clickHandler);\n cleanupFunctions.push(() => trigger.removeEventListener('click', clickHandler));\n });\n\n this.instances.set(container, { cleanup: cleanupFunctions });\n },\n \n /**\n * Toggle collapsible item\n * @param {HTMLElement} item - Collapsible item\n * @param {HTMLElement} body - Collapsible body\n * @param {HTMLElement} container - Collapsible container\n * @param {boolean} isAccordion - Whether in accordion mode\n */\n toggleItem: function(item, body, container, isAccordion) {\n const isOpen = item.classList.contains('is-open');\n \n if (isOpen) {\n this.closeItem(item, body);\n } else {\n // If accordion mode, close other open items\n if (isAccordion) {\n const otherOpenItems = container.querySelectorAll('.vd-collapsible-item.is-open, .accordion-item.is-open');\n otherOpenItems.forEach(otherItem => {\n if (otherItem !== item) {\n const otherBody = otherItem.querySelector('.vd-collapsible-body, .accordion-body');\n this.closeItem(otherItem, otherBody);\n }\n });\n }\n \n this.openItem(item, body);\n }\n },\n \n /**\n * Open collapsible item\n * @param {HTMLElement} item - Collapsible item\n * @param {HTMLElement} body - Collapsible body\n * @param {boolean} animate - Whether to animate\n */\n openItem: function(item, body, animate = true) {\n if (!animate) {\n body.style.transition = 'none';\n }\n \n item.classList.add('is-open');\n item.setAttribute('aria-expanded', 'true');\n \n // Set max-height to actual height\n const height = body.scrollHeight;\n body.style.maxHeight = `${height}px`;\n \n // Reset transition after a brief delay\n if (!animate) {\n setTimeout(() => {\n body.style.transition = '';\n }, 0);\n }\n \n // Dispatch event\n item.dispatchEvent(new CustomEvent('collapsible:open', { bubbles: true }));\n },\n \n /**\n * Close collapsible item\n * @param {HTMLElement} item - Collapsible item\n * @param {HTMLElement} body - Collapsible body\n * @param {boolean} animate - Whether to animate\n */\n closeItem: function(item, body, animate = true) {\n if (!animate) {\n body.style.transition = 'none';\n }\n \n item.classList.remove('is-open');\n item.setAttribute('aria-expanded', 'false');\n body.style.maxHeight = '0';\n \n // Reset transition after a brief delay\n if (!animate) {\n setTimeout(() => {\n body.style.transition = '';\n }, 0);\n }\n \n // Dispatch event\n item.dispatchEvent(new CustomEvent('collapsible:close', { bubbles: true }));\n },\n \n /**\n * Open item programmatically\n * @param {HTMLElement|string} item - Collapsible item or selector\n */\n open: function(item) {\n const el = typeof item === 'string' ? document.querySelector(item) : item;\n if (el) {\n const body = el.querySelector('.vd-collapsible-body, .accordion-body');\n if (body) {\n this.openItem(el, body);\n }\n }\n },\n \n /**\n * Close item programmatically\n * @param {HTMLElement|string} item - Collapsible item or selector\n */\n close: function(item) {\n const el = typeof item === 'string' ? document.querySelector(item) : item;\n if (el) {\n const body = el.querySelector('.vd-collapsible-body, .accordion-body');\n if (body) {\n this.closeItem(el, body);\n }\n }\n },\n \n /**\n * Toggle item programmatically\n * @param {HTMLElement|string} item - Collapsible item or selector\n */\n toggle: function(item) {\n const el = typeof item === 'string' ? document.querySelector(item) : item;\n if (el) {\n const body = el.querySelector('.vd-collapsible-body, .accordion-body');\n const container = el.closest('.vd-collapsible, .accordion');\n const isAccordion = container && container.classList.contains('accordion');\n\n if (body) {\n this.toggleItem(el, body, container, isAccordion);\n }\n }\n },\n\n /**\n * Destroy a collapsible instance and clean up event listeners\n * @param {HTMLElement} container - Collapsible container\n */\n destroy: function(container) {\n const instance = this.instances.get(container);\n if (!instance) return;\n\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(container);\n },\n\n /**\n * Destroy all collapsible instances\n */\n destroyAll: function() {\n this.instances.forEach((instance, container) => {\n this.destroy(container);\n });\n }\n };\n \n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('collapsible', Collapsible);\n }\n \n // Expose globally\n window.VanduoCollapsible = Collapsible;\n \n})();\n\n", "/**\n * Vanduo Framework - Dropdown Component\n * JavaScript functionality for dropdown menus\n */\n\n(function() {\n 'use strict';\n\n /**\n * Dropdown Component\n */\n const Dropdown = {\n // Store initialized dropdowns and their cleanup functions\n instances: new Map(),\n\n /**\n * Initialize dropdown components\n */\n init: function() {\n const dropdowns = document.querySelectorAll('.vd-dropdown');\n\n dropdowns.forEach(dropdown => {\n if (this.instances.has(dropdown)) {\n return;\n }\n this.initDropdown(dropdown);\n });\n },\n\n /**\n * Initialize a single dropdown\n * @param {HTMLElement} dropdown - Dropdown container\n */\n initDropdown: function(dropdown) {\n const toggle = dropdown.querySelector('.vd-dropdown-toggle');\n const menu = dropdown.querySelector('.vd-dropdown-menu');\n\n if (!toggle || !menu) {\n return;\n }\n\n const cleanupFunctions = [];\n\n // Set ARIA attributes\n toggle.setAttribute('aria-haspopup', 'true');\n toggle.setAttribute('aria-expanded', 'false');\n menu.setAttribute('role', 'menu');\n menu.setAttribute('aria-hidden', 'true');\n\n // Toggle on click\n const toggleClickHandler = (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggleDropdown(dropdown, toggle, menu);\n };\n toggle.addEventListener('click', toggleClickHandler);\n cleanupFunctions.push(() => toggle.removeEventListener('click', toggleClickHandler));\n\n // Close on outside click\n const documentClickHandler = (e) => {\n if (!dropdown.contains(e.target) && menu.classList.contains('is-open')) {\n this.closeDropdown(dropdown, toggle, menu);\n }\n };\n document.addEventListener('click', documentClickHandler);\n cleanupFunctions.push(() => document.removeEventListener('click', documentClickHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, dropdown, toggle, menu);\n };\n toggle.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => toggle.removeEventListener('keydown', keydownHandler));\n\n // Handle item clicks\n const items = menu.querySelectorAll('.vd-dropdown-item:not(.disabled):not(.is-disabled)');\n items.forEach(item => {\n const itemClickHandler = (e) => {\n e.preventDefault();\n this.selectItem(item, dropdown, toggle, menu);\n };\n item.addEventListener('click', itemClickHandler);\n cleanupFunctions.push(() => item.removeEventListener('click', itemClickHandler));\n\n const itemKeydownHandler = (e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.selectItem(item, dropdown, toggle, menu);\n }\n };\n item.addEventListener('keydown', itemKeydownHandler);\n cleanupFunctions.push(() => item.removeEventListener('keydown', itemKeydownHandler));\n });\n\n this.instances.set(dropdown, { toggle, menu, cleanup: cleanupFunctions, typeaheadBuffer: '', typeaheadTimer: null });\n },\n \n /**\n * Toggle dropdown\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Dropdown menu\n */\n toggleDropdown: function(dropdown, toggle, menu) {\n const isOpen = menu.classList.contains('is-open');\n \n if (isOpen) {\n this.closeDropdown(dropdown, toggle, menu);\n } else {\n this.openDropdown(dropdown, toggle, menu);\n }\n },\n \n /**\n * Open dropdown\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Dropdown menu\n */\n openDropdown: function(dropdown, toggle, menu) {\n // Close other open dropdowns\n const otherOpen = document.querySelectorAll('.vd-dropdown-menu.is-open');\n otherOpen.forEach(otherMenu => {\n if (otherMenu !== menu) {\n const otherDropdown = otherMenu.closest('.vd-dropdown');\n const otherToggle = otherDropdown.querySelector('.vd-dropdown-toggle');\n this.closeDropdown(otherDropdown, otherToggle, otherMenu);\n }\n });\n \n dropdown.classList.add('is-open');\n menu.classList.add('is-open');\n toggle.setAttribute('aria-expanded', 'true');\n menu.setAttribute('aria-hidden', 'false');\n \n // Position menu\n this.positionMenu(dropdown, menu);\n \n // Focus first item\n const firstItem = menu.querySelector('.vd-dropdown-item:not(.disabled):not(.is-disabled)');\n if (firstItem) {\n setTimeout(() => firstItem.focus(), 0);\n }\n },\n \n /**\n * Close dropdown\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Dropdown menu\n */\n closeDropdown: function(dropdown, toggle, menu) {\n dropdown.classList.remove('is-open');\n menu.classList.remove('is-open');\n toggle.setAttribute('aria-expanded', 'false');\n menu.setAttribute('aria-hidden', 'true');\n \n // Return focus to toggle\n toggle.focus();\n },\n \n /**\n * Position dropdown menu\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} menu - Dropdown menu\n */\n positionMenu: function(dropdown, menu) {\n const rect = dropdown.getBoundingClientRect();\n const menuRect = menu.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const padding = 8;\n \n // Check if menu overflows right\n if (rect.left + menuRect.width > viewportWidth - padding) {\n menu.classList.add('vd-dropdown-menu-end');\n menu.classList.remove('vd-dropdown-menu-start');\n }\n \n // Check if menu overflows bottom (for top positioning)\n if (menu.classList.contains('dropdown-menu-top')) {\n if (rect.top - menuRect.height < padding) {\n menu.classList.remove('vd-dropdown-menu-top');\n }\n } else {\n if (rect.bottom + menuRect.height > viewportHeight - padding) {\n menu.classList.add('vd-dropdown-menu-top');\n }\n }\n },\n \n /**\n * Handle keyboard navigation\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Dropdown menu\n */\n handleKeydown: function(e, dropdown, toggle, menu) {\n const isOpen = menu.classList.contains('is-open');\n const items = Array.from(menu.querySelectorAll('.vd-dropdown-item:not(.disabled):not(.is-disabled)'));\n const currentIndex = items.findIndex(item => item === document.activeElement);\n \n switch (e.key) {\n case 'Enter':\n case ' ':\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen) {\n this.openDropdown(dropdown, toggle, menu);\n } else if (e.key === 'ArrowDown') {\n const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n items[nextIndex].focus();\n }\n break;\n \n case 'ArrowUp':\n if (isOpen) {\n e.preventDefault();\n const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n items[prevIndex].focus();\n }\n break;\n \n case 'Escape':\n if (isOpen) {\n e.preventDefault();\n this.closeDropdown(dropdown, toggle, menu);\n }\n break;\n \n case 'Home':\n if (isOpen) {\n e.preventDefault();\n items[0].focus();\n }\n break;\n \n case 'End':\n if (isOpen) {\n e.preventDefault();\n items[items.length - 1].focus();\n }\n break;\n\n default:\n // Typeahead: jump to matching item when typing printable characters\n if (isOpen && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\n // Per-instance typeahead state to avoid cross-instance corruption\n const instance = this.instances.get(dropdown);\n if (!instance) break;\n clearTimeout(instance.typeaheadTimer);\n instance.typeaheadBuffer += e.key.toLowerCase();\n\n const match = items.find(item =>\n item.textContent.trim().toLowerCase().startsWith(instance.typeaheadBuffer)\n );\n if (match) {\n match.focus();\n }\n\n instance.typeaheadTimer = setTimeout(() => {\n instance.typeaheadBuffer = '';\n }, 500);\n }\n break;\n }\n },\n \n /**\n * Select dropdown item\n * @param {HTMLElement} item - Dropdown item\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Dropdown menu\n */\n selectItem: function(item, dropdown, toggle, menu) {\n // Remove active from all items\n menu.querySelectorAll('.vd-dropdown-item').forEach(i => {\n i.classList.remove('active', 'is-active');\n });\n \n // Add active to selected item\n item.classList.add('active', 'is-active');\n \n // Update toggle text if it's a button\n if (toggle.tagName === 'BUTTON' || toggle.classList.contains('btn')) {\n toggle.textContent = item.textContent.trim();\n }\n \n // Close dropdown\n this.closeDropdown(dropdown, toggle, menu);\n \n // Dispatch event\n item.dispatchEvent(new CustomEvent('dropdown:select', { \n bubbles: true,\n detail: { item, value: item.dataset.value || item.textContent }\n }));\n },\n \n /**\n * Open dropdown programmatically\n * @param {HTMLElement|string} dropdown - Dropdown container or selector\n */\n open: function(dropdown) {\n const el = typeof dropdown === 'string' ? document.querySelector(dropdown) : dropdown;\n if (el) {\n const toggle = el.querySelector('.vd-dropdown-toggle');\n const menu = el.querySelector('.vd-dropdown-menu');\n if (toggle && menu) {\n this.openDropdown(el, toggle, menu);\n }\n }\n },\n \n /**\n * Close dropdown programmatically\n * @param {HTMLElement|string} dropdown - Dropdown container or selector\n */\n close: function(dropdown) {\n const el = typeof dropdown === 'string' ? document.querySelector(dropdown) : dropdown;\n if (el) {\n const toggle = el.querySelector('.vd-dropdown-toggle');\n const menu = el.querySelector('.vd-dropdown-menu');\n if (toggle && menu) {\n this.closeDropdown(el, toggle, menu);\n }\n }\n },\n\n /**\n * Destroy a dropdown instance and clean up event listeners\n * @param {HTMLElement} dropdown - Dropdown element\n */\n destroy: function(dropdown) {\n const instance = this.instances.get(dropdown);\n if (!instance) return;\n\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(dropdown);\n },\n\n /**\n * Destroy all dropdown instances\n */\n destroyAll: function() {\n this.instances.forEach((instance, dropdown) => {\n this.destroy(dropdown);\n });\n }\n };\n \n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('dropdown', Dropdown);\n }\n \n // Expose globally\n window.VanduoDropdown = Dropdown;\n \n})();\n\n", "/**\n * Vanduo Framework - Font Switcher\n * Handles font selection and persistence for previewing different typefaces\n */\n\n(function() {\n 'use strict';\n\n const FontSwitcher = {\n STORAGE_KEY: 'vanduo-font-preference',\n isInitialized: false,\n\n // Available fonts configuration\n fonts: {\n 'system': {\n name: 'System Default',\n family: null // Uses CSS default\n },\n 'inter': {\n name: 'Inter',\n family: \"'Inter', sans-serif\"\n },\n 'source-sans': {\n name: 'Source Sans 3',\n family: \"'Source Sans 3', sans-serif\"\n },\n 'fira-sans': {\n name: 'Fira Sans',\n family: \"'Fira Sans', sans-serif\"\n },\n 'ibm-plex': {\n name: 'IBM Plex Sans',\n family: \"'IBM Plex Sans', sans-serif\"\n },\n 'jetbrains-mono': {\n name: 'JetBrains Mono',\n family: \"'JetBrains Mono', monospace\"\n },\n 'ubuntu': {\n name: 'Ubuntu',\n family: \"'Ubuntu', sans-serif\",\n category: 'sans-serif',\n description: 'Friendly, humanist sans-serif'\n },\n 'open-sans': {\n name: 'Open Sans',\n family: \"'Open Sans', sans-serif\",\n category: 'sans-serif',\n description: 'Neutral, highly readable'\n },\n 'rubik': {\n name: 'Rubik',\n family: \"'Rubik', sans-serif\",\n category: 'sans-serif',\n description: 'Modern, geometric'\n },\n 'titillium-web': {\n name: 'Titillium Web',\n family: \"'Titillium Web', sans-serif\",\n category: 'sans-serif',\n description: 'Technical, elegant'\n }\n },\n\n init: function() {\n this.state = {\n preference: this.getPreference()\n };\n\n if (this.isInitialized) {\n this.applyFont();\n this.renderUI();\n this.updateUI();\n return;\n }\n\n this.isInitialized = true;\n\n this.applyFont();\n this.renderUI();\n\n console.log('Vanduo Font Switcher initialized');\n },\n\n /**\n * Get saved font preference from localStorage\n * @returns {string} Font key or 'ubuntu' (default)\n */\n getPreference: function() {\n return this.getStorageValue(this.STORAGE_KEY, 'ubuntu');\n },\n\n /**\n * Set font preference and apply it\n * @param {string} fontKey - The font key to apply\n */\n setPreference: function(fontKey) {\n if (!this.fonts[fontKey]) {\n console.warn('Unknown font:', fontKey);\n return;\n }\n\n this.state.preference = fontKey;\n this.setStorageValue(this.STORAGE_KEY, fontKey);\n this.applyFont();\n this.updateUI();\n\n // Dispatch custom event for other components to listen to\n const event = new CustomEvent('font:change', {\n bubbles: true,\n detail: { font: fontKey, fontData: this.fonts[fontKey] }\n });\n document.dispatchEvent(event);\n },\n\n /**\n * Apply the current font preference to the document\n */\n applyFont: function() {\n const fontKey = this.state.preference;\n\n if (fontKey === 'system') {\n // Remove data-font attribute to use system default\n document.documentElement.removeAttribute('data-font');\n } else {\n // Set data-font attribute which triggers CSS variable override\n document.documentElement.setAttribute('data-font', fontKey);\n }\n },\n\n /**\n * Initialize UI elements with data-toggle=\"font\"\n */\n renderUI: function() {\n const toggles = document.querySelectorAll('[data-toggle=\"font\"]');\n\n toggles.forEach(toggle => {\n if (toggle.getAttribute('data-font-initialized') === 'true') {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n }\n return;\n }\n\n if (toggle.tagName === 'SELECT') {\n // Set initial value\n toggle.value = this.state.preference;\n\n // Listen for changes\n const onChange = (e) => {\n this.setPreference(e.target.value);\n };\n toggle.addEventListener('change', onChange);\n toggle._fontToggleHandler = onChange;\n } else {\n // Button implementation - cycle through fonts\n const onClick = () => {\n const fontKeys = Object.keys(this.fonts);\n const currentIndex = fontKeys.indexOf(this.state.preference);\n const nextIndex = (currentIndex + 1) % fontKeys.length;\n this.setPreference(fontKeys[nextIndex]);\n };\n toggle.addEventListener('click', onClick);\n toggle._fontToggleHandler = onClick;\n }\n\n toggle.setAttribute('data-font-initialized', 'true');\n });\n },\n\n /**\n * Update all UI elements to reflect current state\n */\n updateUI: function() {\n const toggles = document.querySelectorAll('[data-toggle=\"font\"]');\n\n toggles.forEach(toggle => {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n } else {\n // Update button text if it has a label span\n const label = toggle.querySelector('.font-current-label');\n if (label) {\n label.textContent = this.fonts[this.state.preference].name;\n }\n }\n });\n },\n\n /**\n * Get the current font preference\n * @returns {string} Current font key\n */\n getCurrentFont: function() {\n return this.state.preference;\n },\n\n /**\n * Get font data for a given key\n * @param {string} fontKey - The font key\n * @returns {Object|null} Font data or null\n */\n getFontData: function(fontKey) {\n return this.fonts[fontKey] || null;\n },\n\n destroyAll: function() {\n const toggles = document.querySelectorAll('[data-toggle=\"font\"][data-font-initialized=\"true\"]');\n toggles.forEach(toggle => {\n if (toggle._fontToggleHandler) {\n const eventName = toggle.tagName === 'SELECT' ? 'change' : 'click';\n toggle.removeEventListener(eventName, toggle._fontToggleHandler);\n delete toggle._fontToggleHandler;\n }\n toggle.removeAttribute('data-font-initialized');\n });\n\n this.isInitialized = false;\n },\n\n getStorageValue: function(key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function(key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('fontSwitcher', FontSwitcher);\n }\n\n // Expose globally for convenience\n window.FontSwitcher = FontSwitcher;\n})();\n", "/**\n * Vanduo Framework - Grid Layout Component\n * Toggle between standard 12-column and Fibonacci grid modes\n * via data-layout-mode attribute and toggle buttons\n */\n\n(function () {\n 'use strict';\n\n const supportsHas = (function () {\n try {\n return CSS.supports('selector(:has(*))');\n } catch (_e) {\n return false;\n }\n })();\n\n /**\n * Grid Layout Component\n */\n const GridLayout = {\n instances: new Map(),\n\n /**\n * Initialize all grid layout containers\n */\n init: function () {\n const containers = document.querySelectorAll('[data-layout-mode]');\n\n containers.forEach(function (container) {\n if (this.instances.has(container)) {\n return;\n }\n this.initContainer(container);\n }.bind(this));\n\n this.initToggleButtons();\n },\n\n /**\n * Initialize a single grid container\n * @param {HTMLElement} container - Element with data-layout-mode\n */\n initContainer: function (container) {\n const mode = container.getAttribute('data-layout-mode') || 'standard';\n const cleanupFunctions = [];\n\n this.applyMode(container, mode);\n\n container.setAttribute('role', 'region');\n container.setAttribute('aria-label', 'Grid layout: ' + mode + ' mode');\n\n this.instances.set(container, {\n cleanup: cleanupFunctions,\n mode: mode\n });\n },\n\n /**\n * Initialize toggle buttons that target grid containers\n */\n initToggleButtons: function () {\n const toggleButtons = document.querySelectorAll('[data-grid-toggle]');\n\n toggleButtons.forEach(function (button) {\n if (button.getAttribute('data-grid-initialized') === 'true') {\n return;\n }\n\n const clickHandler = function (e) {\n e.preventDefault();\n const targetSelector = button.getAttribute('data-grid-toggle');\n let target;\n\n if (targetSelector) {\n target = document.querySelector(targetSelector);\n } else {\n target = button.closest('[data-layout-mode]');\n }\n\n if (target) {\n this.toggle(target);\n }\n }.bind(this);\n\n button.addEventListener('click', clickHandler);\n button.setAttribute('data-grid-initialized', 'true');\n button.setAttribute('aria-pressed', 'false');\n\n button._gridCleanup = function () {\n button.removeEventListener('click', clickHandler);\n button.removeAttribute('data-grid-initialized');\n button.removeAttribute('aria-pressed');\n };\n }.bind(this));\n },\n\n /**\n * Apply Fibonacci grid-template-columns inline for browsers without :has()\n * @param {HTMLElement} container - Grid container\n */\n applyFibFallback: function (container) {\n if (supportsHas) return;\n\n const rows = container.querySelectorAll('.vd-row, .row');\n rows.forEach(function (row) {\n const cols = row.querySelectorAll(':scope > [class*=\"vd-col-\"], :scope > [class*=\"col-\"]');\n const count = cols.length;\n\n if (count === 1) {\n row.style.gridTemplateColumns = '1fr';\n } else if (count === 2) {\n row.style.gridTemplateColumns = '1fr 1.618fr';\n } else if (count === 3) {\n row.style.gridTemplateColumns = '2fr 3fr 5fr';\n } else if (count === 4) {\n row.style.gridTemplateColumns = '1fr 2fr 3fr 5fr';\n } else {\n row.style.gridTemplateColumns = 'repeat(' + count + ', 1fr)';\n }\n });\n },\n\n /**\n * Remove inline grid-template-columns fallback\n * @param {HTMLElement} container - Grid container\n */\n removeFibFallback: function (container) {\n const rows = container.querySelectorAll('.vd-row, .row');\n rows.forEach(function (row) {\n row.style.gridTemplateColumns = '';\n });\n },\n\n /**\n * Apply a layout mode to a container\n * @param {HTMLElement} container - Target container\n * @param {string} mode - 'fibonacci' or 'standard'\n */\n applyMode: function (container, mode) {\n container.classList.remove('vd-grid-standard', 'vd-grid-fibonacci');\n\n if (mode === 'fibonacci') {\n container.classList.add('vd-grid-fibonacci');\n this.applyFibFallback(container);\n } else {\n container.classList.add('vd-grid-standard');\n this.removeFibFallback(container);\n }\n\n container.setAttribute('data-layout-mode', mode);\n container.setAttribute('aria-label', 'Grid layout: ' + mode + ' mode');\n\n // Update associated toggle button states\n const toggleButtons = document.querySelectorAll('[data-grid-toggle]');\n toggleButtons.forEach(function (btn) {\n const targetSelector = btn.getAttribute('data-grid-toggle');\n if (targetSelector && container.matches(targetSelector)) {\n const isActive = (mode === 'fibonacci');\n if (isActive) {\n btn.classList.add('is-active');\n } else {\n btn.classList.remove('is-active');\n }\n btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');\n }\n });\n\n // Store mode in instance\n const instance = this.instances.get(container);\n if (instance) {\n instance.mode = mode;\n }\n\n // Dispatch custom event\n let event;\n try {\n event = new CustomEvent('grid:modechange', {\n bubbles: true,\n detail: {\n container: container,\n mode: mode\n }\n });\n } catch (_e) {\n event = document.createEvent('CustomEvent');\n event.initCustomEvent('grid:modechange', true, true, {\n container: container,\n mode: mode\n });\n }\n container.dispatchEvent(event);\n },\n\n /**\n * Toggle between standard and fibonacci modes\n * @param {HTMLElement|string} container - Container element or selector\n */\n toggle: function (container) {\n if (typeof container === 'string') {\n container = document.querySelector(container);\n }\n if (!container) return;\n\n const currentMode = container.getAttribute('data-layout-mode') || 'standard';\n const newMode = (currentMode === 'fibonacci') ? 'standard' : 'fibonacci';\n this.applyMode(container, newMode);\n },\n\n /**\n * Set a specific mode\n * @param {HTMLElement|string} container - Container element or selector\n * @param {string} mode - 'fibonacci' or 'standard'\n */\n setMode: function (container, mode) {\n if (typeof container === 'string') {\n container = document.querySelector(container);\n }\n if (!container) return;\n if (mode !== 'fibonacci' && mode !== 'standard') return;\n\n this.applyMode(container, mode);\n },\n\n /**\n * Get the current mode of a container\n * @param {HTMLElement|string} container - Container element or selector\n * @returns {string|null} Current mode or null\n */\n getMode: function (container) {\n if (typeof container === 'string') {\n container = document.querySelector(container);\n }\n if (!container) return null;\n return container.getAttribute('data-layout-mode') || 'standard';\n },\n\n /**\n * Destroy a single grid layout instance\n * @param {HTMLElement} container - Grid container\n */\n destroy: function (container) {\n const instance = this.instances.get(container);\n if (!instance) return;\n\n instance.cleanup.forEach(function (fn) { fn(); });\n container.classList.remove('vd-grid-standard', 'vd-grid-fibonacci');\n container.removeAttribute('aria-label');\n this.removeFibFallback(container);\n this.instances.delete(container);\n },\n\n /**\n * Destroy all grid layout instances and clean up toggle buttons\n */\n destroyAll: function () {\n this.instances.forEach(function (instance, container) {\n this.destroy(container);\n }.bind(this));\n\n const toggleButtons = document.querySelectorAll('[data-grid-initialized=\"true\"]');\n toggleButtons.forEach(function (button) {\n if (button._gridCleanup) {\n button._gridCleanup();\n delete button._gridCleanup;\n }\n });\n }\n };\n\n // Register with Vanduo framework\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('gridLayout', GridLayout);\n }\n\n // Expose globally\n window.VanduoGridLayout = GridLayout;\n\n})();\n", "/**\n * Vanduo Framework - Image Box Component\n * Lightbox-style image enlargement with smooth transitions\n * \n * Features:\n * - Click to enlarge images with data-image-box attribute\n * - Smooth scale and opacity transitions\n * - Dismiss via click, ESC key, or scroll\n * - Magnifying glass cursor on hover\n * - Accessible with ARIA attributes\n * - Reduced motion support\n */\n\n(function () {\n 'use strict';\n\n /**\n * Image Box Component\n */\n const ImageBox = {\n backdrop: null,\n container: null,\n img: null,\n closeBtn: null,\n caption: null,\n currentTrigger: null,\n scrollThreshold: 50,\n initialScrollY: 0,\n isOpen: false,\n\n // Store cleanup functions for event listeners\n _cleanupFunctions: [],\n\n /**\n * Initialize Image Box component\n */\n init: function () {\n this.createBackdrop();\n this.bindTriggers();\n },\n\n /**\n * Create backdrop elements\n */\n createBackdrop: function () {\n // Prevent duplicate backdrop creation\n if (this.backdrop || document.querySelector('.vd-image-box-backdrop')) {\n // If backdrop already exists in DOM, reuse it\n if (!this.backdrop) {\n this.backdrop = document.querySelector('.vd-image-box-backdrop');\n this.container = this.backdrop.querySelector('.vd-image-box-container');\n this.img = this.backdrop.querySelector('.vd-image-box-img');\n this.closeBtn = this.backdrop.querySelector('.vd-image-box-close');\n this.caption = this.backdrop.querySelector('.vd-image-box-caption');\n this.bindBackdropEvents();\n }\n return;\n }\n\n // Create backdrop\n this.backdrop = document.createElement('div');\n this.backdrop.className = 'vd-image-box-backdrop';\n this.backdrop.setAttribute('role', 'dialog');\n this.backdrop.setAttribute('aria-modal', 'true');\n this.backdrop.setAttribute('aria-label', 'Image viewer');\n this.backdrop.setAttribute('tabindex', '-1');\n\n // Create container\n this.container = document.createElement('div');\n this.container.className = 'vd-image-box-container';\n\n // Create image\n this.img = document.createElement('img');\n this.img.className = 'vd-image-box-img';\n this.img.alt = '';\n\n // Create close button\n this.closeBtn = document.createElement('button');\n this.closeBtn.className = 'vd-image-box-close';\n this.closeBtn.setAttribute('aria-label', 'Close image viewer');\n this.closeBtn.innerHTML = '×';\n\n // Create caption element\n this.caption = document.createElement('div');\n this.caption.className = 'vd-image-box-caption';\n\n // Assemble\n this.container.appendChild(this.img);\n this.backdrop.appendChild(this.closeBtn);\n this.backdrop.appendChild(this.container);\n this.backdrop.appendChild(this.caption);\n document.body.appendChild(this.backdrop);\n\n // Bind backdrop events\n this.bindBackdropEvents();\n },\n\n /**\n * Bind events to backdrop elements\n */\n bindBackdropEvents: function () {\n const self = this;\n\n // Close on backdrop click (but not when clicking the image)\n const backdropClickHandler = function (e) {\n if (e.target === self.backdrop || e.target === self.container) {\n self.close();\n }\n };\n this.backdrop.addEventListener('click', backdropClickHandler);\n this._cleanupFunctions.push(() => this.backdrop.removeEventListener('click', backdropClickHandler));\n\n // Close on image click\n const imgClickHandler = function () {\n self.close();\n };\n this.img.addEventListener('click', imgClickHandler);\n this._cleanupFunctions.push(() => this.img.removeEventListener('click', imgClickHandler));\n\n // Close on close button click\n const closeBtnHandler = function () {\n self.close();\n };\n this.closeBtn.addEventListener('click', closeBtnHandler);\n this._cleanupFunctions.push(() => this.closeBtn.removeEventListener('click', closeBtnHandler));\n\n // ESC key handler\n const escHandler = function (e) {\n if (e.key === 'Escape' && self.isOpen) {\n self.close();\n }\n };\n document.addEventListener('keydown', escHandler);\n this._cleanupFunctions.push(() => document.removeEventListener('keydown', escHandler));\n\n // Scroll handler for dismissal\n const scrollHandler = function () {\n if (!self.isOpen) return;\n\n const currentScrollY = window.scrollY;\n const scrollDelta = Math.abs(currentScrollY - self.initialScrollY);\n\n if (scrollDelta > self.scrollThreshold) {\n self.close();\n }\n };\n window.addEventListener('scroll', scrollHandler, { passive: true });\n this._cleanupFunctions.push(() => window.removeEventListener('scroll', scrollHandler));\n },\n\n /**\n * Bind triggers to all images with data-image-box attribute\n */\n bindTriggers: function () {\n const self = this;\n const triggers = document.querySelectorAll('[data-image-box]');\n\n triggers.forEach(function (trigger) {\n // Skip if already initialized\n if (trigger.dataset.imageBoxInitialized) return;\n trigger.dataset.imageBoxInitialized = 'true';\n\n // Add trigger class\n trigger.classList.add('vd-image-box-trigger');\n\n // Handle broken images\n if (trigger.tagName === 'IMG') {\n // Check if already in error state\n if (trigger.complete && trigger.naturalWidth === 0) {\n trigger.classList.add('is-broken');\n }\n\n // Listen for error events\n const errorHandler = function () {\n trigger.classList.add('is-broken');\n };\n trigger.addEventListener('error', errorHandler);\n\n // Listen for successful load\n const loadHandler = function () {\n trigger.classList.remove('is-broken');\n };\n trigger.addEventListener('load', loadHandler);\n }\n\n // Bind click event\n const clickHandler = function (e) {\n e.preventDefault();\n self.open(trigger);\n };\n trigger.addEventListener('click', clickHandler);\n\n // Store cleanup\n trigger._imageBoxCleanup = () => trigger.removeEventListener('click', clickHandler);\n\n // Keyboard accessibility for non-button triggers\n if (trigger.tagName !== 'BUTTON' && trigger.tagName !== 'A') {\n trigger.setAttribute('role', 'button');\n trigger.setAttribute('tabindex', '0');\n trigger.setAttribute('aria-label', 'View enlarged image');\n\n const keyHandler = function (e) {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n self.open(trigger);\n }\n };\n trigger.addEventListener('keydown', keyHandler);\n\n const originalCleanup = trigger._imageBoxCleanup;\n trigger._imageBoxCleanup = () => {\n originalCleanup();\n trigger.removeEventListener('keydown', keyHandler);\n };\n }\n });\n },\n\n /**\n * Open image box\n * @param {HTMLElement} trigger - The trigger element\n */\n open: function (trigger) {\n if (this.isOpen) return;\n\n this.currentTrigger = trigger;\n this.isOpen = true;\n this.initialScrollY = window.scrollY;\n\n // Get image source - support dual images (thumbnail + full-size)\n // data-image-box-full-src takes precedence for the lightbox\n const imgSrc = trigger.dataset.imageBoxFullSrc ||\n trigger.dataset.imageBoxSrc ||\n trigger.src ||\n trigger.href;\n\n if (!imgSrc) {\n console.warn('[Vanduo ImageBox] No image source found for trigger:', trigger);\n return;\n }\n\n // Get caption\n const captionText = trigger.dataset.imageBoxCaption || trigger.alt || '';\n\n // Set image source\n this.img.src = imgSrc;\n this.img.alt = trigger.alt || '';\n\n // Set caption\n if (captionText) {\n this.caption.textContent = captionText;\n this.caption.style.display = 'block';\n } else {\n this.caption.style.display = 'none';\n }\n\n // Calculate scrollbar width and lock body scroll\n const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n document.body.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);\n document.body.classList.add('body-image-box-open');\n\n // Show backdrop\n this.backdrop.classList.add('is-visible');\n\n // Focus management\n this.backdrop.focus();\n\n // Dispatch event\n trigger.dispatchEvent(new CustomEvent('imageBox:open', {\n bubbles: true,\n detail: { src: imgSrc }\n }));\n\n // Handle image load\n if (!this.img.complete) {\n this.img.style.opacity = '0';\n this._imgLoadHandler = () => {\n this.img.style.opacity = '';\n };\n this.img.addEventListener('load', this._imgLoadHandler, { once: true });\n }\n },\n\n /**\n * Close image box\n */\n close: function () {\n if (!this.isOpen) return;\n\n this.isOpen = false;\n\n // Hide backdrop\n this.backdrop.classList.remove('is-visible');\n\n // Unlock body scroll\n document.body.classList.remove('body-image-box-open');\n document.body.style.removeProperty('--scrollbar-width');\n\n // Return focus to trigger\n if (this.currentTrigger) {\n this.currentTrigger.focus();\n this.currentTrigger.dispatchEvent(new CustomEvent('imageBox:close', { bubbles: true }));\n this.currentTrigger = null;\n }\n\n // Clear image after transition\n setTimeout(() => {\n if (!this.isOpen) {\n // Clean up load handler if still pending\n if (this._imgLoadHandler) {\n this.img.removeEventListener('load', this._imgLoadHandler);\n this._imgLoadHandler = null;\n }\n this.img.src = '';\n this.img.alt = '';\n }\n }, 300);\n },\n\n /**\n * Reinitialize - useful after dynamic DOM changes\n */\n reinit: function () {\n this.bindTriggers();\n },\n\n /**\n * Destroy component and clean up\n */\n destroy: function () {\n // Close if open\n if (this.isOpen) {\n this.close();\n }\n\n // Remove backdrop\n if (this.backdrop && this.backdrop.parentNode) {\n this.backdrop.parentNode.removeChild(this.backdrop);\n }\n\n // Run cleanup functions\n this._cleanupFunctions.forEach(fn => fn());\n this._cleanupFunctions = [];\n\n // Remove trigger bindings\n const triggers = document.querySelectorAll('[data-image-box-initialized]');\n triggers.forEach(trigger => {\n trigger.classList.remove('vd-image-box-trigger');\n if (trigger._imageBoxCleanup) {\n trigger._imageBoxCleanup();\n delete trigger._imageBoxCleanup;\n }\n delete trigger.dataset.imageBoxInitialized;\n });\n\n this.backdrop = null;\n this.container = null;\n this.img = null;\n this.closeBtn = null;\n this.caption = null;\n this.currentTrigger = null;\n this.isOpen = false;\n },\n\n destroyAll: function () {\n this.destroy();\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('imageBox', ImageBox);\n }\n\n // Expose globally\n window.VanduoImageBox = ImageBox;\n\n})();\n", "/**\n * Vanduo Framework - Modals Component\n * JavaScript functionality for modal dialogs\n */\n\n(function () {\n 'use strict';\n\n /**\n * Modals Component\n */\n const Modals = {\n modals: new Map(),\n openModals: [],\n zIndexCounter: 1050,\n\n // Store trigger cleanup functions\n _triggerCleanups: [],\n // Shared ESC key handler (installed once)\n _sharedEscHandler: null,\n\n /**\n * Initialize modals\n */\n init: function () {\n const modals = document.querySelectorAll('.vd-modal');\n\n modals.forEach(modal => {\n if (this.modals.has(modal)) {\n return;\n }\n this.initModal(modal);\n });\n\n // Handle data-modal triggers\n const triggers = document.querySelectorAll('[data-modal]');\n triggers.forEach(trigger => {\n if (trigger.dataset.modalTriggerInitialized) return;\n trigger.dataset.modalTriggerInitialized = 'true';\n\n const triggerClickHandler = (e) => {\n e.preventDefault();\n const modalId = trigger.dataset.modal;\n const modal = document.querySelector(modalId);\n if (modal) {\n this.open(modal);\n }\n };\n trigger.addEventListener('click', triggerClickHandler);\n this._triggerCleanups.push(() => trigger.removeEventListener('click', triggerClickHandler));\n });\n },\n\n /**\n * Initialize a single modal\n * @param {HTMLElement} modal - Modal element\n */\n initModal: function (modal) {\n const backdrop = this.createBackdrop(modal);\n const closeButtons = modal.querySelectorAll('.vd-modal-close, [data-dismiss=\"modal\"]');\n const dialog = modal.querySelector('.vd-modal-dialog');\n\n if (!dialog) {\n return;\n }\n\n const cleanupFunctions = [];\n\n // Set ARIA attributes\n modal.setAttribute('role', 'dialog');\n modal.setAttribute('aria-modal', 'true');\n modal.setAttribute('aria-hidden', 'true');\n\n // Generate ID if not exists\n if (!modal.id) {\n modal.id = 'modal-' + Math.random().toString(36).substr(2, 9);\n }\n\n // Set aria-labelledby\n const title = modal.querySelector('.vd-modal-title');\n if (title && !title.id) {\n title.id = modal.id + '-title';\n modal.setAttribute('aria-labelledby', title.id);\n }\n\n // Close button handlers\n closeButtons.forEach(button => {\n const closeHandler = () => {\n this.close(modal);\n };\n button.addEventListener('click', closeHandler);\n cleanupFunctions.push(() => button.removeEventListener('click', closeHandler));\n });\n\n // Backdrop click handler\n const backdropClickHandler = (e) => {\n if (e.target === backdrop && modal.dataset.backdrop !== 'static') {\n this.close(modal);\n }\n };\n backdrop.addEventListener('click', backdropClickHandler);\n cleanupFunctions.push(() => backdrop.removeEventListener('click', backdropClickHandler));\n\n // ESC key handler \u2014 use a single shared handler instead of one-per-modal\n if (!this._sharedEscHandler) {\n this._sharedEscHandler = (e) => {\n if (e.key === 'Escape' && this.openModals.length > 0) {\n const topModal = this.openModals[this.openModals.length - 1];\n if (topModal.dataset.keyboard !== 'false') {\n this.close(topModal);\n }\n }\n };\n document.addEventListener('keydown', this._sharedEscHandler);\n }\n\n this.modals.set(modal, { backdrop, dialog, trapHandler: null, cleanup: cleanupFunctions });\n },\n\n /**\n * Create backdrop element\n * @param {HTMLElement} modal - Modal element\n * @returns {HTMLElement} Backdrop element\n */\n createBackdrop: function (modal) {\n let backdrop = modal.querySelector('.vd-modal-backdrop');\n\n if (!backdrop) {\n backdrop = document.createElement('div');\n backdrop.className = 'vd-modal-backdrop';\n document.body.appendChild(backdrop);\n }\n\n return backdrop;\n },\n\n /**\n * Open modal\n * @param {HTMLElement|string} modal - Modal element or selector\n */\n open: function (modal) {\n const el = typeof modal === 'string' ? document.querySelector(modal) : modal;\n\n if (!el) {\n console.warn('[Vanduo Modals] Modal element not found:', modal);\n return;\n }\n\n if (!this.modals.has(el)) {\n console.warn('[Vanduo Modals] Modal not initialized:', el);\n return;\n }\n\n const modalData = this.modals.get(el);\n const { backdrop, dialog: _dialog } = modalData;\n\n // Increment z-index for stacking\n this.zIndexCounter += 10;\n el.style.zIndex = this.zIndexCounter;\n backdrop.style.zIndex = this.zIndexCounter - 1;\n\n // Add to open modals stack\n this.openModals.push(el);\n\n // Show backdrop\n backdrop.classList.add('is-visible');\n\n // Show modal\n el.classList.add('is-open');\n el.setAttribute('aria-hidden', 'false');\n\n // Lock body scroll\n if (this.openModals.length === 1) {\n document.body.classList.add('body-modal-open');\n const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n if (scrollbarWidth > 0) {\n document.body.style.paddingRight = `${scrollbarWidth}px`;\n }\n }\n\n // Focus trap (store handler for cleanup)\n const trapHandler = this.trapFocus(el);\n modalData.trapHandler = trapHandler;\n\n // Auto-focus first focusable element\n setTimeout(() => {\n const firstFocusable = this.getFocusableElements(el)[0];\n if (firstFocusable) {\n firstFocusable.focus();\n }\n }, 100);\n\n // Dispatch event\n el.dispatchEvent(new CustomEvent('modal:open', { bubbles: true }));\n },\n\n /**\n * Close modal\n * @param {HTMLElement|string} modal - Modal element or selector\n */\n close: function (modal) {\n const el = typeof modal === 'string' ? document.querySelector(modal) : modal;\n\n if (!el) {\n console.warn('[Vanduo Modals] Modal element not found:', modal);\n return;\n }\n\n if (!this.modals.has(el)) {\n console.warn('[Vanduo Modals] Modal not initialized:', el);\n return;\n }\n\n const modalData = this.modals.get(el);\n const { backdrop, trapHandler } = modalData;\n\n // Remove focus trap event listener to prevent memory leak\n if (trapHandler) {\n el.removeEventListener('keydown', trapHandler);\n modalData.trapHandler = null;\n }\n\n // Remove from open modals stack\n const index = this.openModals.indexOf(el);\n if (index > -1) {\n this.openModals.splice(index, 1);\n }\n\n // Hide modal\n el.classList.remove('is-open');\n el.setAttribute('aria-hidden', 'true');\n\n // Hide backdrop if no other modals open\n if (this.openModals.length === 0) {\n backdrop.classList.remove('is-visible');\n document.body.classList.remove('body-modal-open');\n document.body.style.paddingRight = '';\n // Reset z-index counter to prevent indefinite growth\n this.zIndexCounter = 1050;\n } else {\n // Show backdrop for top modal\n const topModal = this.openModals[this.openModals.length - 1];\n const topBackdrop = this.modals.get(topModal).backdrop;\n topBackdrop.classList.add('is-visible');\n }\n\n // Return focus to trigger\n const trigger = document.querySelector(`[data-modal=\"#${el.id}\"]`);\n if (trigger) {\n trigger.focus();\n }\n\n // Dispatch event\n el.dispatchEvent(new CustomEvent('modal:close', { bubbles: true }));\n },\n\n /**\n * Trap focus within modal\n * @param {HTMLElement} modal - Modal element\n * @returns {Function} The trap handler function for cleanup\n */\n trapFocus: function (modal) {\n const self = this;\n\n const trapHandler = function (e) {\n if (e.key !== 'Tab') {\n return;\n }\n\n const focusableElements = self.getFocusableElements(modal);\n const firstElement = focusableElements[0];\n const lastElement = focusableElements[focusableElements.length - 1];\n\n if (e.shiftKey) {\n // Shift + Tab\n if (document.activeElement === firstElement) {\n e.preventDefault();\n lastElement.focus();\n }\n } else {\n // Tab\n if (document.activeElement === lastElement) {\n e.preventDefault();\n firstElement.focus();\n }\n }\n };\n\n modal.addEventListener('keydown', trapHandler);\n return trapHandler;\n },\n\n /**\n * Get focusable elements within modal\n * @param {HTMLElement} modal - Modal element\n * @returns {Array} Focusable elements\n */\n getFocusableElements: function (modal) {\n const selector = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n return Array.from(modal.querySelectorAll(selector)).filter(el => {\n return !el.hasAttribute('disabled') &&\n el.offsetWidth > 0 &&\n el.offsetHeight > 0;\n });\n },\n\n /**\n * Toggle modal\n * @param {HTMLElement|string} modal - Modal element or selector\n */\n toggle: function (modal) {\n const el = typeof modal === 'string' ? document.querySelector(modal) : modal;\n if (el) {\n if (el.classList.contains('is-open')) {\n this.close(el);\n } else {\n this.open(el);\n }\n }\n },\n\n /**\n * Destroy a modal instance and clean up event listeners\n * @param {HTMLElement} modal - Modal element\n */\n destroy: function (modal) {\n const modalData = this.modals.get(modal);\n if (!modalData) return;\n\n // Close if open\n if (modal.classList.contains('is-open')) {\n this.close(modal);\n }\n\n // Run all cleanup functions\n if (modalData.cleanup) {\n modalData.cleanup.forEach(fn => fn());\n }\n\n // Remove created backdrop\n if (modalData.backdrop && modalData.backdrop.parentNode) {\n modalData.backdrop.parentNode.removeChild(modalData.backdrop);\n }\n\n this.modals.delete(modal);\n },\n\n /**\n * Destroy all modal instances\n */\n destroyAll: function () {\n this.modals.forEach((data, modal) => {\n this.destroy(modal);\n });\n // Clean up trigger listeners\n this._triggerCleanups.forEach(fn => fn());\n this._triggerCleanups = [];\n // Remove shared ESC handler\n if (this._sharedEscHandler) {\n document.removeEventListener('keydown', this._sharedEscHandler);\n this._sharedEscHandler = null;\n }\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('modals', Modals);\n }\n\n // Expose globally\n window.VanduoModals = Modals;\n\n})();\n\n", "/**\n * Vanduo Framework - Navbar Component\n * JavaScript functionality for navbar mobile menu\n */\n\n(function () {\n 'use strict';\n\n /**\n * Navbar Component\n */\n const Navbar = {\n // Store initialized navbars and their cleanup functions\n instances: new Map(),\n\n /**\n * Get the breakpoint value from CSS variable or use fallback\n * @returns {number} Breakpoint in pixels\n */\n getBreakpoint: function () {\n const root = getComputedStyle(document.documentElement);\n const breakpointValue = root.getPropertyValue('--breakpoint-lg').trim();\n\n // Parse the value (could be \"992px\" or just \"992\")\n const parsed = parseInt(breakpointValue, 10);\n return isNaN(parsed) ? 992 : parsed;\n },\n\n /**\n * Initialize navbar component\n */\n init: function () {\n const navbars = document.querySelectorAll('.vd-navbar');\n\n navbars.forEach(navbar => {\n // Skip if already initialized\n if (this.instances.has(navbar)) {\n return;\n }\n this.initNavbar(navbar);\n });\n },\n\n /**\n * Initialize scroll-aware glass/transparent behaviour for a navbar.\n * Adds/removes `.vd-navbar-scrolled` when the page scrolls past a threshold.\n * Threshold: `data-scroll-threshold` attribute (px) or the navbar's own height.\n * @param {HTMLElement} navbar - Navbar element\n * @returns {Function|null} Cleanup function, or null if not applicable\n */\n initScrollWatcher: function (navbar) {\n const isGlass = navbar.classList.contains('vd-navbar-glass');\n const isTransparent = navbar.classList.contains('vd-navbar-transparent');\n\n if (!isGlass && !isTransparent) {\n return null;\n }\n\n const getThreshold = () => {\n const attr = parseInt(navbar.dataset.scrollThreshold, 10);\n return isNaN(attr) ? (navbar.offsetHeight || 60) : attr;\n };\n\n const onScroll = () => {\n const scrolled = window.scrollY > getThreshold();\n navbar.classList.toggle('vd-navbar-scrolled', scrolled);\n };\n\n onScroll(); // set initial state without waiting for first scroll\n window.addEventListener('scroll', onScroll, { passive: true });\n\n return () => window.removeEventListener('scroll', onScroll);\n },\n\n /**\n * Initialize a single navbar\n * @param {HTMLElement} navbar - Navbar element\n */\n initNavbar: function (navbar) {\n const toggle = navbar.querySelector('.vd-navbar-toggle, .vd-navbar-burger');\n const menu = navbar.querySelector('.vd-navbar-menu');\n const overlay = navbar.querySelector('.vd-navbar-overlay') || this.createOverlay(navbar);\n\n // Store cleanup functions for this navbar instance\n const cleanupFunctions = [];\n\n // Wire up scroll-aware glass/transparent behaviour regardless of mobile menu\n const scrollWatcherCleanup = this.initScrollWatcher(navbar);\n if (scrollWatcherCleanup) {\n cleanupFunctions.push(scrollWatcherCleanup);\n }\n\n if (!toggle || !menu) {\n // Still store the instance so scroll-watcher cleanup is tracked\n if (cleanupFunctions.length) {\n this.instances.set(navbar, { toggle: null, menu: null, overlay: null, cleanup: cleanupFunctions });\n }\n return;\n }\n\n // Toggle menu on button click\n const toggleClickHandler = (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggleMenu(navbar, toggle, menu, overlay);\n };\n toggle.addEventListener('click', toggleClickHandler);\n cleanupFunctions.push(() => toggle.removeEventListener('click', toggleClickHandler));\n\n // Close menu on overlay click\n if (overlay) {\n const overlayClickHandler = () => {\n this.closeMenu(navbar, toggle, menu, overlay);\n };\n overlay.addEventListener('click', overlayClickHandler);\n cleanupFunctions.push(() => overlay.removeEventListener('click', overlayClickHandler));\n }\n\n // Close menu on escape key\n const keydownHandler = (e) => {\n if (e.key === 'Escape' && menu.classList.contains('is-open')) {\n this.closeMenu(navbar, toggle, menu, overlay);\n }\n };\n document.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => document.removeEventListener('keydown', keydownHandler));\n\n // Close menu on window resize (if resizing to desktop)\n let resizeTimer;\n const resizeHandler = () => {\n clearTimeout(resizeTimer);\n resizeTimer = setTimeout(() => {\n const breakpoint = this.getBreakpoint();\n if (window.innerWidth >= breakpoint && menu.classList.contains('is-open')) {\n this.closeMenu(navbar, toggle, menu, overlay);\n }\n }, 250);\n };\n window.addEventListener('resize', resizeHandler);\n cleanupFunctions.push(() => {\n clearTimeout(resizeTimer);\n window.removeEventListener('resize', resizeHandler);\n });\n\n // Close menu when clicking outside\n const documentClickHandler = (e) => {\n if (menu.classList.contains('is-open') &&\n !navbar.contains(e.target) &&\n !menu.contains(e.target)) {\n this.closeMenu(navbar, toggle, menu, overlay);\n }\n };\n document.addEventListener('click', documentClickHandler);\n cleanupFunctions.push(() => document.removeEventListener('click', documentClickHandler));\n\n // Handle dropdown toggles in mobile menu\n const dropdownToggles = menu.querySelectorAll('.vd-navbar-dropdown > .vd-nav-link, .vd-navbar-dropdown > .nav-link');\n dropdownToggles.forEach(dropdownToggle => {\n const dropdownClickHandler = (e) => {\n const breakpoint = this.getBreakpoint();\n if (window.innerWidth < breakpoint) {\n e.preventDefault();\n const dropdown = dropdownToggle.parentElement;\n const dropdownMenu = dropdown.querySelector('.vd-navbar-dropdown-menu');\n\n if (dropdownMenu) {\n dropdownMenu.classList.toggle('is-open');\n }\n }\n };\n dropdownToggle.addEventListener('click', dropdownClickHandler);\n cleanupFunctions.push(() => dropdownToggle.removeEventListener('click', dropdownClickHandler));\n });\n\n // Store instance with cleanup functions\n this.instances.set(navbar, {\n toggle,\n menu,\n overlay,\n cleanup: cleanupFunctions\n });\n },\n\n /**\n * Destroy a navbar instance and clean up event listeners\n * @param {HTMLElement} navbar - Navbar element\n */\n destroy: function (navbar) {\n const instance = this.instances.get(navbar);\n if (!instance) {\n return;\n }\n\n // Run all cleanup functions\n instance.cleanup.forEach(fn => fn());\n\n // Remove created overlay if it exists\n if (instance.overlay && instance.overlay.parentNode) {\n instance.overlay.parentNode.removeChild(instance.overlay);\n }\n\n // Remove from instances map\n this.instances.delete(navbar);\n },\n\n /**\n * Destroy all navbar instances\n */\n destroyAll: function () {\n this.instances.forEach((instance, navbar) => {\n this.destroy(navbar);\n });\n },\n\n /**\n * Toggle mobile menu\n * @param {HTMLElement} navbar - Navbar element\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Menu element\n * @param {HTMLElement} overlay - Overlay element\n */\n toggleMenu: function (navbar, toggle, menu, overlay) {\n const isOpen = menu.classList.contains('is-open');\n\n if (isOpen) {\n this.closeMenu(navbar, toggle, menu, overlay);\n } else {\n this.openMenu(navbar, toggle, menu, overlay);\n }\n },\n\n /**\n * Open mobile menu\n * @param {HTMLElement} navbar - Navbar element\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Menu element\n * @param {HTMLElement} overlay - Overlay element\n */\n openMenu: function (navbar, toggle, menu, overlay) {\n menu.classList.add('is-open');\n toggle.classList.add('is-active');\n\n if (overlay) {\n overlay.classList.add('is-active');\n }\n\n // Prevent body scroll when menu is open (use class to avoid conflicts with modals)\n document.body.classList.add('body-navbar-open');\n\n // Set ARIA attributes\n toggle.setAttribute('aria-expanded', 'true');\n menu.setAttribute('aria-hidden', 'false');\n },\n\n /**\n * Close mobile menu\n * @param {HTMLElement} navbar - Navbar element\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Menu element\n * @param {HTMLElement} overlay - Overlay element\n */\n closeMenu: function (navbar, toggle, menu, overlay) {\n menu.classList.remove('is-open');\n toggle.classList.remove('is-active');\n\n if (overlay) {\n overlay.classList.remove('is-active');\n }\n\n // Restore body scroll\n document.body.classList.remove('body-navbar-open');\n\n // Close all dropdown menus\n const dropdownMenus = menu.querySelectorAll('.vd-navbar-dropdown-menu.is-open');\n dropdownMenus.forEach(dropdownMenu => {\n dropdownMenu.classList.remove('is-open');\n });\n\n // Set ARIA attributes\n toggle.setAttribute('aria-expanded', 'false');\n menu.setAttribute('aria-hidden', 'true');\n },\n\n /**\n * Create overlay element if it doesn't exist\n * @param {HTMLElement} navbar - Navbar element\n * @returns {HTMLElement} Overlay element\n */\n createOverlay: function (_navbar) {\n const overlay = document.createElement('div');\n overlay.className = 'vd-navbar-overlay';\n document.body.appendChild(overlay);\n return overlay;\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('navbar', Navbar);\n }\n\n // Expose globally\n window.VanduoNavbar = Navbar;\n\n})();\n", "/**\n * Vanduo Framework - Pagination Component\n * JavaScript functionality for dynamic pagination\n */\n\n(function() {\n 'use strict';\n\n /**\n * Pagination Component\n */\n const Pagination = {\n // Store initialized paginations and their cleanup functions\n instances: new Map(),\n\n /**\n * Initialize pagination components\n */\n init: function() {\n const paginations = document.querySelectorAll('.vd-pagination[data-pagination]');\n\n paginations.forEach(pagination => {\n if (this.instances.has(pagination)) {\n return;\n }\n this.initPagination(pagination);\n });\n },\n\n /**\n * Initialize a pagination\n * @param {HTMLElement} pagination - Pagination container\n */\n initPagination: function(pagination) {\n const totalPages = parseInt(pagination.dataset.totalPages) || 1;\n const currentPage = parseInt(pagination.dataset.currentPage) || 1;\n const maxVisible = parseInt(pagination.dataset.maxVisible) || 7;\n\n this.render(pagination, {\n totalPages: totalPages,\n currentPage: currentPage,\n maxVisible: maxVisible\n });\n\n // Handle clicks (event delegation)\n const clickHandler = (e) => {\n const link = e.target.closest('.vd-pagination-link');\n if (!link || link.closest('.vd-pagination-item.disabled') || link.closest('.vd-pagination-item.active')) {\n return;\n }\n\n e.preventDefault();\n\n const item = link.closest('.vd-pagination-item');\n const page = item.dataset.page;\n\n if (page) {\n this.goToPage(pagination, parseInt(page));\n } else if (item.classList.contains('pagination-prev')) {\n this.prevPage(pagination);\n } else if (item.classList.contains('pagination-next')) {\n this.nextPage(pagination);\n }\n };\n pagination.addEventListener('click', clickHandler);\n\n this.instances.set(pagination, {\n cleanup: [() => pagination.removeEventListener('click', clickHandler)]\n });\n },\n \n /**\n * Render pagination\n * @param {HTMLElement} pagination - Pagination container\n * @param {Object} options - Pagination options\n */\n render: function(pagination, options) {\n const { totalPages, currentPage, maxVisible } = options;\n \n if (totalPages <= 1) {\n pagination.innerHTML = '';\n return;\n }\n \n let html = '';\n \n // Previous button\n html += `
  • `;\n html += `Previous`;\n html += `
    • `;\n \n // Calculate page range\n const pages = this.calculatePages(currentPage, totalPages, maxVisible);\n \n // Page numbers\n let lastPage = 0;\n pages.forEach(page => {\n if (page === 'ellipsis') {\n html += `
  • \u2026
    • `;\n } else {\n if (page !== lastPage + 1 && lastPage > 0) {\n html += `
  • \u2026
    • `;\n }\n const safePage = Number(page);\n html += `
  • `;\n html += `${safePage}`;\n html += `
    • `;\n lastPage = page;\n }\n });\n \n // Next button\n html += `
  • `;\n html += `Next`;\n html += `
    • `;\n \n pagination.innerHTML = html;\n \n // Update data attributes\n pagination.dataset.currentPage = currentPage;\n },\n \n /**\n * Calculate which pages to show\n * @param {number} currentPage - Current page\n * @param {number} totalPages - Total pages\n * @param {number} maxVisible - Maximum visible pages\n * @returns {Array} Array of page numbers or 'ellipsis'\n */\n calculatePages: function(currentPage, totalPages, maxVisible) {\n const pages = [];\n const half = Math.floor(maxVisible / 2);\n \n if (totalPages <= maxVisible) {\n // Show all pages\n for (let i = 1; i <= totalPages; i++) {\n pages.push(i);\n }\n } else {\n // Always show first page\n pages.push(1);\n \n let start = Math.max(2, currentPage - half);\n let end = Math.min(totalPages - 1, currentPage + half);\n \n // Adjust if we're near the start\n if (currentPage <= half + 1) {\n end = Math.min(totalPages - 1, maxVisible - 1);\n }\n \n // Adjust if we're near the end\n if (currentPage >= totalPages - half) {\n start = Math.max(2, totalPages - maxVisible + 2);\n }\n \n // Add ellipsis before if needed\n if (start > 2) {\n pages.push('ellipsis');\n }\n \n // Add middle pages\n for (let i = start; i <= end; i++) {\n pages.push(i);\n }\n \n // Add ellipsis after if needed\n if (end < totalPages - 1) {\n pages.push('ellipsis');\n }\n \n // Always show last page\n if (totalPages > 1) {\n pages.push(totalPages);\n }\n }\n \n return pages;\n },\n \n /**\n * Go to specific page\n * @param {HTMLElement} pagination - Pagination container\n * @param {number} page - Page number\n */\n goToPage: function(pagination, page) {\n const totalPages = parseInt(pagination.dataset.totalPages) || 1;\n const maxVisible = parseInt(pagination.dataset.maxVisible) || 7;\n \n if (page < 1 || page > totalPages) {\n return;\n }\n \n this.render(pagination, {\n totalPages: totalPages,\n currentPage: page,\n maxVisible: maxVisible\n });\n \n // Dispatch event\n pagination.dispatchEvent(new CustomEvent('pagination:change', {\n bubbles: true,\n detail: { page, totalPages }\n }));\n },\n \n /**\n * Go to previous page\n * @param {HTMLElement} pagination - Pagination container\n */\n prevPage: function(pagination) {\n const currentPage = parseInt(pagination.dataset.currentPage) || 1;\n if (currentPage > 1) {\n this.goToPage(pagination, currentPage - 1);\n }\n },\n \n /**\n * Go to next page\n * @param {HTMLElement} pagination - Pagination container\n */\n nextPage: function(pagination) {\n const currentPage = parseInt(pagination.dataset.currentPage) || 1;\n const totalPages = parseInt(pagination.dataset.totalPages) || 1;\n if (currentPage < totalPages) {\n this.goToPage(pagination, currentPage + 1);\n }\n },\n \n /**\n * Update pagination\n * @param {HTMLElement|string} pagination - Pagination container or selector\n * @param {Object} options - Pagination options\n */\n update: function(pagination, options) {\n const el = typeof pagination === 'string' ? document.querySelector(pagination) : pagination;\n if (el) {\n if (options.totalPages !== undefined) {\n el.dataset.totalPages = options.totalPages;\n }\n if (options.currentPage !== undefined) {\n el.dataset.currentPage = options.currentPage;\n }\n if (options.maxVisible !== undefined) {\n el.dataset.maxVisible = options.maxVisible;\n }\n \n this.render(el, {\n totalPages: parseInt(el.dataset.totalPages) || 1,\n currentPage: parseInt(el.dataset.currentPage) || 1,\n maxVisible: parseInt(el.dataset.maxVisible) || 7\n });\n }\n },\n\n /**\n * Destroy a pagination instance and clean up event listeners\n * @param {HTMLElement} pagination - Pagination container\n */\n destroy: function(pagination) {\n const instance = this.instances.get(pagination);\n if (!instance) return;\n\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(pagination);\n },\n\n /**\n * Destroy all pagination instances\n */\n destroyAll: function() {\n this.instances.forEach((instance, pagination) => {\n this.destroy(pagination);\n });\n }\n };\n \n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('pagination', Pagination);\n }\n \n // Expose globally\n window.VanduoPagination = Pagination;\n \n})();\n\n", "/**\n * Vanduo Framework - Parallax Component\n * JavaScript functionality for parallax scroll effects\n */\n\n(function () {\n 'use strict';\n\n /**\n * Parallax Component\n */\n const Parallax = {\n parallaxElements: new Map(),\n ticking: false,\n isMobile: window.innerWidth < 768,\n reducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches,\n isInitialized: false,\n _onScroll: null,\n _onResize: null,\n\n /**\n * Initialize parallax components\n */\n init: function () {\n if (this.isInitialized) {\n this.refresh();\n return;\n }\n\n this.isInitialized = true;\n\n // Check for reduced motion preference\n if (this.reducedMotion) {\n return; // Don't initialize if user prefers reduced motion\n }\n\n const parallaxElements = document.querySelectorAll('.vd-parallax');\n\n parallaxElements.forEach(element => {\n if (!element.dataset.parallaxInitialized) {\n this.initParallax(element);\n }\n });\n\n // Handle scroll\n this.handleScroll();\n this._onScroll = () => {\n this.handleScroll();\n };\n window.addEventListener('scroll', this._onScroll, { passive: true });\n\n // Handle resize\n this._onResize = () => {\n this.isMobile = window.innerWidth < 768;\n this.updateAll();\n };\n window.addEventListener('resize', this._onResize);\n },\n\n /**\n * Initialize a parallax element\n * @param {HTMLElement} element - Parallax container\n */\n initParallax: function (element) {\n element.dataset.parallaxInitialized = 'true';\n\n // Check if disabled on mobile\n const disableMobile = element.classList.contains('parallax-disable-mobile');\n if (disableMobile && this.isMobile) {\n return;\n }\n\n const layers = element.querySelectorAll('.vd-parallax-layer, .vd-parallax-bg');\n const speed = this.getSpeed(element);\n const direction = element.classList.contains('parallax-horizontal') ? 'horizontal' : 'vertical';\n\n this.parallaxElements.set(element, {\n layers: Array.from(layers),\n speed: speed,\n direction: direction,\n disableMobile: disableMobile\n });\n\n // Initial update\n this.updateParallax(element);\n },\n\n /**\n * Get parallax speed from element\n * @param {HTMLElement} element - Parallax element\n * @returns {number} Speed multiplier\n */\n getSpeed: function (element) {\n if (element.classList.contains('parallax-slow')) {\n return 0.5;\n } else if (element.classList.contains('parallax-fast')) {\n return 1.5;\n }\n return 1; // Default medium speed\n },\n\n /**\n * Handle scroll event\n */\n handleScroll: function () {\n if (!this.ticking) {\n window.requestAnimationFrame(() => {\n this.updateAll();\n this.ticking = false;\n });\n this.ticking = true;\n }\n },\n\n /**\n * Update all parallax elements\n */\n updateAll: function () {\n this.parallaxElements.forEach((config, element) => {\n // Skip if disabled on mobile\n if (config.disableMobile && this.isMobile) {\n return;\n }\n\n this.updateParallax(element);\n });\n },\n\n /**\n * Update parallax for a single element\n * @param {HTMLElement} element - Parallax element\n */\n updateParallax: function (element) {\n const config = this.parallaxElements.get(element);\n if (!config) {\n return;\n }\n\n const rect = element.getBoundingClientRect();\n const windowHeight = window.innerHeight;\n const elementTop = rect.top;\n const elementHeight = rect.height;\n\n // Calculate scroll progress (0 to 1)\n const scrollProgress = Math.max(0, Math.min(1,\n (windowHeight - elementTop) / (windowHeight + elementHeight)\n ));\n\n // Calculate offset based on speed and direction\n const offset = (scrollProgress - 0.5) * config.speed * 100;\n\n config.layers.forEach((layer, _index) => {\n // Different layers can have different speeds\n const layerSpeed = layer.dataset.parallaxSpeed ? parseFloat(layer.dataset.parallaxSpeed) : 1;\n const layerOffset = offset * layerSpeed;\n\n if (config.direction === 'horizontal') {\n layer.style.transform = `translateX(${layerOffset}px)`;\n } else {\n layer.style.transform = `translateY(${layerOffset}px)`;\n }\n });\n },\n\n /**\n * Destroy parallax element\n * @param {HTMLElement|string} element - Parallax element or selector\n */\n destroy: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.parallaxElements.has(el)) {\n const config = this.parallaxElements.get(el);\n config.layers.forEach(layer => {\n layer.style.transform = '';\n });\n this.parallaxElements.delete(el);\n }\n },\n\n /**\n * Refresh parallax (recalculate positions)\n */\n refresh: function () {\n this.updateAll();\n },\n\n destroyAll: function () {\n this.parallaxElements.forEach((_config, element) => {\n this.destroy(element);\n });\n this.parallaxElements.clear();\n\n if (this._onScroll) {\n window.removeEventListener('scroll', this._onScroll);\n this._onScroll = null;\n }\n\n if (this._onResize) {\n window.removeEventListener('resize', this._onResize);\n this._onResize = null;\n }\n\n this.isInitialized = false;\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('parallax', Parallax);\n }\n\n // Expose globally\n window.VanduoParallax = Parallax;\n\n})();\n\n", "/**\n * Vanduo Framework - Preloader Component\n * JavaScript functionality for progress bars and loaders\n */\n\n(function() {\n 'use strict';\n\n /**\n * Preloader Component\n */\n const Preloader = {\n /**\n * Initialize preloader components\n */\n init: function() {\n const progressBars = document.querySelectorAll('.progress-bar[data-progress]');\n \n progressBars.forEach(bar => {\n if (!bar.dataset.progressInitialized) {\n this.initProgressBar(bar);\n }\n });\n },\n \n /**\n * Initialize a progress bar\n * @param {HTMLElement} bar - Progress bar element\n */\n initProgressBar: function(bar) {\n bar.dataset.progressInitialized = 'true';\n \n const initialValue = parseInt(bar.dataset.progress) || 0;\n this.setProgress(bar, initialValue, false);\n },\n \n /**\n * Set progress value\n * @param {HTMLElement|string} bar - Progress bar element or selector\n * @param {number} value - Progress value (0-100)\n * @param {boolean} animate - Whether to animate\n */\n setProgress: function(bar, value, animate = true) {\n const el = typeof bar === 'string' ? document.querySelector(bar) : bar;\n \n if (!el) {\n return;\n }\n \n // Clamp value between 0 and 100\n value = Math.max(0, Math.min(100, value));\n \n // Update width\n if (animate) {\n el.style.transition = 'width var(--transition-duration-slow) var(--transition-ease)';\n } else {\n el.style.transition = 'none';\n setTimeout(() => {\n el.style.transition = '';\n }, 0);\n }\n \n el.style.width = value + '%';\n el.setAttribute('aria-valuenow', value);\n el.setAttribute('aria-valuemin', 0);\n el.setAttribute('aria-valuemax', 100);\n \n // Update text if exists\n const text = el.querySelector('.progress-text');\n if (text) {\n text.textContent = value + '%';\n }\n \n // Dispatch event\n el.dispatchEvent(new CustomEvent('progress:update', {\n bubbles: true,\n detail: { value, max: 100 }\n }));\n \n // Complete event\n if (value >= 100) {\n el.dispatchEvent(new CustomEvent('progress:complete', {\n bubbles: true,\n detail: { value, max: 100 }\n }));\n }\n },\n \n /**\n * Animate progress from current to target\n * @param {HTMLElement|string} bar - Progress bar element or selector\n * @param {number} targetValue - Target progress value (0-100)\n * @param {number} duration - Animation duration in ms\n */\n animateProgress: function(bar, targetValue, duration = 1000) {\n const el = typeof bar === 'string' ? document.querySelector(bar) : bar;\n \n if (!el) {\n return;\n }\n \n const startValue = parseInt(el.style.width) || 0;\n const difference = targetValue - startValue;\n const startTime = performance.now();\n \n const animate = (currentTime) => {\n const elapsed = currentTime - startTime;\n const progress = Math.min(elapsed / duration, 1);\n \n // Easing function (ease-out)\n const easeOut = 1 - Math.pow(1 - progress, 3);\n const currentValue = startValue + (difference * easeOut);\n \n this.setProgress(el, currentValue, false);\n \n if (progress < 1) {\n requestAnimationFrame(animate);\n }\n };\n \n requestAnimationFrame(animate);\n },\n \n /**\n * Show preloader\n * @param {HTMLElement|string} preloader - Preloader element or selector\n */\n show: function(preloader) {\n const el = typeof preloader === 'string' ? document.querySelector(preloader) : preloader;\n if (el) {\n el.style.display = 'inline-block';\n el.setAttribute('aria-hidden', 'false');\n }\n },\n \n /**\n * Hide preloader\n * @param {HTMLElement|string} preloader - Preloader element or selector\n */\n hide: function(preloader) {\n const el = typeof preloader === 'string' ? document.querySelector(preloader) : preloader;\n if (el) {\n el.style.display = 'none';\n el.setAttribute('aria-hidden', 'true');\n }\n },\n \n /**\n * Toggle preloader\n * @param {HTMLElement|string} preloader - Preloader element or selector\n */\n toggle: function(preloader) {\n const el = typeof preloader === 'string' ? document.querySelector(preloader) : preloader;\n if (el) {\n if (el.style.display === 'none' || el.getAttribute('aria-hidden') === 'true') {\n this.show(el);\n } else {\n this.hide(el);\n }\n }\n },\n\n /**\n * Destroy all progress bar instances\n */\n destroyAll: function() {\n const progressBars = document.querySelectorAll('.progress-bar[data-progress-initialized=\"true\"]');\n progressBars.forEach(bar => {\n delete bar.dataset.progressInitialized;\n });\n }\n };\n \n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('preloader', Preloader);\n }\n \n // Expose globally\n window.VanduoPreloader = Preloader;\n \n})();\n\n", "/**\n * Vanduo Framework - Select Component\n * Custom select dropdown with enhanced functionality\n */\n\n(function () {\n 'use strict';\n\n /**\n * Select Component\n */\n const Select = {\n // Store initialized selects and their cleanup functions\n instances: new Map(),\n\n /**\n * Initialize select components\n */\n init: function () {\n const selects = document.querySelectorAll('select.vd-custom-select-input, select[data-custom-select]');\n\n selects.forEach(select => {\n if (this.instances.has(select)) {\n return;\n }\n this.initSelect(select);\n });\n },\n\n /**\n * Initialize a single select\n * @param {HTMLSelectElement} select - Select element\n */\n initSelect: function (select) {\n // Skip if already has custom wrapper\n if (select.closest('.vd-custom-select-wrapper')) {\n return;\n }\n\n const cleanupFunctions = [];\n\n // Create wrapper\n const wrapper = document.createElement('div');\n wrapper.className = 'custom-select-wrapper';\n select.parentNode.insertBefore(wrapper, select);\n wrapper.appendChild(select);\n\n // Create custom button\n const button = document.createElement('button');\n button.type = 'button';\n button.className = 'custom-select-button';\n button.setAttribute('aria-haspopup', 'listbox');\n button.setAttribute('aria-expanded', 'false');\n button.setAttribute('aria-labelledby', select.id || this.generateId(select));\n\n // Create dropdown\n const dropdown = document.createElement('div');\n dropdown.className = 'custom-select-dropdown';\n dropdown.setAttribute('role', 'listbox');\n\n // Create search input if searchable\n if (select.dataset.searchable === 'true') {\n const searchWrapper = document.createElement('div');\n searchWrapper.className = 'custom-select-search';\n const searchInput = document.createElement('input');\n searchInput.type = 'text';\n searchInput.className = 'input input-sm';\n searchInput.placeholder = 'Search...';\n searchInput.setAttribute('aria-label', 'Search options');\n searchWrapper.appendChild(searchInput);\n dropdown.appendChild(searchWrapper);\n\n const filterFn = (e) => {\n this.filterOptions(dropdown, e.target.value);\n };\n const searchHandler = typeof debounce === 'function' ? debounce(filterFn, 150) : filterFn;\n searchInput.addEventListener('input', searchHandler);\n cleanupFunctions.push(() => searchInput.removeEventListener('input', searchHandler));\n }\n\n // Build options\n this.buildOptions(select, dropdown, button);\n\n wrapper.appendChild(button);\n wrapper.appendChild(dropdown);\n\n // Update button text\n this.updateButtonText(select, button);\n\n // Event listeners\n const buttonClickHandler = (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggleDropdown(button, dropdown);\n };\n button.addEventListener('click', buttonClickHandler);\n cleanupFunctions.push(() => button.removeEventListener('click', buttonClickHandler));\n\n // Close on outside click\n const documentClickHandler = (e) => {\n if (!wrapper.contains(e.target) && dropdown.classList.contains('is-open')) {\n this.closeDropdown(button, dropdown);\n }\n };\n document.addEventListener('click', documentClickHandler);\n cleanupFunctions.push(() => document.removeEventListener('click', documentClickHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, select, button, dropdown);\n };\n button.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => button.removeEventListener('keydown', keydownHandler));\n\n // Update on select change\n const changeHandler = () => {\n this.updateButtonText(select, button);\n this.updateSelectedOptions(select, dropdown);\n };\n select.addEventListener('change', changeHandler);\n cleanupFunctions.push(() => select.removeEventListener('change', changeHandler));\n\n this.instances.set(select, { wrapper, button, dropdown, cleanup: cleanupFunctions, typeaheadBuffer: '', typeaheadTimer: null });\n },\n\n /**\n * Build options in dropdown\n * @param {HTMLSelectElement} select - Select element\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} button - Button element\n */\n buildOptions: function (select, dropdown, button) {\n const options = select.querySelectorAll('option');\n const fragment = document.createDocumentFragment();\n\n options.forEach((option, index) => {\n if (option.parentElement.tagName === 'OPTGROUP') {\n // Handle option groups\n const group = option.parentElement;\n if (!dropdown.querySelector(`[data-group=\"${group.label}\"]`)) {\n const groupElement = document.createElement('div');\n groupElement.className = 'custom-select-option-group';\n groupElement.textContent = group.label;\n groupElement.dataset.group = group.label;\n fragment.appendChild(groupElement);\n }\n }\n\n if (option.value === '' && !option.textContent.trim()) {\n return; // Skip empty options\n }\n\n const optionElement = document.createElement('div');\n optionElement.className = 'custom-select-option';\n optionElement.textContent = option.textContent;\n optionElement.setAttribute('role', 'option');\n optionElement.setAttribute('data-value', option.value);\n optionElement.setAttribute('data-index', index);\n\n if (option.selected) {\n optionElement.classList.add('is-selected');\n optionElement.setAttribute('aria-selected', 'true');\n }\n\n if (option.disabled) {\n optionElement.classList.add('is-disabled');\n optionElement.setAttribute('aria-disabled', 'true');\n }\n\n optionElement.addEventListener('click', (_e) => {\n if (!option.disabled) {\n this.selectOption(select, option, optionElement, button, dropdown);\n }\n });\n\n fragment.appendChild(optionElement);\n });\n\n dropdown.appendChild(fragment);\n },\n\n /**\n * Select an option\n * @param {HTMLSelectElement} select - Select element\n * @param {HTMLOptionElement} option - Option element\n * @param {HTMLElement} optionElement - Custom option element\n * @param {HTMLElement} button - Button element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n selectOption: function (select, option, optionElement, button, dropdown) {\n if (select.multiple) {\n // Multi-select\n option.selected = !option.selected;\n optionElement.classList.toggle('is-selected');\n optionElement.setAttribute('aria-selected', option.selected);\n } else {\n // Single select\n select.value = option.value;\n select.dispatchEvent(new Event('change', { bubbles: true }));\n this.closeDropdown(button, dropdown);\n }\n\n this.updateButtonText(select, button);\n },\n\n /**\n * Update button text\n * @param {HTMLSelectElement} select - Select element\n * @param {HTMLElement} button - Button element\n */\n updateButtonText: function (select, button) {\n if (select.multiple) {\n const selected = Array.from(select.selectedOptions);\n if (selected.length === 0) {\n button.textContent = select.dataset.placeholder || 'Select options...';\n } else if (selected.length === 1) {\n button.textContent = selected[0].textContent;\n } else {\n button.textContent = `${selected.length} selected`;\n }\n } else {\n const selectedOption = select.options[select.selectedIndex];\n button.textContent = selectedOption ? selectedOption.textContent : (select.dataset.placeholder || 'Select...');\n }\n },\n\n /**\n * Update selected options in dropdown\n * @param {HTMLSelectElement} select - Select element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n updateSelectedOptions: function (select, dropdown) {\n const options = dropdown.querySelectorAll('.custom-select-option');\n const selectedValues = Array.from(select.selectedOptions).map(opt => opt.value);\n\n options.forEach(optionEl => {\n const value = optionEl.dataset.value;\n if (selectedValues.includes(value)) {\n optionEl.classList.add('is-selected');\n optionEl.setAttribute('aria-selected', 'true');\n } else {\n optionEl.classList.remove('is-selected');\n optionEl.setAttribute('aria-selected', 'false');\n }\n });\n },\n\n /**\n * Toggle dropdown\n * @param {HTMLElement} button - Button element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n toggleDropdown: function (button, dropdown) {\n const isOpen = dropdown.classList.contains('is-open');\n\n if (isOpen) {\n this.closeDropdown(button, dropdown);\n } else {\n this.openDropdown(button, dropdown);\n }\n },\n\n /**\n * Open dropdown\n * @param {HTMLElement} button - Button element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n openDropdown: function (button, dropdown) {\n dropdown.classList.add('is-open');\n button.setAttribute('aria-expanded', 'true');\n\n // Focus first option\n const firstOption = dropdown.querySelector('.custom-select-option:not(.is-disabled)');\n if (firstOption) {\n firstOption.focus();\n }\n },\n\n /**\n * Close dropdown\n * @param {HTMLElement} button - Button element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n closeDropdown: function (button, dropdown) {\n dropdown.classList.remove('is-open');\n button.setAttribute('aria-expanded', 'false');\n },\n\n /**\n * Handle keyboard navigation\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLSelectElement} select - Select element\n * @param {HTMLElement} button - Button element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n handleKeydown: function (e, select, button, dropdown) {\n const isOpen = dropdown.classList.contains('is-open');\n const options = Array.from(dropdown.querySelectorAll('.custom-select-option:not(.is-disabled)'));\n const currentIndex = options.findIndex(opt => opt === document.activeElement);\n\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n if (isOpen && currentIndex >= 0) {\n const optionEl = options[currentIndex];\n const option = select.options[parseInt(optionEl.dataset.index)];\n this.selectOption(select, option, optionEl, button, dropdown);\n } else {\n this.openDropdown(button, dropdown);\n }\n break;\n\n case 'Escape':\n if (isOpen) {\n e.preventDefault();\n this.closeDropdown(button, dropdown);\n button.focus();\n }\n break;\n\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen) {\n this.openDropdown(button, dropdown);\n } else {\n const nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0;\n options[nextIndex].focus();\n }\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n if (isOpen) {\n const prevIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1;\n options[prevIndex].focus();\n }\n break;\n\n case 'Home':\n if (isOpen) {\n e.preventDefault();\n options[0].focus();\n }\n break;\n\n case 'End':\n if (isOpen) {\n e.preventDefault();\n options[options.length - 1].focus();\n }\n break;\n\n default:\n // Typeahead: jump to matching option when typing printable characters\n if (isOpen && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\n // Per-instance typeahead state to avoid cross-instance corruption\n const instance = this.instances.get(select);\n if (!instance) break;\n clearTimeout(instance.typeaheadTimer);\n instance.typeaheadBuffer += e.key.toLowerCase();\n\n const match = options.find(opt =>\n opt.textContent.trim().toLowerCase().startsWith(instance.typeaheadBuffer)\n );\n if (match) {\n match.focus();\n }\n\n instance.typeaheadTimer = setTimeout(() => {\n instance.typeaheadBuffer = '';\n }, 500);\n }\n break;\n }\n },\n\n /**\n * Filter options by search term\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {string} searchTerm - Search term\n */\n filterOptions: function (dropdown, searchTerm) {\n const options = dropdown.querySelectorAll('.vd-custom-select-option');\n const term = searchTerm.toLowerCase();\n\n options.forEach(option => {\n const text = option.textContent.toLowerCase();\n if (text.includes(term)) {\n option.style.display = 'block';\n } else {\n option.style.display = 'none';\n }\n });\n },\n\n /**\n * Generate unique ID\n * @param {HTMLElement} element - Element\n * @returns {string} Generated ID\n */\n generateId: function (element) {\n if (element.id) {\n return element.id;\n }\n const id = 'select-' + Math.random().toString(36).substr(2, 9);\n element.id = id;\n return id;\n },\n\n /**\n * Destroy a select instance and clean up event listeners\n * @param {HTMLSelectElement} select - Select element\n */\n destroy: function (select) {\n const instance = this.instances.get(select);\n if (!instance) return;\n\n instance.cleanup.forEach(fn => fn());\n\n // Unwrap the select element back to its original parent\n if (instance.wrapper && instance.wrapper.parentNode) {\n instance.wrapper.parentNode.insertBefore(select, instance.wrapper);\n instance.wrapper.parentNode.removeChild(instance.wrapper);\n }\n\n this.instances.delete(select);\n },\n\n /**\n * Destroy all select instances\n */\n destroyAll: function () {\n this.instances.forEach((instance, select) => {\n this.destroy(select);\n });\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('select', Select);\n }\n\n})();\n\n", "/**\n * Vanduo Framework - Sidenav Component\n * JavaScript functionality for side navigation drawer\n */\n\n(function() {\n 'use strict';\n\n /**\n * Sidenav Component\n */\n const Sidenav = {\n sidenavs: new Map(),\n breakpoint: 992, // Desktop breakpoint\n \n // Global cleanup functions (toggles, resize)\n _globalCleanups: [],\n\n isFixedVariant: function(sidenav) {\n return sidenav.classList.contains('vd-sidenav-fixed') || sidenav.classList.contains('sidenav-fixed');\n },\n\n isPushVariant: function(sidenav) {\n return sidenav.classList.contains('vd-sidenav-push') || sidenav.classList.contains('sidenav-push');\n },\n\n isRightVariant: function(sidenav) {\n return sidenav.classList.contains('vd-sidenav-right') || sidenav.classList.contains('sidenav-right');\n },\n\n /**\n * Initialize sidenav components\n */\n init: function() {\n const sidenavs = document.querySelectorAll('.vd-sidenav, .vd-offcanvas');\n\n sidenavs.forEach(sidenav => {\n if (this.sidenavs.has(sidenav)) {\n return;\n }\n this.initSidenav(sidenav);\n });\n\n // Handle toggle buttons\n const toggles = document.querySelectorAll('[data-sidenav-toggle]');\n toggles.forEach(toggle => {\n if (toggle.dataset.sidenavToggleInitialized) return;\n toggle.dataset.sidenavToggleInitialized = 'true';\n\n const toggleClickHandler = (e) => {\n e.preventDefault();\n const targetId = toggle.dataset.sidenavToggle;\n const sidenav = document.querySelector(targetId);\n if (sidenav) {\n this.toggle(sidenav);\n }\n };\n toggle.addEventListener('click', toggleClickHandler);\n this._globalCleanups.push(() => toggle.removeEventListener('click', toggleClickHandler));\n });\n\n // Handle responsive behavior\n this.handleResize();\n const resizeHandler = () => {\n this.handleResize();\n };\n window.addEventListener('resize', resizeHandler);\n this._globalCleanups.push(() => window.removeEventListener('resize', resizeHandler));\n },\n\n /**\n * Initialize a single sidenav\n * @param {HTMLElement} sidenav - Sidenav element\n */\n initSidenav: function(sidenav) {\n // Apply data-vd-position direction class if specified\n const position = sidenav.getAttribute('data-vd-position');\n if (position) {\n const prefix = sidenav.classList.contains('vd-offcanvas') ? 'vd-offcanvas' : 'vd-sidenav';\n sidenav.classList.add(prefix + '-' + position);\n }\n\n const overlay = this.createOverlay(sidenav);\n const closeButton = sidenav.querySelector('.vd-sidenav-close, .vd-offcanvas-close');\n const cleanupFunctions = [];\n\n // Set ARIA attributes\n sidenav.setAttribute('role', 'navigation');\n sidenav.setAttribute('aria-hidden', 'true');\n\n // Close button handler\n if (closeButton) {\n const closeHandler = () => {\n this.close(sidenav);\n };\n closeButton.addEventListener('click', closeHandler);\n cleanupFunctions.push(() => closeButton.removeEventListener('click', closeHandler));\n }\n\n // Overlay click handler\n const overlayClickHandler = () => {\n if (sidenav.dataset.backdrop !== 'static') {\n this.close(sidenav);\n }\n };\n overlay.addEventListener('click', overlayClickHandler);\n cleanupFunctions.push(() => overlay.removeEventListener('click', overlayClickHandler));\n\n // ESC key handler\n const escKeyHandler = (e) => {\n if (e.key === 'Escape' && sidenav.classList.contains('is-open')) {\n if (sidenav.dataset.keyboard !== 'false') {\n this.close(sidenav);\n }\n }\n };\n document.addEventListener('keydown', escKeyHandler);\n cleanupFunctions.push(() => document.removeEventListener('keydown', escKeyHandler));\n\n this.sidenavs.set(sidenav, { overlay, cleanup: cleanupFunctions });\n },\n \n /**\n * Create overlay element\n * @param {HTMLElement} sidenav - Sidenav element\n * @returns {HTMLElement} Overlay element\n */\n createOverlay: function(sidenav) {\n let overlay = sidenav.querySelector('.vd-sidenav-overlay');\n \n if (!overlay) {\n overlay = document.createElement('div');\n overlay.className = 'vd-sidenav-overlay';\n document.body.appendChild(overlay);\n }\n \n return overlay;\n },\n \n /**\n * Open sidenav\n * @param {HTMLElement|string} sidenav - Sidenav element or selector\n */\n open: function(sidenav) {\n const el = typeof sidenav === 'string' ? document.querySelector(sidenav) : sidenav;\n \n if (!el || !this.sidenavs.has(el)) {\n return;\n }\n \n const { overlay } = this.sidenavs.get(el);\n \n // Show overlay (if not fixed)\n if (!this.isFixedVariant(el)) {\n overlay.classList.add('is-visible');\n }\n \n // Open sidenav\n el.classList.add('is-open');\n el.setAttribute('aria-hidden', 'false');\n \n // Lock body scroll\n document.body.classList.add('body-sidenav-open');\n \n // Handle push variant\n if (this.isPushVariant(el)) {\n this.handlePushVariant(el, true);\n }\n \n // Dispatch event\n el.dispatchEvent(new CustomEvent('sidenav:open', { bubbles: true }));\n },\n \n /**\n * Close sidenav\n * @param {HTMLElement|string} sidenav - Sidenav element or selector\n */\n close: function(sidenav) {\n const el = typeof sidenav === 'string' ? document.querySelector(sidenav) : sidenav;\n \n if (!el || !this.sidenavs.has(el)) {\n return;\n }\n \n const { overlay } = this.sidenavs.get(el);\n \n // Hide overlay\n overlay.classList.remove('is-visible');\n \n // Close sidenav\n el.classList.remove('is-open');\n el.setAttribute('aria-hidden', 'true');\n \n // Unlock body scroll\n document.body.classList.remove('body-sidenav-open');\n \n // Handle push variant\n if (this.isPushVariant(el)) {\n this.handlePushVariant(el, false);\n }\n \n // Dispatch event\n el.dispatchEvent(new CustomEvent('sidenav:close', { bubbles: true }));\n },\n \n /**\n * Toggle sidenav\n * @param {HTMLElement|string} sidenav - Sidenav element or selector\n */\n toggle: function(sidenav) {\n const el = typeof sidenav === 'string' ? document.querySelector(sidenav) : sidenav;\n if (el) {\n if (el.classList.contains('is-open')) {\n this.close(el);\n } else {\n this.open(el);\n }\n }\n },\n \n /**\n * Handle push variant\n * @param {HTMLElement} sidenav - Sidenav element\n * @param {boolean} isOpen - Whether sidenav is open\n */\n handlePushVariant: function(sidenav, isOpen) {\n // Find the main content wrapper\n const content = document.querySelector('main, .main-content, .content, [role=\"main\"]') || document.body;\n \n if (isOpen) {\n if (window.innerWidth >= this.breakpoint) {\n if (this.isRightVariant(sidenav)) {\n content.style.marginRight = sidenav.offsetWidth + 'px';\n } else {\n content.style.marginLeft = sidenav.offsetWidth + 'px';\n }\n }\n } else {\n content.style.marginLeft = '';\n content.style.marginRight = '';\n }\n },\n \n /**\n * Handle window resize\n */\n handleResize: function() {\n this.sidenavs.forEach(({ overlay }, sidenav) => {\n // Close overlay sidenavs on resize to desktop if they're open\n if (window.innerWidth >= this.breakpoint) {\n if (this.isFixedVariant(sidenav) && !sidenav.classList.contains('is-open')) {\n // Fixed sidenavs should be visible on desktop\n sidenav.classList.add('is-open');\n sidenav.setAttribute('aria-hidden', 'false');\n overlay.classList.remove('is-visible');\n }\n } else {\n // On mobile, fixed sidenavs become overlay\n if (this.isFixedVariant(sidenav) && sidenav.classList.contains('is-open')) {\n this.close(sidenav);\n }\n }\n });\n },\n\n /**\n * Destroy a sidenav instance and clean up event listeners\n * @param {HTMLElement} sidenav - Sidenav element\n */\n destroy: function(sidenav) {\n const data = this.sidenavs.get(sidenav);\n if (!data) return;\n\n // Close if open\n if (sidenav.classList.contains('is-open')) {\n this.close(sidenav);\n }\n\n data.cleanup.forEach(fn => fn());\n\n // Remove created overlay\n if (data.overlay && data.overlay.parentNode) {\n data.overlay.parentNode.removeChild(data.overlay);\n }\n\n this.sidenavs.delete(sidenav);\n },\n\n /**\n * Destroy all sidenav instances\n */\n destroyAll: function() {\n this.sidenavs.forEach((data, sidenav) => {\n this.destroy(sidenav);\n });\n this._globalCleanups.forEach(fn => fn());\n this._globalCleanups = [];\n }\n };\n \n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('sidenav', Sidenav);\n }\n \n // Expose globally\n window.VanduoSidenav = Sidenav;\n \n})();\n\n", "/**\n * Vanduo Framework - Tabs Component\n * Tabbed content navigation with keyboard support\n */\n\n(function() {\n 'use strict';\n\n /**\n * Tabs Component\n */\n const Tabs = {\n // Store initialized tab containers and their cleanup functions\n instances: new Map(),\n\n /**\n * Initialize all tab components\n */\n init: function() {\n const tabContainers = document.querySelectorAll('.vd-tabs, [data-tabs]');\n\n tabContainers.forEach(container => {\n if (this.instances.has(container)) {\n return;\n }\n this.initTabs(container);\n });\n },\n\n /**\n * Initialize a single tab container\n * @param {HTMLElement} container - Tabs container element\n */\n initTabs: function(container) {\n const tabList = container.querySelector('.vd-tab-list, [role=\"tablist\"]');\n const tabLinks = container.querySelectorAll('.vd-tab-link, [data-tab]');\n const tabPanes = container.querySelectorAll('.vd-tab-pane, [data-tab-pane]');\n\n if (!tabList || tabLinks.length === 0) return;\n\n const cleanupFunctions = [];\n\n // Set up ARIA attributes\n tabList.setAttribute('role', 'tablist');\n\n tabLinks.forEach((link, index) => {\n const tabId = link.dataset.tab || link.getAttribute('href')?.replace('#', '') || `tab-${index}`;\n const pane = this.findPane(container, tabId, tabPanes);\n\n // Set up tab attributes\n link.setAttribute('role', 'tab');\n link.setAttribute('aria-selected', link.classList.contains('is-active') ? 'true' : 'false');\n link.setAttribute('tabindex', link.classList.contains('is-active') ? '0' : '-1');\n\n if (!link.id) {\n link.id = `tab-btn-${tabId}`;\n }\n\n // Set up pane attributes\n if (pane) {\n pane.setAttribute('role', 'tabpanel');\n pane.setAttribute('aria-labelledby', link.id);\n if (!pane.id) {\n pane.id = `tab-pane-${tabId}`;\n }\n link.setAttribute('aria-controls', pane.id);\n }\n\n // Click handler\n const clickHandler = (e) => {\n e.preventDefault();\n if (!link.classList.contains('disabled') && !link.disabled) {\n this.activateTab(container, link, tabLinks, tabPanes);\n }\n };\n link.addEventListener('click', clickHandler);\n cleanupFunctions.push(() => link.removeEventListener('click', clickHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, container, link, tabLinks, tabPanes);\n };\n link.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => link.removeEventListener('keydown', keydownHandler));\n });\n\n // Ensure one tab is active\n const activeTab = container.querySelector('.vd-tab-link.is-active, [data-tab].is-active');\n if (!activeTab && tabLinks.length > 0) {\n this.activateTab(container, tabLinks[0], tabLinks, tabPanes);\n }\n\n this.instances.set(container, { cleanup: cleanupFunctions });\n },\n\n /**\n * Find the pane associated with a tab\n * @param {HTMLElement} container - Tabs container\n * @param {string} tabId - Tab identifier\n * @param {NodeList} tabPanes - All tab panes\n * @returns {HTMLElement|null} The matching pane\n */\n findPane: function(container, tabId, tabPanes) {\n // Try data attribute first\n let pane = container.querySelector(`[data-tab-pane=\"${tabId}\"]`);\n\n // Try ID\n if (!pane) {\n pane = container.querySelector(`#${tabId}`);\n }\n\n // Try matching by index\n if (!pane) {\n const tabLinks = container.querySelectorAll('.vd-tab-link, [data-tab]');\n tabLinks.forEach((link, index) => {\n const linkTabId = link.dataset.tab || link.getAttribute('href')?.replace('#', '');\n if (linkTabId === tabId && tabPanes[index]) {\n pane = tabPanes[index];\n }\n });\n }\n\n return pane;\n },\n\n /**\n * Activate a tab\n * @param {HTMLElement} container - Tabs container\n * @param {HTMLElement} tab - Tab to activate\n * @param {NodeList} allTabs - All tab links\n * @param {NodeList} allPanes - All tab panes\n */\n activateTab: function(container, tab, allTabs, allPanes) {\n const tabId = tab.dataset.tab || tab.getAttribute('href')?.replace('#', '') || tab.id;\n\n // Deactivate all tabs\n allTabs.forEach(t => {\n t.classList.remove('is-active');\n t.setAttribute('aria-selected', 'false');\n t.setAttribute('tabindex', '-1');\n\n // Also handle parent li if exists\n if (t.parentElement && t.parentElement.classList.contains('tab-item')) {\n t.parentElement.classList.remove('is-active');\n }\n });\n\n // Hide all panes\n allPanes.forEach(p => {\n p.classList.remove('is-active');\n });\n\n // Activate selected tab\n tab.classList.add('is-active');\n tab.setAttribute('aria-selected', 'true');\n tab.setAttribute('tabindex', '0');\n\n // Also handle parent li if exists\n if (tab.parentElement && tab.parentElement.classList.contains('tab-item')) {\n tab.parentElement.classList.add('is-active');\n }\n\n // Show corresponding pane\n const pane = this.findPane(container, tabId, allPanes);\n if (pane) {\n pane.classList.add('is-active');\n }\n\n // Dispatch custom event\n const event = new CustomEvent('tab:change', {\n bubbles: true,\n detail: {\n tab: tab,\n pane: pane,\n tabId: tabId\n }\n });\n container.dispatchEvent(event);\n },\n\n /**\n * Handle keyboard navigation\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} container - Tabs container\n * @param {HTMLElement} currentTab - Currently focused tab\n * @param {NodeList} allTabs - All tab links\n * @param {NodeList} allPanes - All tab panes\n */\n handleKeydown: function(e, container, currentTab, allTabs, allPanes) {\n const isVertical = container.classList.contains('tabs-vertical');\n const tabs = Array.from(allTabs).filter(t => !t.classList.contains('disabled') && !t.disabled);\n const currentIndex = tabs.indexOf(currentTab);\n\n let newIndex = currentIndex;\n\n switch (e.key) {\n case 'ArrowLeft':\n if (!isVertical) {\n e.preventDefault();\n newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;\n }\n break;\n\n case 'ArrowRight':\n if (!isVertical) {\n e.preventDefault();\n newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;\n }\n break;\n\n case 'ArrowUp':\n if (isVertical) {\n e.preventDefault();\n newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;\n }\n break;\n\n case 'ArrowDown':\n if (isVertical) {\n e.preventDefault();\n newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;\n }\n break;\n\n case 'Home':\n e.preventDefault();\n newIndex = 0;\n break;\n\n case 'End':\n e.preventDefault();\n newIndex = tabs.length - 1;\n break;\n\n case 'Enter':\n case ' ':\n e.preventDefault();\n this.activateTab(container, currentTab, allTabs, allPanes);\n return;\n\n default:\n return;\n }\n\n // Focus and activate new tab\n if (newIndex !== currentIndex) {\n tabs[newIndex].focus();\n this.activateTab(container, tabs[newIndex], allTabs, allPanes);\n }\n },\n\n /**\n * Programmatically show a tab\n * @param {string|HTMLElement} tab - Tab identifier or element\n */\n show: function(tab) {\n let tabElement;\n\n if (typeof tab === 'string') {\n tabElement = document.querySelector(`[data-tab=\"${tab}\"], [href=\"#${tab}\"]`);\n } else {\n tabElement = tab;\n }\n\n if (!tabElement) return;\n\n const container = tabElement.closest('.vd-tabs, [data-tabs]');\n if (!container) return;\n\n const allTabs = container.querySelectorAll('.vd-tab-link, [data-tab]');\n const allPanes = container.querySelectorAll('.vd-tab-pane, [data-tab-pane]');\n\n this.activateTab(container, tabElement, allTabs, allPanes);\n },\n\n /**\n * Destroy a tabs instance and clean up event listeners\n * @param {HTMLElement} container - Tabs container\n */\n destroy: function(container) {\n const instance = this.instances.get(container);\n if (!instance) return;\n\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(container);\n },\n\n /**\n * Destroy all tabs instances\n */\n destroyAll: function() {\n this.instances.forEach((instance, container) => {\n this.destroy(container);\n });\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tabs', Tabs);\n }\n\n})();\n", "/**\n * Vanduo Framework - Theme Customizer\n * A comprehensive theme customization component for the navbar\n * Handles primary color, neutral color, radius, font, and color mode\n */\n\n(function () {\n 'use strict';\n\n const ThemeCustomizer = {\n // Storage keys\n STORAGE_KEYS: {\n PRIMARY: 'vanduo-primary-color',\n NEUTRAL: 'vanduo-neutral-color',\n RADIUS: 'vanduo-radius',\n FONT: 'vanduo-font-preference',\n THEME: 'vanduo-theme-preference'\n },\n\n // Default values\n DEFAULTS: {\n PRIMARY_LIGHT: 'black',\n PRIMARY_DARK: 'amber',\n NEUTRAL: 'neutral',\n RADIUS: '0.5',\n FONT: 'ubuntu',\n THEME: 'system'\n },\n\n // Primary color definitions (Open Color based)\n PRIMARY_COLORS: {\n 'black': { name: 'Black', color: '#000000' },\n 'red': { name: 'Red', color: '#fa5252' },\n 'orange': { name: 'Orange', color: '#fd7e14' },\n 'amber': { name: 'Amber', color: '#f59f00' },\n 'yellow': { name: 'Yellow', color: '#fcc419' },\n 'lime': { name: 'Lime', color: '#82c91e' },\n 'green': { name: 'Green', color: '#40c057' },\n 'emerald': { name: 'Emerald', color: '#20c997' },\n 'teal': { name: 'Teal', color: '#12b886' },\n 'cyan': { name: 'Cyan', color: '#22b8cf' },\n 'sky': { name: 'Sky', color: '#3bc9db' },\n 'blue': { name: 'Blue', color: '#228be6' },\n 'indigo': { name: 'Indigo', color: '#4c6ef5' },\n 'violet': { name: 'Violet', color: '#7950f2' },\n 'purple': { name: 'Purple', color: '#be4bdb' },\n 'fuchsia': { name: 'Fuchsia', color: '#f06595' },\n 'pink': { name: 'Pink', color: '#e64980' },\n 'rose': { name: 'Rose', color: '#ff8787' }\n },\n\n // Neutral color definitions\n NEUTRAL_COLORS: {\n 'slate': { name: 'Slate', color: '#64748b' },\n 'gray': { name: 'Gray', color: '#6b7280' },\n 'zinc': { name: 'Zinc', color: '#71717a' },\n 'neutral': { name: 'Neutral', color: '#737373' },\n 'stone': { name: 'Stone', color: '#78716c' }\n },\n\n // Radius options\n RADIUS_OPTIONS: ['0', '0.125', '0.25', '0.375', '0.5'],\n\n // Font options\n FONT_OPTIONS: {\n 'jetbrains-mono': { name: 'JetBrains Mono', family: \"'JetBrains Mono', monospace\" },\n 'inter': { name: 'Inter', family: \"'Inter', sans-serif\" },\n 'source-sans': { name: 'Source Sans 3', family: \"'Source Sans 3', sans-serif\" },\n 'fira-sans': { name: 'Fira Sans', family: \"'Fira Sans', sans-serif\" },\n 'ibm-plex': { name: 'IBM Plex Sans', family: \"'IBM Plex Sans', sans-serif\" },\n 'system': { name: 'System Default', family: null },\n // Google Fonts Collection\n 'ubuntu': { name: 'Ubuntu', family: \"'Ubuntu', sans-serif\" },\n 'open-sans': { name: 'Open Sans', family: \"'Open Sans', sans-serif\" },\n 'rubik': { name: 'Rubik', family: \"'Rubik', sans-serif\" },\n 'titillium-web': { name: 'Titillium Web', family: \"'Titillium Web', sans-serif\" }\n },\n\n // Theme mode options\n THEME_MODES: ['system', 'dark', 'light'],\n\n // State\n state: {\n primary: null,\n neutral: null,\n radius: null,\n font: null,\n theme: null,\n isOpen: false\n },\n\n isInitialized: false,\n _cleanup: [],\n\n // DOM references\n elements: {\n customizer: null,\n trigger: null,\n panel: null,\n overlay: null\n },\n\n /**\n * Initialize the Theme Customizer\n */\n init: function () {\n if (this.isInitialized) {\n this.bindExistingElements();\n this.bindPanelEvents();\n this.updateUI();\n return;\n }\n\n this.isInitialized = true;\n this._cleanup = [];\n\n this.loadPreferences();\n this.applyAllPreferences();\n this.bindExistingElements();\n this.bindEvents();\n\n console.log('Vanduo Theme Customizer initialized');\n },\n\n addListener: function (target, event, handler, options) {\n if (!target) return;\n target.addEventListener(event, handler, options);\n this._cleanup.push(() => target.removeEventListener(event, handler, options));\n },\n\n /**\n * Get default primary color based on theme\n */\n getDefaultPrimary: function (theme) {\n if (theme === 'system') {\n if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {\n return this.DEFAULTS.PRIMARY_DARK;\n }\n return this.DEFAULTS.PRIMARY_LIGHT;\n }\n return theme === 'dark' ? this.DEFAULTS.PRIMARY_DARK : this.DEFAULTS.PRIMARY_LIGHT;\n },\n\n /**\n * Load preferences from localStorage\n */\n loadPreferences: function () {\n this.state.theme = this.getStorageValue(this.STORAGE_KEYS.THEME, this.DEFAULTS.THEME);\n this.state.primary = this.getStorageValue(this.STORAGE_KEYS.PRIMARY, this.getDefaultPrimary(this.state.theme));\n this._normalizeDefaultPrimaryIfStaleWithStoredTheme();\n this.state.neutral = this.getStorageValue(this.STORAGE_KEYS.NEUTRAL, this.DEFAULTS.NEUTRAL);\n this.state.radius = this.getStorageValue(this.STORAGE_KEYS.RADIUS, this.DEFAULTS.RADIUS);\n this.state.font = this.getStorageValue(this.STORAGE_KEYS.FONT, this.DEFAULTS.FONT);\n },\n\n /**\n * Save a preference to localStorage\n */\n savePreference: function (key, value) {\n this.setStorageValue(key, value);\n },\n\n /**\n * Apply all preferences\n */\n applyAllPreferences: function () {\n this.applyPrimary(this.state.primary);\n this.applyNeutral(this.state.neutral);\n this.applyRadius(this.state.radius);\n this.applyFont(this.state.font);\n this.applyTheme(this.state.theme);\n },\n\n /**\n * Apply primary color\n */\n applyPrimary: function (colorKey) {\n if (!this.PRIMARY_COLORS[colorKey]) {\n colorKey = this.getDefaultPrimary(this.state.theme);\n }\n\n this.state.primary = colorKey;\n document.documentElement.setAttribute('data-primary', colorKey);\n this.savePreference(this.STORAGE_KEYS.PRIMARY, colorKey);\n\n this.dispatchEvent('primary-change', { color: colorKey });\n },\n\n /**\n * Apply neutral color\n */\n applyNeutral: function (neutralKey) {\n if (!this.NEUTRAL_COLORS[neutralKey]) {\n neutralKey = this.DEFAULTS.NEUTRAL;\n }\n\n this.state.neutral = neutralKey;\n document.documentElement.setAttribute('data-neutral', neutralKey);\n this.savePreference(this.STORAGE_KEYS.NEUTRAL, neutralKey);\n\n this.dispatchEvent('neutral-change', { neutral: neutralKey });\n },\n\n /**\n * Apply border radius\n */\n applyRadius: function (radius) {\n if (!this.RADIUS_OPTIONS.includes(radius)) {\n radius = this.DEFAULTS.RADIUS;\n }\n\n this.state.radius = radius;\n document.documentElement.setAttribute('data-radius', radius);\n document.documentElement.style.setProperty('--radius-scale', radius);\n this.savePreference(this.STORAGE_KEYS.RADIUS, radius);\n\n this.dispatchEvent('radius-change', { radius: radius });\n },\n\n /**\n * Apply font family\n */\n applyFont: function (fontKey) {\n if (!this.FONT_OPTIONS[fontKey]) {\n fontKey = this.DEFAULTS.FONT;\n }\n\n this.state.font = fontKey;\n\n if (fontKey === 'system') {\n document.documentElement.removeAttribute('data-font');\n } else {\n document.documentElement.setAttribute('data-font', fontKey);\n }\n\n this.savePreference(this.STORAGE_KEYS.FONT, fontKey);\n\n // Also update the existing FontSwitcher if available\n if (window.FontSwitcher && window.FontSwitcher.setPreference) {\n window.FontSwitcher.state.preference = fontKey;\n window.FontSwitcher.applyFont();\n }\n\n this.dispatchEvent('font-change', { font: fontKey });\n },\n\n /**\n * Apply theme mode\n */\n applyTheme: function (mode) {\n if (!this.THEME_MODES.includes(mode)) {\n mode = this.DEFAULTS.THEME;\n }\n\n // Prevent circular updates\n this._isApplying = true;\n\n // Re-align black/amber when they don't match the effective primary for the target mode.\n // Covers theme toggles and stale localStorage (e.g. amber saved while theme is light).\n if (this.isUsingDefaultPrimary()) {\n const expected = this.getDefaultPrimary(mode);\n if (this.state.primary !== expected) {\n this.applyPrimary(expected);\n }\n }\n\n this.state.theme = mode;\n\n if (mode === 'system') {\n document.documentElement.removeAttribute('data-theme');\n } else {\n document.documentElement.setAttribute('data-theme', mode);\n }\n\n this.savePreference(this.STORAGE_KEYS.THEME, mode);\n\n // Also update the existing ThemeSwitcher if available\n // Only update state, don't call setPreference to avoid circular calls\n if (window.Vanduo && window.Vanduo.components.themeSwitcher) {\n const themeSwitcher = window.Vanduo.components.themeSwitcher;\n if (themeSwitcher.state && themeSwitcher.state.preference !== mode) {\n themeSwitcher.state.preference = mode;\n if (typeof themeSwitcher.setStorageValue === 'function') {\n themeSwitcher.setStorageValue(themeSwitcher.STORAGE_KEY, mode);\n }\n if (typeof themeSwitcher.updateUI === 'function') {\n themeSwitcher.updateUI();\n }\n }\n }\n\n this._isApplying = false;\n this.dispatchEvent('mode-change', { mode: mode });\n },\n\n /**\n * Dispatch custom event\n */\n dispatchEvent: function (type, detail) {\n const event = new CustomEvent('theme:' + type, {\n bubbles: true,\n detail: detail\n });\n document.dispatchEvent(event);\n\n // Also dispatch a general change event\n const changeEvent = new CustomEvent('theme:change', {\n bubbles: true,\n detail: {\n type: type,\n value: detail[Object.keys(detail)[0]],\n state: { ...this.state }\n }\n });\n document.dispatchEvent(changeEvent);\n },\n\n /**\n * Bind to existing DOM elements or create them dynamically\n */\n bindExistingElements: function () {\n // First check for existing full structure\n this.elements.customizer = document.querySelector('.vd-theme-customizer');\n\n if (this.elements.customizer) {\n this.elements.trigger = this.elements.customizer.querySelector('.vd-theme-customizer-trigger');\n this.elements.panel = this.elements.customizer.querySelector('.vd-theme-customizer-panel');\n this.elements.overlay = this.elements.customizer.querySelector('.vd-theme-customizer-overlay');\n } else {\n // Look for standalone trigger button with data attribute\n const standaloneTrigger = document.querySelector('[data-theme-customizer-trigger]');\n if (standaloneTrigger) {\n this.createDynamicPanel(standaloneTrigger);\n }\n }\n\n // Update UI to reflect current state\n this.updateUI();\n },\n\n /**\n * Create the panel dynamically when only a trigger button exists\n */\n createDynamicPanel: function (triggerButton) {\n // Create wrapper\n const wrapper = document.createElement('div');\n wrapper.className = 'vd-theme-customizer';\n\n // Move trigger into wrapper or create reference\n this.elements.trigger = triggerButton;\n\n // Create overlay\n const overlay = document.createElement('div');\n overlay.className = 'vd-theme-customizer-overlay';\n\n // Create panel\n const panel = document.createElement('div');\n panel.className = 'vd-theme-customizer-panel';\n panel.innerHTML = this.getPanelHTML();\n\n // Append to body\n document.body.appendChild(overlay);\n document.body.appendChild(panel);\n\n // Store references\n this.elements.panel = panel;\n this.elements.overlay = overlay;\n this.elements.customizer = { contains: (el) => panel.contains(el) || triggerButton.contains(el) };\n\n // Position panel below trigger on desktop\n this.positionPanel();\n\n // Bind panel events after creation\n this.bindPanelEvents();\n\n // Reposition on resize\n this.addListener(window, 'resize', () => this.positionPanel());\n },\n\n /**\n * Position the panel below the trigger button on desktop\n */\n positionPanel: function () {\n if (!this.elements.panel || !this.elements.trigger) return;\n\n const isMobile = window.innerWidth < 768;\n\n if (isMobile) {\n // Mobile: full height slide-in from right - let CSS handle it\n this.elements.panel.style.top = '';\n this.elements.panel.style.right = '';\n this.elements.panel.style.left = '';\n this.elements.panel.style.height = '';\n this.elements.panel.style.maxHeight = '';\n } else {\n // Desktop: position directly below the trigger button, aligned to its right edge\n const triggerRect = this.elements.trigger.getBoundingClientRect();\n const panelWidth = 320; // --customizer-width\n const panelTop = triggerRect.bottom + 8;\n\n // Calculate right position: align panel's right edge with trigger's right edge\n // But ensure it doesn't overflow the viewport\n const viewportWidth = window.innerWidth;\n let panelRight = viewportWidth - triggerRect.right;\n\n // Ensure panel doesn't overflow left side of viewport\n const panelLeft = viewportWidth - panelRight - panelWidth;\n if (panelLeft < 8) {\n panelRight = viewportWidth - panelWidth - 8;\n }\n\n this.elements.panel.style.top = panelTop + 'px';\n this.elements.panel.style.right = panelRight + 'px';\n this.elements.panel.style.left = '';\n this.elements.panel.style.height = 'auto';\n this.elements.panel.style.maxHeight = 'calc(100vh - ' + panelTop + 'px)';\n }\n },\n\n /**\n * Bind events specifically for the panel (called after dynamic creation)\n */\n bindPanelEvents: function () {\n if (!this.elements.panel) return;\n if (this.elements.panel.getAttribute('data-customizer-initialized') === 'true') return;\n\n this.elements.panel.setAttribute('data-customizer-initialized', 'true');\n\n // Primary color swatches\n this.elements.panel.querySelectorAll('[data-color]').forEach(swatch => {\n this.addListener(swatch, 'click', () => {\n this.applyPrimary(swatch.dataset.color);\n this.updateUI();\n });\n });\n\n // Neutral color swatches\n this.elements.panel.querySelectorAll('[data-neutral]').forEach(swatch => {\n this.addListener(swatch, 'click', () => {\n this.applyNeutral(swatch.dataset.neutral);\n this.updateUI();\n });\n });\n\n // Radius buttons\n this.elements.panel.querySelectorAll('[data-radius]').forEach(btn => {\n this.addListener(btn, 'click', () => {\n this.applyRadius(btn.dataset.radius);\n this.updateUI();\n });\n });\n\n // Font selector\n const fontSelect = this.elements.panel.querySelector('[data-customizer-font]');\n if (fontSelect) {\n this.addListener(fontSelect, 'change', (e) => {\n this.applyFont(e.target.value);\n this.updateUI();\n });\n }\n\n // Reset button\n const resetBtn = this.elements.panel.querySelector('.customizer-reset');\n if (resetBtn) {\n this.addListener(resetBtn, 'click', () => {\n this.reset();\n });\n }\n\n // Mobile close button\n const closeBtn = this.elements.panel.querySelector('.customizer-mobile-close');\n if (closeBtn) {\n this.addListener(closeBtn, 'click', () => {\n this.close();\n });\n }\n\n // Overlay click\n if (this.elements.overlay) {\n this.addListener(this.elements.overlay, 'click', () => {\n this.close();\n });\n }\n },\n\n /**\n * Generate panel HTML\n */\n getPanelHTML: function () {\n const esc = typeof escapeHtml === 'function'\n ? escapeHtml\n : function (text) {\n const div = document.createElement('div');\n div.textContent = String(text ?? '');\n return div.innerHTML;\n };\n const safeColor = function (value) {\n const normalized = String(value ?? '').trim();\n // Allow common color formats used by palette values.\n if (/^(#[0-9a-fA-F]{3,8}|rgb[a]?\\([^)]{1,60}\\)|hsl[a]?\\([^)]{1,60}\\)|var\\(--[a-zA-Z0-9_-]{1,40}\\))$/.test(normalized)) {\n return normalized;\n }\n return '#000000';\n };\n\n // Generate primary color swatches\n let primarySwatches = '';\n for (const [key, value] of Object.entries(this.PRIMARY_COLORS)) {\n primarySwatches += ``;\n }\n\n // Generate neutral color swatches\n let neutralSwatches = '';\n for (const [key, value] of Object.entries(this.NEUTRAL_COLORS)) {\n neutralSwatches += ``;\n }\n\n // Generate radius buttons\n let radiusButtons = '';\n this.RADIUS_OPTIONS.forEach(r => {\n radiusButtons += ``;\n });\n\n // Generate font options\n let fontOptions = '';\n for (const [key, value] of Object.entries(this.FONT_OPTIONS)) {\n fontOptions += ``;\n }\n\n return `\n
    \n

    Customize Theme

    \n \n
    \n
    \n\n
    \n \n
    \n ${primarySwatches}\n
    \n
    \n
    \n \n
    \n ${neutralSwatches}\n
    \n
    \n
    \n \n
    \n ${radiusButtons}\n
    \n
    \n
    \n \n \n
    \n
    \n
    \n \n
    \n `;\n },\n\n /**\n * Bind event listeners\n */\n /**\n * Check whether the current primary color is one of the auto-defaults\n * (i.e. the user hasn't explicitly picked a non-default color).\n */\n isUsingDefaultPrimary: function () {\n return this.state.primary === this.DEFAULTS.PRIMARY_LIGHT ||\n this.state.primary === this.DEFAULTS.PRIMARY_DARK;\n },\n\n /**\n * When primary is still one of the auto-default palette keys (black/amber) but\n * localStorage was written under a different theme (or OS changed in system mode),\n * align in-memory state before applyAllPreferences runs \u2014 avoids amber+light / black+dark drift.\n */\n _normalizeDefaultPrimaryIfStaleWithStoredTheme: function () {\n if (!this.isUsingDefaultPrimary()) {\n return;\n }\n const expected = this.getDefaultPrimary(this.state.theme);\n if (this.state.primary !== expected) {\n this.state.primary = expected;\n }\n },\n\n bindEvents: function () {\n // Trigger click - bind to any trigger button\n if (this.elements.trigger) {\n this.addListener(this.elements.trigger, 'click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggle();\n });\n }\n\n this.bindPanelEvents();\n\n // Listen for OS dark/light changes so we can swap the default primary\n if (window.matchMedia) {\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const handler = () => {\n if (this.state.theme === 'system' && this.isUsingDefaultPrimary()) {\n const newDefault = this.getDefaultPrimary('system');\n if (newDefault !== this.state.primary) {\n this.applyPrimary(newDefault);\n this.updateUI();\n }\n }\n };\n mq.addEventListener('change', handler);\n this._cleanup.push(() => mq.removeEventListener('change', handler));\n }\n\n // Close on outside click\n this.addListener(document, 'click', (e) => {\n if (this.state.isOpen && this.elements.customizer && !this.elements.customizer.contains(e.target)) {\n this.close();\n }\n });\n\n // Close on Escape key\n this.addListener(document, 'keydown', (e) => {\n if (e.key === 'Escape' && this.state.isOpen) {\n this.close();\n }\n });\n },\n\n /**\n * Toggle panel open/close\n */\n toggle: function () {\n if (this.state.isOpen) {\n this.close();\n } else {\n this.open();\n }\n },\n\n /**\n * Open the panel\n */\n open: function () {\n this.state.isOpen = true;\n\n // Ensure panel is positioned correctly before opening\n this.positionPanel();\n\n if (this.elements.panel) {\n this.elements.panel.classList.add('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'true');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.add('is-active');\n }\n\n this.dispatchEvent('panel-open', { isOpen: true });\n },\n\n /**\n * Close the panel\n */\n close: function () {\n this.state.isOpen = false;\n\n if (this.elements.panel) {\n this.elements.panel.classList.remove('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'false');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.remove('is-active');\n }\n\n this.dispatchEvent('panel-close', { isOpen: false });\n },\n\n /**\n * Update UI to reflect current state\n */\n updateUI: function () {\n if (!this.elements.panel) return;\n\n // Update primary color swatches\n this.elements.panel.querySelectorAll('[data-color]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.color === this.state.primary);\n });\n\n // Update neutral color swatches\n this.elements.panel.querySelectorAll('[data-neutral]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.neutral === this.state.neutral);\n });\n\n // Update radius buttons\n this.elements.panel.querySelectorAll('[data-radius]').forEach(btn => {\n btn.classList.toggle('is-active', btn.dataset.radius === this.state.radius);\n });\n\n // Update font selector\n const fontSelect = this.elements.panel.querySelector('[data-customizer-font]');\n if (fontSelect) {\n fontSelect.value = this.state.font;\n }\n\n },\n\n /**\n * Reset all preferences to defaults\n */\n reset: function () {\n this.applyTheme(this.DEFAULTS.THEME);\n this.applyPrimary(this.getDefaultPrimary(this.DEFAULTS.THEME));\n this.applyNeutral(this.DEFAULTS.NEUTRAL);\n this.applyRadius(this.DEFAULTS.RADIUS);\n this.applyFont(this.DEFAULTS.FONT);\n this.updateUI();\n\n this.dispatchEvent('reset', { state: { ...this.state } });\n },\n\n /**\n * Get current state\n */\n getState: function () {\n return { ...this.state };\n },\n\n /**\n * Programmatically set preferences\n */\n setPreferences: function (prefs) {\n if (prefs.primary) this.applyPrimary(prefs.primary);\n if (prefs.neutral) this.applyNeutral(prefs.neutral);\n if (prefs.radius) this.applyRadius(prefs.radius);\n if (prefs.font) this.applyFont(prefs.font);\n if (prefs.theme) this.applyTheme(prefs.theme);\n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n destroyAll: function () {\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n\n if (this.elements.panel) {\n this.elements.panel.removeAttribute('data-customizer-initialized');\n }\n\n this.close();\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeCustomizer', ThemeCustomizer);\n }\n\n // Expose globally for convenience\n window.ThemeCustomizer = ThemeCustomizer;\n})();\n", "/**\n * Vanduo Framework - Theme Switcher\n * Handles light/dark/system theme toggling and persistence\n */\n\n(function () {\n 'use strict';\n\n const ThemeSwitcher = {\n isInitialized: false,\n _mediaQuery: null,\n _onMediaChange: null,\n\n init: function () {\n this.STORAGE_KEY = 'vanduo-theme-preference';\n this.state = {\n preference: this.getPreference() // 'light', 'dark', or 'system'\n };\n\n if (this.isInitialized) {\n this.applyTheme();\n this.renderUI();\n this.updateUI();\n return;\n }\n\n this.isInitialized = true;\n\n this.applyTheme();\n this.listenForSystemChanges();\n this.renderUI();\n\n console.log('Vanduo Theme Switcher initialized');\n },\n\n getPreference: function () {\n return this.getStorageValue(this.STORAGE_KEY, 'system');\n },\n\n setPreference: function (pref) {\n this.state.preference = pref;\n this.setStorageValue(this.STORAGE_KEY, pref);\n this.applyTheme();\n \n // Coordinate with ThemeCustomizer for primary color swap if available\n // Check _isApplying flag to prevent circular updates\n if (window.ThemeCustomizer && window.ThemeCustomizer.applyTheme && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme(pref);\n }\n \n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n applyTheme: function () {\n const pref = this.state.preference;\n\n if (pref === 'system') {\n // When in system mode, we remove the data attribute to let the media query take over\n // or we can explicitly set it. Explicitly setting it ensures consistency if we rely on [data-theme]\n // But if we rely on @media in CSS, we might want to remove attributes.\n // However, our CSS strategy uses :root:not([data-theme=\"light\"]) inside media query for system dark fallback\n // which is a bit complex.\n\n // Simpler approach: \n // If preference is system, REMOVE data-theme attribute. Let CSS media queries handle it.\n document.documentElement.removeAttribute('data-theme');\n } else {\n document.documentElement.setAttribute('data-theme', pref);\n }\n },\n\n listenForSystemChanges: function () {\n if (this._mediaQuery && this._onMediaChange) {\n return;\n }\n\n this._mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n this._onMediaChange = _e => {\n if (this.state.preference === 'system') {\n // Re-apply (effectively just to ensure consistency, though removing attribute usually suffices)\n this.applyTheme();\n // Keep default primary (black/amber) aligned when OS scheme changes while in system mode\n if (window.ThemeCustomizer && typeof window.ThemeCustomizer.applyTheme === 'function' && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme('system');\n }\n }\n };\n this._mediaQuery.addEventListener('change', this._onMediaChange);\n },\n\n // Helper to facilitate UI creation if needed, though often UI is in HTML\n renderUI: function () {\n // Look for any uninitialized theme toggles\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.getAttribute('data-theme-initialized') === 'true') {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n }\n return;\n }\n\n // Simplified UI Binding - assumes a select or a button cycle\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n const onChange = (e) => {\n this.setPreference(e.target.value);\n };\n toggle.addEventListener('change', onChange);\n toggle._themeToggleHandler = onChange;\n } else {\n // Button implementation (cycle)\n const onClick = () => {\n const modes = ['system', 'light', 'dark'];\n const nextIndex = (modes.indexOf(this.state.preference) + 1) % modes.length;\n this.setPreference(modes[nextIndex]);\n };\n toggle.addEventListener('click', onClick);\n toggle._themeToggleHandler = onClick;\n }\n // Mark as initialized\n toggle.setAttribute('data-theme-initialized', 'true');\n });\n },\n\n updateUI: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n } else {\n // Update button text/icon if needed\n // e.g. toggle.textContent = this.state.preference;\n // For now, assume the user handles visual state or generic text\n\n // If there is an icon or text span inside, update it\n const span = toggle.querySelector('.theme-current-label');\n if (span) {\n span.textContent = this.state.preference.charAt(0).toUpperCase() + this.state.preference.slice(1);\n }\n }\n });\n },\n\n destroyAll: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"][data-theme-initialized=\"true\"]');\n toggles.forEach(toggle => {\n if (toggle._themeToggleHandler) {\n const eventName = toggle.tagName === 'SELECT' ? 'change' : 'click';\n toggle.removeEventListener(eventName, toggle._themeToggleHandler);\n delete toggle._themeToggleHandler;\n }\n toggle.removeAttribute('data-theme-initialized');\n });\n\n if (this._mediaQuery && this._onMediaChange) {\n this._mediaQuery.removeEventListener('change', this._onMediaChange);\n }\n\n this._mediaQuery = null;\n this._onMediaChange = null;\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeSwitcher', ThemeSwitcher);\n }\n})();\n", "/**\n * Vanduo Framework - Toast Component\n * Popup notifications for user feedback\n */\n\n(function() {\n 'use strict';\n\n /**\n * Toast Component\n */\n const Toast = {\n // Default options\n defaults: {\n position: 'top-right',\n duration: 5000,\n dismissible: true,\n showProgress: true,\n pauseOnHover: true\n },\n\n // Container cache\n containers: {},\n\n /**\n * Get or create a toast container for a position\n * @param {string} position - Container position\n * @returns {HTMLElement} Toast container element\n */\n getContainer: function(position) {\n if (this.containers[position]) {\n return this.containers[position];\n }\n\n const container = document.createElement('div');\n container.className = `vd-toast-container vd-toast-container-${position}`;\n container.setAttribute('role', 'status');\n container.setAttribute('aria-live', 'polite');\n container.setAttribute('aria-atomic', 'false');\n document.body.appendChild(container);\n this.containers[position] = container;\n\n return container;\n },\n\n /**\n * Show a toast notification\n * @param {Object|string} options - Toast options or message string\n * @param {string} [type] - Toast type (success, error, warning, info)\n * @param {number} [duration] - Auto-dismiss duration in ms\n * @returns {HTMLElement} Toast element\n */\n show: function(options, type, duration) {\n // Support simple API: Toast.show('Message', 'success', 3000)\n if (typeof options === 'string') {\n options = {\n message: options,\n type: type,\n duration: duration\n };\n }\n\n const config = Object.assign({}, this.defaults, options);\n const container = this.getContainer(config.position);\n\n // Create toast element\n const toast = document.createElement('div');\n toast.className = 'vd-toast';\n\n if (config.type) {\n toast.classList.add(`vd-toast-${config.type}`);\n }\n\n if (config.solid) {\n toast.classList.add('vd-toast-solid');\n }\n\n if (config.showProgress && config.duration > 0) {\n toast.classList.add('vd-toast-with-progress');\n }\n\n // Build toast content\n let html = '';\n\n // Icon (sanitize custom icons, default icons are trusted SVG)\n if (config.icon) {\n const safeIcon = typeof sanitizeHtml === 'function' ? sanitizeHtml(config.icon) : escapeHtml(config.icon);\n html += `${safeIcon}`;\n } else if (config.type) {\n html += `${this.getDefaultIcon(config.type)}`;\n }\n\n // Local escape helper \u2014 guarantees HTML-safe output even if the\n // global escapeHtml utility is not loaded in the current bundle.\n const _esc = typeof escapeHtml === 'function'\n ? escapeHtml\n : function (s) {\n const d = document.createElement('div');\n d.appendChild(document.createTextNode(s));\n return d.innerHTML;\n };\n\n // Content (escape text to prevent injection)\n html += '
    ';\n if (config.title) {\n html += `
    ${_esc(String(config.title))}
    `;\n }\n if (config.message) {\n html += `
    ${_esc(String(config.message))}
    `;\n }\n html += '
    ';\n\n // Close button\n if (config.dismissible) {\n html += '';\n }\n\n // Progress bar\n if (config.showProgress && config.duration > 0) {\n const safeDuration = parseInt(config.duration, 10) || 0;\n html += `
    `;\n }\n\n toast.innerHTML = html;\n\n // Add to container\n container.appendChild(toast);\n\n toast._toastCleanup = [];\n\n // Set up close button handler\n if (config.dismissible) {\n const closeBtn = toast.querySelector('.vd-toast-close');\n const onClose = () => {\n this.dismiss(toast);\n };\n closeBtn.addEventListener('click', onClose);\n toast._toastCleanup.push(() => closeBtn.removeEventListener('click', onClose));\n }\n\n // Pause on hover\n let timeoutId = null;\n let remainingTime = config.duration;\n let startTime = null;\n\n const startTimer = () => {\n if (config.duration > 0) {\n startTime = Date.now();\n timeoutId = setTimeout(() => {\n this.dismiss(toast);\n }, remainingTime);\n toast._toastTimeoutId = timeoutId;\n\n // Resume progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'running';\n }\n }\n };\n\n const pauseTimer = () => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n timeoutId = null;\n toast._toastTimeoutId = null;\n remainingTime -= Date.now() - startTime;\n\n // Pause progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'paused';\n }\n }\n };\n\n if (config.pauseOnHover) {\n toast.addEventListener('mouseenter', pauseTimer);\n toast.addEventListener('mouseleave', startTimer);\n toast._toastCleanup.push(\n () => toast.removeEventListener('mouseenter', pauseTimer),\n () => toast.removeEventListener('mouseleave', startTimer)\n );\n }\n\n // Trigger enter animation\n requestAnimationFrame(() => {\n toast.classList.add('is-visible');\n startTimer();\n });\n\n // Store config on element for later access\n toast._toastConfig = config;\n\n // Dispatch show event\n const showEvent = new CustomEvent('toast:show', {\n bubbles: true,\n detail: { toast, config }\n });\n toast.dispatchEvent(showEvent);\n\n return toast;\n },\n\n /**\n * Dismiss a toast\n * @param {HTMLElement} toast - Toast element to dismiss\n */\n dismiss: function(toast) {\n if (!toast || toast.classList.contains('is-exiting')) return;\n\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n toast._toastTimeoutId = null;\n }\n\n toast.classList.remove('is-visible');\n toast.classList.add('is-exiting');\n\n // Dispatch dismiss event\n const dismissEvent = new CustomEvent('toast:dismiss', {\n bubbles: true,\n detail: { toast }\n });\n toast.dispatchEvent(dismissEvent);\n\n // Remove after animation\n const handleTransitionEnd = () => {\n toast.removeEventListener('transitionend', handleTransitionEnd);\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n };\n\n toast.addEventListener('transitionend', handleTransitionEnd);\n\n // Fallback removal if transition doesn't fire\n setTimeout(() => {\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n }, 400);\n },\n\n /**\n * Destroy all toasts and containers\n */\n destroyAll: function() {\n Object.keys(this.containers).forEach(position => {\n const container = this.containers[position];\n if (!container) return;\n\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => {\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n }\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n });\n\n if (container.parentElement) {\n container.parentElement.removeChild(container);\n }\n });\n\n this.containers = {};\n },\n\n /**\n * Dismiss all toasts\n * @param {string} [position] - Optional position to clear (clears all if not specified)\n */\n dismissAll: function(position) {\n if (position && this.containers[position]) {\n const toasts = this.containers[position].querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n } else {\n Object.values(this.containers).forEach(container => {\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n });\n }\n },\n\n /**\n * Get default icon SVG for a type\n * @param {string} type - Toast type\n * @returns {string} SVG icon markup\n */\n getDefaultIcon: function(type) {\n const icons = {\n success: '',\n error: '',\n warning: '',\n info: ''\n };\n\n return icons[type] || '';\n },\n\n /**\n * Convenience methods for common toast types\n */\n success: function(message, options) {\n return this.show(Object.assign({ message, type: 'success' }, options));\n },\n\n error: function(message, options) {\n return this.show(Object.assign({ message, type: 'error' }, options));\n },\n\n warning: function(message, options) {\n return this.show(Object.assign({ message, type: 'warning' }, options));\n },\n\n info: function(message, options) {\n return this.show(Object.assign({ message, type: 'info' }, options));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('toast', Toast);\n }\n\n // Also expose globally for convenience\n window.Toast = Toast;\n\n})();\n", "/**\n * Vanduo Framework - Tooltips Component\n * JavaScript functionality for tooltips\n */\n\n(function () {\n 'use strict';\n\n /**\n * Tooltips Component\n */\n const Tooltips = {\n tooltips: new Map(),\n delayTimers: new Map(),\n\n /**\n * Sanitize HTML \u2014 delegates to shared sanitizeHtml from helpers.js\n * @param {string} input\n * @returns {string} sanitized HTML\n */\n sanitizeHtml: function (input) {\n if (typeof sanitizeHtml === 'function') {\n return sanitizeHtml(input);\n }\n // Fallback: strip all HTML\n const div = document.createElement('div');\n div.textContent = input || '';\n return div.innerHTML;\n },\n\n /**\n * Initialize tooltips\n */\n init: function () {\n const elements = document.querySelectorAll('[data-tooltip], [data-tooltip-html]');\n\n elements.forEach(element => {\n if (this.tooltips.has(element)) {\n return;\n }\n this.initTooltip(element);\n });\n },\n\n /**\n * Initialize a single tooltip\n * @param {HTMLElement} element - Element with tooltip\n */\n initTooltip: function (element) {\n const tooltip = this.createTooltip(element);\n const cleanupFunctions = [];\n\n // Show on hover/focus\n const enterHandler = () => { this.showTooltip(element, tooltip); };\n const leaveHandler = () => { this.hideTooltip(element, tooltip); };\n const focusHandler = () => { this.showTooltip(element, tooltip); };\n const blurHandler = () => { this.hideTooltip(element, tooltip); };\n\n element.addEventListener('mouseenter', enterHandler);\n element.addEventListener('mouseleave', leaveHandler);\n element.addEventListener('focus', focusHandler);\n element.addEventListener('blur', blurHandler);\n\n cleanupFunctions.push(\n () => element.removeEventListener('mouseenter', enterHandler),\n () => element.removeEventListener('mouseleave', leaveHandler),\n () => element.removeEventListener('focus', focusHandler),\n () => element.removeEventListener('blur', blurHandler)\n );\n\n this.tooltips.set(element, { tooltip, cleanup: cleanupFunctions });\n },\n\n /**\n * Create tooltip element\n * @param {HTMLElement} element - Target element\n * @returns {HTMLElement} Tooltip element\n */\n createTooltip: function (element) {\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-tooltip';\n tooltip.setAttribute('role', 'tooltip');\n tooltip.setAttribute('aria-hidden', 'true');\n\n // Generate unique ID and link via aria-describedby\n const tooltipId = 'tooltip-' + Math.random().toString(36).substr(2, 9);\n tooltip.id = tooltipId;\n element.setAttribute('aria-describedby', tooltipId);\n\n // Get content\n const htmlContent = element.dataset.tooltipHtml;\n const textContent = element.dataset.tooltip;\n\n if (htmlContent) {\n tooltip.innerHTML = this.sanitizeHtml(htmlContent);\n tooltip.classList.add('vd-tooltip-html');\n } else if (textContent) {\n tooltip.textContent = textContent;\n }\n\n // Get placement\n const placement = element.dataset.tooltipPlacement || element.dataset.placement || 'top';\n tooltip.setAttribute('data-placement', placement);\n tooltip.classList.add(`vd-tooltip-${placement}`);\n\n // Get variant\n if (element.dataset.tooltipVariant) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipVariant}`);\n }\n\n // Get size\n if (element.dataset.tooltipSize) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipSize}`);\n }\n\n // Get delay\n const delay = parseInt(element.dataset.tooltipDelay) || 0;\n tooltip.dataset.delay = delay;\n\n document.body.appendChild(tooltip);\n\n return tooltip;\n },\n\n /**\n * Show tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n showTooltip: function (element, tooltip) {\n const delay = parseInt(tooltip.dataset.delay) || 0;\n\n if (delay > 0) {\n const timer = setTimeout(() => {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }, delay);\n this.delayTimers.set(element, timer);\n } else {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }\n },\n\n /**\n * Hide tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n hideTooltip: function (element, tooltip) {\n // Clear delay timer if exists\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n tooltip.classList.remove('is-visible');\n tooltip.setAttribute('aria-hidden', 'true');\n },\n\n /**\n * Position tooltip relative to element\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n positionTooltip: function (element, tooltip) {\n const placement = tooltip.dataset.placement || 'top';\n const rect = element.getBoundingClientRect();\n const tooltipRect = tooltip.getBoundingClientRect();\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;\n\n let top = 0;\n let left = 0;\n\n switch (placement) {\n case 'top':\n top = rect.top + scrollTop - tooltipRect.height - 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'bottom':\n top = rect.bottom + scrollTop + 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'left':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.left + scrollLeft - tooltipRect.width - 8;\n break;\n case 'right':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.right + scrollLeft + 8;\n break;\n }\n\n // Prevent overflow\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const padding = 8;\n\n if (left < padding) {\n left = padding;\n } else if (left + tooltipRect.width > viewportWidth - padding) {\n left = viewportWidth - tooltipRect.width - padding;\n }\n\n if (top < scrollTop + padding) {\n top = scrollTop + padding;\n } else if (top + tooltipRect.height > scrollTop + viewportHeight - padding) {\n top = scrollTop + viewportHeight - tooltipRect.height - padding;\n }\n\n // Use single style assignment with transform for better performance\n tooltip.style.cssText = `position: absolute; top: 0; left: 0; transform: translate(${left}px, ${top}px);`;\n },\n\n /**\n * Show tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n show: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.showTooltip(el, tooltip);\n }\n },\n\n /**\n * Hide tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n hide: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.hideTooltip(el, tooltip);\n }\n },\n\n /**\n * Update tooltip content\n * @param {HTMLElement|string} element - Target element or selector\n * @param {string} content - New content\n * @param {boolean} isHtml - Whether content is HTML\n */\n update: function (element, content, isHtml = false) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n if (isHtml) {\n tooltip.innerHTML = this.sanitizeHtml(content);\n tooltip.classList.add('vd-tooltip-html');\n } else {\n tooltip.textContent = content;\n tooltip.classList.remove('vd-tooltip-html');\n }\n }\n },\n\n /**\n * Destroy a tooltip instance and clean up\n * @param {HTMLElement} element - Element with tooltip\n */\n destroy: function (element) {\n const data = this.tooltips.get(element);\n if (!data) return;\n\n // Clear any pending timer\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n data.cleanup.forEach(fn => fn());\n\n // Remove tooltip element from DOM\n if (data.tooltip && data.tooltip.parentNode) {\n data.tooltip.parentNode.removeChild(data.tooltip);\n }\n\n this.tooltips.delete(element);\n },\n\n /**\n * Destroy all tooltip instances\n */\n destroyAll: function () {\n this.tooltips.forEach((data, element) => {\n this.destroy(element);\n });\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tooltips', Tooltips);\n }\n\n // Expose globally\n window.VanduoTooltips = Tooltips;\n\n})();\n", "/**\n * Vanduo Framework - Search Component\n * Client-side search functionality for content pages\n * \n * @example Basic usage (initialize with defaults)\n * // HTML:\n * //
    \n * // \n * //
    \n * //
    \n * \n * @example Custom configuration\n * var search = Search.create({\n * containerSelector: '.my-search',\n * contentSelector: 'article[id]',\n * titleSelector: 'h2, h3',\n * maxResults: 5,\n * onSelect: function(result) {\n * console.log('Selected:', result.title);\n * }\n * });\n * \n * @example With custom data source\n * var search = Search.create({\n * containerSelector: '.my-search',\n * data: [\n * { id: 'item1', title: 'First Item', content: 'Description...', category: 'Category A' },\n * { id: 'item2', title: 'Second Item', content: 'Description...', category: 'Category B' }\n * ]\n * });\n */\n\n(function() {\n 'use strict';\n\n /**\n * Default configuration\n */\n const DEFAULTS = {\n // Behavior\n minQueryLength: 2,\n maxResults: 10,\n debounceMs: 150,\n highlightTag: 'mark',\n keyboardShortcut: true, // Enable Cmd/Ctrl+K shortcut\n \n // Selectors (for DOM-based indexing)\n containerSelector: '.vd-doc-search',\n inputSelector: '.vd-doc-search-input',\n resultsSelector: '.vd-doc-search-results',\n contentSelector: '.doc-content section[id]',\n titleSelector: '.demo-title, h2, h3',\n navSelector: '.doc-nav-link',\n sectionSelector: '.doc-nav-section',\n \n // Content extraction\n excludeFromContent: 'pre, code, script, style',\n maxContentLength: 500,\n \n // Custom data source (alternative to DOM indexing)\n data: null,\n \n // Category icons mapping\n categoryIcons: {\n 'getting-started': 'ph-rocket-launch',\n 'core': 'ph-cube',\n 'components': 'ph-puzzle-piece',\n 'interactive': 'ph-cursor-click',\n 'data-display': 'ph-table',\n 'feedback': 'ph-bell',\n 'meta': 'ph-info',\n 'default': 'ph-file-text'\n },\n \n // Callbacks\n onSelect: null, // function(result) - called when result is selected\n onSearch: null, // function(query, results) - called after search\n onOpen: null, // function() - called when results open\n onClose: null, // function() - called when results close\n \n // Text customization\n emptyTitle: 'No results found',\n emptyText: 'Try different keywords or check spelling',\n placeholder: 'Search...'\n };\n\n /**\n * Search Component Factory\n * Creates a new search instance with the given configuration\n * \n * @param {Object} options - Configuration options\n * @returns {Object} Search instance\n */\n function createSearch(options) {\n const config = Object.assign({}, DEFAULTS, options || {});\n \n // Instance state\n const state = {\n initialized: false,\n index: [],\n results: [],\n activeIndex: -1,\n isOpen: false,\n query: '',\n container: null,\n input: null,\n resultsContainer: null,\n debounceTimer: null,\n boundHandlers: {}\n };\n\n function safeInvokeCallback(name, fn, ...args) {\n try {\n fn(...args);\n } catch (error) {\n console.warn('[Vanduo Search] Callback error in \"' + name + '\":', error);\n }\n }\n\n function setResultsHtml(html) {\n if (!state.resultsContainer) return;\n try {\n state.resultsContainer.innerHTML = html;\n } catch (error) {\n console.warn('[Vanduo Search] Failed to render results:', error);\n }\n }\n\n /**\n * Initialize the search component\n * Idempotent \u2014 safe to call more than once on the same instance.\n * Returns the instance on success, null if required DOM elements are missing.\n */\n function init() {\n if (state.initialized) {\n return instance;\n }\n\n state.container = document.querySelector(config.containerSelector);\n if (!state.container) {\n state.initialized = false;\n return null;\n }\n\n state.input = state.container.querySelector(config.inputSelector);\n state.resultsContainer = state.container.querySelector(config.resultsSelector);\n\n if (!state.input || !state.resultsContainer) {\n state.initialized = false;\n return null;\n }\n\n // Set placeholder if configured\n if (config.placeholder) {\n state.input.setAttribute('placeholder', config.placeholder);\n }\n\n // Build search index\n buildIndex();\n\n // Bind events\n bindEvents();\n\n // Set up ARIA attributes\n setupAria();\n\n state.initialized = true;\n return instance;\n }\n\n /**\n * Build search index from DOM or custom data\n */\n function buildIndex() {\n state.index = [];\n \n // Use custom data if provided\n if (config.data && Array.isArray(config.data)) {\n config.data.forEach(function(item) {\n state.index.push({\n id: item.id || slugify(item.title),\n title: item.title || '',\n category: item.category || '',\n categorySlug: slugify(item.category || ''),\n content: item.content || '',\n keywords: item.keywords || extractKeywordsFromText(item.title + ' ' + item.content),\n url: item.url || '#' + (item.id || slugify(item.title)),\n icon: item.icon || ''\n });\n });\n return;\n }\n\n // Build from DOM\n const sections = document.querySelectorAll(config.contentSelector);\n const categoryMap = buildCategoryMap();\n\n sections.forEach(function(section) {\n const id = section.id;\n if (!id) return;\n\n const titleEl = section.querySelector(config.titleSelector);\n const title = titleEl ? titleEl.textContent.replace(/v[\\d.]+/g, '').trim() : id;\n const category = categoryMap[id] || 'Documentation';\n const content = extractContent(section);\n const keywords = extractKeywords(section, title);\n const iconEl = titleEl ? titleEl.querySelector('i.ph') : null;\n let icon = '';\n if (iconEl && iconEl.classList) {\n for (let ci = 0; ci < iconEl.classList.length; ci++) {\n if (iconEl.classList[ci].indexOf('ph-') === 0) {\n icon = iconEl.classList[ci];\n break;\n }\n }\n }\n\n state.index.push({\n id: id,\n title: title,\n category: category,\n categorySlug: slugify(category),\n content: content,\n keywords: keywords,\n url: '#' + id,\n icon: icon\n });\n });\n }\n\n /**\n * Build a map of section IDs to their categories\n */\n function buildCategoryMap() {\n const map = {};\n let currentCategory = 'Documentation';\n const navItems = document.querySelectorAll(config.navSelector + ', ' + config.sectionSelector);\n\n navItems.forEach(function(item) {\n if (item.classList.contains('doc-nav-section')) {\n currentCategory = item.textContent.trim();\n } else {\n const href = item.getAttribute('href');\n if (href && href.startsWith('#')) {\n const id = href.substring(1);\n map[id] = currentCategory;\n }\n }\n });\n\n return map;\n }\n\n /**\n * Extract searchable content from a section\n */\n function extractContent(section) {\n const clone = section.cloneNode(true);\n \n const toRemove = clone.querySelectorAll(config.excludeFromContent);\n toRemove.forEach(function(el) {\n el.remove();\n });\n\n let text = clone.textContent || '';\n text = text.replace(/\\s+/g, ' ').trim();\n \n return text.substring(0, config.maxContentLength);\n }\n\n /**\n * Extract keywords from a section\n */\n function extractKeywords(section, title) {\n const keywords = [];\n \n // Add title words\n title.toLowerCase().split(/\\s+/).forEach(function(word) {\n if (word.length > 2) {\n keywords.push(word);\n }\n });\n\n // Add class names from code examples\n const codeBlocks = section.querySelectorAll('code');\n codeBlocks.forEach(function(code) {\n const text = code.textContent || '';\n const classMatches = text.match(/\\.([\\w-]+)/g);\n if (classMatches) {\n classMatches.forEach(function(match) {\n keywords.push(match.substring(1).toLowerCase());\n });\n }\n });\n\n // Add data attributes\n const dataAttrs = section.querySelectorAll('[data-tooltip], [data-modal]');\n dataAttrs.forEach(function(el) {\n const attrs = el.getAttributeNames().filter(function(name) {\n return name.startsWith('data-');\n });\n attrs.forEach(function(attr) {\n keywords.push(attr.replace('data-', ''));\n });\n });\n\n return Array.from(new Set(keywords));\n }\n\n /**\n * Extract keywords from text string\n */\n function extractKeywordsFromText(text) {\n const words = text.toLowerCase().split(/\\s+/);\n return words.filter(function(word) {\n return word.length > 2;\n });\n }\n\n /**\n * Convert string to slug\n */\n function slugify(str) {\n return str.toLowerCase().replace(/\\s+/g, '-').replace(/[^a-z0-9-]/g, '');\n }\n\n /**\n * Bind event listeners\n */\n function bindEvents() {\n // Store bound handlers for cleanup\n state.boundHandlers.handleInput = function(e) {\n handleInput(e);\n };\n state.boundHandlers.handleFocus = function() {\n if (state.query.length >= config.minQueryLength) {\n open();\n }\n };\n state.boundHandlers.handleKeydown = function(e) {\n handleKeydown(e);\n };\n state.boundHandlers.handleOutsideClick = function(e) {\n if (!state.container.contains(e.target)) {\n close();\n }\n };\n state.boundHandlers.handleGlobalKeydown = function(e) {\n if (config.keyboardShortcut && (e.metaKey || e.ctrlKey) && e.key === 'k') {\n e.preventDefault();\n state.input.focus();\n state.input.select();\n }\n };\n state.boundHandlers.handleResultClick = function(e) {\n const result = e.target.closest('.vd-doc-search-result');\n if (result) {\n const index = parseInt(result.dataset.index, 10);\n select(index);\n }\n };\n\n // Input events\n state.input.addEventListener('input', state.boundHandlers.handleInput);\n state.input.addEventListener('focus', state.boundHandlers.handleFocus);\n state.input.addEventListener('keydown', state.boundHandlers.handleKeydown);\n\n // Close on outside click\n document.addEventListener('click', state.boundHandlers.handleOutsideClick);\n\n // Global keyboard shortcut\n document.addEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n\n // Result click handling\n state.resultsContainer.addEventListener('click', state.boundHandlers.handleResultClick);\n }\n\n /**\n * Unbind event listeners\n */\n function unbindEvents() {\n if (state.input) {\n state.input.removeEventListener('input', state.boundHandlers.handleInput);\n state.input.removeEventListener('focus', state.boundHandlers.handleFocus);\n state.input.removeEventListener('keydown', state.boundHandlers.handleKeydown);\n }\n document.removeEventListener('click', state.boundHandlers.handleOutsideClick);\n document.removeEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n if (state.resultsContainer) {\n state.resultsContainer.removeEventListener('click', state.boundHandlers.handleResultClick);\n }\n }\n\n /**\n * Set up ARIA attributes\n */\n function setupAria() {\n const resultsId = state.resultsContainer.id || 'search-results-' + Math.random().toString(36).substr(2, 9);\n state.resultsContainer.id = resultsId;\n \n state.input.setAttribute('role', 'combobox');\n state.input.setAttribute('aria-autocomplete', 'list');\n state.input.setAttribute('aria-controls', resultsId);\n state.input.setAttribute('aria-expanded', 'false');\n \n state.resultsContainer.setAttribute('role', 'listbox');\n state.resultsContainer.setAttribute('aria-label', 'Search results');\n }\n\n /**\n * Handle input changes\n */\n function handleInput(e) {\n const query = e.target.value.trim();\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n state.debounceTimer = setTimeout(function() {\n state.query = query;\n\n if (query.length < config.minQueryLength) {\n close();\n return;\n }\n\n state.results = search(query);\n state.activeIndex = -1;\n render();\n open();\n\n // Callback\n if (typeof config.onSearch === 'function') {\n safeInvokeCallback('onSearch', config.onSearch, query, state.results);\n }\n }, config.debounceMs);\n }\n\n /**\n * Handle keyboard navigation\n */\n function handleKeydown(e) {\n if (!state.isOpen) {\n if (e.key === 'ArrowDown' && state.query.length >= config.minQueryLength) {\n e.preventDefault();\n state.results = search(state.query);\n render();\n open();\n }\n return;\n }\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n navigate(1);\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n navigate(-1);\n break;\n\n case 'Enter':\n e.preventDefault();\n if (state.activeIndex >= 0) {\n select(state.activeIndex);\n } else if (state.results.length > 0) {\n select(0);\n }\n break;\n\n case 'Escape':\n e.preventDefault();\n close();\n break;\n\n case 'Tab':\n close();\n break;\n }\n }\n\n /**\n * Perform search\n */\n function search(query) {\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n const scored = [];\n\n state.index.forEach(function(entry) {\n let score = 0;\n const titleLower = entry.title.toLowerCase();\n const categoryLower = entry.category.toLowerCase();\n const contentLower = entry.content.toLowerCase();\n\n terms.forEach(function(term) {\n // Title match - highest priority\n if (titleLower.includes(term)) {\n score += 100;\n if (titleLower === term) {\n score += 50;\n } else if (titleLower.startsWith(term)) {\n score += 25;\n }\n }\n\n // Category match\n if (categoryLower.includes(term)) {\n score += 50;\n }\n\n // Keyword match\n const keywordMatch = entry.keywords.some(function(k) {\n return k.includes(term);\n });\n if (keywordMatch) {\n score += 30;\n }\n\n // Content match\n if (contentLower.includes(term)) {\n score += 10;\n }\n });\n\n if (score > 0) {\n scored.push({\n id: entry.id,\n title: entry.title,\n category: entry.category,\n categorySlug: entry.categorySlug,\n content: entry.content,\n url: entry.url,\n icon: entry.icon,\n score: score\n });\n }\n });\n\n scored.sort(function(a, b) {\n return b.score - a.score;\n });\n\n return scored.slice(0, config.maxResults);\n }\n\n /**\n * Render search results\n */\n function render() {\n if (state.results.length === 0) {\n setResultsHtml(renderEmpty());\n return;\n }\n\n let html = '';\n html += renderFooter();\n\n setResultsHtml(html);\n }\n\n /**\n * Render empty state\n */\n function renderEmpty() {\n return '
    ' +\n '
    ' +\n '
    ' + escapeHtml(config.emptyTitle) + '
    ' +\n '
    ' + escapeHtml(config.emptyText) + '
    ' +\n '
    ';\n }\n\n /**\n * Render footer with keyboard hints\n */\n function renderFooter() {\n return '
    ' +\n '\u2191\u2193 to navigate' +\n '\u21B5 to select' +\n 'esc to close' +\n '
    ';\n }\n\n /**\n * Get icon for category\n */\n function getCategoryIcon(categorySlug) {\n return config.categoryIcons[categorySlug] || config.categoryIcons['default'] || 'ph-file-text';\n }\n\n /**\n * Get excerpt from content\n */\n function getExcerpt(content, query) {\n const terms = query.toLowerCase().split(/\\s+/);\n const contentLower = content.toLowerCase();\n const excerptLength = 100;\n\n let matchPos = -1;\n for (let i = 0; i < terms.length; i++) {\n const pos = contentLower.indexOf(terms[i]);\n if (pos !== -1 && (matchPos === -1 || pos < matchPos)) {\n matchPos = pos;\n }\n }\n\n if (matchPos === -1) {\n return content.substring(0, excerptLength) + '...';\n }\n\n const start = Math.max(0, matchPos - 30);\n const end = Math.min(content.length, matchPos + excerptLength);\n let excerpt = content.substring(start, end);\n\n if (start > 0) {\n excerpt = '...' + excerpt;\n }\n if (end < content.length) {\n excerpt = excerpt + '...';\n }\n\n return excerpt;\n }\n\n /**\n * Highlight matched terms in text\n */\n function highlight(text, query) {\n if (!query) return escapeHtml(text);\n\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n let escaped = escapeHtml(text);\n\n terms.forEach(function(term) {\n // Skip overly long terms to prevent ReDoS\n if (term.length > 50) return;\n const regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n escaped = escaped.replace(regex, '<' + config.highlightTag + '>$1');\n });\n\n return escaped;\n }\n\n /**\n * Escape HTML entities\n */\n function escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n /**\n * Navigate results with keyboard\n */\n function navigate(direction) {\n let newIndex = state.activeIndex + direction;\n\n if (newIndex < 0) {\n newIndex = state.results.length - 1;\n } else if (newIndex >= state.results.length) {\n newIndex = 0;\n }\n\n setActiveIndex(newIndex);\n }\n\n /**\n * Set active result index\n */\n function setActiveIndex(index) {\n const prevActive = state.resultsContainer.querySelector('.vd-doc-search-result.is-active');\n if (prevActive) {\n prevActive.classList.remove('is-active');\n prevActive.setAttribute('aria-selected', 'false');\n }\n\n state.activeIndex = index;\n\n const newActive = state.resultsContainer.querySelector('[data-index=\"' + index + '\"]');\n if (newActive) {\n newActive.classList.add('is-active');\n newActive.setAttribute('aria-selected', 'true');\n state.input.setAttribute('aria-activedescendant', 'vd-doc-search-result-' + index);\n newActive.scrollIntoView({ block: 'nearest' });\n }\n }\n\n /**\n * Select a result\n */\n function select(index) {\n const result = state.results[index];\n if (!result) return;\n\n // Close search\n close();\n state.input.value = '';\n state.query = '';\n\n // Custom callback\n if (typeof config.onSelect === 'function') {\n safeInvokeCallback('onSelect', config.onSelect, result);\n return;\n }\n\n // Default behavior: navigate to section\n const section = document.querySelector(result.url);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth', block: 'start' });\n window.history.pushState(null, '', result.url);\n updateSidebarActive(result.id);\n }\n }\n\n /**\n * Update sidebar navigation active state\n */\n function updateSidebarActive(sectionId) {\n const navLinks = document.querySelectorAll(config.navSelector);\n navLinks.forEach(function(link) {\n link.classList.remove('active');\n if (link.getAttribute('href') === '#' + sectionId) {\n link.classList.add('active');\n }\n });\n }\n\n /**\n * Open results dropdown\n */\n function open() {\n if (state.isOpen) return;\n\n state.isOpen = true;\n state.resultsContainer.classList.add('is-open');\n state.input.setAttribute('aria-expanded', 'true');\n\n if (typeof config.onOpen === 'function') {\n safeInvokeCallback('onOpen', config.onOpen);\n }\n }\n\n /**\n * Close results dropdown\n */\n function close() {\n if (!state.isOpen) return;\n\n state.isOpen = false;\n state.activeIndex = -1;\n state.resultsContainer.classList.remove('is-open');\n state.input.setAttribute('aria-expanded', 'false');\n state.input.removeAttribute('aria-activedescendant');\n\n if (typeof config.onClose === 'function') {\n safeInvokeCallback('onClose', config.onClose);\n }\n }\n\n /**\n * Destroy the component\n */\n function destroy() {\n unbindEvents();\n \n state.initialized = false;\n state.index = [];\n state.results = [];\n state.isOpen = false;\n state.query = '';\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n if (state.resultsContainer) {\n setResultsHtml('');\n }\n }\n\n /**\n * Rebuild the search index\n */\n function rebuild() {\n buildIndex();\n }\n\n /**\n * Update configuration\n */\n function setConfig(newConfig) {\n Object.assign(config, newConfig);\n }\n\n /**\n * Get current configuration\n */\n function getConfig() {\n return Object.assign({}, config);\n }\n\n /**\n * Get search index\n */\n function getIndex() {\n return state.index.slice();\n }\n\n // Public instance API\n const instance = {\n init: init,\n destroy: destroy,\n rebuild: rebuild,\n search: search,\n open: open,\n close: close,\n setConfig: setConfig,\n getConfig: getConfig,\n getIndex: getIndex\n };\n\n return instance;\n }\n\n /**\n * Search Component (singleton for backward compatibility)\n */\n const Search = {\n // Factory method \u2014 creates and auto-initializes a new independent instance.\n // Always returns the instance so callers retain a reference even if the\n // DOM container is not yet available (they can retry init() later).\n create: function(options) {\n const instance = createSearch(options);\n if (instance) {\n instance.init();\n }\n return instance || null;\n },\n \n // Default instance\n _instance: null,\n \n // Configuration (for default instance)\n config: Object.assign({}, DEFAULTS),\n\n /**\n * Initialize the default search instance\n */\n init: function(options) {\n if (this._instance) {\n this._instance.destroy();\n }\n \n if (options) {\n Object.assign(this.config, options);\n }\n \n this._instance = createSearch(this.config);\n return this._instance ? this._instance.init() : null;\n },\n\n /**\n * Destroy the default instance\n */\n destroy: function() {\n if (this._instance) {\n this._instance.destroy();\n this._instance = null;\n }\n },\n\n destroyAll: function() {\n this.destroy();\n },\n\n /**\n * Rebuild the default instance index\n */\n rebuild: function() {\n if (this._instance) {\n this._instance.rebuild();\n }\n },\n\n /**\n * Search using the default instance\n */\n search: function(query) {\n return this._instance ? this._instance.search(query) : [];\n },\n\n /**\n * Open the default instance\n */\n open: function() {\n if (this._instance) {\n this._instance.open();\n }\n },\n\n /**\n * Close the default instance\n */\n close: function() {\n if (this._instance) {\n this._instance.close();\n }\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('docSearch', Search);\n }\n\n // Expose globally (both names for compatibility)\n window.Search = Search;\n window.DocSearch = Search; // Backward compatibility\n window.VanduoDocSearch = Search; // New name compatibility\n\n})();\n", "/**\n * Vanduo Framework - Draggable Component\n * JavaScript functionality for draggable elements and drop zones\n */\n\n(function () {\n 'use strict';\n\n /**\n * Draggable Component\n */\n const Draggable = {\n // Store initialized draggables and their cleanup functions\n instances: new Map(),\n // Store current drag state\n currentDrag: null,\n // Store touch state\n touchState: null,\n // Feedback element\n feedbackElement: null,\n // Shared selector used by init and touch reorder\n containerSelector: '.vd-draggable-container, .vd-draggable-container-vertical',\n\n /**\n * Initialize draggable components\n */\n init: function () {\n const draggables = document.querySelectorAll('.vd-draggable, [data-draggable]');\n\n draggables.forEach(element => {\n if (this.instances.has(element)) {\n return;\n }\n this.initDraggable(element);\n });\n\n const containers = document.querySelectorAll(this.containerSelector);\n containers.forEach(container => {\n if (!this.instances.has(container)) {\n this.initContainer(container);\n }\n });\n\n const dropZones = document.querySelectorAll('.vd-drop-zone');\n dropZones.forEach(zone => {\n if (!this.instances.has(zone)) {\n this.initDropZone(zone);\n }\n });\n\n this.createFeedbackElement();\n },\n\n /**\n * Initialize a single draggable element\n * @param {HTMLElement} element - Draggable element\n */\n initDraggable: function (element) {\n const cleanupFunctions = [];\n\n // Make element draggable if not already\n if (!element.hasAttribute('draggable')) {\n element.setAttribute('draggable', 'true');\n }\n\n // Accessibility: add ARIA attributes\n if (!element.hasAttribute('tabindex')) {\n element.setAttribute('tabindex', '0');\n }\n element.setAttribute('role', 'option');\n element.setAttribute('aria-roledescription', 'draggable item');\n element.setAttribute('aria-grabbed', 'false');\n\n // Handle drag start\n const dragStartHandler = (e) => {\n this.handleDragStart(e, element);\n };\n element.addEventListener('dragstart', dragStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragstart', dragStartHandler));\n\n // Handle drag\n const dragHandler = (e) => {\n this.handleDrag(e, element);\n };\n element.addEventListener('drag', dragHandler);\n cleanupFunctions.push(() => element.removeEventListener('drag', dragHandler));\n\n // Handle drag end\n const dragEndHandler = (e) => {\n this.handleDragEnd(e, element);\n };\n element.addEventListener('dragend', dragEndHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragend', dragEndHandler));\n\n // Handle touch start (for mobile)\n const touchStartHandler = (e) => {\n this.handleTouchStart(e, element);\n };\n element.addEventListener('touchstart', touchStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchstart', touchStartHandler));\n\n // Handle touch move (for mobile)\n // { passive: false } is required so that e.preventDefault() works\n // once the drag threshold is reached \u2014 without it, modern browsers\n // treat the listener as passive and silently ignore preventDefault().\n const touchMoveHandler = (e) => {\n this.handleTouchMove(e, element);\n };\n element.addEventListener('touchmove', touchMoveHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchmove', touchMoveHandler));\n\n // Handle touch end (for mobile)\n const touchEndHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchend', touchEndHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchend', touchEndHandler));\n\n // Handle touch cancel (for mobile)\n const touchCancelHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchcancel', touchCancelHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchcancel', touchCancelHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, element);\n };\n element.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => element.removeEventListener('keydown', keydownHandler));\n\n this.instances.set(element, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a draggable container\n * @param {HTMLElement} container - Draggable container\n */\n initContainer: function (container) {\n // Accessibility: add ARIA role to container\n container.setAttribute('role', 'listbox');\n container.setAttribute('aria-label', container.getAttribute('aria-label') || 'Draggable items');\n\n const items = container.querySelectorAll('.vd-draggable-item');\n items.forEach(item => {\n if (!this.instances.has(item)) {\n this.initDraggable(item);\n }\n });\n\n const cleanupFunctions = [];\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n };\n\n // Handle drag over for auto-sorting\n const dragOverHandler = (e) => {\n e.preventDefault(); // Necessary to allow drop\n e.dataTransfer.dropEffect = 'move';\n\n if (!this.currentDrag) return;\n const draggingEl = this.currentDrag.element;\n\n // Only reorder if dragging an item that belongs to this container (or if we support cross-container drag, but keep simple)\n if (!container.contains(draggingEl)) return;\n\n // Prevent jumps when the dragging finalizes with 0,0 coordinates near the end\n if (e.clientX === 0 && e.clientY === 0) return;\n\n this.handleReorder(container, draggingEl, e.clientX, e.clientY);\n };\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault(); // crucial to prevent the browser's default handling and snapping back\n };\n\n container.addEventListener('dragenter', dragEnterHandler);\n container.addEventListener('dragover', dragOverHandler);\n container.addEventListener('drop', dropHandler);\n\n cleanupFunctions.push(() => {\n container.removeEventListener('dragenter', dragEnterHandler);\n container.removeEventListener('dragover', dragOverHandler);\n container.removeEventListener('drop', dropHandler);\n });\n\n this.instances.set(container, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a drop zone\n * @param {HTMLElement} zone - Drop zone element\n */\n initDropZone: function (zone) {\n const cleanupFunctions = [];\n\n // Accessibility: add ARIA role to drop zone\n zone.setAttribute('role', 'region');\n zone.setAttribute('aria-dropeffect', 'move');\n if (!zone.hasAttribute('aria-label')) {\n zone.setAttribute('aria-label', 'Drop zone');\n }\n\n // Handle drag over\n const dragOverHandler = (e) => {\n e.preventDefault();\n this.handleDragOver(e, zone);\n };\n zone.addEventListener('dragover', dragOverHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragover', dragOverHandler));\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n this.handleDragEnter(e, zone);\n };\n zone.addEventListener('dragenter', dragEnterHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragenter', dragEnterHandler));\n\n // Handle drag leave\n const dragLeaveHandler = (e) => {\n this.handleDragLeave(e, zone);\n };\n zone.addEventListener('dragleave', dragLeaveHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragleave', dragLeaveHandler));\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault();\n this.handleDrop(e, zone);\n };\n zone.addEventListener('drop', dropHandler);\n cleanupFunctions.push(() => zone.removeEventListener('drop', dropHandler));\n\n this.instances.set(zone, { cleanup: cleanupFunctions });\n },\n\n /**\n * Create feedback element for drag operations\n */\n createFeedbackElement: function () {\n if (!this.feedbackElement) {\n // Reuse existing element if present\n const existing = document.querySelector('.vd-drag-feedback');\n if (existing) {\n this.feedbackElement = existing;\n return;\n }\n\n this.feedbackElement = document.createElement('div');\n this.feedbackElement.className = 'vd-drag-feedback hidden';\n this.feedbackElement.setAttribute('role', 'presentation');\n document.body.appendChild(this.feedbackElement);\n }\n },\n\n /**\n * Handle drag start event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragStart: function (e, element) {\n // Add dragging class\n element.classList.add('is-dragging');\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: e.clientX, y: e.clientY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element)\n };\n\n // Set drag data\n e.dataTransfer.effectAllowed = 'move';\n e.dataTransfer.setData('text/plain', this.currentDrag.data);\n\n // We no longer suppress the native ghost image or manually update feedback\n // for mouse drags, relying on the browser's native rendering instead.\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY }\n }\n }));\n },\n\n /**\n * Handle drag event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDrag: function (e, element) {\n // Guard against null state (race condition on fast interactions)\n if (!this.currentDrag) return;\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - this.currentDrag.initialPosition.x,\n y: e.clientY - this.currentDrag.initialPosition.y\n }\n }\n }));\n },\n\n /**\n * Handle drag end event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragEnd: function (e, element) {\n // Remove dragging class\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'false');\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Guard against null state\n const data = this.currentDrag?.data || this.getData(element);\n const initialPos = this.currentDrag?.initialPosition || { x: 0, y: 0 };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - initialPos.x,\n y: e.clientY - initialPos.y\n }\n }\n }));\n\n // Reset drag state\n this.currentDrag = null;\n },\n\n /**\n * Handle touch start event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchStart: function (e, element) {\n // Don't prevent default here \u2014 it blocks scrolling.\n // We only prevent default in touchmove once drag threshold is reached.\n const touch = e.touches[0];\n const rect = element.getBoundingClientRect();\n this.touchState = {\n element: element,\n startX: touch.clientX,\n startY: touch.clientY,\n lastX: touch.clientX,\n lastY: touch.clientY,\n // Keep preview anchored to the original grab point.\n offsetX: touch.clientX - rect.left,\n offsetY: touch.clientY - rect.top,\n startTime: Date.now(),\n isDragging: false\n };\n },\n\n /**\n * Handle touch move event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchMove: function (e, element) {\n if (!this.touchState) return;\n\n const touch = e.touches[0];\n this.touchState.lastX = touch.clientX;\n this.touchState.lastY = touch.clientY;\n const deltaX = touch.clientX - this.touchState.startX;\n const deltaY = touch.clientY - this.touchState.startY;\n\n // Only start dragging if moved a minimum distance\n if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {\n // Now we know it's a drag, not a scroll \u2014 prevent default\n if (e.cancelable) e.preventDefault();\n\n if (!this.touchState.isDragging) {\n this.touchState.isDragging = true;\n element.classList.add('is-dragging');\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: this.touchState.startX, y: this.touchState.startY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element),\n // Preserve where inside the element the drag started for accurate ghost positioning.\n offsetX: this.touchState.offsetX,\n offsetY: this.touchState.offsetY\n };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY }\n }\n }));\n }\n\n // Update feedback\n this.updateFeedback(touch.clientX, touch.clientY);\n\n // Dispatch event\n if (this.currentDrag) {\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY },\n delta: { x: deltaX, y: deltaY }\n }\n }));\n\n this.updateTouchDropZone(touch.clientX, touch.clientY);\n\n // Reorder for touch\n const container = element.closest(this.containerSelector);\n if (container && container.contains(element)) {\n this.handleReorder(container, element, touch.clientX, touch.clientY);\n }\n }\n }\n },\n\n /**\n * Handle touch end event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchEnd: function (e, element) {\n if (this.touchState && this.touchState.isDragging) {\n if (e.cancelable) e.preventDefault();\n const endTouch = e.changedTouches?.[0];\n const endPosition = {\n x: endTouch?.clientX ?? this.touchState.lastX ?? this.touchState.startX,\n y: endTouch?.clientY ?? this.touchState.lastY ?? this.touchState.startY\n };\n\n const dropZone = this.resolveDropZoneAtPoint(endPosition.x, endPosition.y) || this.touchState.overZone;\n if (dropZone) {\n this.dispatchDrop(dropZone, endPosition);\n } else if (this.touchState.overZone) {\n this.touchState.overZone.classList.remove('is-drag-over');\n }\n\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n element.setAttribute('aria-grabbed', 'false');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Dispatch event\n const data = this.currentDrag?.data || this.getData(element);\n const startX = this.touchState?.startX || 0;\n const startY = this.touchState?.startY || 0;\n\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: endPosition,\n delta: {\n x: endPosition.x - startX,\n y: endPosition.y - startY\n }\n }\n }));\n }\n\n // Reset states\n this.touchState = null;\n this.currentDrag = null;\n },\n\n /**\n * Handle drag over event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} _zone - Drop zone element\n */\n handleDragOver: function (e, _zone) {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n },\n\n /**\n * Handle drag enter event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragEnter: function (e, zone) {\n e.preventDefault();\n zone.classList.add('is-drag-over');\n },\n\n /**\n * Handle drag leave event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragLeave: function (e, zone) {\n zone.classList.remove('is-drag-over');\n },\n\n /**\n * Handle drop event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDrop: function (e, zone) {\n e.preventDefault();\n this.dispatchDrop(zone, { x: e.clientX, y: e.clientY });\n },\n\n /**\n * Resolve a drop zone from viewport coordinates\n * @param {number} x\n * @param {number} y\n * @returns {HTMLElement|null}\n */\n resolveDropZoneAtPoint: function (x, y) {\n if (!Number.isFinite(x) || !Number.isFinite(y)) return null;\n\n // Prefer the full stacking list so overlays/top elements don't hide real drop targets.\n if (typeof document.elementsFromPoint === 'function') {\n const stacked = document.elementsFromPoint(x, y);\n for (const element of stacked) {\n const zone = element.closest('.vd-drop-zone');\n if (zone) return zone;\n }\n }\n\n const target = document.elementFromPoint(x, y);\n const targetZone = target ? target.closest('.vd-drop-zone') : null;\n if (targetZone) return targetZone;\n\n // Last-resort fallback for mobile emulation edge cases.\n const zones = document.querySelectorAll('.vd-drop-zone');\n for (const zone of zones) {\n const rect = zone.getBoundingClientRect();\n if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {\n return zone;\n }\n }\n\n return null;\n },\n\n /**\n * Track and update active drop-zone hover state on touch devices\n * @param {number} x\n * @param {number} y\n */\n updateTouchDropZone: function (x, y) {\n if (!this.touchState) return;\n\n const nextZone = this.resolveDropZoneAtPoint(x, y);\n const prevZone = this.touchState.overZone || null;\n\n if (prevZone && prevZone !== nextZone) {\n prevZone.classList.remove('is-drag-over');\n }\n\n if (nextZone && nextZone !== prevZone) {\n nextZone.classList.add('is-drag-over');\n }\n\n this.touchState.overZone = nextZone || null;\n },\n\n /**\n * Dispatch a normalized drop event for mouse and touch flows\n * @param {HTMLElement} zone\n * @param {{x:number, y:number}} position\n */\n dispatchDrop: function (zone, position) {\n zone.classList.remove('is-drag-over');\n zone.dispatchEvent(new CustomEvent('draggable:drop', {\n bubbles: true,\n detail: {\n zone: zone,\n element: this.currentDrag?.element,\n data: this.currentDrag?.data,\n position: position\n }\n }));\n },\n\n /**\n * Reorder elements in container based on cursor position\n * @param {HTMLElement} container \n * @param {HTMLElement} element \n * @param {number} clientX \n * @param {number} clientY \n */\n handleReorder: function (container, element, clientX, clientY) {\n const isVertical = container.classList.contains('vd-draggable-container-vertical');\n const siblings = [...container.querySelectorAll('.vd-draggable-item:not(.is-dragging), .vd-draggable:not(.is-dragging)')];\n\n const nextSibling = siblings.reduce((closest, child) => {\n const box = child.getBoundingClientRect();\n const offset = isVertical\n ? clientY - box.top - box.height / 2\n : clientX - box.left - box.width / 2;\n\n if (offset < 0 && offset > closest.offset) {\n return { offset: offset, element: child };\n } else {\n return closest;\n }\n }, { offset: Number.NEGATIVE_INFINITY }).element;\n\n if (nextSibling == null) {\n container.appendChild(element);\n } else {\n container.insertBefore(element, nextSibling);\n }\n },\n\n /**\n * Handle keyboard events\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} element - Draggable element\n */\n handleKeydown: function (e, element) {\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n // Trigger click or custom action\n element.click();\n break;\n case 'Escape':\n // Cancel drag if in progress\n if (element.classList.contains('is-dragging')) {\n element.classList.remove('is-dragging');\n element.setAttribute('aria-grabbed', 'false');\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n this.currentDrag = null;\n }\n break;\n case 'ArrowUp':\n case 'ArrowLeft': {\n e.preventDefault();\n const prev = element.previousElementSibling;\n if (prev && (prev.classList.contains('vd-draggable') || prev.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(element, prev);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'up' }\n }));\n }\n break;\n }\n case 'ArrowDown':\n case 'ArrowRight': {\n e.preventDefault();\n const next = element.nextElementSibling;\n if (next && (next.classList.contains('vd-draggable') || next.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(next, element);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'down' }\n }));\n }\n break;\n }\n }\n },\n\n /**\n * Get data from draggable element\n * @param {HTMLElement} element - Draggable element\n * @returns {string} Data associated with the element\n */\n getData: function (element) {\n return element.dataset.draggable || element.textContent.trim();\n },\n\n /**\n * Update drag feedback element\n * @param {number} x - Current X coordinate\n * @param {number} y - Current Y coordinate\n */\n updateFeedback: function (x, y) {\n if (!this.currentDrag) return;\n\n // Show feedback\n this.feedbackElement.classList.remove('hidden');\n\n // Update feedback content\n const rect = this.currentDrag.initialBounds;\n this.feedbackElement.innerHTML = '';\n const clone = this.currentDrag.element.cloneNode(true);\n this.feedbackElement.appendChild(clone);\n\n // Set styles\n const offsetX = this.currentDrag.offsetX ?? 20;\n const offsetY = this.currentDrag.offsetY ?? 20;\n Object.assign(this.feedbackElement.style, {\n left: (x - offsetX) + 'px',\n top: (y - offsetY) + 'px',\n width: rect.width + 'px',\n height: rect.height + 'px'\n });\n },\n\n /**\n * Make an element draggable programmatically\n * @param {HTMLElement|string} element - Element or selector\n * @param {Object} options - Configuration options\n */\n makeDraggable: function (element, options = {}) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && !this.instances.has(el)) {\n // Add classes and attributes\n el.classList.add('vd-draggable');\n el.setAttribute('draggable', 'true');\n\n // Set options\n if (options.data) {\n el.dataset.draggable = options.data;\n }\n\n // Initialize\n this.initDraggable(el);\n }\n },\n\n /**\n * Remove draggable functionality from an element\n * @param {HTMLElement|string} element - Element or selector\n */\n removeDraggable: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && this.instances.has(el)) {\n // Clean up\n const instance = this.instances.get(el);\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n\n // Remove classes and attributes\n el.classList.remove('vd-draggable');\n el.removeAttribute('draggable');\n el.removeAttribute('data-draggable');\n }\n },\n\n /**\n * Destroy a draggable instance and clean up event listeners\n * @param {HTMLElement} element - Draggable element\n */\n destroy: function (element) {\n this.removeDraggable(element);\n },\n\n /**\n * Destroy all draggable instances\n */\n destroyAll: function () {\n const instances = Array.from(this.instances.keys());\n instances.forEach(element => this.destroy(element));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('draggable', Draggable);\n }\n\n // Expose globally\n window.VanduoDraggable = Draggable;\n})();\n", "/**\n * Vanduo Framework \u2013 LazyLoad Component\n * v1.2.1\n *\n * Provides two levels of API:\n *\n * LOW-LEVEL (generic IntersectionObserver wrapper)\n * VanduoLazyLoad.observe(element, callback, options?)\n * VanduoLazyLoad.unobserve(element)\n * VanduoLazyLoad.unobserveAll()\n *\n * HIGH-LEVEL (HTML-section fetcher, mirrors vanduo-docs SPA behaviour)\n * VanduoLazyLoad.loadSection(url, containerEl, options?)\n * options: { placeholder, threshold, rootMargin, onLoaded, onError }\n * placeholder: 'skeleton' | 'spinner' | HTMLString (default: 'skeleton')\n *\n * ATTRIBUTE-DRIVEN (zero-JS usage, wired by init())\n *
    \u2026
    \n *\n * EVENTS dispatched on the host element:\n * lazysection:loading \u2014 fetch started\n * lazysection:loaded \u2014 content injected\n * lazysection:error \u2014 fetch failed\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500 Private state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /** @type {Map} */\n const _observerMap = new Map();\n\n /* \u2500\u2500 Security helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Returns true only if `url` resolves to the same origin as the page\n * (relative paths and same-origin absolute URLs are allowed).\n * Cross-origin URLs are rejected to prevent SSRF-style fetch abuse.\n * @param {string} url\n * @returns {boolean}\n */\n function _isSafeUrl(url) {\n try {\n // Relative URLs (no origin) are always safe\n const resolved = new URL(url, window.location.href);\n return resolved.origin === window.location.origin;\n } catch (_) {\n return false;\n }\n }\n\n /**\n * Safely inject fetched HTML into a container by parsing it with\n * DOMParser (avoids script execution) and replacing children via\n * standard DOM APIs instead of raw innerHTML assignment.\n * @param {Element} containerEl\n * @param {string} html\n */\n function _safeInjectHtml(containerEl, html) {\n const parser = new DOMParser();\n const doc = parser.parseFromString(html.trim(), 'text/html'); // CodeQL [js/xss-through-dom] Intentional: parsed nodes are sanitized below before adoption into live DOM\n\n const DANGEROUS_TAGS = ['SCRIPT', 'IFRAME', 'OBJECT', 'EMBED', 'FORM', 'BASE', 'LINK', 'META', 'STYLE'];\n for (const tag of DANGEROUS_TAGS) {\n const els = doc.querySelectorAll(tag);\n for (let i = els.length - 1; i >= 0; i--) {\n els[i].parentNode.removeChild(els[i]);\n }\n }\n\n // Strip dangerous attributes (e.g. onerror, javascript: urls) from all elements\n function _sanitizeNode(node) {\n if (node.nodeType === Node.ELEMENT_NODE) {\n const attrs = node.attributes;\n for (let i = attrs.length - 1; i >= 0; i--) {\n const attrName = attrs[i].name.toLowerCase();\n const attrValue = attrs[i].value.toLowerCase();\n const trimmedValue = attrValue.trim();\n if (\n attrName.startsWith('on') ||\n trimmedValue.startsWith('javascript:') ||\n trimmedValue.startsWith('data:') ||\n trimmedValue.startsWith('vbscript:')\n ) {\n node.removeAttribute(attrs[i].name);\n }\n }\n const children = node.childNodes;\n for (let i = 0; i < children.length; i++) {\n _sanitizeNode(children[i]);\n }\n }\n }\n _sanitizeNode(doc.body);\n\n // Collect all top-level body children\n const nodes = Array.from(doc.body.childNodes);\n // Clear container and append parsed nodes\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n nodes.forEach(function (node) {\n containerEl.appendChild(document.adoptNode(node));\n });\n }\n\n /* \u2500\u2500 Placeholder HTML \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _skeletonHtml() {\n return '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _spinnerHtml() {\n return '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _resolvePlaceholder(placeholder) {\n if (!placeholder || placeholder === 'skeleton') return _skeletonHtml();\n if (placeholder === 'spinner') return _spinnerHtml();\n // Caller-supplied HTML string\n return placeholder;\n }\n\n /* \u2500\u2500 Dispatch helper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _dispatch(el, eventName, detail) {\n el.dispatchEvent(new CustomEvent(eventName, { bubbles: true, detail: detail || {} }));\n }\n\n /* \u2500\u2500 VanduoLazyLoad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const VanduoLazyLoad = {\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * LOW-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Observe an element. `callback` is invoked once when the element\n * enters the viewport, then the element is automatically unobserved.\n *\n * @param {Element} element\n * @param {function(Element): void} callback\n * @param {{ threshold?: number, rootMargin?: string }} [options]\n */\n observe: function (element, callback, options) {\n if (!(element instanceof Element)) {\n console.warn('[VanduoLazyLoad] observe() requires a DOM Element.');\n return;\n }\n if (typeof callback !== 'function') {\n console.warn('[VanduoLazyLoad] observe() requires a callback function.');\n return;\n }\n // Already observed \u2014 ignore\n if (_observerMap.has(element)) return;\n\n const threshold = (options && options.threshold != null) ? options.threshold : 0;\n const rootMargin = (options && options.rootMargin) ? options.rootMargin : '0px';\n\n const observer = new IntersectionObserver(function (entries, obs) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n obs.unobserve(entry.target);\n _observerMap.delete(entry.target);\n try {\n callback(entry.target);\n } catch (e) {\n console.error('[VanduoLazyLoad] Callback threw:', e);\n }\n }\n });\n }, { threshold: threshold, rootMargin: rootMargin });\n\n _observerMap.set(element, observer);\n observer.observe(element);\n },\n\n /**\n * Stop observing an element that was previously passed to observe().\n * @param {Element} element\n */\n unobserve: function (element) {\n const observer = _observerMap.get(element);\n if (observer) {\n observer.unobserve(element);\n _observerMap.delete(element);\n }\n },\n\n /**\n * Stop observing ALL currently observed elements.\n */\n unobserveAll: function () {\n _observerMap.forEach(function (observer, element) {\n observer.unobserve(element);\n });\n _observerMap.clear();\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * HIGH-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fetch an HTML partial and inject it into `containerEl` when the\n * container enters the viewport. A placeholder is shown immediately.\n *\n * @param {string} url URL of the HTML partial to fetch\n * @param {Element} containerEl Target element whose content will be replaced\n * @param {{\n * placeholder?: 'skeleton'|'spinner'|string,\n * threshold?: number,\n * rootMargin?: string,\n * onLoaded?: function(Element): void,\n * onError?: function(Error): void\n * }} [options]\n */\n loadSection: function (url, containerEl, options) {\n if (typeof url !== 'string' || !url) {\n console.warn('[VanduoLazyLoad] loadSection() requires a non-empty URL string.');\n return;\n }\n if (!(containerEl instanceof Element)) {\n console.warn('[VanduoLazyLoad] loadSection() requires a DOM Element as containerEl.');\n return;\n }\n // Reject cross-origin URLs to prevent SSRF-style fetch abuse\n if (!_isSafeUrl(url)) {\n console.error('[VanduoLazyLoad] loadSection() blocked cross-origin URL:', url);\n return;\n }\n\n const opts = options || {};\n // Placeholders are known-safe static HTML strings built internally\n const placeholderHtml = _resolvePlaceholder(opts.placeholder);\n\n // Use _safeInjectHtml instead of innerHTML to prevent XSS from caller-supplied placeholders\n _safeInjectHtml(containerEl, placeholderHtml);\n _dispatch(containerEl, 'lazysection:loading', { url: url });\n\n // Fetch when visible\n this.observe(containerEl, function () {\n const controller = new window.AbortController();\n const timeoutId = setTimeout(function () { controller.abort(); }, 10000);\n\n window.fetch(url, { signal: controller.signal })\n .then(function (res) {\n clearTimeout(timeoutId);\n if (!res.ok) throw new Error('HTTP ' + res.status);\n return res.text();\n })\n .then(function (html) {\n // Use DOMParser to parse fetched content safely, avoiding\n // raw innerHTML assignment of externally-sourced strings\n _safeInjectHtml(containerEl, html);\n _dispatch(containerEl, 'lazysection:loaded', { url: url });\n // Re-init Vanduo components inside the new content\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.init();\n }\n if (typeof opts.onLoaded === 'function') {\n opts.onLoaded(containerEl);\n }\n })\n .catch(function (err) {\n // Build error node via DOM APIs \u2014 no dynamic HTML strings\n const alertEl = document.createElement('div');\n alertEl.className = 'vd-alert vd-alert-error';\n alertEl.setAttribute('role', 'alert');\n const msgEl = document.createElement('span');\n msgEl.textContent = 'Failed to load content. ';\n const detailEl = document.createElement('small');\n detailEl.style.opacity = '0.7';\n detailEl.textContent = err.message;\n alertEl.appendChild(msgEl);\n alertEl.appendChild(detailEl);\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n containerEl.appendChild(alertEl);\n _dispatch(containerEl, 'lazysection:error', { url: url, error: err });\n console.error('[VanduoLazyLoad] loadSection failed:', err);\n if (typeof opts.onError === 'function') {\n opts.onError(err);\n }\n });\n }, { threshold: opts.threshold, rootMargin: opts.rootMargin });\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * ATTRIBUTE-DRIVEN INIT\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Scan the DOM for [data-vd-lazy] elements and wire them up.\n * Safe to call multiple times \u2014 already-observed elements are skipped.\n */\n init: function () {\n const self = this;\n const elements = document.querySelectorAll('[data-vd-lazy]');\n elements.forEach(function (el) {\n // Skip already-observed or already-loaded elements\n if (_observerMap.has(el) || el.dataset.vdLazyState === 'loading' || el.dataset.vdLazyState === 'loaded') return;\n\n const url = el.getAttribute('data-vd-lazy');\n if (!url) return;\n\n el.dataset.vdLazyState = 'loading';\n const placeholder = el.getAttribute('data-vd-lazy-placeholder') || 'skeleton';\n\n self.loadSection(url, el, {\n placeholder: placeholder,\n onLoaded: function () {\n el.dataset.vdLazyState = 'loaded';\n },\n onError: function () {\n el.dataset.vdLazyState = 'error';\n }\n });\n });\n }\n };\n\n /* \u2500\u2500 Register with Vanduo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('LazyLoad', VanduoLazyLoad);\n }\n\n /* \u2500\u2500 Global convenience alias \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n window.VanduoLazyLoad = VanduoLazyLoad;\n\n})();\n", "/**\n * Vanduo Framework - Glass Scroll Activation\n * Generic scroll-aware glass activation via IntersectionObserver.\n *\n * Usage:\n * Add `data-glass-scroll` to any element carrying a `.vd-glass*` class.\n * By default the previous sibling is used as the sentinel.\n * Point to a custom sentinel via `data-glass-sentinel=\"\"`.\n *\n * Behaviour:\n * - Adds `.is-glass-active` when the sentinel leaves the viewport (scrolled past).\n * - Removes `.is-glass-active` when the sentinel re-enters the viewport.\n */\n(function () {\n 'use strict';\n\n const GlassScroll = {\n /** @type {Map} */\n observers: new Map(),\n\n init: function () {\n document.querySelectorAll('[data-glass-scroll]').forEach(el => {\n if (this.observers.has(el)) return;\n this.initElement(el);\n });\n },\n\n /**\n * Wire up a single scroll-activated glass element.\n * @param {HTMLElement} el\n */\n initElement: function (el) {\n const sentinelSelector = el.dataset.glassSentinel;\n let sentinel;\n\n if (sentinelSelector) {\n sentinel = document.querySelector(sentinelSelector);\n }\n\n if (!sentinel) {\n // Fall back to the previous sibling element\n sentinel = el.previousElementSibling;\n }\n\n if (!sentinel) {\n // No sentinel available \u2014 activate immediately so glass is always shown\n el.classList.add('is-glass-active');\n return;\n }\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n // Active when sentinel is NOT intersecting (scrolled past it)\n el.classList.toggle('is-glass-active', !entry.isIntersecting);\n });\n },\n { threshold: 0, rootMargin: '0px' }\n );\n\n observer.observe(sentinel);\n this.observers.set(el, observer);\n },\n\n /**\n * Disconnect and remove a single element's observer.\n * @param {HTMLElement} el\n */\n destroy: function (el) {\n const observer = this.observers.get(el);\n if (observer) {\n observer.disconnect();\n this.observers.delete(el);\n }\n },\n\n destroyAll: function () {\n this.observers.forEach((observer, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('glassScroll', GlassScroll);\n }\n\n window.VanduoGlassScroll = GlassScroll;\n})();\n", "/**\n * Vanduo Framework - Flow (Carousel/Slider) Component\n * Touch-enabled carousel with slide/fade transitions, autoplay, indicators\n */\n\n(function () {\n 'use strict';\n\n const Flow = {\n instances: new Map(),\n\n init: function () {\n const carousels = document.querySelectorAll('.vd-flow, .vd-carousel');\n carousels.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const track = el.querySelector('.vd-flow-track');\n if (!track) return;\n\n const slides = Array.from(track.querySelectorAll('.vd-flow-slide'));\n if (slides.length === 0) return;\n\n const isFade = el.classList.contains('vd-flow-fade');\n const autoplay = el.hasAttribute('data-vd-autoplay');\n const interval = parseInt(el.getAttribute('data-vd-interval'), 10) || 5000;\n const loop = el.getAttribute('data-vd-loop') !== 'false';\n\n const state = {\n current: 0,\n total: slides.length,\n autoplayTimer: null,\n isFade: isFade,\n loop: loop,\n isDragging: false,\n startX: 0,\n currentX: 0,\n threshold: 50\n };\n\n const cleanup = [];\n\n // Set initial active slide\n slides.forEach((slide, i) => {\n slide.setAttribute('role', 'group');\n slide.setAttribute('aria-roledescription', 'slide');\n slide.setAttribute('aria-label', 'Slide ' + (i + 1) + ' of ' + slides.length);\n if (i === 0) slide.classList.add('is-active');\n });\n\n el.setAttribute('role', 'region');\n el.setAttribute('aria-roledescription', 'carousel');\n if (!el.getAttribute('aria-label')) {\n el.setAttribute('aria-label', 'Carousel');\n }\n\n // Live region for announcements\n const liveRegion = document.createElement('div');\n liveRegion.setAttribute('aria-live', 'polite');\n liveRegion.setAttribute('aria-atomic', 'true');\n liveRegion.className = 'sr-only';\n liveRegion.style.cssText = 'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);';\n el.appendChild(liveRegion);\n\n const goTo = (index, announce) => {\n if (announce === undefined) announce = true;\n let target = index;\n if (state.loop) {\n target = ((index % state.total) + state.total) % state.total;\n } else {\n target = Math.max(0, Math.min(index, state.total - 1));\n }\n\n const prev = state.current;\n state.current = target;\n\n if (state.isFade) {\n slides.forEach((s, i) => {\n s.classList.toggle('is-active', i === target);\n });\n } else {\n track.style.transform = 'translateX(-' + (target * 100) + '%)';\n }\n\n // Update indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.classList.toggle('is-active', i === target);\n ind.setAttribute('aria-selected', i === target ? 'true' : 'false');\n });\n\n // Update slide ARIA\n slides.forEach((s, i) => {\n s.setAttribute('aria-hidden', i !== target ? 'true' : 'false');\n });\n\n if (announce) {\n liveRegion.textContent = 'Slide ' + (target + 1) + ' of ' + state.total;\n }\n\n el.dispatchEvent(new CustomEvent('flow:change', {\n detail: { current: target, previous: prev, total: state.total }\n }));\n };\n\n const next = () => goTo(state.current + 1);\n const prev = () => goTo(state.current - 1);\n\n // Controls\n const prevBtn = el.querySelector('.vd-flow-prev');\n const nextBtn = el.querySelector('.vd-flow-next');\n\n if (prevBtn) {\n const h = () => prev();\n prevBtn.addEventListener('click', h);\n cleanup.push(() => prevBtn.removeEventListener('click', h));\n }\n if (nextBtn) {\n const h = () => next();\n nextBtn.addEventListener('click', h);\n cleanup.push(() => nextBtn.removeEventListener('click', h));\n }\n\n // Indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.setAttribute('role', 'tab');\n ind.setAttribute('aria-selected', i === 0 ? 'true' : 'false');\n ind.setAttribute('aria-label', 'Go to slide ' + (i + 1));\n const h = () => goTo(i);\n ind.addEventListener('click', h);\n cleanup.push(() => ind.removeEventListener('click', h));\n });\n\n // Keyboard navigation\n const keyHandler = (e) => {\n if (e.key === 'ArrowLeft') { prev(); e.preventDefault(); }\n if (e.key === 'ArrowRight') { next(); e.preventDefault(); }\n };\n el.setAttribute('tabindex', '0');\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n // Touch / pointer support\n const pointerDown = (e) => {\n state.isDragging = true;\n state.startX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n state.currentX = state.startX;\n el.classList.add('is-dragging');\n };\n\n const pointerMove = (e) => {\n if (!state.isDragging) return;\n state.currentX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n };\n\n const pointerUp = () => {\n if (!state.isDragging) return;\n state.isDragging = false;\n el.classList.remove('is-dragging');\n const diff = state.startX - state.currentX;\n if (Math.abs(diff) > state.threshold) {\n if (diff > 0) next();\n else prev();\n }\n };\n\n el.addEventListener('mousedown', pointerDown);\n el.addEventListener('mousemove', pointerMove);\n el.addEventListener('mouseup', pointerUp);\n el.addEventListener('mouseleave', pointerUp);\n el.addEventListener('touchstart', pointerDown, { passive: true });\n el.addEventListener('touchmove', pointerMove, { passive: true });\n el.addEventListener('touchend', pointerUp);\n\n cleanup.push(\n () => el.removeEventListener('mousedown', pointerDown),\n () => el.removeEventListener('mousemove', pointerMove),\n () => el.removeEventListener('mouseup', pointerUp),\n () => el.removeEventListener('mouseleave', pointerUp),\n () => el.removeEventListener('touchstart', pointerDown),\n () => el.removeEventListener('touchmove', pointerMove),\n () => el.removeEventListener('touchend', pointerUp)\n );\n\n // Autoplay\n const startAutoplay = () => {\n stopAutoplay();\n state.autoplayTimer = setInterval(next, interval);\n };\n\n const stopAutoplay = () => {\n if (state.autoplayTimer) {\n clearInterval(state.autoplayTimer);\n state.autoplayTimer = null;\n }\n };\n\n if (autoplay) {\n startAutoplay();\n const pauseHandler = () => stopAutoplay();\n const resumeHandler = () => startAutoplay();\n el.addEventListener('mouseenter', pauseHandler);\n el.addEventListener('mouseleave', resumeHandler);\n el.addEventListener('focusin', pauseHandler);\n el.addEventListener('focusout', resumeHandler);\n cleanup.push(\n () => el.removeEventListener('mouseenter', pauseHandler),\n () => el.removeEventListener('mouseleave', resumeHandler),\n () => el.removeEventListener('focusin', pauseHandler),\n () => el.removeEventListener('focusout', resumeHandler),\n () => stopAutoplay()\n );\n }\n\n // Initial ARIA state\n goTo(0, false);\n\n this.instances.set(el, {\n cleanup: cleanup,\n goTo: goTo,\n next: next,\n prev: prev,\n getState: () => ({ ...state })\n });\n },\n\n goTo: function (el, index) {\n const instance = this.instances.get(el);\n if (instance) instance.goTo(index);\n },\n\n next: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.next();\n },\n\n prev: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.prev();\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('flow', Flow);\n }\n\n window.VanduoFlow = Flow;\n\n})();\n", "/**\n * Vanduo Framework - Bubble (Popover) Component\n * Click-triggered rich HTML popover, reuses tooltip positioning concepts\n */\n\n(function () {\n 'use strict';\n\n const Bubble = {\n instances: new Map(),\n _globalCleanups: [],\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-bubble], [data-vd-popover]');\n triggers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n\n if (this._globalCleanups.length === 0) {\n const outsideClick = (e) => {\n this.instances.forEach((inst, trigger) => {\n if (!inst.popover.contains(e.target) && !trigger.contains(e.target)) {\n this.hide(trigger);\n }\n });\n };\n const escHandler = (e) => {\n if (e.key === 'Escape') {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n }\n };\n document.addEventListener('click', outsideClick, true);\n document.addEventListener('keydown', escHandler);\n this._globalCleanups.push(\n () => document.removeEventListener('click', outsideClick, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n }\n },\n\n initInstance: function (trigger) {\n const cleanup = [];\n const placement = trigger.getAttribute('data-vd-bubble-placement') ||\n trigger.getAttribute('data-vd-popover-placement') || 'bottom';\n\n // Build popover element\n const popover = document.createElement('div');\n popover.className = 'vd-bubble-content';\n popover.setAttribute('role', 'dialog');\n popover.setAttribute('aria-modal', 'false');\n popover.setAttribute('data-placement', placement);\n\n const title = trigger.getAttribute('data-vd-bubble-title') ||\n trigger.getAttribute('data-vd-popover-title');\n const content = trigger.getAttribute('data-vd-bubble') ||\n trigger.getAttribute('data-vd-popover') || '';\n const htmlContent = trigger.getAttribute('data-vd-bubble-html') ||\n trigger.getAttribute('data-vd-popover-html');\n\n if (title) {\n const header = document.createElement('div');\n header.className = 'vd-bubble-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const closeBtn = document.createElement('button');\n closeBtn.className = 'vd-bubble-close';\n closeBtn.setAttribute('aria-label', 'Close');\n closeBtn.innerHTML = '×';\n header.appendChild(titleSpan);\n header.appendChild(closeBtn);\n popover.appendChild(header);\n\n const closeHandler = (e) => { e.stopPropagation(); this.hide(trigger); };\n closeBtn.addEventListener('click', closeHandler);\n cleanup.push(() => closeBtn.removeEventListener('click', closeHandler));\n }\n\n const body = document.createElement('div');\n body.className = 'vd-bubble-body';\n if (htmlContent) {\n if (typeof sanitizeHtml === 'function') {\n body.innerHTML = sanitizeHtml(htmlContent);\n } else {\n body.textContent = htmlContent;\n }\n } else {\n body.textContent = content;\n }\n popover.appendChild(body);\n\n document.body.appendChild(popover);\n\n // ARIA on trigger\n const popId = 'vd-bubble-' + Math.random().toString(36).slice(2, 9);\n popover.id = popId;\n trigger.setAttribute('aria-haspopup', 'dialog');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.setAttribute('aria-controls', popId);\n\n // Toggle on click\n const toggleHandler = (e) => {\n e.stopPropagation();\n if (popover.classList.contains('is-visible')) {\n this.hide(trigger);\n } else {\n this.hideAll();\n this.show(trigger);\n }\n };\n trigger.addEventListener('click', toggleHandler);\n cleanup.push(() => trigger.removeEventListener('click', toggleHandler));\n\n this.instances.set(trigger, { popover, cleanup, placement });\n },\n\n position: function (trigger, popover, placement) {\n const rect = trigger.getBoundingClientRect();\n const popRect = popover.getBoundingClientRect();\n const gap = 10;\n let top, left;\n\n switch (placement) {\n case 'top':\n top = rect.top - popRect.height - gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n break;\n case 'left':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.left - popRect.width - gap + window.scrollX;\n break;\n case 'right':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.right + gap + window.scrollX;\n break;\n default: // bottom\n top = rect.bottom + gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n }\n\n // Clamp to viewport\n left = Math.max(8, Math.min(left, window.innerWidth - popRect.width - 8));\n top = Math.max(8, top);\n\n popover.style.top = top + 'px';\n popover.style.left = left + 'px';\n },\n\n show: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n const { popover, placement } = instance;\n\n popover.style.display = 'block';\n popover.classList.add('is-visible');\n trigger.setAttribute('aria-expanded', 'true');\n\n requestAnimationFrame(() => {\n this.position(trigger, popover, placement);\n });\n\n trigger.dispatchEvent(new CustomEvent('bubble:show', { bubbles: true }));\n },\n\n hide: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.popover.classList.remove('is-visible');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.dispatchEvent(new CustomEvent('bubble:hide', { bubbles: true }));\n },\n\n hideAll: function () {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n },\n\n destroy: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n if (instance.popover.parentNode) {\n instance.popover.parentNode.removeChild(instance.popover);\n }\n trigger.removeAttribute('aria-haspopup');\n trigger.removeAttribute('aria-expanded');\n trigger.removeAttribute('aria-controls');\n this.instances.delete(trigger);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, trigger) => this.destroy(trigger));\n this._globalCleanups.forEach(fn => fn());\n this._globalCleanups = [];\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('bubble', Bubble);\n }\n\n window.VanduoBubble = Bubble;\n\n})();\n", "/**\n * Vanduo Framework - Waypoint (Scrollspy) Component\n * Highlights navigation links based on scroll position using IntersectionObserver\n */\n\n(function () {\n 'use strict';\n\n const Waypoint = {\n instances: new Map(),\n\n init: function () {\n const navs = document.querySelectorAll('[data-vd-waypoint-nav], [data-vd-scrollspy-nav]');\n navs.forEach(nav => {\n if (this.instances.has(nav)) return;\n this.initInstance(nav);\n });\n },\n\n initInstance: function (nav) {\n const links = Array.from(nav.querySelectorAll('a[href^=\"#\"]'));\n if (links.length === 0) return;\n\n const cleanup = [];\n const offset = parseInt(nav.getAttribute('data-vd-waypoint-offset') || '80', 10);\n const sections = [];\n\n links.forEach(link => {\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.setAttribute('data-vd-waypoint-section', '');\n sections.push({ id, link, section });\n }\n });\n\n if (sections.length === 0) return;\n\n const activeSections = new Set();\n\n const setActive = (id) => {\n links.forEach(l => l.classList.remove('is-active'));\n const target = links.find(l => l.getAttribute('href') === '#' + id);\n if (target) {\n target.classList.add('is-active');\n nav.dispatchEvent(new CustomEvent('waypoint:change', {\n detail: { activeId: id, link: target }\n }));\n }\n };\n\n const rootMargin = '-' + offset + 'px 0px -40% 0px';\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n activeSections.add(entry.target.id);\n } else {\n activeSections.delete(entry.target.id);\n }\n });\n\n // Pick the topmost visible section\n for (let i = 0; i < sections.length; i++) {\n if (activeSections.has(sections[i].id)) {\n setActive(sections[i].id);\n return;\n }\n }\n }, {\n rootMargin: rootMargin,\n threshold: 0\n });\n\n sections.forEach(s => observer.observe(s.section));\n\n // Smooth scroll on click\n links.forEach(link => {\n const clickHandler = (e) => {\n e.preventDefault();\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth' });\n setActive(id);\n }\n };\n link.addEventListener('click', clickHandler);\n cleanup.push(() => link.removeEventListener('click', clickHandler));\n });\n\n cleanup.push(() => observer.disconnect());\n\n this.instances.set(nav, { observer, cleanup, sections, setActive });\n },\n\n refresh: function (nav) {\n this.destroy(nav);\n this.initInstance(nav);\n },\n\n destroy: function (nav) {\n const instance = this.instances.get(nav);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(nav);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, nav) => this.destroy(nav));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('waypoint', Waypoint);\n }\n\n window.VanduoWaypoint = Waypoint;\n\n})();\n", "/**\n * Vanduo Framework - Ripple (Waves Effect) Component\n * Adds expanding circle animation on click at pointer position\n */\n\n(function () {\n 'use strict';\n\n const Ripple = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-ripple, [data-vd-ripple]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n\n const createWave = (e) => {\n const rect = el.getBoundingClientRect();\n const size = Math.max(rect.width, rect.height);\n const x = (e.clientX || (e.touches && e.touches[0].clientX) || rect.left + rect.width / 2) - rect.left - size / 2;\n const y = (e.clientY || (e.touches && e.touches[0].clientY) || rect.top + rect.height / 2) - rect.top - size / 2;\n\n const wave = document.createElement('span');\n wave.className = 'vd-ripple-wave';\n wave.style.width = size + 'px';\n wave.style.height = size + 'px';\n wave.style.left = x + 'px';\n wave.style.top = y + 'px';\n\n el.appendChild(wave);\n\n wave.addEventListener('animationend', () => {\n if (wave.parentNode) wave.parentNode.removeChild(wave);\n });\n };\n\n el.addEventListener('mousedown', createWave);\n el.addEventListener('touchstart', createWave, { passive: true });\n\n cleanup.push(\n () => el.removeEventListener('mousedown', createWave),\n () => el.removeEventListener('touchstart', createWave)\n );\n\n this.instances.set(el, { cleanup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n // Remove any lingering wave elements\n el.querySelectorAll('.vd-ripple-wave').forEach(w => w.remove());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('ripple', Ripple);\n }\n\n window.VanduoRipple = Ripple;\n\n})();\n", "/**\n * Vanduo Framework - Affix (Sticky) Component\n * Uses IntersectionObserver to toggle .is-stuck within the nearest scrollable parent\n */\n\n(function () {\n 'use strict';\n\n function isScrollable(element) {\n if (!element || element === document.body) return false;\n\n const style = window.getComputedStyle(element);\n const overflowY = style.overflowY;\n const overflowX = style.overflowX;\n const canScrollY = /(auto|scroll|overlay)/.test(overflowY) && element.scrollHeight > element.clientHeight;\n const canScrollX = /(auto|scroll|overlay)/.test(overflowX) && element.scrollWidth > element.clientWidth;\n\n return canScrollY || canScrollX;\n }\n\n function getScrollParent(element) {\n let parent = element.parentElement;\n\n while (parent && parent !== document.body && parent !== document.documentElement) {\n if (isScrollable(parent)) return parent;\n parent = parent.parentElement;\n }\n\n return null;\n }\n\n const Affix = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-affix, .vd-sticky, [data-vd-affix]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const parsedOffset = parseInt(el.getAttribute('data-vd-affix-offset') || '0', 10);\n const offset = Number.isNaN(parsedOffset) ? 0 : parsedOffset;\n const scrollParent = getScrollParent(el);\n let isStuck = false;\n\n const sentinel = document.createElement('div');\n sentinel.style.cssText = 'display:block;height:1px;margin-bottom:-1px;visibility:hidden;pointer-events:none;';\n el.parentNode.insertBefore(sentinel, el);\n\n el.style.setProperty('--affix-top-offset', offset + 'px');\n\n function stick() {\n if (isStuck) return;\n isStuck = true;\n el.classList.add('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:stuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n function unstick() {\n if (!isStuck) return;\n isStuck = false;\n el.classList.remove('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:unstuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n const observer = new IntersectionObserver(function (entries) {\n entries.forEach(entry => {\n if (!entry.isIntersecting) {\n stick();\n } else {\n unstick();\n }\n });\n }, {\n root: scrollParent,\n rootMargin: '-' + offset + 'px 0px 0px 0px',\n threshold: 0\n });\n\n observer.observe(sentinel);\n\n cleanup.push(\n () => observer.disconnect(),\n () => { if (sentinel.parentNode) sentinel.parentNode.removeChild(sentinel); },\n () => {\n el.classList.remove('is-stuck');\n el.style.removeProperty('--affix-top-offset');\n }\n );\n\n this.instances.set(el, { cleanup, observer, sentinel, scrollParent });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n el.classList.remove('is-stuck');\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('affix', Affix);\n }\n\n window.VanduoAffix = Affix;\n\n})();\n", "/**\n * Vanduo Framework - Suggest (Autocomplete) Component\n * Dropdown suggestion list with keyboard navigation, static/async data sources\n */\n\n(function () {\n 'use strict';\n\n /**\n * Escape HTML entities to prevent XSS when inserting into innerHTML\n * @param {string} text\n * @returns {string}\n */\n function _escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n const Suggest = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-suggest], [data-vd-autocomplete]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const minChars = parseInt(input.getAttribute('data-vd-suggest-min-chars') || '1', 10);\n const url = input.getAttribute('data-vd-suggest-url') || '';\n const staticData = input.getAttribute('data-vd-suggest') || input.getAttribute('data-vd-autocomplete') || '';\n let items = [];\n\n try { items = JSON.parse(staticData); } catch (_e) {\n items = staticData.split(',').map(s => s.trim()).filter(Boolean);\n }\n\n // Wrap input if not already wrapped\n let wrapper = input.closest('.vd-suggest-wrapper, .vd-autocomplete-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create dropdown list\n const list = document.createElement('ul');\n list.className = 'vd-suggest-list';\n list.setAttribute('role', 'listbox');\n const listId = 'vd-suggest-' + Math.random().toString(36).slice(2, 9);\n list.id = listId;\n wrapper.appendChild(list);\n\n // ARIA\n input.setAttribute('role', 'combobox');\n input.setAttribute('aria-autocomplete', 'list');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('aria-controls', listId);\n input.setAttribute('autocomplete', 'off');\n\n let highlighted = -1;\n let currentItems = [];\n let debounceTimer = null;\n\n const renderItems = (filtered, query) => {\n list.innerHTML = '';\n currentItems = filtered;\n highlighted = -1;\n\n if (filtered.length === 0) {\n const empty = document.createElement('li');\n empty.className = 'vd-suggest-empty';\n empty.textContent = 'No results';\n list.appendChild(empty);\n return;\n }\n\n filtered.forEach((item, i) => {\n const li = document.createElement('li');\n li.className = 'vd-suggest-item';\n li.setAttribute('role', 'option');\n li.id = listId + '-item-' + i;\n\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n if (query) {\n // Escape HTML first to prevent XSS, then highlight matches in the safe string\n const escaped = _escapeHtml(text);\n const re = new RegExp('(' + query.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n li.innerHTML = escaped.replace(re, '$1');\n } else {\n li.textContent = text;\n }\n\n li.addEventListener('click', () => selectItem(i));\n list.appendChild(li);\n });\n };\n\n const open = () => {\n list.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n list.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n highlighted = -1;\n input.removeAttribute('aria-activedescendant');\n };\n\n const selectItem = (index) => {\n const item = currentItems[index];\n const value = typeof item === 'object' ? (item.value || item.label || String(item)) : String(item);\n input.value = value;\n close();\n input.dispatchEvent(new CustomEvent('suggest:select', {\n detail: { value, item, index },\n bubbles: true\n }));\n };\n\n const highlight = (index) => {\n const listItems = list.querySelectorAll('.vd-suggest-item');\n listItems.forEach(li => li.classList.remove('is-highlighted'));\n if (index >= 0 && index < listItems.length) {\n highlighted = index;\n listItems[index].classList.add('is-highlighted');\n input.setAttribute('aria-activedescendant', listItems[index].id);\n listItems[index].scrollIntoView({ block: 'nearest' });\n }\n };\n\n const doSearch = async (query) => {\n if (query.length < minChars) { close(); return; }\n\n let filtered;\n if (url) {\n try {\n const separator = url.includes('?') ? '&' : '?';\n const res = await window.fetch(url + separator + 'q=' + encodeURIComponent(query));\n filtered = await res.json();\n } catch (_e) {\n filtered = [];\n }\n } else {\n const lower = query.toLowerCase();\n filtered = items.filter(item => {\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n return text.toLowerCase().includes(lower);\n });\n }\n\n renderItems(filtered, query);\n if (filtered.length > 0) open();\n else open(); // show \"no results\"\n };\n\n const inputHandler = () => {\n clearTimeout(debounceTimer);\n debounceTimer = setTimeout(() => doSearch(input.value), 200);\n };\n\n const keyHandler = (e) => {\n if (!list.classList.contains('is-open')) {\n if (e.key === 'ArrowDown') { doSearch(input.value); e.preventDefault(); }\n return;\n }\n\n const total = currentItems.length;\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n highlight(highlighted < total - 1 ? highlighted + 1 : 0);\n break;\n case 'ArrowUp':\n e.preventDefault();\n highlight(highlighted > 0 ? highlighted - 1 : total - 1);\n break;\n case 'Enter':\n e.preventDefault();\n if (highlighted >= 0) selectItem(highlighted);\n break;\n case 'Escape':\n close();\n break;\n }\n };\n\n const blurHandler = () => {\n setTimeout(close, 200);\n };\n\n input.addEventListener('input', inputHandler);\n input.addEventListener('keydown', keyHandler);\n input.addEventListener('blur', blurHandler);\n input.addEventListener('focus', () => { if (input.value.length >= minChars) doSearch(input.value); });\n\n cleanup.push(\n () => input.removeEventListener('input', inputHandler),\n () => input.removeEventListener('keydown', keyHandler),\n () => input.removeEventListener('blur', blurHandler),\n () => clearTimeout(debounceTimer),\n () => { if (list.parentNode) list.parentNode.removeChild(list); }\n );\n\n this.instances.set(input, { cleanup, list, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('suggest', Suggest);\n }\n\n window.VanduoSuggest = Suggest;\n\n})();\n", "/**\n * Vanduo Framework - Validate (Form Validation) Component\n * Declarative validation via data attributes with real-time and on-submit modes\n */\n\n(function () {\n 'use strict';\n\n const Validate = {\n instances: new Map(),\n\n rules: {\n required: (value) => value.trim().length > 0,\n email: (value) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value),\n url: (value) => { try { new URL(value); return true; } catch (_e) { return false; } },\n number: (value) => !isNaN(parseFloat(value)) && isFinite(value),\n min: (value, param) => value.length >= parseInt(param, 10),\n max: (value, param) => value.length <= parseInt(param, 10),\n minVal: (value, param) => parseFloat(value) >= parseFloat(param),\n maxVal: (value, param) => parseFloat(value) <= parseFloat(param),\n pattern: (value, param) => {\n try {\n // Cap regex length to prevent ReDoS from excessively complex patterns\n if (param.length > 100) return false;\n return new RegExp(param).test(value);\n } catch (_e) { return false; }\n },\n match: (value, param) => {\n try {\n const escaped = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(param) : param;\n const other = document.querySelector('[name=\"' + escaped + '\"]');\n return other ? value === other.value : false;\n } catch (_e) {\n return false;\n }\n }\n },\n\n messages: {\n required: 'This field is required',\n email: 'Please enter a valid email address',\n url: 'Please enter a valid URL',\n number: 'Please enter a valid number',\n min: 'Minimum {0} characters required',\n max: 'Maximum {0} characters allowed',\n minVal: 'Value must be at least {0}',\n maxVal: 'Value must be at most {0}',\n pattern: 'Invalid format',\n match: 'Fields do not match'\n },\n\n init: function () {\n const forms = document.querySelectorAll('[data-vd-validate], .vd-validate');\n forms.forEach(form => {\n if (this.instances.has(form)) return;\n this.initInstance(form);\n });\n },\n\n initInstance: function (form) {\n const cleanup = [];\n const mode = form.getAttribute('data-vd-validate-mode') || 'blur'; // blur | input | submit\n const fields = form.querySelectorAll('[data-vd-rules]');\n\n const validateField = (field) => {\n const rulesStr = field.getAttribute('data-vd-rules') || '';\n const rules = rulesStr.split('|').map(r => r.trim()).filter(Boolean);\n const value = field.value;\n const errors = [];\n\n for (const rule of rules) {\n const [name, ...params] = rule.split(':');\n const param = params.join(':');\n const validator = this.rules[name];\n\n if (validator && !validator(value, param)) {\n const customMsg = field.getAttribute('data-vd-msg-' + name);\n let msg = customMsg || this.messages[name] || 'Invalid';\n if (param) msg = msg.replace('{0}', param);\n errors.push(msg);\n break; // one error at a time\n }\n }\n\n this.setFieldState(field, errors);\n return errors.length === 0;\n };\n\n const validateAll = () => {\n let valid = true;\n fields.forEach(field => {\n if (!validateField(field)) valid = false;\n });\n return valid;\n };\n\n // Per-field listeners\n fields.forEach(field => {\n if (mode === 'input' || mode === 'blur') {\n const eventType = mode === 'input' ? 'input' : 'blur';\n const handler = () => validateField(field);\n field.addEventListener(eventType, handler);\n cleanup.push(() => field.removeEventListener(eventType, handler));\n\n if (mode === 'blur') {\n const inputClear = () => {\n if (field.classList.contains('is-invalid') || field.classList.contains('is-valid')) {\n validateField(field);\n }\n };\n field.addEventListener('input', inputClear);\n cleanup.push(() => field.removeEventListener('input', inputClear));\n }\n }\n });\n\n // Form submit\n const submitHandler = (e) => {\n const valid = validateAll();\n if (!valid) {\n e.preventDefault();\n e.stopPropagation();\n // Focus first invalid field\n const firstInvalid = form.querySelector('.is-invalid');\n if (firstInvalid) firstInvalid.focus();\n }\n form.dispatchEvent(new CustomEvent('validate:submit', {\n detail: { valid },\n bubbles: true\n }));\n };\n\n form.addEventListener('submit', submitHandler);\n cleanup.push(() => form.removeEventListener('submit', submitHandler));\n\n this.instances.set(form, { cleanup, validateAll, validateField });\n },\n\n setFieldState: function (field, errors) {\n const wrapper = field.closest('.vd-form-group') || field.parentElement;\n let errorEl = wrapper.querySelector('.vd-validate-error');\n\n field.classList.remove('is-valid', 'is-invalid');\n\n if (errors.length > 0) {\n field.classList.add('is-invalid');\n field.setAttribute('aria-invalid', 'true');\n if (!errorEl) {\n errorEl = document.createElement('div');\n errorEl.className = 'vd-validate-error';\n errorEl.id = 'vd-err-' + Math.random().toString(36).slice(2, 9);\n errorEl.setAttribute('role', 'alert');\n wrapper.appendChild(errorEl);\n }\n errorEl.textContent = errors[0];\n errorEl.style.display = '';\n field.setAttribute('aria-describedby', errorEl.id);\n } else if (field.value.trim()) {\n field.classList.add('is-valid');\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n } else {\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n }\n },\n\n validateForm: function (form) {\n const instance = this.instances.get(form);\n return instance ? instance.validateAll() : false;\n },\n\n addRule: function (name, validator, message) {\n this.rules[name] = validator;\n if (message) this.messages[name] = message;\n },\n\n destroy: function (form) {\n const instance = this.instances.get(form);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(form);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, form) => this.destroy(form));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('validate', Validate);\n }\n\n window.VanduoValidate = Validate;\n\n})();\n", "/**\n * Vanduo Framework - Datepicker Component\n * Calendar popup attached to input field with month/year navigation\n */\n\n(function () {\n 'use strict';\n\n const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\n const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];\n\n const Datepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-datepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const format = input.getAttribute('data-vd-datepicker-format') || 'yyyy-mm-dd';\n const minStr = input.getAttribute('data-vd-datepicker-min');\n const maxStr = input.getAttribute('data-vd-datepicker-max');\n const minDate = minStr ? new Date(minStr) : null;\n const maxDate = maxStr ? new Date(maxStr) : null;\n\n const today = new Date();\n let viewYear = today.getFullYear();\n let viewMonth = today.getMonth();\n let selectedDate = null;\n let viewMode = 'days'; // days | months | years\n\n // Parse existing value\n if (input.value) {\n const parsed = new Date(input.value);\n if (!isNaN(parsed.getTime())) {\n selectedDate = parsed;\n viewYear = parsed.getFullYear();\n viewMonth = parsed.getMonth();\n }\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-datepicker-popup';\n popup.setAttribute('role', 'dialog');\n popup.setAttribute('aria-label', 'Choose date');\n\n const wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n wrapper.appendChild(popup);\n\n const formatDate = (d) => {\n const yyyy = d.getFullYear();\n const mm = String(d.getMonth() + 1).padStart(2, '0');\n const dd = String(d.getDate()).padStart(2, '0');\n return format.replace('yyyy', yyyy).replace('mm', mm).replace('dd', dd);\n };\n\n const isDisabled = (d) => {\n if (minDate && d < minDate) return true;\n if (maxDate && d > maxDate) return true;\n return false;\n };\n\n const isSameDay = (a, b) => a && b &&\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate();\n\n const render = () => {\n popup.innerHTML = '';\n\n // Header\n const header = document.createElement('div');\n header.className = 'vd-datepicker-header';\n\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-datepicker-prev';\n prevBtn.innerHTML = '‹';\n prevBtn.setAttribute('aria-label', 'Previous');\n\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-datepicker-next';\n nextBtn.innerHTML = '›';\n nextBtn.setAttribute('aria-label', 'Next');\n\n const title = document.createElement('span');\n title.className = 'vd-datepicker-title';\n\n if (viewMode === 'days') {\n title.textContent = MONTHS[viewMonth] + ' ' + viewYear;\n title.addEventListener('click', () => { viewMode = 'months'; render(); });\n prevBtn.addEventListener('click', () => { viewMonth--; if (viewMonth < 0) { viewMonth = 11; viewYear--; } render(); });\n nextBtn.addEventListener('click', () => { viewMonth++; if (viewMonth > 11) { viewMonth = 0; viewYear++; } render(); });\n } else if (viewMode === 'months') {\n title.textContent = String(viewYear);\n title.addEventListener('click', () => { viewMode = 'years'; render(); });\n prevBtn.addEventListener('click', () => { viewYear--; render(); });\n nextBtn.addEventListener('click', () => { viewYear++; render(); });\n } else {\n const decadeStart = Math.floor(viewYear / 10) * 10;\n title.textContent = decadeStart + ' - ' + (decadeStart + 9);\n prevBtn.addEventListener('click', () => { viewYear -= 10; render(); });\n nextBtn.addEventListener('click', () => { viewYear += 10; render(); });\n }\n\n header.appendChild(prevBtn);\n header.appendChild(title);\n header.appendChild(nextBtn);\n popup.appendChild(header);\n\n if (viewMode === 'days') {\n // Weekday headers\n const weekdays = document.createElement('div');\n weekdays.className = 'vd-datepicker-weekdays';\n DAYS.forEach(d => {\n const span = document.createElement('span');\n span.textContent = d;\n weekdays.appendChild(span);\n });\n popup.appendChild(weekdays);\n\n // Days grid\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-days';\n\n const firstDay = new Date(viewYear, viewMonth, 1).getDay();\n const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();\n const daysInPrev = new Date(viewYear, viewMonth, 0).getDate();\n\n // Previous month padding\n for (let i = firstDay - 1; i >= 0; i--) {\n const btn = createDayBtn(daysInPrev - i, true);\n grid.appendChild(btn);\n }\n\n // Current month\n for (let d = 1; d <= daysInMonth; d++) {\n const date = new Date(viewYear, viewMonth, d);\n const btn = createDayBtn(d, false, date);\n grid.appendChild(btn);\n }\n\n // Next month padding\n const totalCells = firstDay + daysInMonth;\n const remaining = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7);\n for (let i = 1; i <= remaining; i++) {\n const btn = createDayBtn(i, true);\n grid.appendChild(btn);\n }\n\n popup.appendChild(grid);\n } else if (viewMode === 'months') {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-months';\n MONTHS.forEach((name, i) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-month-btn';\n btn.textContent = name.slice(0, 3);\n if (selectedDate && selectedDate.getFullYear() === viewYear && selectedDate.getMonth() === i) {\n btn.classList.add('is-selected');\n }\n btn.addEventListener('click', () => { viewMonth = i; viewMode = 'days'; render(); });\n grid.appendChild(btn);\n });\n popup.appendChild(grid);\n } else {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-years';\n const decadeStart = Math.floor(viewYear / 10) * 10;\n for (let y = decadeStart - 1; y <= decadeStart + 10; y++) {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-year-btn';\n btn.textContent = y;\n if (selectedDate && selectedDate.getFullYear() === y) btn.classList.add('is-selected');\n if (y < decadeStart || y > decadeStart + 9) btn.style.opacity = '0.4';\n btn.addEventListener('click', () => { viewYear = y; viewMode = 'months'; render(); });\n grid.appendChild(btn);\n }\n popup.appendChild(grid);\n }\n };\n\n const createDayBtn = (day, outside, date) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-day';\n btn.textContent = day;\n\n if (outside) {\n btn.classList.add('is-outside');\n btn.tabIndex = -1;\n return btn;\n }\n\n if (date && isSameDay(date, today)) btn.classList.add('is-today');\n if (date && isSameDay(date, selectedDate)) btn.classList.add('is-selected');\n if (date && isDisabled(date)) {\n btn.classList.add('is-disabled');\n return btn;\n }\n\n if (date) {\n btn.addEventListener('click', () => {\n selectedDate = date;\n viewYear = date.getFullYear();\n viewMonth = date.getMonth();\n input.value = formatDate(date);\n close();\n input.dispatchEvent(new CustomEvent('datepicker:select', {\n detail: { date, formatted: input.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n }\n\n return btn;\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n viewMode = 'days';\n };\n\n // Events\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'dialog');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close, popup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('datepicker', Datepicker);\n }\n\n window.VanduoDatepicker = Datepicker;\n\n})();\n", "/**\n * Vanduo Framework - Timepicker Component\n * Dropdown time selection with 12h/24h format and configurable step intervals\n */\n\n(function () {\n 'use strict';\n\n const Timepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-timepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const is24h = input.getAttribute('data-vd-timepicker-format') === '24h';\n const step = parseInt(input.getAttribute('data-vd-timepicker-step') || '30', 10);\n\n // Create wrapper\n let wrapper = input.closest('.vd-suggest-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-timepicker-popup';\n popup.setAttribute('role', 'listbox');\n wrapper.appendChild(popup);\n\n // Generate time slots\n const times = [];\n for (let h = 0; h < 24; h++) {\n for (let m = 0; m < 60; m += step) {\n const hh24 = String(h).padStart(2, '0');\n const mm = String(m).padStart(2, '0');\n\n if (is24h) {\n times.push({ display: hh24 + ':' + mm, value: hh24 + ':' + mm });\n } else {\n const period = h < 12 ? 'AM' : 'PM';\n const h12 = h === 0 ? 12 : (h > 12 ? h - 12 : h);\n const display = h12 + ':' + mm + ' ' + period;\n times.push({ display, value: hh24 + ':' + mm });\n }\n }\n }\n\n const render = () => {\n popup.innerHTML = '';\n times.forEach(t => {\n const item = document.createElement('div');\n item.className = 'vd-timepicker-item';\n item.setAttribute('role', 'option');\n item.textContent = t.display;\n\n if (input.value === t.value || input.value === t.display) {\n item.classList.add('is-selected');\n }\n\n item.addEventListener('click', () => {\n input.value = t.display;\n popup.querySelectorAll('.vd-timepicker-item').forEach(i => i.classList.remove('is-selected'));\n item.classList.add('is-selected');\n close();\n input.dispatchEvent(new CustomEvent('timepicker:select', {\n detail: { display: t.display, value: t.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n\n popup.appendChild(item);\n });\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n // Scroll to selected\n const selected = popup.querySelector('.is-selected');\n if (selected) selected.scrollIntoView({ block: 'center' });\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n };\n\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'listbox');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n input.readOnly = true;\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('timepicker', Timepicker);\n }\n\n window.VanduoTimepicker = Timepicker;\n\n})();\n", "/**\n * Vanduo Framework - Stepper Component\n * Multi-step progress indicator with state management\n */\n\n(function () {\n 'use strict';\n\n const Stepper = {\n instances: new Map(),\n\n init: function () {\n const steppers = document.querySelectorAll('.vd-stepper');\n steppers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const items = Array.from(el.querySelectorAll('.vd-stepper-item'));\n const isClickable = el.classList.contains('vd-stepper-clickable');\n let currentIndex = items.findIndex(i => i.classList.contains('is-active'));\n if (currentIndex === -1) currentIndex = 0;\n\n const setStep = (index) => {\n if (index < 0 || index >= items.length) return;\n const prev = currentIndex;\n currentIndex = index;\n\n items.forEach((item, i) => {\n item.classList.remove('is-active', 'is-completed');\n if (i < index) item.classList.add('is-completed');\n else if (i === index) item.classList.add('is-active');\n });\n\n el.dispatchEvent(new CustomEvent('stepper:change', {\n detail: { current: index, previous: prev, total: items.length },\n bubbles: true\n }));\n };\n\n if (isClickable) {\n items.forEach((item, i) => {\n const handler = () => setStep(i);\n item.addEventListener('click', handler);\n cleanup.push(() => item.removeEventListener('click', handler));\n });\n }\n\n // Initialize current state\n setStep(currentIndex);\n\n this.instances.set(el, {\n cleanup,\n setStep,\n next: () => setStep(currentIndex + 1),\n prev: () => setStep(currentIndex - 1),\n getCurrent: () => currentIndex\n });\n },\n\n setStep: function (el, index) {\n const inst = this.instances.get(el);\n if (inst) inst.setStep(index);\n },\n\n next: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.next();\n },\n\n prev: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.prev();\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('stepper', Stepper);\n }\n\n window.VanduoStepper = Stepper;\n\n})();\n", "/**\n * Vanduo Framework - Rating Component\n * Star-based rating input with hover preview and read-only mode\n */\n\n(function () {\n 'use strict';\n\n const Rating = {\n instances: new Map(),\n\n init: function () {\n const ratings = document.querySelectorAll('[data-vd-rating]');\n ratings.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const max = parseInt(el.getAttribute('data-vd-rating-max') || '5', 10);\n const initialValue = parseFloat(el.getAttribute('data-vd-rating-value') || '0');\n const readonly = el.classList.contains('vd-rating-readonly') || el.hasAttribute('data-vd-rating-readonly');\n let currentValue = initialValue;\n\n el.classList.add('vd-rating');\n el.setAttribute('role', 'radiogroup');\n el.setAttribute('aria-label', el.getAttribute('aria-label') || 'Rating');\n\n // Clear existing stars\n el.innerHTML = '';\n\n // Create stars\n const stars = [];\n for (let i = 1; i <= max; i++) {\n const star = document.createElement('button');\n star.type = 'button';\n star.className = 'vd-rating-star';\n star.setAttribute('role', 'radio');\n star.setAttribute('aria-label', i + ' star' + (i > 1 ? 's' : ''));\n star.setAttribute('aria-checked', i <= currentValue ? 'true' : 'false');\n if (readonly) star.tabIndex = -1;\n stars.push(star);\n el.appendChild(star);\n }\n\n // Value display\n const valueDisplay = document.createElement('span');\n valueDisplay.className = 'vd-rating-value';\n valueDisplay.textContent = currentValue > 0 ? currentValue.toString() : '';\n el.appendChild(valueDisplay);\n\n const updateStars = (value) => {\n stars.forEach((star, i) => {\n star.classList.remove('is-active', 'is-half');\n const starNum = i + 1;\n if (starNum <= Math.floor(value)) {\n star.classList.add('is-active');\n } else if (starNum - 0.5 <= value) {\n star.classList.add('is-half');\n }\n star.setAttribute('aria-checked', starNum <= value ? 'true' : 'false');\n });\n valueDisplay.textContent = value > 0 ? value.toString() : '';\n };\n\n updateStars(currentValue);\n\n if (!readonly) {\n stars.forEach((star, i) => {\n const enterHandler = () => {\n stars.forEach((s, j) => {\n s.classList.toggle('is-hovered', j <= i);\n });\n };\n const leaveHandler = () => {\n stars.forEach(s => s.classList.remove('is-hovered'));\n };\n const clickHandler = () => {\n currentValue = i + 1;\n el.setAttribute('data-vd-rating-value', currentValue);\n updateStars(currentValue);\n el.dispatchEvent(new CustomEvent('rating:change', {\n detail: { value: currentValue, max },\n bubbles: true\n }));\n };\n\n star.addEventListener('mouseenter', enterHandler);\n star.addEventListener('mouseleave', leaveHandler);\n star.addEventListener('click', clickHandler);\n\n cleanup.push(\n () => star.removeEventListener('mouseenter', enterHandler),\n () => star.removeEventListener('mouseleave', leaveHandler),\n () => star.removeEventListener('click', clickHandler)\n );\n });\n\n // Keyboard\n const keyHandler = (e) => {\n if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n e.preventDefault();\n if (currentValue < max) {\n currentValue++;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n e.preventDefault();\n if (currentValue > 1) {\n currentValue--;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n }\n };\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n }\n\n this.instances.set(el, {\n cleanup,\n getValue: () => currentValue,\n setValue: (v) => { currentValue = v; updateStars(v); }\n });\n },\n\n getValue: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getValue() : 0;\n },\n\n setValue: function (el, value) {\n const inst = this.instances.get(el);\n if (inst) inst.setValue(value);\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('rating', Rating);\n }\n\n window.VanduoRating = Rating;\n\n})();\n", "/**\n * Vanduo Framework - Transfer (Dual-list) Component\n * Source-to-target list transfer with search, select-all, and move actions\n */\n\n(function () {\n 'use strict';\n\n const Transfer = {\n instances: new Map(),\n\n init: function () {\n const transfers = document.querySelectorAll('[data-vd-transfer]');\n transfers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n el.classList.add('vd-transfer');\n\n let sourceData, targetData;\n try {\n const raw = JSON.parse(el.getAttribute('data-vd-transfer') || '[]');\n sourceData = raw.map((item, i) => ({\n id: item.id || 'item-' + i,\n label: item.label || item.text || String(item),\n selected: false\n }));\n } catch (_e) {\n sourceData = [];\n }\n targetData = [];\n\n const sourceSelected = new Set();\n const targetSelected = new Set();\n\n const render = () => {\n el.innerHTML = '';\n\n // Source panel\n const sourcePanel = createPanel('Source', sourceData, sourceSelected, 'source');\n // Actions\n const actions = document.createElement('div');\n actions.className = 'vd-transfer-actions';\n\n const moveRightBtn = document.createElement('button');\n moveRightBtn.type = 'button';\n moveRightBtn.className = 'vd-transfer-btn';\n moveRightBtn.innerHTML = '›';\n moveRightBtn.setAttribute('aria-label', 'Move to target');\n moveRightBtn.disabled = sourceSelected.size === 0;\n moveRightBtn.addEventListener('click', () => moveRight());\n\n const moveLeftBtn = document.createElement('button');\n moveLeftBtn.type = 'button';\n moveLeftBtn.className = 'vd-transfer-btn';\n moveLeftBtn.innerHTML = '‹';\n moveLeftBtn.setAttribute('aria-label', 'Move to source');\n moveLeftBtn.disabled = targetSelected.size === 0;\n moveLeftBtn.addEventListener('click', () => moveLeft());\n\n actions.appendChild(moveRightBtn);\n actions.appendChild(moveLeftBtn);\n\n // Target panel\n const targetPanel = createPanel('Target', targetData, targetSelected, 'target');\n\n el.appendChild(sourcePanel);\n el.appendChild(actions);\n el.appendChild(targetPanel);\n };\n\n const createPanel = (title, data, selected, _side) => {\n const panel = document.createElement('div');\n panel.className = 'vd-transfer-panel';\n\n const header = document.createElement('div');\n header.className = 'vd-transfer-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const count = document.createElement('span');\n count.className = 'vd-transfer-count';\n count.textContent = selected.size + '/' + data.length;\n header.appendChild(titleSpan);\n header.appendChild(count);\n panel.appendChild(header);\n\n // Search\n const searchDiv = document.createElement('div');\n searchDiv.className = 'vd-transfer-search';\n const searchInput = document.createElement('input');\n searchInput.type = 'text';\n searchInput.placeholder = 'Search...';\n searchInput.setAttribute('aria-label', 'Search ' + title.toLowerCase());\n searchDiv.appendChild(searchInput);\n panel.appendChild(searchDiv);\n\n // List\n const list = document.createElement('ul');\n list.className = 'vd-transfer-list';\n list.setAttribute('role', 'listbox');\n\n const renderList = (filter) => {\n list.innerHTML = '';\n const filtered = filter ? data.filter(d => {\n const label = (d.label || d.text || String(d)).toLowerCase();\n return label.includes(filter.toLowerCase());\n }) : data;\n filtered.forEach(item => {\n const li = document.createElement('li');\n li.className = 'vd-transfer-item';\n li.setAttribute('role', 'option');\n if (selected.has(item.id)) li.classList.add('is-selected');\n\n const checkbox = document.createElement('input');\n checkbox.type = 'checkbox';\n checkbox.checked = selected.has(item.id);\n checkbox.setAttribute('aria-label', item.label);\n\n const label = document.createElement('span');\n label.textContent = item.label;\n\n li.addEventListener('click', () => {\n if (selected.has(item.id)) selected.delete(item.id);\n else selected.add(item.id);\n render();\n });\n\n li.appendChild(checkbox);\n li.appendChild(label);\n list.appendChild(li);\n });\n };\n\n searchInput.addEventListener('input', () => renderList(searchInput.value));\n renderList('');\n\n panel.appendChild(list);\n return panel;\n };\n\n const moveRight = () => {\n const toMove = sourceData.filter(d => sourceSelected.has(d.id));\n sourceData = sourceData.filter(d => !sourceSelected.has(d.id));\n targetData = targetData.concat(toMove);\n sourceSelected.clear();\n render();\n fireChange();\n };\n\n const moveLeft = () => {\n const toMove = targetData.filter(d => targetSelected.has(d.id));\n targetData = targetData.filter(d => !targetSelected.has(d.id));\n sourceData = sourceData.concat(toMove);\n targetSelected.clear();\n render();\n fireChange();\n };\n\n const fireChange = () => {\n el.dispatchEvent(new CustomEvent('transfer:change', {\n detail: {\n source: sourceData.map(d => d.id),\n target: targetData.map(d => d.id)\n },\n bubbles: true\n }));\n };\n\n render();\n\n this.instances.set(el, {\n cleanup,\n getTarget: () => targetData.map(d => d.id),\n getSource: () => sourceData.map(d => d.id)\n });\n },\n\n getSelected: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getTarget() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('transfer', Transfer);\n }\n\n window.VanduoTransfer = Transfer;\n\n})();\n", "/**\n * Vanduo Framework - Tree View Component\n * Hierarchical collapsible tree with checkbox selection and keyboard navigation\n */\n\n(function () {\n 'use strict';\n\n const Tree = {\n instances: new Map(),\n\n init: function () {\n const trees = document.querySelectorAll('[data-vd-tree]');\n trees.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const cascade = el.getAttribute('data-vd-tree-cascade') !== 'false';\n\n let data;\n try { data = JSON.parse(el.getAttribute('data-vd-tree') || '[]'); } catch (_e) { data = []; }\n\n el.classList.add('vd-tree');\n el.setAttribute('role', 'tree');\n\n const render = (items, parent) => {\n parent.innerHTML = '';\n items.forEach(item => {\n const node = document.createElement('li');\n node.className = 'vd-tree-node';\n node.setAttribute('role', 'treeitem');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n if (item.open) node.classList.add('is-open');\n\n const content = document.createElement('div');\n content.className = 'vd-tree-node-content';\n\n // Toggle\n if (item.children && item.children.length > 0) {\n const toggle = document.createElement('button');\n toggle.type = 'button';\n toggle.className = 'vd-tree-toggle';\n toggle.setAttribute('aria-label', 'Toggle');\n toggle.addEventListener('click', (e) => {\n e.stopPropagation();\n item.open = !item.open;\n node.classList.toggle('is-open');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n });\n content.appendChild(toggle);\n } else {\n const ph = document.createElement('span');\n ph.className = 'vd-tree-toggle-placeholder';\n content.appendChild(ph);\n }\n\n // Checkbox\n if (el.hasAttribute('data-vd-tree-checkbox')) {\n const cb = document.createElement('input');\n cb.type = 'checkbox';\n cb.className = 'vd-tree-checkbox';\n cb.checked = !!item.checked;\n cb.setAttribute('aria-label', item.label);\n cb.addEventListener('change', (e) => {\n e.stopPropagation();\n item.checked = cb.checked;\n if (cascade && item.children) {\n setChildChecked(item.children, cb.checked);\n render(data, el);\n }\n el.dispatchEvent(new CustomEvent('tree:check', {\n detail: { id: item.id, checked: cb.checked, label: item.label },\n bubbles: true\n }));\n });\n content.appendChild(cb);\n }\n\n // Icon\n if (item.icon) {\n const icon = document.createElement('span');\n icon.className = 'vd-tree-icon ' + item.icon;\n content.appendChild(icon);\n }\n\n // Label\n const label = document.createElement('span');\n label.className = 'vd-tree-label';\n label.textContent = item.label || '';\n content.appendChild(label);\n\n node.appendChild(content);\n\n // Children\n if (item.children && item.children.length > 0) {\n const childList = document.createElement('ul');\n childList.className = 'vd-tree-children';\n childList.setAttribute('role', 'group');\n render(item.children, childList);\n node.appendChild(childList);\n }\n\n parent.appendChild(node);\n });\n };\n\n const setChildChecked = (items, checked) => {\n items.forEach(item => {\n item.checked = checked;\n if (item.children) setChildChecked(item.children, checked);\n });\n };\n\n // Keyboard\n const keyHandler = (e) => {\n const focused = document.activeElement;\n if (!el.contains(focused)) return;\n\n const nodes = Array.from(el.querySelectorAll('.vd-tree-node-content'));\n const idx = nodes.indexOf(focused.closest('.vd-tree-node-content'));\n if (idx === -1) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (idx < nodes.length - 1) {\n const next = nodes[idx + 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (next) next.focus();\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (idx > 0) {\n const prev = nodes[idx - 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (prev) prev.focus();\n }\n break;\n }\n };\n\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n render(data, el);\n\n this.instances.set(el, {\n cleanup,\n getData: () => data,\n getChecked: () => {\n const checked = [];\n const collect = (items) => {\n items.forEach(i => {\n if (i.checked) checked.push(i.id || i.label);\n if (i.children) collect(i.children);\n });\n };\n collect(data);\n return checked;\n }\n });\n },\n\n getChecked: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getChecked() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tree', Tree);\n }\n\n window.VanduoTree = Tree;\n\n})();\n", "/**\n * Vanduo Framework - Spotlight (Feature Discovery) Component\n * Guided tour with overlay highlight and step-through tooltip\n */\n\n(function () {\n 'use strict';\n\n const Spotlight = {\n _active: false,\n _steps: [],\n _currentStep: 0,\n _elements: {},\n _cleanup: [],\n _boundTriggers: new WeakMap(),\n _triggerElement: null,\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-spotlight]');\n\n triggers.forEach(trigger => {\n if (this._boundTriggers.has(trigger)) return;\n\n const clickHandler = (event) => {\n event.preventDefault();\n\n const steps = this._parseSteps(trigger.getAttribute('data-vd-spotlight'));\n if (steps.length === 0) return;\n\n this.start(steps, { trigger });\n };\n\n trigger.addEventListener('click', clickHandler);\n this._boundTriggers.set(trigger, clickHandler);\n });\n },\n\n _parseSteps: function (raw) {\n if (typeof raw !== 'string' || raw.trim() === '') return [];\n\n try {\n const parsed = JSON.parse(raw);\n return this._normalizeSteps(parsed);\n } catch (error) {\n console.error('VanduoSpotlight: invalid data-vd-spotlight payload.', error);\n return [];\n }\n },\n\n _normalizeStep: function (step) {\n if (!step || typeof step !== 'object') return null;\n\n const target = step.target;\n const hasSelectorTarget = typeof target === 'string' && target.trim() !== '';\n const hasElementTarget = typeof Element !== 'undefined' && target instanceof Element;\n\n if (!hasSelectorTarget && !hasElementTarget) return null;\n\n const title = typeof step.title === 'string' ? step.title : '';\n const description = typeof step.description === 'string'\n ? step.description\n : (typeof step.content === 'string' ? step.content : '');\n\n return {\n target,\n title,\n description\n };\n },\n\n _normalizeSteps: function (steps) {\n if (!Array.isArray(steps)) return [];\n\n return steps\n .map(step => this._normalizeStep(step))\n .filter(Boolean);\n },\n\n start: function (steps, options) {\n if (this._active) this.stop();\n\n const normalizedSteps = this._normalizeSteps(steps);\n if (normalizedSteps.length === 0) return;\n\n const startOptions = options || {};\n\n this._steps = normalizedSteps;\n this._currentStep = 0;\n this._active = true;\n this._triggerElement = startOptions.trigger || (document.activeElement instanceof HTMLElement ? document.activeElement : null);\n\n // Create overlay\n const overlay = document.createElement('div');\n overlay.className = 'vd-spotlight-overlay';\n overlay.setAttribute('aria-hidden', 'true');\n document.body.appendChild(overlay);\n\n // Create tooltip\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-spotlight-tooltip';\n tooltip.setAttribute('role', 'dialog');\n tooltip.setAttribute('aria-modal', 'true');\n tooltip.tabIndex = -1;\n document.body.appendChild(tooltip);\n\n this._elements = { overlay, tooltip };\n\n // ESC to close\n const escHandler = (e) => { if (e.key === 'Escape') this.stop(); };\n document.addEventListener('keydown', escHandler);\n this._cleanup.push(() => document.removeEventListener('keydown', escHandler));\n\n // Overlay click to close\n overlay.addEventListener('click', () => this.stop());\n\n this._showStep(this._currentStep);\n },\n\n _showStep: function (index) {\n const step = this._steps[index];\n if (!step) return;\n\n const target = typeof step.target === 'string' ? document.querySelector(step.target) : step.target;\n const { tooltip } = this._elements;\n\n // Remove previous highlight\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n // Highlight target\n if (target) {\n target.classList.add('vd-spotlight-target');\n target.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n\n // Build tooltip content\n const total = this._steps.length;\n tooltip.innerHTML = '';\n tooltip.removeAttribute('aria-labelledby');\n tooltip.removeAttribute('aria-describedby');\n\n if (step.title) {\n const title = document.createElement('h4');\n title.className = 'vd-spotlight-title';\n title.id = 'vd-spotlight-title-' + index + '-' + Date.now();\n title.textContent = step.title;\n tooltip.appendChild(title);\n tooltip.setAttribute('aria-labelledby', title.id);\n }\n\n if (step.description) {\n const desc = document.createElement('p');\n desc.className = 'vd-spotlight-description';\n desc.id = 'vd-spotlight-description-' + index + '-' + Date.now();\n desc.textContent = step.description;\n tooltip.appendChild(desc);\n tooltip.setAttribute('aria-describedby', desc.id);\n }\n\n // Footer\n const footer = document.createElement('div');\n footer.className = 'vd-spotlight-footer';\n footer.setAttribute('aria-label', 'Step ' + (index + 1) + ' of ' + total);\n\n const counter = document.createElement('span');\n counter.className = 'vd-spotlight-counter';\n counter.textContent = (index + 1) + ' / ' + total;\n\n const actions = document.createElement('div');\n actions.className = 'vd-spotlight-actions';\n\n if (index > 0) {\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-spotlight-btn';\n prevBtn.textContent = 'Back';\n prevBtn.addEventListener('click', () => this.prev());\n actions.appendChild(prevBtn);\n }\n\n const skipBtn = document.createElement('button');\n skipBtn.type = 'button';\n skipBtn.className = 'vd-spotlight-btn';\n skipBtn.textContent = 'Skip';\n skipBtn.addEventListener('click', () => this.stop());\n actions.appendChild(skipBtn);\n\n if (index < total - 1) {\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n nextBtn.textContent = 'Next';\n nextBtn.addEventListener('click', () => this.next());\n actions.appendChild(nextBtn);\n } else {\n const doneBtn = document.createElement('button');\n doneBtn.type = 'button';\n doneBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n doneBtn.textContent = 'Done';\n doneBtn.addEventListener('click', () => this.stop());\n actions.appendChild(doneBtn);\n }\n\n footer.appendChild(counter);\n footer.appendChild(actions);\n tooltip.appendChild(footer);\n\n // Position tooltip near target\n if (target) {\n requestAnimationFrame(() => {\n const rect = target.getBoundingClientRect();\n const tRect = tooltip.getBoundingClientRect();\n let top = rect.bottom + 12 + window.scrollY;\n let left = rect.left + (rect.width - tRect.width) / 2 + window.scrollX;\n\n // Keep in viewport\n left = Math.max(8, Math.min(left, window.innerWidth - tRect.width - 8));\n if (top + tRect.height > window.innerHeight + window.scrollY) {\n top = rect.top - tRect.height - 12 + window.scrollY;\n }\n\n tooltip.style.top = top + 'px';\n tooltip.style.left = left + 'px';\n });\n }\n\n document.dispatchEvent(new CustomEvent('spotlight:step', {\n detail: { index, step: index, total, data: step }\n }));\n },\n\n next: function () {\n if (this._currentStep < this._steps.length - 1) {\n this._currentStep++;\n this._showStep(this._currentStep);\n }\n },\n\n prev: function () {\n if (this._currentStep > 0) {\n this._currentStep--;\n this._showStep(this._currentStep);\n }\n },\n\n stop: function () {\n if (!this._active) return;\n\n const total = this._steps.length;\n const detail = {\n completedSteps: total === 0 ? 0 : Math.min(this._currentStep + 1, total),\n total,\n completed: total > 0 && this._currentStep >= total - 1\n };\n\n this._active = false;\n\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n if (this._elements.overlay && this._elements.overlay.parentNode) {\n this._elements.overlay.parentNode.removeChild(this._elements.overlay);\n }\n if (this._elements.tooltip && this._elements.tooltip.parentNode) {\n this._elements.tooltip.parentNode.removeChild(this._elements.tooltip);\n }\n\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n this._elements = {};\n this._steps = [];\n this._currentStep = 0;\n\n if (this._triggerElement && this._triggerElement.isConnected && typeof this._triggerElement.focus === 'function') {\n this._triggerElement.focus();\n }\n this._triggerElement = null;\n\n document.dispatchEvent(new CustomEvent('spotlight:end', { detail }));\n },\n\n destroyAll: function () {\n this.stop();\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('spotlight', Spotlight);\n }\n\n window.VanduoSpotlight = Spotlight;\n\n})();\n", "/**\n * Vanduo Framework - Music Player Component\n * HTML5 Audio-based music player with transport controls, volume,\n * and optional shuffle, seek bar, and playlist features.\n *\n * Options (passed to MusicPlayer.init or data-music-player-options):\n * tracks {Array} - [{name, url}] \u2014 required\n * volume {number} - Initial volume 0\u20131 (default 0.5)\n * shuffle {boolean} - Shuffle on init (default false)\n * showProgress {boolean} - Show seek/progress bar (default false)\n * showPlaylist {boolean} - Show expandable playlist panel (default false)\n * autoAdvance {boolean} - Auto-play next track on end (default true)\n *\n * Custom events (all bubble, dispatched on container):\n * musicplayer:play \u2014 playback started\n * musicplayer:pause \u2014 playback paused\n * musicplayer:trackchange \u2014 detail: { index, name, url }\n * musicplayer:volumechange \u2014 detail: { volume }\n * musicplayer:ended \u2014 last track ended (autoAdvance=false only)\n *\n * Programmatic API:\n * MusicPlayer.init(container?, options?)\n * MusicPlayer.play(container)\n * MusicPlayer.pause(container)\n * MusicPlayer.toggle(container)\n * MusicPlayer.next(container)\n * MusicPlayer.previous(container)\n * MusicPlayer.setVolume(container, value)\n * MusicPlayer.setTrack(container, index)\n * MusicPlayer.shuffle(container)\n * MusicPlayer.getState(container)\n * MusicPlayer.destroy(container)\n * MusicPlayer.destroyAll()\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fisher-Yates shuffle (returns new array).\n * @param {Array} arr\n * @returns {Array}\n */\n function shuffleArray(arr) {\n const shuffled = arr.slice();\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n const tmp = shuffled[i];\n shuffled[i] = shuffled[j];\n shuffled[j] = tmp;\n }\n return shuffled;\n }\n\n /**\n * Format seconds as m:ss.\n * @param {number} seconds\n * @returns {string}\n */\n function formatTime(seconds) {\n if (!isFinite(seconds) || seconds < 0) return '0:00';\n const m = Math.floor(seconds / 60);\n const s = Math.floor(seconds % 60);\n return m + ':' + (s < 10 ? '0' : '') + s;\n }\n\n /**\n * Set CSS background-size on a range input to visually fill the track.\n * @param {HTMLInputElement} input\n */\n function updateRangeFill(input) {\n const min = parseFloat(input.min) || 0;\n const max = parseFloat(input.max) || 1;\n const val = parseFloat(input.value) || 0;\n const pct = ((val - min) / (max - min)) * 100;\n input.style.setProperty('--fill', pct + '%');\n // Fallback inline gradient for browsers without ::-moz-range-progress\n input.style.backgroundImage =\n 'linear-gradient(to right, var(--music-player-track-fill, currentColor) 0%, ' +\n 'var(--music-player-track-fill, currentColor) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) 100%)';\n }\n\n /* \u2500\u2500\u2500 Phosphor icon helper (matches framework icon style) \u2500 */\n\n /**\n * Return an element (Phosphor icon).\n * @param {string} name\n * @returns {HTMLElement}\n */\n function icon(name) {\n const el = document.createElement('i');\n el.className = 'ph ph-' + name;\n el.setAttribute('aria-hidden', 'true');\n return el;\n }\n\n /* \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const MusicPlayer = {\n /** @type {Map} */\n instances: new Map(),\n\n /**\n * Default options.\n */\n defaults: {\n tracks: [],\n volume: 0.5,\n shuffle: false,\n showProgress: false,\n showPlaylist: false,\n autoAdvance: true,\n },\n\n /**\n * Auto-initialize all .vd-music-player / [data-music-player] elements.\n * Options can be provided via data-music-player-options (JSON string).\n */\n init: function () {\n document.querySelectorAll('.vd-music-player, [data-music-player]').forEach((el) => {\n if (this.instances.has(el)) return;\n\n let opts = {};\n const attr = el.getAttribute('data-music-player-options');\n if (attr) {\n try { opts = JSON.parse(attr); } catch (_) { /* ignore malformed JSON */ }\n }\n this.initPlayer(el, opts);\n });\n },\n\n /**\n * Initialize a single player element.\n * @param {HTMLElement} container\n * @param {Object} [options]\n */\n initPlayer: function (container, options) {\n const opts = Object.assign({}, this.defaults, options || {});\n\n // Validate and normalise tracks\n const rawTracks = Array.isArray(opts.tracks) ? opts.tracks : [];\n const tracks = rawTracks.filter((t) => t && typeof t.url === 'string' && t.url.trim());\n\n // Build shuffled working copy without mutating opts\n const trackList = opts.shuffle ? shuffleArray(tracks) : tracks.slice();\n\n /* \u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const state = {\n tracks: trackList,\n originalTracks: tracks.slice(),\n currentIndex: 0,\n isPlaying: false,\n volume: Math.max(0, Math.min(1, opts.volume)),\n shuffle: opts.shuffle,\n showProgress: opts.showProgress,\n showPlaylist: opts.showPlaylist,\n autoAdvance: opts.autoAdvance,\n audio: null,\n };\n\n /* \u2500\u2500 Audio element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const audio = new Audio();\n audio.volume = state.volume;\n audio.preload = 'metadata';\n state.audio = audio;\n\n /* \u2500\u2500 Build DOM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n this._buildDOM(container, state);\n\n // Grab references after DOM build\n const refs = {\n btnPlay: container.querySelector('.vd-music-player-btn-play'),\n btnPrev: container.querySelector('.vd-music-player-btn-prev'),\n btnNext: container.querySelector('.vd-music-player-btn-next'),\n btnShuffle: container.querySelector('.vd-music-player-btn-shuffle'),\n btnPlaylist: container.querySelector('.vd-music-player-btn-playlist'),\n trackName: container.querySelector('.vd-music-player-track-name'),\n volumeSlider: container.querySelector('.vd-music-player-volume-slider'),\n volumeIcon: container.querySelector('.vd-music-player-volume-icon'),\n progressBar: container.querySelector('.vd-music-player-progress-bar'),\n timeElapsed: container.querySelector('.vd-music-player-time-elapsed'),\n timeDuration: container.querySelector('.vd-music-player-time-duration'),\n playlistPanel: container.querySelector('.vd-music-player-playlist'),\n };\n\n /* \u2500\u2500 Internal render helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const renderPlayIcon = () => {\n const btn = refs.btnPlay;\n if (!btn) return;\n btn.innerHTML = '';\n btn.appendChild(icon(state.isPlaying ? 'pause' : 'play'));\n btn.setAttribute('aria-label', state.isPlaying ? 'Pause' : 'Play');\n btn.classList.toggle('is-active', state.isPlaying);\n };\n\n const renderTrackName = () => {\n const el = refs.trackName;\n if (!el) return;\n const track = state.tracks[state.currentIndex];\n if (track) {\n el.textContent = track.name || 'Unknown Track';\n el.classList.remove('is-idle');\n } else {\n el.textContent = 'No tracks loaded';\n el.classList.add('is-idle');\n }\n };\n\n const renderVolumeIcon = () => {\n const el = refs.volumeIcon;\n if (!el) return;\n el.innerHTML = '';\n const v = state.volume;\n const name = v === 0 ? 'speaker-none' : v < 0.5 ? 'speaker-low' : 'speaker-high';\n el.appendChild(icon(name));\n };\n\n const renderShuffleBtn = () => {\n const btn = refs.btnShuffle;\n if (!btn) return;\n btn.classList.toggle('is-active', state.shuffle);\n btn.setAttribute('aria-pressed', state.shuffle ? 'true' : 'false');\n };\n\n const renderPlaylistItems = () => {\n const panel = refs.playlistPanel;\n if (!panel) return;\n panel.innerHTML = '';\n state.tracks.forEach((track, i) => {\n const item = document.createElement('button');\n item.className =\n 'vd-music-player-playlist-item' + (i === state.currentIndex ? ' is-active' : '');\n item.type = 'button';\n item.setAttribute('data-index', String(i));\n item.setAttribute('aria-current', i === state.currentIndex ? 'true' : 'false');\n\n const num = document.createElement('span');\n num.className = 'vd-music-player-playlist-num';\n num.textContent = String(i + 1);\n\n const name = document.createElement('span');\n name.className = 'vd-music-player-playlist-name';\n name.textContent = track.name || 'Track ' + (i + 1);\n\n item.appendChild(num);\n item.appendChild(name);\n panel.appendChild(item);\n });\n };\n\n const renderProgress = () => {\n const bar = refs.progressBar;\n if (!bar || !audio.duration) return;\n const pct = (audio.currentTime / audio.duration) * 100;\n bar.value = String(pct);\n updateRangeFill(bar);\n if (refs.timeElapsed) refs.timeElapsed.textContent = formatTime(audio.currentTime);\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n };\n\n /* \u2500\u2500 Load track \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const loadTrack = (index, autoPlay) => {\n const track = state.tracks[index];\n if (!track) return;\n state.currentIndex = index;\n audio.src = track.url;\n renderTrackName();\n renderPlaylistItems();\n\n // Reset progress\n if (refs.progressBar) {\n refs.progressBar.value = '0';\n updateRangeFill(refs.progressBar);\n }\n if (refs.timeElapsed) refs.timeElapsed.textContent = '0:00';\n if (refs.timeDuration) refs.timeDuration.textContent = '0:00';\n\n container.dispatchEvent(\n new CustomEvent('musicplayer:trackchange', {\n bubbles: true,\n detail: { index, name: track.name, url: track.url },\n })\n );\n\n if (autoPlay) {\n audio.play().catch(() => { /* browser may block autoplay */ });\n }\n };\n\n /* \u2500\u2500 Audio event listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const cleanupFunctions = [];\n\n const onPlay = () => {\n state.isPlaying = true;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:play', { bubbles: true }));\n };\n\n const onPause = () => {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:pause', { bubbles: true }));\n };\n\n const onEnded = () => {\n if (state.autoAdvance && state.tracks.length > 1) {\n const next = (state.currentIndex + 1) % state.tracks.length;\n loadTrack(next, true);\n } else {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:ended', { bubbles: true }));\n }\n };\n\n const onTimeUpdate = () => {\n if (state.showProgress) renderProgress();\n };\n\n const onLoadedMetadata = () => {\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n if (refs.progressBar) {\n refs.progressBar.max = '100';\n updateRangeFill(refs.progressBar);\n }\n };\n\n audio.addEventListener('play', onPlay);\n audio.addEventListener('pause', onPause);\n audio.addEventListener('ended', onEnded);\n audio.addEventListener('timeupdate', onTimeUpdate);\n audio.addEventListener('loadedmetadata', onLoadedMetadata);\n cleanupFunctions.push(() => {\n audio.removeEventListener('play', onPlay);\n audio.removeEventListener('pause', onPause);\n audio.removeEventListener('ended', onEnded);\n audio.removeEventListener('timeupdate', onTimeUpdate);\n audio.removeEventListener('loadedmetadata', onLoadedMetadata);\n audio.pause();\n audio.src = '';\n });\n\n /* \u2500\u2500 Control button listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n if (refs.btnPlay) {\n const handler = () => {\n if (!audio.src && state.tracks.length) loadTrack(state.currentIndex, false);\n if (state.isPlaying) {\n audio.pause();\n } else {\n audio.play().catch(() => {});\n }\n };\n refs.btnPlay.addEventListener('click', handler);\n cleanupFunctions.push(() => refs.btnPlay.removeEventListener('click', handler));\n\n // Keyboard: Space / Enter (already native for `;\n }\n\n // Generate neutral color swatches\n let neutralSwatches = '';\n for (const [key, value] of Object.entries(this.NEUTRAL_COLORS)) {\n neutralSwatches += ``;\n }\n\n // Generate radius buttons\n let radiusButtons = '';\n this.RADIUS_OPTIONS.forEach(r => {\n radiusButtons += ``;\n });\n\n // Generate font options\n let fontOptions = '';\n for (const [key, value] of Object.entries(this.FONT_OPTIONS)) {\n fontOptions += ``;\n }\n\n return `\n
    \n

    Customize Theme

    \n \n
    \n
    \n\n
    \n \n
    \n ${primarySwatches}\n
    \n
    \n
    \n \n
    \n ${neutralSwatches}\n
    \n
    \n
    \n \n
    \n ${radiusButtons}\n
    \n
    \n
    \n \n \n
    \n
    \n
    \n \n
    \n `;\n },\n\n /**\n * Bind event listeners\n */\n /**\n * Check whether the current primary color is one of the auto-defaults\n * (i.e. the user hasn't explicitly picked a non-default color).\n */\n isUsingDefaultPrimary: function () {\n return this.state.primary === this.DEFAULTS.PRIMARY_LIGHT ||\n this.state.primary === this.DEFAULTS.PRIMARY_DARK;\n },\n\n /**\n * When primary is still one of the auto-default palette keys (black/amber) but\n * localStorage was written under a different theme (or OS changed in system mode),\n * align in-memory state before applyAllPreferences runs \u2014 avoids amber+light / black+dark drift.\n */\n _normalizeDefaultPrimaryIfStaleWithStoredTheme: function () {\n if (!this.isUsingDefaultPrimary()) {\n return;\n }\n const expected = this.getDefaultPrimary(this.state.theme);\n if (this.state.primary !== expected) {\n this.state.primary = expected;\n }\n },\n\n bindEvents: function () {\n // Trigger click - bind to any trigger button\n if (this.elements.trigger) {\n this.addListener(this.elements.trigger, 'click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggle();\n });\n }\n\n this.bindPanelEvents();\n\n // Listen for OS dark/light changes so we can swap the default primary\n if (window.matchMedia) {\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const handler = () => {\n if (this.state.theme === 'system' && this.isUsingDefaultPrimary()) {\n const newDefault = this.getDefaultPrimary('system');\n if (newDefault !== this.state.primary) {\n this.applyPrimary(newDefault);\n this.updateUI();\n }\n }\n };\n mq.addEventListener('change', handler);\n this._cleanup.push(() => mq.removeEventListener('change', handler));\n }\n\n // Close on outside click\n this.addListener(document, 'click', (e) => {\n if (this.state.isOpen && this.elements.customizer && !this.elements.customizer.contains(e.target)) {\n this.close();\n }\n });\n\n // Close on Escape key\n this.addListener(document, 'keydown', (e) => {\n if (e.key === 'Escape' && this.state.isOpen) {\n this.close();\n }\n });\n },\n\n /**\n * Toggle panel open/close\n */\n toggle: function () {\n if (this.state.isOpen) {\n this.close();\n } else {\n this.open();\n }\n },\n\n /**\n * Open the panel\n */\n open: function () {\n this.state.isOpen = true;\n\n // Ensure panel is positioned correctly before opening\n this.positionPanel();\n\n if (this.elements.panel) {\n this.elements.panel.classList.add('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'true');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.add('is-active');\n }\n\n this.dispatchEvent('panel-open', { isOpen: true });\n },\n\n /**\n * Close the panel\n */\n close: function () {\n this.state.isOpen = false;\n\n if (this.elements.panel) {\n this.elements.panel.classList.remove('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'false');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.remove('is-active');\n }\n\n this.dispatchEvent('panel-close', { isOpen: false });\n },\n\n /**\n * Update UI to reflect current state\n */\n updateUI: function () {\n if (!this.elements.panel) return;\n\n // Update primary color swatches\n this.elements.panel.querySelectorAll('[data-color]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.color === this.state.primary);\n });\n\n // Update neutral color swatches\n this.elements.panel.querySelectorAll('[data-neutral]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.neutral === this.state.neutral);\n });\n\n // Update radius buttons\n this.elements.panel.querySelectorAll('[data-radius]').forEach(btn => {\n btn.classList.toggle('is-active', btn.dataset.radius === this.state.radius);\n });\n\n // Update font selector\n const fontSelect = this.elements.panel.querySelector('[data-customizer-font]');\n if (fontSelect) {\n fontSelect.value = this.state.font;\n }\n\n },\n\n /**\n * Reset all preferences to defaults\n */\n reset: function () {\n this.applyTheme(this.DEFAULTS.THEME);\n this.applyPrimary(this.getDefaultPrimary(this.DEFAULTS.THEME));\n this.applyNeutral(this.DEFAULTS.NEUTRAL);\n this.applyRadius(this.DEFAULTS.RADIUS);\n this.applyFont(this.DEFAULTS.FONT);\n this.updateUI();\n\n this.dispatchEvent('reset', { state: { ...this.state } });\n },\n\n /**\n * Get current state\n */\n getState: function () {\n return { ...this.state };\n },\n\n /**\n * Programmatically set preferences\n */\n setPreferences: function (prefs) {\n if (prefs.primary) this.applyPrimary(prefs.primary);\n if (prefs.neutral) this.applyNeutral(prefs.neutral);\n if (prefs.radius) this.applyRadius(prefs.radius);\n if (prefs.font) this.applyFont(prefs.font);\n if (prefs.theme) this.applyTheme(prefs.theme);\n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n destroyAll: function () {\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n\n if (this.elements.panel) {\n this.elements.panel.removeAttribute('data-customizer-initialized');\n }\n\n this.close();\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeCustomizer', ThemeCustomizer);\n }\n\n // Expose globally for convenience\n window.ThemeCustomizer = ThemeCustomizer;\n})();\n", "/**\n * Vanduo Framework - Theme Switcher\n * Handles light/dark/system theme toggling and persistence\n */\n\n(function () {\n 'use strict';\n\n const ThemeSwitcher = {\n isInitialized: false,\n _mediaQuery: null,\n _onMediaChange: null,\n\n init: function () {\n this.STORAGE_KEY = 'vanduo-theme-preference';\n this.state = {\n preference: this.getPreference() // 'light', 'dark', or 'system'\n };\n\n if (this.isInitialized) {\n this.applyTheme();\n this.renderUI();\n this.updateUI();\n return;\n }\n\n this.isInitialized = true;\n\n this.applyTheme();\n this.listenForSystemChanges();\n this.renderUI();\n\n console.log('Vanduo Theme Switcher initialized');\n },\n\n getPreference: function () {\n return this.getStorageValue(this.STORAGE_KEY, 'system');\n },\n\n setPreference: function (pref) {\n this.state.preference = pref;\n this.setStorageValue(this.STORAGE_KEY, pref);\n this.applyTheme();\n \n // Coordinate with ThemeCustomizer for primary color swap if available\n // Check _isApplying flag to prevent circular updates\n if (window.ThemeCustomizer && window.ThemeCustomizer.applyTheme && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme(pref);\n }\n \n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n applyTheme: function () {\n const pref = this.state.preference;\n\n if (pref === 'system') {\n // When in system mode, we remove the data attribute to let the media query take over\n // or we can explicitly set it. Explicitly setting it ensures consistency if we rely on [data-theme]\n // But if we rely on @media in CSS, we might want to remove attributes.\n // However, our CSS strategy uses :root:not([data-theme=\"light\"]) inside media query for system dark fallback\n // which is a bit complex.\n\n // Simpler approach: \n // If preference is system, REMOVE data-theme attribute. Let CSS media queries handle it.\n document.documentElement.removeAttribute('data-theme');\n } else {\n document.documentElement.setAttribute('data-theme', pref);\n }\n },\n\n listenForSystemChanges: function () {\n if (this._mediaQuery && this._onMediaChange) {\n return;\n }\n\n this._mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n this._onMediaChange = _e => {\n if (this.state.preference === 'system') {\n // Re-apply (effectively just to ensure consistency, though removing attribute usually suffices)\n this.applyTheme();\n // Keep default primary (black/amber) aligned when OS scheme changes while in system mode\n if (window.ThemeCustomizer && typeof window.ThemeCustomizer.applyTheme === 'function' && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme('system');\n }\n }\n };\n this._mediaQuery.addEventListener('change', this._onMediaChange);\n },\n\n // Helper to facilitate UI creation if needed, though often UI is in HTML\n renderUI: function () {\n // Look for any uninitialized theme toggles\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.getAttribute('data-theme-initialized') === 'true') {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n }\n return;\n }\n\n // Simplified UI Binding - assumes a select or a button cycle\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n const onChange = (e) => {\n this.setPreference(e.target.value);\n };\n toggle.addEventListener('change', onChange);\n toggle._themeToggleHandler = onChange;\n } else {\n // Button implementation (cycle)\n const onClick = () => {\n const modes = ['system', 'light', 'dark'];\n const nextIndex = (modes.indexOf(this.state.preference) + 1) % modes.length;\n this.setPreference(modes[nextIndex]);\n };\n toggle.addEventListener('click', onClick);\n toggle._themeToggleHandler = onClick;\n }\n // Mark as initialized\n toggle.setAttribute('data-theme-initialized', 'true');\n });\n },\n\n updateUI: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n } else {\n // Update button text/icon if needed\n // e.g. toggle.textContent = this.state.preference;\n // For now, assume the user handles visual state or generic text\n\n // If there is an icon or text span inside, update it\n const span = toggle.querySelector('.theme-current-label');\n if (span) {\n span.textContent = this.state.preference.charAt(0).toUpperCase() + this.state.preference.slice(1);\n }\n }\n });\n },\n\n destroyAll: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"][data-theme-initialized=\"true\"]');\n toggles.forEach(toggle => {\n if (toggle._themeToggleHandler) {\n const eventName = toggle.tagName === 'SELECT' ? 'change' : 'click';\n toggle.removeEventListener(eventName, toggle._themeToggleHandler);\n delete toggle._themeToggleHandler;\n }\n toggle.removeAttribute('data-theme-initialized');\n });\n\n if (this._mediaQuery && this._onMediaChange) {\n this._mediaQuery.removeEventListener('change', this._onMediaChange);\n }\n\n this._mediaQuery = null;\n this._onMediaChange = null;\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeSwitcher', ThemeSwitcher);\n }\n})();\n", "/**\n * Vanduo Framework - Toast Component\n * Popup notifications for user feedback\n */\n\n(function() {\n 'use strict';\n\n /**\n * Toast Component\n */\n const Toast = {\n // Default options\n defaults: {\n position: 'top-right',\n duration: 5000,\n dismissible: true,\n showProgress: true,\n pauseOnHover: true\n },\n\n // Container cache\n containers: {},\n\n /**\n * Get or create a toast container for a position\n * @param {string} position - Container position\n * @returns {HTMLElement} Toast container element\n */\n getContainer: function(position) {\n if (this.containers[position]) {\n return this.containers[position];\n }\n\n const container = document.createElement('div');\n container.className = `vd-toast-container vd-toast-container-${position}`;\n container.setAttribute('role', 'status');\n container.setAttribute('aria-live', 'polite');\n container.setAttribute('aria-atomic', 'false');\n document.body.appendChild(container);\n this.containers[position] = container;\n\n return container;\n },\n\n /**\n * Show a toast notification\n * @param {Object|string} options - Toast options or message string\n * @param {string} [type] - Toast type (success, error, warning, info)\n * @param {number} [duration] - Auto-dismiss duration in ms\n * @returns {HTMLElement} Toast element\n */\n show: function(options, type, duration) {\n // Support simple API: Toast.show('Message', 'success', 3000)\n if (typeof options === 'string') {\n options = {\n message: options,\n type: type,\n duration: duration\n };\n }\n\n const config = Object.assign({}, this.defaults, options);\n const container = this.getContainer(config.position);\n\n // Create toast element\n const toast = document.createElement('div');\n toast.className = 'vd-toast';\n\n if (config.type) {\n toast.classList.add(`vd-toast-${config.type}`);\n }\n\n if (config.solid) {\n toast.classList.add('vd-toast-solid');\n }\n\n if (config.showProgress && config.duration > 0) {\n toast.classList.add('vd-toast-with-progress');\n }\n\n // Build toast content\n let html = '';\n\n // Icon (sanitize custom icons, default icons are trusted SVG)\n if (config.icon) {\n const safeIcon = typeof sanitizeHtml === 'function' ? sanitizeHtml(config.icon) : escapeHtml(config.icon);\n html += `${safeIcon}`;\n } else if (config.type) {\n html += `${this.getDefaultIcon(config.type)}`;\n }\n\n // Local escape helper \u2014 guarantees HTML-safe output even if the\n // global escapeHtml utility is not loaded in the current bundle.\n const _esc = typeof escapeHtml === 'function'\n ? escapeHtml\n : function (s) {\n const d = document.createElement('div');\n d.appendChild(document.createTextNode(s));\n return d.innerHTML;\n };\n\n // Content (escape text to prevent injection)\n html += '
    ';\n if (config.title) {\n html += `
    ${_esc(String(config.title))}
    `;\n }\n if (config.message) {\n html += `
    ${_esc(String(config.message))}
    `;\n }\n html += '
    ';\n\n // Close button\n if (config.dismissible) {\n html += '';\n }\n\n // Progress bar\n if (config.showProgress && config.duration > 0) {\n const safeDuration = parseInt(config.duration, 10) || 0;\n html += `
    `;\n }\n\n toast.innerHTML = html;\n\n // Add to container\n container.appendChild(toast);\n\n toast._toastCleanup = [];\n\n // Set up close button handler\n if (config.dismissible) {\n const closeBtn = toast.querySelector('.vd-toast-close');\n const onClose = () => {\n this.dismiss(toast);\n };\n closeBtn.addEventListener('click', onClose);\n toast._toastCleanup.push(() => closeBtn.removeEventListener('click', onClose));\n }\n\n // Pause on hover\n let timeoutId = null;\n let remainingTime = config.duration;\n let startTime = null;\n\n const startTimer = () => {\n if (config.duration > 0) {\n startTime = Date.now();\n timeoutId = setTimeout(() => {\n this.dismiss(toast);\n }, remainingTime);\n toast._toastTimeoutId = timeoutId;\n\n // Resume progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'running';\n }\n }\n };\n\n const pauseTimer = () => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n timeoutId = null;\n toast._toastTimeoutId = null;\n remainingTime -= Date.now() - startTime;\n\n // Pause progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'paused';\n }\n }\n };\n\n if (config.pauseOnHover) {\n toast.addEventListener('mouseenter', pauseTimer);\n toast.addEventListener('mouseleave', startTimer);\n toast._toastCleanup.push(\n () => toast.removeEventListener('mouseenter', pauseTimer),\n () => toast.removeEventListener('mouseleave', startTimer)\n );\n }\n\n // Trigger enter animation\n requestAnimationFrame(() => {\n toast.classList.add('is-visible');\n startTimer();\n });\n\n // Store config on element for later access\n toast._toastConfig = config;\n\n // Dispatch show event\n const showEvent = new CustomEvent('toast:show', {\n bubbles: true,\n detail: { toast, config }\n });\n toast.dispatchEvent(showEvent);\n\n return toast;\n },\n\n /**\n * Dismiss a toast\n * @param {HTMLElement} toast - Toast element to dismiss\n */\n dismiss: function(toast) {\n if (!toast || toast.classList.contains('is-exiting')) return;\n\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n toast._toastTimeoutId = null;\n }\n\n toast.classList.remove('is-visible');\n toast.classList.add('is-exiting');\n\n // Dispatch dismiss event\n const dismissEvent = new CustomEvent('toast:dismiss', {\n bubbles: true,\n detail: { toast }\n });\n toast.dispatchEvent(dismissEvent);\n\n // Remove after animation\n const handleTransitionEnd = () => {\n toast.removeEventListener('transitionend', handleTransitionEnd);\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n };\n\n toast.addEventListener('transitionend', handleTransitionEnd);\n\n // Fallback removal if transition doesn't fire\n setTimeout(() => {\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n }, 400);\n },\n\n /**\n * Destroy all toasts and containers\n */\n destroyAll: function() {\n Object.keys(this.containers).forEach(position => {\n const container = this.containers[position];\n if (!container) return;\n\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => {\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n }\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n });\n\n if (container.parentElement) {\n container.parentElement.removeChild(container);\n }\n });\n\n this.containers = {};\n },\n\n /**\n * Dismiss all toasts\n * @param {string} [position] - Optional position to clear (clears all if not specified)\n */\n dismissAll: function(position) {\n if (position && this.containers[position]) {\n const toasts = this.containers[position].querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n } else {\n Object.values(this.containers).forEach(container => {\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n });\n }\n },\n\n /**\n * Get default icon SVG for a type\n * @param {string} type - Toast type\n * @returns {string} SVG icon markup\n */\n getDefaultIcon: function(type) {\n const icons = {\n success: '',\n error: '',\n warning: '',\n info: ''\n };\n\n return icons[type] || '';\n },\n\n /**\n * Convenience methods for common toast types\n */\n success: function(message, options) {\n return this.show(Object.assign({ message, type: 'success' }, options));\n },\n\n error: function(message, options) {\n return this.show(Object.assign({ message, type: 'error' }, options));\n },\n\n warning: function(message, options) {\n return this.show(Object.assign({ message, type: 'warning' }, options));\n },\n\n info: function(message, options) {\n return this.show(Object.assign({ message, type: 'info' }, options));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('toast', Toast);\n }\n\n // Also expose globally for convenience\n window.Toast = Toast;\n\n})();\n", "/**\n * Vanduo Framework - Tooltips Component\n * JavaScript functionality for tooltips\n */\n\n(function () {\n 'use strict';\n\n /**\n * Tooltips Component\n */\n const Tooltips = {\n tooltips: new Map(),\n delayTimers: new Map(),\n\n /**\n * Sanitize HTML \u2014 delegates to shared sanitizeHtml from helpers.js\n * @param {string} input\n * @returns {string} sanitized HTML\n */\n sanitizeHtml: function (input) {\n if (typeof sanitizeHtml === 'function') {\n return sanitizeHtml(input);\n }\n // Fallback: strip all HTML\n const div = document.createElement('div');\n div.textContent = input || '';\n return div.innerHTML;\n },\n\n /**\n * Initialize tooltips\n */\n init: function () {\n const elements = document.querySelectorAll('[data-tooltip], [data-tooltip-html]');\n\n elements.forEach(element => {\n if (this.tooltips.has(element)) {\n return;\n }\n this.initTooltip(element);\n });\n },\n\n /**\n * Initialize a single tooltip\n * @param {HTMLElement} element - Element with tooltip\n */\n initTooltip: function (element) {\n const tooltip = this.createTooltip(element);\n const cleanupFunctions = [];\n\n // Show on hover/focus\n const enterHandler = () => { this.showTooltip(element, tooltip); };\n const leaveHandler = () => { this.hideTooltip(element, tooltip); };\n const focusHandler = () => { this.showTooltip(element, tooltip); };\n const blurHandler = () => { this.hideTooltip(element, tooltip); };\n\n element.addEventListener('mouseenter', enterHandler);\n element.addEventListener('mouseleave', leaveHandler);\n element.addEventListener('focus', focusHandler);\n element.addEventListener('blur', blurHandler);\n\n cleanupFunctions.push(\n () => element.removeEventListener('mouseenter', enterHandler),\n () => element.removeEventListener('mouseleave', leaveHandler),\n () => element.removeEventListener('focus', focusHandler),\n () => element.removeEventListener('blur', blurHandler)\n );\n\n this.tooltips.set(element, { tooltip, cleanup: cleanupFunctions });\n },\n\n /**\n * Create tooltip element\n * @param {HTMLElement} element - Target element\n * @returns {HTMLElement} Tooltip element\n */\n createTooltip: function (element) {\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-tooltip';\n tooltip.setAttribute('role', 'tooltip');\n tooltip.setAttribute('aria-hidden', 'true');\n\n // Generate unique ID and link via aria-describedby\n const tooltipId = 'tooltip-' + Math.random().toString(36).substr(2, 9);\n tooltip.id = tooltipId;\n element.setAttribute('aria-describedby', tooltipId);\n\n // Get content\n const htmlContent = element.dataset.tooltipHtml;\n const textContent = element.dataset.tooltip;\n\n if (htmlContent) {\n tooltip.innerHTML = this.sanitizeHtml(htmlContent);\n tooltip.classList.add('vd-tooltip-html');\n } else if (textContent) {\n tooltip.textContent = textContent;\n }\n\n // Get placement\n const placement = element.dataset.tooltipPlacement || element.dataset.placement || 'top';\n tooltip.setAttribute('data-placement', placement);\n tooltip.classList.add(`vd-tooltip-${placement}`);\n\n // Get variant\n if (element.dataset.tooltipVariant) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipVariant}`);\n }\n\n // Get size\n if (element.dataset.tooltipSize) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipSize}`);\n }\n\n // Get delay\n const delay = parseInt(element.dataset.tooltipDelay) || 0;\n tooltip.dataset.delay = delay;\n\n document.body.appendChild(tooltip);\n\n return tooltip;\n },\n\n /**\n * Show tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n showTooltip: function (element, tooltip) {\n const delay = parseInt(tooltip.dataset.delay) || 0;\n\n if (delay > 0) {\n const timer = setTimeout(() => {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }, delay);\n this.delayTimers.set(element, timer);\n } else {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }\n },\n\n /**\n * Hide tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n hideTooltip: function (element, tooltip) {\n // Clear delay timer if exists\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n tooltip.classList.remove('is-visible');\n tooltip.setAttribute('aria-hidden', 'true');\n },\n\n /**\n * Position tooltip relative to element\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n positionTooltip: function (element, tooltip) {\n const placement = tooltip.dataset.placement || 'top';\n const rect = element.getBoundingClientRect();\n const tooltipRect = tooltip.getBoundingClientRect();\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;\n\n let top = 0;\n let left = 0;\n\n switch (placement) {\n case 'top':\n top = rect.top + scrollTop - tooltipRect.height - 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'bottom':\n top = rect.bottom + scrollTop + 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'left':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.left + scrollLeft - tooltipRect.width - 8;\n break;\n case 'right':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.right + scrollLeft + 8;\n break;\n }\n\n // Prevent overflow\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const padding = 8;\n\n if (left < padding) {\n left = padding;\n } else if (left + tooltipRect.width > viewportWidth - padding) {\n left = viewportWidth - tooltipRect.width - padding;\n }\n\n if (top < scrollTop + padding) {\n top = scrollTop + padding;\n } else if (top + tooltipRect.height > scrollTop + viewportHeight - padding) {\n top = scrollTop + viewportHeight - tooltipRect.height - padding;\n }\n\n // Use single style assignment with transform for better performance\n tooltip.style.cssText = `position: absolute; top: 0; left: 0; transform: translate(${left}px, ${top}px);`;\n },\n\n /**\n * Show tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n show: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.showTooltip(el, tooltip);\n }\n },\n\n /**\n * Hide tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n hide: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.hideTooltip(el, tooltip);\n }\n },\n\n /**\n * Update tooltip content\n * @param {HTMLElement|string} element - Target element or selector\n * @param {string} content - New content\n * @param {boolean} isHtml - Whether content is HTML\n */\n update: function (element, content, isHtml = false) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n if (isHtml) {\n tooltip.innerHTML = this.sanitizeHtml(content);\n tooltip.classList.add('vd-tooltip-html');\n } else {\n tooltip.textContent = content;\n tooltip.classList.remove('vd-tooltip-html');\n }\n }\n },\n\n /**\n * Destroy a tooltip instance and clean up\n * @param {HTMLElement} element - Element with tooltip\n */\n destroy: function (element) {\n const data = this.tooltips.get(element);\n if (!data) return;\n\n // Clear any pending timer\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n data.cleanup.forEach(fn => fn());\n\n // Remove tooltip element from DOM\n if (data.tooltip && data.tooltip.parentNode) {\n data.tooltip.parentNode.removeChild(data.tooltip);\n }\n\n this.tooltips.delete(element);\n },\n\n /**\n * Destroy all tooltip instances\n */\n destroyAll: function () {\n this.tooltips.forEach((data, element) => {\n this.destroy(element);\n });\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tooltips', Tooltips);\n }\n\n // Expose globally\n window.VanduoTooltips = Tooltips;\n\n})();\n", "/**\n * Vanduo Framework - Search Component\n * Client-side search functionality for content pages\n * \n * @example Basic usage (initialize with defaults)\n * // HTML:\n * //
    \n * // \n * //
    \n * //
    \n * \n * @example Custom configuration\n * var search = Search.create({\n * containerSelector: '.my-search',\n * contentSelector: 'article[id]',\n * titleSelector: 'h2, h3',\n * maxResults: 5,\n * onSelect: function(result) {\n * console.log('Selected:', result.title);\n * }\n * });\n * \n * @example With custom data source\n * var search = Search.create({\n * containerSelector: '.my-search',\n * data: [\n * { id: 'item1', title: 'First Item', content: 'Description...', category: 'Category A' },\n * { id: 'item2', title: 'Second Item', content: 'Description...', category: 'Category B' }\n * ]\n * });\n */\n\n(function() {\n 'use strict';\n\n /**\n * Default configuration\n */\n const DEFAULTS = {\n // Behavior\n minQueryLength: 2,\n maxResults: 10,\n debounceMs: 150,\n highlightTag: 'mark',\n keyboardShortcut: true, // Enable Cmd/Ctrl+K shortcut\n \n // Selectors (for DOM-based indexing)\n containerSelector: '.vd-doc-search',\n inputSelector: '.vd-doc-search-input',\n resultsSelector: '.vd-doc-search-results',\n contentSelector: '.doc-content section[id]',\n titleSelector: '.demo-title, h2, h3',\n navSelector: '.doc-nav-link',\n sectionSelector: '.doc-nav-section',\n \n // Content extraction\n excludeFromContent: 'pre, code, script, style',\n maxContentLength: 500,\n \n // Custom data source (alternative to DOM indexing)\n data: null,\n \n // Category icons mapping\n categoryIcons: {\n 'getting-started': 'ph-rocket-launch',\n 'core': 'ph-cube',\n 'components': 'ph-puzzle-piece',\n 'interactive': 'ph-cursor-click',\n 'data-display': 'ph-table',\n 'feedback': 'ph-bell',\n 'meta': 'ph-info',\n 'default': 'ph-file-text'\n },\n \n // Callbacks\n onSelect: null, // function(result) - called when result is selected\n onSearch: null, // function(query, results) - called after search\n onOpen: null, // function() - called when results open\n onClose: null, // function() - called when results close\n \n // Text customization\n emptyTitle: 'No results found',\n emptyText: 'Try different keywords or check spelling',\n placeholder: 'Search...'\n };\n\n /**\n * Search Component Factory\n * Creates a new search instance with the given configuration\n * \n * @param {Object} options - Configuration options\n * @returns {Object} Search instance\n */\n function createSearch(options) {\n const config = Object.assign({}, DEFAULTS, options || {});\n \n // Instance state\n const state = {\n initialized: false,\n index: [],\n results: [],\n activeIndex: -1,\n isOpen: false,\n query: '',\n container: null,\n input: null,\n resultsContainer: null,\n debounceTimer: null,\n boundHandlers: {}\n };\n\n function safeInvokeCallback(name, fn, ...args) {\n try {\n fn(...args);\n } catch (error) {\n console.warn('[Vanduo Search] Callback error in \"' + name + '\":', error);\n }\n }\n\n function setResultsHtml(html) {\n if (!state.resultsContainer) return;\n try {\n state.resultsContainer.innerHTML = html;\n } catch (error) {\n console.warn('[Vanduo Search] Failed to render results:', error);\n }\n }\n\n /**\n * Initialize the search component\n * Idempotent \u2014 safe to call more than once on the same instance.\n * Returns the instance on success, null if required DOM elements are missing.\n */\n function init() {\n if (state.initialized) {\n return instance;\n }\n\n state.container = document.querySelector(config.containerSelector);\n if (!state.container) {\n state.initialized = false;\n return null;\n }\n\n state.input = state.container.querySelector(config.inputSelector);\n state.resultsContainer = state.container.querySelector(config.resultsSelector);\n\n if (!state.input || !state.resultsContainer) {\n state.initialized = false;\n return null;\n }\n\n // Set placeholder if configured\n if (config.placeholder) {\n state.input.setAttribute('placeholder', config.placeholder);\n }\n\n // Build search index\n buildIndex();\n\n // Bind events\n bindEvents();\n\n // Set up ARIA attributes\n setupAria();\n\n state.initialized = true;\n return instance;\n }\n\n /**\n * Build search index from DOM or custom data\n */\n function buildIndex() {\n state.index = [];\n \n // Use custom data if provided\n if (config.data && Array.isArray(config.data)) {\n config.data.forEach(function(item) {\n state.index.push({\n id: item.id || slugify(item.title),\n title: item.title || '',\n category: item.category || '',\n categorySlug: slugify(item.category || ''),\n content: item.content || '',\n keywords: item.keywords || extractKeywordsFromText(item.title + ' ' + item.content),\n url: item.url || '#' + (item.id || slugify(item.title)),\n icon: item.icon || ''\n });\n });\n return;\n }\n\n // Build from DOM\n const sections = document.querySelectorAll(config.contentSelector);\n const categoryMap = buildCategoryMap();\n\n sections.forEach(function(section) {\n const id = section.id;\n if (!id) return;\n\n const titleEl = section.querySelector(config.titleSelector);\n const title = titleEl ? titleEl.textContent.replace(/v[\\d.]+/g, '').trim() : id;\n const category = categoryMap[id] || 'Documentation';\n const content = extractContent(section);\n const keywords = extractKeywords(section, title);\n const iconEl = titleEl ? titleEl.querySelector('i.ph') : null;\n let icon = '';\n if (iconEl && iconEl.classList) {\n for (let ci = 0; ci < iconEl.classList.length; ci++) {\n if (iconEl.classList[ci].indexOf('ph-') === 0) {\n icon = iconEl.classList[ci];\n break;\n }\n }\n }\n\n state.index.push({\n id: id,\n title: title,\n category: category,\n categorySlug: slugify(category),\n content: content,\n keywords: keywords,\n url: '#' + id,\n icon: icon\n });\n });\n }\n\n /**\n * Build a map of section IDs to their categories\n */\n function buildCategoryMap() {\n const map = {};\n let currentCategory = 'Documentation';\n const navItems = document.querySelectorAll(config.navSelector + ', ' + config.sectionSelector);\n\n navItems.forEach(function(item) {\n if (item.classList.contains('doc-nav-section')) {\n currentCategory = item.textContent.trim();\n } else {\n const href = item.getAttribute('href');\n if (href && href.startsWith('#')) {\n const id = href.substring(1);\n map[id] = currentCategory;\n }\n }\n });\n\n return map;\n }\n\n /**\n * Extract searchable content from a section\n */\n function extractContent(section) {\n const clone = section.cloneNode(true);\n \n const toRemove = clone.querySelectorAll(config.excludeFromContent);\n toRemove.forEach(function(el) {\n el.remove();\n });\n\n let text = clone.textContent || '';\n text = text.replace(/\\s+/g, ' ').trim();\n \n return text.substring(0, config.maxContentLength);\n }\n\n /**\n * Extract keywords from a section\n */\n function extractKeywords(section, title) {\n const keywords = [];\n \n // Add title words\n title.toLowerCase().split(/\\s+/).forEach(function(word) {\n if (word.length > 2) {\n keywords.push(word);\n }\n });\n\n // Add class names from code examples\n const codeBlocks = section.querySelectorAll('code');\n codeBlocks.forEach(function(code) {\n const text = code.textContent || '';\n const classMatches = text.match(/\\.([\\w-]+)/g);\n if (classMatches) {\n classMatches.forEach(function(match) {\n keywords.push(match.substring(1).toLowerCase());\n });\n }\n });\n\n // Add data attributes\n const dataAttrs = section.querySelectorAll('[data-tooltip], [data-modal]');\n dataAttrs.forEach(function(el) {\n const attrs = el.getAttributeNames().filter(function(name) {\n return name.startsWith('data-');\n });\n attrs.forEach(function(attr) {\n keywords.push(attr.replace('data-', ''));\n });\n });\n\n return Array.from(new Set(keywords));\n }\n\n /**\n * Extract keywords from text string\n */\n function extractKeywordsFromText(text) {\n const words = text.toLowerCase().split(/\\s+/);\n return words.filter(function(word) {\n return word.length > 2;\n });\n }\n\n /**\n * Convert string to slug\n */\n function slugify(str) {\n return str.toLowerCase().replace(/\\s+/g, '-').replace(/[^a-z0-9-]/g, '');\n }\n\n /**\n * Bind event listeners\n */\n function bindEvents() {\n // Store bound handlers for cleanup\n state.boundHandlers.handleInput = function(e) {\n handleInput(e);\n };\n state.boundHandlers.handleFocus = function() {\n if (state.query.length >= config.minQueryLength) {\n open();\n }\n };\n state.boundHandlers.handleKeydown = function(e) {\n handleKeydown(e);\n };\n state.boundHandlers.handleOutsideClick = function(e) {\n if (!state.container.contains(e.target)) {\n close();\n }\n };\n state.boundHandlers.handleGlobalKeydown = function(e) {\n if (config.keyboardShortcut && (e.metaKey || e.ctrlKey) && e.key === 'k') {\n e.preventDefault();\n state.input.focus();\n state.input.select();\n }\n };\n state.boundHandlers.handleResultClick = function(e) {\n const result = e.target.closest('.vd-doc-search-result');\n if (result) {\n const index = parseInt(result.dataset.index, 10);\n select(index);\n }\n };\n\n // Input events\n state.input.addEventListener('input', state.boundHandlers.handleInput);\n state.input.addEventListener('focus', state.boundHandlers.handleFocus);\n state.input.addEventListener('keydown', state.boundHandlers.handleKeydown);\n\n // Close on outside click\n document.addEventListener('click', state.boundHandlers.handleOutsideClick);\n\n // Global keyboard shortcut\n document.addEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n\n // Result click handling\n state.resultsContainer.addEventListener('click', state.boundHandlers.handleResultClick);\n }\n\n /**\n * Unbind event listeners\n */\n function unbindEvents() {\n if (state.input) {\n state.input.removeEventListener('input', state.boundHandlers.handleInput);\n state.input.removeEventListener('focus', state.boundHandlers.handleFocus);\n state.input.removeEventListener('keydown', state.boundHandlers.handleKeydown);\n }\n document.removeEventListener('click', state.boundHandlers.handleOutsideClick);\n document.removeEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n if (state.resultsContainer) {\n state.resultsContainer.removeEventListener('click', state.boundHandlers.handleResultClick);\n }\n }\n\n /**\n * Set up ARIA attributes\n */\n function setupAria() {\n const resultsId = state.resultsContainer.id || 'search-results-' + Math.random().toString(36).substr(2, 9);\n state.resultsContainer.id = resultsId;\n \n state.input.setAttribute('role', 'combobox');\n state.input.setAttribute('aria-autocomplete', 'list');\n state.input.setAttribute('aria-controls', resultsId);\n state.input.setAttribute('aria-expanded', 'false');\n \n state.resultsContainer.setAttribute('role', 'listbox');\n state.resultsContainer.setAttribute('aria-label', 'Search results');\n }\n\n /**\n * Handle input changes\n */\n function handleInput(e) {\n const query = e.target.value.trim();\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n state.debounceTimer = setTimeout(function() {\n state.query = query;\n\n if (query.length < config.minQueryLength) {\n close();\n return;\n }\n\n state.results = search(query);\n state.activeIndex = -1;\n render();\n open();\n\n // Callback\n if (typeof config.onSearch === 'function') {\n safeInvokeCallback('onSearch', config.onSearch, query, state.results);\n }\n }, config.debounceMs);\n }\n\n /**\n * Handle keyboard navigation\n */\n function handleKeydown(e) {\n if (!state.isOpen) {\n if (e.key === 'ArrowDown' && state.query.length >= config.minQueryLength) {\n e.preventDefault();\n state.results = search(state.query);\n render();\n open();\n }\n return;\n }\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n navigate(1);\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n navigate(-1);\n break;\n\n case 'Enter':\n e.preventDefault();\n if (state.activeIndex >= 0) {\n select(state.activeIndex);\n } else if (state.results.length > 0) {\n select(0);\n }\n break;\n\n case 'Escape':\n e.preventDefault();\n close();\n break;\n\n case 'Tab':\n close();\n break;\n }\n }\n\n /**\n * Perform search\n */\n function search(query) {\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n const scored = [];\n\n state.index.forEach(function(entry) {\n let score = 0;\n const titleLower = entry.title.toLowerCase();\n const categoryLower = entry.category.toLowerCase();\n const contentLower = entry.content.toLowerCase();\n\n terms.forEach(function(term) {\n // Title match - highest priority\n if (titleLower.includes(term)) {\n score += 100;\n if (titleLower === term) {\n score += 50;\n } else if (titleLower.startsWith(term)) {\n score += 25;\n }\n }\n\n // Category match\n if (categoryLower.includes(term)) {\n score += 50;\n }\n\n // Keyword match\n const keywordMatch = entry.keywords.some(function(k) {\n return k.includes(term);\n });\n if (keywordMatch) {\n score += 30;\n }\n\n // Content match\n if (contentLower.includes(term)) {\n score += 10;\n }\n });\n\n if (score > 0) {\n scored.push({\n id: entry.id,\n title: entry.title,\n category: entry.category,\n categorySlug: entry.categorySlug,\n content: entry.content,\n url: entry.url,\n icon: entry.icon,\n score: score\n });\n }\n });\n\n scored.sort(function(a, b) {\n return b.score - a.score;\n });\n\n return scored.slice(0, config.maxResults);\n }\n\n /**\n * Render search results\n */\n function render() {\n if (state.results.length === 0) {\n setResultsHtml(renderEmpty());\n return;\n }\n\n let html = '
      ';\n\n state.results.forEach(function(result, index) {\n const isActive = index === state.activeIndex;\n const icon = result.icon || getCategoryIcon(result.categorySlug);\n const excerpt = getExcerpt(result.content, state.query);\n\n html += '
    • ' +\n '
      ' +\n '' +\n '
      ' +\n '
      ' +\n '
      ' + highlight(result.title, state.query) + '
      ' +\n '
      ' + escapeHtml(result.category) + '
      ' +\n '
      ' + highlight(excerpt, state.query) + '
      ' +\n '
      ' +\n '
      • ';\n });\n\n html += '
    ';\n html += renderFooter();\n\n setResultsHtml(html);\n }\n\n /**\n * Render empty state\n */\n function renderEmpty() {\n return '
    ' +\n '
    ' +\n '
    ' + escapeHtml(config.emptyTitle) + '
    ' +\n '
    ' + escapeHtml(config.emptyText) + '
    ' +\n '
    ';\n }\n\n /**\n * Render footer with keyboard hints\n */\n function renderFooter() {\n return '
    ' +\n '\u2191\u2193 to navigate' +\n '\u21B5 to select' +\n 'esc to close' +\n '
    ';\n }\n\n /**\n * Get icon for category\n */\n function getCategoryIcon(categorySlug) {\n return config.categoryIcons[categorySlug] || config.categoryIcons['default'] || 'ph-file-text';\n }\n\n /**\n * Get excerpt from content\n */\n function getExcerpt(content, query) {\n const terms = query.toLowerCase().split(/\\s+/);\n const contentLower = content.toLowerCase();\n const excerptLength = 100;\n\n let matchPos = -1;\n for (let i = 0; i < terms.length; i++) {\n const pos = contentLower.indexOf(terms[i]);\n if (pos !== -1 && (matchPos === -1 || pos < matchPos)) {\n matchPos = pos;\n }\n }\n\n if (matchPos === -1) {\n return content.substring(0, excerptLength) + '...';\n }\n\n const start = Math.max(0, matchPos - 30);\n const end = Math.min(content.length, matchPos + excerptLength);\n let excerpt = content.substring(start, end);\n\n if (start > 0) {\n excerpt = '...' + excerpt;\n }\n if (end < content.length) {\n excerpt = excerpt + '...';\n }\n\n return excerpt;\n }\n\n /**\n * Highlight matched terms in text\n */\n function highlight(text, query) {\n if (!query) return escapeHtml(text);\n\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n let escaped = escapeHtml(text);\n\n terms.forEach(function(term) {\n // Skip overly long terms to prevent ReDoS\n if (term.length > 50) return;\n const regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n escaped = escaped.replace(regex, '<' + config.highlightTag + '>$1');\n });\n\n return escaped;\n }\n\n /**\n * Escape HTML entities\n */\n function escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n /**\n * Navigate results with keyboard\n */\n function navigate(direction) {\n let newIndex = state.activeIndex + direction;\n\n if (newIndex < 0) {\n newIndex = state.results.length - 1;\n } else if (newIndex >= state.results.length) {\n newIndex = 0;\n }\n\n setActiveIndex(newIndex);\n }\n\n /**\n * Set active result index\n */\n function setActiveIndex(index) {\n const prevActive = state.resultsContainer.querySelector('.vd-doc-search-result.is-active');\n if (prevActive) {\n prevActive.classList.remove('is-active');\n prevActive.setAttribute('aria-selected', 'false');\n }\n\n state.activeIndex = index;\n\n const newActive = state.resultsContainer.querySelector('[data-index=\"' + index + '\"]');\n if (newActive) {\n newActive.classList.add('is-active');\n newActive.setAttribute('aria-selected', 'true');\n state.input.setAttribute('aria-activedescendant', 'vd-doc-search-result-' + index);\n newActive.scrollIntoView({ block: 'nearest' });\n }\n }\n\n /**\n * Select a result\n */\n function select(index) {\n const result = state.results[index];\n if (!result) return;\n\n // Close search\n close();\n state.input.value = '';\n state.query = '';\n\n // Custom callback\n if (typeof config.onSelect === 'function') {\n safeInvokeCallback('onSelect', config.onSelect, result);\n return;\n }\n\n // Default behavior: navigate to section\n const section = document.querySelector(result.url);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth', block: 'start' });\n window.history.pushState(null, '', result.url);\n updateSidebarActive(result.id);\n }\n }\n\n /**\n * Update sidebar navigation active state\n */\n function updateSidebarActive(sectionId) {\n const navLinks = document.querySelectorAll(config.navSelector);\n navLinks.forEach(function(link) {\n link.classList.remove('active');\n if (link.getAttribute('href') === '#' + sectionId) {\n link.classList.add('active');\n }\n });\n }\n\n /**\n * Open results dropdown\n */\n function open() {\n if (state.isOpen) return;\n\n state.isOpen = true;\n state.resultsContainer.classList.add('is-open');\n state.input.setAttribute('aria-expanded', 'true');\n\n if (typeof config.onOpen === 'function') {\n safeInvokeCallback('onOpen', config.onOpen);\n }\n }\n\n /**\n * Close results dropdown\n */\n function close() {\n if (!state.isOpen) return;\n\n state.isOpen = false;\n state.activeIndex = -1;\n state.resultsContainer.classList.remove('is-open');\n state.input.setAttribute('aria-expanded', 'false');\n state.input.removeAttribute('aria-activedescendant');\n\n if (typeof config.onClose === 'function') {\n safeInvokeCallback('onClose', config.onClose);\n }\n }\n\n /**\n * Destroy the component\n */\n function destroy() {\n unbindEvents();\n \n state.initialized = false;\n state.index = [];\n state.results = [];\n state.isOpen = false;\n state.query = '';\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n if (state.resultsContainer) {\n setResultsHtml('');\n }\n }\n\n /**\n * Rebuild the search index\n */\n function rebuild() {\n buildIndex();\n }\n\n /**\n * Update configuration\n */\n function setConfig(newConfig) {\n Object.assign(config, newConfig);\n }\n\n /**\n * Get current configuration\n */\n function getConfig() {\n return Object.assign({}, config);\n }\n\n /**\n * Get search index\n */\n function getIndex() {\n return state.index.slice();\n }\n\n // Public instance API\n const instance = {\n init: init,\n destroy: destroy,\n rebuild: rebuild,\n search: search,\n open: open,\n close: close,\n setConfig: setConfig,\n getConfig: getConfig,\n getIndex: getIndex\n };\n\n return instance;\n }\n\n /**\n * Search Component (singleton for backward compatibility)\n */\n const Search = {\n // Factory method \u2014 creates and auto-initializes a new independent instance.\n // Always returns the instance so callers retain a reference even if the\n // DOM container is not yet available (they can retry init() later).\n create: function(options) {\n const instance = createSearch(options);\n if (instance) {\n instance.init();\n }\n return instance || null;\n },\n \n // Default instance\n _instance: null,\n \n // Configuration (for default instance)\n config: Object.assign({}, DEFAULTS),\n\n /**\n * Initialize the default search instance\n */\n init: function(options) {\n if (this._instance) {\n this._instance.destroy();\n }\n \n if (options) {\n Object.assign(this.config, options);\n }\n \n this._instance = createSearch(this.config);\n return this._instance ? this._instance.init() : null;\n },\n\n /**\n * Destroy the default instance\n */\n destroy: function() {\n if (this._instance) {\n this._instance.destroy();\n this._instance = null;\n }\n },\n\n destroyAll: function() {\n this.destroy();\n },\n\n /**\n * Rebuild the default instance index\n */\n rebuild: function() {\n if (this._instance) {\n this._instance.rebuild();\n }\n },\n\n /**\n * Search using the default instance\n */\n search: function(query) {\n return this._instance ? this._instance.search(query) : [];\n },\n\n /**\n * Open the default instance\n */\n open: function() {\n if (this._instance) {\n this._instance.open();\n }\n },\n\n /**\n * Close the default instance\n */\n close: function() {\n if (this._instance) {\n this._instance.close();\n }\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('docSearch', Search);\n }\n\n // Expose globally (both names for compatibility)\n window.Search = Search;\n window.DocSearch = Search; // Backward compatibility\n window.VanduoDocSearch = Search; // New name compatibility\n\n})();\n", "/**\n * Vanduo Framework - Draggable Component\n * JavaScript functionality for draggable elements and drop zones\n */\n\n(function () {\n 'use strict';\n\n /**\n * Draggable Component\n */\n const Draggable = {\n // Store initialized draggables and their cleanup functions\n instances: new Map(),\n // Store current drag state\n currentDrag: null,\n // Store touch state\n touchState: null,\n // Feedback element\n feedbackElement: null,\n // Shared selector used by init and touch reorder\n containerSelector: '.vd-draggable-container, .vd-draggable-container-vertical',\n\n /**\n * Initialize draggable components\n */\n init: function () {\n const draggables = document.querySelectorAll('.vd-draggable, [data-draggable]');\n\n draggables.forEach(element => {\n if (this.instances.has(element)) {\n return;\n }\n this.initDraggable(element);\n });\n\n const containers = document.querySelectorAll(this.containerSelector);\n containers.forEach(container => {\n if (!this.instances.has(container)) {\n this.initContainer(container);\n }\n });\n\n const dropZones = document.querySelectorAll('.vd-drop-zone');\n dropZones.forEach(zone => {\n if (!this.instances.has(zone)) {\n this.initDropZone(zone);\n }\n });\n\n this.createFeedbackElement();\n },\n\n /**\n * Initialize a single draggable element\n * @param {HTMLElement} element - Draggable element\n */\n initDraggable: function (element) {\n const cleanupFunctions = [];\n\n // Make element draggable if not already\n if (!element.hasAttribute('draggable')) {\n element.setAttribute('draggable', 'true');\n }\n\n // Accessibility: add ARIA attributes\n if (!element.hasAttribute('tabindex')) {\n element.setAttribute('tabindex', '0');\n }\n element.setAttribute('role', 'option');\n element.setAttribute('aria-roledescription', 'draggable item');\n element.setAttribute('aria-grabbed', 'false');\n\n // Handle drag start\n const dragStartHandler = (e) => {\n this.handleDragStart(e, element);\n };\n element.addEventListener('dragstart', dragStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragstart', dragStartHandler));\n\n // Handle drag\n const dragHandler = (e) => {\n this.handleDrag(e, element);\n };\n element.addEventListener('drag', dragHandler);\n cleanupFunctions.push(() => element.removeEventListener('drag', dragHandler));\n\n // Handle drag end\n const dragEndHandler = (e) => {\n this.handleDragEnd(e, element);\n };\n element.addEventListener('dragend', dragEndHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragend', dragEndHandler));\n\n // Handle touch start (for mobile)\n const touchStartHandler = (e) => {\n this.handleTouchStart(e, element);\n };\n element.addEventListener('touchstart', touchStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchstart', touchStartHandler));\n\n // Handle touch move (for mobile)\n // { passive: false } is required so that e.preventDefault() works\n // once the drag threshold is reached \u2014 without it, modern browsers\n // treat the listener as passive and silently ignore preventDefault().\n const touchMoveHandler = (e) => {\n this.handleTouchMove(e, element);\n };\n element.addEventListener('touchmove', touchMoveHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchmove', touchMoveHandler));\n\n // Handle touch end (for mobile)\n const touchEndHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchend', touchEndHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchend', touchEndHandler));\n\n // Handle touch cancel (for mobile)\n const touchCancelHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchcancel', touchCancelHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchcancel', touchCancelHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, element);\n };\n element.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => element.removeEventListener('keydown', keydownHandler));\n\n this.instances.set(element, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a draggable container\n * @param {HTMLElement} container - Draggable container\n */\n initContainer: function (container) {\n // Accessibility: add ARIA role to container\n container.setAttribute('role', 'listbox');\n container.setAttribute('aria-label', container.getAttribute('aria-label') || 'Draggable items');\n\n const items = container.querySelectorAll('.vd-draggable-item');\n items.forEach(item => {\n if (!this.instances.has(item)) {\n this.initDraggable(item);\n }\n });\n\n const cleanupFunctions = [];\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n };\n\n // Handle drag over for auto-sorting\n const dragOverHandler = (e) => {\n e.preventDefault(); // Necessary to allow drop\n e.dataTransfer.dropEffect = 'move';\n\n if (!this.currentDrag) return;\n const draggingEl = this.currentDrag.element;\n\n // Only reorder if dragging an item that belongs to this container (or if we support cross-container drag, but keep simple)\n if (!container.contains(draggingEl)) return;\n\n // Prevent jumps when the dragging finalizes with 0,0 coordinates near the end\n if (e.clientX === 0 && e.clientY === 0) return;\n\n this.handleReorder(container, draggingEl, e.clientX, e.clientY);\n };\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault(); // crucial to prevent the browser's default handling and snapping back\n };\n\n container.addEventListener('dragenter', dragEnterHandler);\n container.addEventListener('dragover', dragOverHandler);\n container.addEventListener('drop', dropHandler);\n\n cleanupFunctions.push(() => {\n container.removeEventListener('dragenter', dragEnterHandler);\n container.removeEventListener('dragover', dragOverHandler);\n container.removeEventListener('drop', dropHandler);\n });\n\n this.instances.set(container, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a drop zone\n * @param {HTMLElement} zone - Drop zone element\n */\n initDropZone: function (zone) {\n const cleanupFunctions = [];\n\n // Accessibility: add ARIA role to drop zone\n zone.setAttribute('role', 'region');\n zone.setAttribute('aria-dropeffect', 'move');\n if (!zone.hasAttribute('aria-label')) {\n zone.setAttribute('aria-label', 'Drop zone');\n }\n\n // Handle drag over\n const dragOverHandler = (e) => {\n e.preventDefault();\n this.handleDragOver(e, zone);\n };\n zone.addEventListener('dragover', dragOverHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragover', dragOverHandler));\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n this.handleDragEnter(e, zone);\n };\n zone.addEventListener('dragenter', dragEnterHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragenter', dragEnterHandler));\n\n // Handle drag leave\n const dragLeaveHandler = (e) => {\n this.handleDragLeave(e, zone);\n };\n zone.addEventListener('dragleave', dragLeaveHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragleave', dragLeaveHandler));\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault();\n this.handleDrop(e, zone);\n };\n zone.addEventListener('drop', dropHandler);\n cleanupFunctions.push(() => zone.removeEventListener('drop', dropHandler));\n\n this.instances.set(zone, { cleanup: cleanupFunctions });\n },\n\n /**\n * Create feedback element for drag operations\n */\n createFeedbackElement: function () {\n if (!this.feedbackElement) {\n // Reuse existing element if present\n const existing = document.querySelector('.vd-drag-feedback');\n if (existing) {\n this.feedbackElement = existing;\n return;\n }\n\n this.feedbackElement = document.createElement('div');\n this.feedbackElement.className = 'vd-drag-feedback hidden';\n this.feedbackElement.setAttribute('role', 'presentation');\n document.body.appendChild(this.feedbackElement);\n }\n },\n\n /**\n * Handle drag start event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragStart: function (e, element) {\n // Add dragging class\n element.classList.add('is-dragging');\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: e.clientX, y: e.clientY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element)\n };\n\n // Set drag data\n e.dataTransfer.effectAllowed = 'move';\n e.dataTransfer.setData('text/plain', this.currentDrag.data);\n\n // We no longer suppress the native ghost image or manually update feedback\n // for mouse drags, relying on the browser's native rendering instead.\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY }\n }\n }));\n },\n\n /**\n * Handle drag event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDrag: function (e, element) {\n // Guard against null state (race condition on fast interactions)\n if (!this.currentDrag) return;\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - this.currentDrag.initialPosition.x,\n y: e.clientY - this.currentDrag.initialPosition.y\n }\n }\n }));\n },\n\n /**\n * Handle drag end event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragEnd: function (e, element) {\n // Remove dragging class\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'false');\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Guard against null state\n const data = this.currentDrag?.data || this.getData(element);\n const initialPos = this.currentDrag?.initialPosition || { x: 0, y: 0 };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - initialPos.x,\n y: e.clientY - initialPos.y\n }\n }\n }));\n\n // Reset drag state\n this.currentDrag = null;\n },\n\n /**\n * Handle touch start event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchStart: function (e, element) {\n // Don't prevent default here \u2014 it blocks scrolling.\n // We only prevent default in touchmove once drag threshold is reached.\n const touch = e.touches[0];\n const rect = element.getBoundingClientRect();\n this.touchState = {\n element: element,\n startX: touch.clientX,\n startY: touch.clientY,\n lastX: touch.clientX,\n lastY: touch.clientY,\n // Keep preview anchored to the original grab point.\n offsetX: touch.clientX - rect.left,\n offsetY: touch.clientY - rect.top,\n startTime: Date.now(),\n isDragging: false\n };\n },\n\n /**\n * Handle touch move event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchMove: function (e, element) {\n if (!this.touchState) return;\n\n const touch = e.touches[0];\n this.touchState.lastX = touch.clientX;\n this.touchState.lastY = touch.clientY;\n const deltaX = touch.clientX - this.touchState.startX;\n const deltaY = touch.clientY - this.touchState.startY;\n\n // Only start dragging if moved a minimum distance\n if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {\n // Now we know it's a drag, not a scroll \u2014 prevent default\n if (e.cancelable) e.preventDefault();\n\n if (!this.touchState.isDragging) {\n this.touchState.isDragging = true;\n element.classList.add('is-dragging');\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: this.touchState.startX, y: this.touchState.startY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element),\n // Preserve where inside the element the drag started for accurate ghost positioning.\n offsetX: this.touchState.offsetX,\n offsetY: this.touchState.offsetY\n };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY }\n }\n }));\n }\n\n // Update feedback\n this.updateFeedback(touch.clientX, touch.clientY);\n\n // Dispatch event\n if (this.currentDrag) {\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY },\n delta: { x: deltaX, y: deltaY }\n }\n }));\n\n this.updateTouchDropZone(touch.clientX, touch.clientY);\n\n // Reorder for touch\n const container = element.closest(this.containerSelector);\n if (container && container.contains(element)) {\n this.handleReorder(container, element, touch.clientX, touch.clientY);\n }\n }\n }\n },\n\n /**\n * Handle touch end event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchEnd: function (e, element) {\n if (this.touchState && this.touchState.isDragging) {\n if (e.cancelable) e.preventDefault();\n const endTouch = e.changedTouches?.[0];\n const endPosition = {\n x: endTouch?.clientX ?? this.touchState.lastX ?? this.touchState.startX,\n y: endTouch?.clientY ?? this.touchState.lastY ?? this.touchState.startY\n };\n\n const dropZone = this.resolveDropZoneAtPoint(endPosition.x, endPosition.y) || this.touchState.overZone;\n if (dropZone) {\n this.dispatchDrop(dropZone, endPosition);\n } else if (this.touchState.overZone) {\n this.touchState.overZone.classList.remove('is-drag-over');\n }\n\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n element.setAttribute('aria-grabbed', 'false');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Dispatch event\n const data = this.currentDrag?.data || this.getData(element);\n const startX = this.touchState?.startX || 0;\n const startY = this.touchState?.startY || 0;\n\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: endPosition,\n delta: {\n x: endPosition.x - startX,\n y: endPosition.y - startY\n }\n }\n }));\n }\n\n // Reset states\n this.touchState = null;\n this.currentDrag = null;\n },\n\n /**\n * Handle drag over event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} _zone - Drop zone element\n */\n handleDragOver: function (e, _zone) {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n },\n\n /**\n * Handle drag enter event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragEnter: function (e, zone) {\n e.preventDefault();\n zone.classList.add('is-drag-over');\n },\n\n /**\n * Handle drag leave event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragLeave: function (e, zone) {\n zone.classList.remove('is-drag-over');\n },\n\n /**\n * Handle drop event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDrop: function (e, zone) {\n e.preventDefault();\n this.dispatchDrop(zone, { x: e.clientX, y: e.clientY });\n },\n\n /**\n * Resolve a drop zone from viewport coordinates\n * @param {number} x\n * @param {number} y\n * @returns {HTMLElement|null}\n */\n resolveDropZoneAtPoint: function (x, y) {\n if (!Number.isFinite(x) || !Number.isFinite(y)) return null;\n\n // Prefer the full stacking list so overlays/top elements don't hide real drop targets.\n if (typeof document.elementsFromPoint === 'function') {\n const stacked = document.elementsFromPoint(x, y);\n for (const element of stacked) {\n const zone = element.closest('.vd-drop-zone');\n if (zone) return zone;\n }\n }\n\n const target = document.elementFromPoint(x, y);\n const targetZone = target ? target.closest('.vd-drop-zone') : null;\n if (targetZone) return targetZone;\n\n // Last-resort fallback for mobile emulation edge cases.\n const zones = document.querySelectorAll('.vd-drop-zone');\n for (const zone of zones) {\n const rect = zone.getBoundingClientRect();\n if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {\n return zone;\n }\n }\n\n return null;\n },\n\n /**\n * Track and update active drop-zone hover state on touch devices\n * @param {number} x\n * @param {number} y\n */\n updateTouchDropZone: function (x, y) {\n if (!this.touchState) return;\n\n const nextZone = this.resolveDropZoneAtPoint(x, y);\n const prevZone = this.touchState.overZone || null;\n\n if (prevZone && prevZone !== nextZone) {\n prevZone.classList.remove('is-drag-over');\n }\n\n if (nextZone && nextZone !== prevZone) {\n nextZone.classList.add('is-drag-over');\n }\n\n this.touchState.overZone = nextZone || null;\n },\n\n /**\n * Dispatch a normalized drop event for mouse and touch flows\n * @param {HTMLElement} zone\n * @param {{x:number, y:number}} position\n */\n dispatchDrop: function (zone, position) {\n zone.classList.remove('is-drag-over');\n zone.dispatchEvent(new CustomEvent('draggable:drop', {\n bubbles: true,\n detail: {\n zone: zone,\n element: this.currentDrag?.element,\n data: this.currentDrag?.data,\n position: position\n }\n }));\n },\n\n /**\n * Reorder elements in container based on cursor position\n * @param {HTMLElement} container \n * @param {HTMLElement} element \n * @param {number} clientX \n * @param {number} clientY \n */\n handleReorder: function (container, element, clientX, clientY) {\n const isVertical = container.classList.contains('vd-draggable-container-vertical');\n const siblings = [...container.querySelectorAll('.vd-draggable-item:not(.is-dragging), .vd-draggable:not(.is-dragging)')];\n\n const nextSibling = siblings.reduce((closest, child) => {\n const box = child.getBoundingClientRect();\n const offset = isVertical\n ? clientY - box.top - box.height / 2\n : clientX - box.left - box.width / 2;\n\n if (offset < 0 && offset > closest.offset) {\n return { offset: offset, element: child };\n } else {\n return closest;\n }\n }, { offset: Number.NEGATIVE_INFINITY }).element;\n\n if (nextSibling == null) {\n container.appendChild(element);\n } else {\n container.insertBefore(element, nextSibling);\n }\n },\n\n /**\n * Handle keyboard events\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} element - Draggable element\n */\n handleKeydown: function (e, element) {\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n // Trigger click or custom action\n element.click();\n break;\n case 'Escape':\n // Cancel drag if in progress\n if (element.classList.contains('is-dragging')) {\n element.classList.remove('is-dragging');\n element.setAttribute('aria-grabbed', 'false');\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n this.currentDrag = null;\n }\n break;\n case 'ArrowUp':\n case 'ArrowLeft': {\n e.preventDefault();\n const prev = element.previousElementSibling;\n if (prev && (prev.classList.contains('vd-draggable') || prev.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(element, prev);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'up' }\n }));\n }\n break;\n }\n case 'ArrowDown':\n case 'ArrowRight': {\n e.preventDefault();\n const next = element.nextElementSibling;\n if (next && (next.classList.contains('vd-draggable') || next.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(next, element);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'down' }\n }));\n }\n break;\n }\n }\n },\n\n /**\n * Get data from draggable element\n * @param {HTMLElement} element - Draggable element\n * @returns {string} Data associated with the element\n */\n getData: function (element) {\n return element.dataset.draggable || element.textContent.trim();\n },\n\n /**\n * Update drag feedback element\n * @param {number} x - Current X coordinate\n * @param {number} y - Current Y coordinate\n */\n updateFeedback: function (x, y) {\n if (!this.currentDrag) return;\n\n // Show feedback\n this.feedbackElement.classList.remove('hidden');\n\n // Update feedback content\n const rect = this.currentDrag.initialBounds;\n this.feedbackElement.innerHTML = '';\n const clone = this.currentDrag.element.cloneNode(true);\n this.feedbackElement.appendChild(clone);\n\n // Set styles\n const offsetX = this.currentDrag.offsetX ?? 20;\n const offsetY = this.currentDrag.offsetY ?? 20;\n Object.assign(this.feedbackElement.style, {\n left: (x - offsetX) + 'px',\n top: (y - offsetY) + 'px',\n width: rect.width + 'px',\n height: rect.height + 'px'\n });\n },\n\n /**\n * Make an element draggable programmatically\n * @param {HTMLElement|string} element - Element or selector\n * @param {Object} options - Configuration options\n */\n makeDraggable: function (element, options = {}) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && !this.instances.has(el)) {\n // Add classes and attributes\n el.classList.add('vd-draggable');\n el.setAttribute('draggable', 'true');\n\n // Set options\n if (options.data) {\n el.dataset.draggable = options.data;\n }\n\n // Initialize\n this.initDraggable(el);\n }\n },\n\n /**\n * Remove draggable functionality from an element\n * @param {HTMLElement|string} element - Element or selector\n */\n removeDraggable: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && this.instances.has(el)) {\n // Clean up\n const instance = this.instances.get(el);\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n\n // Remove classes and attributes\n el.classList.remove('vd-draggable');\n el.removeAttribute('draggable');\n el.removeAttribute('data-draggable');\n }\n },\n\n /**\n * Destroy a draggable instance and clean up event listeners\n * @param {HTMLElement} element - Draggable element\n */\n destroy: function (element) {\n this.removeDraggable(element);\n },\n\n /**\n * Destroy all draggable instances\n */\n destroyAll: function () {\n const instances = Array.from(this.instances.keys());\n instances.forEach(element => this.destroy(element));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('draggable', Draggable);\n }\n\n // Expose globally\n window.VanduoDraggable = Draggable;\n})();\n", "/**\n * Vanduo Framework \u2013 LazyLoad Component\n * v1.2.1\n *\n * Provides two levels of API:\n *\n * LOW-LEVEL (generic IntersectionObserver wrapper)\n * VanduoLazyLoad.observe(element, callback, options?)\n * VanduoLazyLoad.unobserve(element)\n * VanduoLazyLoad.unobserveAll()\n *\n * HIGH-LEVEL (HTML-section fetcher, mirrors vanduo-docs SPA behaviour)\n * VanduoLazyLoad.loadSection(url, containerEl, options?)\n * options: { placeholder, threshold, rootMargin, onLoaded, onError }\n * placeholder: 'skeleton' | 'spinner' | HTMLString (default: 'skeleton')\n *\n * ATTRIBUTE-DRIVEN (zero-JS usage, wired by init())\n *
    \u2026
    \n *\n * EVENTS dispatched on the host element:\n * lazysection:loading \u2014 fetch started\n * lazysection:loaded \u2014 content injected\n * lazysection:error \u2014 fetch failed\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500 Private state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /** @type {Map} */\n const _observerMap = new Map();\n\n /* \u2500\u2500 Security helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Returns true only if `url` resolves to the same origin as the page\n * (relative paths and same-origin absolute URLs are allowed).\n * Cross-origin URLs are rejected to prevent SSRF-style fetch abuse.\n * @param {string} url\n * @returns {boolean}\n */\n function _isSafeUrl(url) {\n try {\n // Relative URLs (no origin) are always safe\n const resolved = new URL(url, window.location.href);\n return resolved.origin === window.location.origin;\n } catch (_) {\n return false;\n }\n }\n\n /**\n * Safely inject fetched HTML into a container by parsing it with\n * DOMParser (avoids script execution) and replacing children via\n * standard DOM APIs instead of raw innerHTML assignment.\n * @param {Element} containerEl\n * @param {string} html\n */\n function _safeInjectHtml(containerEl, html) {\n const parser = new DOMParser();\n const doc = parser.parseFromString(html.trim(), 'text/html'); // CodeQL [js/xss-through-dom] Intentional: parsed nodes are sanitized below before adoption into live DOM\n\n const DANGEROUS_TAGS = ['SCRIPT', 'IFRAME', 'OBJECT', 'EMBED', 'FORM', 'BASE', 'LINK', 'META', 'STYLE'];\n for (const tag of DANGEROUS_TAGS) {\n const els = doc.querySelectorAll(tag);\n for (let i = els.length - 1; i >= 0; i--) {\n els[i].parentNode.removeChild(els[i]);\n }\n }\n\n // Strip dangerous attributes (e.g. onerror, javascript: urls) from all elements\n function _sanitizeNode(node) {\n if (node.nodeType === Node.ELEMENT_NODE) {\n const attrs = node.attributes;\n for (let i = attrs.length - 1; i >= 0; i--) {\n const attrName = attrs[i].name.toLowerCase();\n const attrValue = attrs[i].value.toLowerCase();\n const trimmedValue = attrValue.trim();\n if (\n attrName.startsWith('on') ||\n trimmedValue.startsWith('javascript:') ||\n trimmedValue.startsWith('data:') ||\n trimmedValue.startsWith('vbscript:')\n ) {\n node.removeAttribute(attrs[i].name);\n }\n }\n const children = node.childNodes;\n for (let i = 0; i < children.length; i++) {\n _sanitizeNode(children[i]);\n }\n }\n }\n _sanitizeNode(doc.body);\n\n // Collect all top-level body children\n const nodes = Array.from(doc.body.childNodes);\n // Clear container and append parsed nodes\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n nodes.forEach(function (node) {\n containerEl.appendChild(document.adoptNode(node));\n });\n }\n\n /* \u2500\u2500 Placeholder HTML \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _skeletonHtml() {\n return '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _spinnerHtml() {\n return '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _resolvePlaceholder(placeholder) {\n if (!placeholder || placeholder === 'skeleton') return _skeletonHtml();\n if (placeholder === 'spinner') return _spinnerHtml();\n // Caller-supplied HTML string\n return placeholder;\n }\n\n /* \u2500\u2500 Dispatch helper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _dispatch(el, eventName, detail) {\n el.dispatchEvent(new CustomEvent(eventName, { bubbles: true, detail: detail || {} }));\n }\n\n /* \u2500\u2500 VanduoLazyLoad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const VanduoLazyLoad = {\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * LOW-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Observe an element. `callback` is invoked once when the element\n * enters the viewport, then the element is automatically unobserved.\n *\n * @param {Element} element\n * @param {function(Element): void} callback\n * @param {{ threshold?: number, rootMargin?: string }} [options]\n */\n observe: function (element, callback, options) {\n if (!(element instanceof Element)) {\n console.warn('[VanduoLazyLoad] observe() requires a DOM Element.');\n return;\n }\n if (typeof callback !== 'function') {\n console.warn('[VanduoLazyLoad] observe() requires a callback function.');\n return;\n }\n // Already observed \u2014 ignore\n if (_observerMap.has(element)) return;\n\n const threshold = (options && options.threshold != null) ? options.threshold : 0;\n const rootMargin = (options && options.rootMargin) ? options.rootMargin : '0px';\n\n const observer = new IntersectionObserver(function (entries, obs) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n obs.unobserve(entry.target);\n _observerMap.delete(entry.target);\n try {\n callback(entry.target);\n } catch (e) {\n console.error('[VanduoLazyLoad] Callback threw:', e);\n }\n }\n });\n }, { threshold: threshold, rootMargin: rootMargin });\n\n _observerMap.set(element, observer);\n observer.observe(element);\n },\n\n /**\n * Stop observing an element that was previously passed to observe().\n * @param {Element} element\n */\n unobserve: function (element) {\n const observer = _observerMap.get(element);\n if (observer) {\n observer.unobserve(element);\n _observerMap.delete(element);\n }\n },\n\n /**\n * Stop observing ALL currently observed elements.\n */\n unobserveAll: function () {\n _observerMap.forEach(function (observer, element) {\n observer.unobserve(element);\n });\n _observerMap.clear();\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * HIGH-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fetch an HTML partial and inject it into `containerEl` when the\n * container enters the viewport. A placeholder is shown immediately.\n *\n * @param {string} url URL of the HTML partial to fetch\n * @param {Element} containerEl Target element whose content will be replaced\n * @param {{\n * placeholder?: 'skeleton'|'spinner'|string,\n * threshold?: number,\n * rootMargin?: string,\n * onLoaded?: function(Element): void,\n * onError?: function(Error): void\n * }} [options]\n */\n loadSection: function (url, containerEl, options) {\n if (typeof url !== 'string' || !url) {\n console.warn('[VanduoLazyLoad] loadSection() requires a non-empty URL string.');\n return;\n }\n if (!(containerEl instanceof Element)) {\n console.warn('[VanduoLazyLoad] loadSection() requires a DOM Element as containerEl.');\n return;\n }\n // Reject cross-origin URLs to prevent SSRF-style fetch abuse\n if (!_isSafeUrl(url)) {\n console.error('[VanduoLazyLoad] loadSection() blocked cross-origin URL:', url);\n return;\n }\n\n const opts = options || {};\n // Placeholders are known-safe static HTML strings built internally\n const placeholderHtml = _resolvePlaceholder(opts.placeholder);\n\n // Use _safeInjectHtml instead of innerHTML to prevent XSS from caller-supplied placeholders\n _safeInjectHtml(containerEl, placeholderHtml);\n _dispatch(containerEl, 'lazysection:loading', { url: url });\n\n // Fetch when visible\n this.observe(containerEl, function () {\n const controller = new window.AbortController();\n const timeoutId = setTimeout(function () { controller.abort(); }, 10000);\n\n window.fetch(url, { signal: controller.signal })\n .then(function (res) {\n clearTimeout(timeoutId);\n if (!res.ok) throw new Error('HTTP ' + res.status);\n return res.text();\n })\n .then(function (html) {\n // Use DOMParser to parse fetched content safely, avoiding\n // raw innerHTML assignment of externally-sourced strings\n _safeInjectHtml(containerEl, html);\n _dispatch(containerEl, 'lazysection:loaded', { url: url });\n // Re-init Vanduo components inside the new content\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.init();\n }\n if (typeof opts.onLoaded === 'function') {\n opts.onLoaded(containerEl);\n }\n })\n .catch(function (err) {\n // Build error node via DOM APIs \u2014 no dynamic HTML strings\n const alertEl = document.createElement('div');\n alertEl.className = 'vd-alert vd-alert-error';\n alertEl.setAttribute('role', 'alert');\n const msgEl = document.createElement('span');\n msgEl.textContent = 'Failed to load content. ';\n const detailEl = document.createElement('small');\n detailEl.style.opacity = '0.7';\n detailEl.textContent = err.message;\n alertEl.appendChild(msgEl);\n alertEl.appendChild(detailEl);\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n containerEl.appendChild(alertEl);\n _dispatch(containerEl, 'lazysection:error', { url: url, error: err });\n console.error('[VanduoLazyLoad] loadSection failed:', err);\n if (typeof opts.onError === 'function') {\n opts.onError(err);\n }\n });\n }, { threshold: opts.threshold, rootMargin: opts.rootMargin });\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * ATTRIBUTE-DRIVEN INIT\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Scan the DOM for [data-vd-lazy] elements and wire them up.\n * Safe to call multiple times \u2014 already-observed elements are skipped.\n */\n init: function () {\n const self = this;\n const elements = document.querySelectorAll('[data-vd-lazy]');\n elements.forEach(function (el) {\n // Skip already-observed or already-loaded elements\n if (_observerMap.has(el) || el.dataset.vdLazyState === 'loading' || el.dataset.vdLazyState === 'loaded') return;\n\n const url = el.getAttribute('data-vd-lazy');\n if (!url) return;\n\n el.dataset.vdLazyState = 'loading';\n const placeholder = el.getAttribute('data-vd-lazy-placeholder') || 'skeleton';\n\n self.loadSection(url, el, {\n placeholder: placeholder,\n onLoaded: function () {\n el.dataset.vdLazyState = 'loaded';\n },\n onError: function () {\n el.dataset.vdLazyState = 'error';\n }\n });\n });\n }\n };\n\n /* \u2500\u2500 Register with Vanduo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('LazyLoad', VanduoLazyLoad);\n }\n\n /* \u2500\u2500 Global convenience alias \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n window.VanduoLazyLoad = VanduoLazyLoad;\n\n})();\n", "/**\n * Vanduo Framework - Glass Scroll Activation\n * Generic scroll-aware glass activation via IntersectionObserver.\n *\n * Usage:\n * Add `data-glass-scroll` to any element carrying a `.vd-glass*` class.\n * By default the previous sibling is used as the sentinel.\n * Point to a custom sentinel via `data-glass-sentinel=\"\"`.\n *\n * Behaviour:\n * - Adds `.is-glass-active` when the sentinel leaves the viewport (scrolled past).\n * - Removes `.is-glass-active` when the sentinel re-enters the viewport.\n */\n(function () {\n 'use strict';\n\n const GlassScroll = {\n /** @type {Map} */\n observers: new Map(),\n\n init: function () {\n document.querySelectorAll('[data-glass-scroll]').forEach(el => {\n if (this.observers.has(el)) return;\n this.initElement(el);\n });\n },\n\n /**\n * Wire up a single scroll-activated glass element.\n * @param {HTMLElement} el\n */\n initElement: function (el) {\n const sentinelSelector = el.dataset.glassSentinel;\n let sentinel;\n\n if (sentinelSelector) {\n sentinel = document.querySelector(sentinelSelector);\n }\n\n if (!sentinel) {\n // Fall back to the previous sibling element\n sentinel = el.previousElementSibling;\n }\n\n if (!sentinel) {\n // No sentinel available \u2014 activate immediately so glass is always shown\n el.classList.add('is-glass-active');\n return;\n }\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n // Active when sentinel is NOT intersecting (scrolled past it)\n el.classList.toggle('is-glass-active', !entry.isIntersecting);\n });\n },\n { threshold: 0, rootMargin: '0px' }\n );\n\n observer.observe(sentinel);\n this.observers.set(el, observer);\n },\n\n /**\n * Disconnect and remove a single element's observer.\n * @param {HTMLElement} el\n */\n destroy: function (el) {\n const observer = this.observers.get(el);\n if (observer) {\n observer.disconnect();\n this.observers.delete(el);\n }\n },\n\n destroyAll: function () {\n this.observers.forEach((observer, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('glassScroll', GlassScroll);\n }\n\n window.VanduoGlassScroll = GlassScroll;\n})();\n", "/**\n * Vanduo Framework - Water Morph Effect Component\n * Liquid wave content-swap animation on click\n *\n * Usage:\n * Add .vd-morph or [data-vd-morph] to any element.\n * Provide .vd-morph-content.vd-morph-current and .vd-morph-content.vd-morph-next children.\n * Wave and shine layers are auto-created if absent.\n *\n * JS API:\n * VanduoMorph.morph(el) \u2014 trigger morph programmatically (from center)\n * VanduoMorph.destroy(el) \u2014 tear down listeners for one element\n * VanduoMorph.destroyAll() \u2014 tear down all instances\n */\n\n(function () {\n 'use strict';\n\n const MORPH_DURATION_MS = 750;\n\n const Morph = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-morph, [data-vd-morph]');\n elements.forEach(function (el) {\n if (Morph.instances.has(el)) return;\n if (el.getAttribute('data-vd-morph') === 'manual') return;\n Morph.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n Morph._ensureLayers(el);\n\n const cleanup = [];\n let morphing = false;\n\n const handleClick = function (e) {\n if (morphing) return;\n Morph._runMorph(el, e, function () { morphing = false; });\n morphing = true;\n };\n\n el.addEventListener('click', handleClick);\n cleanup.push(function () { el.removeEventListener('click', handleClick); });\n\n this.instances.set(el, { cleanup: cleanup });\n },\n\n morph: function (el) {\n if (!el) return;\n if (!this.instances.has(el)) this.initInstance(el);\n this._runMorph(el, null, null);\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(function (fn) { fn(); });\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach(function (_, el) { Morph.destroy(el); });\n },\n\n /* \u2500\u2500 Internal helpers \u2500\u2500 */\n\n _ensureLayers: function (el) {\n if (!el.querySelector('.vd-morph-wave')) {\n const wave = document.createElement('span');\n wave.className = 'vd-morph-wave';\n wave.setAttribute('aria-hidden', 'true');\n el.insertBefore(wave, el.firstChild);\n }\n if (!el.querySelector('.vd-morph-shine')) {\n const shine = document.createElement('span');\n shine.className = 'vd-morph-shine';\n shine.setAttribute('aria-hidden', 'true');\n const waveEl = el.querySelector('.vd-morph-wave');\n if (waveEl && waveEl.nextSibling) {\n el.insertBefore(shine, waveEl.nextSibling);\n } else {\n el.insertBefore(shine, el.firstChild);\n }\n }\n },\n\n _runMorph: function (el, pointerEvent, onComplete) {\n const wave = el.querySelector('.vd-morph-wave');\n if (wave) {\n const rect = el.getBoundingClientRect();\n const cx = rect.left + rect.width / 2;\n const cy = rect.top + rect.height / 2;\n const px = pointerEvent ? (pointerEvent.clientX || cx) : cx;\n const py = pointerEvent ? (pointerEvent.clientY || cy) : cy;\n wave.style.left = (px - rect.left) + 'px';\n wave.style.top = (py - rect.top) + 'px';\n }\n\n el.classList.add('is-morphing');\n\n let duration = MORPH_DURATION_MS;\n const custom = getComputedStyle(el).getPropertyValue('--morph-duration');\n if (custom) {\n const parsed = parseFloat(custom);\n if (!isNaN(parsed)) duration = parsed * (custom.indexOf('ms') !== -1 ? 1 : 1000);\n }\n\n setTimeout(function () {\n el.classList.remove('is-morphing');\n\n const current = el.querySelector('.vd-morph-current');\n const next = el.querySelector('.vd-morph-next');\n if (current && next) {\n current.classList.remove('vd-morph-current');\n current.classList.add('vd-morph-next');\n next.classList.remove('vd-morph-next');\n next.classList.add('vd-morph-current');\n }\n\n el.classList.add('morph-done');\n setTimeout(function () { el.classList.remove('morph-done'); }, 350);\n\n if (typeof onComplete === 'function') onComplete();\n }, duration);\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('morph', Morph);\n }\n\n window.VanduoMorph = Morph;\n\n})();\n", "/**\n * Vanduo Framework - Flow (Carousel/Slider) Component\n * Touch-enabled carousel with slide/fade transitions, autoplay, indicators\n */\n\n(function () {\n 'use strict';\n\n const Flow = {\n instances: new Map(),\n\n init: function () {\n const carousels = document.querySelectorAll('.vd-flow, .vd-carousel');\n carousels.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const track = el.querySelector('.vd-flow-track');\n if (!track) return;\n\n const slides = Array.from(track.querySelectorAll('.vd-flow-slide'));\n if (slides.length === 0) return;\n\n const isFade = el.classList.contains('vd-flow-fade');\n const autoplay = el.hasAttribute('data-vd-autoplay');\n const interval = parseInt(el.getAttribute('data-vd-interval'), 10) || 5000;\n const loop = el.getAttribute('data-vd-loop') !== 'false';\n\n const state = {\n current: 0,\n total: slides.length,\n autoplayTimer: null,\n isFade: isFade,\n loop: loop,\n isDragging: false,\n startX: 0,\n currentX: 0,\n threshold: 50\n };\n\n const cleanup = [];\n\n // Set initial active slide\n slides.forEach((slide, i) => {\n slide.setAttribute('role', 'group');\n slide.setAttribute('aria-roledescription', 'slide');\n slide.setAttribute('aria-label', 'Slide ' + (i + 1) + ' of ' + slides.length);\n if (i === 0) slide.classList.add('is-active');\n });\n\n el.setAttribute('role', 'region');\n el.setAttribute('aria-roledescription', 'carousel');\n if (!el.getAttribute('aria-label')) {\n el.setAttribute('aria-label', 'Carousel');\n }\n\n // Live region for announcements\n const liveRegion = document.createElement('div');\n liveRegion.setAttribute('aria-live', 'polite');\n liveRegion.setAttribute('aria-atomic', 'true');\n liveRegion.className = 'sr-only';\n liveRegion.style.cssText = 'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);';\n el.appendChild(liveRegion);\n\n const goTo = (index, announce) => {\n if (announce === undefined) announce = true;\n let target = index;\n if (state.loop) {\n target = ((index % state.total) + state.total) % state.total;\n } else {\n target = Math.max(0, Math.min(index, state.total - 1));\n }\n\n const prev = state.current;\n state.current = target;\n\n if (state.isFade) {\n slides.forEach((s, i) => {\n s.classList.toggle('is-active', i === target);\n });\n } else {\n track.style.transform = 'translateX(-' + (target * 100) + '%)';\n }\n\n // Update indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.classList.toggle('is-active', i === target);\n ind.setAttribute('aria-selected', i === target ? 'true' : 'false');\n });\n\n // Update slide ARIA\n slides.forEach((s, i) => {\n s.setAttribute('aria-hidden', i !== target ? 'true' : 'false');\n });\n\n if (announce) {\n liveRegion.textContent = 'Slide ' + (target + 1) + ' of ' + state.total;\n }\n\n el.dispatchEvent(new CustomEvent('flow:change', {\n detail: { current: target, previous: prev, total: state.total }\n }));\n };\n\n const next = () => goTo(state.current + 1);\n const prev = () => goTo(state.current - 1);\n\n // Controls\n const prevBtn = el.querySelector('.vd-flow-prev');\n const nextBtn = el.querySelector('.vd-flow-next');\n\n if (prevBtn) {\n const h = () => prev();\n prevBtn.addEventListener('click', h);\n cleanup.push(() => prevBtn.removeEventListener('click', h));\n }\n if (nextBtn) {\n const h = () => next();\n nextBtn.addEventListener('click', h);\n cleanup.push(() => nextBtn.removeEventListener('click', h));\n }\n\n // Indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.setAttribute('role', 'tab');\n ind.setAttribute('aria-selected', i === 0 ? 'true' : 'false');\n ind.setAttribute('aria-label', 'Go to slide ' + (i + 1));\n const h = () => goTo(i);\n ind.addEventListener('click', h);\n cleanup.push(() => ind.removeEventListener('click', h));\n });\n\n // Keyboard navigation\n const keyHandler = (e) => {\n if (e.key === 'ArrowLeft') { prev(); e.preventDefault(); }\n if (e.key === 'ArrowRight') { next(); e.preventDefault(); }\n };\n el.setAttribute('tabindex', '0');\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n // Touch / pointer support\n const pointerDown = (e) => {\n state.isDragging = true;\n state.startX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n state.currentX = state.startX;\n el.classList.add('is-dragging');\n };\n\n const pointerMove = (e) => {\n if (!state.isDragging) return;\n state.currentX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n };\n\n const pointerUp = () => {\n if (!state.isDragging) return;\n state.isDragging = false;\n el.classList.remove('is-dragging');\n const diff = state.startX - state.currentX;\n if (Math.abs(diff) > state.threshold) {\n if (diff > 0) next();\n else prev();\n }\n };\n\n el.addEventListener('mousedown', pointerDown);\n el.addEventListener('mousemove', pointerMove);\n el.addEventListener('mouseup', pointerUp);\n el.addEventListener('mouseleave', pointerUp);\n el.addEventListener('touchstart', pointerDown, { passive: true });\n el.addEventListener('touchmove', pointerMove, { passive: true });\n el.addEventListener('touchend', pointerUp);\n\n cleanup.push(\n () => el.removeEventListener('mousedown', pointerDown),\n () => el.removeEventListener('mousemove', pointerMove),\n () => el.removeEventListener('mouseup', pointerUp),\n () => el.removeEventListener('mouseleave', pointerUp),\n () => el.removeEventListener('touchstart', pointerDown),\n () => el.removeEventListener('touchmove', pointerMove),\n () => el.removeEventListener('touchend', pointerUp)\n );\n\n // Autoplay\n const startAutoplay = () => {\n stopAutoplay();\n state.autoplayTimer = setInterval(next, interval);\n };\n\n const stopAutoplay = () => {\n if (state.autoplayTimer) {\n clearInterval(state.autoplayTimer);\n state.autoplayTimer = null;\n }\n };\n\n if (autoplay) {\n startAutoplay();\n const pauseHandler = () => stopAutoplay();\n const resumeHandler = () => startAutoplay();\n el.addEventListener('mouseenter', pauseHandler);\n el.addEventListener('mouseleave', resumeHandler);\n el.addEventListener('focusin', pauseHandler);\n el.addEventListener('focusout', resumeHandler);\n cleanup.push(\n () => el.removeEventListener('mouseenter', pauseHandler),\n () => el.removeEventListener('mouseleave', resumeHandler),\n () => el.removeEventListener('focusin', pauseHandler),\n () => el.removeEventListener('focusout', resumeHandler),\n () => stopAutoplay()\n );\n }\n\n // Initial ARIA state\n goTo(0, false);\n\n this.instances.set(el, {\n cleanup: cleanup,\n goTo: goTo,\n next: next,\n prev: prev,\n getState: () => ({ ...state })\n });\n },\n\n goTo: function (el, index) {\n const instance = this.instances.get(el);\n if (instance) instance.goTo(index);\n },\n\n next: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.next();\n },\n\n prev: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.prev();\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('flow', Flow);\n }\n\n window.VanduoFlow = Flow;\n\n})();\n", "/**\n * Vanduo Framework - Bubble (Popover) Component\n * Click-triggered rich HTML popover, reuses tooltip positioning concepts\n */\n\n(function () {\n 'use strict';\n\n const Bubble = {\n instances: new Map(),\n _globalCleanups: [],\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-bubble], [data-vd-popover]');\n triggers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n\n if (this._globalCleanups.length === 0) {\n const outsideClick = (e) => {\n this.instances.forEach((inst, trigger) => {\n if (!inst.popover.contains(e.target) && !trigger.contains(e.target)) {\n this.hide(trigger);\n }\n });\n };\n const escHandler = (e) => {\n if (e.key === 'Escape') {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n }\n };\n document.addEventListener('click', outsideClick, true);\n document.addEventListener('keydown', escHandler);\n this._globalCleanups.push(\n () => document.removeEventListener('click', outsideClick, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n }\n },\n\n initInstance: function (trigger) {\n const cleanup = [];\n const placement = trigger.getAttribute('data-vd-bubble-placement') ||\n trigger.getAttribute('data-vd-popover-placement') || 'bottom';\n\n // Build popover element\n const popover = document.createElement('div');\n popover.className = 'vd-bubble-content';\n popover.setAttribute('role', 'dialog');\n popover.setAttribute('aria-modal', 'false');\n popover.setAttribute('data-placement', placement);\n\n const title = trigger.getAttribute('data-vd-bubble-title') ||\n trigger.getAttribute('data-vd-popover-title');\n const content = trigger.getAttribute('data-vd-bubble') ||\n trigger.getAttribute('data-vd-popover') || '';\n const htmlContent = trigger.getAttribute('data-vd-bubble-html') ||\n trigger.getAttribute('data-vd-popover-html');\n\n if (title) {\n const header = document.createElement('div');\n header.className = 'vd-bubble-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const closeBtn = document.createElement('button');\n closeBtn.className = 'vd-bubble-close';\n closeBtn.setAttribute('aria-label', 'Close');\n closeBtn.innerHTML = '×';\n header.appendChild(titleSpan);\n header.appendChild(closeBtn);\n popover.appendChild(header);\n\n const closeHandler = (e) => { e.stopPropagation(); this.hide(trigger); };\n closeBtn.addEventListener('click', closeHandler);\n cleanup.push(() => closeBtn.removeEventListener('click', closeHandler));\n }\n\n const body = document.createElement('div');\n body.className = 'vd-bubble-body';\n if (htmlContent) {\n if (typeof sanitizeHtml === 'function') {\n body.innerHTML = sanitizeHtml(htmlContent);\n } else {\n body.textContent = htmlContent;\n }\n } else {\n body.textContent = content;\n }\n popover.appendChild(body);\n\n document.body.appendChild(popover);\n\n // ARIA on trigger\n const popId = 'vd-bubble-' + Math.random().toString(36).slice(2, 9);\n popover.id = popId;\n trigger.setAttribute('aria-haspopup', 'dialog');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.setAttribute('aria-controls', popId);\n\n // Toggle on click\n const toggleHandler = (e) => {\n e.stopPropagation();\n if (popover.classList.contains('is-visible')) {\n this.hide(trigger);\n } else {\n this.hideAll();\n this.show(trigger);\n }\n };\n trigger.addEventListener('click', toggleHandler);\n cleanup.push(() => trigger.removeEventListener('click', toggleHandler));\n\n this.instances.set(trigger, { popover, cleanup, placement });\n },\n\n position: function (trigger, popover, placement) {\n const rect = trigger.getBoundingClientRect();\n const popRect = popover.getBoundingClientRect();\n const gap = 10;\n let top, left;\n\n switch (placement) {\n case 'top':\n top = rect.top - popRect.height - gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n break;\n case 'left':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.left - popRect.width - gap + window.scrollX;\n break;\n case 'right':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.right + gap + window.scrollX;\n break;\n default: // bottom\n top = rect.bottom + gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n }\n\n // Clamp to viewport\n left = Math.max(8, Math.min(left, window.innerWidth - popRect.width - 8));\n top = Math.max(8, top);\n\n popover.style.top = top + 'px';\n popover.style.left = left + 'px';\n },\n\n show: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n const { popover, placement } = instance;\n\n popover.style.display = 'block';\n popover.classList.add('is-visible');\n trigger.setAttribute('aria-expanded', 'true');\n\n requestAnimationFrame(() => {\n this.position(trigger, popover, placement);\n });\n\n trigger.dispatchEvent(new CustomEvent('bubble:show', { bubbles: true }));\n },\n\n hide: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.popover.classList.remove('is-visible');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.dispatchEvent(new CustomEvent('bubble:hide', { bubbles: true }));\n },\n\n hideAll: function () {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n },\n\n destroy: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n if (instance.popover.parentNode) {\n instance.popover.parentNode.removeChild(instance.popover);\n }\n trigger.removeAttribute('aria-haspopup');\n trigger.removeAttribute('aria-expanded');\n trigger.removeAttribute('aria-controls');\n this.instances.delete(trigger);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, trigger) => this.destroy(trigger));\n this._globalCleanups.forEach(fn => fn());\n this._globalCleanups = [];\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('bubble', Bubble);\n }\n\n window.VanduoBubble = Bubble;\n\n})();\n", "/**\n * Vanduo Framework - Waypoint (Scrollspy) Component\n * Highlights navigation links based on scroll position using IntersectionObserver\n */\n\n(function () {\n 'use strict';\n\n const Waypoint = {\n instances: new Map(),\n\n init: function () {\n const navs = document.querySelectorAll('[data-vd-waypoint-nav], [data-vd-scrollspy-nav]');\n navs.forEach(nav => {\n if (this.instances.has(nav)) return;\n this.initInstance(nav);\n });\n },\n\n initInstance: function (nav) {\n const links = Array.from(nav.querySelectorAll('a[href^=\"#\"]'));\n if (links.length === 0) return;\n\n const cleanup = [];\n const offset = parseInt(nav.getAttribute('data-vd-waypoint-offset') || '80', 10);\n const sections = [];\n\n links.forEach(link => {\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.setAttribute('data-vd-waypoint-section', '');\n sections.push({ id, link, section });\n }\n });\n\n if (sections.length === 0) return;\n\n const activeSections = new Set();\n\n const setActive = (id) => {\n links.forEach(l => l.classList.remove('is-active'));\n const target = links.find(l => l.getAttribute('href') === '#' + id);\n if (target) {\n target.classList.add('is-active');\n nav.dispatchEvent(new CustomEvent('waypoint:change', {\n detail: { activeId: id, link: target }\n }));\n }\n };\n\n const rootMargin = '-' + offset + 'px 0px -40% 0px';\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n activeSections.add(entry.target.id);\n } else {\n activeSections.delete(entry.target.id);\n }\n });\n\n // Pick the topmost visible section\n for (let i = 0; i < sections.length; i++) {\n if (activeSections.has(sections[i].id)) {\n setActive(sections[i].id);\n return;\n }\n }\n }, {\n rootMargin: rootMargin,\n threshold: 0\n });\n\n sections.forEach(s => observer.observe(s.section));\n\n // Smooth scroll on click\n links.forEach(link => {\n const clickHandler = (e) => {\n e.preventDefault();\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth' });\n setActive(id);\n }\n };\n link.addEventListener('click', clickHandler);\n cleanup.push(() => link.removeEventListener('click', clickHandler));\n });\n\n cleanup.push(() => observer.disconnect());\n\n this.instances.set(nav, { observer, cleanup, sections, setActive });\n },\n\n refresh: function (nav) {\n this.destroy(nav);\n this.initInstance(nav);\n },\n\n destroy: function (nav) {\n const instance = this.instances.get(nav);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(nav);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, nav) => this.destroy(nav));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('waypoint', Waypoint);\n }\n\n window.VanduoWaypoint = Waypoint;\n\n})();\n", "/**\n * Vanduo Framework - Ripple (Waves Effect) Component\n * Adds expanding circle animation on click at pointer position\n */\n\n(function () {\n 'use strict';\n\n const Ripple = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-ripple, [data-vd-ripple]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n\n const createWave = (e) => {\n const rect = el.getBoundingClientRect();\n const size = Math.max(rect.width, rect.height);\n const x = (e.clientX || (e.touches && e.touches[0].clientX) || rect.left + rect.width / 2) - rect.left - size / 2;\n const y = (e.clientY || (e.touches && e.touches[0].clientY) || rect.top + rect.height / 2) - rect.top - size / 2;\n\n const wave = document.createElement('span');\n wave.className = 'vd-ripple-wave';\n wave.style.width = size + 'px';\n wave.style.height = size + 'px';\n wave.style.left = x + 'px';\n wave.style.top = y + 'px';\n\n el.appendChild(wave);\n\n wave.addEventListener('animationend', () => {\n if (wave.parentNode) wave.parentNode.removeChild(wave);\n });\n };\n\n el.addEventListener('mousedown', createWave);\n el.addEventListener('touchstart', createWave, { passive: true });\n\n cleanup.push(\n () => el.removeEventListener('mousedown', createWave),\n () => el.removeEventListener('touchstart', createWave)\n );\n\n this.instances.set(el, { cleanup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n // Remove any lingering wave elements\n el.querySelectorAll('.vd-ripple-wave').forEach(w => w.remove());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('ripple', Ripple);\n }\n\n window.VanduoRipple = Ripple;\n\n})();\n", "/**\n * Vanduo Framework - Affix (Sticky) Component\n * Uses IntersectionObserver to toggle .is-stuck within the nearest scrollable parent\n */\n\n(function () {\n 'use strict';\n\n function isScrollable(element) {\n if (!element || element === document.body) return false;\n\n const style = window.getComputedStyle(element);\n const overflowY = style.overflowY;\n const overflowX = style.overflowX;\n const canScrollY = /(auto|scroll|overlay)/.test(overflowY) && element.scrollHeight > element.clientHeight;\n const canScrollX = /(auto|scroll|overlay)/.test(overflowX) && element.scrollWidth > element.clientWidth;\n\n return canScrollY || canScrollX;\n }\n\n function getScrollParent(element) {\n let parent = element.parentElement;\n\n while (parent && parent !== document.body && parent !== document.documentElement) {\n if (isScrollable(parent)) return parent;\n parent = parent.parentElement;\n }\n\n return null;\n }\n\n const Affix = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-affix, .vd-sticky, [data-vd-affix]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const parsedOffset = parseInt(el.getAttribute('data-vd-affix-offset') || '0', 10);\n const offset = Number.isNaN(parsedOffset) ? 0 : parsedOffset;\n const scrollParent = getScrollParent(el);\n let isStuck = false;\n\n const sentinel = document.createElement('div');\n sentinel.style.cssText = 'display:block;height:1px;margin-bottom:-1px;visibility:hidden;pointer-events:none;';\n el.parentNode.insertBefore(sentinel, el);\n\n el.style.setProperty('--affix-top-offset', offset + 'px');\n\n function stick() {\n if (isStuck) return;\n isStuck = true;\n el.classList.add('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:stuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n function unstick() {\n if (!isStuck) return;\n isStuck = false;\n el.classList.remove('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:unstuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n const observer = new IntersectionObserver(function (entries) {\n entries.forEach(entry => {\n if (!entry.isIntersecting) {\n stick();\n } else {\n unstick();\n }\n });\n }, {\n root: scrollParent,\n rootMargin: '-' + offset + 'px 0px 0px 0px',\n threshold: 0\n });\n\n observer.observe(sentinel);\n\n cleanup.push(\n () => observer.disconnect(),\n () => { if (sentinel.parentNode) sentinel.parentNode.removeChild(sentinel); },\n () => {\n el.classList.remove('is-stuck');\n el.style.removeProperty('--affix-top-offset');\n }\n );\n\n this.instances.set(el, { cleanup, observer, sentinel, scrollParent });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n el.classList.remove('is-stuck');\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('affix', Affix);\n }\n\n window.VanduoAffix = Affix;\n\n})();\n", "/**\n * Vanduo Framework - Suggest (Autocomplete) Component\n * Dropdown suggestion list with keyboard navigation, static/async data sources\n */\n\n(function () {\n 'use strict';\n\n /**\n * Escape HTML entities to prevent XSS when inserting into innerHTML\n * @param {string} text\n * @returns {string}\n */\n function _escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n const Suggest = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-suggest], [data-vd-autocomplete]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const minChars = parseInt(input.getAttribute('data-vd-suggest-min-chars') || '1', 10);\n const url = input.getAttribute('data-vd-suggest-url') || '';\n const staticData = input.getAttribute('data-vd-suggest') || input.getAttribute('data-vd-autocomplete') || '';\n let items = [];\n\n try { items = JSON.parse(staticData); } catch (_e) {\n items = staticData.split(',').map(s => s.trim()).filter(Boolean);\n }\n\n // Wrap input if not already wrapped\n let wrapper = input.closest('.vd-suggest-wrapper, .vd-autocomplete-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create dropdown list\n const list = document.createElement('ul');\n list.className = 'vd-suggest-list';\n list.setAttribute('role', 'listbox');\n const listId = 'vd-suggest-' + Math.random().toString(36).slice(2, 9);\n list.id = listId;\n wrapper.appendChild(list);\n\n // ARIA\n input.setAttribute('role', 'combobox');\n input.setAttribute('aria-autocomplete', 'list');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('aria-controls', listId);\n input.setAttribute('autocomplete', 'off');\n\n let highlighted = -1;\n let currentItems = [];\n let debounceTimer = null;\n\n const renderItems = (filtered, query) => {\n list.innerHTML = '';\n currentItems = filtered;\n highlighted = -1;\n\n if (filtered.length === 0) {\n const empty = document.createElement('li');\n empty.className = 'vd-suggest-empty';\n empty.textContent = 'No results';\n list.appendChild(empty);\n return;\n }\n\n filtered.forEach((item, i) => {\n const li = document.createElement('li');\n li.className = 'vd-suggest-item';\n li.setAttribute('role', 'option');\n li.id = listId + '-item-' + i;\n\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n if (query) {\n // Escape HTML first to prevent XSS, then highlight matches in the safe string\n const escaped = _escapeHtml(text);\n const re = new RegExp('(' + query.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n li.innerHTML = escaped.replace(re, '$1');\n } else {\n li.textContent = text;\n }\n\n li.addEventListener('click', () => selectItem(i));\n list.appendChild(li);\n });\n };\n\n const open = () => {\n list.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n list.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n highlighted = -1;\n input.removeAttribute('aria-activedescendant');\n };\n\n const selectItem = (index) => {\n const item = currentItems[index];\n const value = typeof item === 'object' ? (item.value || item.label || String(item)) : String(item);\n input.value = value;\n close();\n input.dispatchEvent(new CustomEvent('suggest:select', {\n detail: { value, item, index },\n bubbles: true\n }));\n };\n\n const highlight = (index) => {\n const listItems = list.querySelectorAll('.vd-suggest-item');\n listItems.forEach(li => li.classList.remove('is-highlighted'));\n if (index >= 0 && index < listItems.length) {\n highlighted = index;\n listItems[index].classList.add('is-highlighted');\n input.setAttribute('aria-activedescendant', listItems[index].id);\n listItems[index].scrollIntoView({ block: 'nearest' });\n }\n };\n\n const doSearch = async (query) => {\n if (query.length < minChars) { close(); return; }\n\n let filtered;\n if (url) {\n try {\n const separator = url.includes('?') ? '&' : '?';\n const res = await window.fetch(url + separator + 'q=' + encodeURIComponent(query));\n filtered = await res.json();\n } catch (_e) {\n filtered = [];\n }\n } else {\n const lower = query.toLowerCase();\n filtered = items.filter(item => {\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n return text.toLowerCase().includes(lower);\n });\n }\n\n renderItems(filtered, query);\n if (filtered.length > 0) open();\n else open(); // show \"no results\"\n };\n\n const inputHandler = () => {\n clearTimeout(debounceTimer);\n debounceTimer = setTimeout(() => doSearch(input.value), 200);\n };\n\n const keyHandler = (e) => {\n if (!list.classList.contains('is-open')) {\n if (e.key === 'ArrowDown') { doSearch(input.value); e.preventDefault(); }\n return;\n }\n\n const total = currentItems.length;\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n highlight(highlighted < total - 1 ? highlighted + 1 : 0);\n break;\n case 'ArrowUp':\n e.preventDefault();\n highlight(highlighted > 0 ? highlighted - 1 : total - 1);\n break;\n case 'Enter':\n e.preventDefault();\n if (highlighted >= 0) selectItem(highlighted);\n break;\n case 'Escape':\n close();\n break;\n }\n };\n\n const blurHandler = () => {\n setTimeout(close, 200);\n };\n\n input.addEventListener('input', inputHandler);\n input.addEventListener('keydown', keyHandler);\n input.addEventListener('blur', blurHandler);\n input.addEventListener('focus', () => { if (input.value.length >= minChars) doSearch(input.value); });\n\n cleanup.push(\n () => input.removeEventListener('input', inputHandler),\n () => input.removeEventListener('keydown', keyHandler),\n () => input.removeEventListener('blur', blurHandler),\n () => clearTimeout(debounceTimer),\n () => { if (list.parentNode) list.parentNode.removeChild(list); }\n );\n\n this.instances.set(input, { cleanup, list, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('suggest', Suggest);\n }\n\n window.VanduoSuggest = Suggest;\n\n})();\n", "/**\n * Vanduo Framework - Validate (Form Validation) Component\n * Declarative validation via data attributes with real-time and on-submit modes\n */\n\n(function () {\n 'use strict';\n\n const Validate = {\n instances: new Map(),\n\n rules: {\n required: (value) => value.trim().length > 0,\n email: (value) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value),\n url: (value) => { try { new URL(value); return true; } catch (_e) { return false; } },\n number: (value) => !isNaN(parseFloat(value)) && isFinite(value),\n min: (value, param) => value.length >= parseInt(param, 10),\n max: (value, param) => value.length <= parseInt(param, 10),\n minVal: (value, param) => parseFloat(value) >= parseFloat(param),\n maxVal: (value, param) => parseFloat(value) <= parseFloat(param),\n pattern: (value, param) => {\n try {\n // Cap regex length to prevent ReDoS from excessively complex patterns\n if (param.length > 100) return false;\n return new RegExp(param).test(value);\n } catch (_e) { return false; }\n },\n match: (value, param) => {\n try {\n const escaped = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(param) : param;\n const other = document.querySelector('[name=\"' + escaped + '\"]');\n return other ? value === other.value : false;\n } catch (_e) {\n return false;\n }\n }\n },\n\n messages: {\n required: 'This field is required',\n email: 'Please enter a valid email address',\n url: 'Please enter a valid URL',\n number: 'Please enter a valid number',\n min: 'Minimum {0} characters required',\n max: 'Maximum {0} characters allowed',\n minVal: 'Value must be at least {0}',\n maxVal: 'Value must be at most {0}',\n pattern: 'Invalid format',\n match: 'Fields do not match'\n },\n\n init: function () {\n const forms = document.querySelectorAll('[data-vd-validate], .vd-validate');\n forms.forEach(form => {\n if (this.instances.has(form)) return;\n this.initInstance(form);\n });\n },\n\n initInstance: function (form) {\n const cleanup = [];\n const mode = form.getAttribute('data-vd-validate-mode') || 'blur'; // blur | input | submit\n const fields = form.querySelectorAll('[data-vd-rules]');\n\n const validateField = (field) => {\n const rulesStr = field.getAttribute('data-vd-rules') || '';\n const rules = rulesStr.split('|').map(r => r.trim()).filter(Boolean);\n const value = field.value;\n const errors = [];\n\n for (const rule of rules) {\n const [name, ...params] = rule.split(':');\n const param = params.join(':');\n const validator = this.rules[name];\n\n if (validator && !validator(value, param)) {\n const customMsg = field.getAttribute('data-vd-msg-' + name);\n let msg = customMsg || this.messages[name] || 'Invalid';\n if (param) msg = msg.replace('{0}', param);\n errors.push(msg);\n break; // one error at a time\n }\n }\n\n this.setFieldState(field, errors);\n return errors.length === 0;\n };\n\n const validateAll = () => {\n let valid = true;\n fields.forEach(field => {\n if (!validateField(field)) valid = false;\n });\n return valid;\n };\n\n // Per-field listeners\n fields.forEach(field => {\n if (mode === 'input' || mode === 'blur') {\n const eventType = mode === 'input' ? 'input' : 'blur';\n const handler = () => validateField(field);\n field.addEventListener(eventType, handler);\n cleanup.push(() => field.removeEventListener(eventType, handler));\n\n if (mode === 'blur') {\n const inputClear = () => {\n if (field.classList.contains('is-invalid') || field.classList.contains('is-valid')) {\n validateField(field);\n }\n };\n field.addEventListener('input', inputClear);\n cleanup.push(() => field.removeEventListener('input', inputClear));\n }\n }\n });\n\n // Form submit\n const submitHandler = (e) => {\n const valid = validateAll();\n if (!valid) {\n e.preventDefault();\n e.stopPropagation();\n // Focus first invalid field\n const firstInvalid = form.querySelector('.is-invalid');\n if (firstInvalid) firstInvalid.focus();\n }\n form.dispatchEvent(new CustomEvent('validate:submit', {\n detail: { valid },\n bubbles: true\n }));\n };\n\n form.addEventListener('submit', submitHandler);\n cleanup.push(() => form.removeEventListener('submit', submitHandler));\n\n this.instances.set(form, { cleanup, validateAll, validateField });\n },\n\n setFieldState: function (field, errors) {\n const wrapper = field.closest('.vd-form-group') || field.parentElement;\n let errorEl = wrapper.querySelector('.vd-validate-error');\n\n field.classList.remove('is-valid', 'is-invalid');\n\n if (errors.length > 0) {\n field.classList.add('is-invalid');\n field.setAttribute('aria-invalid', 'true');\n if (!errorEl) {\n errorEl = document.createElement('div');\n errorEl.className = 'vd-validate-error';\n errorEl.id = 'vd-err-' + Math.random().toString(36).slice(2, 9);\n errorEl.setAttribute('role', 'alert');\n wrapper.appendChild(errorEl);\n }\n errorEl.textContent = errors[0];\n errorEl.style.display = '';\n field.setAttribute('aria-describedby', errorEl.id);\n } else if (field.value.trim()) {\n field.classList.add('is-valid');\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n } else {\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n }\n },\n\n validateForm: function (form) {\n const instance = this.instances.get(form);\n return instance ? instance.validateAll() : false;\n },\n\n addRule: function (name, validator, message) {\n this.rules[name] = validator;\n if (message) this.messages[name] = message;\n },\n\n destroy: function (form) {\n const instance = this.instances.get(form);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(form);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, form) => this.destroy(form));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('validate', Validate);\n }\n\n window.VanduoValidate = Validate;\n\n})();\n", "/**\n * Vanduo Framework - Datepicker Component\n * Calendar popup attached to input field with month/year navigation\n */\n\n(function () {\n 'use strict';\n\n const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\n const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];\n\n const Datepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-datepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const format = input.getAttribute('data-vd-datepicker-format') || 'yyyy-mm-dd';\n const minStr = input.getAttribute('data-vd-datepicker-min');\n const maxStr = input.getAttribute('data-vd-datepicker-max');\n const minDate = minStr ? new Date(minStr) : null;\n const maxDate = maxStr ? new Date(maxStr) : null;\n\n const today = new Date();\n let viewYear = today.getFullYear();\n let viewMonth = today.getMonth();\n let selectedDate = null;\n let viewMode = 'days'; // days | months | years\n\n // Parse existing value\n if (input.value) {\n const parsed = new Date(input.value);\n if (!isNaN(parsed.getTime())) {\n selectedDate = parsed;\n viewYear = parsed.getFullYear();\n viewMonth = parsed.getMonth();\n }\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-datepicker-popup';\n popup.setAttribute('role', 'dialog');\n popup.setAttribute('aria-label', 'Choose date');\n\n const wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n wrapper.appendChild(popup);\n\n const formatDate = (d) => {\n const yyyy = d.getFullYear();\n const mm = String(d.getMonth() + 1).padStart(2, '0');\n const dd = String(d.getDate()).padStart(2, '0');\n return format.replace('yyyy', yyyy).replace('mm', mm).replace('dd', dd);\n };\n\n const isDisabled = (d) => {\n if (minDate && d < minDate) return true;\n if (maxDate && d > maxDate) return true;\n return false;\n };\n\n const isSameDay = (a, b) => a && b &&\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate();\n\n const render = () => {\n popup.innerHTML = '';\n\n // Header\n const header = document.createElement('div');\n header.className = 'vd-datepicker-header';\n\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-datepicker-prev';\n prevBtn.innerHTML = '‹';\n prevBtn.setAttribute('aria-label', 'Previous');\n\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-datepicker-next';\n nextBtn.innerHTML = '›';\n nextBtn.setAttribute('aria-label', 'Next');\n\n const title = document.createElement('span');\n title.className = 'vd-datepicker-title';\n\n if (viewMode === 'days') {\n title.textContent = MONTHS[viewMonth] + ' ' + viewYear;\n title.addEventListener('click', () => { viewMode = 'months'; render(); });\n prevBtn.addEventListener('click', () => { viewMonth--; if (viewMonth < 0) { viewMonth = 11; viewYear--; } render(); });\n nextBtn.addEventListener('click', () => { viewMonth++; if (viewMonth > 11) { viewMonth = 0; viewYear++; } render(); });\n } else if (viewMode === 'months') {\n title.textContent = String(viewYear);\n title.addEventListener('click', () => { viewMode = 'years'; render(); });\n prevBtn.addEventListener('click', () => { viewYear--; render(); });\n nextBtn.addEventListener('click', () => { viewYear++; render(); });\n } else {\n const decadeStart = Math.floor(viewYear / 10) * 10;\n title.textContent = decadeStart + ' - ' + (decadeStart + 9);\n prevBtn.addEventListener('click', () => { viewYear -= 10; render(); });\n nextBtn.addEventListener('click', () => { viewYear += 10; render(); });\n }\n\n header.appendChild(prevBtn);\n header.appendChild(title);\n header.appendChild(nextBtn);\n popup.appendChild(header);\n\n if (viewMode === 'days') {\n // Weekday headers\n const weekdays = document.createElement('div');\n weekdays.className = 'vd-datepicker-weekdays';\n DAYS.forEach(d => {\n const span = document.createElement('span');\n span.textContent = d;\n weekdays.appendChild(span);\n });\n popup.appendChild(weekdays);\n\n // Days grid\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-days';\n\n const firstDay = new Date(viewYear, viewMonth, 1).getDay();\n const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();\n const daysInPrev = new Date(viewYear, viewMonth, 0).getDate();\n\n // Previous month padding\n for (let i = firstDay - 1; i >= 0; i--) {\n const btn = createDayBtn(daysInPrev - i, true);\n grid.appendChild(btn);\n }\n\n // Current month\n for (let d = 1; d <= daysInMonth; d++) {\n const date = new Date(viewYear, viewMonth, d);\n const btn = createDayBtn(d, false, date);\n grid.appendChild(btn);\n }\n\n // Next month padding\n const totalCells = firstDay + daysInMonth;\n const remaining = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7);\n for (let i = 1; i <= remaining; i++) {\n const btn = createDayBtn(i, true);\n grid.appendChild(btn);\n }\n\n popup.appendChild(grid);\n } else if (viewMode === 'months') {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-months';\n MONTHS.forEach((name, i) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-month-btn';\n btn.textContent = name.slice(0, 3);\n if (selectedDate && selectedDate.getFullYear() === viewYear && selectedDate.getMonth() === i) {\n btn.classList.add('is-selected');\n }\n btn.addEventListener('click', () => { viewMonth = i; viewMode = 'days'; render(); });\n grid.appendChild(btn);\n });\n popup.appendChild(grid);\n } else {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-years';\n const decadeStart = Math.floor(viewYear / 10) * 10;\n for (let y = decadeStart - 1; y <= decadeStart + 10; y++) {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-year-btn';\n btn.textContent = y;\n if (selectedDate && selectedDate.getFullYear() === y) btn.classList.add('is-selected');\n if (y < decadeStart || y > decadeStart + 9) btn.style.opacity = '0.4';\n btn.addEventListener('click', () => { viewYear = y; viewMode = 'months'; render(); });\n grid.appendChild(btn);\n }\n popup.appendChild(grid);\n }\n };\n\n const createDayBtn = (day, outside, date) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-day';\n btn.textContent = day;\n\n if (outside) {\n btn.classList.add('is-outside');\n btn.tabIndex = -1;\n return btn;\n }\n\n if (date && isSameDay(date, today)) btn.classList.add('is-today');\n if (date && isSameDay(date, selectedDate)) btn.classList.add('is-selected');\n if (date && isDisabled(date)) {\n btn.classList.add('is-disabled');\n return btn;\n }\n\n if (date) {\n btn.addEventListener('click', () => {\n selectedDate = date;\n viewYear = date.getFullYear();\n viewMonth = date.getMonth();\n input.value = formatDate(date);\n close();\n input.dispatchEvent(new CustomEvent('datepicker:select', {\n detail: { date, formatted: input.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n }\n\n return btn;\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n viewMode = 'days';\n };\n\n // Events\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'dialog');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close, popup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('datepicker', Datepicker);\n }\n\n window.VanduoDatepicker = Datepicker;\n\n})();\n", "/**\n * Vanduo Framework - Timepicker Component\n * Dropdown time selection with 12h/24h format and configurable step intervals\n */\n\n(function () {\n 'use strict';\n\n const Timepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-timepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const is24h = input.getAttribute('data-vd-timepicker-format') === '24h';\n const step = parseInt(input.getAttribute('data-vd-timepicker-step') || '30', 10);\n\n // Create wrapper\n let wrapper = input.closest('.vd-suggest-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-timepicker-popup';\n popup.setAttribute('role', 'listbox');\n wrapper.appendChild(popup);\n\n // Generate time slots\n const times = [];\n for (let h = 0; h < 24; h++) {\n for (let m = 0; m < 60; m += step) {\n const hh24 = String(h).padStart(2, '0');\n const mm = String(m).padStart(2, '0');\n\n if (is24h) {\n times.push({ display: hh24 + ':' + mm, value: hh24 + ':' + mm });\n } else {\n const period = h < 12 ? 'AM' : 'PM';\n const h12 = h === 0 ? 12 : (h > 12 ? h - 12 : h);\n const display = h12 + ':' + mm + ' ' + period;\n times.push({ display, value: hh24 + ':' + mm });\n }\n }\n }\n\n const render = () => {\n popup.innerHTML = '';\n times.forEach(t => {\n const item = document.createElement('div');\n item.className = 'vd-timepicker-item';\n item.setAttribute('role', 'option');\n item.textContent = t.display;\n\n if (input.value === t.value || input.value === t.display) {\n item.classList.add('is-selected');\n }\n\n item.addEventListener('click', () => {\n input.value = t.display;\n popup.querySelectorAll('.vd-timepicker-item').forEach(i => i.classList.remove('is-selected'));\n item.classList.add('is-selected');\n close();\n input.dispatchEvent(new CustomEvent('timepicker:select', {\n detail: { display: t.display, value: t.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n\n popup.appendChild(item);\n });\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n // Scroll to selected\n const selected = popup.querySelector('.is-selected');\n if (selected) selected.scrollIntoView({ block: 'center' });\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n };\n\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'listbox');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n input.readOnly = true;\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('timepicker', Timepicker);\n }\n\n window.VanduoTimepicker = Timepicker;\n\n})();\n", "/**\n * Vanduo Framework - Stepper Component\n * Multi-step progress indicator with state management\n */\n\n(function () {\n 'use strict';\n\n const Stepper = {\n instances: new Map(),\n\n init: function () {\n const steppers = document.querySelectorAll('.vd-stepper');\n steppers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const items = Array.from(el.querySelectorAll('.vd-stepper-item'));\n const isClickable = el.classList.contains('vd-stepper-clickable');\n let currentIndex = items.findIndex(i => i.classList.contains('is-active'));\n if (currentIndex === -1) currentIndex = 0;\n\n const setStep = (index) => {\n if (index < 0 || index >= items.length) return;\n const prev = currentIndex;\n currentIndex = index;\n\n items.forEach((item, i) => {\n item.classList.remove('is-active', 'is-completed');\n if (i < index) item.classList.add('is-completed');\n else if (i === index) item.classList.add('is-active');\n });\n\n el.dispatchEvent(new CustomEvent('stepper:change', {\n detail: { current: index, previous: prev, total: items.length },\n bubbles: true\n }));\n };\n\n if (isClickable) {\n items.forEach((item, i) => {\n const handler = () => setStep(i);\n item.addEventListener('click', handler);\n cleanup.push(() => item.removeEventListener('click', handler));\n });\n }\n\n // Initialize current state\n setStep(currentIndex);\n\n this.instances.set(el, {\n cleanup,\n setStep,\n next: () => setStep(currentIndex + 1),\n prev: () => setStep(currentIndex - 1),\n getCurrent: () => currentIndex\n });\n },\n\n setStep: function (el, index) {\n const inst = this.instances.get(el);\n if (inst) inst.setStep(index);\n },\n\n next: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.next();\n },\n\n prev: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.prev();\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('stepper', Stepper);\n }\n\n window.VanduoStepper = Stepper;\n\n})();\n", "/**\n * Vanduo Framework - Rating Component\n * Star-based rating input with hover preview and read-only mode\n */\n\n(function () {\n 'use strict';\n\n const Rating = {\n instances: new Map(),\n\n init: function () {\n const ratings = document.querySelectorAll('[data-vd-rating]');\n ratings.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const max = parseInt(el.getAttribute('data-vd-rating-max') || '5', 10);\n const initialValue = parseFloat(el.getAttribute('data-vd-rating-value') || '0');\n const readonly = el.classList.contains('vd-rating-readonly') || el.hasAttribute('data-vd-rating-readonly');\n let currentValue = initialValue;\n\n el.classList.add('vd-rating');\n el.setAttribute('role', 'radiogroup');\n el.setAttribute('aria-label', el.getAttribute('aria-label') || 'Rating');\n\n // Clear existing stars\n el.innerHTML = '';\n\n // Create stars\n const stars = [];\n for (let i = 1; i <= max; i++) {\n const star = document.createElement('button');\n star.type = 'button';\n star.className = 'vd-rating-star';\n star.setAttribute('role', 'radio');\n star.setAttribute('aria-label', i + ' star' + (i > 1 ? 's' : ''));\n star.setAttribute('aria-checked', i <= currentValue ? 'true' : 'false');\n if (readonly) star.tabIndex = -1;\n stars.push(star);\n el.appendChild(star);\n }\n\n // Value display\n const valueDisplay = document.createElement('span');\n valueDisplay.className = 'vd-rating-value';\n valueDisplay.textContent = currentValue > 0 ? currentValue.toString() : '';\n el.appendChild(valueDisplay);\n\n const updateStars = (value) => {\n stars.forEach((star, i) => {\n star.classList.remove('is-active', 'is-half');\n const starNum = i + 1;\n if (starNum <= Math.floor(value)) {\n star.classList.add('is-active');\n } else if (starNum - 0.5 <= value) {\n star.classList.add('is-half');\n }\n star.setAttribute('aria-checked', starNum <= value ? 'true' : 'false');\n });\n valueDisplay.textContent = value > 0 ? value.toString() : '';\n };\n\n updateStars(currentValue);\n\n if (!readonly) {\n stars.forEach((star, i) => {\n const enterHandler = () => {\n stars.forEach((s, j) => {\n s.classList.toggle('is-hovered', j <= i);\n });\n };\n const leaveHandler = () => {\n stars.forEach(s => s.classList.remove('is-hovered'));\n };\n const clickHandler = () => {\n currentValue = i + 1;\n el.setAttribute('data-vd-rating-value', currentValue);\n updateStars(currentValue);\n el.dispatchEvent(new CustomEvent('rating:change', {\n detail: { value: currentValue, max },\n bubbles: true\n }));\n };\n\n star.addEventListener('mouseenter', enterHandler);\n star.addEventListener('mouseleave', leaveHandler);\n star.addEventListener('click', clickHandler);\n\n cleanup.push(\n () => star.removeEventListener('mouseenter', enterHandler),\n () => star.removeEventListener('mouseleave', leaveHandler),\n () => star.removeEventListener('click', clickHandler)\n );\n });\n\n // Keyboard\n const keyHandler = (e) => {\n if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n e.preventDefault();\n if (currentValue < max) {\n currentValue++;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n e.preventDefault();\n if (currentValue > 1) {\n currentValue--;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n }\n };\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n }\n\n this.instances.set(el, {\n cleanup,\n getValue: () => currentValue,\n setValue: (v) => { currentValue = v; updateStars(v); }\n });\n },\n\n getValue: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getValue() : 0;\n },\n\n setValue: function (el, value) {\n const inst = this.instances.get(el);\n if (inst) inst.setValue(value);\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('rating', Rating);\n }\n\n window.VanduoRating = Rating;\n\n})();\n", "/**\n * Vanduo Framework - Transfer (Dual-list) Component\n * Source-to-target list transfer with search, select-all, and move actions\n */\n\n(function () {\n 'use strict';\n\n const Transfer = {\n instances: new Map(),\n\n init: function () {\n const transfers = document.querySelectorAll('[data-vd-transfer]');\n transfers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n el.classList.add('vd-transfer');\n\n let sourceData, targetData;\n try {\n const raw = JSON.parse(el.getAttribute('data-vd-transfer') || '[]');\n sourceData = raw.map((item, i) => ({\n id: item.id || 'item-' + i,\n label: item.label || item.text || String(item),\n selected: false\n }));\n } catch (_e) {\n sourceData = [];\n }\n targetData = [];\n\n const sourceSelected = new Set();\n const targetSelected = new Set();\n\n const render = () => {\n el.innerHTML = '';\n\n // Source panel\n const sourcePanel = createPanel('Source', sourceData, sourceSelected, 'source');\n // Actions\n const actions = document.createElement('div');\n actions.className = 'vd-transfer-actions';\n\n const moveRightBtn = document.createElement('button');\n moveRightBtn.type = 'button';\n moveRightBtn.className = 'vd-transfer-btn';\n moveRightBtn.innerHTML = '›';\n moveRightBtn.setAttribute('aria-label', 'Move to target');\n moveRightBtn.disabled = sourceSelected.size === 0;\n moveRightBtn.addEventListener('click', () => moveRight());\n\n const moveLeftBtn = document.createElement('button');\n moveLeftBtn.type = 'button';\n moveLeftBtn.className = 'vd-transfer-btn';\n moveLeftBtn.innerHTML = '‹';\n moveLeftBtn.setAttribute('aria-label', 'Move to source');\n moveLeftBtn.disabled = targetSelected.size === 0;\n moveLeftBtn.addEventListener('click', () => moveLeft());\n\n actions.appendChild(moveRightBtn);\n actions.appendChild(moveLeftBtn);\n\n // Target panel\n const targetPanel = createPanel('Target', targetData, targetSelected, 'target');\n\n el.appendChild(sourcePanel);\n el.appendChild(actions);\n el.appendChild(targetPanel);\n };\n\n const createPanel = (title, data, selected, _side) => {\n const panel = document.createElement('div');\n panel.className = 'vd-transfer-panel';\n\n const header = document.createElement('div');\n header.className = 'vd-transfer-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const count = document.createElement('span');\n count.className = 'vd-transfer-count';\n count.textContent = selected.size + '/' + data.length;\n header.appendChild(titleSpan);\n header.appendChild(count);\n panel.appendChild(header);\n\n // Search\n const searchDiv = document.createElement('div');\n searchDiv.className = 'vd-transfer-search';\n const searchInput = document.createElement('input');\n searchInput.type = 'text';\n searchInput.placeholder = 'Search...';\n searchInput.setAttribute('aria-label', 'Search ' + title.toLowerCase());\n searchDiv.appendChild(searchInput);\n panel.appendChild(searchDiv);\n\n // List\n const list = document.createElement('ul');\n list.className = 'vd-transfer-list';\n list.setAttribute('role', 'listbox');\n\n const renderList = (filter) => {\n list.innerHTML = '';\n const filtered = filter ? data.filter(d => {\n const label = (d.label || d.text || String(d)).toLowerCase();\n return label.includes(filter.toLowerCase());\n }) : data;\n filtered.forEach(item => {\n const li = document.createElement('li');\n li.className = 'vd-transfer-item';\n li.setAttribute('role', 'option');\n if (selected.has(item.id)) li.classList.add('is-selected');\n\n const checkbox = document.createElement('input');\n checkbox.type = 'checkbox';\n checkbox.checked = selected.has(item.id);\n checkbox.setAttribute('aria-label', item.label);\n\n const label = document.createElement('span');\n label.textContent = item.label;\n\n li.addEventListener('click', () => {\n if (selected.has(item.id)) selected.delete(item.id);\n else selected.add(item.id);\n render();\n });\n\n li.appendChild(checkbox);\n li.appendChild(label);\n list.appendChild(li);\n });\n };\n\n searchInput.addEventListener('input', () => renderList(searchInput.value));\n renderList('');\n\n panel.appendChild(list);\n return panel;\n };\n\n const moveRight = () => {\n const toMove = sourceData.filter(d => sourceSelected.has(d.id));\n sourceData = sourceData.filter(d => !sourceSelected.has(d.id));\n targetData = targetData.concat(toMove);\n sourceSelected.clear();\n render();\n fireChange();\n };\n\n const moveLeft = () => {\n const toMove = targetData.filter(d => targetSelected.has(d.id));\n targetData = targetData.filter(d => !targetSelected.has(d.id));\n sourceData = sourceData.concat(toMove);\n targetSelected.clear();\n render();\n fireChange();\n };\n\n const fireChange = () => {\n el.dispatchEvent(new CustomEvent('transfer:change', {\n detail: {\n source: sourceData.map(d => d.id),\n target: targetData.map(d => d.id)\n },\n bubbles: true\n }));\n };\n\n render();\n\n this.instances.set(el, {\n cleanup,\n getTarget: () => targetData.map(d => d.id),\n getSource: () => sourceData.map(d => d.id)\n });\n },\n\n getSelected: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getTarget() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('transfer', Transfer);\n }\n\n window.VanduoTransfer = Transfer;\n\n})();\n", "/**\n * Vanduo Framework - Tree View Component\n * Hierarchical collapsible tree with checkbox selection and keyboard navigation\n */\n\n(function () {\n 'use strict';\n\n const Tree = {\n instances: new Map(),\n\n init: function () {\n const trees = document.querySelectorAll('[data-vd-tree]');\n trees.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const cascade = el.getAttribute('data-vd-tree-cascade') !== 'false';\n\n let data;\n try { data = JSON.parse(el.getAttribute('data-vd-tree') || '[]'); } catch (_e) { data = []; }\n\n el.classList.add('vd-tree');\n el.setAttribute('role', 'tree');\n\n const render = (items, parent) => {\n parent.innerHTML = '';\n items.forEach(item => {\n const node = document.createElement('li');\n node.className = 'vd-tree-node';\n node.setAttribute('role', 'treeitem');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n if (item.open) node.classList.add('is-open');\n\n const content = document.createElement('div');\n content.className = 'vd-tree-node-content';\n\n // Toggle\n if (item.children && item.children.length > 0) {\n const toggle = document.createElement('button');\n toggle.type = 'button';\n toggle.className = 'vd-tree-toggle';\n toggle.setAttribute('aria-label', 'Toggle');\n toggle.addEventListener('click', (e) => {\n e.stopPropagation();\n item.open = !item.open;\n node.classList.toggle('is-open');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n });\n content.appendChild(toggle);\n } else {\n const ph = document.createElement('span');\n ph.className = 'vd-tree-toggle-placeholder';\n content.appendChild(ph);\n }\n\n // Checkbox\n if (el.hasAttribute('data-vd-tree-checkbox')) {\n const cb = document.createElement('input');\n cb.type = 'checkbox';\n cb.className = 'vd-tree-checkbox';\n cb.checked = !!item.checked;\n cb.setAttribute('aria-label', item.label);\n cb.addEventListener('change', (e) => {\n e.stopPropagation();\n item.checked = cb.checked;\n if (cascade && item.children) {\n setChildChecked(item.children, cb.checked);\n render(data, el);\n }\n el.dispatchEvent(new CustomEvent('tree:check', {\n detail: { id: item.id, checked: cb.checked, label: item.label },\n bubbles: true\n }));\n });\n content.appendChild(cb);\n }\n\n // Icon\n if (item.icon) {\n const icon = document.createElement('span');\n icon.className = 'vd-tree-icon ' + item.icon;\n content.appendChild(icon);\n }\n\n // Label\n const label = document.createElement('span');\n label.className = 'vd-tree-label';\n label.textContent = item.label || '';\n content.appendChild(label);\n\n node.appendChild(content);\n\n // Children\n if (item.children && item.children.length > 0) {\n const childList = document.createElement('ul');\n childList.className = 'vd-tree-children';\n childList.setAttribute('role', 'group');\n render(item.children, childList);\n node.appendChild(childList);\n }\n\n parent.appendChild(node);\n });\n };\n\n const setChildChecked = (items, checked) => {\n items.forEach(item => {\n item.checked = checked;\n if (item.children) setChildChecked(item.children, checked);\n });\n };\n\n // Keyboard\n const keyHandler = (e) => {\n const focused = document.activeElement;\n if (!el.contains(focused)) return;\n\n const nodes = Array.from(el.querySelectorAll('.vd-tree-node-content'));\n const idx = nodes.indexOf(focused.closest('.vd-tree-node-content'));\n if (idx === -1) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (idx < nodes.length - 1) {\n const next = nodes[idx + 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (next) next.focus();\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (idx > 0) {\n const prev = nodes[idx - 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (prev) prev.focus();\n }\n break;\n }\n };\n\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n render(data, el);\n\n this.instances.set(el, {\n cleanup,\n getData: () => data,\n getChecked: () => {\n const checked = [];\n const collect = (items) => {\n items.forEach(i => {\n if (i.checked) checked.push(i.id || i.label);\n if (i.children) collect(i.children);\n });\n };\n collect(data);\n return checked;\n }\n });\n },\n\n getChecked: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getChecked() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tree', Tree);\n }\n\n window.VanduoTree = Tree;\n\n})();\n", "/**\n * Vanduo Framework - Spotlight (Feature Discovery) Component\n * Guided tour with overlay highlight and step-through tooltip\n */\n\n(function () {\n 'use strict';\n\n const Spotlight = {\n _active: false,\n _steps: [],\n _currentStep: 0,\n _elements: {},\n _cleanup: [],\n _boundTriggers: new WeakMap(),\n _triggerElement: null,\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-spotlight]');\n\n triggers.forEach(trigger => {\n if (this._boundTriggers.has(trigger)) return;\n\n const clickHandler = (event) => {\n event.preventDefault();\n\n const steps = this._parseSteps(trigger.getAttribute('data-vd-spotlight'));\n if (steps.length === 0) return;\n\n this.start(steps, { trigger });\n };\n\n trigger.addEventListener('click', clickHandler);\n this._boundTriggers.set(trigger, clickHandler);\n });\n },\n\n _parseSteps: function (raw) {\n if (typeof raw !== 'string' || raw.trim() === '') return [];\n\n try {\n const parsed = JSON.parse(raw);\n return this._normalizeSteps(parsed);\n } catch (error) {\n console.error('VanduoSpotlight: invalid data-vd-spotlight payload.', error);\n return [];\n }\n },\n\n _normalizeStep: function (step) {\n if (!step || typeof step !== 'object') return null;\n\n const target = step.target;\n const hasSelectorTarget = typeof target === 'string' && target.trim() !== '';\n const hasElementTarget = typeof Element !== 'undefined' && target instanceof Element;\n\n if (!hasSelectorTarget && !hasElementTarget) return null;\n\n const title = typeof step.title === 'string' ? step.title : '';\n const description = typeof step.description === 'string'\n ? step.description\n : (typeof step.content === 'string' ? step.content : '');\n\n return {\n target,\n title,\n description\n };\n },\n\n _normalizeSteps: function (steps) {\n if (!Array.isArray(steps)) return [];\n\n return steps\n .map(step => this._normalizeStep(step))\n .filter(Boolean);\n },\n\n start: function (steps, options) {\n if (this._active) this.stop();\n\n const normalizedSteps = this._normalizeSteps(steps);\n if (normalizedSteps.length === 0) return;\n\n const startOptions = options || {};\n\n this._steps = normalizedSteps;\n this._currentStep = 0;\n this._active = true;\n this._triggerElement = startOptions.trigger || (document.activeElement instanceof HTMLElement ? document.activeElement : null);\n\n // Create overlay\n const overlay = document.createElement('div');\n overlay.className = 'vd-spotlight-overlay';\n overlay.setAttribute('aria-hidden', 'true');\n document.body.appendChild(overlay);\n\n // Create tooltip\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-spotlight-tooltip';\n tooltip.setAttribute('role', 'dialog');\n tooltip.setAttribute('aria-modal', 'true');\n tooltip.tabIndex = -1;\n document.body.appendChild(tooltip);\n\n this._elements = { overlay, tooltip };\n\n // ESC to close\n const escHandler = (e) => { if (e.key === 'Escape') this.stop(); };\n document.addEventListener('keydown', escHandler);\n this._cleanup.push(() => document.removeEventListener('keydown', escHandler));\n\n // Overlay click to close\n overlay.addEventListener('click', () => this.stop());\n\n this._showStep(this._currentStep);\n },\n\n _showStep: function (index) {\n const step = this._steps[index];\n if (!step) return;\n\n const target = typeof step.target === 'string' ? document.querySelector(step.target) : step.target;\n const { tooltip } = this._elements;\n\n // Remove previous highlight\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n // Highlight target\n if (target) {\n target.classList.add('vd-spotlight-target');\n target.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n\n // Build tooltip content\n const total = this._steps.length;\n tooltip.innerHTML = '';\n tooltip.removeAttribute('aria-labelledby');\n tooltip.removeAttribute('aria-describedby');\n\n if (step.title) {\n const title = document.createElement('h4');\n title.className = 'vd-spotlight-title';\n title.id = 'vd-spotlight-title-' + index + '-' + Date.now();\n title.textContent = step.title;\n tooltip.appendChild(title);\n tooltip.setAttribute('aria-labelledby', title.id);\n }\n\n if (step.description) {\n const desc = document.createElement('p');\n desc.className = 'vd-spotlight-description';\n desc.id = 'vd-spotlight-description-' + index + '-' + Date.now();\n desc.textContent = step.description;\n tooltip.appendChild(desc);\n tooltip.setAttribute('aria-describedby', desc.id);\n }\n\n // Footer\n const footer = document.createElement('div');\n footer.className = 'vd-spotlight-footer';\n footer.setAttribute('aria-label', 'Step ' + (index + 1) + ' of ' + total);\n\n const counter = document.createElement('span');\n counter.className = 'vd-spotlight-counter';\n counter.textContent = (index + 1) + ' / ' + total;\n\n const actions = document.createElement('div');\n actions.className = 'vd-spotlight-actions';\n\n if (index > 0) {\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-spotlight-btn';\n prevBtn.textContent = 'Back';\n prevBtn.addEventListener('click', () => this.prev());\n actions.appendChild(prevBtn);\n }\n\n const skipBtn = document.createElement('button');\n skipBtn.type = 'button';\n skipBtn.className = 'vd-spotlight-btn';\n skipBtn.textContent = 'Skip';\n skipBtn.addEventListener('click', () => this.stop());\n actions.appendChild(skipBtn);\n\n if (index < total - 1) {\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n nextBtn.textContent = 'Next';\n nextBtn.addEventListener('click', () => this.next());\n actions.appendChild(nextBtn);\n } else {\n const doneBtn = document.createElement('button');\n doneBtn.type = 'button';\n doneBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n doneBtn.textContent = 'Done';\n doneBtn.addEventListener('click', () => this.stop());\n actions.appendChild(doneBtn);\n }\n\n footer.appendChild(counter);\n footer.appendChild(actions);\n tooltip.appendChild(footer);\n\n // Position tooltip near target\n if (target) {\n requestAnimationFrame(() => {\n const rect = target.getBoundingClientRect();\n const tRect = tooltip.getBoundingClientRect();\n let top = rect.bottom + 12 + window.scrollY;\n let left = rect.left + (rect.width - tRect.width) / 2 + window.scrollX;\n\n // Keep in viewport\n left = Math.max(8, Math.min(left, window.innerWidth - tRect.width - 8));\n if (top + tRect.height > window.innerHeight + window.scrollY) {\n top = rect.top - tRect.height - 12 + window.scrollY;\n }\n\n tooltip.style.top = top + 'px';\n tooltip.style.left = left + 'px';\n });\n }\n\n document.dispatchEvent(new CustomEvent('spotlight:step', {\n detail: { index, step: index, total, data: step }\n }));\n },\n\n next: function () {\n if (this._currentStep < this._steps.length - 1) {\n this._currentStep++;\n this._showStep(this._currentStep);\n }\n },\n\n prev: function () {\n if (this._currentStep > 0) {\n this._currentStep--;\n this._showStep(this._currentStep);\n }\n },\n\n stop: function () {\n if (!this._active) return;\n\n const total = this._steps.length;\n const detail = {\n completedSteps: total === 0 ? 0 : Math.min(this._currentStep + 1, total),\n total,\n completed: total > 0 && this._currentStep >= total - 1\n };\n\n this._active = false;\n\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n if (this._elements.overlay && this._elements.overlay.parentNode) {\n this._elements.overlay.parentNode.removeChild(this._elements.overlay);\n }\n if (this._elements.tooltip && this._elements.tooltip.parentNode) {\n this._elements.tooltip.parentNode.removeChild(this._elements.tooltip);\n }\n\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n this._elements = {};\n this._steps = [];\n this._currentStep = 0;\n\n if (this._triggerElement && this._triggerElement.isConnected && typeof this._triggerElement.focus === 'function') {\n this._triggerElement.focus();\n }\n this._triggerElement = null;\n\n document.dispatchEvent(new CustomEvent('spotlight:end', { detail }));\n },\n\n destroyAll: function () {\n this.stop();\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('spotlight', Spotlight);\n }\n\n window.VanduoSpotlight = Spotlight;\n\n})();\n", "/**\n * Vanduo Framework - Music Player Component\n * HTML5 Audio-based music player with transport controls, volume,\n * and optional shuffle, seek bar, and playlist features.\n *\n * Options (passed to MusicPlayer.init or data-music-player-options):\n * tracks {Array} - [{name, url}] \u2014 required\n * volume {number} - Initial volume 0\u20131 (default 0.5)\n * shuffle {boolean} - Shuffle on init (default false)\n * showProgress {boolean} - Show seek/progress bar (default false)\n * showPlaylist {boolean} - Show expandable playlist panel (default false)\n * autoAdvance {boolean} - Auto-play next track on end (default true)\n *\n * Custom events (all bubble, dispatched on container):\n * musicplayer:play \u2014 playback started\n * musicplayer:pause \u2014 playback paused\n * musicplayer:trackchange \u2014 detail: { index, name, url }\n * musicplayer:volumechange \u2014 detail: { volume }\n * musicplayer:ended \u2014 last track ended (autoAdvance=false only)\n *\n * Programmatic API:\n * MusicPlayer.init(container?, options?)\n * MusicPlayer.play(container)\n * MusicPlayer.pause(container)\n * MusicPlayer.toggle(container)\n * MusicPlayer.next(container)\n * MusicPlayer.previous(container)\n * MusicPlayer.setVolume(container, value)\n * MusicPlayer.setTrack(container, index)\n * MusicPlayer.shuffle(container)\n * MusicPlayer.getState(container)\n * MusicPlayer.destroy(container)\n * MusicPlayer.destroyAll()\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fisher-Yates shuffle (returns new array).\n * @param {Array} arr\n * @returns {Array}\n */\n function shuffleArray(arr) {\n const shuffled = arr.slice();\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n const tmp = shuffled[i];\n shuffled[i] = shuffled[j];\n shuffled[j] = tmp;\n }\n return shuffled;\n }\n\n /**\n * Format seconds as m:ss.\n * @param {number} seconds\n * @returns {string}\n */\n function formatTime(seconds) {\n if (!isFinite(seconds) || seconds < 0) return '0:00';\n const m = Math.floor(seconds / 60);\n const s = Math.floor(seconds % 60);\n return m + ':' + (s < 10 ? '0' : '') + s;\n }\n\n /**\n * Set CSS background-size on a range input to visually fill the track.\n * @param {HTMLInputElement} input\n */\n function updateRangeFill(input) {\n const min = parseFloat(input.min) || 0;\n const max = parseFloat(input.max) || 1;\n const val = parseFloat(input.value) || 0;\n const pct = ((val - min) / (max - min)) * 100;\n input.style.setProperty('--fill', pct + '%');\n // Fallback inline gradient for browsers without ::-moz-range-progress\n input.style.backgroundImage =\n 'linear-gradient(to right, var(--music-player-track-fill, currentColor) 0%, ' +\n 'var(--music-player-track-fill, currentColor) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) 100%)';\n }\n\n /* \u2500\u2500\u2500 Phosphor icon helper (matches framework icon style) \u2500 */\n\n /**\n * Return an element (Phosphor icon).\n * @param {string} name\n * @returns {HTMLElement}\n */\n function icon(name) {\n const el = document.createElement('i');\n el.className = 'ph ph-' + name;\n el.setAttribute('aria-hidden', 'true');\n return el;\n }\n\n /* \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const MusicPlayer = {\n /** @type {Map} */\n instances: new Map(),\n\n /**\n * Default options.\n */\n defaults: {\n tracks: [],\n volume: 0.5,\n shuffle: false,\n showProgress: false,\n showPlaylist: false,\n autoAdvance: true,\n },\n\n /**\n * Auto-initialize all .vd-music-player / [data-music-player] elements.\n * Options can be provided via data-music-player-options (JSON string).\n */\n init: function () {\n document.querySelectorAll('.vd-music-player, [data-music-player]').forEach((el) => {\n if (this.instances.has(el)) return;\n\n let opts = {};\n const attr = el.getAttribute('data-music-player-options');\n if (attr) {\n try { opts = JSON.parse(attr); } catch (_) { /* ignore malformed JSON */ }\n }\n this.initPlayer(el, opts);\n });\n },\n\n /**\n * Initialize a single player element.\n * @param {HTMLElement} container\n * @param {Object} [options]\n */\n initPlayer: function (container, options) {\n const opts = Object.assign({}, this.defaults, options || {});\n\n // Validate and normalise tracks\n const rawTracks = Array.isArray(opts.tracks) ? opts.tracks : [];\n const tracks = rawTracks.filter((t) => t && typeof t.url === 'string' && t.url.trim());\n\n // Build shuffled working copy without mutating opts\n const trackList = opts.shuffle ? shuffleArray(tracks) : tracks.slice();\n\n /* \u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const state = {\n tracks: trackList,\n originalTracks: tracks.slice(),\n currentIndex: 0,\n isPlaying: false,\n volume: Math.max(0, Math.min(1, opts.volume)),\n shuffle: opts.shuffle,\n showProgress: opts.showProgress,\n showPlaylist: opts.showPlaylist,\n autoAdvance: opts.autoAdvance,\n audio: null,\n };\n\n /* \u2500\u2500 Audio element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const audio = new Audio();\n audio.volume = state.volume;\n audio.preload = 'metadata';\n state.audio = audio;\n\n /* \u2500\u2500 Build DOM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n this._buildDOM(container, state);\n\n // Grab references after DOM build\n const refs = {\n btnPlay: container.querySelector('.vd-music-player-btn-play'),\n btnPrev: container.querySelector('.vd-music-player-btn-prev'),\n btnNext: container.querySelector('.vd-music-player-btn-next'),\n btnShuffle: container.querySelector('.vd-music-player-btn-shuffle'),\n btnPlaylist: container.querySelector('.vd-music-player-btn-playlist'),\n trackName: container.querySelector('.vd-music-player-track-name'),\n volumeSlider: container.querySelector('.vd-music-player-volume-slider'),\n volumeIcon: container.querySelector('.vd-music-player-volume-icon'),\n progressBar: container.querySelector('.vd-music-player-progress-bar'),\n timeElapsed: container.querySelector('.vd-music-player-time-elapsed'),\n timeDuration: container.querySelector('.vd-music-player-time-duration'),\n playlistPanel: container.querySelector('.vd-music-player-playlist'),\n };\n\n /* \u2500\u2500 Internal render helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const renderPlayIcon = () => {\n const btn = refs.btnPlay;\n if (!btn) return;\n btn.innerHTML = '';\n btn.appendChild(icon(state.isPlaying ? 'pause' : 'play'));\n btn.setAttribute('aria-label', state.isPlaying ? 'Pause' : 'Play');\n btn.classList.toggle('is-active', state.isPlaying);\n };\n\n const renderTrackName = () => {\n const el = refs.trackName;\n if (!el) return;\n const track = state.tracks[state.currentIndex];\n if (track) {\n el.textContent = track.name || 'Unknown Track';\n el.classList.remove('is-idle');\n } else {\n el.textContent = 'No tracks loaded';\n el.classList.add('is-idle');\n }\n };\n\n const renderVolumeIcon = () => {\n const el = refs.volumeIcon;\n if (!el) return;\n el.innerHTML = '';\n const v = state.volume;\n const name = v === 0 ? 'speaker-none' : v < 0.5 ? 'speaker-low' : 'speaker-high';\n el.appendChild(icon(name));\n };\n\n const renderShuffleBtn = () => {\n const btn = refs.btnShuffle;\n if (!btn) return;\n btn.classList.toggle('is-active', state.shuffle);\n btn.setAttribute('aria-pressed', state.shuffle ? 'true' : 'false');\n };\n\n const renderPlaylistItems = () => {\n const panel = refs.playlistPanel;\n if (!panel) return;\n panel.innerHTML = '';\n state.tracks.forEach((track, i) => {\n const item = document.createElement('button');\n item.className =\n 'vd-music-player-playlist-item' + (i === state.currentIndex ? ' is-active' : '');\n item.type = 'button';\n item.setAttribute('data-index', String(i));\n item.setAttribute('aria-current', i === state.currentIndex ? 'true' : 'false');\n\n const num = document.createElement('span');\n num.className = 'vd-music-player-playlist-num';\n num.textContent = String(i + 1);\n\n const name = document.createElement('span');\n name.className = 'vd-music-player-playlist-name';\n name.textContent = track.name || 'Track ' + (i + 1);\n\n item.appendChild(num);\n item.appendChild(name);\n panel.appendChild(item);\n });\n };\n\n const renderProgress = () => {\n const bar = refs.progressBar;\n if (!bar || !audio.duration) return;\n const pct = (audio.currentTime / audio.duration) * 100;\n bar.value = String(pct);\n updateRangeFill(bar);\n if (refs.timeElapsed) refs.timeElapsed.textContent = formatTime(audio.currentTime);\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n };\n\n /* \u2500\u2500 Load track \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const loadTrack = (index, autoPlay) => {\n const track = state.tracks[index];\n if (!track) return;\n state.currentIndex = index;\n audio.src = track.url;\n renderTrackName();\n renderPlaylistItems();\n\n // Reset progress\n if (refs.progressBar) {\n refs.progressBar.value = '0';\n updateRangeFill(refs.progressBar);\n }\n if (refs.timeElapsed) refs.timeElapsed.textContent = '0:00';\n if (refs.timeDuration) refs.timeDuration.textContent = '0:00';\n\n container.dispatchEvent(\n new CustomEvent('musicplayer:trackchange', {\n bubbles: true,\n detail: { index, name: track.name, url: track.url },\n })\n );\n\n if (autoPlay) {\n audio.play().catch(() => { /* browser may block autoplay */ });\n }\n };\n\n /* \u2500\u2500 Audio event listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const cleanupFunctions = [];\n\n const onPlay = () => {\n state.isPlaying = true;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:play', { bubbles: true }));\n };\n\n const onPause = () => {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:pause', { bubbles: true }));\n };\n\n const onEnded = () => {\n if (state.autoAdvance && state.tracks.length > 1) {\n const next = (state.currentIndex + 1) % state.tracks.length;\n loadTrack(next, true);\n } else {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:ended', { bubbles: true }));\n }\n };\n\n const onTimeUpdate = () => {\n if (state.showProgress) renderProgress();\n };\n\n const onLoadedMetadata = () => {\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n if (refs.progressBar) {\n refs.progressBar.max = '100';\n updateRangeFill(refs.progressBar);\n }\n };\n\n audio.addEventListener('play', onPlay);\n audio.addEventListener('pause', onPause);\n audio.addEventListener('ended', onEnded);\n audio.addEventListener('timeupdate', onTimeUpdate);\n audio.addEventListener('loadedmetadata', onLoadedMetadata);\n cleanupFunctions.push(() => {\n audio.removeEventListener('play', onPlay);\n audio.removeEventListener('pause', onPause);\n audio.removeEventListener('ended', onEnded);\n audio.removeEventListener('timeupdate', onTimeUpdate);\n audio.removeEventListener('loadedmetadata', onLoadedMetadata);\n audio.pause();\n audio.src = '';\n });\n\n /* \u2500\u2500 Control button listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n if (refs.btnPlay) {\n const handler = () => {\n if (!audio.src && state.tracks.length) loadTrack(state.currentIndex, false);\n if (state.isPlaying) {\n audio.pause();\n } else {\n audio.play().catch(() => {});\n }\n };\n refs.btnPlay.addEventListener('click', handler);\n cleanupFunctions.push(() => refs.btnPlay.removeEventListener('click', handler));\n\n // Keyboard: Space / Enter (already native for `;let s="";for(let[o,r]of Object.entries(this.NEUTRAL_COLORS))s+=``;let i="";this.RADIUS_OPTIONS.forEach(o=>{i+=``});let a="";for(let[o,r]of Object.entries(this.FONT_OPTIONS))a+=``;return` +`).length,i=document.createElement("div");i.className="vd-code-snippet-line-numbers",i.setAttribute("aria-hidden","true");for(let o=1;o<=s;o++){let r=document.createElement("span");r.textContent=o,i.appendChild(r)}let a=document.createElement("div");a.className="vd-code-snippet-code",a.appendChild(t.cloneNode(!0)),t.parentNode.removeChild(t),e.appendChild(i),e.appendChild(a)},expand:function(e){if(typeof e=="string"&&(e=document.querySelector(e)),!e)return;e.dataset.expanded="true";let t=e.querySelector(".vd-code-snippet-toggle"),n=e.querySelector(".vd-code-snippet-content");t&&t.setAttribute("aria-expanded","true"),n&&(n.dataset.visible="true")},collapse:function(e){if(typeof e=="string"&&(e=document.querySelector(e)),!e)return;e.dataset.expanded="false";let t=e.querySelector(".vd-code-snippet-toggle"),n=e.querySelector(".vd-code-snippet-content");t&&t.setAttribute("aria-expanded","false"),n&&(n.dataset.visible="false")},showLang:function(e,t){if(typeof e=="string"&&(e=document.querySelector(e)),!e)return;let n=e.querySelector(`.vd-code-snippet-tab[data-lang="${t}"]`),s=e.querySelectorAll(".vd-code-snippet-tab"),i=e.querySelectorAll(".vd-code-snippet-pane");n&&this.switchTab(e,n,s,i)},destroy:function(e){typeof e=="string"&&(e=document.querySelector(e)),e&&(e._codeSnippetCleanup&&(e._codeSnippetCleanup.forEach(t=>t()),delete e._codeSnippetCleanup),delete e.dataset.initialized)},destroyAll:function(){document.querySelectorAll('.vd-code-snippet[data-initialized="true"]').forEach(t=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("codeSnippet",p),window.CodeSnippet=p})();(function(){"use strict";let p={instances:new Map,init:function(){document.querySelectorAll(".vd-collapsible, .accordion").forEach(t=>{this.instances.has(t)||this.initCollapsible(t)})},initCollapsible:function(e){let t=e.classList.contains("accordion"),n=e.querySelectorAll(".vd-collapsible-item, .accordion-item"),s=[];n.forEach(i=>{let a=i.querySelector(".vd-collapsible-header, .accordion-header"),o=i.querySelector(".vd-collapsible-body, .accordion-body"),r=i.querySelector(".vd-collapsible-trigger, .accordion-trigger")||a;if(!a||!o)return;i.classList.contains("is-open")?this.openItem(i,o,!1):this.closeItem(i,o,!1);let l=d=>{d.preventDefault(),this.toggleItem(i,o,e,t)};r.addEventListener("click",l),s.push(()=>r.removeEventListener("click",l))}),this.instances.set(e,{cleanup:s})},toggleItem:function(e,t,n,s){e.classList.contains("is-open")?this.closeItem(e,t):(s&&n.querySelectorAll(".vd-collapsible-item.is-open, .accordion-item.is-open").forEach(o=>{if(o!==e){let r=o.querySelector(".vd-collapsible-body, .accordion-body");this.closeItem(o,r)}}),this.openItem(e,t))},openItem:function(e,t,n=!0){n||(t.style.transition="none"),e.classList.add("is-open"),e.setAttribute("aria-expanded","true");let s=t.scrollHeight;t.style.maxHeight=`${s}px`,n||setTimeout(()=>{t.style.transition=""},0),e.dispatchEvent(new CustomEvent("collapsible:open",{bubbles:!0}))},closeItem:function(e,t,n=!0){n||(t.style.transition="none"),e.classList.remove("is-open"),e.setAttribute("aria-expanded","false"),t.style.maxHeight="0",n||setTimeout(()=>{t.style.transition=""},0),e.dispatchEvent(new CustomEvent("collapsible:close",{bubbles:!0}))},open:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t){let n=t.querySelector(".vd-collapsible-body, .accordion-body");n&&this.openItem(t,n)}},close:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t){let n=t.querySelector(".vd-collapsible-body, .accordion-body");n&&this.closeItem(t,n)}},toggle:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t){let n=t.querySelector(".vd-collapsible-body, .accordion-body"),s=t.closest(".vd-collapsible, .accordion"),i=s&&s.classList.contains("accordion");n&&this.toggleItem(t,n,s,i)}},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>{this.destroy(t)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("collapsible",p),window.VanduoCollapsible=p})();(function(){"use strict";let p={instances:new Map,init:function(){document.querySelectorAll(".vd-dropdown").forEach(t=>{this.instances.has(t)||this.initDropdown(t)})},initDropdown:function(e){let t=e.querySelector(".vd-dropdown-toggle"),n=e.querySelector(".vd-dropdown-menu");if(!t||!n)return;let s=[];t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-expanded","false"),n.setAttribute("role","menu"),n.setAttribute("aria-hidden","true");let i=l=>{l.preventDefault(),l.stopPropagation(),this.toggleDropdown(e,t,n)};t.addEventListener("click",i),s.push(()=>t.removeEventListener("click",i));let a=l=>{!e.contains(l.target)&&n.classList.contains("is-open")&&this.closeDropdown(e,t,n)};document.addEventListener("click",a),s.push(()=>document.removeEventListener("click",a));let o=l=>{this.handleKeydown(l,e,t,n)};t.addEventListener("keydown",o),s.push(()=>t.removeEventListener("keydown",o)),n.querySelectorAll(".vd-dropdown-item:not(.disabled):not(.is-disabled)").forEach(l=>{let d=u=>{u.preventDefault(),this.selectItem(l,e,t,n)};l.addEventListener("click",d),s.push(()=>l.removeEventListener("click",d));let c=u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),this.selectItem(l,e,t,n))};l.addEventListener("keydown",c),s.push(()=>l.removeEventListener("keydown",c))}),this.instances.set(e,{toggle:t,menu:n,cleanup:s,typeaheadBuffer:"",typeaheadTimer:null})},toggleDropdown:function(e,t,n){n.classList.contains("is-open")?this.closeDropdown(e,t,n):this.openDropdown(e,t,n)},openDropdown:function(e,t,n){document.querySelectorAll(".vd-dropdown-menu.is-open").forEach(a=>{if(a!==n){let o=a.closest(".vd-dropdown"),r=o.querySelector(".vd-dropdown-toggle");this.closeDropdown(o,r,a)}}),e.classList.add("is-open"),n.classList.add("is-open"),t.setAttribute("aria-expanded","true"),n.setAttribute("aria-hidden","false"),this.positionMenu(e,n);let i=n.querySelector(".vd-dropdown-item:not(.disabled):not(.is-disabled)");i&&setTimeout(()=>i.focus(),0)},closeDropdown:function(e,t,n){e.classList.remove("is-open"),n.classList.remove("is-open"),t.setAttribute("aria-expanded","false"),n.setAttribute("aria-hidden","true"),t.focus()},positionMenu:function(e,t){let n=e.getBoundingClientRect(),s=t.getBoundingClientRect(),i=window.innerWidth,a=window.innerHeight,o=8;n.left+s.width>i-o&&(t.classList.add("vd-dropdown-menu-end"),t.classList.remove("vd-dropdown-menu-start")),t.classList.contains("dropdown-menu-top")?n.top-s.heighta-o&&t.classList.add("vd-dropdown-menu-top")},handleKeydown:function(e,t,n,s){let i=s.classList.contains("is-open"),a=Array.from(s.querySelectorAll(".vd-dropdown-item:not(.disabled):not(.is-disabled)")),o=a.findIndex(r=>r===document.activeElement);switch(e.key){case"Enter":case" ":case"ArrowDown":if(e.preventDefault(),!i)this.openDropdown(t,n,s);else if(e.key==="ArrowDown"){let r=o0?o-1:a.length-1;a[r].focus()}break;case"Escape":i&&(e.preventDefault(),this.closeDropdown(t,n,s));break;case"Home":i&&(e.preventDefault(),a[0].focus());break;case"End":i&&(e.preventDefault(),a[a.length-1].focus());break;default:if(i&&e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey){let r=this.instances.get(t);if(!r)break;clearTimeout(r.typeaheadTimer),r.typeaheadBuffer+=e.key.toLowerCase();let l=a.find(d=>d.textContent.trim().toLowerCase().startsWith(r.typeaheadBuffer));l&&l.focus(),r.typeaheadTimer=setTimeout(()=>{r.typeaheadBuffer=""},500)}break}},selectItem:function(e,t,n,s){s.querySelectorAll(".vd-dropdown-item").forEach(i=>{i.classList.remove("active","is-active")}),e.classList.add("active","is-active"),(n.tagName==="BUTTON"||n.classList.contains("btn"))&&(n.textContent=e.textContent.trim()),this.closeDropdown(t,n,s),e.dispatchEvent(new CustomEvent("dropdown:select",{bubbles:!0,detail:{item:e,value:e.dataset.value||e.textContent}}))},open:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t){let n=t.querySelector(".vd-dropdown-toggle"),s=t.querySelector(".vd-dropdown-menu");n&&s&&this.openDropdown(t,n,s)}},close:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t){let n=t.querySelector(".vd-dropdown-toggle"),s=t.querySelector(".vd-dropdown-menu");n&&s&&this.closeDropdown(t,n,s)}},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>{this.destroy(t)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("dropdown",p),window.VanduoDropdown=p})();(function(){"use strict";let p={STORAGE_KEY:"vanduo-font-preference",isInitialized:!1,fonts:{system:{name:"System Default",family:null},inter:{name:"Inter",family:"'Inter', sans-serif"},"source-sans":{name:"Source Sans 3",family:"'Source Sans 3', sans-serif"},"fira-sans":{name:"Fira Sans",family:"'Fira Sans', sans-serif"},"ibm-plex":{name:"IBM Plex Sans",family:"'IBM Plex Sans', sans-serif"},"jetbrains-mono":{name:"JetBrains Mono",family:"'JetBrains Mono', monospace"},ubuntu:{name:"Ubuntu",family:"'Ubuntu', sans-serif",category:"sans-serif",description:"Friendly, humanist sans-serif"},"open-sans":{name:"Open Sans",family:"'Open Sans', sans-serif",category:"sans-serif",description:"Neutral, highly readable"},rubik:{name:"Rubik",family:"'Rubik', sans-serif",category:"sans-serif",description:"Modern, geometric"},"titillium-web":{name:"Titillium Web",family:"'Titillium Web', sans-serif",category:"sans-serif",description:"Technical, elegant"}},init:function(){if(this.state={preference:this.getPreference()},this.isInitialized){this.applyFont(),this.renderUI(),this.updateUI();return}this.isInitialized=!0,this.applyFont(),this.renderUI(),console.log("Vanduo Font Switcher initialized")},getPreference:function(){return this.getStorageValue(this.STORAGE_KEY,"ubuntu")},setPreference:function(e){if(!this.fonts[e]){console.warn("Unknown font:",e);return}this.state.preference=e,this.setStorageValue(this.STORAGE_KEY,e),this.applyFont(),this.updateUI();let t=new CustomEvent("font:change",{bubbles:!0,detail:{font:e,fontData:this.fonts[e]}});document.dispatchEvent(t)},applyFont:function(){let e=this.state.preference;e==="system"?document.documentElement.removeAttribute("data-font"):document.documentElement.setAttribute("data-font",e)},renderUI:function(){document.querySelectorAll('[data-toggle="font"]').forEach(t=>{if(t.getAttribute("data-font-initialized")==="true"){t.tagName==="SELECT"&&(t.value=this.state.preference);return}if(t.tagName==="SELECT"){t.value=this.state.preference;let n=s=>{this.setPreference(s.target.value)};t.addEventListener("change",n),t._fontToggleHandler=n}else{let n=()=>{let s=Object.keys(this.fonts),a=(s.indexOf(this.state.preference)+1)%s.length;this.setPreference(s[a])};t.addEventListener("click",n),t._fontToggleHandler=n}t.setAttribute("data-font-initialized","true")})},updateUI:function(){document.querySelectorAll('[data-toggle="font"]').forEach(t=>{if(t.tagName==="SELECT")t.value=this.state.preference;else{let n=t.querySelector(".font-current-label");n&&(n.textContent=this.fonts[this.state.preference].name)}})},getCurrentFont:function(){return this.state.preference},getFontData:function(e){return this.fonts[e]||null},destroyAll:function(){document.querySelectorAll('[data-toggle="font"][data-font-initialized="true"]').forEach(t=>{if(t._fontToggleHandler){let n=t.tagName==="SELECT"?"change":"click";t.removeEventListener(n,t._fontToggleHandler),delete t._fontToggleHandler}t.removeAttribute("data-font-initialized")}),this.isInitialized=!1},getStorageValue:function(e,t){if(typeof window.safeStorageGet=="function")return window.safeStorageGet(e,t);try{let n=localStorage.getItem(e);return n!==null?n:t}catch{return t}},setStorageValue:function(e,t){if(typeof window.safeStorageSet=="function")return window.safeStorageSet(e,t);try{return localStorage.setItem(e,t),!0}catch{return!1}}};window.Vanduo&&window.Vanduo.register("fontSwitcher",p),window.FontSwitcher=p})();(function(){"use strict";let p=(function(){try{return CSS.supports("selector(:has(*))")}catch{return!1}})(),e={instances:new Map,init:function(){document.querySelectorAll("[data-layout-mode]").forEach(function(n){this.instances.has(n)||this.initContainer(n)}.bind(this)),this.initToggleButtons()},initContainer:function(t){let n=t.getAttribute("data-layout-mode")||"standard",s=[];this.applyMode(t,n),t.setAttribute("role","region"),t.setAttribute("aria-label","Grid layout: "+n+" mode"),this.instances.set(t,{cleanup:s,mode:n})},initToggleButtons:function(){document.querySelectorAll("[data-grid-toggle]").forEach(function(n){if(n.getAttribute("data-grid-initialized")==="true")return;let s=function(i){i.preventDefault();let a=n.getAttribute("data-grid-toggle"),o;a?o=document.querySelector(a):o=n.closest("[data-layout-mode]"),o&&this.toggle(o)}.bind(this);n.addEventListener("click",s),n.setAttribute("data-grid-initialized","true"),n.setAttribute("aria-pressed","false"),n._gridCleanup=function(){n.removeEventListener("click",s),n.removeAttribute("data-grid-initialized"),n.removeAttribute("aria-pressed")}}.bind(this))},applyFibFallback:function(t){if(p)return;t.querySelectorAll(".vd-row, .row").forEach(function(s){let a=s.querySelectorAll(':scope > [class*="vd-col-"], :scope > [class*="col-"]').length;a===1?s.style.gridTemplateColumns="1fr":a===2?s.style.gridTemplateColumns="1fr 1.618fr":a===3?s.style.gridTemplateColumns="2fr 3fr 5fr":a===4?s.style.gridTemplateColumns="1fr 2fr 3fr 5fr":s.style.gridTemplateColumns="repeat("+a+", 1fr)"})},removeFibFallback:function(t){t.querySelectorAll(".vd-row, .row").forEach(function(s){s.style.gridTemplateColumns=""})},applyMode:function(t,n){t.classList.remove("vd-grid-standard","vd-grid-fibonacci"),n==="fibonacci"?(t.classList.add("vd-grid-fibonacci"),this.applyFibFallback(t)):(t.classList.add("vd-grid-standard"),this.removeFibFallback(t)),t.setAttribute("data-layout-mode",n),t.setAttribute("aria-label","Grid layout: "+n+" mode"),document.querySelectorAll("[data-grid-toggle]").forEach(function(o){let r=o.getAttribute("data-grid-toggle");if(r&&t.matches(r)){let l=n==="fibonacci";l?o.classList.add("is-active"):o.classList.remove("is-active"),o.setAttribute("aria-pressed",l?"true":"false")}});let i=this.instances.get(t);i&&(i.mode=n);let a;try{a=new CustomEvent("grid:modechange",{bubbles:!0,detail:{container:t,mode:n}})}catch{a=document.createEvent("CustomEvent"),a.initCustomEvent("grid:modechange",!0,!0,{container:t,mode:n})}t.dispatchEvent(a)},toggle:function(t){if(typeof t=="string"&&(t=document.querySelector(t)),!t)return;let s=(t.getAttribute("data-layout-mode")||"standard")==="fibonacci"?"standard":"fibonacci";this.applyMode(t,s)},setMode:function(t,n){typeof t=="string"&&(t=document.querySelector(t)),t&&(n!=="fibonacci"&&n!=="standard"||this.applyMode(t,n))},getMode:function(t){return typeof t=="string"&&(t=document.querySelector(t)),t?t.getAttribute("data-layout-mode")||"standard":null},destroy:function(t){let n=this.instances.get(t);n&&(n.cleanup.forEach(function(s){s()}),t.classList.remove("vd-grid-standard","vd-grid-fibonacci"),t.removeAttribute("aria-label"),this.removeFibFallback(t),this.instances.delete(t))},destroyAll:function(){this.instances.forEach(function(n,s){this.destroy(s)}.bind(this)),document.querySelectorAll('[data-grid-initialized="true"]').forEach(function(n){n._gridCleanup&&(n._gridCleanup(),delete n._gridCleanup)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("gridLayout",e),window.VanduoGridLayout=e})();(function(){"use strict";let p={backdrop:null,container:null,img:null,closeBtn:null,caption:null,currentTrigger:null,scrollThreshold:50,initialScrollY:0,isOpen:!1,_cleanupFunctions:[],init:function(){this.createBackdrop(),this.bindTriggers()},createBackdrop:function(){if(this.backdrop||document.querySelector(".vd-image-box-backdrop")){this.backdrop||(this.backdrop=document.querySelector(".vd-image-box-backdrop"),this.container=this.backdrop.querySelector(".vd-image-box-container"),this.img=this.backdrop.querySelector(".vd-image-box-img"),this.closeBtn=this.backdrop.querySelector(".vd-image-box-close"),this.caption=this.backdrop.querySelector(".vd-image-box-caption"),this.bindBackdropEvents());return}this.backdrop=document.createElement("div"),this.backdrop.className="vd-image-box-backdrop",this.backdrop.setAttribute("role","dialog"),this.backdrop.setAttribute("aria-modal","true"),this.backdrop.setAttribute("aria-label","Image viewer"),this.backdrop.setAttribute("tabindex","-1"),this.container=document.createElement("div"),this.container.className="vd-image-box-container",this.img=document.createElement("img"),this.img.className="vd-image-box-img",this.img.alt="",this.closeBtn=document.createElement("button"),this.closeBtn.className="vd-image-box-close",this.closeBtn.setAttribute("aria-label","Close image viewer"),this.closeBtn.innerHTML="×",this.caption=document.createElement("div"),this.caption.className="vd-image-box-caption",this.container.appendChild(this.img),this.backdrop.appendChild(this.closeBtn),this.backdrop.appendChild(this.container),this.backdrop.appendChild(this.caption),document.body.appendChild(this.backdrop),this.bindBackdropEvents()},bindBackdropEvents:function(){let e=this,t=function(o){(o.target===e.backdrop||o.target===e.container)&&e.close()};this.backdrop.addEventListener("click",t),this._cleanupFunctions.push(()=>this.backdrop.removeEventListener("click",t));let n=function(){e.close()};this.img.addEventListener("click",n),this._cleanupFunctions.push(()=>this.img.removeEventListener("click",n));let s=function(){e.close()};this.closeBtn.addEventListener("click",s),this._cleanupFunctions.push(()=>this.closeBtn.removeEventListener("click",s));let i=function(o){o.key==="Escape"&&e.isOpen&&e.close()};document.addEventListener("keydown",i),this._cleanupFunctions.push(()=>document.removeEventListener("keydown",i));let a=function(){if(!e.isOpen)return;let o=window.scrollY;Math.abs(o-e.initialScrollY)>e.scrollThreshold&&e.close()};window.addEventListener("scroll",a,{passive:!0}),this._cleanupFunctions.push(()=>window.removeEventListener("scroll",a))},bindTriggers:function(){let e=this;document.querySelectorAll("[data-image-box]").forEach(function(n){if(n.dataset.imageBoxInitialized)return;if(n.dataset.imageBoxInitialized="true",n.classList.add("vd-image-box-trigger"),n.tagName==="IMG"){n.complete&&n.naturalWidth===0&&n.classList.add("is-broken");let i=function(){n.classList.add("is-broken")};n.addEventListener("error",i);let a=function(){n.classList.remove("is-broken")};n.addEventListener("load",a)}let s=function(i){i.preventDefault(),e.open(n)};if(n.addEventListener("click",s),n._imageBoxCleanup=()=>n.removeEventListener("click",s),n.tagName!=="BUTTON"&&n.tagName!=="A"){n.setAttribute("role","button"),n.setAttribute("tabindex","0"),n.setAttribute("aria-label","View enlarged image");let i=function(o){(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),e.open(n))};n.addEventListener("keydown",i);let a=n._imageBoxCleanup;n._imageBoxCleanup=()=>{a(),n.removeEventListener("keydown",i)}}})},open:function(e){if(this.isOpen)return;this.currentTrigger=e,this.isOpen=!0,this.initialScrollY=window.scrollY;let t=e.dataset.imageBoxFullSrc||e.dataset.imageBoxSrc||e.src||e.href;if(!t){console.warn("[Vanduo ImageBox] No image source found for trigger:",e);return}let n=e.dataset.imageBoxCaption||e.alt||"";this.img.src=t,this.img.alt=e.alt||"",n?(this.caption.textContent=n,this.caption.style.display="block"):this.caption.style.display="none";let s=window.innerWidth-document.documentElement.clientWidth;document.body.style.setProperty("--scrollbar-width",`${s}px`),document.body.classList.add("body-image-box-open"),this.backdrop.classList.add("is-visible"),this.backdrop.focus(),e.dispatchEvent(new CustomEvent("imageBox:open",{bubbles:!0,detail:{src:t}})),this.img.complete||(this.img.style.opacity="0",this._imgLoadHandler=()=>{this.img.style.opacity=""},this.img.addEventListener("load",this._imgLoadHandler,{once:!0}))},close:function(){this.isOpen&&(this.isOpen=!1,this.backdrop.classList.remove("is-visible"),document.body.classList.remove("body-image-box-open"),document.body.style.removeProperty("--scrollbar-width"),this.currentTrigger&&(this.currentTrigger.focus(),this.currentTrigger.dispatchEvent(new CustomEvent("imageBox:close",{bubbles:!0})),this.currentTrigger=null),setTimeout(()=>{this.isOpen||(this._imgLoadHandler&&(this.img.removeEventListener("load",this._imgLoadHandler),this._imgLoadHandler=null),this.img.src="",this.img.alt="")},300))},reinit:function(){this.bindTriggers()},destroy:function(){this.isOpen&&this.close(),this.backdrop&&this.backdrop.parentNode&&this.backdrop.parentNode.removeChild(this.backdrop),this._cleanupFunctions.forEach(t=>t()),this._cleanupFunctions=[],document.querySelectorAll("[data-image-box-initialized]").forEach(t=>{t.classList.remove("vd-image-box-trigger"),t._imageBoxCleanup&&(t._imageBoxCleanup(),delete t._imageBoxCleanup),delete t.dataset.imageBoxInitialized}),this.backdrop=null,this.container=null,this.img=null,this.closeBtn=null,this.caption=null,this.currentTrigger=null,this.isOpen=!1},destroyAll:function(){this.destroy()}};typeof window.Vanduo<"u"&&window.Vanduo.register("imageBox",p),window.VanduoImageBox=p})();(function(){"use strict";let p={modals:new Map,openModals:[],zIndexCounter:1050,_triggerCleanups:[],_sharedEscHandler:null,init:function(){document.querySelectorAll(".vd-modal").forEach(n=>{this.modals.has(n)||this.initModal(n)}),document.querySelectorAll("[data-modal]").forEach(n=>{if(n.dataset.modalTriggerInitialized)return;n.dataset.modalTriggerInitialized="true";let s=i=>{i.preventDefault();let a=n.dataset.modal,o=document.querySelector(a);o&&this.open(o)};n.addEventListener("click",s),this._triggerCleanups.push(()=>n.removeEventListener("click",s))})},initModal:function(e){let t=this.createBackdrop(e),n=e.querySelectorAll('.vd-modal-close, [data-dismiss="modal"]'),s=e.querySelector(".vd-modal-dialog");if(!s)return;let i=[];e.setAttribute("role","dialog"),e.setAttribute("aria-modal","true"),e.setAttribute("aria-hidden","true"),e.id||(e.id="modal-"+Math.random().toString(36).substr(2,9));let a=e.querySelector(".vd-modal-title");a&&!a.id&&(a.id=e.id+"-title",e.setAttribute("aria-labelledby",a.id)),n.forEach(r=>{let l=()=>{this.close(e)};r.addEventListener("click",l),i.push(()=>r.removeEventListener("click",l))});let o=r=>{r.target===t&&e.dataset.backdrop!=="static"&&this.close(e)};t.addEventListener("click",o),i.push(()=>t.removeEventListener("click",o)),this._sharedEscHandler||(this._sharedEscHandler=r=>{if(r.key==="Escape"&&this.openModals.length>0){let l=this.openModals[this.openModals.length-1];l.dataset.keyboard!=="false"&&this.close(l)}},document.addEventListener("keydown",this._sharedEscHandler)),this.modals.set(e,{backdrop:t,dialog:s,trapHandler:null,cleanup:i})},createBackdrop:function(e){let t=e.querySelector(".vd-modal-backdrop");return t||(t=document.createElement("div"),t.className="vd-modal-backdrop",document.body.appendChild(t)),t},open:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(!t){console.warn("[Vanduo Modals] Modal element not found:",e);return}if(!this.modals.has(t)){console.warn("[Vanduo Modals] Modal not initialized:",t);return}let n=this.modals.get(t),{backdrop:s,dialog:i}=n;if(this.zIndexCounter+=10,t.style.zIndex=this.zIndexCounter,s.style.zIndex=this.zIndexCounter-1,this.openModals.push(t),s.classList.add("is-visible"),t.classList.add("is-open"),t.setAttribute("aria-hidden","false"),this.openModals.length===1){document.body.classList.add("body-modal-open");let o=window.innerWidth-document.documentElement.clientWidth;o>0&&(document.body.style.paddingRight=`${o}px`)}let a=this.trapFocus(t);n.trapHandler=a,setTimeout(()=>{let o=this.getFocusableElements(t)[0];o&&o.focus()},100),t.dispatchEvent(new CustomEvent("modal:open",{bubbles:!0}))},close:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(!t){console.warn("[Vanduo Modals] Modal element not found:",e);return}if(!this.modals.has(t)){console.warn("[Vanduo Modals] Modal not initialized:",t);return}let n=this.modals.get(t),{backdrop:s,trapHandler:i}=n;i&&(t.removeEventListener("keydown",i),n.trapHandler=null);let a=this.openModals.indexOf(t);if(a>-1&&this.openModals.splice(a,1),t.classList.remove("is-open"),t.setAttribute("aria-hidden","true"),this.openModals.length===0)s.classList.remove("is-visible"),document.body.classList.remove("body-modal-open"),document.body.style.paddingRight="",this.zIndexCounter=1050;else{let r=this.openModals[this.openModals.length-1];this.modals.get(r).backdrop.classList.add("is-visible")}let o=document.querySelector(`[data-modal="#${t.id}"]`);o&&o.focus(),t.dispatchEvent(new CustomEvent("modal:close",{bubbles:!0}))},trapFocus:function(e){let t=this,n=function(s){if(s.key!=="Tab")return;let i=t.getFocusableElements(e),a=i[0],o=i[i.length-1];s.shiftKey?document.activeElement===a&&(s.preventDefault(),o.focus()):document.activeElement===o&&(s.preventDefault(),a.focus())};return e.addEventListener("keydown",n),n},getFocusableElements:function(e){return Array.from(e.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter(n=>!n.hasAttribute("disabled")&&n.offsetWidth>0&&n.offsetHeight>0)},toggle:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&(t.classList.contains("is-open")?this.close(t):this.open(t))},destroy:function(e){let t=this.modals.get(e);t&&(e.classList.contains("is-open")&&this.close(e),t.cleanup&&t.cleanup.forEach(n=>n()),t.backdrop&&t.backdrop.parentNode&&t.backdrop.parentNode.removeChild(t.backdrop),this.modals.delete(e))},destroyAll:function(){this.modals.forEach((e,t)=>{this.destroy(t)}),this._triggerCleanups.forEach(e=>e()),this._triggerCleanups=[],this._sharedEscHandler&&(document.removeEventListener("keydown",this._sharedEscHandler),this._sharedEscHandler=null)}};typeof window.Vanduo<"u"&&window.Vanduo.register("modals",p),window.VanduoModals=p})();(function(){"use strict";let p={instances:new Map,getBreakpoint:function(){let t=getComputedStyle(document.documentElement).getPropertyValue("--breakpoint-lg").trim(),n=parseInt(t,10);return isNaN(n)?992:n},init:function(){document.querySelectorAll(".vd-navbar").forEach(t=>{this.instances.has(t)||this.initNavbar(t)})},initScrollWatcher:function(e){let t=e.classList.contains("vd-navbar-glass"),n=e.classList.contains("vd-navbar-transparent");if(!t&&!n)return null;let s=()=>{let a=parseInt(e.dataset.scrollThreshold,10);return isNaN(a)?e.offsetHeight||60:a},i=()=>{let a=window.scrollY>s();e.classList.toggle("vd-navbar-scrolled",a)};return i(),window.addEventListener("scroll",i,{passive:!0}),()=>window.removeEventListener("scroll",i)},initNavbar:function(e){let t=e.querySelector(".vd-navbar-toggle, .vd-navbar-burger"),n=e.querySelector(".vd-navbar-menu"),s=e.querySelector(".vd-navbar-overlay")||this.createOverlay(e),i=[],a=this.initScrollWatcher(e);if(a&&i.push(a),!t||!n){i.length&&this.instances.set(e,{toggle:null,menu:null,overlay:null,cleanup:i});return}let o=h=>{h.preventDefault(),h.stopPropagation(),this.toggleMenu(e,t,n,s)};if(t.addEventListener("click",o),i.push(()=>t.removeEventListener("click",o)),s){let h=()=>{this.closeMenu(e,t,n,s)};s.addEventListener("click",h),i.push(()=>s.removeEventListener("click",h))}let r=h=>{h.key==="Escape"&&n.classList.contains("is-open")&&this.closeMenu(e,t,n,s)};document.addEventListener("keydown",r),i.push(()=>document.removeEventListener("keydown",r));let l,d=()=>{clearTimeout(l),l=setTimeout(()=>{let h=this.getBreakpoint();window.innerWidth>=h&&n.classList.contains("is-open")&&this.closeMenu(e,t,n,s)},250)};window.addEventListener("resize",d),i.push(()=>{clearTimeout(l),window.removeEventListener("resize",d)});let c=h=>{n.classList.contains("is-open")&&!e.contains(h.target)&&!n.contains(h.target)&&this.closeMenu(e,t,n,s)};document.addEventListener("click",c),i.push(()=>document.removeEventListener("click",c)),n.querySelectorAll(".vd-navbar-dropdown > .vd-nav-link, .vd-navbar-dropdown > .nav-link").forEach(h=>{let f=v=>{let y=this.getBreakpoint();if(window.innerWidthh.removeEventListener("click",f))}),this.instances.set(e,{toggle:t,menu:n,overlay:s,cleanup:i})},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),t.overlay&&t.overlay.parentNode&&t.overlay.parentNode.removeChild(t.overlay),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>{this.destroy(t)})},toggleMenu:function(e,t,n,s){n.classList.contains("is-open")?this.closeMenu(e,t,n,s):this.openMenu(e,t,n,s)},openMenu:function(e,t,n,s){n.classList.add("is-open"),t.classList.add("is-active"),s&&s.classList.add("is-active"),document.body.classList.add("body-navbar-open"),t.setAttribute("aria-expanded","true"),n.setAttribute("aria-hidden","false")},closeMenu:function(e,t,n,s){n.classList.remove("is-open"),t.classList.remove("is-active"),s&&s.classList.remove("is-active"),document.body.classList.remove("body-navbar-open"),n.querySelectorAll(".vd-navbar-dropdown-menu.is-open").forEach(a=>{a.classList.remove("is-open")}),t.setAttribute("aria-expanded","false"),n.setAttribute("aria-hidden","true")},createOverlay:function(e){let t=document.createElement("div");return t.className="vd-navbar-overlay",document.body.appendChild(t),t}};typeof window.Vanduo<"u"&&window.Vanduo.register("navbar",p),window.VanduoNavbar=p})();(function(){"use strict";let p={instances:new Map,init:function(){document.querySelectorAll(".vd-pagination[data-pagination]").forEach(t=>{this.instances.has(t)||this.initPagination(t)})},initPagination:function(e){let t=parseInt(e.dataset.totalPages)||1,n=parseInt(e.dataset.currentPage)||1,s=parseInt(e.dataset.maxVisible)||7;this.render(e,{totalPages:t,currentPage:n,maxVisible:s});let i=a=>{let o=a.target.closest(".vd-pagination-link");if(!o||o.closest(".vd-pagination-item.disabled")||o.closest(".vd-pagination-item.active"))return;a.preventDefault();let r=o.closest(".vd-pagination-item"),l=r.dataset.page;l?this.goToPage(e,parseInt(l)):r.classList.contains("pagination-prev")?this.prevPage(e):r.classList.contains("pagination-next")&&this.nextPage(e)};e.addEventListener("click",i),this.instances.set(e,{cleanup:[()=>e.removeEventListener("click",i)]})},render:function(e,t){let{totalPages:n,currentPage:s,maxVisible:i}=t;if(n<=1){e.innerHTML="";return}let a="";a+=`
  • `,a+='Previous',a+="
    • ";let o=this.calculatePages(s,n,i),r=0;o.forEach(l=>{if(l==="ellipsis")a+='
  • \u2026
    • ';else{l!==r+1&&r>0&&(a+='
  • \u2026
    • ');let d=Number(l);a+=`
  • `,a+=`${d}`,a+="
    • ",r=l}}),a+=`
  • `,a+='Next',a+="
    • ",e.innerHTML=a,e.dataset.currentPage=s},calculatePages:function(e,t,n){let s=[],i=Math.floor(n/2);if(t<=n)for(let a=1;a<=t;a++)s.push(a);else{s.push(1);let a=Math.max(2,e-i),o=Math.min(t-1,e+i);e<=i+1&&(o=Math.min(t-1,n-1)),e>=t-i&&(a=Math.max(2,t-n+2)),a>2&&s.push("ellipsis");for(let r=a;r<=o;r++)s.push(r);o1&&s.push(t)}return s},goToPage:function(e,t){let n=parseInt(e.dataset.totalPages)||1,s=parseInt(e.dataset.maxVisible)||7;t<1||t>n||(this.render(e,{totalPages:n,currentPage:t,maxVisible:s}),e.dispatchEvent(new CustomEvent("pagination:change",{bubbles:!0,detail:{page:t,totalPages:n}})))},prevPage:function(e){let t=parseInt(e.dataset.currentPage)||1;t>1&&this.goToPage(e,t-1)},nextPage:function(e){let t=parseInt(e.dataset.currentPage)||1,n=parseInt(e.dataset.totalPages)||1;tn()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>{this.destroy(t)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("pagination",p),window.VanduoPagination=p})();(function(){"use strict";let p={parallaxElements:new Map,ticking:!1,isMobile:window.innerWidth<768,reducedMotion:window.matchMedia("(prefers-reduced-motion: reduce)").matches,isInitialized:!1,_onScroll:null,_onResize:null,init:function(){if(this.isInitialized){this.refresh();return}if(this.isInitialized=!0,this.reducedMotion)return;document.querySelectorAll(".vd-parallax").forEach(t=>{t.dataset.parallaxInitialized||this.initParallax(t)}),this.handleScroll(),this._onScroll=()=>{this.handleScroll()},window.addEventListener("scroll",this._onScroll,{passive:!0}),this._onResize=()=>{this.isMobile=window.innerWidth<768,this.updateAll()},window.addEventListener("resize",this._onResize)},initParallax:function(e){e.dataset.parallaxInitialized="true";let t=e.classList.contains("parallax-disable-mobile");if(t&&this.isMobile)return;let n=e.querySelectorAll(".vd-parallax-layer, .vd-parallax-bg"),s=this.getSpeed(e),i=e.classList.contains("parallax-horizontal")?"horizontal":"vertical";this.parallaxElements.set(e,{layers:Array.from(n),speed:s,direction:i,disableMobile:t}),this.updateParallax(e)},getSpeed:function(e){return e.classList.contains("parallax-slow")?.5:e.classList.contains("parallax-fast")?1.5:1},handleScroll:function(){this.ticking||(window.requestAnimationFrame(()=>{this.updateAll(),this.ticking=!1}),this.ticking=!0)},updateAll:function(){this.parallaxElements.forEach((e,t)=>{e.disableMobile&&this.isMobile||this.updateParallax(t)})},updateParallax:function(e){let t=this.parallaxElements.get(e);if(!t)return;let n=e.getBoundingClientRect(),s=window.innerHeight,i=n.top,a=n.height,r=(Math.max(0,Math.min(1,(s-i)/(s+a)))-.5)*t.speed*100;t.layers.forEach((l,d)=>{let c=l.dataset.parallaxSpeed?parseFloat(l.dataset.parallaxSpeed):1,u=r*c;t.direction==="horizontal"?l.style.transform=`translateX(${u}px)`:l.style.transform=`translateY(${u}px)`})},destroy:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&this.parallaxElements.has(t)&&(this.parallaxElements.get(t).layers.forEach(s=>{s.style.transform=""}),this.parallaxElements.delete(t))},refresh:function(){this.updateAll()},destroyAll:function(){this.parallaxElements.forEach((e,t)=>{this.destroy(t)}),this.parallaxElements.clear(),this._onScroll&&(window.removeEventListener("scroll",this._onScroll),this._onScroll=null),this._onResize&&(window.removeEventListener("resize",this._onResize),this._onResize=null),this.isInitialized=!1}};typeof window.Vanduo<"u"&&window.Vanduo.register("parallax",p),window.VanduoParallax=p})();(function(){"use strict";let p={init:function(){document.querySelectorAll(".progress-bar[data-progress]").forEach(t=>{t.dataset.progressInitialized||this.initProgressBar(t)})},initProgressBar:function(e){e.dataset.progressInitialized="true";let t=parseInt(e.dataset.progress)||0;this.setProgress(e,t,!1)},setProgress:function(e,t,n=!0){let s=typeof e=="string"?document.querySelector(e):e;if(!s)return;t=Math.max(0,Math.min(100,t)),n?s.style.transition="width var(--transition-duration-slow) var(--transition-ease)":(s.style.transition="none",setTimeout(()=>{s.style.transition=""},0)),s.style.width=t+"%",s.setAttribute("aria-valuenow",t),s.setAttribute("aria-valuemin",0),s.setAttribute("aria-valuemax",100);let i=s.querySelector(".progress-text");i&&(i.textContent=t+"%"),s.dispatchEvent(new CustomEvent("progress:update",{bubbles:!0,detail:{value:t,max:100}})),t>=100&&s.dispatchEvent(new CustomEvent("progress:complete",{bubbles:!0,detail:{value:t,max:100}}))},animateProgress:function(e,t,n=1e3){let s=typeof e=="string"?document.querySelector(e):e;if(!s)return;let i=parseInt(s.style.width)||0,a=t-i,o=performance.now(),r=l=>{let d=l-o,c=Math.min(d/n,1),u=1-Math.pow(1-c,3),h=i+a*u;this.setProgress(s,h,!1),c<1&&requestAnimationFrame(r)};requestAnimationFrame(r)},show:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&(t.style.display="inline-block",t.setAttribute("aria-hidden","false"))},hide:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&(t.style.display="none",t.setAttribute("aria-hidden","true"))},toggle:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&(t.style.display==="none"||t.getAttribute("aria-hidden")==="true"?this.show(t):this.hide(t))},destroyAll:function(){document.querySelectorAll('.progress-bar[data-progress-initialized="true"]').forEach(t=>{delete t.dataset.progressInitialized})}};typeof window.Vanduo<"u"&&window.Vanduo.register("preloader",p),window.VanduoPreloader=p})();(function(){"use strict";let p={instances:new Map,init:function(){document.querySelectorAll("select.vd-custom-select-input, select[data-custom-select]").forEach(t=>{this.instances.has(t)||this.initSelect(t)})},initSelect:function(e){if(e.closest(".vd-custom-select-wrapper"))return;let t=[],n=document.createElement("div");n.className="custom-select-wrapper",e.parentNode.insertBefore(n,e),n.appendChild(e);let s=document.createElement("button");s.type="button",s.className="custom-select-button",s.setAttribute("aria-haspopup","listbox"),s.setAttribute("aria-expanded","false"),s.setAttribute("aria-labelledby",e.id||this.generateId(e));let i=document.createElement("div");if(i.className="custom-select-dropdown",i.setAttribute("role","listbox"),e.dataset.searchable==="true"){let d=document.createElement("div");d.className="custom-select-search";let c=document.createElement("input");c.type="text",c.className="input input-sm",c.placeholder="Search...",c.setAttribute("aria-label","Search options"),d.appendChild(c),i.appendChild(d);let u=f=>{this.filterOptions(i,f.target.value)},h=typeof debounce=="function"?debounce(u,150):u;c.addEventListener("input",h),t.push(()=>c.removeEventListener("input",h))}this.buildOptions(e,i,s),n.appendChild(s),n.appendChild(i),this.updateButtonText(e,s);let a=d=>{d.preventDefault(),d.stopPropagation(),this.toggleDropdown(s,i)};s.addEventListener("click",a),t.push(()=>s.removeEventListener("click",a));let o=d=>{!n.contains(d.target)&&i.classList.contains("is-open")&&this.closeDropdown(s,i)};document.addEventListener("click",o),t.push(()=>document.removeEventListener("click",o));let r=d=>{this.handleKeydown(d,e,s,i)};s.addEventListener("keydown",r),t.push(()=>s.removeEventListener("keydown",r));let l=()=>{this.updateButtonText(e,s),this.updateSelectedOptions(e,i)};e.addEventListener("change",l),t.push(()=>e.removeEventListener("change",l)),this.instances.set(e,{wrapper:n,button:s,dropdown:i,cleanup:t,typeaheadBuffer:"",typeaheadTimer:null})},buildOptions:function(e,t,n){let s=e.querySelectorAll("option"),i=document.createDocumentFragment();s.forEach((a,o)=>{if(a.parentElement.tagName==="OPTGROUP"){let l=a.parentElement;if(!t.querySelector(`[data-group="${l.label}"]`)){let d=document.createElement("div");d.className="custom-select-option-group",d.textContent=l.label,d.dataset.group=l.label,i.appendChild(d)}}if(a.value===""&&!a.textContent.trim())return;let r=document.createElement("div");r.className="custom-select-option",r.textContent=a.textContent,r.setAttribute("role","option"),r.setAttribute("data-value",a.value),r.setAttribute("data-index",o),a.selected&&(r.classList.add("is-selected"),r.setAttribute("aria-selected","true")),a.disabled&&(r.classList.add("is-disabled"),r.setAttribute("aria-disabled","true")),r.addEventListener("click",l=>{a.disabled||this.selectOption(e,a,r,n,t)}),i.appendChild(r)}),t.appendChild(i)},selectOption:function(e,t,n,s,i){e.multiple?(t.selected=!t.selected,n.classList.toggle("is-selected"),n.setAttribute("aria-selected",t.selected)):(e.value=t.value,e.dispatchEvent(new Event("change",{bubbles:!0})),this.closeDropdown(s,i)),this.updateButtonText(e,s)},updateButtonText:function(e,t){if(e.multiple){let n=Array.from(e.selectedOptions);n.length===0?t.textContent=e.dataset.placeholder||"Select options...":n.length===1?t.textContent=n[0].textContent:t.textContent=`${n.length} selected`}else{let n=e.options[e.selectedIndex];t.textContent=n?n.textContent:e.dataset.placeholder||"Select..."}},updateSelectedOptions:function(e,t){let n=t.querySelectorAll(".custom-select-option"),s=Array.from(e.selectedOptions).map(i=>i.value);n.forEach(i=>{let a=i.dataset.value;s.includes(a)?(i.classList.add("is-selected"),i.setAttribute("aria-selected","true")):(i.classList.remove("is-selected"),i.setAttribute("aria-selected","false"))})},toggleDropdown:function(e,t){t.classList.contains("is-open")?this.closeDropdown(e,t):this.openDropdown(e,t)},openDropdown:function(e,t){t.classList.add("is-open"),e.setAttribute("aria-expanded","true");let n=t.querySelector(".custom-select-option:not(.is-disabled)");n&&n.focus()},closeDropdown:function(e,t){t.classList.remove("is-open"),e.setAttribute("aria-expanded","false")},handleKeydown:function(e,t,n,s){let i=s.classList.contains("is-open"),a=Array.from(s.querySelectorAll(".custom-select-option:not(.is-disabled)")),o=a.findIndex(r=>r===document.activeElement);switch(e.key){case"Enter":case" ":if(e.preventDefault(),i&&o>=0){let r=a[o],l=t.options[parseInt(r.dataset.index)];this.selectOption(t,l,r,n,s)}else this.openDropdown(n,s);break;case"Escape":i&&(e.preventDefault(),this.closeDropdown(n,s),n.focus());break;case"ArrowDown":if(e.preventDefault(),!i)this.openDropdown(n,s);else{let r=o0?o-1:a.length-1;a[r].focus()}break;case"Home":i&&(e.preventDefault(),a[0].focus());break;case"End":i&&(e.preventDefault(),a[a.length-1].focus());break;default:if(i&&e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey){let r=this.instances.get(t);if(!r)break;clearTimeout(r.typeaheadTimer),r.typeaheadBuffer+=e.key.toLowerCase();let l=a.find(d=>d.textContent.trim().toLowerCase().startsWith(r.typeaheadBuffer));l&&l.focus(),r.typeaheadTimer=setTimeout(()=>{r.typeaheadBuffer=""},500)}break}},filterOptions:function(e,t){let n=e.querySelectorAll(".vd-custom-select-option"),s=t.toLowerCase();n.forEach(i=>{i.textContent.toLowerCase().includes(s)?i.style.display="block":i.style.display="none"})},generateId:function(e){if(e.id)return e.id;let t="select-"+Math.random().toString(36).substr(2,9);return e.id=t,t},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),t.wrapper&&t.wrapper.parentNode&&(t.wrapper.parentNode.insertBefore(e,t.wrapper),t.wrapper.parentNode.removeChild(t.wrapper)),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>{this.destroy(t)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("select",p)})();(function(){"use strict";let p={sidenavs:new Map,breakpoint:992,_globalCleanups:[],isFixedVariant:function(e){return e.classList.contains("vd-sidenav-fixed")||e.classList.contains("sidenav-fixed")},isPushVariant:function(e){return e.classList.contains("vd-sidenav-push")||e.classList.contains("sidenav-push")},isRightVariant:function(e){return e.classList.contains("vd-sidenav-right")||e.classList.contains("sidenav-right")},init:function(){document.querySelectorAll(".vd-sidenav, .vd-offcanvas").forEach(s=>{this.sidenavs.has(s)||this.initSidenav(s)}),document.querySelectorAll("[data-sidenav-toggle]").forEach(s=>{if(s.dataset.sidenavToggleInitialized)return;s.dataset.sidenavToggleInitialized="true";let i=a=>{a.preventDefault();let o=s.dataset.sidenavToggle,r=document.querySelector(o);r&&this.toggle(r)};s.addEventListener("click",i),this._globalCleanups.push(()=>s.removeEventListener("click",i))}),this.handleResize();let n=()=>{this.handleResize()};window.addEventListener("resize",n),this._globalCleanups.push(()=>window.removeEventListener("resize",n))},initSidenav:function(e){let t=e.getAttribute("data-vd-position");if(t){let r=e.classList.contains("vd-offcanvas")?"vd-offcanvas":"vd-sidenav";e.classList.add(r+"-"+t)}let n=this.createOverlay(e),s=e.querySelector(".vd-sidenav-close, .vd-offcanvas-close"),i=[];if(e.setAttribute("role","navigation"),e.setAttribute("aria-hidden","true"),s){let r=()=>{this.close(e)};s.addEventListener("click",r),i.push(()=>s.removeEventListener("click",r))}let a=()=>{e.dataset.backdrop!=="static"&&this.close(e)};n.addEventListener("click",a),i.push(()=>n.removeEventListener("click",a));let o=r=>{r.key==="Escape"&&e.classList.contains("is-open")&&e.dataset.keyboard!=="false"&&this.close(e)};document.addEventListener("keydown",o),i.push(()=>document.removeEventListener("keydown",o)),this.sidenavs.set(e,{overlay:n,cleanup:i})},createOverlay:function(e){let t=e.querySelector(".vd-sidenav-overlay");return t||(t=document.createElement("div"),t.className="vd-sidenav-overlay",document.body.appendChild(t)),t},open:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(!t||!this.sidenavs.has(t))return;let{overlay:n}=this.sidenavs.get(t);this.isFixedVariant(t)||n.classList.add("is-visible"),t.classList.add("is-open"),t.setAttribute("aria-hidden","false"),document.body.classList.add("body-sidenav-open"),this.isPushVariant(t)&&this.handlePushVariant(t,!0),t.dispatchEvent(new CustomEvent("sidenav:open",{bubbles:!0}))},close:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(!t||!this.sidenavs.has(t))return;let{overlay:n}=this.sidenavs.get(t);n.classList.remove("is-visible"),t.classList.remove("is-open"),t.setAttribute("aria-hidden","true"),document.body.classList.remove("body-sidenav-open"),this.isPushVariant(t)&&this.handlePushVariant(t,!1),t.dispatchEvent(new CustomEvent("sidenav:close",{bubbles:!0}))},toggle:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&(t.classList.contains("is-open")?this.close(t):this.open(t))},handlePushVariant:function(e,t){let n=document.querySelector('main, .main-content, .content, [role="main"]')||document.body;t?window.innerWidth>=this.breakpoint&&(this.isRightVariant(e)?n.style.marginRight=e.offsetWidth+"px":n.style.marginLeft=e.offsetWidth+"px"):(n.style.marginLeft="",n.style.marginRight="")},handleResize:function(){this.sidenavs.forEach(({overlay:e},t)=>{window.innerWidth>=this.breakpoint?this.isFixedVariant(t)&&!t.classList.contains("is-open")&&(t.classList.add("is-open"),t.setAttribute("aria-hidden","false"),e.classList.remove("is-visible")):this.isFixedVariant(t)&&t.classList.contains("is-open")&&this.close(t)})},destroy:function(e){let t=this.sidenavs.get(e);t&&(e.classList.contains("is-open")&&this.close(e),t.cleanup.forEach(n=>n()),t.overlay&&t.overlay.parentNode&&t.overlay.parentNode.removeChild(t.overlay),this.sidenavs.delete(e))},destroyAll:function(){this.sidenavs.forEach((e,t)=>{this.destroy(t)}),this._globalCleanups.forEach(e=>e()),this._globalCleanups=[]}};typeof window.Vanduo<"u"&&window.Vanduo.register("sidenav",p),window.VanduoSidenav=p})();(function(){"use strict";let p={instances:new Map,init:function(){document.querySelectorAll(".vd-tabs, [data-tabs]").forEach(t=>{this.instances.has(t)||this.initTabs(t)})},initTabs:function(e){let t=e.querySelector('.vd-tab-list, [role="tablist"]'),n=e.querySelectorAll(".vd-tab-link, [data-tab]"),s=e.querySelectorAll(".vd-tab-pane, [data-tab-pane]");if(!t||n.length===0)return;let i=[];t.setAttribute("role","tablist"),n.forEach((o,r)=>{let l=o.dataset.tab||o.getAttribute("href")?.replace("#","")||`tab-${r}`,d=this.findPane(e,l,s);o.setAttribute("role","tab"),o.setAttribute("aria-selected",o.classList.contains("is-active")?"true":"false"),o.setAttribute("tabindex",o.classList.contains("is-active")?"0":"-1"),o.id||(o.id=`tab-btn-${l}`),d&&(d.setAttribute("role","tabpanel"),d.setAttribute("aria-labelledby",o.id),d.id||(d.id=`tab-pane-${l}`),o.setAttribute("aria-controls",d.id));let c=h=>{h.preventDefault(),!o.classList.contains("disabled")&&!o.disabled&&this.activateTab(e,o,n,s)};o.addEventListener("click",c),i.push(()=>o.removeEventListener("click",c));let u=h=>{this.handleKeydown(h,e,o,n,s)};o.addEventListener("keydown",u),i.push(()=>o.removeEventListener("keydown",u))}),!e.querySelector(".vd-tab-link.is-active, [data-tab].is-active")&&n.length>0&&this.activateTab(e,n[0],n,s),this.instances.set(e,{cleanup:i})},findPane:function(e,t,n){let s=e.querySelector(`[data-tab-pane="${t}"]`);return s||(s=e.querySelector(`#${t}`)),s||e.querySelectorAll(".vd-tab-link, [data-tab]").forEach((a,o)=>{(a.dataset.tab||a.getAttribute("href")?.replace("#",""))===t&&n[o]&&(s=n[o])}),s},activateTab:function(e,t,n,s){let i=t.dataset.tab||t.getAttribute("href")?.replace("#","")||t.id;n.forEach(r=>{r.classList.remove("is-active"),r.setAttribute("aria-selected","false"),r.setAttribute("tabindex","-1"),r.parentElement&&r.parentElement.classList.contains("tab-item")&&r.parentElement.classList.remove("is-active")}),s.forEach(r=>{r.classList.remove("is-active")}),t.classList.add("is-active"),t.setAttribute("aria-selected","true"),t.setAttribute("tabindex","0"),t.parentElement&&t.parentElement.classList.contains("tab-item")&&t.parentElement.classList.add("is-active");let a=this.findPane(e,i,s);a&&a.classList.add("is-active");let o=new CustomEvent("tab:change",{bubbles:!0,detail:{tab:t,pane:a,tabId:i}});e.dispatchEvent(o)},handleKeydown:function(e,t,n,s,i){let a=t.classList.contains("tabs-vertical"),o=Array.from(s).filter(d=>!d.classList.contains("disabled")&&!d.disabled),r=o.indexOf(n),l=r;switch(e.key){case"ArrowLeft":a||(e.preventDefault(),l=r>0?r-1:o.length-1);break;case"ArrowRight":a||(e.preventDefault(),l=r0?r-1:o.length-1);break;case"ArrowDown":a&&(e.preventDefault(),l=rn()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>{this.destroy(t)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("tabs",p)})();(function(){"use strict";let p={STORAGE_KEYS:{PRIMARY:"vanduo-primary-color",NEUTRAL:"vanduo-neutral-color",RADIUS:"vanduo-radius",FONT:"vanduo-font-preference",THEME:"vanduo-theme-preference"},DEFAULTS:{PRIMARY_LIGHT:"black",PRIMARY_DARK:"amber",NEUTRAL:"neutral",RADIUS:"0.5",FONT:"ubuntu",THEME:"system"},PRIMARY_COLORS:{black:{name:"Black",color:"#000000"},red:{name:"Red",color:"#fa5252"},orange:{name:"Orange",color:"#fd7e14"},amber:{name:"Amber",color:"#f59f00"},yellow:{name:"Yellow",color:"#fcc419"},lime:{name:"Lime",color:"#82c91e"},green:{name:"Green",color:"#40c057"},emerald:{name:"Emerald",color:"#20c997"},teal:{name:"Teal",color:"#12b886"},cyan:{name:"Cyan",color:"#22b8cf"},sky:{name:"Sky",color:"#3bc9db"},blue:{name:"Blue",color:"#228be6"},indigo:{name:"Indigo",color:"#4c6ef5"},violet:{name:"Violet",color:"#7950f2"},purple:{name:"Purple",color:"#be4bdb"},fuchsia:{name:"Fuchsia",color:"#f06595"},pink:{name:"Pink",color:"#e64980"},rose:{name:"Rose",color:"#ff8787"}},NEUTRAL_COLORS:{slate:{name:"Slate",color:"#64748b"},gray:{name:"Gray",color:"#6b7280"},zinc:{name:"Zinc",color:"#71717a"},neutral:{name:"Neutral",color:"#737373"},stone:{name:"Stone",color:"#78716c"}},RADIUS_OPTIONS:["0","0.125","0.25","0.375","0.5"],FONT_OPTIONS:{"jetbrains-mono":{name:"JetBrains Mono",family:"'JetBrains Mono', monospace"},inter:{name:"Inter",family:"'Inter', sans-serif"},"source-sans":{name:"Source Sans 3",family:"'Source Sans 3', sans-serif"},"fira-sans":{name:"Fira Sans",family:"'Fira Sans', sans-serif"},"ibm-plex":{name:"IBM Plex Sans",family:"'IBM Plex Sans', sans-serif"},system:{name:"System Default",family:null},ubuntu:{name:"Ubuntu",family:"'Ubuntu', sans-serif"},"open-sans":{name:"Open Sans",family:"'Open Sans', sans-serif"},rubik:{name:"Rubik",family:"'Rubik', sans-serif"},"titillium-web":{name:"Titillium Web",family:"'Titillium Web', sans-serif"}},THEME_MODES:["system","dark","light"],state:{primary:null,neutral:null,radius:null,font:null,theme:null,isOpen:!1},isInitialized:!1,_cleanup:[],elements:{customizer:null,trigger:null,panel:null,overlay:null},init:function(){if(this.isInitialized){this.bindExistingElements(),this.bindPanelEvents(),this.updateUI();return}this.isInitialized=!0,this._cleanup=[],this.loadPreferences(),this.applyAllPreferences(),this.bindExistingElements(),this.bindEvents(),console.log("Vanduo Theme Customizer initialized")},addListener:function(e,t,n,s){e&&(e.addEventListener(t,n,s),this._cleanup.push(()=>e.removeEventListener(t,n,s)))},getDefaultPrimary:function(e){return e==="system"?window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?this.DEFAULTS.PRIMARY_DARK:this.DEFAULTS.PRIMARY_LIGHT:e==="dark"?this.DEFAULTS.PRIMARY_DARK:this.DEFAULTS.PRIMARY_LIGHT},loadPreferences:function(){this.state.theme=this.getStorageValue(this.STORAGE_KEYS.THEME,this.DEFAULTS.THEME),this.state.primary=this.getStorageValue(this.STORAGE_KEYS.PRIMARY,this.getDefaultPrimary(this.state.theme)),this._normalizeDefaultPrimaryIfStaleWithStoredTheme(),this.state.neutral=this.getStorageValue(this.STORAGE_KEYS.NEUTRAL,this.DEFAULTS.NEUTRAL),this.state.radius=this.getStorageValue(this.STORAGE_KEYS.RADIUS,this.DEFAULTS.RADIUS),this.state.font=this.getStorageValue(this.STORAGE_KEYS.FONT,this.DEFAULTS.FONT)},savePreference:function(e,t){this.setStorageValue(e,t)},applyAllPreferences:function(){this.applyPrimary(this.state.primary),this.applyNeutral(this.state.neutral),this.applyRadius(this.state.radius),this.applyFont(this.state.font),this.applyTheme(this.state.theme)},applyPrimary:function(e){this.PRIMARY_COLORS[e]||(e=this.getDefaultPrimary(this.state.theme)),this.state.primary=e,document.documentElement.setAttribute("data-primary",e),this.savePreference(this.STORAGE_KEYS.PRIMARY,e),this.dispatchEvent("primary-change",{color:e})},applyNeutral:function(e){this.NEUTRAL_COLORS[e]||(e=this.DEFAULTS.NEUTRAL),this.state.neutral=e,document.documentElement.setAttribute("data-neutral",e),this.savePreference(this.STORAGE_KEYS.NEUTRAL,e),this.dispatchEvent("neutral-change",{neutral:e})},applyRadius:function(e){this.RADIUS_OPTIONS.includes(e)||(e=this.DEFAULTS.RADIUS),this.state.radius=e,document.documentElement.setAttribute("data-radius",e),document.documentElement.style.setProperty("--radius-scale",e),this.savePreference(this.STORAGE_KEYS.RADIUS,e),this.dispatchEvent("radius-change",{radius:e})},applyFont:function(e){this.FONT_OPTIONS[e]||(e=this.DEFAULTS.FONT),this.state.font=e,e==="system"?document.documentElement.removeAttribute("data-font"):document.documentElement.setAttribute("data-font",e),this.savePreference(this.STORAGE_KEYS.FONT,e),window.FontSwitcher&&window.FontSwitcher.setPreference&&(window.FontSwitcher.state.preference=e,window.FontSwitcher.applyFont()),this.dispatchEvent("font-change",{font:e})},applyTheme:function(e){if(this.THEME_MODES.includes(e)||(e=this.DEFAULTS.THEME),this._isApplying=!0,this.isUsingDefaultPrimary()){let t=this.getDefaultPrimary(e);this.state.primary!==t&&this.applyPrimary(t)}if(this.state.theme=e,e==="system"?document.documentElement.removeAttribute("data-theme"):document.documentElement.setAttribute("data-theme",e),this.savePreference(this.STORAGE_KEYS.THEME,e),window.Vanduo&&window.Vanduo.components.themeSwitcher){let t=window.Vanduo.components.themeSwitcher;t.state&&t.state.preference!==e&&(t.state.preference=e,typeof t.setStorageValue=="function"&&t.setStorageValue(t.STORAGE_KEY,e),typeof t.updateUI=="function"&&t.updateUI())}this._isApplying=!1,this.dispatchEvent("mode-change",{mode:e})},dispatchEvent:function(e,t){let n=new CustomEvent("theme:"+e,{bubbles:!0,detail:t});document.dispatchEvent(n);let s=new CustomEvent("theme:change",{bubbles:!0,detail:{type:e,value:t[Object.keys(t)[0]],state:{...this.state}}});document.dispatchEvent(s)},bindExistingElements:function(){if(this.elements.customizer=document.querySelector(".vd-theme-customizer"),this.elements.customizer)this.elements.trigger=this.elements.customizer.querySelector(".vd-theme-customizer-trigger"),this.elements.panel=this.elements.customizer.querySelector(".vd-theme-customizer-panel"),this.elements.overlay=this.elements.customizer.querySelector(".vd-theme-customizer-overlay");else{let e=document.querySelector("[data-theme-customizer-trigger]");e&&this.createDynamicPanel(e)}this.updateUI()},createDynamicPanel:function(e){let t=document.createElement("div");t.className="vd-theme-customizer",this.elements.trigger=e;let n=document.createElement("div");n.className="vd-theme-customizer-overlay";let s=document.createElement("div");s.className="vd-theme-customizer-panel",s.innerHTML=this.getPanelHTML(),document.body.appendChild(n),document.body.appendChild(s),this.elements.panel=s,this.elements.overlay=n,this.elements.customizer={contains:i=>s.contains(i)||e.contains(i)},this.positionPanel(),this.bindPanelEvents(),this.addListener(window,"resize",()=>this.positionPanel())},positionPanel:function(){if(!this.elements.panel||!this.elements.trigger)return;if(window.innerWidth<768)this.elements.panel.style.top="",this.elements.panel.style.right="",this.elements.panel.style.left="",this.elements.panel.style.height="",this.elements.panel.style.maxHeight="";else{let t=this.elements.trigger.getBoundingClientRect(),n=320,s=t.bottom+8,i=window.innerWidth,a=i-t.right;i-a-n<8&&(a=i-n-8),this.elements.panel.style.top=s+"px",this.elements.panel.style.right=a+"px",this.elements.panel.style.left="",this.elements.panel.style.height="auto",this.elements.panel.style.maxHeight="calc(100vh - "+s+"px)"}},bindPanelEvents:function(){if(!this.elements.panel||this.elements.panel.getAttribute("data-customizer-initialized")==="true")return;this.elements.panel.setAttribute("data-customizer-initialized","true"),this.elements.panel.querySelectorAll("[data-color]").forEach(s=>{this.addListener(s,"click",()=>{this.applyPrimary(s.dataset.color),this.updateUI()})}),this.elements.panel.querySelectorAll("[data-neutral]").forEach(s=>{this.addListener(s,"click",()=>{this.applyNeutral(s.dataset.neutral),this.updateUI()})}),this.elements.panel.querySelectorAll("[data-radius]").forEach(s=>{this.addListener(s,"click",()=>{this.applyRadius(s.dataset.radius),this.updateUI()})});let e=this.elements.panel.querySelector("[data-customizer-font]");e&&this.addListener(e,"change",s=>{this.applyFont(s.target.value),this.updateUI()});let t=this.elements.panel.querySelector(".customizer-reset");t&&this.addListener(t,"click",()=>{this.reset()});let n=this.elements.panel.querySelector(".customizer-mobile-close");n&&this.addListener(n,"click",()=>{this.close()}),this.elements.overlay&&this.addListener(this.elements.overlay,"click",()=>{this.close()})},getPanelHTML:function(){let e=typeof escapeHtml=="function"?escapeHtml:function(o){let r=document.createElement("div");return r.textContent=String(o??""),r.innerHTML},t=function(o){let r=String(o??"").trim();return/^(#[0-9a-fA-F]{3,8}|rgb[a]?\([^)]{1,60}\)|hsl[a]?\([^)]{1,60}\)|var\(--[a-zA-Z0-9_-]{1,40}\))$/.test(r)?r:"#000000"},n="";for(let[o,r]of Object.entries(this.PRIMARY_COLORS))n+=``;let s="";for(let[o,r]of Object.entries(this.NEUTRAL_COLORS))s+=``;let i="";this.RADIUS_OPTIONS.forEach(o=>{i+=``});let a="";for(let[o,r]of Object.entries(this.FONT_OPTIONS))a+=``;return`

    Customize Theme

    - `},isUsingDefaultPrimary:function(){return this.state.primary===this.DEFAULTS.PRIMARY_LIGHT||this.state.primary===this.DEFAULTS.PRIMARY_DARK},_normalizeDefaultPrimaryIfStaleWithStoredTheme:function(){if(!this.isUsingDefaultPrimary())return;let e=this.getDefaultPrimary(this.state.theme);this.state.primary!==e&&(this.state.primary=e)},bindEvents:function(){if(this.elements.trigger&&this.addListener(this.elements.trigger,"click",e=>{e.preventDefault(),e.stopPropagation(),this.toggle()}),this.bindPanelEvents(),window.matchMedia){let e=window.matchMedia("(prefers-color-scheme: dark)"),t=()=>{if(this.state.theme==="system"&&this.isUsingDefaultPrimary()){let n=this.getDefaultPrimary("system");n!==this.state.primary&&(this.applyPrimary(n),this.updateUI())}};e.addEventListener("change",t),this._cleanup.push(()=>e.removeEventListener("change",t))}this.addListener(document,"click",e=>{this.state.isOpen&&this.elements.customizer&&!this.elements.customizer.contains(e.target)&&this.close()}),this.addListener(document,"keydown",e=>{e.key==="Escape"&&this.state.isOpen&&this.close()})},toggle:function(){this.state.isOpen?this.close():this.open()},open:function(){this.state.isOpen=!0,this.positionPanel(),this.elements.panel&&this.elements.panel.classList.add("is-open"),this.elements.trigger&&this.elements.trigger.setAttribute("aria-expanded","true"),this.elements.overlay&&this.elements.overlay.classList.add("is-active"),this.dispatchEvent("panel-open",{isOpen:!0})},close:function(){this.state.isOpen=!1,this.elements.panel&&this.elements.panel.classList.remove("is-open"),this.elements.trigger&&this.elements.trigger.setAttribute("aria-expanded","false"),this.elements.overlay&&this.elements.overlay.classList.remove("is-active"),this.dispatchEvent("panel-close",{isOpen:!1})},updateUI:function(){if(!this.elements.panel)return;this.elements.panel.querySelectorAll("[data-color]").forEach(t=>{t.classList.toggle("is-active",t.dataset.color===this.state.primary)}),this.elements.panel.querySelectorAll("[data-neutral]").forEach(t=>{t.classList.toggle("is-active",t.dataset.neutral===this.state.neutral)}),this.elements.panel.querySelectorAll("[data-radius]").forEach(t=>{t.classList.toggle("is-active",t.dataset.radius===this.state.radius)});let e=this.elements.panel.querySelector("[data-customizer-font]");e&&(e.value=this.state.font)},reset:function(){this.applyTheme(this.DEFAULTS.THEME),this.applyPrimary(this.getDefaultPrimary(this.DEFAULTS.THEME)),this.applyNeutral(this.DEFAULTS.NEUTRAL),this.applyRadius(this.DEFAULTS.RADIUS),this.applyFont(this.DEFAULTS.FONT),this.updateUI(),this.dispatchEvent("reset",{state:{...this.state}})},getState:function(){return{...this.state}},setPreferences:function(e){e.primary&&this.applyPrimary(e.primary),e.neutral&&this.applyNeutral(e.neutral),e.radius&&this.applyRadius(e.radius),e.font&&this.applyFont(e.font),e.theme&&this.applyTheme(e.theme),this.updateUI()},getStorageValue:function(e,t){if(typeof window.safeStorageGet=="function")return window.safeStorageGet(e,t);try{let n=localStorage.getItem(e);return n!==null?n:t}catch{return t}},setStorageValue:function(e,t){if(typeof window.safeStorageSet=="function")return window.safeStorageSet(e,t);try{return localStorage.setItem(e,t),!0}catch{return!1}},destroyAll:function(){this._cleanup.forEach(e=>e()),this._cleanup=[],this.elements.panel&&this.elements.panel.removeAttribute("data-customizer-initialized"),this.close(),this.isInitialized=!1}};window.Vanduo&&window.Vanduo.register("themeCustomizer",p),window.ThemeCustomizer=p})();(function(){"use strict";let p={isInitialized:!1,_mediaQuery:null,_onMediaChange:null,init:function(){if(this.STORAGE_KEY="vanduo-theme-preference",this.state={preference:this.getPreference()},this.isInitialized){this.applyTheme(),this.renderUI(),this.updateUI();return}this.isInitialized=!0,this.applyTheme(),this.listenForSystemChanges(),this.renderUI(),console.log("Vanduo Theme Switcher initialized")},getPreference:function(){return this.getStorageValue(this.STORAGE_KEY,"system")},setPreference:function(e){this.state.preference=e,this.setStorageValue(this.STORAGE_KEY,e),this.applyTheme(),window.ThemeCustomizer&&window.ThemeCustomizer.applyTheme&&!window.ThemeCustomizer._isApplying&&window.ThemeCustomizer.applyTheme(e),this.updateUI()},getStorageValue:function(e,t){if(typeof window.safeStorageGet=="function")return window.safeStorageGet(e,t);try{let n=localStorage.getItem(e);return n!==null?n:t}catch{return t}},setStorageValue:function(e,t){if(typeof window.safeStorageSet=="function")return window.safeStorageSet(e,t);try{return localStorage.setItem(e,t),!0}catch{return!1}},applyTheme:function(){let e=this.state.preference;e==="system"?document.documentElement.removeAttribute("data-theme"):document.documentElement.setAttribute("data-theme",e)},listenForSystemChanges:function(){this._mediaQuery&&this._onMediaChange||(this._mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this._onMediaChange=e=>{this.state.preference==="system"&&(this.applyTheme(),window.ThemeCustomizer&&typeof window.ThemeCustomizer.applyTheme=="function"&&!window.ThemeCustomizer._isApplying&&window.ThemeCustomizer.applyTheme("system"))},this._mediaQuery.addEventListener("change",this._onMediaChange))},renderUI:function(){document.querySelectorAll('[data-toggle="theme"]').forEach(t=>{if(t.getAttribute("data-theme-initialized")==="true"){t.tagName==="SELECT"&&(t.value=this.state.preference);return}if(t.tagName==="SELECT"){t.value=this.state.preference;let n=s=>{this.setPreference(s.target.value)};t.addEventListener("change",n),t._themeToggleHandler=n}else{let n=()=>{let s=["system","light","dark"],i=(s.indexOf(this.state.preference)+1)%s.length;this.setPreference(s[i])};t.addEventListener("click",n),t._themeToggleHandler=n}t.setAttribute("data-theme-initialized","true")})},updateUI:function(){document.querySelectorAll('[data-toggle="theme"]').forEach(t=>{if(t.tagName==="SELECT")t.value=this.state.preference;else{let n=t.querySelector(".theme-current-label");n&&(n.textContent=this.state.preference.charAt(0).toUpperCase()+this.state.preference.slice(1))}})},destroyAll:function(){document.querySelectorAll('[data-toggle="theme"][data-theme-initialized="true"]').forEach(t=>{if(t._themeToggleHandler){let n=t.tagName==="SELECT"?"change":"click";t.removeEventListener(n,t._themeToggleHandler),delete t._themeToggleHandler}t.removeAttribute("data-theme-initialized")}),this._mediaQuery&&this._onMediaChange&&this._mediaQuery.removeEventListener("change",this._onMediaChange),this._mediaQuery=null,this._onMediaChange=null,this.isInitialized=!1}};window.Vanduo&&window.Vanduo.register("themeSwitcher",p)})();(function(){"use strict";let p={defaults:{position:"top-right",duration:5e3,dismissible:!0,showProgress:!0,pauseOnHover:!0},containers:{},getContainer:function(e){if(this.containers[e])return this.containers[e];let t=document.createElement("div");return t.className=`vd-toast-container vd-toast-container-${e}`,t.setAttribute("role","status"),t.setAttribute("aria-live","polite"),t.setAttribute("aria-atomic","false"),document.body.appendChild(t),this.containers[e]=t,t},show:function(e,t,n){typeof e=="string"&&(e={message:e,type:t,duration:n});let s=Object.assign({},this.defaults,e),i=this.getContainer(s.position),a=document.createElement("div");a.className="vd-toast",s.type&&a.classList.add(`vd-toast-${s.type}`),s.solid&&a.classList.add("vd-toast-solid"),s.showProgress&&s.duration>0&&a.classList.add("vd-toast-with-progress");let o="";if(s.icon){let v=typeof sanitizeHtml=="function"?sanitizeHtml(s.icon):escapeHtml(s.icon);o+=`${v}`}else s.type&&(o+=`${this.getDefaultIcon(s.type)}`);let r=typeof escapeHtml=="function"?escapeHtml:function(v){let y=document.createElement("div");return y.appendChild(document.createTextNode(v)),y.innerHTML};if(o+='
    ',s.title&&(o+=`
    ${r(String(s.title))}
    `),s.message&&(o+=`
    ${r(String(s.message))}
    `),o+="
    ",s.dismissible&&(o+=''),s.showProgress&&s.duration>0){let v=parseInt(s.duration,10)||0;o+=`
    `}if(a.innerHTML=o,i.appendChild(a),a._toastCleanup=[],s.dismissible){let v=a.querySelector(".vd-toast-close"),y=()=>{this.dismiss(a)};v.addEventListener("click",y),a._toastCleanup.push(()=>v.removeEventListener("click",y))}let l=null,d=s.duration,c=null,h=()=>{if(s.duration>0){c=Date.now(),l=setTimeout(()=>{this.dismiss(a)},d),a._toastTimeoutId=l;let v=a.querySelector(".vd-toast-progress");v&&(v.style.animationPlayState="running")}},u=()=>{if(l){clearTimeout(l),l=null,a._toastTimeoutId=null,d-=Date.now()-c;let v=a.querySelector(".vd-toast-progress");v&&(v.style.animationPlayState="paused")}};s.pauseOnHover&&(a.addEventListener("mouseenter",u),a.addEventListener("mouseleave",h),a._toastCleanup.push(()=>a.removeEventListener("mouseenter",u),()=>a.removeEventListener("mouseleave",h))),requestAnimationFrame(()=>{a.classList.add("is-visible"),h()}),a._toastConfig=s;let f=new CustomEvent("toast:show",{bubbles:!0,detail:{toast:a,config:s}});return a.dispatchEvent(f),a},dismiss:function(e){if(!e||e.classList.contains("is-exiting"))return;e._toastTimeoutId&&(clearTimeout(e._toastTimeoutId),e._toastTimeoutId=null),e.classList.remove("is-visible"),e.classList.add("is-exiting");let t=new CustomEvent("toast:dismiss",{bubbles:!0,detail:{toast:e}});e.dispatchEvent(t);let n=()=>{e.removeEventListener("transitionend",n),e._toastCleanup&&(e._toastCleanup.forEach(s=>s()),delete e._toastCleanup),e.parentElement&&e.parentElement.removeChild(e)};e.addEventListener("transitionend",n),setTimeout(()=>{e._toastCleanup&&(e._toastCleanup.forEach(s=>s()),delete e._toastCleanup),e.parentElement&&e.parentElement.removeChild(e)},400)},destroyAll:function(){Object.keys(this.containers).forEach(e=>{let t=this.containers[e];if(!t)return;t.querySelectorAll(".vd-toast").forEach(s=>{s._toastTimeoutId&&clearTimeout(s._toastTimeoutId),s._toastCleanup&&(s._toastCleanup.forEach(i=>i()),delete s._toastCleanup),s.parentElement&&s.parentElement.removeChild(s)}),t.parentElement&&t.parentElement.removeChild(t)}),this.containers={}},dismissAll:function(e){e&&this.containers[e]?this.containers[e].querySelectorAll(".vd-toast").forEach(n=>this.dismiss(n)):Object.values(this.containers).forEach(t=>{t.querySelectorAll(".vd-toast").forEach(s=>this.dismiss(s))})},getDefaultIcon:function(e){return{success:'',error:'',warning:'',info:''}[e]||""},success:function(e,t){return this.show(Object.assign({message:e,type:"success"},t))},error:function(e,t){return this.show(Object.assign({message:e,type:"error"},t))},warning:function(e,t){return this.show(Object.assign({message:e,type:"warning"},t))},info:function(e,t){return this.show(Object.assign({message:e,type:"info"},t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("toast",p),window.Toast=p})();(function(){"use strict";let p={tooltips:new Map,delayTimers:new Map,sanitizeHtml:function(e){if(typeof sanitizeHtml=="function")return sanitizeHtml(e);let t=document.createElement("div");return t.textContent=e||"",t.innerHTML},init:function(){document.querySelectorAll("[data-tooltip], [data-tooltip-html]").forEach(t=>{this.tooltips.has(t)||this.initTooltip(t)})},initTooltip:function(e){let t=this.createTooltip(e),n=[],s=()=>{this.showTooltip(e,t)},i=()=>{this.hideTooltip(e,t)},a=()=>{this.showTooltip(e,t)},o=()=>{this.hideTooltip(e,t)};e.addEventListener("mouseenter",s),e.addEventListener("mouseleave",i),e.addEventListener("focus",a),e.addEventListener("blur",o),n.push(()=>e.removeEventListener("mouseenter",s),()=>e.removeEventListener("mouseleave",i),()=>e.removeEventListener("focus",a),()=>e.removeEventListener("blur",o)),this.tooltips.set(e,{tooltip:t,cleanup:n})},createTooltip:function(e){let t=document.createElement("div");t.className="vd-tooltip",t.setAttribute("role","tooltip"),t.setAttribute("aria-hidden","true");let n="tooltip-"+Math.random().toString(36).substr(2,9);t.id=n,e.setAttribute("aria-describedby",n);let s=e.dataset.tooltipHtml,i=e.dataset.tooltip;s?(t.innerHTML=this.sanitizeHtml(s),t.classList.add("vd-tooltip-html")):i&&(t.textContent=i);let a=e.dataset.tooltipPlacement||e.dataset.placement||"top";t.setAttribute("data-placement",a),t.classList.add(`vd-tooltip-${a}`),e.dataset.tooltipVariant&&t.classList.add(`vd-tooltip-${e.dataset.tooltipVariant}`),e.dataset.tooltipSize&&t.classList.add(`vd-tooltip-${e.dataset.tooltipSize}`);let o=parseInt(e.dataset.tooltipDelay)||0;return t.dataset.delay=o,document.body.appendChild(t),t},showTooltip:function(e,t){let n=parseInt(t.dataset.delay)||0;if(n>0){let s=setTimeout(()=>{this.positionTooltip(e,t),t.classList.add("is-visible"),t.setAttribute("aria-hidden","false")},n);this.delayTimers.set(e,s)}else this.positionTooltip(e,t),t.classList.add("is-visible"),t.setAttribute("aria-hidden","false")},hideTooltip:function(e,t){let n=this.delayTimers.get(e);n&&(clearTimeout(n),this.delayTimers.delete(e)),t.classList.remove("is-visible"),t.setAttribute("aria-hidden","true")},positionTooltip:function(e,t){let n=t.dataset.placement||"top",s=e.getBoundingClientRect(),i=t.getBoundingClientRect(),a=window.pageYOffset||document.documentElement.scrollTop,o=window.pageXOffset||document.documentElement.scrollLeft,r=0,l=0;switch(n){case"top":r=s.top+a-i.height-8,l=s.left+o+s.width/2-i.width/2;break;case"bottom":r=s.bottom+a+8,l=s.left+o+s.width/2-i.width/2;break;case"left":r=s.top+a+s.height/2-i.height/2,l=s.left+o-i.width-8;break;case"right":r=s.top+a+s.height/2-i.height/2,l=s.right+o+8;break}let d=window.innerWidth,c=window.innerHeight,h=8;ld-h&&(l=d-i.width-h),ra+c-h&&(r=a+c-i.height-h),t.style.cssText=`position: absolute; top: 0; left: 0; transform: translate(${l}px, ${r}px);`},show:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t&&this.tooltips.has(t)){let{tooltip:n}=this.tooltips.get(t);this.showTooltip(t,n)}},hide:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t&&this.tooltips.has(t)){let{tooltip:n}=this.tooltips.get(t);this.hideTooltip(t,n)}},update:function(e,t,n=!1){let s=typeof e=="string"?document.querySelector(e):e;if(s&&this.tooltips.has(s)){let{tooltip:i}=this.tooltips.get(s);n?(i.innerHTML=this.sanitizeHtml(t),i.classList.add("vd-tooltip-html")):(i.textContent=t,i.classList.remove("vd-tooltip-html"))}},destroy:function(e){let t=this.tooltips.get(e);if(!t)return;let n=this.delayTimers.get(e);n&&(clearTimeout(n),this.delayTimers.delete(e)),t.cleanup.forEach(s=>s()),t.tooltip&&t.tooltip.parentNode&&t.tooltip.parentNode.removeChild(t.tooltip),this.tooltips.delete(e)},destroyAll:function(){this.tooltips.forEach((e,t)=>{this.destroy(t)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("tooltips",p),window.VanduoTooltips=p})();(function(){"use strict";let p={minQueryLength:2,maxResults:10,debounceMs:150,highlightTag:"mark",keyboardShortcut:!0,containerSelector:".vd-doc-search",inputSelector:".vd-doc-search-input",resultsSelector:".vd-doc-search-results",contentSelector:".doc-content section[id]",titleSelector:".demo-title, h2, h3",navSelector:".doc-nav-link",sectionSelector:".doc-nav-section",excludeFromContent:"pre, code, script, style",maxContentLength:500,data:null,categoryIcons:{"getting-started":"ph-rocket-launch",core:"ph-cube",components:"ph-puzzle-piece",interactive:"ph-cursor-click","data-display":"ph-table",feedback:"ph-bell",meta:"ph-info",default:"ph-file-text"},onSelect:null,onSearch:null,onOpen:null,onClose:null,emptyTitle:"No results found",emptyText:"Try different keywords or check spelling",placeholder:"Search..."};function e(n){let s=Object.assign({},p,n||{}),i={initialized:!1,index:[],results:[],activeIndex:-1,isOpen:!1,query:"",container:null,input:null,resultsContainer:null,debounceTimer:null,boundHandlers:{}};function a(b,S,...A){try{S(...A)}catch(D){console.warn('[Vanduo Search] Callback error in "'+b+'":',D)}}function o(b){if(i.resultsContainer)try{i.resultsContainer.innerHTML=b}catch(S){console.warn("[Vanduo Search] Failed to render results:",S)}}function r(){return i.initialized?U:(i.container=document.querySelector(s.containerSelector),!i.container||(i.input=i.container.querySelector(s.inputSelector),i.resultsContainer=i.container.querySelector(s.resultsSelector),!i.input||!i.resultsContainer)?(i.initialized=!1,null):(s.placeholder&&i.input.setAttribute("placeholder",s.placeholder),l(),v(),C(),i.initialized=!0,U))}function l(){if(i.index=[],s.data&&Array.isArray(s.data)){s.data.forEach(function(A){i.index.push({id:A.id||f(A.title),title:A.title||"",category:A.category||"",categorySlug:f(A.category||""),content:A.content||"",keywords:A.keywords||u(A.title+" "+A.content),url:A.url||"#"+(A.id||f(A.title)),icon:A.icon||""})});return}let b=document.querySelectorAll(s.contentSelector),S=d();b.forEach(function(A){let D=A.id;if(!D)return;let N=A.querySelector(s.titleSelector),q=N?N.textContent.replace(/v[\d.]+/g,"").trim():D,X=S[D]||"Documentation",$=c(A),B=h(A,q),Y=N?N.querySelector("i.ph"):null,W="";if(Y&&Y.classList){for(let K=0;K2&&A.push(q)}),b.querySelectorAll("code").forEach(function(q){let $=(q.textContent||"").match(/\.([\w-]+)/g);$&&$.forEach(function(B){A.push(B.substring(1).toLowerCase())})}),b.querySelectorAll("[data-tooltip], [data-modal]").forEach(function(q){q.getAttributeNames().filter(function($){return $.startsWith("data-")}).forEach(function($){A.push($.replace("data-",""))})}),Array.from(new Set(A))}function u(b){return b.toLowerCase().split(/\s+/).filter(function(A){return A.length>2})}function f(b){return b.toLowerCase().replace(/\s+/g,"-").replace(/[^a-z0-9-]/g,"")}function v(){i.boundHandlers.handleInput=function(b){L(b)},i.boundHandlers.handleFocus=function(){i.query.length>=s.minQueryLength&&H()},i.boundHandlers.handleKeydown=function(b){P(b)},i.boundHandlers.handleOutsideClick=function(b){i.container.contains(b.target)||z()},i.boundHandlers.handleGlobalKeydown=function(b){s.keyboardShortcut&&(b.metaKey||b.ctrlKey)&&b.key==="k"&&(b.preventDefault(),i.input.focus(),i.input.select())},i.boundHandlers.handleResultClick=function(b){let S=b.target.closest(".vd-doc-search-result");if(S){let A=parseInt(S.dataset.index,10);I(A)}},i.input.addEventListener("input",i.boundHandlers.handleInput),i.input.addEventListener("focus",i.boundHandlers.handleFocus),i.input.addEventListener("keydown",i.boundHandlers.handleKeydown),document.addEventListener("click",i.boundHandlers.handleOutsideClick),document.addEventListener("keydown",i.boundHandlers.handleGlobalKeydown),i.resultsContainer.addEventListener("click",i.boundHandlers.handleResultClick)}function y(){i.input&&(i.input.removeEventListener("input",i.boundHandlers.handleInput),i.input.removeEventListener("focus",i.boundHandlers.handleFocus),i.input.removeEventListener("keydown",i.boundHandlers.handleKeydown)),document.removeEventListener("click",i.boundHandlers.handleOutsideClick),document.removeEventListener("keydown",i.boundHandlers.handleGlobalKeydown),i.resultsContainer&&i.resultsContainer.removeEventListener("click",i.boundHandlers.handleResultClick)}function C(){let b=i.resultsContainer.id||"search-results-"+Math.random().toString(36).substr(2,9);i.resultsContainer.id=b,i.input.setAttribute("role","combobox"),i.input.setAttribute("aria-autocomplete","list"),i.input.setAttribute("aria-controls",b),i.input.setAttribute("aria-expanded","false"),i.resultsContainer.setAttribute("role","listbox"),i.resultsContainer.setAttribute("aria-label","Search results")}function L(b){let S=b.target.value.trim();i.debounceTimer&&clearTimeout(i.debounceTimer),i.debounceTimer=setTimeout(function(){if(i.query=S,S.length=s.minQueryLength&&(b.preventDefault(),i.results=x(i.query),_(),H());return}switch(b.key){case"ArrowDown":b.preventDefault(),w(1);break;case"ArrowUp":b.preventDefault(),w(-1);break;case"Enter":b.preventDefault(),i.activeIndex>=0?I(i.activeIndex):i.results.length>0&&I(0);break;case"Escape":b.preventDefault(),z();break;case"Tab":z();break}}function x(b){let S=b.toLowerCase().split(/\s+/).filter(function(D){return D.length>0}),A=[];return i.index.forEach(function(D){let N=0,q=D.title.toLowerCase(),X=D.category.toLowerCase(),$=D.content.toLowerCase();S.forEach(function(B){q.includes(B)&&(N+=100,q===B?N+=50:q.startsWith(B)&&(N+=25)),X.includes(B)&&(N+=50),D.keywords.some(function(W){return W.includes(B)})&&(N+=30),$.includes(B)&&(N+=10)}),N>0&&A.push({id:D.id,title:D.title,category:D.category,categorySlug:D.categorySlug,content:D.content,url:D.url,icon:D.icon,score:N})}),A.sort(function(D,N){return N.score-D.score}),A.slice(0,s.maxResults)}function _(){if(i.results.length===0){o(V());return}let b='
      ';i.results.forEach(function(S,A){let D=A===i.activeIndex,N=S.icon||k(S.categorySlug),q=T(S.content,i.query);b+='
    • '+M(S.title,i.query)+'
      '+m(S.category)+'
      '+M(q,i.query)+"
      • "}),b+="
    ",b+=g(),o(b)}function V(){return'
    '+m(s.emptyTitle)+'
    '+m(s.emptyText)+"
    "}function g(){return'
    \u2191\u2193 to navigate\u21B5 to selectesc to close
    '}function k(b){return s.categoryIcons[b]||s.categoryIcons.default||"ph-file-text"}function T(b,S){let A=S.toLowerCase().split(/\s+/),D=b.toLowerCase(),N=100,q=-1;for(let Y=0;Y0&&(B="..."+B),$0}),D=m(b);return A.forEach(function(N){if(N.length>50)return;let q=new RegExp("("+N.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")+")","gi");D=D.replace(q,"<"+s.highlightTag+">$1")}),D}function m(b){let S=document.createElement("div");return S.textContent=b,S.innerHTML}function w(b){let S=i.activeIndex+b;S<0?S=i.results.length-1:S>=i.results.length&&(S=0),E(S)}function E(b){let S=i.resultsContainer.querySelector(".vd-doc-search-result.is-active");S&&(S.classList.remove("is-active"),S.setAttribute("aria-selected","false")),i.activeIndex=b;let A=i.resultsContainer.querySelector('[data-index="'+b+'"]');A&&(A.classList.add("is-active"),A.setAttribute("aria-selected","true"),i.input.setAttribute("aria-activedescendant","vd-doc-search-result-"+b),A.scrollIntoView({block:"nearest"}))}function I(b){let S=i.results[b];if(!S)return;if(z(),i.input.value="",i.query="",typeof s.onSelect=="function"){a("onSelect",s.onSelect,S);return}let A=document.querySelector(S.url);A&&(A.scrollIntoView({behavior:"smooth",block:"start"}),window.history.pushState(null,"",S.url),O(S.id))}function O(b){document.querySelectorAll(s.navSelector).forEach(function(A){A.classList.remove("active"),A.getAttribute("href")==="#"+b&&A.classList.add("active")})}function H(){i.isOpen||(i.isOpen=!0,i.resultsContainer.classList.add("is-open"),i.input.setAttribute("aria-expanded","true"),typeof s.onOpen=="function"&&a("onOpen",s.onOpen))}function z(){i.isOpen&&(i.isOpen=!1,i.activeIndex=-1,i.resultsContainer.classList.remove("is-open"),i.input.setAttribute("aria-expanded","false"),i.input.removeAttribute("aria-activedescendant"),typeof s.onClose=="function"&&a("onClose",s.onClose))}function R(){y(),i.initialized=!1,i.index=[],i.results=[],i.isOpen=!1,i.query="",i.debounceTimer&&clearTimeout(i.debounceTimer),i.resultsContainer&&o("")}function j(){l()}function G(b){Object.assign(s,b)}function Z(){return Object.assign({},s)}function F(){return i.index.slice()}let U={init:r,destroy:R,rebuild:j,search:x,open:H,close:z,setConfig:G,getConfig:Z,getIndex:F};return U}let t={create:function(n){let s=e(n);return s&&s.init(),s||null},_instance:null,config:Object.assign({},p),init:function(n){return this._instance&&this._instance.destroy(),n&&Object.assign(this.config,n),this._instance=e(this.config),this._instance?this._instance.init():null},destroy:function(){this._instance&&(this._instance.destroy(),this._instance=null)},destroyAll:function(){this.destroy()},rebuild:function(){this._instance&&this._instance.rebuild()},search:function(n){return this._instance?this._instance.search(n):[]},open:function(){this._instance&&this._instance.open()},close:function(){this._instance&&this._instance.close()}};typeof window.Vanduo<"u"&&window.Vanduo.register("docSearch",t),window.Search=t,window.DocSearch=t,window.VanduoDocSearch=t})();(function(){"use strict";let p={instances:new Map,currentDrag:null,touchState:null,feedbackElement:null,containerSelector:".vd-draggable-container, .vd-draggable-container-vertical",init:function(){document.querySelectorAll(".vd-draggable, [data-draggable]").forEach(s=>{this.instances.has(s)||this.initDraggable(s)}),document.querySelectorAll(this.containerSelector).forEach(s=>{this.instances.has(s)||this.initContainer(s)}),document.querySelectorAll(".vd-drop-zone").forEach(s=>{this.instances.has(s)||this.initDropZone(s)}),this.createFeedbackElement()},initDraggable:function(e){let t=[];e.hasAttribute("draggable")||e.setAttribute("draggable","true"),e.hasAttribute("tabindex")||e.setAttribute("tabindex","0"),e.setAttribute("role","option"),e.setAttribute("aria-roledescription","draggable item"),e.setAttribute("aria-grabbed","false");let n=c=>{this.handleDragStart(c,e)};e.addEventListener("dragstart",n),t.push(()=>e.removeEventListener("dragstart",n));let s=c=>{this.handleDrag(c,e)};e.addEventListener("drag",s),t.push(()=>e.removeEventListener("drag",s));let i=c=>{this.handleDragEnd(c,e)};e.addEventListener("dragend",i),t.push(()=>e.removeEventListener("dragend",i));let a=c=>{this.handleTouchStart(c,e)};e.addEventListener("touchstart",a),t.push(()=>e.removeEventListener("touchstart",a));let o=c=>{this.handleTouchMove(c,e)};e.addEventListener("touchmove",o,{passive:!1}),t.push(()=>e.removeEventListener("touchmove",o));let r=c=>{this.handleTouchEnd(c,e)};e.addEventListener("touchend",r,{passive:!1}),t.push(()=>e.removeEventListener("touchend",r));let l=c=>{this.handleTouchEnd(c,e)};e.addEventListener("touchcancel",l),t.push(()=>e.removeEventListener("touchcancel",l));let d=c=>{this.handleKeydown(c,e)};e.addEventListener("keydown",d),t.push(()=>e.removeEventListener("keydown",d)),this.instances.set(e,{cleanup:t})},initContainer:function(e){e.setAttribute("role","listbox"),e.setAttribute("aria-label",e.getAttribute("aria-label")||"Draggable items"),e.querySelectorAll(".vd-draggable-item").forEach(o=>{this.instances.has(o)||this.initDraggable(o)});let n=[],s=o=>{o.preventDefault(),o.dataTransfer.dropEffect="move"},i=o=>{if(o.preventDefault(),o.dataTransfer.dropEffect="move",!this.currentDrag)return;let r=this.currentDrag.element;e.contains(r)&&(o.clientX===0&&o.clientY===0||this.handleReorder(e,r,o.clientX,o.clientY))},a=o=>{o.preventDefault()};e.addEventListener("dragenter",s),e.addEventListener("dragover",i),e.addEventListener("drop",a),n.push(()=>{e.removeEventListener("dragenter",s),e.removeEventListener("dragover",i),e.removeEventListener("drop",a)}),this.instances.set(e,{cleanup:n})},initDropZone:function(e){let t=[];e.setAttribute("role","region"),e.setAttribute("aria-dropeffect","move"),e.hasAttribute("aria-label")||e.setAttribute("aria-label","Drop zone");let n=o=>{o.preventDefault(),this.handleDragOver(o,e)};e.addEventListener("dragover",n),t.push(()=>e.removeEventListener("dragover",n));let s=o=>{o.preventDefault(),this.handleDragEnter(o,e)};e.addEventListener("dragenter",s),t.push(()=>e.removeEventListener("dragenter",s));let i=o=>{this.handleDragLeave(o,e)};e.addEventListener("dragleave",i),t.push(()=>e.removeEventListener("dragleave",i));let a=o=>{o.preventDefault(),this.handleDrop(o,e)};e.addEventListener("drop",a),t.push(()=>e.removeEventListener("drop",a)),this.instances.set(e,{cleanup:t})},createFeedbackElement:function(){if(!this.feedbackElement){let e=document.querySelector(".vd-drag-feedback");if(e){this.feedbackElement=e;return}this.feedbackElement=document.createElement("div"),this.feedbackElement.className="vd-drag-feedback hidden",this.feedbackElement.setAttribute("role","presentation"),document.body.appendChild(this.feedbackElement)}},handleDragStart:function(e,t){t.classList.add("is-dragging"),t.setAttribute("aria-grabbed","true"),this.currentDrag={element:t,initialPosition:{x:e.clientX,y:e.clientY},initialBounds:t.getBoundingClientRect(),data:this.getData(t)},e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",this.currentDrag.data),t.dispatchEvent(new CustomEvent("draggable:start",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:e.clientX,y:e.clientY}}}))},handleDrag:function(e,t){this.currentDrag&&t.dispatchEvent(new CustomEvent("draggable:drag",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:e.clientX,y:e.clientY},delta:{x:e.clientX-this.currentDrag.initialPosition.x,y:e.clientY-this.currentDrag.initialPosition.y}}}))},handleDragEnd:function(e,t){t.classList.remove("is-dragging"),t.classList.add("is-dropped"),setTimeout(()=>t.classList.remove("is-dropped"),300),t.setAttribute("aria-grabbed","false"),this.feedbackElement&&this.feedbackElement.classList.add("hidden");let n=this.currentDrag?.data||this.getData(t),s=this.currentDrag?.initialPosition||{x:0,y:0};t.dispatchEvent(new CustomEvent("draggable:end",{bubbles:!0,detail:{element:t,data:n,position:{x:e.clientX,y:e.clientY},delta:{x:e.clientX-s.x,y:e.clientY-s.y}}})),this.currentDrag=null},handleTouchStart:function(e,t){let n=e.touches[0],s=t.getBoundingClientRect();this.touchState={element:t,startX:n.clientX,startY:n.clientY,lastX:n.clientX,lastY:n.clientY,offsetX:n.clientX-s.left,offsetY:n.clientY-s.top,startTime:Date.now(),isDragging:!1}},handleTouchMove:function(e,t){if(!this.touchState)return;let n=e.touches[0];this.touchState.lastX=n.clientX,this.touchState.lastY=n.clientY;let s=n.clientX-this.touchState.startX,i=n.clientY-this.touchState.startY;if((Math.abs(s)>10||Math.abs(i)>10)&&(e.cancelable&&e.preventDefault(),this.touchState.isDragging||(this.touchState.isDragging=!0,t.classList.add("is-dragging"),t.setAttribute("aria-grabbed","true"),this.currentDrag={element:t,initialPosition:{x:this.touchState.startX,y:this.touchState.startY},initialBounds:t.getBoundingClientRect(),data:this.getData(t),offsetX:this.touchState.offsetX,offsetY:this.touchState.offsetY},t.dispatchEvent(new CustomEvent("draggable:start",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:n.clientX,y:n.clientY}}}))),this.updateFeedback(n.clientX,n.clientY),this.currentDrag)){t.dispatchEvent(new CustomEvent("draggable:drag",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:n.clientX,y:n.clientY},delta:{x:s,y:i}}})),this.updateTouchDropZone(n.clientX,n.clientY);let a=t.closest(this.containerSelector);a&&a.contains(t)&&this.handleReorder(a,t,n.clientX,n.clientY)}},handleTouchEnd:function(e,t){if(this.touchState&&this.touchState.isDragging){e.cancelable&&e.preventDefault();let n=e.changedTouches?.[0],s={x:n?.clientX??this.touchState.lastX??this.touchState.startX,y:n?.clientY??this.touchState.lastY??this.touchState.startY},i=this.resolveDropZoneAtPoint(s.x,s.y)||this.touchState.overZone;i?this.dispatchDrop(i,s):this.touchState.overZone&&this.touchState.overZone.classList.remove("is-drag-over"),t.classList.remove("is-dragging"),t.classList.add("is-dropped"),t.setAttribute("aria-grabbed","false"),setTimeout(()=>t.classList.remove("is-dropped"),300),this.feedbackElement&&this.feedbackElement.classList.add("hidden");let a=this.currentDrag?.data||this.getData(t),o=this.touchState?.startX||0,r=this.touchState?.startY||0;t.dispatchEvent(new CustomEvent("draggable:end",{bubbles:!0,detail:{element:t,data:a,position:s,delta:{x:s.x-o,y:s.y-r}}}))}this.touchState=null,this.currentDrag=null},handleDragOver:function(e,t){e.preventDefault(),e.dataTransfer.dropEffect="move"},handleDragEnter:function(e,t){e.preventDefault(),t.classList.add("is-drag-over")},handleDragLeave:function(e,t){t.classList.remove("is-drag-over")},handleDrop:function(e,t){e.preventDefault(),this.dispatchDrop(t,{x:e.clientX,y:e.clientY})},resolveDropZoneAtPoint:function(e,t){if(!Number.isFinite(e)||!Number.isFinite(t))return null;if(typeof document.elementsFromPoint=="function"){let a=document.elementsFromPoint(e,t);for(let o of a){let r=o.closest(".vd-drop-zone");if(r)return r}}let n=document.elementFromPoint(e,t),s=n?n.closest(".vd-drop-zone"):null;if(s)return s;let i=document.querySelectorAll(".vd-drop-zone");for(let a of i){let o=a.getBoundingClientRect();if(e>=o.left&&e<=o.right&&t>=o.top&&t<=o.bottom)return a}return null},updateTouchDropZone:function(e,t){if(!this.touchState)return;let n=this.resolveDropZoneAtPoint(e,t),s=this.touchState.overZone||null;s&&s!==n&&s.classList.remove("is-drag-over"),n&&n!==s&&n.classList.add("is-drag-over"),this.touchState.overZone=n||null},dispatchDrop:function(e,t){e.classList.remove("is-drag-over"),e.dispatchEvent(new CustomEvent("draggable:drop",{bubbles:!0,detail:{zone:e,element:this.currentDrag?.element,data:this.currentDrag?.data,position:t}}))},handleReorder:function(e,t,n,s){let i=e.classList.contains("vd-draggable-container-vertical"),o=[...e.querySelectorAll(".vd-draggable-item:not(.is-dragging), .vd-draggable:not(.is-dragging)")].reduce((r,l)=>{let d=l.getBoundingClientRect(),c=i?s-d.top-d.height/2:n-d.left-d.width/2;return c<0&&c>r.offset?{offset:c,element:l}:r},{offset:Number.NEGATIVE_INFINITY}).element;o==null?e.appendChild(t):e.insertBefore(t,o)},handleKeydown:function(e,t){switch(e.key){case"Enter":case" ":e.preventDefault(),t.click();break;case"Escape":t.classList.contains("is-dragging")&&(t.classList.remove("is-dragging"),t.setAttribute("aria-grabbed","false"),this.feedbackElement&&this.feedbackElement.classList.add("hidden"),this.currentDrag=null);break;case"ArrowUp":case"ArrowLeft":{e.preventDefault();let n=t.previousElementSibling;n&&(n.classList.contains("vd-draggable")||n.classList.contains("vd-draggable-item"))&&(t.parentNode.insertBefore(t,n),t.focus(),t.dispatchEvent(new CustomEvent("draggable:reorder",{bubbles:!0,detail:{element:t,direction:"up"}})));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();let n=t.nextElementSibling;n&&(n.classList.contains("vd-draggable")||n.classList.contains("vd-draggable-item"))&&(t.parentNode.insertBefore(n,t),t.focus(),t.dispatchEvent(new CustomEvent("draggable:reorder",{bubbles:!0,detail:{element:t,direction:"down"}})));break}}},getData:function(e){return e.dataset.draggable||e.textContent.trim()},updateFeedback:function(e,t){if(!this.currentDrag)return;this.feedbackElement.classList.remove("hidden");let n=this.currentDrag.initialBounds;this.feedbackElement.innerHTML="";let s=this.currentDrag.element.cloneNode(!0);this.feedbackElement.appendChild(s);let i=this.currentDrag.offsetX??20,a=this.currentDrag.offsetY??20;Object.assign(this.feedbackElement.style,{left:e-i+"px",top:t-a+"px",width:n.width+"px",height:n.height+"px"})},makeDraggable:function(e,t={}){let n=typeof e=="string"?document.querySelector(e):e;n&&!this.instances.has(n)&&(n.classList.add("vd-draggable"),n.setAttribute("draggable","true"),t.data&&(n.dataset.draggable=t.data),this.initDraggable(n))},removeDraggable:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&this.instances.has(t)&&(this.instances.get(t).cleanup.forEach(s=>s()),this.instances.delete(t),t.classList.remove("vd-draggable"),t.removeAttribute("draggable"),t.removeAttribute("data-draggable"))},destroy:function(e){this.removeDraggable(e)},destroyAll:function(){Array.from(this.instances.keys()).forEach(t=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("draggable",p),window.VanduoDraggable=p})();(function(){"use strict";let p=new Map;function e(r){try{return new URL(r,window.location.href).origin===window.location.origin}catch{return!1}}function t(r,l){let c=new DOMParser().parseFromString(l.trim(),"text/html"),h=["SCRIPT","IFRAME","OBJECT","EMBED","FORM","BASE","LINK","META","STYLE"];for(let v of h){let y=c.querySelectorAll(v);for(let C=y.length-1;C>=0;C--)y[C].parentNode.removeChild(y[C])}function u(v){if(v.nodeType===Node.ELEMENT_NODE){let y=v.attributes;for(let L=y.length-1;L>=0;L--){let P=y[L].name.toLowerCase(),_=y[L].value.toLowerCase().trim();(P.startsWith("on")||_.startsWith("javascript:")||_.startsWith("data:")||_.startsWith("vbscript:"))&&v.removeAttribute(y[L].name)}let C=v.childNodes;for(let L=0;L
    Loading\u2026
    '}function s(){return'
    Loading\u2026
    '}function i(r){return!r||r==="skeleton"?n():r==="spinner"?s():r}function a(r,l,d){r.dispatchEvent(new CustomEvent(l,{bubbles:!0,detail:d||{}}))}let o={observe:function(r,l,d){if(!(r instanceof Element)){console.warn("[VanduoLazyLoad] observe() requires a DOM Element.");return}if(typeof l!="function"){console.warn("[VanduoLazyLoad] observe() requires a callback function.");return}if(p.has(r))return;let c=d&&d.threshold!=null?d.threshold:0,h=d&&d.rootMargin?d.rootMargin:"0px",u=new IntersectionObserver(function(f,v){f.forEach(function(y){if(y.isIntersecting){v.unobserve(y.target),p.delete(y.target);try{l(y.target)}catch(C){console.error("[VanduoLazyLoad] Callback threw:",C)}}})},{threshold:c,rootMargin:h});p.set(r,u),u.observe(r)},unobserve:function(r){let l=p.get(r);l&&(l.unobserve(r),p.delete(r))},unobserveAll:function(){p.forEach(function(r,l){r.unobserve(l)}),p.clear()},loadSection:function(r,l,d){if(typeof r!="string"||!r){console.warn("[VanduoLazyLoad] loadSection() requires a non-empty URL string.");return}if(!(l instanceof Element)){console.warn("[VanduoLazyLoad] loadSection() requires a DOM Element as containerEl.");return}if(!e(r)){console.error("[VanduoLazyLoad] loadSection() blocked cross-origin URL:",r);return}let c=d||{},h=i(c.placeholder);t(l,h),a(l,"lazysection:loading",{url:r}),this.observe(l,function(){let u=new window.AbortController,f=setTimeout(function(){u.abort()},1e4);window.fetch(r,{signal:u.signal}).then(function(v){if(clearTimeout(f),!v.ok)throw new Error("HTTP "+v.status);return v.text()}).then(function(v){t(l,v),a(l,"lazysection:loaded",{url:r}),typeof window.Vanduo<"u"&&window.Vanduo.init(),typeof c.onLoaded=="function"&&c.onLoaded(l)}).catch(function(v){let y=document.createElement("div");y.className="vd-alert vd-alert-error",y.setAttribute("role","alert");let C=document.createElement("span");C.textContent="Failed to load content. ";let L=document.createElement("small");for(L.style.opacity="0.7",L.textContent=v.message,y.appendChild(C),y.appendChild(L);l.firstChild;)l.removeChild(l.firstChild);l.appendChild(y),a(l,"lazysection:error",{url:r,error:v}),console.error("[VanduoLazyLoad] loadSection failed:",v),typeof c.onError=="function"&&c.onError(v)})},{threshold:c.threshold,rootMargin:c.rootMargin})},init:function(){let r=this;document.querySelectorAll("[data-vd-lazy]").forEach(function(d){if(p.has(d)||d.dataset.vdLazyState==="loading"||d.dataset.vdLazyState==="loaded")return;let c=d.getAttribute("data-vd-lazy");if(!c)return;d.dataset.vdLazyState="loading";let h=d.getAttribute("data-vd-lazy-placeholder")||"skeleton";r.loadSection(c,d,{placeholder:h,onLoaded:function(){d.dataset.vdLazyState="loaded"},onError:function(){d.dataset.vdLazyState="error"}})})}};typeof window.Vanduo<"u"&&window.Vanduo.register("LazyLoad",o),window.VanduoLazyLoad=o})();(function(){"use strict";let p={observers:new Map,init:function(){document.querySelectorAll("[data-glass-scroll]").forEach(e=>{this.observers.has(e)||this.initElement(e)})},initElement:function(e){let t=e.dataset.glassSentinel,n;if(t&&(n=document.querySelector(t)),n||(n=e.previousElementSibling),!n){e.classList.add("is-glass-active");return}let s=new IntersectionObserver(i=>{i.forEach(a=>{e.classList.toggle("is-glass-active",!a.isIntersecting)})},{threshold:0,rootMargin:"0px"});s.observe(n),this.observers.set(e,s)},destroy:function(e){let t=this.observers.get(e);t&&(t.disconnect(),this.observers.delete(e))},destroyAll:function(){this.observers.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("glassScroll",p),window.VanduoGlassScroll=p})();(function(){"use strict";let p={instances:new Map,init:function(){document.querySelectorAll(".vd-flow, .vd-carousel").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=e.querySelector(".vd-flow-track");if(!t)return;let n=Array.from(t.querySelectorAll(".vd-flow-slide"));if(n.length===0)return;let s=e.classList.contains("vd-flow-fade"),i=e.hasAttribute("data-vd-autoplay"),a=parseInt(e.getAttribute("data-vd-interval"),10)||5e3,o=e.getAttribute("data-vd-loop")!=="false",r={current:0,total:n.length,autoplayTimer:null,isFade:s,loop:o,isDragging:!1,startX:0,currentX:0,threshold:50},l=[];n.forEach((g,k)=>{g.setAttribute("role","group"),g.setAttribute("aria-roledescription","slide"),g.setAttribute("aria-label","Slide "+(k+1)+" of "+n.length),k===0&&g.classList.add("is-active")}),e.setAttribute("role","region"),e.setAttribute("aria-roledescription","carousel"),e.getAttribute("aria-label")||e.setAttribute("aria-label","Carousel");let d=document.createElement("div");d.setAttribute("aria-live","polite"),d.setAttribute("aria-atomic","true"),d.className="sr-only",d.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);",e.appendChild(d);let c=(g,k)=>{k===void 0&&(k=!0);let T=g;r.loop?T=(g%r.total+r.total)%r.total:T=Math.max(0,Math.min(g,r.total-1));let M=r.current;r.current=T,r.isFade?n.forEach((w,E)=>{w.classList.toggle("is-active",E===T)}):t.style.transform="translateX(-"+T*100+"%)",e.querySelectorAll(".vd-flow-indicator").forEach((w,E)=>{w.classList.toggle("is-active",E===T),w.setAttribute("aria-selected",E===T?"true":"false")}),n.forEach((w,E)=>{w.setAttribute("aria-hidden",E!==T?"true":"false")}),k&&(d.textContent="Slide "+(T+1)+" of "+r.total),e.dispatchEvent(new CustomEvent("flow:change",{detail:{current:T,previous:M,total:r.total}}))},h=()=>c(r.current+1),u=()=>c(r.current-1),f=e.querySelector(".vd-flow-prev"),v=e.querySelector(".vd-flow-next");if(f){let g=()=>u();f.addEventListener("click",g),l.push(()=>f.removeEventListener("click",g))}if(v){let g=()=>h();v.addEventListener("click",g),l.push(()=>v.removeEventListener("click",g))}e.querySelectorAll(".vd-flow-indicator").forEach((g,k)=>{g.setAttribute("role","tab"),g.setAttribute("aria-selected",k===0?"true":"false"),g.setAttribute("aria-label","Go to slide "+(k+1));let T=()=>c(k);g.addEventListener("click",T),l.push(()=>g.removeEventListener("click",T))});let C=g=>{g.key==="ArrowLeft"&&(u(),g.preventDefault()),g.key==="ArrowRight"&&(h(),g.preventDefault())};e.setAttribute("tabindex","0"),e.addEventListener("keydown",C),l.push(()=>e.removeEventListener("keydown",C));let L=g=>{r.isDragging=!0,r.startX=g.clientX||g.touches&&g.touches[0].clientX||0,r.currentX=r.startX,e.classList.add("is-dragging")},P=g=>{r.isDragging&&(r.currentX=g.clientX||g.touches&&g.touches[0].clientX||0)},x=()=>{if(!r.isDragging)return;r.isDragging=!1,e.classList.remove("is-dragging");let g=r.startX-r.currentX;Math.abs(g)>r.threshold&&(g>0?h():u())};e.addEventListener("mousedown",L),e.addEventListener("mousemove",P),e.addEventListener("mouseup",x),e.addEventListener("mouseleave",x),e.addEventListener("touchstart",L,{passive:!0}),e.addEventListener("touchmove",P,{passive:!0}),e.addEventListener("touchend",x),l.push(()=>e.removeEventListener("mousedown",L),()=>e.removeEventListener("mousemove",P),()=>e.removeEventListener("mouseup",x),()=>e.removeEventListener("mouseleave",x),()=>e.removeEventListener("touchstart",L),()=>e.removeEventListener("touchmove",P),()=>e.removeEventListener("touchend",x));let _=()=>{V(),r.autoplayTimer=setInterval(h,a)},V=()=>{r.autoplayTimer&&(clearInterval(r.autoplayTimer),r.autoplayTimer=null)};if(i){_();let g=()=>V(),k=()=>_();e.addEventListener("mouseenter",g),e.addEventListener("mouseleave",k),e.addEventListener("focusin",g),e.addEventListener("focusout",k),l.push(()=>e.removeEventListener("mouseenter",g),()=>e.removeEventListener("mouseleave",k),()=>e.removeEventListener("focusin",g),()=>e.removeEventListener("focusout",k),()=>V())}c(0,!1),this.instances.set(e,{cleanup:l,goTo:c,next:h,prev:u,getState:()=>({...r})})},goTo:function(e,t){let n=this.instances.get(e);n&&n.goTo(t)},next:function(e){let t=this.instances.get(e);t&&t.next()},prev:function(e){let t=this.instances.get(e);t&&t.prev()},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("flow",p),window.VanduoFlow=p})();(function(){"use strict";let p={instances:new Map,_globalCleanups:[],init:function(){if(document.querySelectorAll("[data-vd-bubble], [data-vd-popover]").forEach(t=>{this.instances.has(t)||this.initInstance(t)}),this._globalCleanups.length===0){let t=s=>{this.instances.forEach((i,a)=>{!i.popover.contains(s.target)&&!a.contains(s.target)&&this.hide(a)})},n=s=>{s.key==="Escape"&&this.instances.forEach((i,a)=>this.hide(a))};document.addEventListener("click",t,!0),document.addEventListener("keydown",n),this._globalCleanups.push(()=>document.removeEventListener("click",t,!0),()=>document.removeEventListener("keydown",n))}},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-bubble-placement")||e.getAttribute("data-vd-popover-placement")||"bottom",s=document.createElement("div");s.className="vd-bubble-content",s.setAttribute("role","dialog"),s.setAttribute("aria-modal","false"),s.setAttribute("data-placement",n);let i=e.getAttribute("data-vd-bubble-title")||e.getAttribute("data-vd-popover-title"),a=e.getAttribute("data-vd-bubble")||e.getAttribute("data-vd-popover")||"",o=e.getAttribute("data-vd-bubble-html")||e.getAttribute("data-vd-popover-html");if(i){let c=document.createElement("div");c.className="vd-bubble-header";let h=document.createElement("span");h.textContent=i;let u=document.createElement("button");u.className="vd-bubble-close",u.setAttribute("aria-label","Close"),u.innerHTML="×",c.appendChild(h),c.appendChild(u),s.appendChild(c);let f=v=>{v.stopPropagation(),this.hide(e)};u.addEventListener("click",f),t.push(()=>u.removeEventListener("click",f))}let r=document.createElement("div");r.className="vd-bubble-body",o?typeof sanitizeHtml=="function"?r.innerHTML=sanitizeHtml(o):r.textContent=o:r.textContent=a,s.appendChild(r),document.body.appendChild(s);let l="vd-bubble-"+Math.random().toString(36).slice(2,9);s.id=l,e.setAttribute("aria-haspopup","dialog"),e.setAttribute("aria-expanded","false"),e.setAttribute("aria-controls",l);let d=c=>{c.stopPropagation(),s.classList.contains("is-visible")?this.hide(e):(this.hideAll(),this.show(e))};e.addEventListener("click",d),t.push(()=>e.removeEventListener("click",d)),this.instances.set(e,{popover:s,cleanup:t,placement:n})},position:function(e,t,n){let s=e.getBoundingClientRect(),i=t.getBoundingClientRect(),a=10,o,r;switch(n){case"top":o=s.top-i.height-a+window.scrollY,r=s.left+(s.width-i.width)/2+window.scrollX;break;case"left":o=s.top+(s.height-i.height)/2+window.scrollY,r=s.left-i.width-a+window.scrollX;break;case"right":o=s.top+(s.height-i.height)/2+window.scrollY,r=s.right+a+window.scrollX;break;default:o=s.bottom+a+window.scrollY,r=s.left+(s.width-i.width)/2+window.scrollX}r=Math.max(8,Math.min(r,window.innerWidth-i.width-8)),o=Math.max(8,o),t.style.top=o+"px",t.style.left=r+"px"},show:function(e){let t=this.instances.get(e);if(!t)return;let{popover:n,placement:s}=t;n.style.display="block",n.classList.add("is-visible"),e.setAttribute("aria-expanded","true"),requestAnimationFrame(()=>{this.position(e,n,s)}),e.dispatchEvent(new CustomEvent("bubble:show",{bubbles:!0}))},hide:function(e){let t=this.instances.get(e);t&&(t.popover.classList.remove("is-visible"),e.setAttribute("aria-expanded","false"),e.dispatchEvent(new CustomEvent("bubble:hide",{bubbles:!0})))},hideAll:function(){this.instances.forEach((e,t)=>this.hide(t))},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),t.popover.parentNode&&t.popover.parentNode.removeChild(t.popover),e.removeAttribute("aria-haspopup"),e.removeAttribute("aria-expanded"),e.removeAttribute("aria-controls"),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t)),this._globalCleanups.forEach(e=>e()),this._globalCleanups=[]}};typeof window.Vanduo<"u"&&window.Vanduo.register("bubble",p),window.VanduoBubble=p})();(function(){"use strict";let p={instances:new Map,init:function(){document.querySelectorAll("[data-vd-waypoint-nav], [data-vd-scrollspy-nav]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=Array.from(e.querySelectorAll('a[href^="#"]'));if(t.length===0)return;let n=[],s=parseInt(e.getAttribute("data-vd-waypoint-offset")||"80",10),i=[];if(t.forEach(d=>{let c=d.getAttribute("href").slice(1),h=document.getElementById(c);h&&(h.setAttribute("data-vd-waypoint-section",""),i.push({id:c,link:d,section:h}))}),i.length===0)return;let a=new Set,o=d=>{t.forEach(h=>h.classList.remove("is-active"));let c=t.find(h=>h.getAttribute("href")==="#"+d);c&&(c.classList.add("is-active"),e.dispatchEvent(new CustomEvent("waypoint:change",{detail:{activeId:d,link:c}})))},r="-"+s+"px 0px -40% 0px",l=new IntersectionObserver(d=>{d.forEach(c=>{c.isIntersecting?a.add(c.target.id):a.delete(c.target.id)});for(let c=0;cl.observe(d.section)),t.forEach(d=>{let c=h=>{h.preventDefault();let u=d.getAttribute("href").slice(1),f=document.getElementById(u);f&&(f.scrollIntoView({behavior:"smooth"}),o(u))};d.addEventListener("click",c),n.push(()=>d.removeEventListener("click",c))}),n.push(()=>l.disconnect()),this.instances.set(e,{observer:l,cleanup:n,sections:i,setActive:o})},refresh:function(e){this.destroy(e),this.initInstance(e)},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("waypoint",p),window.VanduoWaypoint=p})();(function(){"use strict";let p={instances:new Map,init:function(){document.querySelectorAll(".vd-ripple, [data-vd-ripple]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=s=>{let i=e.getBoundingClientRect(),a=Math.max(i.width,i.height),o=(s.clientX||s.touches&&s.touches[0].clientX||i.left+i.width/2)-i.left-a/2,r=(s.clientY||s.touches&&s.touches[0].clientY||i.top+i.height/2)-i.top-a/2,l=document.createElement("span");l.className="vd-ripple-wave",l.style.width=a+"px",l.style.height=a+"px",l.style.left=o+"px",l.style.top=r+"px",e.appendChild(l),l.addEventListener("animationend",()=>{l.parentNode&&l.parentNode.removeChild(l)})};e.addEventListener("mousedown",n),e.addEventListener("touchstart",n,{passive:!0}),t.push(()=>e.removeEventListener("mousedown",n),()=>e.removeEventListener("touchstart",n)),this.instances.set(e,{cleanup:t})},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),e.querySelectorAll(".vd-ripple-wave").forEach(n=>n.remove()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("ripple",p),window.VanduoRipple=p})();(function(){"use strict";function p(n){if(!n||n===document.body)return!1;let s=window.getComputedStyle(n),i=s.overflowY,a=s.overflowX,o=/(auto|scroll|overlay)/.test(i)&&n.scrollHeight>n.clientHeight,r=/(auto|scroll|overlay)/.test(a)&&n.scrollWidth>n.clientWidth;return o||r}function e(n){let s=n.parentElement;for(;s&&s!==document.body&&s!==document.documentElement;){if(p(s))return s;s=s.parentElement}return null}let t={instances:new Map,init:function(){document.querySelectorAll(".vd-affix, .vd-sticky, [data-vd-affix]").forEach(s=>{this.instances.has(s)||this.initInstance(s)})},initInstance:function(n){let s=[],i=parseInt(n.getAttribute("data-vd-affix-offset")||"0",10),a=Number.isNaN(i)?0:i,o=e(n),r=!1,l=document.createElement("div");l.style.cssText="display:block;height:1px;margin-bottom:-1px;visibility:hidden;pointer-events:none;",n.parentNode.insertBefore(l,n),n.style.setProperty("--affix-top-offset",a+"px");function d(){r||(r=!0,n.classList.add("is-stuck"),n.dispatchEvent(new CustomEvent("affix:stuck",{bubbles:!0,detail:{offset:a,root:o||window}})))}function c(){r&&(r=!1,n.classList.remove("is-stuck"),n.dispatchEvent(new CustomEvent("affix:unstuck",{bubbles:!0,detail:{offset:a,root:o||window}})))}let h=new IntersectionObserver(function(u){u.forEach(f=>{f.isIntersecting?c():d()})},{root:o,rootMargin:"-"+a+"px 0px 0px 0px",threshold:0});h.observe(l),s.push(()=>h.disconnect(),()=>{l.parentNode&&l.parentNode.removeChild(l)},()=>{n.classList.remove("is-stuck"),n.style.removeProperty("--affix-top-offset")}),this.instances.set(n,{cleanup:s,observer:h,sentinel:l,scrollParent:o})},destroy:function(n){let s=this.instances.get(n);s&&(s.cleanup.forEach(i=>i()),n.classList.remove("is-stuck"),this.instances.delete(n))},destroyAll:function(){this.instances.forEach((n,s)=>this.destroy(s))}};typeof window.Vanduo<"u"&&window.Vanduo.register("affix",t),window.VanduoAffix=t})();(function(){"use strict";function p(t){let n=document.createElement("div");return n.textContent=t,n.innerHTML}let e={instances:new Map,init:function(){document.querySelectorAll("[data-vd-suggest], [data-vd-autocomplete]").forEach(n=>{this.instances.has(n)||this.initInstance(n)})},initInstance:function(t){let n=[],s=parseInt(t.getAttribute("data-vd-suggest-min-chars")||"1",10),i=t.getAttribute("data-vd-suggest-url")||"",a=t.getAttribute("data-vd-suggest")||t.getAttribute("data-vd-autocomplete")||"",o=[];try{o=JSON.parse(a)}catch{o=a.split(",").map(k=>k.trim()).filter(Boolean)}let r=t.closest(".vd-suggest-wrapper, .vd-autocomplete-wrapper");r||(r=document.createElement("div"),r.className="vd-suggest-wrapper",t.parentNode.insertBefore(r,t),r.appendChild(t));let l=document.createElement("ul");l.className="vd-suggest-list",l.setAttribute("role","listbox");let d="vd-suggest-"+Math.random().toString(36).slice(2,9);l.id=d,r.appendChild(l),t.setAttribute("role","combobox"),t.setAttribute("aria-autocomplete","list"),t.setAttribute("aria-expanded","false"),t.setAttribute("aria-controls",d),t.setAttribute("autocomplete","off");let c=-1,h=[],u=null,f=(g,k)=>{if(l.innerHTML="",h=g,c=-1,g.length===0){let T=document.createElement("li");T.className="vd-suggest-empty",T.textContent="No results",l.appendChild(T);return}g.forEach((T,M)=>{let m=document.createElement("li");m.className="vd-suggest-item",m.setAttribute("role","option"),m.id=d+"-item-"+M;let w=typeof T=="object"&&(T.label||T.text)||String(T);if(k){let E=p(w),I=new RegExp("("+k.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")+")","gi");m.innerHTML=E.replace(I,'$1')}else m.textContent=w;m.addEventListener("click",()=>C(M)),l.appendChild(m)})},v=()=>{l.classList.add("is-open"),t.setAttribute("aria-expanded","true")},y=()=>{l.classList.remove("is-open"),t.setAttribute("aria-expanded","false"),c=-1,t.removeAttribute("aria-activedescendant")},C=g=>{let k=h[g],T=typeof k=="object"&&(k.value||k.label)||String(k);t.value=T,y(),t.dispatchEvent(new CustomEvent("suggest:select",{detail:{value:T,item:k,index:g},bubbles:!0}))},L=g=>{let k=l.querySelectorAll(".vd-suggest-item");k.forEach(T=>T.classList.remove("is-highlighted")),g>=0&&g{if(g.length0,v()},x=()=>{clearTimeout(u),u=setTimeout(()=>P(t.value),200)},_=g=>{if(!l.classList.contains("is-open")){g.key==="ArrowDown"&&(P(t.value),g.preventDefault());return}let k=h.length;switch(g.key){case"ArrowDown":g.preventDefault(),L(c0?c-1:k-1);break;case"Enter":g.preventDefault(),c>=0&&C(c);break;case"Escape":y();break}},V=()=>{setTimeout(y,200)};t.addEventListener("input",x),t.addEventListener("keydown",_),t.addEventListener("blur",V),t.addEventListener("focus",()=>{t.value.length>=s&&P(t.value)}),n.push(()=>t.removeEventListener("input",x),()=>t.removeEventListener("keydown",_),()=>t.removeEventListener("blur",V),()=>clearTimeout(u),()=>{l.parentNode&&l.parentNode.removeChild(l)}),this.instances.set(t,{cleanup:n,list:l,close:y})},destroy:function(t){let n=this.instances.get(t);n&&(n.cleanup.forEach(s=>s()),this.instances.delete(t))},destroyAll:function(){this.instances.forEach((t,n)=>this.destroy(n))}};typeof window.Vanduo<"u"&&window.Vanduo.register("suggest",e),window.VanduoSuggest=e})();(function(){"use strict";let p={instances:new Map,rules:{required:e=>e.trim().length>0,email:e=>/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e),url:e=>{try{return new URL(e),!0}catch{return!1}},number:e=>!isNaN(parseFloat(e))&&isFinite(e),min:(e,t)=>e.length>=parseInt(t,10),max:(e,t)=>e.length<=parseInt(t,10),minVal:(e,t)=>parseFloat(e)>=parseFloat(t),maxVal:(e,t)=>parseFloat(e)<=parseFloat(t),pattern:(e,t)=>{try{return t.length>100?!1:new RegExp(t).test(e)}catch{return!1}},match:(e,t)=>{try{let n=typeof CSS<"u"&&CSS.escape?CSS.escape(t):t,s=document.querySelector('[name="'+n+'"]');return s?e===s.value:!1}catch{return!1}}},messages:{required:"This field is required",email:"Please enter a valid email address",url:"Please enter a valid URL",number:"Please enter a valid number",min:"Minimum {0} characters required",max:"Maximum {0} characters allowed",minVal:"Value must be at least {0}",maxVal:"Value must be at most {0}",pattern:"Invalid format",match:"Fields do not match"},init:function(){document.querySelectorAll("[data-vd-validate], .vd-validate").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-validate-mode")||"blur",s=e.querySelectorAll("[data-vd-rules]"),i=r=>{let d=(r.getAttribute("data-vd-rules")||"").split("|").map(u=>u.trim()).filter(Boolean),c=r.value,h=[];for(let u of d){let[f,...v]=u.split(":"),y=v.join(":"),C=this.rules[f];if(C&&!C(c,y)){let P=r.getAttribute("data-vd-msg-"+f)||this.messages[f]||"Invalid";y&&(P=P.replace("{0}",y)),h.push(P);break}}return this.setFieldState(r,h),h.length===0},a=()=>{let r=!0;return s.forEach(l=>{i(l)||(r=!1)}),r};s.forEach(r=>{if(n==="input"||n==="blur"){let l=n==="input"?"input":"blur",d=()=>i(r);if(r.addEventListener(l,d),t.push(()=>r.removeEventListener(l,d)),n==="blur"){let c=()=>{(r.classList.contains("is-invalid")||r.classList.contains("is-valid"))&&i(r)};r.addEventListener("input",c),t.push(()=>r.removeEventListener("input",c))}}});let o=r=>{let l=a();if(!l){r.preventDefault(),r.stopPropagation();let d=e.querySelector(".is-invalid");d&&d.focus()}e.dispatchEvent(new CustomEvent("validate:submit",{detail:{valid:l},bubbles:!0}))};e.addEventListener("submit",o),t.push(()=>e.removeEventListener("submit",o)),this.instances.set(e,{cleanup:t,validateAll:a,validateField:i})},setFieldState:function(e,t){let n=e.closest(".vd-form-group")||e.parentElement,s=n.querySelector(".vd-validate-error");e.classList.remove("is-valid","is-invalid"),t.length>0?(e.classList.add("is-invalid"),e.setAttribute("aria-invalid","true"),s||(s=document.createElement("div"),s.className="vd-validate-error",s.id="vd-err-"+Math.random().toString(36).slice(2,9),s.setAttribute("role","alert"),n.appendChild(s)),s.textContent=t[0],s.style.display="",e.setAttribute("aria-describedby",s.id)):e.value.trim()?(e.classList.add("is-valid"),e.removeAttribute("aria-invalid"),s&&(s.style.display="none")):(e.removeAttribute("aria-invalid"),s&&(s.style.display="none"))},validateForm:function(e){let t=this.instances.get(e);return t?t.validateAll():!1},addRule:function(e,t,n){this.rules[e]=t,n&&(this.messages[e]=n)},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("validate",p),window.VanduoValidate=p})();(function(){"use strict";let p=["Su","Mo","Tu","We","Th","Fr","Sa"],e=["January","February","March","April","May","June","July","August","September","October","November","December"],t={instances:new Map,init:function(){document.querySelectorAll("[data-vd-datepicker]").forEach(s=>{this.instances.has(s)||this.initInstance(s)})},initInstance:function(n){let s=[],i=n.getAttribute("data-vd-datepicker-format")||"yyyy-mm-dd",a=n.getAttribute("data-vd-datepicker-min"),o=n.getAttribute("data-vd-datepicker-max"),r=a?new Date(a):null,l=o?new Date(o):null,d=new Date,c=d.getFullYear(),h=d.getMonth(),u=null,f="days";if(n.value){let m=new Date(n.value);isNaN(m.getTime())||(u=m,c=m.getFullYear(),h=m.getMonth())}let v=document.createElement("div");v.className="vd-datepicker-popup",v.setAttribute("role","dialog"),v.setAttribute("aria-label","Choose date");let y=document.createElement("div");y.className="vd-suggest-wrapper",y.style.position="relative",y.style.display="inline-block",n.parentNode.insertBefore(y,n),y.appendChild(n),y.appendChild(v);let C=m=>{let w=m.getFullYear(),E=String(m.getMonth()+1).padStart(2,"0"),I=String(m.getDate()).padStart(2,"0");return i.replace("yyyy",w).replace("mm",E).replace("dd",I)},L=m=>!!(r&&ml),P=(m,w)=>m&&w&&m.getFullYear()===w.getFullYear()&&m.getMonth()===w.getMonth()&&m.getDate()===w.getDate(),x=()=>{v.innerHTML="";let m=document.createElement("div");m.className="vd-datepicker-header";let w=document.createElement("button");w.type="button",w.className="vd-datepicker-prev",w.innerHTML="‹",w.setAttribute("aria-label","Previous");let E=document.createElement("button");E.type="button",E.className="vd-datepicker-next",E.innerHTML="›",E.setAttribute("aria-label","Next");let I=document.createElement("span");if(I.className="vd-datepicker-title",f==="days")I.textContent=e[h]+" "+c,I.addEventListener("click",()=>{f="months",x()}),w.addEventListener("click",()=>{h--,h<0&&(h=11,c--),x()}),E.addEventListener("click",()=>{h++,h>11&&(h=0,c++),x()});else if(f==="months")I.textContent=String(c),I.addEventListener("click",()=>{f="years",x()}),w.addEventListener("click",()=>{c--,x()}),E.addEventListener("click",()=>{c++,x()});else{let O=Math.floor(c/10)*10;I.textContent=O+" - "+(O+9),w.addEventListener("click",()=>{c-=10,x()}),E.addEventListener("click",()=>{c+=10,x()})}if(m.appendChild(w),m.appendChild(I),m.appendChild(E),v.appendChild(m),f==="days"){let O=document.createElement("div");O.className="vd-datepicker-weekdays",p.forEach(F=>{let U=document.createElement("span");U.textContent=F,O.appendChild(U)}),v.appendChild(O);let H=document.createElement("div");H.className="vd-datepicker-days";let z=new Date(c,h,1).getDay(),R=new Date(c,h+1,0).getDate(),j=new Date(c,h,0).getDate();for(let F=z-1;F>=0;F--){let U=_(j-F,!0);H.appendChild(U)}for(let F=1;F<=R;F++){let U=new Date(c,h,F),b=_(F,!1,U);H.appendChild(b)}let G=z+R,Z=G%7===0?0:7-G%7;for(let F=1;F<=Z;F++){let U=_(F,!0);H.appendChild(U)}v.appendChild(H)}else if(f==="months"){let O=document.createElement("div");O.className="vd-datepicker-months",e.forEach((H,z)=>{let R=document.createElement("button");R.type="button",R.className="vd-datepicker-month-btn",R.textContent=H.slice(0,3),u&&u.getFullYear()===c&&u.getMonth()===z&&R.classList.add("is-selected"),R.addEventListener("click",()=>{h=z,f="days",x()}),O.appendChild(R)}),v.appendChild(O)}else{let O=document.createElement("div");O.className="vd-datepicker-years";let H=Math.floor(c/10)*10;for(let z=H-1;z<=H+10;z++){let R=document.createElement("button");R.type="button",R.className="vd-datepicker-year-btn",R.textContent=z,u&&u.getFullYear()===z&&R.classList.add("is-selected"),(zH+9)&&(R.style.opacity="0.4"),R.addEventListener("click",()=>{c=z,f="months",x()}),O.appendChild(R)}v.appendChild(O)}},_=(m,w,E)=>{let I=document.createElement("button");return I.type="button",I.className="vd-datepicker-day",I.textContent=m,w?(I.classList.add("is-outside"),I.tabIndex=-1,I):(E&&P(E,d)&&I.classList.add("is-today"),E&&P(E,u)&&I.classList.add("is-selected"),E&&L(E)?(I.classList.add("is-disabled"),I):(E&&I.addEventListener("click",()=>{u=E,c=E.getFullYear(),h=E.getMonth(),n.value=C(E),g(),n.dispatchEvent(new CustomEvent("datepicker:select",{detail:{date:E,formatted:n.value},bubbles:!0})),n.dispatchEvent(new Event("change",{bubbles:!0}))}),I))},V=()=>{x(),v.classList.add("is-open"),n.setAttribute("aria-expanded","true")},g=()=>{v.classList.remove("is-open"),n.setAttribute("aria-expanded","false"),f="days"},k=()=>V(),T=m=>{y.contains(m.target)||g()},M=m=>{m.key==="Escape"&&g()};n.addEventListener("focus",k),document.addEventListener("click",T,!0),document.addEventListener("keydown",M),n.setAttribute("aria-haspopup","dialog"),n.setAttribute("aria-expanded","false"),n.setAttribute("autocomplete","off"),s.push(()=>n.removeEventListener("focus",k),()=>document.removeEventListener("click",T,!0),()=>document.removeEventListener("keydown",M)),this.instances.set(n,{cleanup:s,open:V,close:g,popup:v})},destroy:function(n){let s=this.instances.get(n);s&&(s.cleanup.forEach(i=>i()),this.instances.delete(n))},destroyAll:function(){this.instances.forEach((n,s)=>this.destroy(s))}};typeof window.Vanduo<"u"&&window.Vanduo.register("datepicker",t),window.VanduoDatepicker=t})();(function(){"use strict";let p={instances:new Map,init:function(){document.querySelectorAll("[data-vd-timepicker]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-timepicker-format")==="24h",s=parseInt(e.getAttribute("data-vd-timepicker-step")||"30",10),i=e.closest(".vd-suggest-wrapper");i||(i=document.createElement("div"),i.style.position="relative",i.style.display="inline-block",e.parentNode.insertBefore(i,e),i.appendChild(e));let a=document.createElement("div");a.className="vd-timepicker-popup",a.setAttribute("role","listbox"),i.appendChild(a);let o=[];for(let f=0;f<24;f++)for(let v=0;v<60;v+=s){let y=String(f).padStart(2,"0"),C=String(v).padStart(2,"0");if(n)o.push({display:y+":"+C,value:y+":"+C});else{let L=f<12?"AM":"PM",x=(f===0?12:f>12?f-12:f)+":"+C+" "+L;o.push({display:x,value:y+":"+C})}}let r=()=>{a.innerHTML="",o.forEach(f=>{let v=document.createElement("div");v.className="vd-timepicker-item",v.setAttribute("role","option"),v.textContent=f.display,(e.value===f.value||e.value===f.display)&&v.classList.add("is-selected"),v.addEventListener("click",()=>{e.value=f.display,a.querySelectorAll(".vd-timepicker-item").forEach(y=>y.classList.remove("is-selected")),v.classList.add("is-selected"),d(),e.dispatchEvent(new CustomEvent("timepicker:select",{detail:{display:f.display,value:f.value},bubbles:!0})),e.dispatchEvent(new Event("change",{bubbles:!0}))}),a.appendChild(v)})},l=()=>{r(),a.classList.add("is-open"),e.setAttribute("aria-expanded","true");let f=a.querySelector(".is-selected");f&&f.scrollIntoView({block:"center"})},d=()=>{a.classList.remove("is-open"),e.setAttribute("aria-expanded","false")},c=()=>l(),h=f=>{i.contains(f.target)||d()},u=f=>{f.key==="Escape"&&d()};e.addEventListener("focus",c),document.addEventListener("click",h,!0),document.addEventListener("keydown",u),e.setAttribute("aria-haspopup","listbox"),e.setAttribute("aria-expanded","false"),e.setAttribute("autocomplete","off"),e.readOnly=!0,t.push(()=>e.removeEventListener("focus",c),()=>document.removeEventListener("click",h,!0),()=>document.removeEventListener("keydown",u)),this.instances.set(e,{cleanup:t,open:l,close:d})},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("timepicker",p),window.VanduoTimepicker=p})();(function(){"use strict";let p={instances:new Map,init:function(){document.querySelectorAll(".vd-stepper").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=Array.from(e.querySelectorAll(".vd-stepper-item")),s=e.classList.contains("vd-stepper-clickable"),i=n.findIndex(o=>o.classList.contains("is-active"));i===-1&&(i=0);let a=o=>{if(o<0||o>=n.length)return;let r=i;i=o,n.forEach((l,d)=>{l.classList.remove("is-active","is-completed"),d{let l=()=>a(r);o.addEventListener("click",l),t.push(()=>o.removeEventListener("click",l))}),a(i),this.instances.set(e,{cleanup:t,setStep:a,next:()=>a(i+1),prev:()=>a(i-1),getCurrent:()=>i})},setStep:function(e,t){let n=this.instances.get(e);n&&n.setStep(t)},next:function(e){let t=this.instances.get(e);t&&t.next()},prev:function(e){let t=this.instances.get(e);t&&t.prev()},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("stepper",p),window.VanduoStepper=p})();(function(){"use strict";let p={instances:new Map,init:function(){document.querySelectorAll("[data-vd-rating]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=parseInt(e.getAttribute("data-vd-rating-max")||"5",10),s=parseFloat(e.getAttribute("data-vd-rating-value")||"0"),i=e.classList.contains("vd-rating-readonly")||e.hasAttribute("data-vd-rating-readonly"),a=s;e.classList.add("vd-rating"),e.setAttribute("role","radiogroup"),e.setAttribute("aria-label",e.getAttribute("aria-label")||"Rating"),e.innerHTML="";let o=[];for(let d=1;d<=n;d++){let c=document.createElement("button");c.type="button",c.className="vd-rating-star",c.setAttribute("role","radio"),c.setAttribute("aria-label",d+" star"+(d>1?"s":"")),c.setAttribute("aria-checked",d<=a?"true":"false"),i&&(c.tabIndex=-1),o.push(c),e.appendChild(c)}let r=document.createElement("span");r.className="vd-rating-value",r.textContent=a>0?a.toString():"",e.appendChild(r);let l=d=>{o.forEach((c,h)=>{c.classList.remove("is-active","is-half");let u=h+1;u<=Math.floor(d)?c.classList.add("is-active"):u-.5<=d&&c.classList.add("is-half"),c.setAttribute("aria-checked",u<=d?"true":"false")}),r.textContent=d>0?d.toString():""};if(l(a),!i){o.forEach((c,h)=>{let u=()=>{o.forEach((y,C)=>{y.classList.toggle("is-hovered",C<=h)})},f=()=>{o.forEach(y=>y.classList.remove("is-hovered"))},v=()=>{a=h+1,e.setAttribute("data-vd-rating-value",a),l(a),e.dispatchEvent(new CustomEvent("rating:change",{detail:{value:a,max:n},bubbles:!0}))};c.addEventListener("mouseenter",u),c.addEventListener("mouseleave",f),c.addEventListener("click",v),t.push(()=>c.removeEventListener("mouseenter",u),()=>c.removeEventListener("mouseleave",f),()=>c.removeEventListener("click",v))});let d=c=>{c.key==="ArrowRight"||c.key==="ArrowUp"?(c.preventDefault(),a1&&(a--,l(a),o[a-1].focus(),e.dispatchEvent(new CustomEvent("rating:change",{detail:{value:a,max:n},bubbles:!0}))))};e.addEventListener("keydown",d),t.push(()=>e.removeEventListener("keydown",d))}this.instances.set(e,{cleanup:t,getValue:()=>a,setValue:d=>{a=d,l(d)}})},getValue:function(e){let t=this.instances.get(e);return t?t.getValue():0},setValue:function(e,t){let n=this.instances.get(e);n&&n.setValue(t)},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("rating",p),window.VanduoRating=p})();(function(){"use strict";let p={instances:new Map,init:function(){document.querySelectorAll("[data-vd-transfer]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[];e.classList.add("vd-transfer");let n,s;try{n=JSON.parse(e.getAttribute("data-vd-transfer")||"[]").map((u,f)=>({id:u.id||"item-"+f,label:u.label||u.text||String(u),selected:!1}))}catch{n=[]}s=[];let i=new Set,a=new Set,o=()=>{e.innerHTML="";let h=r("Source",n,i,"source"),u=document.createElement("div");u.className="vd-transfer-actions";let f=document.createElement("button");f.type="button",f.className="vd-transfer-btn",f.innerHTML="›",f.setAttribute("aria-label","Move to target"),f.disabled=i.size===0,f.addEventListener("click",()=>l());let v=document.createElement("button");v.type="button",v.className="vd-transfer-btn",v.innerHTML="‹",v.setAttribute("aria-label","Move to source"),v.disabled=a.size===0,v.addEventListener("click",()=>d()),u.appendChild(f),u.appendChild(v);let y=r("Target",s,a,"target");e.appendChild(h),e.appendChild(u),e.appendChild(y)},r=(h,u,f,v)=>{let y=document.createElement("div");y.className="vd-transfer-panel";let C=document.createElement("div");C.className="vd-transfer-header";let L=document.createElement("span");L.textContent=h;let P=document.createElement("span");P.className="vd-transfer-count",P.textContent=f.size+"/"+u.length,C.appendChild(L),C.appendChild(P),y.appendChild(C);let x=document.createElement("div");x.className="vd-transfer-search";let _=document.createElement("input");_.type="text",_.placeholder="Search...",_.setAttribute("aria-label","Search "+h.toLowerCase()),x.appendChild(_),y.appendChild(x);let V=document.createElement("ul");V.className="vd-transfer-list",V.setAttribute("role","listbox");let g=k=>{V.innerHTML="",(k?u.filter(M=>(M.label||M.text||String(M)).toLowerCase().includes(k.toLowerCase())):u).forEach(M=>{let m=document.createElement("li");m.className="vd-transfer-item",m.setAttribute("role","option"),f.has(M.id)&&m.classList.add("is-selected");let w=document.createElement("input");w.type="checkbox",w.checked=f.has(M.id),w.setAttribute("aria-label",M.label);let E=document.createElement("span");E.textContent=M.label,m.addEventListener("click",()=>{f.has(M.id)?f.delete(M.id):f.add(M.id),o()}),m.appendChild(w),m.appendChild(E),V.appendChild(m)})};return _.addEventListener("input",()=>g(_.value)),g(""),y.appendChild(V),y},l=()=>{let h=n.filter(u=>i.has(u.id));n=n.filter(u=>!i.has(u.id)),s=s.concat(h),i.clear(),o(),c()},d=()=>{let h=s.filter(u=>a.has(u.id));s=s.filter(u=>!a.has(u.id)),n=n.concat(h),a.clear(),o(),c()},c=()=>{e.dispatchEvent(new CustomEvent("transfer:change",{detail:{source:n.map(h=>h.id),target:s.map(h=>h.id)},bubbles:!0}))};o(),this.instances.set(e,{cleanup:t,getTarget:()=>s.map(h=>h.id),getSource:()=>n.map(h=>h.id)})},getSelected:function(e){let t=this.instances.get(e);return t?t.getTarget():[]},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),e.innerHTML="",this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("transfer",p),window.VanduoTransfer=p})();(function(){"use strict";let p={instances:new Map,init:function(){document.querySelectorAll("[data-vd-tree]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-tree-cascade")!=="false",s;try{s=JSON.parse(e.getAttribute("data-vd-tree")||"[]")}catch{s=[]}e.classList.add("vd-tree"),e.setAttribute("role","tree");let i=(r,l)=>{l.innerHTML="",r.forEach(d=>{let c=document.createElement("li");c.className="vd-tree-node",c.setAttribute("role","treeitem"),c.setAttribute("aria-expanded",d.open?"true":"false"),d.open&&c.classList.add("is-open");let h=document.createElement("div");if(h.className="vd-tree-node-content",d.children&&d.children.length>0){let f=document.createElement("button");f.type="button",f.className="vd-tree-toggle",f.setAttribute("aria-label","Toggle"),f.addEventListener("click",v=>{v.stopPropagation(),d.open=!d.open,c.classList.toggle("is-open"),c.setAttribute("aria-expanded",d.open?"true":"false")}),h.appendChild(f)}else{let f=document.createElement("span");f.className="vd-tree-toggle-placeholder",h.appendChild(f)}if(e.hasAttribute("data-vd-tree-checkbox")){let f=document.createElement("input");f.type="checkbox",f.className="vd-tree-checkbox",f.checked=!!d.checked,f.setAttribute("aria-label",d.label),f.addEventListener("change",v=>{v.stopPropagation(),d.checked=f.checked,n&&d.children&&(a(d.children,f.checked),i(s,e)),e.dispatchEvent(new CustomEvent("tree:check",{detail:{id:d.id,checked:f.checked,label:d.label},bubbles:!0}))}),h.appendChild(f)}if(d.icon){let f=document.createElement("span");f.className="vd-tree-icon "+d.icon,h.appendChild(f)}let u=document.createElement("span");if(u.className="vd-tree-label",u.textContent=d.label||"",h.appendChild(u),c.appendChild(h),d.children&&d.children.length>0){let f=document.createElement("ul");f.className="vd-tree-children",f.setAttribute("role","group"),i(d.children,f),c.appendChild(f)}l.appendChild(c)})},a=(r,l)=>{r.forEach(d=>{d.checked=l,d.children&&a(d.children,l)})},o=r=>{let l=document.activeElement;if(!e.contains(l))return;let d=Array.from(e.querySelectorAll(".vd-tree-node-content")),c=d.indexOf(l.closest(".vd-tree-node-content"));if(c!==-1)switch(r.key){case"ArrowDown":if(r.preventDefault(),c0){let h=d[c-1].querySelector(".vd-tree-toggle, .vd-tree-label");h&&h.focus()}break}};e.addEventListener("keydown",o),t.push(()=>e.removeEventListener("keydown",o)),i(s,e),this.instances.set(e,{cleanup:t,getData:()=>s,getChecked:()=>{let r=[],l=d=>{d.forEach(c=>{c.checked&&r.push(c.id||c.label),c.children&&l(c.children)})};return l(s),r}})},getChecked:function(e){let t=this.instances.get(e);return t?t.getChecked():[]},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),e.innerHTML="",this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("tree",p),window.VanduoTree=p})();(function(){"use strict";let p={_active:!1,_steps:[],_currentStep:0,_elements:{},_cleanup:[],_boundTriggers:new WeakMap,_triggerElement:null,init:function(){document.querySelectorAll("[data-vd-spotlight]").forEach(t=>{if(this._boundTriggers.has(t))return;let n=s=>{s.preventDefault();let i=this._parseSteps(t.getAttribute("data-vd-spotlight"));i.length!==0&&this.start(i,{trigger:t})};t.addEventListener("click",n),this._boundTriggers.set(t,n)})},_parseSteps:function(e){if(typeof e!="string"||e.trim()==="")return[];try{let t=JSON.parse(e);return this._normalizeSteps(t)}catch(t){return console.error("VanduoSpotlight: invalid data-vd-spotlight payload.",t),[]}},_normalizeStep:function(e){if(!e||typeof e!="object")return null;let t=e.target,n=typeof t=="string"&&t.trim()!=="",s=typeof Element<"u"&&t instanceof Element;if(!n&&!s)return null;let i=typeof e.title=="string"?e.title:"",a=typeof e.description=="string"?e.description:typeof e.content=="string"?e.content:"";return{target:t,title:i,description:a}},_normalizeSteps:function(e){return Array.isArray(e)?e.map(t=>this._normalizeStep(t)).filter(Boolean):[]},start:function(e,t){this._active&&this.stop();let n=this._normalizeSteps(e);if(n.length===0)return;let s=t||{};this._steps=n,this._currentStep=0,this._active=!0,this._triggerElement=s.trigger||(document.activeElement instanceof HTMLElement?document.activeElement:null);let i=document.createElement("div");i.className="vd-spotlight-overlay",i.setAttribute("aria-hidden","true"),document.body.appendChild(i);let a=document.createElement("div");a.className="vd-spotlight-tooltip",a.setAttribute("role","dialog"),a.setAttribute("aria-modal","true"),a.tabIndex=-1,document.body.appendChild(a),this._elements={overlay:i,tooltip:a};let o=r=>{r.key==="Escape"&&this.stop()};document.addEventListener("keydown",o),this._cleanup.push(()=>document.removeEventListener("keydown",o)),i.addEventListener("click",()=>this.stop()),this._showStep(this._currentStep)},_showStep:function(e){let t=this._steps[e];if(!t)return;let n=typeof t.target=="string"?document.querySelector(t.target):t.target,{tooltip:s}=this._elements;document.querySelectorAll(".vd-spotlight-target").forEach(d=>{d.classList.remove("vd-spotlight-target")}),n&&(n.classList.add("vd-spotlight-target"),n.scrollIntoView({behavior:"smooth",block:"center"}));let i=this._steps.length;if(s.innerHTML="",s.removeAttribute("aria-labelledby"),s.removeAttribute("aria-describedby"),t.title){let d=document.createElement("h4");d.className="vd-spotlight-title",d.id="vd-spotlight-title-"+e+"-"+Date.now(),d.textContent=t.title,s.appendChild(d),s.setAttribute("aria-labelledby",d.id)}if(t.description){let d=document.createElement("p");d.className="vd-spotlight-description",d.id="vd-spotlight-description-"+e+"-"+Date.now(),d.textContent=t.description,s.appendChild(d),s.setAttribute("aria-describedby",d.id)}let a=document.createElement("div");a.className="vd-spotlight-footer",a.setAttribute("aria-label","Step "+(e+1)+" of "+i);let o=document.createElement("span");o.className="vd-spotlight-counter",o.textContent=e+1+" / "+i;let r=document.createElement("div");if(r.className="vd-spotlight-actions",e>0){let d=document.createElement("button");d.type="button",d.className="vd-spotlight-btn",d.textContent="Back",d.addEventListener("click",()=>this.prev()),r.appendChild(d)}let l=document.createElement("button");if(l.type="button",l.className="vd-spotlight-btn",l.textContent="Skip",l.addEventListener("click",()=>this.stop()),r.appendChild(l),ethis.next()),r.appendChild(d)}else{let d=document.createElement("button");d.type="button",d.className="vd-spotlight-btn vd-spotlight-btn-primary",d.textContent="Done",d.addEventListener("click",()=>this.stop()),r.appendChild(d)}a.appendChild(o),a.appendChild(r),s.appendChild(a),n&&requestAnimationFrame(()=>{let d=n.getBoundingClientRect(),c=s.getBoundingClientRect(),h=d.bottom+12+window.scrollY,u=d.left+(d.width-c.width)/2+window.scrollX;u=Math.max(8,Math.min(u,window.innerWidth-c.width-8)),h+c.height>window.innerHeight+window.scrollY&&(h=d.top-c.height-12+window.scrollY),s.style.top=h+"px",s.style.left=u+"px"}),document.dispatchEvent(new CustomEvent("spotlight:step",{detail:{index:e,step:e,total:i,data:t}}))},next:function(){this._currentStep0&&(this._currentStep--,this._showStep(this._currentStep))},stop:function(){if(!this._active)return;let e=this._steps.length,t={completedSteps:e===0?0:Math.min(this._currentStep+1,e),total:e,completed:e>0&&this._currentStep>=e-1};this._active=!1,document.querySelectorAll(".vd-spotlight-target").forEach(n=>{n.classList.remove("vd-spotlight-target")}),this._elements.overlay&&this._elements.overlay.parentNode&&this._elements.overlay.parentNode.removeChild(this._elements.overlay),this._elements.tooltip&&this._elements.tooltip.parentNode&&this._elements.tooltip.parentNode.removeChild(this._elements.tooltip),this._cleanup.forEach(n=>n()),this._cleanup=[],this._elements={},this._steps=[],this._currentStep=0,this._triggerElement&&this._triggerElement.isConnected&&typeof this._triggerElement.focus=="function"&&this._triggerElement.focus(),this._triggerElement=null,document.dispatchEvent(new CustomEvent("spotlight:end",{detail:t}))},destroyAll:function(){this.stop()}};typeof window.Vanduo<"u"&&window.Vanduo.register("spotlight",p),window.VanduoSpotlight=p})();(function(){"use strict";function p(i){let a=i.slice();for(let o=a.length-1;o>0;o--){let r=Math.floor(Math.random()*(o+1)),l=a[o];a[o]=a[r],a[r]=l}return a}function e(i){if(!isFinite(i)||i<0)return"0:00";let a=Math.floor(i/60),o=Math.floor(i%60);return a+":"+(o<10?"0":"")+o}function t(i){let a=parseFloat(i.min)||0,o=parseFloat(i.max)||1,l=((parseFloat(i.value)||0)-a)/(o-a)*100;i.style.setProperty("--fill",l+"%"),i.style.backgroundImage="linear-gradient(to right, var(--music-player-track-fill, currentColor) 0%, var(--music-player-track-fill, currentColor) "+l+"%, var(--music-player-track-bg, #ccc) "+l+"%, var(--music-player-track-bg, #ccc) 100%)"}function n(i){let a=document.createElement("i");return a.className="ph ph-"+i,a.setAttribute("aria-hidden","true"),a}let s={instances:new Map,defaults:{tracks:[],volume:.5,shuffle:!1,showProgress:!1,showPlaylist:!1,autoAdvance:!0},init:function(){document.querySelectorAll(".vd-music-player, [data-music-player]").forEach(i=>{if(this.instances.has(i))return;let a={},o=i.getAttribute("data-music-player-options");if(o)try{a=JSON.parse(o)}catch{}this.initPlayer(i,a)})},initPlayer:function(i,a){let o=Object.assign({},this.defaults,a||{}),l=(Array.isArray(o.tracks)?o.tracks:[]).filter(m=>m&&typeof m.url=="string"&&m.url.trim()),c={tracks:o.shuffle?p(l):l.slice(),originalTracks:l.slice(),currentIndex:0,isPlaying:!1,volume:Math.max(0,Math.min(1,o.volume)),shuffle:o.shuffle,showProgress:o.showProgress,showPlaylist:o.showPlaylist,autoAdvance:o.autoAdvance,audio:null},h=new Audio;h.volume=c.volume,h.preload="metadata",c.audio=h,this._buildDOM(i,c);let u={btnPlay:i.querySelector(".vd-music-player-btn-play"),btnPrev:i.querySelector(".vd-music-player-btn-prev"),btnNext:i.querySelector(".vd-music-player-btn-next"),btnShuffle:i.querySelector(".vd-music-player-btn-shuffle"),btnPlaylist:i.querySelector(".vd-music-player-btn-playlist"),trackName:i.querySelector(".vd-music-player-track-name"),volumeSlider:i.querySelector(".vd-music-player-volume-slider"),volumeIcon:i.querySelector(".vd-music-player-volume-icon"),progressBar:i.querySelector(".vd-music-player-progress-bar"),timeElapsed:i.querySelector(".vd-music-player-time-elapsed"),timeDuration:i.querySelector(".vd-music-player-time-duration"),playlistPanel:i.querySelector(".vd-music-player-playlist")},f=()=>{let m=u.btnPlay;m&&(m.innerHTML="",m.appendChild(n(c.isPlaying?"pause":"play")),m.setAttribute("aria-label",c.isPlaying?"Pause":"Play"),m.classList.toggle("is-active",c.isPlaying))},v=()=>{let m=u.trackName;if(!m)return;let w=c.tracks[c.currentIndex];w?(m.textContent=w.name||"Unknown Track",m.classList.remove("is-idle")):(m.textContent="No tracks loaded",m.classList.add("is-idle"))},y=()=>{let m=u.volumeIcon;if(!m)return;m.innerHTML="";let w=c.volume,E=w===0?"speaker-none":w<.5?"speaker-low":"speaker-high";m.appendChild(n(E))},C=()=>{let m=u.btnShuffle;m&&(m.classList.toggle("is-active",c.shuffle),m.setAttribute("aria-pressed",c.shuffle?"true":"false"))},L=()=>{let m=u.playlistPanel;m&&(m.innerHTML="",c.tracks.forEach((w,E)=>{let I=document.createElement("button");I.className="vd-music-player-playlist-item"+(E===c.currentIndex?" is-active":""),I.type="button",I.setAttribute("data-index",String(E)),I.setAttribute("aria-current",E===c.currentIndex?"true":"false");let O=document.createElement("span");O.className="vd-music-player-playlist-num",O.textContent=String(E+1);let H=document.createElement("span");H.className="vd-music-player-playlist-name",H.textContent=w.name||"Track "+(E+1),I.appendChild(O),I.appendChild(H),m.appendChild(I)}))},P=()=>{let m=u.progressBar;if(!m||!h.duration)return;let w=h.currentTime/h.duration*100;m.value=String(w),t(m),u.timeElapsed&&(u.timeElapsed.textContent=e(h.currentTime)),u.timeDuration&&(u.timeDuration.textContent=e(h.duration))},x=(m,w)=>{let E=c.tracks[m];E&&(c.currentIndex=m,h.src=E.url,v(),L(),u.progressBar&&(u.progressBar.value="0",t(u.progressBar)),u.timeElapsed&&(u.timeElapsed.textContent="0:00"),u.timeDuration&&(u.timeDuration.textContent="0:00"),i.dispatchEvent(new CustomEvent("musicplayer:trackchange",{bubbles:!0,detail:{index:m,name:E.name,url:E.url}})),w&&h.play().catch(()=>{}))},_=[],V=()=>{c.isPlaying=!0,f(),i.dispatchEvent(new CustomEvent("musicplayer:play",{bubbles:!0}))},g=()=>{c.isPlaying=!1,f(),i.dispatchEvent(new CustomEvent("musicplayer:pause",{bubbles:!0}))},k=()=>{if(c.autoAdvance&&c.tracks.length>1){let m=(c.currentIndex+1)%c.tracks.length;x(m,!0)}else c.isPlaying=!1,f(),i.dispatchEvent(new CustomEvent("musicplayer:ended",{bubbles:!0}))},T=()=>{c.showProgress&&P()},M=()=>{u.timeDuration&&(u.timeDuration.textContent=e(h.duration)),u.progressBar&&(u.progressBar.max="100",t(u.progressBar))};if(h.addEventListener("play",V),h.addEventListener("pause",g),h.addEventListener("ended",k),h.addEventListener("timeupdate",T),h.addEventListener("loadedmetadata",M),_.push(()=>{h.removeEventListener("play",V),h.removeEventListener("pause",g),h.removeEventListener("ended",k),h.removeEventListener("timeupdate",T),h.removeEventListener("loadedmetadata",M),h.pause(),h.src=""}),u.btnPlay){let m=()=>{!h.src&&c.tracks.length&&x(c.currentIndex,!1),c.isPlaying?h.pause():h.play().catch(()=>{})};u.btnPlay.addEventListener("click",m),_.push(()=>u.btnPlay.removeEventListener("click",m));let w=E=>{(E.key===" "||E.key==="Enter")&&(E.preventDefault(),m())};u.btnPlay.addEventListener("keydown",w),_.push(()=>u.btnPlay.removeEventListener("keydown",w))}if(u.btnPrev){let m=()=>{if(c.tracks.length)if(h.currentTime>3)h.currentTime=0;else{let w=c.currentIndex===0?c.tracks.length-1:c.currentIndex-1;x(w,c.isPlaying)}};u.btnPrev.addEventListener("click",m),_.push(()=>u.btnPrev.removeEventListener("click",m))}if(u.btnNext){let m=()=>{if(!c.tracks.length)return;let w=(c.currentIndex+1)%c.tracks.length;x(w,c.isPlaying)};u.btnNext.addEventListener("click",m),_.push(()=>u.btnNext.removeEventListener("click",m))}if(u.btnShuffle){let m=()=>{if(c.shuffle=!c.shuffle,c.shuffle){let w=c.tracks[c.currentIndex];c.tracks=p(c.tracks);let E=c.tracks.findIndex(I=>I===w);E>0&&(c.tracks.splice(E,1),c.tracks.unshift(w)),c.currentIndex=0}else{let w=c.tracks[c.currentIndex];c.tracks=c.originalTracks.slice(),c.currentIndex=c.tracks.findIndex(E=>E===w),c.currentIndex<0&&(c.currentIndex=0)}C(),L()};u.btnShuffle.addEventListener("click",m),_.push(()=>u.btnShuffle.removeEventListener("click",m))}if(u.btnPlaylist){let m=()=>{let w=u.playlistPanel;if(!w)return;let E=w.classList.toggle("is-open");u.btnPlaylist.classList.toggle("is-active",E),u.btnPlaylist.setAttribute("aria-expanded",E?"true":"false")};u.btnPlaylist.addEventListener("click",m),_.push(()=>u.btnPlaylist.removeEventListener("click",m))}if(u.volumeSlider){let m=w=>{let E=parseFloat(w.target.value);c.volume=E,h.volume=E,y(),t(u.volumeSlider),i.dispatchEvent(new CustomEvent("musicplayer:volumechange",{bubbles:!0,detail:{volume:E}}))};u.volumeSlider.addEventListener("input",m),_.push(()=>u.volumeSlider.removeEventListener("input",m)),t(u.volumeSlider)}if(u.progressBar){let m=w=>{if(!h.duration)return;let E=parseFloat(w.target.value);h.currentTime=E/100*h.duration,t(u.progressBar)};u.progressBar.addEventListener("input",m),_.push(()=>u.progressBar.removeEventListener("input",m))}if(u.playlistPanel){let m=w=>{let E=w.target.closest(".vd-music-player-playlist-item");if(!E)return;let I=parseInt(E.getAttribute("data-index"),10);isNaN(I)||x(I,!0)};u.playlistPanel.addEventListener("click",m),_.push(()=>u.playlistPanel.removeEventListener("click",m))}f(),v(),y(),o.showPlaylist&&L(),this.instances.set(i,{state:c,audio:h,refs:u,cleanup:_}),i.setAttribute("data-music-player-initialized","true")},_buildDOM:function(i,a){if(i.querySelector(".vd-music-player-controls"))return;i.setAttribute("role","region"),i.setAttribute("aria-label","Music Player"),a.showProgress&&i.classList.add("has-progress"),a.showPlaylist&&i.classList.add("has-playlist");let o=document.createElement("div");o.className="vd-music-player-info";let r=document.createElement("span");r.className="vd-music-player-icon",r.setAttribute("aria-hidden","true"),r.appendChild(n("music-note"));let l=document.createElement("span");l.className="vd-music-player-track-name",l.setAttribute("aria-live","polite"),l.setAttribute("aria-atomic","true"),o.appendChild(r),o.appendChild(l),i.appendChild(o);let d=document.createElement("div");d.className="vd-music-player-controls",d.setAttribute("role","group"),d.setAttribute("aria-label","Playback controls");let c=document.createElement("button");c.type="button",c.className="vd-music-player-btn vd-music-player-btn-prev",c.setAttribute("aria-label","Previous track"),c.appendChild(n("skip-back"));let h=document.createElement("button");h.type="button",h.className="vd-music-player-btn vd-music-player-btn-play",h.setAttribute("aria-label","Play"),h.appendChild(n("play"));let u=document.createElement("button");if(u.type="button",u.className="vd-music-player-btn vd-music-player-btn-next",u.setAttribute("aria-label","Next track"),u.appendChild(n("skip-forward")),d.appendChild(c),d.appendChild(h),d.appendChild(u),a.showPlaylist||a.shuffle!==void 0){let L=document.createElement("button");L.type="button",L.className="vd-music-player-btn vd-music-player-btn-shuffle",L.setAttribute("aria-label","Shuffle"),L.setAttribute("aria-pressed",a.shuffle?"true":"false"),L.appendChild(n("shuffle")),d.appendChild(L)}let f=document.createElement("span");f.className="vd-music-player-spacer",f.setAttribute("aria-hidden","true"),d.appendChild(f);let v=document.createElement("div");v.className="vd-music-player-volume";let y=document.createElement("span");y.className="vd-music-player-volume-icon",y.setAttribute("aria-hidden","true");let C=document.createElement("input");if(C.type="range",C.className="vd-music-player-volume-slider",C.min="0",C.max="1",C.step="0.01",C.value=String(a.volume),C.setAttribute("aria-label","Volume"),v.appendChild(y),v.appendChild(C),d.appendChild(v),a.showPlaylist){let L=document.createElement("button");L.type="button",L.className="vd-music-player-btn vd-music-player-btn-playlist",L.setAttribute("aria-label","Show playlist"),L.setAttribute("aria-expanded","false"),L.appendChild(n("playlist")),d.appendChild(L)}if(i.appendChild(d),a.showProgress){let L=document.createElement("div");L.className="vd-music-player-progress";let P=document.createElement("span");P.className="vd-music-player-time vd-music-player-time-elapsed",P.textContent="0:00",P.setAttribute("aria-hidden","true");let x=document.createElement("input");x.type="range",x.className="vd-music-player-progress-bar",x.min="0",x.max="100",x.step="0.1",x.value="0",x.setAttribute("aria-label","Seek");let _=document.createElement("span");_.className="vd-music-player-time vd-music-player-time-duration",_.textContent="0:00",_.setAttribute("aria-hidden","true"),L.appendChild(P),L.appendChild(x),L.appendChild(_),i.appendChild(L)}if(a.showPlaylist){let L=document.createElement("div");L.className="vd-music-player-playlist",L.setAttribute("aria-label","Playlist"),i.appendChild(L)}},play:function(i){let a=this.instances.get(i);a&&(!a.audio.src&&a.state.tracks.length&&(a.audio.src=a.state.tracks[a.state.currentIndex].url),a.audio.play().catch(()=>{}))},pause:function(i){let a=this.instances.get(i);a&&a.audio.pause()},toggle:function(i){let a=this.instances.get(i);a&&(a.state.isPlaying?this.pause(i):this.play(i))},next:function(i){let a=this.instances.get(i);if(!a||!a.state.tracks.length)return;let o=(a.state.currentIndex+1)%a.state.tracks.length;this._loadTrack(a,o,a.state.isPlaying)},previous:function(i){let a=this.instances.get(i);if(!a||!a.state.tracks.length)return;let o=a.state.tracks.length,r=(a.state.currentIndex-1+o)%o;this._loadTrack(a,r,a.state.isPlaying)},setVolume:function(i,a){let o=this.instances.get(i);if(!o)return;let r=Math.max(0,Math.min(1,a));o.state.volume=r,o.audio.volume=r,o.refs.volumeSlider&&(o.refs.volumeSlider.value=String(r),t(o.refs.volumeSlider)),i.dispatchEvent(new CustomEvent("musicplayer:volumechange",{bubbles:!0,detail:{volume:r}}))},setTrack:function(i,a){let o=this.instances.get(i);o&&this._loadTrack(o,a,o.state.isPlaying)},shuffle:function(i){let a=this.instances.get(i);!a||!a.refs.btnShuffle||a.refs.btnShuffle.click()},getState:function(i){let a=this.instances.get(i);if(!a)return null;let o=a.state;return{isPlaying:o.isPlaying,currentIndex:o.currentIndex,currentTrack:o.tracks[o.currentIndex]||null,volume:o.volume,shuffle:o.shuffle,tracks:o.tracks.slice()}},destroy:function(i){let a=this.instances.get(i);a&&(a.cleanup.forEach(o=>o()),this.instances.delete(i),i.removeAttribute("data-music-player-initialized"))},destroyAll:function(){this.instances.forEach((i,a)=>this.destroy(a))},_loadTrack:function(i,a,o){let r=i.state.tracks[a];if(!r)return;let l=this._containerOf(i);i.state.currentIndex=a,i.audio.src=r.url,i.refs.trackName&&(i.refs.trackName.textContent=r.name||"Unknown Track",i.refs.trackName.classList.remove("is-idle")),i.refs.playlistPanel&&i.refs.playlistPanel.querySelectorAll(".vd-music-player-playlist-item").forEach((d,c)=>{let h=c===a;d.classList.toggle("is-active",h),d.setAttribute("aria-current",h?"true":"false")}),i.refs.progressBar&&(i.refs.progressBar.value="0",t(i.refs.progressBar)),i.refs.timeElapsed&&(i.refs.timeElapsed.textContent="0:00"),i.refs.timeDuration&&(i.refs.timeDuration.textContent="0:00"),l&&l.dispatchEvent(new CustomEvent("musicplayer:trackchange",{bubbles:!0,detail:{index:a,name:r.name,url:r.url}})),o&&i.audio.play().catch(()=>{})},_containerOf:function(i){for(let[a,o]of this.instances)if(o===i)return a;return null}};typeof window.Vanduo<"u"&&window.Vanduo.register("musicPlayer",s),window.VanduoMusicPlayer=s})();var Q=window.Vanduo;var oe=Q; + `},isUsingDefaultPrimary:function(){return this.state.primary===this.DEFAULTS.PRIMARY_LIGHT||this.state.primary===this.DEFAULTS.PRIMARY_DARK},_normalizeDefaultPrimaryIfStaleWithStoredTheme:function(){if(!this.isUsingDefaultPrimary())return;let e=this.getDefaultPrimary(this.state.theme);this.state.primary!==e&&(this.state.primary=e)},bindEvents:function(){if(this.elements.trigger&&this.addListener(this.elements.trigger,"click",e=>{e.preventDefault(),e.stopPropagation(),this.toggle()}),this.bindPanelEvents(),window.matchMedia){let e=window.matchMedia("(prefers-color-scheme: dark)"),t=()=>{if(this.state.theme==="system"&&this.isUsingDefaultPrimary()){let n=this.getDefaultPrimary("system");n!==this.state.primary&&(this.applyPrimary(n),this.updateUI())}};e.addEventListener("change",t),this._cleanup.push(()=>e.removeEventListener("change",t))}this.addListener(document,"click",e=>{this.state.isOpen&&this.elements.customizer&&!this.elements.customizer.contains(e.target)&&this.close()}),this.addListener(document,"keydown",e=>{e.key==="Escape"&&this.state.isOpen&&this.close()})},toggle:function(){this.state.isOpen?this.close():this.open()},open:function(){this.state.isOpen=!0,this.positionPanel(),this.elements.panel&&this.elements.panel.classList.add("is-open"),this.elements.trigger&&this.elements.trigger.setAttribute("aria-expanded","true"),this.elements.overlay&&this.elements.overlay.classList.add("is-active"),this.dispatchEvent("panel-open",{isOpen:!0})},close:function(){this.state.isOpen=!1,this.elements.panel&&this.elements.panel.classList.remove("is-open"),this.elements.trigger&&this.elements.trigger.setAttribute("aria-expanded","false"),this.elements.overlay&&this.elements.overlay.classList.remove("is-active"),this.dispatchEvent("panel-close",{isOpen:!1})},updateUI:function(){if(!this.elements.panel)return;this.elements.panel.querySelectorAll("[data-color]").forEach(t=>{t.classList.toggle("is-active",t.dataset.color===this.state.primary)}),this.elements.panel.querySelectorAll("[data-neutral]").forEach(t=>{t.classList.toggle("is-active",t.dataset.neutral===this.state.neutral)}),this.elements.panel.querySelectorAll("[data-radius]").forEach(t=>{t.classList.toggle("is-active",t.dataset.radius===this.state.radius)});let e=this.elements.panel.querySelector("[data-customizer-font]");e&&(e.value=this.state.font)},reset:function(){this.applyTheme(this.DEFAULTS.THEME),this.applyPrimary(this.getDefaultPrimary(this.DEFAULTS.THEME)),this.applyNeutral(this.DEFAULTS.NEUTRAL),this.applyRadius(this.DEFAULTS.RADIUS),this.applyFont(this.DEFAULTS.FONT),this.updateUI(),this.dispatchEvent("reset",{state:{...this.state}})},getState:function(){return{...this.state}},setPreferences:function(e){e.primary&&this.applyPrimary(e.primary),e.neutral&&this.applyNeutral(e.neutral),e.radius&&this.applyRadius(e.radius),e.font&&this.applyFont(e.font),e.theme&&this.applyTheme(e.theme),this.updateUI()},getStorageValue:function(e,t){if(typeof window.safeStorageGet=="function")return window.safeStorageGet(e,t);try{let n=localStorage.getItem(e);return n!==null?n:t}catch{return t}},setStorageValue:function(e,t){if(typeof window.safeStorageSet=="function")return window.safeStorageSet(e,t);try{return localStorage.setItem(e,t),!0}catch{return!1}},destroyAll:function(){this._cleanup.forEach(e=>e()),this._cleanup=[],this.elements.panel&&this.elements.panel.removeAttribute("data-customizer-initialized"),this.close(),this.isInitialized=!1}};window.Vanduo&&window.Vanduo.register("themeCustomizer",p),window.ThemeCustomizer=p})();(function(){"use strict";let p={isInitialized:!1,_mediaQuery:null,_onMediaChange:null,init:function(){if(this.STORAGE_KEY="vanduo-theme-preference",this.state={preference:this.getPreference()},this.isInitialized){this.applyTheme(),this.renderUI(),this.updateUI();return}this.isInitialized=!0,this.applyTheme(),this.listenForSystemChanges(),this.renderUI(),console.log("Vanduo Theme Switcher initialized")},getPreference:function(){return this.getStorageValue(this.STORAGE_KEY,"system")},setPreference:function(e){this.state.preference=e,this.setStorageValue(this.STORAGE_KEY,e),this.applyTheme(),window.ThemeCustomizer&&window.ThemeCustomizer.applyTheme&&!window.ThemeCustomizer._isApplying&&window.ThemeCustomizer.applyTheme(e),this.updateUI()},getStorageValue:function(e,t){if(typeof window.safeStorageGet=="function")return window.safeStorageGet(e,t);try{let n=localStorage.getItem(e);return n!==null?n:t}catch{return t}},setStorageValue:function(e,t){if(typeof window.safeStorageSet=="function")return window.safeStorageSet(e,t);try{return localStorage.setItem(e,t),!0}catch{return!1}},applyTheme:function(){let e=this.state.preference;e==="system"?document.documentElement.removeAttribute("data-theme"):document.documentElement.setAttribute("data-theme",e)},listenForSystemChanges:function(){this._mediaQuery&&this._onMediaChange||(this._mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this._onMediaChange=e=>{this.state.preference==="system"&&(this.applyTheme(),window.ThemeCustomizer&&typeof window.ThemeCustomizer.applyTheme=="function"&&!window.ThemeCustomizer._isApplying&&window.ThemeCustomizer.applyTheme("system"))},this._mediaQuery.addEventListener("change",this._onMediaChange))},renderUI:function(){document.querySelectorAll('[data-toggle="theme"]').forEach(t=>{if(t.getAttribute("data-theme-initialized")==="true"){t.tagName==="SELECT"&&(t.value=this.state.preference);return}if(t.tagName==="SELECT"){t.value=this.state.preference;let n=s=>{this.setPreference(s.target.value)};t.addEventListener("change",n),t._themeToggleHandler=n}else{let n=()=>{let s=["system","light","dark"],i=(s.indexOf(this.state.preference)+1)%s.length;this.setPreference(s[i])};t.addEventListener("click",n),t._themeToggleHandler=n}t.setAttribute("data-theme-initialized","true")})},updateUI:function(){document.querySelectorAll('[data-toggle="theme"]').forEach(t=>{if(t.tagName==="SELECT")t.value=this.state.preference;else{let n=t.querySelector(".theme-current-label");n&&(n.textContent=this.state.preference.charAt(0).toUpperCase()+this.state.preference.slice(1))}})},destroyAll:function(){document.querySelectorAll('[data-toggle="theme"][data-theme-initialized="true"]').forEach(t=>{if(t._themeToggleHandler){let n=t.tagName==="SELECT"?"change":"click";t.removeEventListener(n,t._themeToggleHandler),delete t._themeToggleHandler}t.removeAttribute("data-theme-initialized")}),this._mediaQuery&&this._onMediaChange&&this._mediaQuery.removeEventListener("change",this._onMediaChange),this._mediaQuery=null,this._onMediaChange=null,this.isInitialized=!1}};window.Vanduo&&window.Vanduo.register("themeSwitcher",p)})();(function(){"use strict";let p={defaults:{position:"top-right",duration:5e3,dismissible:!0,showProgress:!0,pauseOnHover:!0},containers:{},getContainer:function(e){if(this.containers[e])return this.containers[e];let t=document.createElement("div");return t.className=`vd-toast-container vd-toast-container-${e}`,t.setAttribute("role","status"),t.setAttribute("aria-live","polite"),t.setAttribute("aria-atomic","false"),document.body.appendChild(t),this.containers[e]=t,t},show:function(e,t,n){typeof e=="string"&&(e={message:e,type:t,duration:n});let s=Object.assign({},this.defaults,e),i=this.getContainer(s.position),a=document.createElement("div");a.className="vd-toast",s.type&&a.classList.add(`vd-toast-${s.type}`),s.solid&&a.classList.add("vd-toast-solid"),s.showProgress&&s.duration>0&&a.classList.add("vd-toast-with-progress");let o="";if(s.icon){let v=typeof sanitizeHtml=="function"?sanitizeHtml(s.icon):escapeHtml(s.icon);o+=`${v}`}else s.type&&(o+=`${this.getDefaultIcon(s.type)}`);let r=typeof escapeHtml=="function"?escapeHtml:function(v){let y=document.createElement("div");return y.appendChild(document.createTextNode(v)),y.innerHTML};if(o+='
    ',s.title&&(o+=`
    ${r(String(s.title))}
    `),s.message&&(o+=`
    ${r(String(s.message))}
    `),o+="
    ",s.dismissible&&(o+=''),s.showProgress&&s.duration>0){let v=parseInt(s.duration,10)||0;o+=`
    `}if(a.innerHTML=o,i.appendChild(a),a._toastCleanup=[],s.dismissible){let v=a.querySelector(".vd-toast-close"),y=()=>{this.dismiss(a)};v.addEventListener("click",y),a._toastCleanup.push(()=>v.removeEventListener("click",y))}let l=null,d=s.duration,c=null,u=()=>{if(s.duration>0){c=Date.now(),l=setTimeout(()=>{this.dismiss(a)},d),a._toastTimeoutId=l;let v=a.querySelector(".vd-toast-progress");v&&(v.style.animationPlayState="running")}},h=()=>{if(l){clearTimeout(l),l=null,a._toastTimeoutId=null,d-=Date.now()-c;let v=a.querySelector(".vd-toast-progress");v&&(v.style.animationPlayState="paused")}};s.pauseOnHover&&(a.addEventListener("mouseenter",h),a.addEventListener("mouseleave",u),a._toastCleanup.push(()=>a.removeEventListener("mouseenter",h),()=>a.removeEventListener("mouseleave",u))),requestAnimationFrame(()=>{a.classList.add("is-visible"),u()}),a._toastConfig=s;let f=new CustomEvent("toast:show",{bubbles:!0,detail:{toast:a,config:s}});return a.dispatchEvent(f),a},dismiss:function(e){if(!e||e.classList.contains("is-exiting"))return;e._toastTimeoutId&&(clearTimeout(e._toastTimeoutId),e._toastTimeoutId=null),e.classList.remove("is-visible"),e.classList.add("is-exiting");let t=new CustomEvent("toast:dismiss",{bubbles:!0,detail:{toast:e}});e.dispatchEvent(t);let n=()=>{e.removeEventListener("transitionend",n),e._toastCleanup&&(e._toastCleanup.forEach(s=>s()),delete e._toastCleanup),e.parentElement&&e.parentElement.removeChild(e)};e.addEventListener("transitionend",n),setTimeout(()=>{e._toastCleanup&&(e._toastCleanup.forEach(s=>s()),delete e._toastCleanup),e.parentElement&&e.parentElement.removeChild(e)},400)},destroyAll:function(){Object.keys(this.containers).forEach(e=>{let t=this.containers[e];if(!t)return;t.querySelectorAll(".vd-toast").forEach(s=>{s._toastTimeoutId&&clearTimeout(s._toastTimeoutId),s._toastCleanup&&(s._toastCleanup.forEach(i=>i()),delete s._toastCleanup),s.parentElement&&s.parentElement.removeChild(s)}),t.parentElement&&t.parentElement.removeChild(t)}),this.containers={}},dismissAll:function(e){e&&this.containers[e]?this.containers[e].querySelectorAll(".vd-toast").forEach(n=>this.dismiss(n)):Object.values(this.containers).forEach(t=>{t.querySelectorAll(".vd-toast").forEach(s=>this.dismiss(s))})},getDefaultIcon:function(e){return{success:'',error:'',warning:'',info:''}[e]||""},success:function(e,t){return this.show(Object.assign({message:e,type:"success"},t))},error:function(e,t){return this.show(Object.assign({message:e,type:"error"},t))},warning:function(e,t){return this.show(Object.assign({message:e,type:"warning"},t))},info:function(e,t){return this.show(Object.assign({message:e,type:"info"},t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("toast",p),window.Toast=p})();(function(){"use strict";let p={tooltips:new Map,delayTimers:new Map,sanitizeHtml:function(e){if(typeof sanitizeHtml=="function")return sanitizeHtml(e);let t=document.createElement("div");return t.textContent=e||"",t.innerHTML},init:function(){document.querySelectorAll("[data-tooltip], [data-tooltip-html]").forEach(t=>{this.tooltips.has(t)||this.initTooltip(t)})},initTooltip:function(e){let t=this.createTooltip(e),n=[],s=()=>{this.showTooltip(e,t)},i=()=>{this.hideTooltip(e,t)},a=()=>{this.showTooltip(e,t)},o=()=>{this.hideTooltip(e,t)};e.addEventListener("mouseenter",s),e.addEventListener("mouseleave",i),e.addEventListener("focus",a),e.addEventListener("blur",o),n.push(()=>e.removeEventListener("mouseenter",s),()=>e.removeEventListener("mouseleave",i),()=>e.removeEventListener("focus",a),()=>e.removeEventListener("blur",o)),this.tooltips.set(e,{tooltip:t,cleanup:n})},createTooltip:function(e){let t=document.createElement("div");t.className="vd-tooltip",t.setAttribute("role","tooltip"),t.setAttribute("aria-hidden","true");let n="tooltip-"+Math.random().toString(36).substr(2,9);t.id=n,e.setAttribute("aria-describedby",n);let s=e.dataset.tooltipHtml,i=e.dataset.tooltip;s?(t.innerHTML=this.sanitizeHtml(s),t.classList.add("vd-tooltip-html")):i&&(t.textContent=i);let a=e.dataset.tooltipPlacement||e.dataset.placement||"top";t.setAttribute("data-placement",a),t.classList.add(`vd-tooltip-${a}`),e.dataset.tooltipVariant&&t.classList.add(`vd-tooltip-${e.dataset.tooltipVariant}`),e.dataset.tooltipSize&&t.classList.add(`vd-tooltip-${e.dataset.tooltipSize}`);let o=parseInt(e.dataset.tooltipDelay)||0;return t.dataset.delay=o,document.body.appendChild(t),t},showTooltip:function(e,t){let n=parseInt(t.dataset.delay)||0;if(n>0){let s=setTimeout(()=>{this.positionTooltip(e,t),t.classList.add("is-visible"),t.setAttribute("aria-hidden","false")},n);this.delayTimers.set(e,s)}else this.positionTooltip(e,t),t.classList.add("is-visible"),t.setAttribute("aria-hidden","false")},hideTooltip:function(e,t){let n=this.delayTimers.get(e);n&&(clearTimeout(n),this.delayTimers.delete(e)),t.classList.remove("is-visible"),t.setAttribute("aria-hidden","true")},positionTooltip:function(e,t){let n=t.dataset.placement||"top",s=e.getBoundingClientRect(),i=t.getBoundingClientRect(),a=window.pageYOffset||document.documentElement.scrollTop,o=window.pageXOffset||document.documentElement.scrollLeft,r=0,l=0;switch(n){case"top":r=s.top+a-i.height-8,l=s.left+o+s.width/2-i.width/2;break;case"bottom":r=s.bottom+a+8,l=s.left+o+s.width/2-i.width/2;break;case"left":r=s.top+a+s.height/2-i.height/2,l=s.left+o-i.width-8;break;case"right":r=s.top+a+s.height/2-i.height/2,l=s.right+o+8;break}let d=window.innerWidth,c=window.innerHeight,u=8;ld-u&&(l=d-i.width-u),ra+c-u&&(r=a+c-i.height-u),t.style.cssText=`position: absolute; top: 0; left: 0; transform: translate(${l}px, ${r}px);`},show:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t&&this.tooltips.has(t)){let{tooltip:n}=this.tooltips.get(t);this.showTooltip(t,n)}},hide:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t&&this.tooltips.has(t)){let{tooltip:n}=this.tooltips.get(t);this.hideTooltip(t,n)}},update:function(e,t,n=!1){let s=typeof e=="string"?document.querySelector(e):e;if(s&&this.tooltips.has(s)){let{tooltip:i}=this.tooltips.get(s);n?(i.innerHTML=this.sanitizeHtml(t),i.classList.add("vd-tooltip-html")):(i.textContent=t,i.classList.remove("vd-tooltip-html"))}},destroy:function(e){let t=this.tooltips.get(e);if(!t)return;let n=this.delayTimers.get(e);n&&(clearTimeout(n),this.delayTimers.delete(e)),t.cleanup.forEach(s=>s()),t.tooltip&&t.tooltip.parentNode&&t.tooltip.parentNode.removeChild(t.tooltip),this.tooltips.delete(e)},destroyAll:function(){this.tooltips.forEach((e,t)=>{this.destroy(t)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("tooltips",p),window.VanduoTooltips=p})();(function(){"use strict";let p={minQueryLength:2,maxResults:10,debounceMs:150,highlightTag:"mark",keyboardShortcut:!0,containerSelector:".vd-doc-search",inputSelector:".vd-doc-search-input",resultsSelector:".vd-doc-search-results",contentSelector:".doc-content section[id]",titleSelector:".demo-title, h2, h3",navSelector:".doc-nav-link",sectionSelector:".doc-nav-section",excludeFromContent:"pre, code, script, style",maxContentLength:500,data:null,categoryIcons:{"getting-started":"ph-rocket-launch",core:"ph-cube",components:"ph-puzzle-piece",interactive:"ph-cursor-click","data-display":"ph-table",feedback:"ph-bell",meta:"ph-info",default:"ph-file-text"},onSelect:null,onSearch:null,onOpen:null,onClose:null,emptyTitle:"No results found",emptyText:"Try different keywords or check spelling",placeholder:"Search..."};function e(n){let s=Object.assign({},p,n||{}),i={initialized:!1,index:[],results:[],activeIndex:-1,isOpen:!1,query:"",container:null,input:null,resultsContainer:null,debounceTimer:null,boundHandlers:{}};function a(b,S,...A){try{S(...A)}catch(_){console.warn('[Vanduo Search] Callback error in "'+b+'":',_)}}function o(b){if(i.resultsContainer)try{i.resultsContainer.innerHTML=b}catch(S){console.warn("[Vanduo Search] Failed to render results:",S)}}function r(){return i.initialized?U:(i.container=document.querySelector(s.containerSelector),!i.container||(i.input=i.container.querySelector(s.inputSelector),i.resultsContainer=i.container.querySelector(s.resultsSelector),!i.input||!i.resultsContainer)?(i.initialized=!1,null):(s.placeholder&&i.input.setAttribute("placeholder",s.placeholder),l(),v(),C(),i.initialized=!0,U))}function l(){if(i.index=[],s.data&&Array.isArray(s.data)){s.data.forEach(function(A){i.index.push({id:A.id||f(A.title),title:A.title||"",category:A.category||"",categorySlug:f(A.category||""),content:A.content||"",keywords:A.keywords||h(A.title+" "+A.content),url:A.url||"#"+(A.id||f(A.title)),icon:A.icon||""})});return}let b=document.querySelectorAll(s.contentSelector),S=d();b.forEach(function(A){let _=A.id;if(!_)return;let N=A.querySelector(s.titleSelector),q=N?N.textContent.replace(/v[\d.]+/g,"").trim():_,X=S[_]||"Documentation",$=c(A),B=u(A,q),Y=N?N.querySelector("i.ph"):null,W="";if(Y&&Y.classList){for(let K=0;K2&&A.push(q)}),b.querySelectorAll("code").forEach(function(q){let $=(q.textContent||"").match(/\.([\w-]+)/g);$&&$.forEach(function(B){A.push(B.substring(1).toLowerCase())})}),b.querySelectorAll("[data-tooltip], [data-modal]").forEach(function(q){q.getAttributeNames().filter(function($){return $.startsWith("data-")}).forEach(function($){A.push($.replace("data-",""))})}),Array.from(new Set(A))}function h(b){return b.toLowerCase().split(/\s+/).filter(function(A){return A.length>2})}function f(b){return b.toLowerCase().replace(/\s+/g,"-").replace(/[^a-z0-9-]/g,"")}function v(){i.boundHandlers.handleInput=function(b){L(b)},i.boundHandlers.handleFocus=function(){i.query.length>=s.minQueryLength&&H()},i.boundHandlers.handleKeydown=function(b){P(b)},i.boundHandlers.handleOutsideClick=function(b){i.container.contains(b.target)||z()},i.boundHandlers.handleGlobalKeydown=function(b){s.keyboardShortcut&&(b.metaKey||b.ctrlKey)&&b.key==="k"&&(b.preventDefault(),i.input.focus(),i.input.select())},i.boundHandlers.handleResultClick=function(b){let S=b.target.closest(".vd-doc-search-result");if(S){let A=parseInt(S.dataset.index,10);I(A)}},i.input.addEventListener("input",i.boundHandlers.handleInput),i.input.addEventListener("focus",i.boundHandlers.handleFocus),i.input.addEventListener("keydown",i.boundHandlers.handleKeydown),document.addEventListener("click",i.boundHandlers.handleOutsideClick),document.addEventListener("keydown",i.boundHandlers.handleGlobalKeydown),i.resultsContainer.addEventListener("click",i.boundHandlers.handleResultClick)}function y(){i.input&&(i.input.removeEventListener("input",i.boundHandlers.handleInput),i.input.removeEventListener("focus",i.boundHandlers.handleFocus),i.input.removeEventListener("keydown",i.boundHandlers.handleKeydown)),document.removeEventListener("click",i.boundHandlers.handleOutsideClick),document.removeEventListener("keydown",i.boundHandlers.handleGlobalKeydown),i.resultsContainer&&i.resultsContainer.removeEventListener("click",i.boundHandlers.handleResultClick)}function C(){let b=i.resultsContainer.id||"search-results-"+Math.random().toString(36).substr(2,9);i.resultsContainer.id=b,i.input.setAttribute("role","combobox"),i.input.setAttribute("aria-autocomplete","list"),i.input.setAttribute("aria-controls",b),i.input.setAttribute("aria-expanded","false"),i.resultsContainer.setAttribute("role","listbox"),i.resultsContainer.setAttribute("aria-label","Search results")}function L(b){let S=b.target.value.trim();i.debounceTimer&&clearTimeout(i.debounceTimer),i.debounceTimer=setTimeout(function(){if(i.query=S,S.length=s.minQueryLength&&(b.preventDefault(),i.results=x(i.query),D(),H());return}switch(b.key){case"ArrowDown":b.preventDefault(),w(1);break;case"ArrowUp":b.preventDefault(),w(-1);break;case"Enter":b.preventDefault(),i.activeIndex>=0?I(i.activeIndex):i.results.length>0&&I(0);break;case"Escape":b.preventDefault(),z();break;case"Tab":z();break}}function x(b){let S=b.toLowerCase().split(/\s+/).filter(function(_){return _.length>0}),A=[];return i.index.forEach(function(_){let N=0,q=_.title.toLowerCase(),X=_.category.toLowerCase(),$=_.content.toLowerCase();S.forEach(function(B){q.includes(B)&&(N+=100,q===B?N+=50:q.startsWith(B)&&(N+=25)),X.includes(B)&&(N+=50),_.keywords.some(function(W){return W.includes(B)})&&(N+=30),$.includes(B)&&(N+=10)}),N>0&&A.push({id:_.id,title:_.title,category:_.category,categorySlug:_.categorySlug,content:_.content,url:_.url,icon:_.icon,score:N})}),A.sort(function(_,N){return N.score-_.score}),A.slice(0,s.maxResults)}function D(){if(i.results.length===0){o(V());return}let b='
      ';i.results.forEach(function(S,A){let _=A===i.activeIndex,N=S.icon||k(S.categorySlug),q=T(S.content,i.query);b+='
    • '+M(S.title,i.query)+'
      '+m(S.category)+'
      '+M(q,i.query)+"
      • "}),b+="
    ",b+=g(),o(b)}function V(){return'
    '+m(s.emptyTitle)+'
    '+m(s.emptyText)+"
    "}function g(){return'
    \u2191\u2193 to navigate\u21B5 to selectesc to close
    '}function k(b){return s.categoryIcons[b]||s.categoryIcons.default||"ph-file-text"}function T(b,S){let A=S.toLowerCase().split(/\s+/),_=b.toLowerCase(),N=100,q=-1;for(let Y=0;Y0&&(B="..."+B),$0}),_=m(b);return A.forEach(function(N){if(N.length>50)return;let q=new RegExp("("+N.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")+")","gi");_=_.replace(q,"<"+s.highlightTag+">$1")}),_}function m(b){let S=document.createElement("div");return S.textContent=b,S.innerHTML}function w(b){let S=i.activeIndex+b;S<0?S=i.results.length-1:S>=i.results.length&&(S=0),E(S)}function E(b){let S=i.resultsContainer.querySelector(".vd-doc-search-result.is-active");S&&(S.classList.remove("is-active"),S.setAttribute("aria-selected","false")),i.activeIndex=b;let A=i.resultsContainer.querySelector('[data-index="'+b+'"]');A&&(A.classList.add("is-active"),A.setAttribute("aria-selected","true"),i.input.setAttribute("aria-activedescendant","vd-doc-search-result-"+b),A.scrollIntoView({block:"nearest"}))}function I(b){let S=i.results[b];if(!S)return;if(z(),i.input.value="",i.query="",typeof s.onSelect=="function"){a("onSelect",s.onSelect,S);return}let A=document.querySelector(S.url);A&&(A.scrollIntoView({behavior:"smooth",block:"start"}),window.history.pushState(null,"",S.url),O(S.id))}function O(b){document.querySelectorAll(s.navSelector).forEach(function(A){A.classList.remove("active"),A.getAttribute("href")==="#"+b&&A.classList.add("active")})}function H(){i.isOpen||(i.isOpen=!0,i.resultsContainer.classList.add("is-open"),i.input.setAttribute("aria-expanded","true"),typeof s.onOpen=="function"&&a("onOpen",s.onOpen))}function z(){i.isOpen&&(i.isOpen=!1,i.activeIndex=-1,i.resultsContainer.classList.remove("is-open"),i.input.setAttribute("aria-expanded","false"),i.input.removeAttribute("aria-activedescendant"),typeof s.onClose=="function"&&a("onClose",s.onClose))}function R(){y(),i.initialized=!1,i.index=[],i.results=[],i.isOpen=!1,i.query="",i.debounceTimer&&clearTimeout(i.debounceTimer),i.resultsContainer&&o("")}function j(){l()}function G(b){Object.assign(s,b)}function Z(){return Object.assign({},s)}function F(){return i.index.slice()}let U={init:r,destroy:R,rebuild:j,search:x,open:H,close:z,setConfig:G,getConfig:Z,getIndex:F};return U}let t={create:function(n){let s=e(n);return s&&s.init(),s||null},_instance:null,config:Object.assign({},p),init:function(n){return this._instance&&this._instance.destroy(),n&&Object.assign(this.config,n),this._instance=e(this.config),this._instance?this._instance.init():null},destroy:function(){this._instance&&(this._instance.destroy(),this._instance=null)},destroyAll:function(){this.destroy()},rebuild:function(){this._instance&&this._instance.rebuild()},search:function(n){return this._instance?this._instance.search(n):[]},open:function(){this._instance&&this._instance.open()},close:function(){this._instance&&this._instance.close()}};typeof window.Vanduo<"u"&&window.Vanduo.register("docSearch",t),window.Search=t,window.DocSearch=t,window.VanduoDocSearch=t})();(function(){"use strict";let p={instances:new Map,currentDrag:null,touchState:null,feedbackElement:null,containerSelector:".vd-draggable-container, .vd-draggable-container-vertical",init:function(){document.querySelectorAll(".vd-draggable, [data-draggable]").forEach(s=>{this.instances.has(s)||this.initDraggable(s)}),document.querySelectorAll(this.containerSelector).forEach(s=>{this.instances.has(s)||this.initContainer(s)}),document.querySelectorAll(".vd-drop-zone").forEach(s=>{this.instances.has(s)||this.initDropZone(s)}),this.createFeedbackElement()},initDraggable:function(e){let t=[];e.hasAttribute("draggable")||e.setAttribute("draggable","true"),e.hasAttribute("tabindex")||e.setAttribute("tabindex","0"),e.setAttribute("role","option"),e.setAttribute("aria-roledescription","draggable item"),e.setAttribute("aria-grabbed","false");let n=c=>{this.handleDragStart(c,e)};e.addEventListener("dragstart",n),t.push(()=>e.removeEventListener("dragstart",n));let s=c=>{this.handleDrag(c,e)};e.addEventListener("drag",s),t.push(()=>e.removeEventListener("drag",s));let i=c=>{this.handleDragEnd(c,e)};e.addEventListener("dragend",i),t.push(()=>e.removeEventListener("dragend",i));let a=c=>{this.handleTouchStart(c,e)};e.addEventListener("touchstart",a),t.push(()=>e.removeEventListener("touchstart",a));let o=c=>{this.handleTouchMove(c,e)};e.addEventListener("touchmove",o,{passive:!1}),t.push(()=>e.removeEventListener("touchmove",o));let r=c=>{this.handleTouchEnd(c,e)};e.addEventListener("touchend",r,{passive:!1}),t.push(()=>e.removeEventListener("touchend",r));let l=c=>{this.handleTouchEnd(c,e)};e.addEventListener("touchcancel",l),t.push(()=>e.removeEventListener("touchcancel",l));let d=c=>{this.handleKeydown(c,e)};e.addEventListener("keydown",d),t.push(()=>e.removeEventListener("keydown",d)),this.instances.set(e,{cleanup:t})},initContainer:function(e){e.setAttribute("role","listbox"),e.setAttribute("aria-label",e.getAttribute("aria-label")||"Draggable items"),e.querySelectorAll(".vd-draggable-item").forEach(o=>{this.instances.has(o)||this.initDraggable(o)});let n=[],s=o=>{o.preventDefault(),o.dataTransfer.dropEffect="move"},i=o=>{if(o.preventDefault(),o.dataTransfer.dropEffect="move",!this.currentDrag)return;let r=this.currentDrag.element;e.contains(r)&&(o.clientX===0&&o.clientY===0||this.handleReorder(e,r,o.clientX,o.clientY))},a=o=>{o.preventDefault()};e.addEventListener("dragenter",s),e.addEventListener("dragover",i),e.addEventListener("drop",a),n.push(()=>{e.removeEventListener("dragenter",s),e.removeEventListener("dragover",i),e.removeEventListener("drop",a)}),this.instances.set(e,{cleanup:n})},initDropZone:function(e){let t=[];e.setAttribute("role","region"),e.setAttribute("aria-dropeffect","move"),e.hasAttribute("aria-label")||e.setAttribute("aria-label","Drop zone");let n=o=>{o.preventDefault(),this.handleDragOver(o,e)};e.addEventListener("dragover",n),t.push(()=>e.removeEventListener("dragover",n));let s=o=>{o.preventDefault(),this.handleDragEnter(o,e)};e.addEventListener("dragenter",s),t.push(()=>e.removeEventListener("dragenter",s));let i=o=>{this.handleDragLeave(o,e)};e.addEventListener("dragleave",i),t.push(()=>e.removeEventListener("dragleave",i));let a=o=>{o.preventDefault(),this.handleDrop(o,e)};e.addEventListener("drop",a),t.push(()=>e.removeEventListener("drop",a)),this.instances.set(e,{cleanup:t})},createFeedbackElement:function(){if(!this.feedbackElement){let e=document.querySelector(".vd-drag-feedback");if(e){this.feedbackElement=e;return}this.feedbackElement=document.createElement("div"),this.feedbackElement.className="vd-drag-feedback hidden",this.feedbackElement.setAttribute("role","presentation"),document.body.appendChild(this.feedbackElement)}},handleDragStart:function(e,t){t.classList.add("is-dragging"),t.setAttribute("aria-grabbed","true"),this.currentDrag={element:t,initialPosition:{x:e.clientX,y:e.clientY},initialBounds:t.getBoundingClientRect(),data:this.getData(t)},e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",this.currentDrag.data),t.dispatchEvent(new CustomEvent("draggable:start",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:e.clientX,y:e.clientY}}}))},handleDrag:function(e,t){this.currentDrag&&t.dispatchEvent(new CustomEvent("draggable:drag",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:e.clientX,y:e.clientY},delta:{x:e.clientX-this.currentDrag.initialPosition.x,y:e.clientY-this.currentDrag.initialPosition.y}}}))},handleDragEnd:function(e,t){t.classList.remove("is-dragging"),t.classList.add("is-dropped"),setTimeout(()=>t.classList.remove("is-dropped"),300),t.setAttribute("aria-grabbed","false"),this.feedbackElement&&this.feedbackElement.classList.add("hidden");let n=this.currentDrag?.data||this.getData(t),s=this.currentDrag?.initialPosition||{x:0,y:0};t.dispatchEvent(new CustomEvent("draggable:end",{bubbles:!0,detail:{element:t,data:n,position:{x:e.clientX,y:e.clientY},delta:{x:e.clientX-s.x,y:e.clientY-s.y}}})),this.currentDrag=null},handleTouchStart:function(e,t){let n=e.touches[0],s=t.getBoundingClientRect();this.touchState={element:t,startX:n.clientX,startY:n.clientY,lastX:n.clientX,lastY:n.clientY,offsetX:n.clientX-s.left,offsetY:n.clientY-s.top,startTime:Date.now(),isDragging:!1}},handleTouchMove:function(e,t){if(!this.touchState)return;let n=e.touches[0];this.touchState.lastX=n.clientX,this.touchState.lastY=n.clientY;let s=n.clientX-this.touchState.startX,i=n.clientY-this.touchState.startY;if((Math.abs(s)>10||Math.abs(i)>10)&&(e.cancelable&&e.preventDefault(),this.touchState.isDragging||(this.touchState.isDragging=!0,t.classList.add("is-dragging"),t.setAttribute("aria-grabbed","true"),this.currentDrag={element:t,initialPosition:{x:this.touchState.startX,y:this.touchState.startY},initialBounds:t.getBoundingClientRect(),data:this.getData(t),offsetX:this.touchState.offsetX,offsetY:this.touchState.offsetY},t.dispatchEvent(new CustomEvent("draggable:start",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:n.clientX,y:n.clientY}}}))),this.updateFeedback(n.clientX,n.clientY),this.currentDrag)){t.dispatchEvent(new CustomEvent("draggable:drag",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:n.clientX,y:n.clientY},delta:{x:s,y:i}}})),this.updateTouchDropZone(n.clientX,n.clientY);let a=t.closest(this.containerSelector);a&&a.contains(t)&&this.handleReorder(a,t,n.clientX,n.clientY)}},handleTouchEnd:function(e,t){if(this.touchState&&this.touchState.isDragging){e.cancelable&&e.preventDefault();let n=e.changedTouches?.[0],s={x:n?.clientX??this.touchState.lastX??this.touchState.startX,y:n?.clientY??this.touchState.lastY??this.touchState.startY},i=this.resolveDropZoneAtPoint(s.x,s.y)||this.touchState.overZone;i?this.dispatchDrop(i,s):this.touchState.overZone&&this.touchState.overZone.classList.remove("is-drag-over"),t.classList.remove("is-dragging"),t.classList.add("is-dropped"),t.setAttribute("aria-grabbed","false"),setTimeout(()=>t.classList.remove("is-dropped"),300),this.feedbackElement&&this.feedbackElement.classList.add("hidden");let a=this.currentDrag?.data||this.getData(t),o=this.touchState?.startX||0,r=this.touchState?.startY||0;t.dispatchEvent(new CustomEvent("draggable:end",{bubbles:!0,detail:{element:t,data:a,position:s,delta:{x:s.x-o,y:s.y-r}}}))}this.touchState=null,this.currentDrag=null},handleDragOver:function(e,t){e.preventDefault(),e.dataTransfer.dropEffect="move"},handleDragEnter:function(e,t){e.preventDefault(),t.classList.add("is-drag-over")},handleDragLeave:function(e,t){t.classList.remove("is-drag-over")},handleDrop:function(e,t){e.preventDefault(),this.dispatchDrop(t,{x:e.clientX,y:e.clientY})},resolveDropZoneAtPoint:function(e,t){if(!Number.isFinite(e)||!Number.isFinite(t))return null;if(typeof document.elementsFromPoint=="function"){let a=document.elementsFromPoint(e,t);for(let o of a){let r=o.closest(".vd-drop-zone");if(r)return r}}let n=document.elementFromPoint(e,t),s=n?n.closest(".vd-drop-zone"):null;if(s)return s;let i=document.querySelectorAll(".vd-drop-zone");for(let a of i){let o=a.getBoundingClientRect();if(e>=o.left&&e<=o.right&&t>=o.top&&t<=o.bottom)return a}return null},updateTouchDropZone:function(e,t){if(!this.touchState)return;let n=this.resolveDropZoneAtPoint(e,t),s=this.touchState.overZone||null;s&&s!==n&&s.classList.remove("is-drag-over"),n&&n!==s&&n.classList.add("is-drag-over"),this.touchState.overZone=n||null},dispatchDrop:function(e,t){e.classList.remove("is-drag-over"),e.dispatchEvent(new CustomEvent("draggable:drop",{bubbles:!0,detail:{zone:e,element:this.currentDrag?.element,data:this.currentDrag?.data,position:t}}))},handleReorder:function(e,t,n,s){let i=e.classList.contains("vd-draggable-container-vertical"),o=[...e.querySelectorAll(".vd-draggable-item:not(.is-dragging), .vd-draggable:not(.is-dragging)")].reduce((r,l)=>{let d=l.getBoundingClientRect(),c=i?s-d.top-d.height/2:n-d.left-d.width/2;return c<0&&c>r.offset?{offset:c,element:l}:r},{offset:Number.NEGATIVE_INFINITY}).element;o==null?e.appendChild(t):e.insertBefore(t,o)},handleKeydown:function(e,t){switch(e.key){case"Enter":case" ":e.preventDefault(),t.click();break;case"Escape":t.classList.contains("is-dragging")&&(t.classList.remove("is-dragging"),t.setAttribute("aria-grabbed","false"),this.feedbackElement&&this.feedbackElement.classList.add("hidden"),this.currentDrag=null);break;case"ArrowUp":case"ArrowLeft":{e.preventDefault();let n=t.previousElementSibling;n&&(n.classList.contains("vd-draggable")||n.classList.contains("vd-draggable-item"))&&(t.parentNode.insertBefore(t,n),t.focus(),t.dispatchEvent(new CustomEvent("draggable:reorder",{bubbles:!0,detail:{element:t,direction:"up"}})));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();let n=t.nextElementSibling;n&&(n.classList.contains("vd-draggable")||n.classList.contains("vd-draggable-item"))&&(t.parentNode.insertBefore(n,t),t.focus(),t.dispatchEvent(new CustomEvent("draggable:reorder",{bubbles:!0,detail:{element:t,direction:"down"}})));break}}},getData:function(e){return e.dataset.draggable||e.textContent.trim()},updateFeedback:function(e,t){if(!this.currentDrag)return;this.feedbackElement.classList.remove("hidden");let n=this.currentDrag.initialBounds;this.feedbackElement.innerHTML="";let s=this.currentDrag.element.cloneNode(!0);this.feedbackElement.appendChild(s);let i=this.currentDrag.offsetX??20,a=this.currentDrag.offsetY??20;Object.assign(this.feedbackElement.style,{left:e-i+"px",top:t-a+"px",width:n.width+"px",height:n.height+"px"})},makeDraggable:function(e,t={}){let n=typeof e=="string"?document.querySelector(e):e;n&&!this.instances.has(n)&&(n.classList.add("vd-draggable"),n.setAttribute("draggable","true"),t.data&&(n.dataset.draggable=t.data),this.initDraggable(n))},removeDraggable:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&this.instances.has(t)&&(this.instances.get(t).cleanup.forEach(s=>s()),this.instances.delete(t),t.classList.remove("vd-draggable"),t.removeAttribute("draggable"),t.removeAttribute("data-draggable"))},destroy:function(e){this.removeDraggable(e)},destroyAll:function(){Array.from(this.instances.keys()).forEach(t=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("draggable",p),window.VanduoDraggable=p})();(function(){"use strict";let p=new Map;function e(r){try{return new URL(r,window.location.href).origin===window.location.origin}catch{return!1}}function t(r,l){let c=new DOMParser().parseFromString(l.trim(),"text/html"),u=["SCRIPT","IFRAME","OBJECT","EMBED","FORM","BASE","LINK","META","STYLE"];for(let v of u){let y=c.querySelectorAll(v);for(let C=y.length-1;C>=0;C--)y[C].parentNode.removeChild(y[C])}function h(v){if(v.nodeType===Node.ELEMENT_NODE){let y=v.attributes;for(let L=y.length-1;L>=0;L--){let P=y[L].name.toLowerCase(),D=y[L].value.toLowerCase().trim();(P.startsWith("on")||D.startsWith("javascript:")||D.startsWith("data:")||D.startsWith("vbscript:"))&&v.removeAttribute(y[L].name)}let C=v.childNodes;for(let L=0;L
    Loading\u2026
    '}function s(){return'
    Loading\u2026
    '}function i(r){return!r||r==="skeleton"?n():r==="spinner"?s():r}function a(r,l,d){r.dispatchEvent(new CustomEvent(l,{bubbles:!0,detail:d||{}}))}let o={observe:function(r,l,d){if(!(r instanceof Element)){console.warn("[VanduoLazyLoad] observe() requires a DOM Element.");return}if(typeof l!="function"){console.warn("[VanduoLazyLoad] observe() requires a callback function.");return}if(p.has(r))return;let c=d&&d.threshold!=null?d.threshold:0,u=d&&d.rootMargin?d.rootMargin:"0px",h=new IntersectionObserver(function(f,v){f.forEach(function(y){if(y.isIntersecting){v.unobserve(y.target),p.delete(y.target);try{l(y.target)}catch(C){console.error("[VanduoLazyLoad] Callback threw:",C)}}})},{threshold:c,rootMargin:u});p.set(r,h),h.observe(r)},unobserve:function(r){let l=p.get(r);l&&(l.unobserve(r),p.delete(r))},unobserveAll:function(){p.forEach(function(r,l){r.unobserve(l)}),p.clear()},loadSection:function(r,l,d){if(typeof r!="string"||!r){console.warn("[VanduoLazyLoad] loadSection() requires a non-empty URL string.");return}if(!(l instanceof Element)){console.warn("[VanduoLazyLoad] loadSection() requires a DOM Element as containerEl.");return}if(!e(r)){console.error("[VanduoLazyLoad] loadSection() blocked cross-origin URL:",r);return}let c=d||{},u=i(c.placeholder);t(l,u),a(l,"lazysection:loading",{url:r}),this.observe(l,function(){let h=new window.AbortController,f=setTimeout(function(){h.abort()},1e4);window.fetch(r,{signal:h.signal}).then(function(v){if(clearTimeout(f),!v.ok)throw new Error("HTTP "+v.status);return v.text()}).then(function(v){t(l,v),a(l,"lazysection:loaded",{url:r}),typeof window.Vanduo<"u"&&window.Vanduo.init(),typeof c.onLoaded=="function"&&c.onLoaded(l)}).catch(function(v){let y=document.createElement("div");y.className="vd-alert vd-alert-error",y.setAttribute("role","alert");let C=document.createElement("span");C.textContent="Failed to load content. ";let L=document.createElement("small");for(L.style.opacity="0.7",L.textContent=v.message,y.appendChild(C),y.appendChild(L);l.firstChild;)l.removeChild(l.firstChild);l.appendChild(y),a(l,"lazysection:error",{url:r,error:v}),console.error("[VanduoLazyLoad] loadSection failed:",v),typeof c.onError=="function"&&c.onError(v)})},{threshold:c.threshold,rootMargin:c.rootMargin})},init:function(){let r=this;document.querySelectorAll("[data-vd-lazy]").forEach(function(d){if(p.has(d)||d.dataset.vdLazyState==="loading"||d.dataset.vdLazyState==="loaded")return;let c=d.getAttribute("data-vd-lazy");if(!c)return;d.dataset.vdLazyState="loading";let u=d.getAttribute("data-vd-lazy-placeholder")||"skeleton";r.loadSection(c,d,{placeholder:u,onLoaded:function(){d.dataset.vdLazyState="loaded"},onError:function(){d.dataset.vdLazyState="error"}})})}};typeof window.Vanduo<"u"&&window.Vanduo.register("LazyLoad",o),window.VanduoLazyLoad=o})();(function(){"use strict";let p={observers:new Map,init:function(){document.querySelectorAll("[data-glass-scroll]").forEach(e=>{this.observers.has(e)||this.initElement(e)})},initElement:function(e){let t=e.dataset.glassSentinel,n;if(t&&(n=document.querySelector(t)),n||(n=e.previousElementSibling),!n){e.classList.add("is-glass-active");return}let s=new IntersectionObserver(i=>{i.forEach(a=>{e.classList.toggle("is-glass-active",!a.isIntersecting)})},{threshold:0,rootMargin:"0px"});s.observe(n),this.observers.set(e,s)},destroy:function(e){let t=this.observers.get(e);t&&(t.disconnect(),this.observers.delete(e))},destroyAll:function(){this.observers.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("glassScroll",p),window.VanduoGlassScroll=p})();(function(){"use strict";let e={instances:new Map,init:function(){document.querySelectorAll(".vd-morph, [data-vd-morph]").forEach(function(n){e.instances.has(n)||n.getAttribute("data-vd-morph")!=="manual"&&e.initInstance(n)})},initInstance:function(t){e._ensureLayers(t);let n=[],s=!1,i=function(a){s||(e._runMorph(t,a,function(){s=!1}),s=!0)};t.addEventListener("click",i),n.push(function(){t.removeEventListener("click",i)}),this.instances.set(t,{cleanup:n})},morph:function(t){t&&(this.instances.has(t)||this.initInstance(t),this._runMorph(t,null,null))},destroy:function(t){let n=this.instances.get(t);n&&(n.cleanup.forEach(function(s){s()}),this.instances.delete(t))},destroyAll:function(){this.instances.forEach(function(t,n){e.destroy(n)})},_ensureLayers:function(t){if(!t.querySelector(".vd-morph-wave")){let n=document.createElement("span");n.className="vd-morph-wave",n.setAttribute("aria-hidden","true"),t.insertBefore(n,t.firstChild)}if(!t.querySelector(".vd-morph-shine")){let n=document.createElement("span");n.className="vd-morph-shine",n.setAttribute("aria-hidden","true");let s=t.querySelector(".vd-morph-wave");s&&s.nextSibling?t.insertBefore(n,s.nextSibling):t.insertBefore(n,t.firstChild)}},_runMorph:function(t,n,s){let i=t.querySelector(".vd-morph-wave");if(i){let r=t.getBoundingClientRect(),l=r.left+r.width/2,d=r.top+r.height/2,c=n&&n.clientX||l,u=n&&n.clientY||d;i.style.left=c-r.left+"px",i.style.top=u-r.top+"px"}t.classList.add("is-morphing");let a=750,o=getComputedStyle(t).getPropertyValue("--morph-duration");if(o){let r=parseFloat(o);isNaN(r)||(a=r*(o.indexOf("ms")!==-1?1:1e3))}setTimeout(function(){t.classList.remove("is-morphing");let r=t.querySelector(".vd-morph-current"),l=t.querySelector(".vd-morph-next");r&&l&&(r.classList.remove("vd-morph-current"),r.classList.add("vd-morph-next"),l.classList.remove("vd-morph-next"),l.classList.add("vd-morph-current")),t.classList.add("morph-done"),setTimeout(function(){t.classList.remove("morph-done")},350),typeof s=="function"&&s()},a)}};typeof window.Vanduo<"u"&&window.Vanduo.register("morph",e),window.VanduoMorph=e})();(function(){"use strict";let p={instances:new Map,init:function(){document.querySelectorAll(".vd-flow, .vd-carousel").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=e.querySelector(".vd-flow-track");if(!t)return;let n=Array.from(t.querySelectorAll(".vd-flow-slide"));if(n.length===0)return;let s=e.classList.contains("vd-flow-fade"),i=e.hasAttribute("data-vd-autoplay"),a=parseInt(e.getAttribute("data-vd-interval"),10)||5e3,o=e.getAttribute("data-vd-loop")!=="false",r={current:0,total:n.length,autoplayTimer:null,isFade:s,loop:o,isDragging:!1,startX:0,currentX:0,threshold:50},l=[];n.forEach((g,k)=>{g.setAttribute("role","group"),g.setAttribute("aria-roledescription","slide"),g.setAttribute("aria-label","Slide "+(k+1)+" of "+n.length),k===0&&g.classList.add("is-active")}),e.setAttribute("role","region"),e.setAttribute("aria-roledescription","carousel"),e.getAttribute("aria-label")||e.setAttribute("aria-label","Carousel");let d=document.createElement("div");d.setAttribute("aria-live","polite"),d.setAttribute("aria-atomic","true"),d.className="sr-only",d.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);",e.appendChild(d);let c=(g,k)=>{k===void 0&&(k=!0);let T=g;r.loop?T=(g%r.total+r.total)%r.total:T=Math.max(0,Math.min(g,r.total-1));let M=r.current;r.current=T,r.isFade?n.forEach((w,E)=>{w.classList.toggle("is-active",E===T)}):t.style.transform="translateX(-"+T*100+"%)",e.querySelectorAll(".vd-flow-indicator").forEach((w,E)=>{w.classList.toggle("is-active",E===T),w.setAttribute("aria-selected",E===T?"true":"false")}),n.forEach((w,E)=>{w.setAttribute("aria-hidden",E!==T?"true":"false")}),k&&(d.textContent="Slide "+(T+1)+" of "+r.total),e.dispatchEvent(new CustomEvent("flow:change",{detail:{current:T,previous:M,total:r.total}}))},u=()=>c(r.current+1),h=()=>c(r.current-1),f=e.querySelector(".vd-flow-prev"),v=e.querySelector(".vd-flow-next");if(f){let g=()=>h();f.addEventListener("click",g),l.push(()=>f.removeEventListener("click",g))}if(v){let g=()=>u();v.addEventListener("click",g),l.push(()=>v.removeEventListener("click",g))}e.querySelectorAll(".vd-flow-indicator").forEach((g,k)=>{g.setAttribute("role","tab"),g.setAttribute("aria-selected",k===0?"true":"false"),g.setAttribute("aria-label","Go to slide "+(k+1));let T=()=>c(k);g.addEventListener("click",T),l.push(()=>g.removeEventListener("click",T))});let C=g=>{g.key==="ArrowLeft"&&(h(),g.preventDefault()),g.key==="ArrowRight"&&(u(),g.preventDefault())};e.setAttribute("tabindex","0"),e.addEventListener("keydown",C),l.push(()=>e.removeEventListener("keydown",C));let L=g=>{r.isDragging=!0,r.startX=g.clientX||g.touches&&g.touches[0].clientX||0,r.currentX=r.startX,e.classList.add("is-dragging")},P=g=>{r.isDragging&&(r.currentX=g.clientX||g.touches&&g.touches[0].clientX||0)},x=()=>{if(!r.isDragging)return;r.isDragging=!1,e.classList.remove("is-dragging");let g=r.startX-r.currentX;Math.abs(g)>r.threshold&&(g>0?u():h())};e.addEventListener("mousedown",L),e.addEventListener("mousemove",P),e.addEventListener("mouseup",x),e.addEventListener("mouseleave",x),e.addEventListener("touchstart",L,{passive:!0}),e.addEventListener("touchmove",P,{passive:!0}),e.addEventListener("touchend",x),l.push(()=>e.removeEventListener("mousedown",L),()=>e.removeEventListener("mousemove",P),()=>e.removeEventListener("mouseup",x),()=>e.removeEventListener("mouseleave",x),()=>e.removeEventListener("touchstart",L),()=>e.removeEventListener("touchmove",P),()=>e.removeEventListener("touchend",x));let D=()=>{V(),r.autoplayTimer=setInterval(u,a)},V=()=>{r.autoplayTimer&&(clearInterval(r.autoplayTimer),r.autoplayTimer=null)};if(i){D();let g=()=>V(),k=()=>D();e.addEventListener("mouseenter",g),e.addEventListener("mouseleave",k),e.addEventListener("focusin",g),e.addEventListener("focusout",k),l.push(()=>e.removeEventListener("mouseenter",g),()=>e.removeEventListener("mouseleave",k),()=>e.removeEventListener("focusin",g),()=>e.removeEventListener("focusout",k),()=>V())}c(0,!1),this.instances.set(e,{cleanup:l,goTo:c,next:u,prev:h,getState:()=>({...r})})},goTo:function(e,t){let n=this.instances.get(e);n&&n.goTo(t)},next:function(e){let t=this.instances.get(e);t&&t.next()},prev:function(e){let t=this.instances.get(e);t&&t.prev()},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("flow",p),window.VanduoFlow=p})();(function(){"use strict";let p={instances:new Map,_globalCleanups:[],init:function(){if(document.querySelectorAll("[data-vd-bubble], [data-vd-popover]").forEach(t=>{this.instances.has(t)||this.initInstance(t)}),this._globalCleanups.length===0){let t=s=>{this.instances.forEach((i,a)=>{!i.popover.contains(s.target)&&!a.contains(s.target)&&this.hide(a)})},n=s=>{s.key==="Escape"&&this.instances.forEach((i,a)=>this.hide(a))};document.addEventListener("click",t,!0),document.addEventListener("keydown",n),this._globalCleanups.push(()=>document.removeEventListener("click",t,!0),()=>document.removeEventListener("keydown",n))}},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-bubble-placement")||e.getAttribute("data-vd-popover-placement")||"bottom",s=document.createElement("div");s.className="vd-bubble-content",s.setAttribute("role","dialog"),s.setAttribute("aria-modal","false"),s.setAttribute("data-placement",n);let i=e.getAttribute("data-vd-bubble-title")||e.getAttribute("data-vd-popover-title"),a=e.getAttribute("data-vd-bubble")||e.getAttribute("data-vd-popover")||"",o=e.getAttribute("data-vd-bubble-html")||e.getAttribute("data-vd-popover-html");if(i){let c=document.createElement("div");c.className="vd-bubble-header";let u=document.createElement("span");u.textContent=i;let h=document.createElement("button");h.className="vd-bubble-close",h.setAttribute("aria-label","Close"),h.innerHTML="×",c.appendChild(u),c.appendChild(h),s.appendChild(c);let f=v=>{v.stopPropagation(),this.hide(e)};h.addEventListener("click",f),t.push(()=>h.removeEventListener("click",f))}let r=document.createElement("div");r.className="vd-bubble-body",o?typeof sanitizeHtml=="function"?r.innerHTML=sanitizeHtml(o):r.textContent=o:r.textContent=a,s.appendChild(r),document.body.appendChild(s);let l="vd-bubble-"+Math.random().toString(36).slice(2,9);s.id=l,e.setAttribute("aria-haspopup","dialog"),e.setAttribute("aria-expanded","false"),e.setAttribute("aria-controls",l);let d=c=>{c.stopPropagation(),s.classList.contains("is-visible")?this.hide(e):(this.hideAll(),this.show(e))};e.addEventListener("click",d),t.push(()=>e.removeEventListener("click",d)),this.instances.set(e,{popover:s,cleanup:t,placement:n})},position:function(e,t,n){let s=e.getBoundingClientRect(),i=t.getBoundingClientRect(),a=10,o,r;switch(n){case"top":o=s.top-i.height-a+window.scrollY,r=s.left+(s.width-i.width)/2+window.scrollX;break;case"left":o=s.top+(s.height-i.height)/2+window.scrollY,r=s.left-i.width-a+window.scrollX;break;case"right":o=s.top+(s.height-i.height)/2+window.scrollY,r=s.right+a+window.scrollX;break;default:o=s.bottom+a+window.scrollY,r=s.left+(s.width-i.width)/2+window.scrollX}r=Math.max(8,Math.min(r,window.innerWidth-i.width-8)),o=Math.max(8,o),t.style.top=o+"px",t.style.left=r+"px"},show:function(e){let t=this.instances.get(e);if(!t)return;let{popover:n,placement:s}=t;n.style.display="block",n.classList.add("is-visible"),e.setAttribute("aria-expanded","true"),requestAnimationFrame(()=>{this.position(e,n,s)}),e.dispatchEvent(new CustomEvent("bubble:show",{bubbles:!0}))},hide:function(e){let t=this.instances.get(e);t&&(t.popover.classList.remove("is-visible"),e.setAttribute("aria-expanded","false"),e.dispatchEvent(new CustomEvent("bubble:hide",{bubbles:!0})))},hideAll:function(){this.instances.forEach((e,t)=>this.hide(t))},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),t.popover.parentNode&&t.popover.parentNode.removeChild(t.popover),e.removeAttribute("aria-haspopup"),e.removeAttribute("aria-expanded"),e.removeAttribute("aria-controls"),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t)),this._globalCleanups.forEach(e=>e()),this._globalCleanups=[]}};typeof window.Vanduo<"u"&&window.Vanduo.register("bubble",p),window.VanduoBubble=p})();(function(){"use strict";let p={instances:new Map,init:function(){document.querySelectorAll("[data-vd-waypoint-nav], [data-vd-scrollspy-nav]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=Array.from(e.querySelectorAll('a[href^="#"]'));if(t.length===0)return;let n=[],s=parseInt(e.getAttribute("data-vd-waypoint-offset")||"80",10),i=[];if(t.forEach(d=>{let c=d.getAttribute("href").slice(1),u=document.getElementById(c);u&&(u.setAttribute("data-vd-waypoint-section",""),i.push({id:c,link:d,section:u}))}),i.length===0)return;let a=new Set,o=d=>{t.forEach(u=>u.classList.remove("is-active"));let c=t.find(u=>u.getAttribute("href")==="#"+d);c&&(c.classList.add("is-active"),e.dispatchEvent(new CustomEvent("waypoint:change",{detail:{activeId:d,link:c}})))},r="-"+s+"px 0px -40% 0px",l=new IntersectionObserver(d=>{d.forEach(c=>{c.isIntersecting?a.add(c.target.id):a.delete(c.target.id)});for(let c=0;cl.observe(d.section)),t.forEach(d=>{let c=u=>{u.preventDefault();let h=d.getAttribute("href").slice(1),f=document.getElementById(h);f&&(f.scrollIntoView({behavior:"smooth"}),o(h))};d.addEventListener("click",c),n.push(()=>d.removeEventListener("click",c))}),n.push(()=>l.disconnect()),this.instances.set(e,{observer:l,cleanup:n,sections:i,setActive:o})},refresh:function(e){this.destroy(e),this.initInstance(e)},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("waypoint",p),window.VanduoWaypoint=p})();(function(){"use strict";let p={instances:new Map,init:function(){document.querySelectorAll(".vd-ripple, [data-vd-ripple]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=s=>{let i=e.getBoundingClientRect(),a=Math.max(i.width,i.height),o=(s.clientX||s.touches&&s.touches[0].clientX||i.left+i.width/2)-i.left-a/2,r=(s.clientY||s.touches&&s.touches[0].clientY||i.top+i.height/2)-i.top-a/2,l=document.createElement("span");l.className="vd-ripple-wave",l.style.width=a+"px",l.style.height=a+"px",l.style.left=o+"px",l.style.top=r+"px",e.appendChild(l),l.addEventListener("animationend",()=>{l.parentNode&&l.parentNode.removeChild(l)})};e.addEventListener("mousedown",n),e.addEventListener("touchstart",n,{passive:!0}),t.push(()=>e.removeEventListener("mousedown",n),()=>e.removeEventListener("touchstart",n)),this.instances.set(e,{cleanup:t})},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),e.querySelectorAll(".vd-ripple-wave").forEach(n=>n.remove()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("ripple",p),window.VanduoRipple=p})();(function(){"use strict";function p(n){if(!n||n===document.body)return!1;let s=window.getComputedStyle(n),i=s.overflowY,a=s.overflowX,o=/(auto|scroll|overlay)/.test(i)&&n.scrollHeight>n.clientHeight,r=/(auto|scroll|overlay)/.test(a)&&n.scrollWidth>n.clientWidth;return o||r}function e(n){let s=n.parentElement;for(;s&&s!==document.body&&s!==document.documentElement;){if(p(s))return s;s=s.parentElement}return null}let t={instances:new Map,init:function(){document.querySelectorAll(".vd-affix, .vd-sticky, [data-vd-affix]").forEach(s=>{this.instances.has(s)||this.initInstance(s)})},initInstance:function(n){let s=[],i=parseInt(n.getAttribute("data-vd-affix-offset")||"0",10),a=Number.isNaN(i)?0:i,o=e(n),r=!1,l=document.createElement("div");l.style.cssText="display:block;height:1px;margin-bottom:-1px;visibility:hidden;pointer-events:none;",n.parentNode.insertBefore(l,n),n.style.setProperty("--affix-top-offset",a+"px");function d(){r||(r=!0,n.classList.add("is-stuck"),n.dispatchEvent(new CustomEvent("affix:stuck",{bubbles:!0,detail:{offset:a,root:o||window}})))}function c(){r&&(r=!1,n.classList.remove("is-stuck"),n.dispatchEvent(new CustomEvent("affix:unstuck",{bubbles:!0,detail:{offset:a,root:o||window}})))}let u=new IntersectionObserver(function(h){h.forEach(f=>{f.isIntersecting?c():d()})},{root:o,rootMargin:"-"+a+"px 0px 0px 0px",threshold:0});u.observe(l),s.push(()=>u.disconnect(),()=>{l.parentNode&&l.parentNode.removeChild(l)},()=>{n.classList.remove("is-stuck"),n.style.removeProperty("--affix-top-offset")}),this.instances.set(n,{cleanup:s,observer:u,sentinel:l,scrollParent:o})},destroy:function(n){let s=this.instances.get(n);s&&(s.cleanup.forEach(i=>i()),n.classList.remove("is-stuck"),this.instances.delete(n))},destroyAll:function(){this.instances.forEach((n,s)=>this.destroy(s))}};typeof window.Vanduo<"u"&&window.Vanduo.register("affix",t),window.VanduoAffix=t})();(function(){"use strict";function p(t){let n=document.createElement("div");return n.textContent=t,n.innerHTML}let e={instances:new Map,init:function(){document.querySelectorAll("[data-vd-suggest], [data-vd-autocomplete]").forEach(n=>{this.instances.has(n)||this.initInstance(n)})},initInstance:function(t){let n=[],s=parseInt(t.getAttribute("data-vd-suggest-min-chars")||"1",10),i=t.getAttribute("data-vd-suggest-url")||"",a=t.getAttribute("data-vd-suggest")||t.getAttribute("data-vd-autocomplete")||"",o=[];try{o=JSON.parse(a)}catch{o=a.split(",").map(k=>k.trim()).filter(Boolean)}let r=t.closest(".vd-suggest-wrapper, .vd-autocomplete-wrapper");r||(r=document.createElement("div"),r.className="vd-suggest-wrapper",t.parentNode.insertBefore(r,t),r.appendChild(t));let l=document.createElement("ul");l.className="vd-suggest-list",l.setAttribute("role","listbox");let d="vd-suggest-"+Math.random().toString(36).slice(2,9);l.id=d,r.appendChild(l),t.setAttribute("role","combobox"),t.setAttribute("aria-autocomplete","list"),t.setAttribute("aria-expanded","false"),t.setAttribute("aria-controls",d),t.setAttribute("autocomplete","off");let c=-1,u=[],h=null,f=(g,k)=>{if(l.innerHTML="",u=g,c=-1,g.length===0){let T=document.createElement("li");T.className="vd-suggest-empty",T.textContent="No results",l.appendChild(T);return}g.forEach((T,M)=>{let m=document.createElement("li");m.className="vd-suggest-item",m.setAttribute("role","option"),m.id=d+"-item-"+M;let w=typeof T=="object"&&(T.label||T.text)||String(T);if(k){let E=p(w),I=new RegExp("("+k.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")+")","gi");m.innerHTML=E.replace(I,'$1')}else m.textContent=w;m.addEventListener("click",()=>C(M)),l.appendChild(m)})},v=()=>{l.classList.add("is-open"),t.setAttribute("aria-expanded","true")},y=()=>{l.classList.remove("is-open"),t.setAttribute("aria-expanded","false"),c=-1,t.removeAttribute("aria-activedescendant")},C=g=>{let k=u[g],T=typeof k=="object"&&(k.value||k.label)||String(k);t.value=T,y(),t.dispatchEvent(new CustomEvent("suggest:select",{detail:{value:T,item:k,index:g},bubbles:!0}))},L=g=>{let k=l.querySelectorAll(".vd-suggest-item");k.forEach(T=>T.classList.remove("is-highlighted")),g>=0&&g{if(g.length0,v()},x=()=>{clearTimeout(h),h=setTimeout(()=>P(t.value),200)},D=g=>{if(!l.classList.contains("is-open")){g.key==="ArrowDown"&&(P(t.value),g.preventDefault());return}let k=u.length;switch(g.key){case"ArrowDown":g.preventDefault(),L(c0?c-1:k-1);break;case"Enter":g.preventDefault(),c>=0&&C(c);break;case"Escape":y();break}},V=()=>{setTimeout(y,200)};t.addEventListener("input",x),t.addEventListener("keydown",D),t.addEventListener("blur",V),t.addEventListener("focus",()=>{t.value.length>=s&&P(t.value)}),n.push(()=>t.removeEventListener("input",x),()=>t.removeEventListener("keydown",D),()=>t.removeEventListener("blur",V),()=>clearTimeout(h),()=>{l.parentNode&&l.parentNode.removeChild(l)}),this.instances.set(t,{cleanup:n,list:l,close:y})},destroy:function(t){let n=this.instances.get(t);n&&(n.cleanup.forEach(s=>s()),this.instances.delete(t))},destroyAll:function(){this.instances.forEach((t,n)=>this.destroy(n))}};typeof window.Vanduo<"u"&&window.Vanduo.register("suggest",e),window.VanduoSuggest=e})();(function(){"use strict";let p={instances:new Map,rules:{required:e=>e.trim().length>0,email:e=>/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e),url:e=>{try{return new URL(e),!0}catch{return!1}},number:e=>!isNaN(parseFloat(e))&&isFinite(e),min:(e,t)=>e.length>=parseInt(t,10),max:(e,t)=>e.length<=parseInt(t,10),minVal:(e,t)=>parseFloat(e)>=parseFloat(t),maxVal:(e,t)=>parseFloat(e)<=parseFloat(t),pattern:(e,t)=>{try{return t.length>100?!1:new RegExp(t).test(e)}catch{return!1}},match:(e,t)=>{try{let n=typeof CSS<"u"&&CSS.escape?CSS.escape(t):t,s=document.querySelector('[name="'+n+'"]');return s?e===s.value:!1}catch{return!1}}},messages:{required:"This field is required",email:"Please enter a valid email address",url:"Please enter a valid URL",number:"Please enter a valid number",min:"Minimum {0} characters required",max:"Maximum {0} characters allowed",minVal:"Value must be at least {0}",maxVal:"Value must be at most {0}",pattern:"Invalid format",match:"Fields do not match"},init:function(){document.querySelectorAll("[data-vd-validate], .vd-validate").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-validate-mode")||"blur",s=e.querySelectorAll("[data-vd-rules]"),i=r=>{let d=(r.getAttribute("data-vd-rules")||"").split("|").map(h=>h.trim()).filter(Boolean),c=r.value,u=[];for(let h of d){let[f,...v]=h.split(":"),y=v.join(":"),C=this.rules[f];if(C&&!C(c,y)){let P=r.getAttribute("data-vd-msg-"+f)||this.messages[f]||"Invalid";y&&(P=P.replace("{0}",y)),u.push(P);break}}return this.setFieldState(r,u),u.length===0},a=()=>{let r=!0;return s.forEach(l=>{i(l)||(r=!1)}),r};s.forEach(r=>{if(n==="input"||n==="blur"){let l=n==="input"?"input":"blur",d=()=>i(r);if(r.addEventListener(l,d),t.push(()=>r.removeEventListener(l,d)),n==="blur"){let c=()=>{(r.classList.contains("is-invalid")||r.classList.contains("is-valid"))&&i(r)};r.addEventListener("input",c),t.push(()=>r.removeEventListener("input",c))}}});let o=r=>{let l=a();if(!l){r.preventDefault(),r.stopPropagation();let d=e.querySelector(".is-invalid");d&&d.focus()}e.dispatchEvent(new CustomEvent("validate:submit",{detail:{valid:l},bubbles:!0}))};e.addEventListener("submit",o),t.push(()=>e.removeEventListener("submit",o)),this.instances.set(e,{cleanup:t,validateAll:a,validateField:i})},setFieldState:function(e,t){let n=e.closest(".vd-form-group")||e.parentElement,s=n.querySelector(".vd-validate-error");e.classList.remove("is-valid","is-invalid"),t.length>0?(e.classList.add("is-invalid"),e.setAttribute("aria-invalid","true"),s||(s=document.createElement("div"),s.className="vd-validate-error",s.id="vd-err-"+Math.random().toString(36).slice(2,9),s.setAttribute("role","alert"),n.appendChild(s)),s.textContent=t[0],s.style.display="",e.setAttribute("aria-describedby",s.id)):e.value.trim()?(e.classList.add("is-valid"),e.removeAttribute("aria-invalid"),s&&(s.style.display="none")):(e.removeAttribute("aria-invalid"),s&&(s.style.display="none"))},validateForm:function(e){let t=this.instances.get(e);return t?t.validateAll():!1},addRule:function(e,t,n){this.rules[e]=t,n&&(this.messages[e]=n)},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("validate",p),window.VanduoValidate=p})();(function(){"use strict";let p=["Su","Mo","Tu","We","Th","Fr","Sa"],e=["January","February","March","April","May","June","July","August","September","October","November","December"],t={instances:new Map,init:function(){document.querySelectorAll("[data-vd-datepicker]").forEach(s=>{this.instances.has(s)||this.initInstance(s)})},initInstance:function(n){let s=[],i=n.getAttribute("data-vd-datepicker-format")||"yyyy-mm-dd",a=n.getAttribute("data-vd-datepicker-min"),o=n.getAttribute("data-vd-datepicker-max"),r=a?new Date(a):null,l=o?new Date(o):null,d=new Date,c=d.getFullYear(),u=d.getMonth(),h=null,f="days";if(n.value){let m=new Date(n.value);isNaN(m.getTime())||(h=m,c=m.getFullYear(),u=m.getMonth())}let v=document.createElement("div");v.className="vd-datepicker-popup",v.setAttribute("role","dialog"),v.setAttribute("aria-label","Choose date");let y=document.createElement("div");y.className="vd-suggest-wrapper",y.style.position="relative",y.style.display="inline-block",n.parentNode.insertBefore(y,n),y.appendChild(n),y.appendChild(v);let C=m=>{let w=m.getFullYear(),E=String(m.getMonth()+1).padStart(2,"0"),I=String(m.getDate()).padStart(2,"0");return i.replace("yyyy",w).replace("mm",E).replace("dd",I)},L=m=>!!(r&&ml),P=(m,w)=>m&&w&&m.getFullYear()===w.getFullYear()&&m.getMonth()===w.getMonth()&&m.getDate()===w.getDate(),x=()=>{v.innerHTML="";let m=document.createElement("div");m.className="vd-datepicker-header";let w=document.createElement("button");w.type="button",w.className="vd-datepicker-prev",w.innerHTML="‹",w.setAttribute("aria-label","Previous");let E=document.createElement("button");E.type="button",E.className="vd-datepicker-next",E.innerHTML="›",E.setAttribute("aria-label","Next");let I=document.createElement("span");if(I.className="vd-datepicker-title",f==="days")I.textContent=e[u]+" "+c,I.addEventListener("click",()=>{f="months",x()}),w.addEventListener("click",()=>{u--,u<0&&(u=11,c--),x()}),E.addEventListener("click",()=>{u++,u>11&&(u=0,c++),x()});else if(f==="months")I.textContent=String(c),I.addEventListener("click",()=>{f="years",x()}),w.addEventListener("click",()=>{c--,x()}),E.addEventListener("click",()=>{c++,x()});else{let O=Math.floor(c/10)*10;I.textContent=O+" - "+(O+9),w.addEventListener("click",()=>{c-=10,x()}),E.addEventListener("click",()=>{c+=10,x()})}if(m.appendChild(w),m.appendChild(I),m.appendChild(E),v.appendChild(m),f==="days"){let O=document.createElement("div");O.className="vd-datepicker-weekdays",p.forEach(F=>{let U=document.createElement("span");U.textContent=F,O.appendChild(U)}),v.appendChild(O);let H=document.createElement("div");H.className="vd-datepicker-days";let z=new Date(c,u,1).getDay(),R=new Date(c,u+1,0).getDate(),j=new Date(c,u,0).getDate();for(let F=z-1;F>=0;F--){let U=D(j-F,!0);H.appendChild(U)}for(let F=1;F<=R;F++){let U=new Date(c,u,F),b=D(F,!1,U);H.appendChild(b)}let G=z+R,Z=G%7===0?0:7-G%7;for(let F=1;F<=Z;F++){let U=D(F,!0);H.appendChild(U)}v.appendChild(H)}else if(f==="months"){let O=document.createElement("div");O.className="vd-datepicker-months",e.forEach((H,z)=>{let R=document.createElement("button");R.type="button",R.className="vd-datepicker-month-btn",R.textContent=H.slice(0,3),h&&h.getFullYear()===c&&h.getMonth()===z&&R.classList.add("is-selected"),R.addEventListener("click",()=>{u=z,f="days",x()}),O.appendChild(R)}),v.appendChild(O)}else{let O=document.createElement("div");O.className="vd-datepicker-years";let H=Math.floor(c/10)*10;for(let z=H-1;z<=H+10;z++){let R=document.createElement("button");R.type="button",R.className="vd-datepicker-year-btn",R.textContent=z,h&&h.getFullYear()===z&&R.classList.add("is-selected"),(zH+9)&&(R.style.opacity="0.4"),R.addEventListener("click",()=>{c=z,f="months",x()}),O.appendChild(R)}v.appendChild(O)}},D=(m,w,E)=>{let I=document.createElement("button");return I.type="button",I.className="vd-datepicker-day",I.textContent=m,w?(I.classList.add("is-outside"),I.tabIndex=-1,I):(E&&P(E,d)&&I.classList.add("is-today"),E&&P(E,h)&&I.classList.add("is-selected"),E&&L(E)?(I.classList.add("is-disabled"),I):(E&&I.addEventListener("click",()=>{h=E,c=E.getFullYear(),u=E.getMonth(),n.value=C(E),g(),n.dispatchEvent(new CustomEvent("datepicker:select",{detail:{date:E,formatted:n.value},bubbles:!0})),n.dispatchEvent(new Event("change",{bubbles:!0}))}),I))},V=()=>{x(),v.classList.add("is-open"),n.setAttribute("aria-expanded","true")},g=()=>{v.classList.remove("is-open"),n.setAttribute("aria-expanded","false"),f="days"},k=()=>V(),T=m=>{y.contains(m.target)||g()},M=m=>{m.key==="Escape"&&g()};n.addEventListener("focus",k),document.addEventListener("click",T,!0),document.addEventListener("keydown",M),n.setAttribute("aria-haspopup","dialog"),n.setAttribute("aria-expanded","false"),n.setAttribute("autocomplete","off"),s.push(()=>n.removeEventListener("focus",k),()=>document.removeEventListener("click",T,!0),()=>document.removeEventListener("keydown",M)),this.instances.set(n,{cleanup:s,open:V,close:g,popup:v})},destroy:function(n){let s=this.instances.get(n);s&&(s.cleanup.forEach(i=>i()),this.instances.delete(n))},destroyAll:function(){this.instances.forEach((n,s)=>this.destroy(s))}};typeof window.Vanduo<"u"&&window.Vanduo.register("datepicker",t),window.VanduoDatepicker=t})();(function(){"use strict";let p={instances:new Map,init:function(){document.querySelectorAll("[data-vd-timepicker]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-timepicker-format")==="24h",s=parseInt(e.getAttribute("data-vd-timepicker-step")||"30",10),i=e.closest(".vd-suggest-wrapper");i||(i=document.createElement("div"),i.style.position="relative",i.style.display="inline-block",e.parentNode.insertBefore(i,e),i.appendChild(e));let a=document.createElement("div");a.className="vd-timepicker-popup",a.setAttribute("role","listbox"),i.appendChild(a);let o=[];for(let f=0;f<24;f++)for(let v=0;v<60;v+=s){let y=String(f).padStart(2,"0"),C=String(v).padStart(2,"0");if(n)o.push({display:y+":"+C,value:y+":"+C});else{let L=f<12?"AM":"PM",x=(f===0?12:f>12?f-12:f)+":"+C+" "+L;o.push({display:x,value:y+":"+C})}}let r=()=>{a.innerHTML="",o.forEach(f=>{let v=document.createElement("div");v.className="vd-timepicker-item",v.setAttribute("role","option"),v.textContent=f.display,(e.value===f.value||e.value===f.display)&&v.classList.add("is-selected"),v.addEventListener("click",()=>{e.value=f.display,a.querySelectorAll(".vd-timepicker-item").forEach(y=>y.classList.remove("is-selected")),v.classList.add("is-selected"),d(),e.dispatchEvent(new CustomEvent("timepicker:select",{detail:{display:f.display,value:f.value},bubbles:!0})),e.dispatchEvent(new Event("change",{bubbles:!0}))}),a.appendChild(v)})},l=()=>{r(),a.classList.add("is-open"),e.setAttribute("aria-expanded","true");let f=a.querySelector(".is-selected");f&&f.scrollIntoView({block:"center"})},d=()=>{a.classList.remove("is-open"),e.setAttribute("aria-expanded","false")},c=()=>l(),u=f=>{i.contains(f.target)||d()},h=f=>{f.key==="Escape"&&d()};e.addEventListener("focus",c),document.addEventListener("click",u,!0),document.addEventListener("keydown",h),e.setAttribute("aria-haspopup","listbox"),e.setAttribute("aria-expanded","false"),e.setAttribute("autocomplete","off"),e.readOnly=!0,t.push(()=>e.removeEventListener("focus",c),()=>document.removeEventListener("click",u,!0),()=>document.removeEventListener("keydown",h)),this.instances.set(e,{cleanup:t,open:l,close:d})},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("timepicker",p),window.VanduoTimepicker=p})();(function(){"use strict";let p={instances:new Map,init:function(){document.querySelectorAll(".vd-stepper").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=Array.from(e.querySelectorAll(".vd-stepper-item")),s=e.classList.contains("vd-stepper-clickable"),i=n.findIndex(o=>o.classList.contains("is-active"));i===-1&&(i=0);let a=o=>{if(o<0||o>=n.length)return;let r=i;i=o,n.forEach((l,d)=>{l.classList.remove("is-active","is-completed"),d{let l=()=>a(r);o.addEventListener("click",l),t.push(()=>o.removeEventListener("click",l))}),a(i),this.instances.set(e,{cleanup:t,setStep:a,next:()=>a(i+1),prev:()=>a(i-1),getCurrent:()=>i})},setStep:function(e,t){let n=this.instances.get(e);n&&n.setStep(t)},next:function(e){let t=this.instances.get(e);t&&t.next()},prev:function(e){let t=this.instances.get(e);t&&t.prev()},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("stepper",p),window.VanduoStepper=p})();(function(){"use strict";let p={instances:new Map,init:function(){document.querySelectorAll("[data-vd-rating]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=parseInt(e.getAttribute("data-vd-rating-max")||"5",10),s=parseFloat(e.getAttribute("data-vd-rating-value")||"0"),i=e.classList.contains("vd-rating-readonly")||e.hasAttribute("data-vd-rating-readonly"),a=s;e.classList.add("vd-rating"),e.setAttribute("role","radiogroup"),e.setAttribute("aria-label",e.getAttribute("aria-label")||"Rating"),e.innerHTML="";let o=[];for(let d=1;d<=n;d++){let c=document.createElement("button");c.type="button",c.className="vd-rating-star",c.setAttribute("role","radio"),c.setAttribute("aria-label",d+" star"+(d>1?"s":"")),c.setAttribute("aria-checked",d<=a?"true":"false"),i&&(c.tabIndex=-1),o.push(c),e.appendChild(c)}let r=document.createElement("span");r.className="vd-rating-value",r.textContent=a>0?a.toString():"",e.appendChild(r);let l=d=>{o.forEach((c,u)=>{c.classList.remove("is-active","is-half");let h=u+1;h<=Math.floor(d)?c.classList.add("is-active"):h-.5<=d&&c.classList.add("is-half"),c.setAttribute("aria-checked",h<=d?"true":"false")}),r.textContent=d>0?d.toString():""};if(l(a),!i){o.forEach((c,u)=>{let h=()=>{o.forEach((y,C)=>{y.classList.toggle("is-hovered",C<=u)})},f=()=>{o.forEach(y=>y.classList.remove("is-hovered"))},v=()=>{a=u+1,e.setAttribute("data-vd-rating-value",a),l(a),e.dispatchEvent(new CustomEvent("rating:change",{detail:{value:a,max:n},bubbles:!0}))};c.addEventListener("mouseenter",h),c.addEventListener("mouseleave",f),c.addEventListener("click",v),t.push(()=>c.removeEventListener("mouseenter",h),()=>c.removeEventListener("mouseleave",f),()=>c.removeEventListener("click",v))});let d=c=>{c.key==="ArrowRight"||c.key==="ArrowUp"?(c.preventDefault(),a1&&(a--,l(a),o[a-1].focus(),e.dispatchEvent(new CustomEvent("rating:change",{detail:{value:a,max:n},bubbles:!0}))))};e.addEventListener("keydown",d),t.push(()=>e.removeEventListener("keydown",d))}this.instances.set(e,{cleanup:t,getValue:()=>a,setValue:d=>{a=d,l(d)}})},getValue:function(e){let t=this.instances.get(e);return t?t.getValue():0},setValue:function(e,t){let n=this.instances.get(e);n&&n.setValue(t)},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("rating",p),window.VanduoRating=p})();(function(){"use strict";let p={instances:new Map,init:function(){document.querySelectorAll("[data-vd-transfer]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[];e.classList.add("vd-transfer");let n,s;try{n=JSON.parse(e.getAttribute("data-vd-transfer")||"[]").map((h,f)=>({id:h.id||"item-"+f,label:h.label||h.text||String(h),selected:!1}))}catch{n=[]}s=[];let i=new Set,a=new Set,o=()=>{e.innerHTML="";let u=r("Source",n,i,"source"),h=document.createElement("div");h.className="vd-transfer-actions";let f=document.createElement("button");f.type="button",f.className="vd-transfer-btn",f.innerHTML="›",f.setAttribute("aria-label","Move to target"),f.disabled=i.size===0,f.addEventListener("click",()=>l());let v=document.createElement("button");v.type="button",v.className="vd-transfer-btn",v.innerHTML="‹",v.setAttribute("aria-label","Move to source"),v.disabled=a.size===0,v.addEventListener("click",()=>d()),h.appendChild(f),h.appendChild(v);let y=r("Target",s,a,"target");e.appendChild(u),e.appendChild(h),e.appendChild(y)},r=(u,h,f,v)=>{let y=document.createElement("div");y.className="vd-transfer-panel";let C=document.createElement("div");C.className="vd-transfer-header";let L=document.createElement("span");L.textContent=u;let P=document.createElement("span");P.className="vd-transfer-count",P.textContent=f.size+"/"+h.length,C.appendChild(L),C.appendChild(P),y.appendChild(C);let x=document.createElement("div");x.className="vd-transfer-search";let D=document.createElement("input");D.type="text",D.placeholder="Search...",D.setAttribute("aria-label","Search "+u.toLowerCase()),x.appendChild(D),y.appendChild(x);let V=document.createElement("ul");V.className="vd-transfer-list",V.setAttribute("role","listbox");let g=k=>{V.innerHTML="",(k?h.filter(M=>(M.label||M.text||String(M)).toLowerCase().includes(k.toLowerCase())):h).forEach(M=>{let m=document.createElement("li");m.className="vd-transfer-item",m.setAttribute("role","option"),f.has(M.id)&&m.classList.add("is-selected");let w=document.createElement("input");w.type="checkbox",w.checked=f.has(M.id),w.setAttribute("aria-label",M.label);let E=document.createElement("span");E.textContent=M.label,m.addEventListener("click",()=>{f.has(M.id)?f.delete(M.id):f.add(M.id),o()}),m.appendChild(w),m.appendChild(E),V.appendChild(m)})};return D.addEventListener("input",()=>g(D.value)),g(""),y.appendChild(V),y},l=()=>{let u=n.filter(h=>i.has(h.id));n=n.filter(h=>!i.has(h.id)),s=s.concat(u),i.clear(),o(),c()},d=()=>{let u=s.filter(h=>a.has(h.id));s=s.filter(h=>!a.has(h.id)),n=n.concat(u),a.clear(),o(),c()},c=()=>{e.dispatchEvent(new CustomEvent("transfer:change",{detail:{source:n.map(u=>u.id),target:s.map(u=>u.id)},bubbles:!0}))};o(),this.instances.set(e,{cleanup:t,getTarget:()=>s.map(u=>u.id),getSource:()=>n.map(u=>u.id)})},getSelected:function(e){let t=this.instances.get(e);return t?t.getTarget():[]},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),e.innerHTML="",this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("transfer",p),window.VanduoTransfer=p})();(function(){"use strict";let p={instances:new Map,init:function(){document.querySelectorAll("[data-vd-tree]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-tree-cascade")!=="false",s;try{s=JSON.parse(e.getAttribute("data-vd-tree")||"[]")}catch{s=[]}e.classList.add("vd-tree"),e.setAttribute("role","tree");let i=(r,l)=>{l.innerHTML="",r.forEach(d=>{let c=document.createElement("li");c.className="vd-tree-node",c.setAttribute("role","treeitem"),c.setAttribute("aria-expanded",d.open?"true":"false"),d.open&&c.classList.add("is-open");let u=document.createElement("div");if(u.className="vd-tree-node-content",d.children&&d.children.length>0){let f=document.createElement("button");f.type="button",f.className="vd-tree-toggle",f.setAttribute("aria-label","Toggle"),f.addEventListener("click",v=>{v.stopPropagation(),d.open=!d.open,c.classList.toggle("is-open"),c.setAttribute("aria-expanded",d.open?"true":"false")}),u.appendChild(f)}else{let f=document.createElement("span");f.className="vd-tree-toggle-placeholder",u.appendChild(f)}if(e.hasAttribute("data-vd-tree-checkbox")){let f=document.createElement("input");f.type="checkbox",f.className="vd-tree-checkbox",f.checked=!!d.checked,f.setAttribute("aria-label",d.label),f.addEventListener("change",v=>{v.stopPropagation(),d.checked=f.checked,n&&d.children&&(a(d.children,f.checked),i(s,e)),e.dispatchEvent(new CustomEvent("tree:check",{detail:{id:d.id,checked:f.checked,label:d.label},bubbles:!0}))}),u.appendChild(f)}if(d.icon){let f=document.createElement("span");f.className="vd-tree-icon "+d.icon,u.appendChild(f)}let h=document.createElement("span");if(h.className="vd-tree-label",h.textContent=d.label||"",u.appendChild(h),c.appendChild(u),d.children&&d.children.length>0){let f=document.createElement("ul");f.className="vd-tree-children",f.setAttribute("role","group"),i(d.children,f),c.appendChild(f)}l.appendChild(c)})},a=(r,l)=>{r.forEach(d=>{d.checked=l,d.children&&a(d.children,l)})},o=r=>{let l=document.activeElement;if(!e.contains(l))return;let d=Array.from(e.querySelectorAll(".vd-tree-node-content")),c=d.indexOf(l.closest(".vd-tree-node-content"));if(c!==-1)switch(r.key){case"ArrowDown":if(r.preventDefault(),c0){let u=d[c-1].querySelector(".vd-tree-toggle, .vd-tree-label");u&&u.focus()}break}};e.addEventListener("keydown",o),t.push(()=>e.removeEventListener("keydown",o)),i(s,e),this.instances.set(e,{cleanup:t,getData:()=>s,getChecked:()=>{let r=[],l=d=>{d.forEach(c=>{c.checked&&r.push(c.id||c.label),c.children&&l(c.children)})};return l(s),r}})},getChecked:function(e){let t=this.instances.get(e);return t?t.getChecked():[]},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),e.innerHTML="",this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("tree",p),window.VanduoTree=p})();(function(){"use strict";let p={_active:!1,_steps:[],_currentStep:0,_elements:{},_cleanup:[],_boundTriggers:new WeakMap,_triggerElement:null,init:function(){document.querySelectorAll("[data-vd-spotlight]").forEach(t=>{if(this._boundTriggers.has(t))return;let n=s=>{s.preventDefault();let i=this._parseSteps(t.getAttribute("data-vd-spotlight"));i.length!==0&&this.start(i,{trigger:t})};t.addEventListener("click",n),this._boundTriggers.set(t,n)})},_parseSteps:function(e){if(typeof e!="string"||e.trim()==="")return[];try{let t=JSON.parse(e);return this._normalizeSteps(t)}catch(t){return console.error("VanduoSpotlight: invalid data-vd-spotlight payload.",t),[]}},_normalizeStep:function(e){if(!e||typeof e!="object")return null;let t=e.target,n=typeof t=="string"&&t.trim()!=="",s=typeof Element<"u"&&t instanceof Element;if(!n&&!s)return null;let i=typeof e.title=="string"?e.title:"",a=typeof e.description=="string"?e.description:typeof e.content=="string"?e.content:"";return{target:t,title:i,description:a}},_normalizeSteps:function(e){return Array.isArray(e)?e.map(t=>this._normalizeStep(t)).filter(Boolean):[]},start:function(e,t){this._active&&this.stop();let n=this._normalizeSteps(e);if(n.length===0)return;let s=t||{};this._steps=n,this._currentStep=0,this._active=!0,this._triggerElement=s.trigger||(document.activeElement instanceof HTMLElement?document.activeElement:null);let i=document.createElement("div");i.className="vd-spotlight-overlay",i.setAttribute("aria-hidden","true"),document.body.appendChild(i);let a=document.createElement("div");a.className="vd-spotlight-tooltip",a.setAttribute("role","dialog"),a.setAttribute("aria-modal","true"),a.tabIndex=-1,document.body.appendChild(a),this._elements={overlay:i,tooltip:a};let o=r=>{r.key==="Escape"&&this.stop()};document.addEventListener("keydown",o),this._cleanup.push(()=>document.removeEventListener("keydown",o)),i.addEventListener("click",()=>this.stop()),this._showStep(this._currentStep)},_showStep:function(e){let t=this._steps[e];if(!t)return;let n=typeof t.target=="string"?document.querySelector(t.target):t.target,{tooltip:s}=this._elements;document.querySelectorAll(".vd-spotlight-target").forEach(d=>{d.classList.remove("vd-spotlight-target")}),n&&(n.classList.add("vd-spotlight-target"),n.scrollIntoView({behavior:"smooth",block:"center"}));let i=this._steps.length;if(s.innerHTML="",s.removeAttribute("aria-labelledby"),s.removeAttribute("aria-describedby"),t.title){let d=document.createElement("h4");d.className="vd-spotlight-title",d.id="vd-spotlight-title-"+e+"-"+Date.now(),d.textContent=t.title,s.appendChild(d),s.setAttribute("aria-labelledby",d.id)}if(t.description){let d=document.createElement("p");d.className="vd-spotlight-description",d.id="vd-spotlight-description-"+e+"-"+Date.now(),d.textContent=t.description,s.appendChild(d),s.setAttribute("aria-describedby",d.id)}let a=document.createElement("div");a.className="vd-spotlight-footer",a.setAttribute("aria-label","Step "+(e+1)+" of "+i);let o=document.createElement("span");o.className="vd-spotlight-counter",o.textContent=e+1+" / "+i;let r=document.createElement("div");if(r.className="vd-spotlight-actions",e>0){let d=document.createElement("button");d.type="button",d.className="vd-spotlight-btn",d.textContent="Back",d.addEventListener("click",()=>this.prev()),r.appendChild(d)}let l=document.createElement("button");if(l.type="button",l.className="vd-spotlight-btn",l.textContent="Skip",l.addEventListener("click",()=>this.stop()),r.appendChild(l),ethis.next()),r.appendChild(d)}else{let d=document.createElement("button");d.type="button",d.className="vd-spotlight-btn vd-spotlight-btn-primary",d.textContent="Done",d.addEventListener("click",()=>this.stop()),r.appendChild(d)}a.appendChild(o),a.appendChild(r),s.appendChild(a),n&&requestAnimationFrame(()=>{let d=n.getBoundingClientRect(),c=s.getBoundingClientRect(),u=d.bottom+12+window.scrollY,h=d.left+(d.width-c.width)/2+window.scrollX;h=Math.max(8,Math.min(h,window.innerWidth-c.width-8)),u+c.height>window.innerHeight+window.scrollY&&(u=d.top-c.height-12+window.scrollY),s.style.top=u+"px",s.style.left=h+"px"}),document.dispatchEvent(new CustomEvent("spotlight:step",{detail:{index:e,step:e,total:i,data:t}}))},next:function(){this._currentStep0&&(this._currentStep--,this._showStep(this._currentStep))},stop:function(){if(!this._active)return;let e=this._steps.length,t={completedSteps:e===0?0:Math.min(this._currentStep+1,e),total:e,completed:e>0&&this._currentStep>=e-1};this._active=!1,document.querySelectorAll(".vd-spotlight-target").forEach(n=>{n.classList.remove("vd-spotlight-target")}),this._elements.overlay&&this._elements.overlay.parentNode&&this._elements.overlay.parentNode.removeChild(this._elements.overlay),this._elements.tooltip&&this._elements.tooltip.parentNode&&this._elements.tooltip.parentNode.removeChild(this._elements.tooltip),this._cleanup.forEach(n=>n()),this._cleanup=[],this._elements={},this._steps=[],this._currentStep=0,this._triggerElement&&this._triggerElement.isConnected&&typeof this._triggerElement.focus=="function"&&this._triggerElement.focus(),this._triggerElement=null,document.dispatchEvent(new CustomEvent("spotlight:end",{detail:t}))},destroyAll:function(){this.stop()}};typeof window.Vanduo<"u"&&window.Vanduo.register("spotlight",p),window.VanduoSpotlight=p})();(function(){"use strict";function p(i){let a=i.slice();for(let o=a.length-1;o>0;o--){let r=Math.floor(Math.random()*(o+1)),l=a[o];a[o]=a[r],a[r]=l}return a}function e(i){if(!isFinite(i)||i<0)return"0:00";let a=Math.floor(i/60),o=Math.floor(i%60);return a+":"+(o<10?"0":"")+o}function t(i){let a=parseFloat(i.min)||0,o=parseFloat(i.max)||1,l=((parseFloat(i.value)||0)-a)/(o-a)*100;i.style.setProperty("--fill",l+"%"),i.style.backgroundImage="linear-gradient(to right, var(--music-player-track-fill, currentColor) 0%, var(--music-player-track-fill, currentColor) "+l+"%, var(--music-player-track-bg, #ccc) "+l+"%, var(--music-player-track-bg, #ccc) 100%)"}function n(i){let a=document.createElement("i");return a.className="ph ph-"+i,a.setAttribute("aria-hidden","true"),a}let s={instances:new Map,defaults:{tracks:[],volume:.5,shuffle:!1,showProgress:!1,showPlaylist:!1,autoAdvance:!0},init:function(){document.querySelectorAll(".vd-music-player, [data-music-player]").forEach(i=>{if(this.instances.has(i))return;let a={},o=i.getAttribute("data-music-player-options");if(o)try{a=JSON.parse(o)}catch{}this.initPlayer(i,a)})},initPlayer:function(i,a){let o=Object.assign({},this.defaults,a||{}),l=(Array.isArray(o.tracks)?o.tracks:[]).filter(m=>m&&typeof m.url=="string"&&m.url.trim()),c={tracks:o.shuffle?p(l):l.slice(),originalTracks:l.slice(),currentIndex:0,isPlaying:!1,volume:Math.max(0,Math.min(1,o.volume)),shuffle:o.shuffle,showProgress:o.showProgress,showPlaylist:o.showPlaylist,autoAdvance:o.autoAdvance,audio:null},u=new Audio;u.volume=c.volume,u.preload="metadata",c.audio=u,this._buildDOM(i,c);let h={btnPlay:i.querySelector(".vd-music-player-btn-play"),btnPrev:i.querySelector(".vd-music-player-btn-prev"),btnNext:i.querySelector(".vd-music-player-btn-next"),btnShuffle:i.querySelector(".vd-music-player-btn-shuffle"),btnPlaylist:i.querySelector(".vd-music-player-btn-playlist"),trackName:i.querySelector(".vd-music-player-track-name"),volumeSlider:i.querySelector(".vd-music-player-volume-slider"),volumeIcon:i.querySelector(".vd-music-player-volume-icon"),progressBar:i.querySelector(".vd-music-player-progress-bar"),timeElapsed:i.querySelector(".vd-music-player-time-elapsed"),timeDuration:i.querySelector(".vd-music-player-time-duration"),playlistPanel:i.querySelector(".vd-music-player-playlist")},f=()=>{let m=h.btnPlay;m&&(m.innerHTML="",m.appendChild(n(c.isPlaying?"pause":"play")),m.setAttribute("aria-label",c.isPlaying?"Pause":"Play"),m.classList.toggle("is-active",c.isPlaying))},v=()=>{let m=h.trackName;if(!m)return;let w=c.tracks[c.currentIndex];w?(m.textContent=w.name||"Unknown Track",m.classList.remove("is-idle")):(m.textContent="No tracks loaded",m.classList.add("is-idle"))},y=()=>{let m=h.volumeIcon;if(!m)return;m.innerHTML="";let w=c.volume,E=w===0?"speaker-none":w<.5?"speaker-low":"speaker-high";m.appendChild(n(E))},C=()=>{let m=h.btnShuffle;m&&(m.classList.toggle("is-active",c.shuffle),m.setAttribute("aria-pressed",c.shuffle?"true":"false"))},L=()=>{let m=h.playlistPanel;m&&(m.innerHTML="",c.tracks.forEach((w,E)=>{let I=document.createElement("button");I.className="vd-music-player-playlist-item"+(E===c.currentIndex?" is-active":""),I.type="button",I.setAttribute("data-index",String(E)),I.setAttribute("aria-current",E===c.currentIndex?"true":"false");let O=document.createElement("span");O.className="vd-music-player-playlist-num",O.textContent=String(E+1);let H=document.createElement("span");H.className="vd-music-player-playlist-name",H.textContent=w.name||"Track "+(E+1),I.appendChild(O),I.appendChild(H),m.appendChild(I)}))},P=()=>{let m=h.progressBar;if(!m||!u.duration)return;let w=u.currentTime/u.duration*100;m.value=String(w),t(m),h.timeElapsed&&(h.timeElapsed.textContent=e(u.currentTime)),h.timeDuration&&(h.timeDuration.textContent=e(u.duration))},x=(m,w)=>{let E=c.tracks[m];E&&(c.currentIndex=m,u.src=E.url,v(),L(),h.progressBar&&(h.progressBar.value="0",t(h.progressBar)),h.timeElapsed&&(h.timeElapsed.textContent="0:00"),h.timeDuration&&(h.timeDuration.textContent="0:00"),i.dispatchEvent(new CustomEvent("musicplayer:trackchange",{bubbles:!0,detail:{index:m,name:E.name,url:E.url}})),w&&u.play().catch(()=>{}))},D=[],V=()=>{c.isPlaying=!0,f(),i.dispatchEvent(new CustomEvent("musicplayer:play",{bubbles:!0}))},g=()=>{c.isPlaying=!1,f(),i.dispatchEvent(new CustomEvent("musicplayer:pause",{bubbles:!0}))},k=()=>{if(c.autoAdvance&&c.tracks.length>1){let m=(c.currentIndex+1)%c.tracks.length;x(m,!0)}else c.isPlaying=!1,f(),i.dispatchEvent(new CustomEvent("musicplayer:ended",{bubbles:!0}))},T=()=>{c.showProgress&&P()},M=()=>{h.timeDuration&&(h.timeDuration.textContent=e(u.duration)),h.progressBar&&(h.progressBar.max="100",t(h.progressBar))};if(u.addEventListener("play",V),u.addEventListener("pause",g),u.addEventListener("ended",k),u.addEventListener("timeupdate",T),u.addEventListener("loadedmetadata",M),D.push(()=>{u.removeEventListener("play",V),u.removeEventListener("pause",g),u.removeEventListener("ended",k),u.removeEventListener("timeupdate",T),u.removeEventListener("loadedmetadata",M),u.pause(),u.src=""}),h.btnPlay){let m=()=>{!u.src&&c.tracks.length&&x(c.currentIndex,!1),c.isPlaying?u.pause():u.play().catch(()=>{})};h.btnPlay.addEventListener("click",m),D.push(()=>h.btnPlay.removeEventListener("click",m));let w=E=>{(E.key===" "||E.key==="Enter")&&(E.preventDefault(),m())};h.btnPlay.addEventListener("keydown",w),D.push(()=>h.btnPlay.removeEventListener("keydown",w))}if(h.btnPrev){let m=()=>{if(c.tracks.length)if(u.currentTime>3)u.currentTime=0;else{let w=c.currentIndex===0?c.tracks.length-1:c.currentIndex-1;x(w,c.isPlaying)}};h.btnPrev.addEventListener("click",m),D.push(()=>h.btnPrev.removeEventListener("click",m))}if(h.btnNext){let m=()=>{if(!c.tracks.length)return;let w=(c.currentIndex+1)%c.tracks.length;x(w,c.isPlaying)};h.btnNext.addEventListener("click",m),D.push(()=>h.btnNext.removeEventListener("click",m))}if(h.btnShuffle){let m=()=>{if(c.shuffle=!c.shuffle,c.shuffle){let w=c.tracks[c.currentIndex];c.tracks=p(c.tracks);let E=c.tracks.findIndex(I=>I===w);E>0&&(c.tracks.splice(E,1),c.tracks.unshift(w)),c.currentIndex=0}else{let w=c.tracks[c.currentIndex];c.tracks=c.originalTracks.slice(),c.currentIndex=c.tracks.findIndex(E=>E===w),c.currentIndex<0&&(c.currentIndex=0)}C(),L()};h.btnShuffle.addEventListener("click",m),D.push(()=>h.btnShuffle.removeEventListener("click",m))}if(h.btnPlaylist){let m=()=>{let w=h.playlistPanel;if(!w)return;let E=w.classList.toggle("is-open");h.btnPlaylist.classList.toggle("is-active",E),h.btnPlaylist.setAttribute("aria-expanded",E?"true":"false")};h.btnPlaylist.addEventListener("click",m),D.push(()=>h.btnPlaylist.removeEventListener("click",m))}if(h.volumeSlider){let m=w=>{let E=parseFloat(w.target.value);c.volume=E,u.volume=E,y(),t(h.volumeSlider),i.dispatchEvent(new CustomEvent("musicplayer:volumechange",{bubbles:!0,detail:{volume:E}}))};h.volumeSlider.addEventListener("input",m),D.push(()=>h.volumeSlider.removeEventListener("input",m)),t(h.volumeSlider)}if(h.progressBar){let m=w=>{if(!u.duration)return;let E=parseFloat(w.target.value);u.currentTime=E/100*u.duration,t(h.progressBar)};h.progressBar.addEventListener("input",m),D.push(()=>h.progressBar.removeEventListener("input",m))}if(h.playlistPanel){let m=w=>{let E=w.target.closest(".vd-music-player-playlist-item");if(!E)return;let I=parseInt(E.getAttribute("data-index"),10);isNaN(I)||x(I,!0)};h.playlistPanel.addEventListener("click",m),D.push(()=>h.playlistPanel.removeEventListener("click",m))}f(),v(),y(),o.showPlaylist&&L(),this.instances.set(i,{state:c,audio:u,refs:h,cleanup:D}),i.setAttribute("data-music-player-initialized","true")},_buildDOM:function(i,a){if(i.querySelector(".vd-music-player-controls"))return;i.setAttribute("role","region"),i.setAttribute("aria-label","Music Player"),a.showProgress&&i.classList.add("has-progress"),a.showPlaylist&&i.classList.add("has-playlist");let o=document.createElement("div");o.className="vd-music-player-info";let r=document.createElement("span");r.className="vd-music-player-icon",r.setAttribute("aria-hidden","true"),r.appendChild(n("music-note"));let l=document.createElement("span");l.className="vd-music-player-track-name",l.setAttribute("aria-live","polite"),l.setAttribute("aria-atomic","true"),o.appendChild(r),o.appendChild(l),i.appendChild(o);let d=document.createElement("div");d.className="vd-music-player-controls",d.setAttribute("role","group"),d.setAttribute("aria-label","Playback controls");let c=document.createElement("button");c.type="button",c.className="vd-music-player-btn vd-music-player-btn-prev",c.setAttribute("aria-label","Previous track"),c.appendChild(n("skip-back"));let u=document.createElement("button");u.type="button",u.className="vd-music-player-btn vd-music-player-btn-play",u.setAttribute("aria-label","Play"),u.appendChild(n("play"));let h=document.createElement("button");if(h.type="button",h.className="vd-music-player-btn vd-music-player-btn-next",h.setAttribute("aria-label","Next track"),h.appendChild(n("skip-forward")),d.appendChild(c),d.appendChild(u),d.appendChild(h),a.showPlaylist||a.shuffle!==void 0){let L=document.createElement("button");L.type="button",L.className="vd-music-player-btn vd-music-player-btn-shuffle",L.setAttribute("aria-label","Shuffle"),L.setAttribute("aria-pressed",a.shuffle?"true":"false"),L.appendChild(n("shuffle")),d.appendChild(L)}let f=document.createElement("span");f.className="vd-music-player-spacer",f.setAttribute("aria-hidden","true"),d.appendChild(f);let v=document.createElement("div");v.className="vd-music-player-volume";let y=document.createElement("span");y.className="vd-music-player-volume-icon",y.setAttribute("aria-hidden","true");let C=document.createElement("input");if(C.type="range",C.className="vd-music-player-volume-slider",C.min="0",C.max="1",C.step="0.01",C.value=String(a.volume),C.setAttribute("aria-label","Volume"),v.appendChild(y),v.appendChild(C),d.appendChild(v),a.showPlaylist){let L=document.createElement("button");L.type="button",L.className="vd-music-player-btn vd-music-player-btn-playlist",L.setAttribute("aria-label","Show playlist"),L.setAttribute("aria-expanded","false"),L.appendChild(n("playlist")),d.appendChild(L)}if(i.appendChild(d),a.showProgress){let L=document.createElement("div");L.className="vd-music-player-progress";let P=document.createElement("span");P.className="vd-music-player-time vd-music-player-time-elapsed",P.textContent="0:00",P.setAttribute("aria-hidden","true");let x=document.createElement("input");x.type="range",x.className="vd-music-player-progress-bar",x.min="0",x.max="100",x.step="0.1",x.value="0",x.setAttribute("aria-label","Seek");let D=document.createElement("span");D.className="vd-music-player-time vd-music-player-time-duration",D.textContent="0:00",D.setAttribute("aria-hidden","true"),L.appendChild(P),L.appendChild(x),L.appendChild(D),i.appendChild(L)}if(a.showPlaylist){let L=document.createElement("div");L.className="vd-music-player-playlist",L.setAttribute("aria-label","Playlist"),i.appendChild(L)}},play:function(i){let a=this.instances.get(i);a&&(!a.audio.src&&a.state.tracks.length&&(a.audio.src=a.state.tracks[a.state.currentIndex].url),a.audio.play().catch(()=>{}))},pause:function(i){let a=this.instances.get(i);a&&a.audio.pause()},toggle:function(i){let a=this.instances.get(i);a&&(a.state.isPlaying?this.pause(i):this.play(i))},next:function(i){let a=this.instances.get(i);if(!a||!a.state.tracks.length)return;let o=(a.state.currentIndex+1)%a.state.tracks.length;this._loadTrack(a,o,a.state.isPlaying)},previous:function(i){let a=this.instances.get(i);if(!a||!a.state.tracks.length)return;let o=a.state.tracks.length,r=(a.state.currentIndex-1+o)%o;this._loadTrack(a,r,a.state.isPlaying)},setVolume:function(i,a){let o=this.instances.get(i);if(!o)return;let r=Math.max(0,Math.min(1,a));o.state.volume=r,o.audio.volume=r,o.refs.volumeSlider&&(o.refs.volumeSlider.value=String(r),t(o.refs.volumeSlider)),i.dispatchEvent(new CustomEvent("musicplayer:volumechange",{bubbles:!0,detail:{volume:r}}))},setTrack:function(i,a){let o=this.instances.get(i);o&&this._loadTrack(o,a,o.state.isPlaying)},shuffle:function(i){let a=this.instances.get(i);!a||!a.refs.btnShuffle||a.refs.btnShuffle.click()},getState:function(i){let a=this.instances.get(i);if(!a)return null;let o=a.state;return{isPlaying:o.isPlaying,currentIndex:o.currentIndex,currentTrack:o.tracks[o.currentIndex]||null,volume:o.volume,shuffle:o.shuffle,tracks:o.tracks.slice()}},destroy:function(i){let a=this.instances.get(i);a&&(a.cleanup.forEach(o=>o()),this.instances.delete(i),i.removeAttribute("data-music-player-initialized"))},destroyAll:function(){this.instances.forEach((i,a)=>this.destroy(a))},_loadTrack:function(i,a,o){let r=i.state.tracks[a];if(!r)return;let l=this._containerOf(i);i.state.currentIndex=a,i.audio.src=r.url,i.refs.trackName&&(i.refs.trackName.textContent=r.name||"Unknown Track",i.refs.trackName.classList.remove("is-idle")),i.refs.playlistPanel&&i.refs.playlistPanel.querySelectorAll(".vd-music-player-playlist-item").forEach((d,c)=>{let u=c===a;d.classList.toggle("is-active",u),d.setAttribute("aria-current",u?"true":"false")}),i.refs.progressBar&&(i.refs.progressBar.value="0",t(i.refs.progressBar)),i.refs.timeElapsed&&(i.refs.timeElapsed.textContent="0:00"),i.refs.timeDuration&&(i.refs.timeDuration.textContent="0:00"),l&&l.dispatchEvent(new CustomEvent("musicplayer:trackchange",{bubbles:!0,detail:{index:a,name:r.name,url:r.url}})),o&&i.audio.play().catch(()=>{})},_containerOf:function(i){for(let[a,o]of this.instances)if(o===i)return a;return null}};typeof window.Vanduo<"u"&&window.Vanduo.register("musicPlayer",s),window.VanduoMusicPlayer=s})();var Q=window.Vanduo;var oe=Q; //# sourceMappingURL=vanduo.cjs.min.js.map diff --git a/dist/vanduo.cjs.min.js.map b/dist/vanduo.cjs.min.js.map index c1aebc3..5033b65 100644 --- a/dist/vanduo.cjs.min.js.map +++ b/dist/vanduo.cjs.min.js.map @@ -1,7 +1,7 @@ { "version": 3, - "sources": ["../js/index.js", "../js/utils/lifecycle.js", "../js/vanduo.js", "../js/components/code-snippet.js", "../js/components/collapsible.js", "../js/components/dropdown.js", "../js/components/font-switcher.js", "../js/components/grid.js", "../js/components/image-box.js", "../js/components/modals.js", "../js/components/navbar.js", "../js/components/pagination.js", "../js/components/parallax.js", "../js/components/preloader.js", "../js/components/select.js", "../js/components/sidenav.js", "../js/components/tabs.js", "../js/components/theme-customizer.js", "../js/components/theme-switcher.js", "../js/components/toast.js", "../js/components/tooltips.js", "../js/components/doc-search.js", "../js/components/draggable.js", "../js/components/lazy-load.js", "../js/components/glass.js", "../js/components/flow.js", "../js/components/bubble.js", "../js/components/waypoint.js", "../js/components/ripple.js", "../js/components/affix.js", "../js/components/suggest.js", "../js/components/validate.js", "../js/components/datepicker.js", "../js/components/timepicker.js", "../js/components/stepper.js", "../js/components/rating.js", "../js/components/transfer.js", "../js/components/tree.js", "../js/components/spotlight.js", "../js/components/music-player.js"], - "sourcesContent": ["/**\n * Vanduo Framework - Bundle Entry Point\n * This file imports all framework components for bundling.\n *\n * All component files are side-effect modules that:\n * 1. Define their component object\n * 2. Register with window.Vanduo via Vanduo.register()\n * 3. Expose a convenience global (e.g. window.VanduoTooltips)\n *\n * The IIFE build uses `globalName: 'VanduoBundle'` so that esbuild's\n * wrapper variable does NOT shadow the real `window.Vanduo` that the\n * side-effect scripts create. After the bundle executes, `window.Vanduo`\n * is the fully-populated framework object.\n *\n * For ESM/CJS consumers we re-export `window.Vanduo` as the default\n * and named export so `import { Vanduo }` and `const { Vanduo } = require()`\n * both work.\n */\n\n// Utilities (must load first \u2014 helpers defines `ready()`, `safeStorageGet()` etc.)\nimport './utils/helpers.js';\nimport './utils/lifecycle.js';\n\n// Core framework object (creates window.Vanduo)\nimport './vanduo.js';\n\n// Components (each registers itself with window.Vanduo)\nimport './components/code-snippet.js';\nimport './components/collapsible.js';\nimport './components/dropdown.js';\nimport './components/font-switcher.js';\nimport './components/grid.js';\nimport './components/image-box.js';\nimport './components/modals.js';\nimport './components/navbar.js';\nimport './components/pagination.js';\nimport './components/parallax.js';\nimport './components/preloader.js';\nimport './components/select.js';\nimport './components/sidenav.js';\nimport './components/tabs.js';\nimport './components/theme-customizer.js';\nimport './components/theme-switcher.js';\nimport './components/toast.js';\nimport './components/tooltips.js';\nimport './components/doc-search.js';\nimport './components/draggable.js';\nimport './components/lazy-load.js';\n\n// Effects (glass scroll activation)\nimport './components/glass.js';\n\n// Phase 10 (v1.2.7) components\nimport './components/flow.js';\nimport './components/bubble.js';\nimport './components/waypoint.js';\nimport './components/ripple.js';\nimport './components/affix.js';\nimport './components/suggest.js';\nimport './components/validate.js';\nimport './components/datepicker.js';\nimport './components/timepicker.js';\nimport './components/stepper.js';\nimport './components/rating.js';\nimport './components/transfer.js';\nimport './components/tree.js';\nimport './components/spotlight.js';\nimport './components/music-player.js';\n\n// Re-export for ESM / CJS consumers\nconst Vanduo = window.Vanduo;\nexport { Vanduo };\nexport default Vanduo;\n", "/**\n * Vanduo Framework - Lifecycle Manager\n * Central registry for component instances and cleanup\n * Prevents memory leaks in SPAs by tracking event listeners\n */\n\n(function() {\n 'use strict';\n\n /**\n * Lifecycle Manager\n * Simple registry that tracks component instances and their cleanup functions\n */\n const Lifecycle = {\n // Map of element -> { componentName, cleanupFunctions }\n instances: new Map(),\n\n /**\n * Register a component instance\n * @param {HTMLElement} element - The DOM element\n * @param {string} componentName - Name of the component\n * @param {Array} cleanupFns - Functions to call on destroy\n */\n register: function(element, componentName, cleanupFns = []) {\n if (this.instances.has(element)) {\n // Already registered, merge cleanup functions\n const existing = this.instances.get(element);\n existing.cleanup = existing.cleanup.concat(cleanupFns);\n return;\n }\n\n this.instances.set(element, {\n component: componentName,\n cleanup: cleanupFns,\n registeredAt: Date.now()\n });\n },\n\n /**\n * Unregister a single element and run its cleanup\n * @param {HTMLElement} element - The element to unregister\n */\n unregister: function(element) {\n const instance = this.instances.get(element);\n if (!instance) return;\n\n // Run all cleanup functions\n instance.cleanup.forEach(function(fn) {\n try {\n fn();\n } catch (e) {\n console.warn('[Vanduo Lifecycle] Cleanup error:', e);\n }\n });\n\n this.instances.delete(element);\n },\n\n /**\n * Destroy all instances of a specific component\n * @param {string} componentName - Optional component name filter\n */\n destroyAll: function(componentName) {\n const toRemove = [];\n\n this.instances.forEach(function(instance, element) {\n if (!componentName || instance.component === componentName) {\n toRemove.push(element);\n }\n });\n\n toRemove.forEach(function(element) {\n Lifecycle.unregister(element);\n });\n },\n\n /**\n * Destroy all instances within a specific container\n * Useful for SPAs when navigating between pages\n * @param {HTMLElement} container - Container element\n */\n destroyAllInContainer: function(container) {\n const toRemove = [];\n\n this.instances.forEach(function(instance, element) {\n if (container.contains(element)) {\n toRemove.push(element);\n }\n });\n\n toRemove.forEach(function(element) {\n Lifecycle.unregister(element);\n });\n },\n\n /**\n * Get all registered instances (for debugging)\n * @returns {Array} Array of instance info objects\n */\n getAll: function() {\n const result = [];\n this.instances.forEach(function(instance, element) {\n result.push({\n element: element,\n component: instance.component,\n registeredAt: instance.registeredAt\n });\n });\n return result;\n },\n\n /**\n * Check if an element is registered\n * @param {HTMLElement} element - The element to check\n * @returns {boolean}\n */\n has: function(element) {\n return this.instances.has(element);\n }\n };\n\n // Auto-cleanup on page unload\n window.addEventListener('beforeunload', function() {\n Lifecycle.destroyAll();\n });\n\n // Expose globally\n window.VanduoLifecycle = Lifecycle;\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('lifecycle', Lifecycle);\n }\n\n})();\n", "/**\n * Vanduo Framework - Main JavaScript File\n */\n\n(function () {\n 'use strict';\n\n const VANDUO_VERSION = typeof __VANDUO_VERSION__ !== 'undefined' ? __VANDUO_VERSION__ : '0.0.0-dev';\n\n /**\n * Vanduo Framework Object\n */\n const Vanduo = {\n version: VANDUO_VERSION,\n components: {},\n\n /**\n * Initialize framework\n * Call this after DOM is ready and all components are loaded\n */\n init: function () {\n // Initialize components when DOM is ready\n if (typeof ready !== 'undefined') {\n ready(() => {\n this.initComponents();\n });\n } else {\n // Fallback if helpers.js is not loaded\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => {\n this.initComponents();\n });\n } else {\n this.initComponents();\n }\n }\n },\n\n /**\n * Initialize all components\n */\n initComponents: function () {\n // Initialize all registered components\n Object.keys(this.components).forEach((name) => {\n const component = this.components[name];\n if (component.init && typeof component.init === 'function') {\n try {\n component.init();\n } catch (e) {\n console.warn('[Vanduo] Failed to initialize component \"' + name + '\":', e);\n }\n }\n });\n\n console.log('Vanduo Framework v' + this.version + ' initialized');\n },\n\n /**\n * Register a component\n * @param {string} name - Component name\n * @param {Object} component - Component object with init method\n */\n register: function (name, component) {\n this.components[name] = component;\n // Note: Components are NOT auto-initialized on registration\n // Call Vanduo.init() explicitly after all components are registered\n },\n\n /**\n * Re-initialize a component (useful after dynamic DOM changes)\n * @param {string} name - Component name\n */\n reinit: function (name) {\n const component = this.components[name];\n if (component && component.init && typeof component.init === 'function') {\n try {\n component.init();\n } catch (e) {\n console.warn('[Vanduo] Failed to reinitialize component \"' + name + '\":', e);\n }\n }\n },\n\n /**\n * Destroy all component instances and clean up event listeners\n * Uses lifecycle manager for memory leak prevention\n */\n destroyAll: function () {\n // First, destroy components that have their own destroyAll\n const names = Object.keys(this.components);\n for (let i = 0; i < names.length; i++) {\n const component = this.components[names[i]];\n if (component && component.destroyAll && typeof component.destroyAll === 'function') {\n try {\n component.destroyAll();\n } catch (e) {\n console.warn('[Vanduo] Failed to destroy component \"' + names[i] + '\":', e);\n }\n }\n }\n\n // Then, cleanup any remaining registered elements via lifecycle manager\n if (typeof window.VanduoLifecycle !== 'undefined') {\n window.VanduoLifecycle.destroyAll();\n }\n },\n\n /**\n * Get component instance\n * @param {string} name - Component name\n * @returns {Object|null}\n */\n getComponent: function (name) {\n return this.components[name] || null;\n }\n };\n\n // Expose to global scope\n window.Vanduo = Vanduo;\n\n})();\n", "/**\n * Vanduo Framework - Code Snippet Component\n * Copyable code blocks with tabs, syntax highlighting, and HTML extraction\n */\n\n(function () {\n 'use strict';\n\n /**\n * Code Snippet Component\n */\n const CodeSnippet = {\n _snippetIdCounter: 0,\n\n getSnippetInstanceId: function (snippet) {\n if (snippet.dataset.codeSnippetId) {\n return snippet.dataset.codeSnippetId;\n }\n\n const baseId = (snippet.id || '').trim();\n if (baseId) {\n snippet.dataset.codeSnippetId = `snippet-${baseId}`;\n return snippet.dataset.codeSnippetId;\n }\n\n this._snippetIdCounter += 1;\n snippet.dataset.codeSnippetId = `snippet-auto-${this._snippetIdCounter}`;\n return snippet.dataset.codeSnippetId;\n },\n\n addListener: function (snippet, target, event, handler) {\n if (!target) return;\n target.addEventListener(event, handler);\n if (!snippet._codeSnippetCleanup) {\n snippet._codeSnippetCleanup = [];\n }\n snippet._codeSnippetCleanup.push(() => target.removeEventListener(event, handler));\n },\n\n /**\n * Initialize all code snippet components\n */\n init: function () {\n const snippets = document.querySelectorAll('.vd-code-snippet');\n\n snippets.forEach(snippet => {\n if (!snippet.dataset.initialized) {\n this.initSnippet(snippet);\n }\n });\n },\n\n /**\n * Initialize a single code snippet\n * @param {HTMLElement} snippet - Code snippet container element\n */\n initSnippet: function (snippet) {\n snippet.dataset.initialized = 'true';\n snippet._codeSnippetCleanup = [];\n\n // Handle collapsible toggle\n const toggle = snippet.querySelector('.vd-code-snippet-toggle');\n const content = snippet.querySelector('.vd-code-snippet-content');\n\n if (toggle && content) {\n this.initCollapsible(snippet, toggle, content);\n }\n\n // Handle tabs\n const tabs = snippet.querySelectorAll('.vd-code-snippet-tab');\n const panes = snippet.querySelectorAll('.vd-code-snippet-pane');\n\n if (tabs.length > 0) {\n this.initTabs(snippet, tabs, panes);\n }\n\n // Handle copy button\n const copyBtn = snippet.querySelector('.vd-code-snippet-copy');\n if (copyBtn) {\n this.initCopyButton(snippet, copyBtn);\n }\n\n // Handle HTML extraction\n const extractPanes = snippet.querySelectorAll('[data-extract]');\n extractPanes.forEach(pane => {\n this.extractHtml(pane);\n });\n\n // Handle line numbers\n const lineNumberPanes = snippet.querySelectorAll('.has-line-numbers');\n lineNumberPanes.forEach(pane => {\n this.addLineNumbers(pane);\n });\n },\n\n /**\n * Initialize collapsible functionality\n * @param {HTMLElement} snippet - Code snippet container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} content - Collapsible content\n */\n initCollapsible: function (snippet, toggle, content) {\n // Set initial state\n const isExpanded = snippet.dataset.expanded === 'true';\n toggle.setAttribute('aria-expanded', isExpanded);\n content.dataset.visible = isExpanded;\n\n this.addListener(snippet, toggle, 'click', () => {\n const expanded = snippet.dataset.expanded === 'true';\n snippet.dataset.expanded = !expanded;\n toggle.setAttribute('aria-expanded', !expanded);\n content.dataset.visible = !expanded;\n\n // Extract HTML on first expand if needed\n if (!expanded) {\n const extractPanes = content.querySelectorAll('[data-extract]:not([data-extracted])');\n extractPanes.forEach(pane => {\n this.extractHtml(pane);\n });\n }\n\n // Dispatch event\n const event = new CustomEvent('codesnippet:toggle', {\n bubbles: true,\n detail: { snippet, expanded: !expanded }\n });\n snippet.dispatchEvent(event);\n });\n },\n\n /**\n * Initialize tab functionality\n * @param {HTMLElement} snippet - Code snippet container\n * @param {NodeList} tabs - Tab buttons\n * @param {NodeList} panes - Code panes\n */\n initTabs: function (snippet, tabs, panes) {\n const snippetId = this.getSnippetInstanceId(snippet);\n\n // Set up ARIA attributes\n const tabList = snippet.querySelector('.vd-code-snippet-tabs');\n if (tabList) {\n tabList.setAttribute('role', 'tablist');\n }\n\n tabs.forEach((tab, index) => {\n const lang = tab.dataset.lang;\n const isActive = tab.classList.contains('is-active');\n\n // Set ARIA attributes\n tab.setAttribute('role', 'tab');\n tab.setAttribute('aria-selected', isActive);\n tab.setAttribute('tabindex', isActive ? '0' : '-1');\n tab.id = tab.id || `code-tab-${snippetId}-${lang || 'tab'}-${index}`;\n\n // Find corresponding pane\n const pane = snippet.querySelector(`.vd-code-snippet-pane[data-lang=\"${lang}\"]`);\n if (pane) {\n pane.id = pane.id || `code-pane-${snippetId}-${lang || 'pane'}-${index}`;\n pane.setAttribute('role', 'tabpanel');\n tab.setAttribute('aria-controls', pane.id);\n pane.setAttribute('aria-labelledby', tab.id);\n }\n\n // Click handler\n this.addListener(snippet, tab, 'click', () => {\n this.switchTab(snippet, tab, tabs, panes);\n });\n\n // Keyboard navigation\n this.addListener(snippet, tab, 'keydown', (e) => {\n this.handleTabKeydown(e, snippet, tabs, panes);\n });\n });\n },\n\n /**\n * Switch to a specific tab\n * @param {HTMLElement} snippet - Code snippet container\n * @param {HTMLElement} activeTab - Tab to activate\n * @param {NodeList} tabs - All tab buttons\n * @param {NodeList} panes - All code panes\n */\n switchTab: function (snippet, activeTab, tabs, panes) {\n const lang = activeTab.dataset.lang;\n\n // Deactivate all tabs\n tabs.forEach(tab => {\n tab.classList.remove('is-active');\n tab.setAttribute('aria-selected', 'false');\n tab.setAttribute('tabindex', '-1');\n });\n\n // Hide all panes\n panes.forEach(pane => {\n pane.classList.remove('is-active');\n });\n\n // Activate selected tab\n activeTab.classList.add('is-active');\n activeTab.setAttribute('aria-selected', 'true');\n activeTab.setAttribute('tabindex', '0');\n\n // Show corresponding pane\n const activePane = snippet.querySelector(`.vd-code-snippet-pane[data-lang=\"${lang}\"]`);\n if (activePane) {\n activePane.classList.add('is-active');\n }\n\n // Dispatch event\n const event = new CustomEvent('codesnippet:tabchange', {\n bubbles: true,\n detail: { snippet, tab: activeTab, lang }\n });\n snippet.dispatchEvent(event);\n },\n\n /**\n * Handle keyboard navigation for tabs\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} snippet - Code snippet container\n * @param {NodeList} tabs - All tab buttons\n * @param {NodeList} panes - All code panes\n */\n handleTabKeydown: function (e, snippet, tabs, panes) {\n const tabArray = Array.from(tabs);\n const currentIndex = tabArray.indexOf(e.target);\n let newIndex;\n\n switch (e.key) {\n case 'ArrowLeft':\n e.preventDefault();\n newIndex = currentIndex > 0 ? currentIndex - 1 : tabArray.length - 1;\n break;\n case 'ArrowRight':\n e.preventDefault();\n newIndex = currentIndex < tabArray.length - 1 ? currentIndex + 1 : 0;\n break;\n case 'Home':\n e.preventDefault();\n newIndex = 0;\n break;\n case 'End':\n e.preventDefault();\n newIndex = tabArray.length - 1;\n break;\n default:\n return;\n }\n\n if (newIndex !== currentIndex) {\n tabArray[newIndex].focus();\n this.switchTab(snippet, tabArray[newIndex], tabs, panes);\n }\n },\n\n /**\n * Initialize copy button\n * @param {HTMLElement} snippet - Code snippet container\n * @param {HTMLElement} copyBtn - Copy button element\n */\n initCopyButton: function (snippet, copyBtn) {\n this.addListener(snippet, copyBtn, 'click', async () => {\n await this.copyCode(snippet, copyBtn);\n });\n },\n\n /**\n * Copy code to clipboard\n * @param {HTMLElement} snippet - Code snippet container\n * @param {HTMLElement} copyBtn - Copy button element\n */\n copyCode: async function (snippet, copyBtn) {\n const activePane = snippet.querySelector('.vd-code-snippet-pane.is-active') ||\n snippet.querySelector('.vd-code-snippet-pane');\n\n if (!activePane) {\n console.warn('CodeSnippet: No code pane found');\n return;\n }\n\n const codeElement = activePane.querySelector('code') || activePane;\n const code = codeElement.textContent;\n\n let copySuccess;\n try {\n await navigator.clipboard.writeText(code);\n copySuccess = true;\n } catch (_err) {\n // Fallback for older browsers\n copySuccess = this.fallbackCopy(code);\n }\n this.showCopyFeedback(copyBtn, copySuccess);\n\n // Dispatch event\n const event = new CustomEvent('codesnippet:copy', {\n bubbles: true,\n detail: { snippet, code, success: copySuccess }\n });\n snippet.dispatchEvent(event);\n },\n\n /**\n * Fallback copy method for older browsers\n * @param {string} text - Text to copy\n * @returns {boolean} Success status\n */\n fallbackCopy: function (text) {\n const textarea = document.createElement('textarea');\n textarea.value = text;\n textarea.style.position = 'fixed';\n textarea.style.left = '-9999px';\n textarea.style.top = '-9999px';\n document.body.appendChild(textarea);\n textarea.focus();\n textarea.select();\n\n let success = false;\n try {\n success = document.execCommand('copy');\n } catch (err) {\n console.warn('CodeSnippet: Fallback copy failed', err);\n }\n\n document.body.removeChild(textarea);\n return success;\n },\n\n /**\n * Show copy feedback\n * @param {HTMLElement} copyBtn - Copy button element\n * @param {boolean} success - Whether copy was successful\n */\n showCopyFeedback: function (copyBtn, success) {\n if (success) {\n copyBtn.classList.add('is-copied');\n\n // Announce to screen readers\n const announcement = document.createElement('span');\n announcement.setAttribute('role', 'status');\n announcement.setAttribute('aria-live', 'polite');\n announcement.className = 'sr-only';\n announcement.textContent = 'Code copied to clipboard';\n copyBtn.appendChild(announcement);\n\n setTimeout(() => {\n copyBtn.classList.remove('is-copied');\n if (announcement.parentNode) {\n announcement.parentNode.removeChild(announcement);\n }\n }, 2000);\n }\n },\n\n /**\n * Extract HTML from a demo element\n * @param {HTMLElement} pane - Code pane with data-extract attribute\n */\n extractHtml: function (pane) {\n const selector = pane.dataset.extract;\n if (!selector) return;\n\n const source = document.querySelector(selector);\n if (!source) {\n console.warn(`CodeSnippet: Source element not found: ${selector}`);\n return;\n }\n\n // Get inner HTML\n let html = source.innerHTML;\n\n // Format the HTML\n html = this.formatHtml(html);\n\n // Escape for display\n html = this.escapeHtml(html);\n\n // Apply syntax highlighting\n html = this.highlightHtml(html);\n\n // Set content via DOM API to avoid string-based HTML insertion\n const codeEl = document.createElement('code');\n codeEl.innerHTML = html;\n pane.replaceChildren(codeEl);\n pane.dataset.extracted = 'true';\n },\n\n /**\n * Format HTML with proper indentation\n * @param {string} html - Raw HTML string\n * @returns {string} Formatted HTML\n */\n formatHtml: function (html) {\n // Remove leading/trailing whitespace\n html = html.trim();\n\n // Simple formatting: normalize whitespace\n // Split by tags, then rejoin with proper indentation\n const lines = html.split('\\n');\n let indent = 0;\n const indentSize = 2;\n const formattedLines = [];\n\n lines.forEach(line => {\n line = line.trim();\n if (!line) return;\n\n // Check for closing tags at start\n if (line.match(/^<\\/\\w/)) {\n indent = Math.max(0, indent - indentSize);\n }\n\n formattedLines.push(' '.repeat(indent) + line);\n\n // Check for opening tags (not self-closing)\n // Use short fixed-length regex + indexOf to prevent ReDoS\n const hasOpenTag = /<[a-zA-Z]/.test(line);\n const isSelfClosing = line.includes('/>');\n if (hasOpenTag && !isSelfClosing) {\n // Don't indent for void elements\n if (!line.match(/<(br|hr|img|input|meta|link|area|base|col|embed|param|source|track|wbr)/i)) {\n // Only indent if not also closing on same line\n if (!line.match(/<\\/\\w+>$/)) {\n indent += indentSize;\n }\n }\n }\n });\n\n return formattedLines.join('\\n');\n },\n\n /**\n * Escape HTML entities for display\n * @param {string} html - HTML string\n * @returns {string} Escaped HTML\n */\n escapeHtml: function (html) {\n const div = document.createElement('div');\n div.textContent = html;\n return div.innerHTML;\n },\n\n /**\n * Apply syntax highlighting to HTML\n * @param {string} html - Escaped HTML string\n * @returns {string} HTML with syntax highlighting spans\n */\n highlightHtml: function (html) {\n // Highlight HTML tags\n html = html.replace(/(<\\/?)([\\w-]+)/g, '$1$2');\n\n // Highlight attributes\n html = html.replace(/([\\w-]+)(=)("|')/g, '$1$2$3');\n\n // Highlight attribute values (strings)\n html = html.replace(/("|')([^&]*)("|')/g, '$1$2$3');\n\n // Highlight comments\n html = html.replace(/(<!--)(.*?)(-->)/g, '$1$2$3');\n\n return html;\n },\n\n /**\n * Apply syntax highlighting to CSS\n * @param {string} css - CSS string\n * @returns {string} CSS with syntax highlighting spans\n */\n highlightCss: function (css) {\n // Highlight selectors \u2014 use non-backtracking bounded pattern\n css = css.replace(/([.#]?[a-zA-Z][a-zA-Z0-9_-]{0,200})(\\s*\\{)/g, '$1$2');\n\n // Highlight properties \u2014 use non-backtracking bounded pattern\n css = css.replace(/([a-zA-Z][a-zA-Z0-9_-]{0,200})(\\s*:)/g, '$1$2');\n\n // Highlight values\n css = css.replace(/:\\s*([^;{}]+)(;)/g, ': $1$2');\n\n // Highlight units\n css = css.replace(/(\\d+)(px|rem|em|%|vh|vw|deg|s|ms)/g, '$1$2');\n\n // Highlight comments\n css = css.replace(/(\\/\\*[\\s\\S]*?\\*\\/)/g, '$1');\n\n return css;\n },\n\n /**\n * Apply syntax highlighting to JavaScript\n * @param {string} js - JavaScript string\n * @returns {string} JS with syntax highlighting spans\n */\n highlightJs: function (js) {\n // Highlight keywords\n const keywords = ['const', 'let', 'var', 'function', 'return', 'if', 'else', 'for', 'while', 'switch', 'case', 'break', 'continue', 'new', 'this', 'class', 'extends', 'import', 'export', 'default', 'async', 'await', 'try', 'catch', 'throw', 'typeof', 'instanceof'];\n keywords.forEach(kw => {\n const regex = new RegExp(`\\\\b(${kw})\\\\b`, 'g');\n js = js.replace(regex, '$1');\n });\n\n // Highlight strings (limit to 10 000 chars to prevent polynomial backtracking)\n js = js.replace(/('(?:[^'\\\\]|\\\\.){0,10000}'|\"(?:[^\"\\\\]|\\\\.){0,10000}\"|`(?:[^`\\\\]|\\\\.){0,10000}`)/g, '$1');\n\n // Highlight numbers\n js = js.replace(/\\b(\\d+\\.?\\d*)\\b/g, '$1');\n\n // Highlight function calls\n js = js.replace(/\\b([\\w]+)(\\s*\\()/g, '$1$2');\n\n // Highlight comments\n js = js.replace(/(\\/\\/.*$)/gm, '$1');\n js = js.replace(/(\\/\\*[\\s\\S]*?\\*\\/)/g, '$1');\n\n return js;\n },\n\n /**\n * Add line numbers to a code pane\n * @param {HTMLElement} pane - Code pane element\n */\n addLineNumbers: function (pane) {\n const code = pane.querySelector('code');\n if (!code) return;\n\n const lines = code.innerHTML.split('\\n');\n const lineCount = lines.length;\n\n // Create line numbers container\n const lineNumbers = document.createElement('div');\n lineNumbers.className = 'vd-code-snippet-line-numbers';\n lineNumbers.setAttribute('aria-hidden', 'true');\n\n for (let i = 1; i <= lineCount; i++) {\n const lineNum = document.createElement('span');\n lineNum.textContent = i;\n lineNumbers.appendChild(lineNum);\n }\n\n // Wrap code content\n const codeWrapper = document.createElement('div');\n codeWrapper.className = 'vd-code-snippet-code';\n codeWrapper.appendChild(code.cloneNode(true));\n\n // Replace code with new structure\n code.parentNode.removeChild(code);\n pane.appendChild(lineNumbers);\n pane.appendChild(codeWrapper);\n },\n\n /**\n * Programmatically expand a code snippet\n * @param {string|HTMLElement} snippet - Snippet selector or element\n */\n expand: function (snippet) {\n if (typeof snippet === 'string') {\n snippet = document.querySelector(snippet);\n }\n if (!snippet) return;\n\n snippet.dataset.expanded = 'true';\n const toggle = snippet.querySelector('.vd-code-snippet-toggle');\n const content = snippet.querySelector('.vd-code-snippet-content');\n\n if (toggle) toggle.setAttribute('aria-expanded', 'true');\n if (content) content.dataset.visible = 'true';\n },\n\n /**\n * Programmatically collapse a code snippet\n * @param {string|HTMLElement} snippet - Snippet selector or element\n */\n collapse: function (snippet) {\n if (typeof snippet === 'string') {\n snippet = document.querySelector(snippet);\n }\n if (!snippet) return;\n\n snippet.dataset.expanded = 'false';\n const toggle = snippet.querySelector('.vd-code-snippet-toggle');\n const content = snippet.querySelector('.vd-code-snippet-content');\n\n if (toggle) toggle.setAttribute('aria-expanded', 'false');\n if (content) content.dataset.visible = 'false';\n },\n\n /**\n * Programmatically switch to a specific language tab\n * @param {string|HTMLElement} snippet - Snippet selector or element\n * @param {string} lang - Language to switch to (html, css, js)\n */\n showLang: function (snippet, lang) {\n if (typeof snippet === 'string') {\n snippet = document.querySelector(snippet);\n }\n if (!snippet) return;\n\n const tab = snippet.querySelector(`.vd-code-snippet-tab[data-lang=\"${lang}\"]`);\n const tabs = snippet.querySelectorAll('.vd-code-snippet-tab');\n const panes = snippet.querySelectorAll('.vd-code-snippet-pane');\n\n if (tab) {\n this.switchTab(snippet, tab, tabs, panes);\n }\n },\n\n /**\n * Destroy a code snippet instance and clean up listeners\n * @param {string|HTMLElement} snippet - Snippet selector or element\n */\n destroy: function (snippet) {\n if (typeof snippet === 'string') {\n snippet = document.querySelector(snippet);\n }\n if (!snippet) return;\n\n if (snippet._codeSnippetCleanup) {\n snippet._codeSnippetCleanup.forEach(fn => fn());\n delete snippet._codeSnippetCleanup;\n }\n\n delete snippet.dataset.initialized;\n },\n\n /**\n * Destroy all code snippet instances\n */\n destroyAll: function () {\n const snippets = document.querySelectorAll('.vd-code-snippet[data-initialized=\"true\"]');\n snippets.forEach(snippet => this.destroy(snippet));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('codeSnippet', CodeSnippet);\n }\n\n // Also expose globally for convenience\n window.CodeSnippet = CodeSnippet;\n\n})();\n", "/**\n * Vanduo Framework - Collapsible Component\n * JavaScript functionality for collapsible/accordion components\n */\n\n(function() {\n 'use strict';\n\n /**\n * Collapsible Component\n */\n const Collapsible = {\n // Store initialized containers and their cleanup functions\n instances: new Map(),\n\n /**\n * Initialize collapsible components\n */\n init: function() {\n const collapsibles = document.querySelectorAll('.vd-collapsible, .accordion');\n\n collapsibles.forEach(container => {\n if (this.instances.has(container)) {\n return;\n }\n this.initCollapsible(container);\n });\n },\n\n /**\n * Initialize a collapsible container\n * @param {HTMLElement} container - Collapsible container\n */\n initCollapsible: function(container) {\n const isAccordion = container.classList.contains('accordion');\n const items = container.querySelectorAll('.vd-collapsible-item, .accordion-item');\n const cleanupFunctions = [];\n\n items.forEach(item => {\n const header = item.querySelector('.vd-collapsible-header, .accordion-header');\n const body = item.querySelector('.vd-collapsible-body, .accordion-body');\n const trigger = item.querySelector('.vd-collapsible-trigger, .accordion-trigger') || header;\n\n if (!header || !body) {\n return;\n }\n\n // Set initial state\n if (item.classList.contains('is-open')) {\n this.openItem(item, body, false);\n } else {\n this.closeItem(item, body, false);\n }\n\n // Add click handler\n const clickHandler = (e) => {\n e.preventDefault();\n this.toggleItem(item, body, container, isAccordion);\n };\n trigger.addEventListener('click', clickHandler);\n cleanupFunctions.push(() => trigger.removeEventListener('click', clickHandler));\n });\n\n this.instances.set(container, { cleanup: cleanupFunctions });\n },\n \n /**\n * Toggle collapsible item\n * @param {HTMLElement} item - Collapsible item\n * @param {HTMLElement} body - Collapsible body\n * @param {HTMLElement} container - Collapsible container\n * @param {boolean} isAccordion - Whether in accordion mode\n */\n toggleItem: function(item, body, container, isAccordion) {\n const isOpen = item.classList.contains('is-open');\n \n if (isOpen) {\n this.closeItem(item, body);\n } else {\n // If accordion mode, close other open items\n if (isAccordion) {\n const otherOpenItems = container.querySelectorAll('.vd-collapsible-item.is-open, .accordion-item.is-open');\n otherOpenItems.forEach(otherItem => {\n if (otherItem !== item) {\n const otherBody = otherItem.querySelector('.vd-collapsible-body, .accordion-body');\n this.closeItem(otherItem, otherBody);\n }\n });\n }\n \n this.openItem(item, body);\n }\n },\n \n /**\n * Open collapsible item\n * @param {HTMLElement} item - Collapsible item\n * @param {HTMLElement} body - Collapsible body\n * @param {boolean} animate - Whether to animate\n */\n openItem: function(item, body, animate = true) {\n if (!animate) {\n body.style.transition = 'none';\n }\n \n item.classList.add('is-open');\n item.setAttribute('aria-expanded', 'true');\n \n // Set max-height to actual height\n const height = body.scrollHeight;\n body.style.maxHeight = `${height}px`;\n \n // Reset transition after a brief delay\n if (!animate) {\n setTimeout(() => {\n body.style.transition = '';\n }, 0);\n }\n \n // Dispatch event\n item.dispatchEvent(new CustomEvent('collapsible:open', { bubbles: true }));\n },\n \n /**\n * Close collapsible item\n * @param {HTMLElement} item - Collapsible item\n * @param {HTMLElement} body - Collapsible body\n * @param {boolean} animate - Whether to animate\n */\n closeItem: function(item, body, animate = true) {\n if (!animate) {\n body.style.transition = 'none';\n }\n \n item.classList.remove('is-open');\n item.setAttribute('aria-expanded', 'false');\n body.style.maxHeight = '0';\n \n // Reset transition after a brief delay\n if (!animate) {\n setTimeout(() => {\n body.style.transition = '';\n }, 0);\n }\n \n // Dispatch event\n item.dispatchEvent(new CustomEvent('collapsible:close', { bubbles: true }));\n },\n \n /**\n * Open item programmatically\n * @param {HTMLElement|string} item - Collapsible item or selector\n */\n open: function(item) {\n const el = typeof item === 'string' ? document.querySelector(item) : item;\n if (el) {\n const body = el.querySelector('.vd-collapsible-body, .accordion-body');\n if (body) {\n this.openItem(el, body);\n }\n }\n },\n \n /**\n * Close item programmatically\n * @param {HTMLElement|string} item - Collapsible item or selector\n */\n close: function(item) {\n const el = typeof item === 'string' ? document.querySelector(item) : item;\n if (el) {\n const body = el.querySelector('.vd-collapsible-body, .accordion-body');\n if (body) {\n this.closeItem(el, body);\n }\n }\n },\n \n /**\n * Toggle item programmatically\n * @param {HTMLElement|string} item - Collapsible item or selector\n */\n toggle: function(item) {\n const el = typeof item === 'string' ? document.querySelector(item) : item;\n if (el) {\n const body = el.querySelector('.vd-collapsible-body, .accordion-body');\n const container = el.closest('.vd-collapsible, .accordion');\n const isAccordion = container && container.classList.contains('accordion');\n\n if (body) {\n this.toggleItem(el, body, container, isAccordion);\n }\n }\n },\n\n /**\n * Destroy a collapsible instance and clean up event listeners\n * @param {HTMLElement} container - Collapsible container\n */\n destroy: function(container) {\n const instance = this.instances.get(container);\n if (!instance) return;\n\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(container);\n },\n\n /**\n * Destroy all collapsible instances\n */\n destroyAll: function() {\n this.instances.forEach((instance, container) => {\n this.destroy(container);\n });\n }\n };\n \n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('collapsible', Collapsible);\n }\n \n // Expose globally\n window.VanduoCollapsible = Collapsible;\n \n})();\n\n", "/**\n * Vanduo Framework - Dropdown Component\n * JavaScript functionality for dropdown menus\n */\n\n(function() {\n 'use strict';\n\n /**\n * Dropdown Component\n */\n const Dropdown = {\n // Store initialized dropdowns and their cleanup functions\n instances: new Map(),\n\n /**\n * Initialize dropdown components\n */\n init: function() {\n const dropdowns = document.querySelectorAll('.vd-dropdown');\n\n dropdowns.forEach(dropdown => {\n if (this.instances.has(dropdown)) {\n return;\n }\n this.initDropdown(dropdown);\n });\n },\n\n /**\n * Initialize a single dropdown\n * @param {HTMLElement} dropdown - Dropdown container\n */\n initDropdown: function(dropdown) {\n const toggle = dropdown.querySelector('.vd-dropdown-toggle');\n const menu = dropdown.querySelector('.vd-dropdown-menu');\n\n if (!toggle || !menu) {\n return;\n }\n\n const cleanupFunctions = [];\n\n // Set ARIA attributes\n toggle.setAttribute('aria-haspopup', 'true');\n toggle.setAttribute('aria-expanded', 'false');\n menu.setAttribute('role', 'menu');\n menu.setAttribute('aria-hidden', 'true');\n\n // Toggle on click\n const toggleClickHandler = (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggleDropdown(dropdown, toggle, menu);\n };\n toggle.addEventListener('click', toggleClickHandler);\n cleanupFunctions.push(() => toggle.removeEventListener('click', toggleClickHandler));\n\n // Close on outside click\n const documentClickHandler = (e) => {\n if (!dropdown.contains(e.target) && menu.classList.contains('is-open')) {\n this.closeDropdown(dropdown, toggle, menu);\n }\n };\n document.addEventListener('click', documentClickHandler);\n cleanupFunctions.push(() => document.removeEventListener('click', documentClickHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, dropdown, toggle, menu);\n };\n toggle.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => toggle.removeEventListener('keydown', keydownHandler));\n\n // Handle item clicks\n const items = menu.querySelectorAll('.vd-dropdown-item:not(.disabled):not(.is-disabled)');\n items.forEach(item => {\n const itemClickHandler = (e) => {\n e.preventDefault();\n this.selectItem(item, dropdown, toggle, menu);\n };\n item.addEventListener('click', itemClickHandler);\n cleanupFunctions.push(() => item.removeEventListener('click', itemClickHandler));\n\n const itemKeydownHandler = (e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.selectItem(item, dropdown, toggle, menu);\n }\n };\n item.addEventListener('keydown', itemKeydownHandler);\n cleanupFunctions.push(() => item.removeEventListener('keydown', itemKeydownHandler));\n });\n\n this.instances.set(dropdown, { toggle, menu, cleanup: cleanupFunctions, typeaheadBuffer: '', typeaheadTimer: null });\n },\n \n /**\n * Toggle dropdown\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Dropdown menu\n */\n toggleDropdown: function(dropdown, toggle, menu) {\n const isOpen = menu.classList.contains('is-open');\n \n if (isOpen) {\n this.closeDropdown(dropdown, toggle, menu);\n } else {\n this.openDropdown(dropdown, toggle, menu);\n }\n },\n \n /**\n * Open dropdown\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Dropdown menu\n */\n openDropdown: function(dropdown, toggle, menu) {\n // Close other open dropdowns\n const otherOpen = document.querySelectorAll('.vd-dropdown-menu.is-open');\n otherOpen.forEach(otherMenu => {\n if (otherMenu !== menu) {\n const otherDropdown = otherMenu.closest('.vd-dropdown');\n const otherToggle = otherDropdown.querySelector('.vd-dropdown-toggle');\n this.closeDropdown(otherDropdown, otherToggle, otherMenu);\n }\n });\n \n dropdown.classList.add('is-open');\n menu.classList.add('is-open');\n toggle.setAttribute('aria-expanded', 'true');\n menu.setAttribute('aria-hidden', 'false');\n \n // Position menu\n this.positionMenu(dropdown, menu);\n \n // Focus first item\n const firstItem = menu.querySelector('.vd-dropdown-item:not(.disabled):not(.is-disabled)');\n if (firstItem) {\n setTimeout(() => firstItem.focus(), 0);\n }\n },\n \n /**\n * Close dropdown\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Dropdown menu\n */\n closeDropdown: function(dropdown, toggle, menu) {\n dropdown.classList.remove('is-open');\n menu.classList.remove('is-open');\n toggle.setAttribute('aria-expanded', 'false');\n menu.setAttribute('aria-hidden', 'true');\n \n // Return focus to toggle\n toggle.focus();\n },\n \n /**\n * Position dropdown menu\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} menu - Dropdown menu\n */\n positionMenu: function(dropdown, menu) {\n const rect = dropdown.getBoundingClientRect();\n const menuRect = menu.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const padding = 8;\n \n // Check if menu overflows right\n if (rect.left + menuRect.width > viewportWidth - padding) {\n menu.classList.add('vd-dropdown-menu-end');\n menu.classList.remove('vd-dropdown-menu-start');\n }\n \n // Check if menu overflows bottom (for top positioning)\n if (menu.classList.contains('dropdown-menu-top')) {\n if (rect.top - menuRect.height < padding) {\n menu.classList.remove('vd-dropdown-menu-top');\n }\n } else {\n if (rect.bottom + menuRect.height > viewportHeight - padding) {\n menu.classList.add('vd-dropdown-menu-top');\n }\n }\n },\n \n /**\n * Handle keyboard navigation\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Dropdown menu\n */\n handleKeydown: function(e, dropdown, toggle, menu) {\n const isOpen = menu.classList.contains('is-open');\n const items = Array.from(menu.querySelectorAll('.vd-dropdown-item:not(.disabled):not(.is-disabled)'));\n const currentIndex = items.findIndex(item => item === document.activeElement);\n \n switch (e.key) {\n case 'Enter':\n case ' ':\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen) {\n this.openDropdown(dropdown, toggle, menu);\n } else if (e.key === 'ArrowDown') {\n const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n items[nextIndex].focus();\n }\n break;\n \n case 'ArrowUp':\n if (isOpen) {\n e.preventDefault();\n const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n items[prevIndex].focus();\n }\n break;\n \n case 'Escape':\n if (isOpen) {\n e.preventDefault();\n this.closeDropdown(dropdown, toggle, menu);\n }\n break;\n \n case 'Home':\n if (isOpen) {\n e.preventDefault();\n items[0].focus();\n }\n break;\n \n case 'End':\n if (isOpen) {\n e.preventDefault();\n items[items.length - 1].focus();\n }\n break;\n\n default:\n // Typeahead: jump to matching item when typing printable characters\n if (isOpen && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\n // Per-instance typeahead state to avoid cross-instance corruption\n const instance = this.instances.get(dropdown);\n if (!instance) break;\n clearTimeout(instance.typeaheadTimer);\n instance.typeaheadBuffer += e.key.toLowerCase();\n\n const match = items.find(item =>\n item.textContent.trim().toLowerCase().startsWith(instance.typeaheadBuffer)\n );\n if (match) {\n match.focus();\n }\n\n instance.typeaheadTimer = setTimeout(() => {\n instance.typeaheadBuffer = '';\n }, 500);\n }\n break;\n }\n },\n \n /**\n * Select dropdown item\n * @param {HTMLElement} item - Dropdown item\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Dropdown menu\n */\n selectItem: function(item, dropdown, toggle, menu) {\n // Remove active from all items\n menu.querySelectorAll('.vd-dropdown-item').forEach(i => {\n i.classList.remove('active', 'is-active');\n });\n \n // Add active to selected item\n item.classList.add('active', 'is-active');\n \n // Update toggle text if it's a button\n if (toggle.tagName === 'BUTTON' || toggle.classList.contains('btn')) {\n toggle.textContent = item.textContent.trim();\n }\n \n // Close dropdown\n this.closeDropdown(dropdown, toggle, menu);\n \n // Dispatch event\n item.dispatchEvent(new CustomEvent('dropdown:select', { \n bubbles: true,\n detail: { item, value: item.dataset.value || item.textContent }\n }));\n },\n \n /**\n * Open dropdown programmatically\n * @param {HTMLElement|string} dropdown - Dropdown container or selector\n */\n open: function(dropdown) {\n const el = typeof dropdown === 'string' ? document.querySelector(dropdown) : dropdown;\n if (el) {\n const toggle = el.querySelector('.vd-dropdown-toggle');\n const menu = el.querySelector('.vd-dropdown-menu');\n if (toggle && menu) {\n this.openDropdown(el, toggle, menu);\n }\n }\n },\n \n /**\n * Close dropdown programmatically\n * @param {HTMLElement|string} dropdown - Dropdown container or selector\n */\n close: function(dropdown) {\n const el = typeof dropdown === 'string' ? document.querySelector(dropdown) : dropdown;\n if (el) {\n const toggle = el.querySelector('.vd-dropdown-toggle');\n const menu = el.querySelector('.vd-dropdown-menu');\n if (toggle && menu) {\n this.closeDropdown(el, toggle, menu);\n }\n }\n },\n\n /**\n * Destroy a dropdown instance and clean up event listeners\n * @param {HTMLElement} dropdown - Dropdown element\n */\n destroy: function(dropdown) {\n const instance = this.instances.get(dropdown);\n if (!instance) return;\n\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(dropdown);\n },\n\n /**\n * Destroy all dropdown instances\n */\n destroyAll: function() {\n this.instances.forEach((instance, dropdown) => {\n this.destroy(dropdown);\n });\n }\n };\n \n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('dropdown', Dropdown);\n }\n \n // Expose globally\n window.VanduoDropdown = Dropdown;\n \n})();\n\n", "/**\n * Vanduo Framework - Font Switcher\n * Handles font selection and persistence for previewing different typefaces\n */\n\n(function() {\n 'use strict';\n\n const FontSwitcher = {\n STORAGE_KEY: 'vanduo-font-preference',\n isInitialized: false,\n\n // Available fonts configuration\n fonts: {\n 'system': {\n name: 'System Default',\n family: null // Uses CSS default\n },\n 'inter': {\n name: 'Inter',\n family: \"'Inter', sans-serif\"\n },\n 'source-sans': {\n name: 'Source Sans 3',\n family: \"'Source Sans 3', sans-serif\"\n },\n 'fira-sans': {\n name: 'Fira Sans',\n family: \"'Fira Sans', sans-serif\"\n },\n 'ibm-plex': {\n name: 'IBM Plex Sans',\n family: \"'IBM Plex Sans', sans-serif\"\n },\n 'jetbrains-mono': {\n name: 'JetBrains Mono',\n family: \"'JetBrains Mono', monospace\"\n },\n 'ubuntu': {\n name: 'Ubuntu',\n family: \"'Ubuntu', sans-serif\",\n category: 'sans-serif',\n description: 'Friendly, humanist sans-serif'\n },\n 'open-sans': {\n name: 'Open Sans',\n family: \"'Open Sans', sans-serif\",\n category: 'sans-serif',\n description: 'Neutral, highly readable'\n },\n 'rubik': {\n name: 'Rubik',\n family: \"'Rubik', sans-serif\",\n category: 'sans-serif',\n description: 'Modern, geometric'\n },\n 'titillium-web': {\n name: 'Titillium Web',\n family: \"'Titillium Web', sans-serif\",\n category: 'sans-serif',\n description: 'Technical, elegant'\n }\n },\n\n init: function() {\n this.state = {\n preference: this.getPreference()\n };\n\n if (this.isInitialized) {\n this.applyFont();\n this.renderUI();\n this.updateUI();\n return;\n }\n\n this.isInitialized = true;\n\n this.applyFont();\n this.renderUI();\n\n console.log('Vanduo Font Switcher initialized');\n },\n\n /**\n * Get saved font preference from localStorage\n * @returns {string} Font key or 'ubuntu' (default)\n */\n getPreference: function() {\n return this.getStorageValue(this.STORAGE_KEY, 'ubuntu');\n },\n\n /**\n * Set font preference and apply it\n * @param {string} fontKey - The font key to apply\n */\n setPreference: function(fontKey) {\n if (!this.fonts[fontKey]) {\n console.warn('Unknown font:', fontKey);\n return;\n }\n\n this.state.preference = fontKey;\n this.setStorageValue(this.STORAGE_KEY, fontKey);\n this.applyFont();\n this.updateUI();\n\n // Dispatch custom event for other components to listen to\n const event = new CustomEvent('font:change', {\n bubbles: true,\n detail: { font: fontKey, fontData: this.fonts[fontKey] }\n });\n document.dispatchEvent(event);\n },\n\n /**\n * Apply the current font preference to the document\n */\n applyFont: function() {\n const fontKey = this.state.preference;\n\n if (fontKey === 'system') {\n // Remove data-font attribute to use system default\n document.documentElement.removeAttribute('data-font');\n } else {\n // Set data-font attribute which triggers CSS variable override\n document.documentElement.setAttribute('data-font', fontKey);\n }\n },\n\n /**\n * Initialize UI elements with data-toggle=\"font\"\n */\n renderUI: function() {\n const toggles = document.querySelectorAll('[data-toggle=\"font\"]');\n\n toggles.forEach(toggle => {\n if (toggle.getAttribute('data-font-initialized') === 'true') {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n }\n return;\n }\n\n if (toggle.tagName === 'SELECT') {\n // Set initial value\n toggle.value = this.state.preference;\n\n // Listen for changes\n const onChange = (e) => {\n this.setPreference(e.target.value);\n };\n toggle.addEventListener('change', onChange);\n toggle._fontToggleHandler = onChange;\n } else {\n // Button implementation - cycle through fonts\n const onClick = () => {\n const fontKeys = Object.keys(this.fonts);\n const currentIndex = fontKeys.indexOf(this.state.preference);\n const nextIndex = (currentIndex + 1) % fontKeys.length;\n this.setPreference(fontKeys[nextIndex]);\n };\n toggle.addEventListener('click', onClick);\n toggle._fontToggleHandler = onClick;\n }\n\n toggle.setAttribute('data-font-initialized', 'true');\n });\n },\n\n /**\n * Update all UI elements to reflect current state\n */\n updateUI: function() {\n const toggles = document.querySelectorAll('[data-toggle=\"font\"]');\n\n toggles.forEach(toggle => {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n } else {\n // Update button text if it has a label span\n const label = toggle.querySelector('.font-current-label');\n if (label) {\n label.textContent = this.fonts[this.state.preference].name;\n }\n }\n });\n },\n\n /**\n * Get the current font preference\n * @returns {string} Current font key\n */\n getCurrentFont: function() {\n return this.state.preference;\n },\n\n /**\n * Get font data for a given key\n * @param {string} fontKey - The font key\n * @returns {Object|null} Font data or null\n */\n getFontData: function(fontKey) {\n return this.fonts[fontKey] || null;\n },\n\n destroyAll: function() {\n const toggles = document.querySelectorAll('[data-toggle=\"font\"][data-font-initialized=\"true\"]');\n toggles.forEach(toggle => {\n if (toggle._fontToggleHandler) {\n const eventName = toggle.tagName === 'SELECT' ? 'change' : 'click';\n toggle.removeEventListener(eventName, toggle._fontToggleHandler);\n delete toggle._fontToggleHandler;\n }\n toggle.removeAttribute('data-font-initialized');\n });\n\n this.isInitialized = false;\n },\n\n getStorageValue: function(key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function(key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('fontSwitcher', FontSwitcher);\n }\n\n // Expose globally for convenience\n window.FontSwitcher = FontSwitcher;\n})();\n", "/**\n * Vanduo Framework - Grid Layout Component\n * Toggle between standard 12-column and Fibonacci grid modes\n * via data-layout-mode attribute and toggle buttons\n */\n\n(function () {\n 'use strict';\n\n const supportsHas = (function () {\n try {\n return CSS.supports('selector(:has(*))');\n } catch (_e) {\n return false;\n }\n })();\n\n /**\n * Grid Layout Component\n */\n const GridLayout = {\n instances: new Map(),\n\n /**\n * Initialize all grid layout containers\n */\n init: function () {\n const containers = document.querySelectorAll('[data-layout-mode]');\n\n containers.forEach(function (container) {\n if (this.instances.has(container)) {\n return;\n }\n this.initContainer(container);\n }.bind(this));\n\n this.initToggleButtons();\n },\n\n /**\n * Initialize a single grid container\n * @param {HTMLElement} container - Element with data-layout-mode\n */\n initContainer: function (container) {\n const mode = container.getAttribute('data-layout-mode') || 'standard';\n const cleanupFunctions = [];\n\n this.applyMode(container, mode);\n\n container.setAttribute('role', 'region');\n container.setAttribute('aria-label', 'Grid layout: ' + mode + ' mode');\n\n this.instances.set(container, {\n cleanup: cleanupFunctions,\n mode: mode\n });\n },\n\n /**\n * Initialize toggle buttons that target grid containers\n */\n initToggleButtons: function () {\n const toggleButtons = document.querySelectorAll('[data-grid-toggle]');\n\n toggleButtons.forEach(function (button) {\n if (button.getAttribute('data-grid-initialized') === 'true') {\n return;\n }\n\n const clickHandler = function (e) {\n e.preventDefault();\n const targetSelector = button.getAttribute('data-grid-toggle');\n let target;\n\n if (targetSelector) {\n target = document.querySelector(targetSelector);\n } else {\n target = button.closest('[data-layout-mode]');\n }\n\n if (target) {\n this.toggle(target);\n }\n }.bind(this);\n\n button.addEventListener('click', clickHandler);\n button.setAttribute('data-grid-initialized', 'true');\n button.setAttribute('aria-pressed', 'false');\n\n button._gridCleanup = function () {\n button.removeEventListener('click', clickHandler);\n button.removeAttribute('data-grid-initialized');\n button.removeAttribute('aria-pressed');\n };\n }.bind(this));\n },\n\n /**\n * Apply Fibonacci grid-template-columns inline for browsers without :has()\n * @param {HTMLElement} container - Grid container\n */\n applyFibFallback: function (container) {\n if (supportsHas) return;\n\n const rows = container.querySelectorAll('.vd-row, .row');\n rows.forEach(function (row) {\n const cols = row.querySelectorAll(':scope > [class*=\"vd-col-\"], :scope > [class*=\"col-\"]');\n const count = cols.length;\n\n if (count === 1) {\n row.style.gridTemplateColumns = '1fr';\n } else if (count === 2) {\n row.style.gridTemplateColumns = '1fr 1.618fr';\n } else if (count === 3) {\n row.style.gridTemplateColumns = '2fr 3fr 5fr';\n } else if (count === 4) {\n row.style.gridTemplateColumns = '1fr 2fr 3fr 5fr';\n } else {\n row.style.gridTemplateColumns = 'repeat(' + count + ', 1fr)';\n }\n });\n },\n\n /**\n * Remove inline grid-template-columns fallback\n * @param {HTMLElement} container - Grid container\n */\n removeFibFallback: function (container) {\n const rows = container.querySelectorAll('.vd-row, .row');\n rows.forEach(function (row) {\n row.style.gridTemplateColumns = '';\n });\n },\n\n /**\n * Apply a layout mode to a container\n * @param {HTMLElement} container - Target container\n * @param {string} mode - 'fibonacci' or 'standard'\n */\n applyMode: function (container, mode) {\n container.classList.remove('vd-grid-standard', 'vd-grid-fibonacci');\n\n if (mode === 'fibonacci') {\n container.classList.add('vd-grid-fibonacci');\n this.applyFibFallback(container);\n } else {\n container.classList.add('vd-grid-standard');\n this.removeFibFallback(container);\n }\n\n container.setAttribute('data-layout-mode', mode);\n container.setAttribute('aria-label', 'Grid layout: ' + mode + ' mode');\n\n // Update associated toggle button states\n const toggleButtons = document.querySelectorAll('[data-grid-toggle]');\n toggleButtons.forEach(function (btn) {\n const targetSelector = btn.getAttribute('data-grid-toggle');\n if (targetSelector && container.matches(targetSelector)) {\n const isActive = (mode === 'fibonacci');\n if (isActive) {\n btn.classList.add('is-active');\n } else {\n btn.classList.remove('is-active');\n }\n btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');\n }\n });\n\n // Store mode in instance\n const instance = this.instances.get(container);\n if (instance) {\n instance.mode = mode;\n }\n\n // Dispatch custom event\n let event;\n try {\n event = new CustomEvent('grid:modechange', {\n bubbles: true,\n detail: {\n container: container,\n mode: mode\n }\n });\n } catch (_e) {\n event = document.createEvent('CustomEvent');\n event.initCustomEvent('grid:modechange', true, true, {\n container: container,\n mode: mode\n });\n }\n container.dispatchEvent(event);\n },\n\n /**\n * Toggle between standard and fibonacci modes\n * @param {HTMLElement|string} container - Container element or selector\n */\n toggle: function (container) {\n if (typeof container === 'string') {\n container = document.querySelector(container);\n }\n if (!container) return;\n\n const currentMode = container.getAttribute('data-layout-mode') || 'standard';\n const newMode = (currentMode === 'fibonacci') ? 'standard' : 'fibonacci';\n this.applyMode(container, newMode);\n },\n\n /**\n * Set a specific mode\n * @param {HTMLElement|string} container - Container element or selector\n * @param {string} mode - 'fibonacci' or 'standard'\n */\n setMode: function (container, mode) {\n if (typeof container === 'string') {\n container = document.querySelector(container);\n }\n if (!container) return;\n if (mode !== 'fibonacci' && mode !== 'standard') return;\n\n this.applyMode(container, mode);\n },\n\n /**\n * Get the current mode of a container\n * @param {HTMLElement|string} container - Container element or selector\n * @returns {string|null} Current mode or null\n */\n getMode: function (container) {\n if (typeof container === 'string') {\n container = document.querySelector(container);\n }\n if (!container) return null;\n return container.getAttribute('data-layout-mode') || 'standard';\n },\n\n /**\n * Destroy a single grid layout instance\n * @param {HTMLElement} container - Grid container\n */\n destroy: function (container) {\n const instance = this.instances.get(container);\n if (!instance) return;\n\n instance.cleanup.forEach(function (fn) { fn(); });\n container.classList.remove('vd-grid-standard', 'vd-grid-fibonacci');\n container.removeAttribute('aria-label');\n this.removeFibFallback(container);\n this.instances.delete(container);\n },\n\n /**\n * Destroy all grid layout instances and clean up toggle buttons\n */\n destroyAll: function () {\n this.instances.forEach(function (instance, container) {\n this.destroy(container);\n }.bind(this));\n\n const toggleButtons = document.querySelectorAll('[data-grid-initialized=\"true\"]');\n toggleButtons.forEach(function (button) {\n if (button._gridCleanup) {\n button._gridCleanup();\n delete button._gridCleanup;\n }\n });\n }\n };\n\n // Register with Vanduo framework\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('gridLayout', GridLayout);\n }\n\n // Expose globally\n window.VanduoGridLayout = GridLayout;\n\n})();\n", "/**\n * Vanduo Framework - Image Box Component\n * Lightbox-style image enlargement with smooth transitions\n * \n * Features:\n * - Click to enlarge images with data-image-box attribute\n * - Smooth scale and opacity transitions\n * - Dismiss via click, ESC key, or scroll\n * - Magnifying glass cursor on hover\n * - Accessible with ARIA attributes\n * - Reduced motion support\n */\n\n(function () {\n 'use strict';\n\n /**\n * Image Box Component\n */\n const ImageBox = {\n backdrop: null,\n container: null,\n img: null,\n closeBtn: null,\n caption: null,\n currentTrigger: null,\n scrollThreshold: 50,\n initialScrollY: 0,\n isOpen: false,\n\n // Store cleanup functions for event listeners\n _cleanupFunctions: [],\n\n /**\n * Initialize Image Box component\n */\n init: function () {\n this.createBackdrop();\n this.bindTriggers();\n },\n\n /**\n * Create backdrop elements\n */\n createBackdrop: function () {\n // Prevent duplicate backdrop creation\n if (this.backdrop || document.querySelector('.vd-image-box-backdrop')) {\n // If backdrop already exists in DOM, reuse it\n if (!this.backdrop) {\n this.backdrop = document.querySelector('.vd-image-box-backdrop');\n this.container = this.backdrop.querySelector('.vd-image-box-container');\n this.img = this.backdrop.querySelector('.vd-image-box-img');\n this.closeBtn = this.backdrop.querySelector('.vd-image-box-close');\n this.caption = this.backdrop.querySelector('.vd-image-box-caption');\n this.bindBackdropEvents();\n }\n return;\n }\n\n // Create backdrop\n this.backdrop = document.createElement('div');\n this.backdrop.className = 'vd-image-box-backdrop';\n this.backdrop.setAttribute('role', 'dialog');\n this.backdrop.setAttribute('aria-modal', 'true');\n this.backdrop.setAttribute('aria-label', 'Image viewer');\n this.backdrop.setAttribute('tabindex', '-1');\n\n // Create container\n this.container = document.createElement('div');\n this.container.className = 'vd-image-box-container';\n\n // Create image\n this.img = document.createElement('img');\n this.img.className = 'vd-image-box-img';\n this.img.alt = '';\n\n // Create close button\n this.closeBtn = document.createElement('button');\n this.closeBtn.className = 'vd-image-box-close';\n this.closeBtn.setAttribute('aria-label', 'Close image viewer');\n this.closeBtn.innerHTML = '×';\n\n // Create caption element\n this.caption = document.createElement('div');\n this.caption.className = 'vd-image-box-caption';\n\n // Assemble\n this.container.appendChild(this.img);\n this.backdrop.appendChild(this.closeBtn);\n this.backdrop.appendChild(this.container);\n this.backdrop.appendChild(this.caption);\n document.body.appendChild(this.backdrop);\n\n // Bind backdrop events\n this.bindBackdropEvents();\n },\n\n /**\n * Bind events to backdrop elements\n */\n bindBackdropEvents: function () {\n const self = this;\n\n // Close on backdrop click (but not when clicking the image)\n const backdropClickHandler = function (e) {\n if (e.target === self.backdrop || e.target === self.container) {\n self.close();\n }\n };\n this.backdrop.addEventListener('click', backdropClickHandler);\n this._cleanupFunctions.push(() => this.backdrop.removeEventListener('click', backdropClickHandler));\n\n // Close on image click\n const imgClickHandler = function () {\n self.close();\n };\n this.img.addEventListener('click', imgClickHandler);\n this._cleanupFunctions.push(() => this.img.removeEventListener('click', imgClickHandler));\n\n // Close on close button click\n const closeBtnHandler = function () {\n self.close();\n };\n this.closeBtn.addEventListener('click', closeBtnHandler);\n this._cleanupFunctions.push(() => this.closeBtn.removeEventListener('click', closeBtnHandler));\n\n // ESC key handler\n const escHandler = function (e) {\n if (e.key === 'Escape' && self.isOpen) {\n self.close();\n }\n };\n document.addEventListener('keydown', escHandler);\n this._cleanupFunctions.push(() => document.removeEventListener('keydown', escHandler));\n\n // Scroll handler for dismissal\n const scrollHandler = function () {\n if (!self.isOpen) return;\n\n const currentScrollY = window.scrollY;\n const scrollDelta = Math.abs(currentScrollY - self.initialScrollY);\n\n if (scrollDelta > self.scrollThreshold) {\n self.close();\n }\n };\n window.addEventListener('scroll', scrollHandler, { passive: true });\n this._cleanupFunctions.push(() => window.removeEventListener('scroll', scrollHandler));\n },\n\n /**\n * Bind triggers to all images with data-image-box attribute\n */\n bindTriggers: function () {\n const self = this;\n const triggers = document.querySelectorAll('[data-image-box]');\n\n triggers.forEach(function (trigger) {\n // Skip if already initialized\n if (trigger.dataset.imageBoxInitialized) return;\n trigger.dataset.imageBoxInitialized = 'true';\n\n // Add trigger class\n trigger.classList.add('vd-image-box-trigger');\n\n // Handle broken images\n if (trigger.tagName === 'IMG') {\n // Check if already in error state\n if (trigger.complete && trigger.naturalWidth === 0) {\n trigger.classList.add('is-broken');\n }\n\n // Listen for error events\n const errorHandler = function () {\n trigger.classList.add('is-broken');\n };\n trigger.addEventListener('error', errorHandler);\n\n // Listen for successful load\n const loadHandler = function () {\n trigger.classList.remove('is-broken');\n };\n trigger.addEventListener('load', loadHandler);\n }\n\n // Bind click event\n const clickHandler = function (e) {\n e.preventDefault();\n self.open(trigger);\n };\n trigger.addEventListener('click', clickHandler);\n\n // Store cleanup\n trigger._imageBoxCleanup = () => trigger.removeEventListener('click', clickHandler);\n\n // Keyboard accessibility for non-button triggers\n if (trigger.tagName !== 'BUTTON' && trigger.tagName !== 'A') {\n trigger.setAttribute('role', 'button');\n trigger.setAttribute('tabindex', '0');\n trigger.setAttribute('aria-label', 'View enlarged image');\n\n const keyHandler = function (e) {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n self.open(trigger);\n }\n };\n trigger.addEventListener('keydown', keyHandler);\n\n const originalCleanup = trigger._imageBoxCleanup;\n trigger._imageBoxCleanup = () => {\n originalCleanup();\n trigger.removeEventListener('keydown', keyHandler);\n };\n }\n });\n },\n\n /**\n * Open image box\n * @param {HTMLElement} trigger - The trigger element\n */\n open: function (trigger) {\n if (this.isOpen) return;\n\n this.currentTrigger = trigger;\n this.isOpen = true;\n this.initialScrollY = window.scrollY;\n\n // Get image source - support dual images (thumbnail + full-size)\n // data-image-box-full-src takes precedence for the lightbox\n const imgSrc = trigger.dataset.imageBoxFullSrc ||\n trigger.dataset.imageBoxSrc ||\n trigger.src ||\n trigger.href;\n\n if (!imgSrc) {\n console.warn('[Vanduo ImageBox] No image source found for trigger:', trigger);\n return;\n }\n\n // Get caption\n const captionText = trigger.dataset.imageBoxCaption || trigger.alt || '';\n\n // Set image source\n this.img.src = imgSrc;\n this.img.alt = trigger.alt || '';\n\n // Set caption\n if (captionText) {\n this.caption.textContent = captionText;\n this.caption.style.display = 'block';\n } else {\n this.caption.style.display = 'none';\n }\n\n // Calculate scrollbar width and lock body scroll\n const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n document.body.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);\n document.body.classList.add('body-image-box-open');\n\n // Show backdrop\n this.backdrop.classList.add('is-visible');\n\n // Focus management\n this.backdrop.focus();\n\n // Dispatch event\n trigger.dispatchEvent(new CustomEvent('imageBox:open', {\n bubbles: true,\n detail: { src: imgSrc }\n }));\n\n // Handle image load\n if (!this.img.complete) {\n this.img.style.opacity = '0';\n this._imgLoadHandler = () => {\n this.img.style.opacity = '';\n };\n this.img.addEventListener('load', this._imgLoadHandler, { once: true });\n }\n },\n\n /**\n * Close image box\n */\n close: function () {\n if (!this.isOpen) return;\n\n this.isOpen = false;\n\n // Hide backdrop\n this.backdrop.classList.remove('is-visible');\n\n // Unlock body scroll\n document.body.classList.remove('body-image-box-open');\n document.body.style.removeProperty('--scrollbar-width');\n\n // Return focus to trigger\n if (this.currentTrigger) {\n this.currentTrigger.focus();\n this.currentTrigger.dispatchEvent(new CustomEvent('imageBox:close', { bubbles: true }));\n this.currentTrigger = null;\n }\n\n // Clear image after transition\n setTimeout(() => {\n if (!this.isOpen) {\n // Clean up load handler if still pending\n if (this._imgLoadHandler) {\n this.img.removeEventListener('load', this._imgLoadHandler);\n this._imgLoadHandler = null;\n }\n this.img.src = '';\n this.img.alt = '';\n }\n }, 300);\n },\n\n /**\n * Reinitialize - useful after dynamic DOM changes\n */\n reinit: function () {\n this.bindTriggers();\n },\n\n /**\n * Destroy component and clean up\n */\n destroy: function () {\n // Close if open\n if (this.isOpen) {\n this.close();\n }\n\n // Remove backdrop\n if (this.backdrop && this.backdrop.parentNode) {\n this.backdrop.parentNode.removeChild(this.backdrop);\n }\n\n // Run cleanup functions\n this._cleanupFunctions.forEach(fn => fn());\n this._cleanupFunctions = [];\n\n // Remove trigger bindings\n const triggers = document.querySelectorAll('[data-image-box-initialized]');\n triggers.forEach(trigger => {\n trigger.classList.remove('vd-image-box-trigger');\n if (trigger._imageBoxCleanup) {\n trigger._imageBoxCleanup();\n delete trigger._imageBoxCleanup;\n }\n delete trigger.dataset.imageBoxInitialized;\n });\n\n this.backdrop = null;\n this.container = null;\n this.img = null;\n this.closeBtn = null;\n this.caption = null;\n this.currentTrigger = null;\n this.isOpen = false;\n },\n\n destroyAll: function () {\n this.destroy();\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('imageBox', ImageBox);\n }\n\n // Expose globally\n window.VanduoImageBox = ImageBox;\n\n})();\n", "/**\n * Vanduo Framework - Modals Component\n * JavaScript functionality for modal dialogs\n */\n\n(function () {\n 'use strict';\n\n /**\n * Modals Component\n */\n const Modals = {\n modals: new Map(),\n openModals: [],\n zIndexCounter: 1050,\n\n // Store trigger cleanup functions\n _triggerCleanups: [],\n // Shared ESC key handler (installed once)\n _sharedEscHandler: null,\n\n /**\n * Initialize modals\n */\n init: function () {\n const modals = document.querySelectorAll('.vd-modal');\n\n modals.forEach(modal => {\n if (this.modals.has(modal)) {\n return;\n }\n this.initModal(modal);\n });\n\n // Handle data-modal triggers\n const triggers = document.querySelectorAll('[data-modal]');\n triggers.forEach(trigger => {\n if (trigger.dataset.modalTriggerInitialized) return;\n trigger.dataset.modalTriggerInitialized = 'true';\n\n const triggerClickHandler = (e) => {\n e.preventDefault();\n const modalId = trigger.dataset.modal;\n const modal = document.querySelector(modalId);\n if (modal) {\n this.open(modal);\n }\n };\n trigger.addEventListener('click', triggerClickHandler);\n this._triggerCleanups.push(() => trigger.removeEventListener('click', triggerClickHandler));\n });\n },\n\n /**\n * Initialize a single modal\n * @param {HTMLElement} modal - Modal element\n */\n initModal: function (modal) {\n const backdrop = this.createBackdrop(modal);\n const closeButtons = modal.querySelectorAll('.vd-modal-close, [data-dismiss=\"modal\"]');\n const dialog = modal.querySelector('.vd-modal-dialog');\n\n if (!dialog) {\n return;\n }\n\n const cleanupFunctions = [];\n\n // Set ARIA attributes\n modal.setAttribute('role', 'dialog');\n modal.setAttribute('aria-modal', 'true');\n modal.setAttribute('aria-hidden', 'true');\n\n // Generate ID if not exists\n if (!modal.id) {\n modal.id = 'modal-' + Math.random().toString(36).substr(2, 9);\n }\n\n // Set aria-labelledby\n const title = modal.querySelector('.vd-modal-title');\n if (title && !title.id) {\n title.id = modal.id + '-title';\n modal.setAttribute('aria-labelledby', title.id);\n }\n\n // Close button handlers\n closeButtons.forEach(button => {\n const closeHandler = () => {\n this.close(modal);\n };\n button.addEventListener('click', closeHandler);\n cleanupFunctions.push(() => button.removeEventListener('click', closeHandler));\n });\n\n // Backdrop click handler\n const backdropClickHandler = (e) => {\n if (e.target === backdrop && modal.dataset.backdrop !== 'static') {\n this.close(modal);\n }\n };\n backdrop.addEventListener('click', backdropClickHandler);\n cleanupFunctions.push(() => backdrop.removeEventListener('click', backdropClickHandler));\n\n // ESC key handler \u2014 use a single shared handler instead of one-per-modal\n if (!this._sharedEscHandler) {\n this._sharedEscHandler = (e) => {\n if (e.key === 'Escape' && this.openModals.length > 0) {\n const topModal = this.openModals[this.openModals.length - 1];\n if (topModal.dataset.keyboard !== 'false') {\n this.close(topModal);\n }\n }\n };\n document.addEventListener('keydown', this._sharedEscHandler);\n }\n\n this.modals.set(modal, { backdrop, dialog, trapHandler: null, cleanup: cleanupFunctions });\n },\n\n /**\n * Create backdrop element\n * @param {HTMLElement} modal - Modal element\n * @returns {HTMLElement} Backdrop element\n */\n createBackdrop: function (modal) {\n let backdrop = modal.querySelector('.vd-modal-backdrop');\n\n if (!backdrop) {\n backdrop = document.createElement('div');\n backdrop.className = 'vd-modal-backdrop';\n document.body.appendChild(backdrop);\n }\n\n return backdrop;\n },\n\n /**\n * Open modal\n * @param {HTMLElement|string} modal - Modal element or selector\n */\n open: function (modal) {\n const el = typeof modal === 'string' ? document.querySelector(modal) : modal;\n\n if (!el) {\n console.warn('[Vanduo Modals] Modal element not found:', modal);\n return;\n }\n\n if (!this.modals.has(el)) {\n console.warn('[Vanduo Modals] Modal not initialized:', el);\n return;\n }\n\n const modalData = this.modals.get(el);\n const { backdrop, dialog: _dialog } = modalData;\n\n // Increment z-index for stacking\n this.zIndexCounter += 10;\n el.style.zIndex = this.zIndexCounter;\n backdrop.style.zIndex = this.zIndexCounter - 1;\n\n // Add to open modals stack\n this.openModals.push(el);\n\n // Show backdrop\n backdrop.classList.add('is-visible');\n\n // Show modal\n el.classList.add('is-open');\n el.setAttribute('aria-hidden', 'false');\n\n // Lock body scroll\n if (this.openModals.length === 1) {\n document.body.classList.add('body-modal-open');\n const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n if (scrollbarWidth > 0) {\n document.body.style.paddingRight = `${scrollbarWidth}px`;\n }\n }\n\n // Focus trap (store handler for cleanup)\n const trapHandler = this.trapFocus(el);\n modalData.trapHandler = trapHandler;\n\n // Auto-focus first focusable element\n setTimeout(() => {\n const firstFocusable = this.getFocusableElements(el)[0];\n if (firstFocusable) {\n firstFocusable.focus();\n }\n }, 100);\n\n // Dispatch event\n el.dispatchEvent(new CustomEvent('modal:open', { bubbles: true }));\n },\n\n /**\n * Close modal\n * @param {HTMLElement|string} modal - Modal element or selector\n */\n close: function (modal) {\n const el = typeof modal === 'string' ? document.querySelector(modal) : modal;\n\n if (!el) {\n console.warn('[Vanduo Modals] Modal element not found:', modal);\n return;\n }\n\n if (!this.modals.has(el)) {\n console.warn('[Vanduo Modals] Modal not initialized:', el);\n return;\n }\n\n const modalData = this.modals.get(el);\n const { backdrop, trapHandler } = modalData;\n\n // Remove focus trap event listener to prevent memory leak\n if (trapHandler) {\n el.removeEventListener('keydown', trapHandler);\n modalData.trapHandler = null;\n }\n\n // Remove from open modals stack\n const index = this.openModals.indexOf(el);\n if (index > -1) {\n this.openModals.splice(index, 1);\n }\n\n // Hide modal\n el.classList.remove('is-open');\n el.setAttribute('aria-hidden', 'true');\n\n // Hide backdrop if no other modals open\n if (this.openModals.length === 0) {\n backdrop.classList.remove('is-visible');\n document.body.classList.remove('body-modal-open');\n document.body.style.paddingRight = '';\n // Reset z-index counter to prevent indefinite growth\n this.zIndexCounter = 1050;\n } else {\n // Show backdrop for top modal\n const topModal = this.openModals[this.openModals.length - 1];\n const topBackdrop = this.modals.get(topModal).backdrop;\n topBackdrop.classList.add('is-visible');\n }\n\n // Return focus to trigger\n const trigger = document.querySelector(`[data-modal=\"#${el.id}\"]`);\n if (trigger) {\n trigger.focus();\n }\n\n // Dispatch event\n el.dispatchEvent(new CustomEvent('modal:close', { bubbles: true }));\n },\n\n /**\n * Trap focus within modal\n * @param {HTMLElement} modal - Modal element\n * @returns {Function} The trap handler function for cleanup\n */\n trapFocus: function (modal) {\n const self = this;\n\n const trapHandler = function (e) {\n if (e.key !== 'Tab') {\n return;\n }\n\n const focusableElements = self.getFocusableElements(modal);\n const firstElement = focusableElements[0];\n const lastElement = focusableElements[focusableElements.length - 1];\n\n if (e.shiftKey) {\n // Shift + Tab\n if (document.activeElement === firstElement) {\n e.preventDefault();\n lastElement.focus();\n }\n } else {\n // Tab\n if (document.activeElement === lastElement) {\n e.preventDefault();\n firstElement.focus();\n }\n }\n };\n\n modal.addEventListener('keydown', trapHandler);\n return trapHandler;\n },\n\n /**\n * Get focusable elements within modal\n * @param {HTMLElement} modal - Modal element\n * @returns {Array} Focusable elements\n */\n getFocusableElements: function (modal) {\n const selector = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n return Array.from(modal.querySelectorAll(selector)).filter(el => {\n return !el.hasAttribute('disabled') &&\n el.offsetWidth > 0 &&\n el.offsetHeight > 0;\n });\n },\n\n /**\n * Toggle modal\n * @param {HTMLElement|string} modal - Modal element or selector\n */\n toggle: function (modal) {\n const el = typeof modal === 'string' ? document.querySelector(modal) : modal;\n if (el) {\n if (el.classList.contains('is-open')) {\n this.close(el);\n } else {\n this.open(el);\n }\n }\n },\n\n /**\n * Destroy a modal instance and clean up event listeners\n * @param {HTMLElement} modal - Modal element\n */\n destroy: function (modal) {\n const modalData = this.modals.get(modal);\n if (!modalData) return;\n\n // Close if open\n if (modal.classList.contains('is-open')) {\n this.close(modal);\n }\n\n // Run all cleanup functions\n if (modalData.cleanup) {\n modalData.cleanup.forEach(fn => fn());\n }\n\n // Remove created backdrop\n if (modalData.backdrop && modalData.backdrop.parentNode) {\n modalData.backdrop.parentNode.removeChild(modalData.backdrop);\n }\n\n this.modals.delete(modal);\n },\n\n /**\n * Destroy all modal instances\n */\n destroyAll: function () {\n this.modals.forEach((data, modal) => {\n this.destroy(modal);\n });\n // Clean up trigger listeners\n this._triggerCleanups.forEach(fn => fn());\n this._triggerCleanups = [];\n // Remove shared ESC handler\n if (this._sharedEscHandler) {\n document.removeEventListener('keydown', this._sharedEscHandler);\n this._sharedEscHandler = null;\n }\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('modals', Modals);\n }\n\n // Expose globally\n window.VanduoModals = Modals;\n\n})();\n\n", "/**\n * Vanduo Framework - Navbar Component\n * JavaScript functionality for navbar mobile menu\n */\n\n(function () {\n 'use strict';\n\n /**\n * Navbar Component\n */\n const Navbar = {\n // Store initialized navbars and their cleanup functions\n instances: new Map(),\n\n /**\n * Get the breakpoint value from CSS variable or use fallback\n * @returns {number} Breakpoint in pixels\n */\n getBreakpoint: function () {\n const root = getComputedStyle(document.documentElement);\n const breakpointValue = root.getPropertyValue('--breakpoint-lg').trim();\n\n // Parse the value (could be \"992px\" or just \"992\")\n const parsed = parseInt(breakpointValue, 10);\n return isNaN(parsed) ? 992 : parsed;\n },\n\n /**\n * Initialize navbar component\n */\n init: function () {\n const navbars = document.querySelectorAll('.vd-navbar');\n\n navbars.forEach(navbar => {\n // Skip if already initialized\n if (this.instances.has(navbar)) {\n return;\n }\n this.initNavbar(navbar);\n });\n },\n\n /**\n * Initialize scroll-aware glass/transparent behaviour for a navbar.\n * Adds/removes `.vd-navbar-scrolled` when the page scrolls past a threshold.\n * Threshold: `data-scroll-threshold` attribute (px) or the navbar's own height.\n * @param {HTMLElement} navbar - Navbar element\n * @returns {Function|null} Cleanup function, or null if not applicable\n */\n initScrollWatcher: function (navbar) {\n const isGlass = navbar.classList.contains('vd-navbar-glass');\n const isTransparent = navbar.classList.contains('vd-navbar-transparent');\n\n if (!isGlass && !isTransparent) {\n return null;\n }\n\n const getThreshold = () => {\n const attr = parseInt(navbar.dataset.scrollThreshold, 10);\n return isNaN(attr) ? (navbar.offsetHeight || 60) : attr;\n };\n\n const onScroll = () => {\n const scrolled = window.scrollY > getThreshold();\n navbar.classList.toggle('vd-navbar-scrolled', scrolled);\n };\n\n onScroll(); // set initial state without waiting for first scroll\n window.addEventListener('scroll', onScroll, { passive: true });\n\n return () => window.removeEventListener('scroll', onScroll);\n },\n\n /**\n * Initialize a single navbar\n * @param {HTMLElement} navbar - Navbar element\n */\n initNavbar: function (navbar) {\n const toggle = navbar.querySelector('.vd-navbar-toggle, .vd-navbar-burger');\n const menu = navbar.querySelector('.vd-navbar-menu');\n const overlay = navbar.querySelector('.vd-navbar-overlay') || this.createOverlay(navbar);\n\n // Store cleanup functions for this navbar instance\n const cleanupFunctions = [];\n\n // Wire up scroll-aware glass/transparent behaviour regardless of mobile menu\n const scrollWatcherCleanup = this.initScrollWatcher(navbar);\n if (scrollWatcherCleanup) {\n cleanupFunctions.push(scrollWatcherCleanup);\n }\n\n if (!toggle || !menu) {\n // Still store the instance so scroll-watcher cleanup is tracked\n if (cleanupFunctions.length) {\n this.instances.set(navbar, { toggle: null, menu: null, overlay: null, cleanup: cleanupFunctions });\n }\n return;\n }\n\n // Toggle menu on button click\n const toggleClickHandler = (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggleMenu(navbar, toggle, menu, overlay);\n };\n toggle.addEventListener('click', toggleClickHandler);\n cleanupFunctions.push(() => toggle.removeEventListener('click', toggleClickHandler));\n\n // Close menu on overlay click\n if (overlay) {\n const overlayClickHandler = () => {\n this.closeMenu(navbar, toggle, menu, overlay);\n };\n overlay.addEventListener('click', overlayClickHandler);\n cleanupFunctions.push(() => overlay.removeEventListener('click', overlayClickHandler));\n }\n\n // Close menu on escape key\n const keydownHandler = (e) => {\n if (e.key === 'Escape' && menu.classList.contains('is-open')) {\n this.closeMenu(navbar, toggle, menu, overlay);\n }\n };\n document.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => document.removeEventListener('keydown', keydownHandler));\n\n // Close menu on window resize (if resizing to desktop)\n let resizeTimer;\n const resizeHandler = () => {\n clearTimeout(resizeTimer);\n resizeTimer = setTimeout(() => {\n const breakpoint = this.getBreakpoint();\n if (window.innerWidth >= breakpoint && menu.classList.contains('is-open')) {\n this.closeMenu(navbar, toggle, menu, overlay);\n }\n }, 250);\n };\n window.addEventListener('resize', resizeHandler);\n cleanupFunctions.push(() => {\n clearTimeout(resizeTimer);\n window.removeEventListener('resize', resizeHandler);\n });\n\n // Close menu when clicking outside\n const documentClickHandler = (e) => {\n if (menu.classList.contains('is-open') &&\n !navbar.contains(e.target) &&\n !menu.contains(e.target)) {\n this.closeMenu(navbar, toggle, menu, overlay);\n }\n };\n document.addEventListener('click', documentClickHandler);\n cleanupFunctions.push(() => document.removeEventListener('click', documentClickHandler));\n\n // Handle dropdown toggles in mobile menu\n const dropdownToggles = menu.querySelectorAll('.vd-navbar-dropdown > .vd-nav-link, .vd-navbar-dropdown > .nav-link');\n dropdownToggles.forEach(dropdownToggle => {\n const dropdownClickHandler = (e) => {\n const breakpoint = this.getBreakpoint();\n if (window.innerWidth < breakpoint) {\n e.preventDefault();\n const dropdown = dropdownToggle.parentElement;\n const dropdownMenu = dropdown.querySelector('.vd-navbar-dropdown-menu');\n\n if (dropdownMenu) {\n dropdownMenu.classList.toggle('is-open');\n }\n }\n };\n dropdownToggle.addEventListener('click', dropdownClickHandler);\n cleanupFunctions.push(() => dropdownToggle.removeEventListener('click', dropdownClickHandler));\n });\n\n // Store instance with cleanup functions\n this.instances.set(navbar, {\n toggle,\n menu,\n overlay,\n cleanup: cleanupFunctions\n });\n },\n\n /**\n * Destroy a navbar instance and clean up event listeners\n * @param {HTMLElement} navbar - Navbar element\n */\n destroy: function (navbar) {\n const instance = this.instances.get(navbar);\n if (!instance) {\n return;\n }\n\n // Run all cleanup functions\n instance.cleanup.forEach(fn => fn());\n\n // Remove created overlay if it exists\n if (instance.overlay && instance.overlay.parentNode) {\n instance.overlay.parentNode.removeChild(instance.overlay);\n }\n\n // Remove from instances map\n this.instances.delete(navbar);\n },\n\n /**\n * Destroy all navbar instances\n */\n destroyAll: function () {\n this.instances.forEach((instance, navbar) => {\n this.destroy(navbar);\n });\n },\n\n /**\n * Toggle mobile menu\n * @param {HTMLElement} navbar - Navbar element\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Menu element\n * @param {HTMLElement} overlay - Overlay element\n */\n toggleMenu: function (navbar, toggle, menu, overlay) {\n const isOpen = menu.classList.contains('is-open');\n\n if (isOpen) {\n this.closeMenu(navbar, toggle, menu, overlay);\n } else {\n this.openMenu(navbar, toggle, menu, overlay);\n }\n },\n\n /**\n * Open mobile menu\n * @param {HTMLElement} navbar - Navbar element\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Menu element\n * @param {HTMLElement} overlay - Overlay element\n */\n openMenu: function (navbar, toggle, menu, overlay) {\n menu.classList.add('is-open');\n toggle.classList.add('is-active');\n\n if (overlay) {\n overlay.classList.add('is-active');\n }\n\n // Prevent body scroll when menu is open (use class to avoid conflicts with modals)\n document.body.classList.add('body-navbar-open');\n\n // Set ARIA attributes\n toggle.setAttribute('aria-expanded', 'true');\n menu.setAttribute('aria-hidden', 'false');\n },\n\n /**\n * Close mobile menu\n * @param {HTMLElement} navbar - Navbar element\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Menu element\n * @param {HTMLElement} overlay - Overlay element\n */\n closeMenu: function (navbar, toggle, menu, overlay) {\n menu.classList.remove('is-open');\n toggle.classList.remove('is-active');\n\n if (overlay) {\n overlay.classList.remove('is-active');\n }\n\n // Restore body scroll\n document.body.classList.remove('body-navbar-open');\n\n // Close all dropdown menus\n const dropdownMenus = menu.querySelectorAll('.vd-navbar-dropdown-menu.is-open');\n dropdownMenus.forEach(dropdownMenu => {\n dropdownMenu.classList.remove('is-open');\n });\n\n // Set ARIA attributes\n toggle.setAttribute('aria-expanded', 'false');\n menu.setAttribute('aria-hidden', 'true');\n },\n\n /**\n * Create overlay element if it doesn't exist\n * @param {HTMLElement} navbar - Navbar element\n * @returns {HTMLElement} Overlay element\n */\n createOverlay: function (_navbar) {\n const overlay = document.createElement('div');\n overlay.className = 'vd-navbar-overlay';\n document.body.appendChild(overlay);\n return overlay;\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('navbar', Navbar);\n }\n\n // Expose globally\n window.VanduoNavbar = Navbar;\n\n})();\n", "/**\n * Vanduo Framework - Pagination Component\n * JavaScript functionality for dynamic pagination\n */\n\n(function() {\n 'use strict';\n\n /**\n * Pagination Component\n */\n const Pagination = {\n // Store initialized paginations and their cleanup functions\n instances: new Map(),\n\n /**\n * Initialize pagination components\n */\n init: function() {\n const paginations = document.querySelectorAll('.vd-pagination[data-pagination]');\n\n paginations.forEach(pagination => {\n if (this.instances.has(pagination)) {\n return;\n }\n this.initPagination(pagination);\n });\n },\n\n /**\n * Initialize a pagination\n * @param {HTMLElement} pagination - Pagination container\n */\n initPagination: function(pagination) {\n const totalPages = parseInt(pagination.dataset.totalPages) || 1;\n const currentPage = parseInt(pagination.dataset.currentPage) || 1;\n const maxVisible = parseInt(pagination.dataset.maxVisible) || 7;\n\n this.render(pagination, {\n totalPages: totalPages,\n currentPage: currentPage,\n maxVisible: maxVisible\n });\n\n // Handle clicks (event delegation)\n const clickHandler = (e) => {\n const link = e.target.closest('.vd-pagination-link');\n if (!link || link.closest('.vd-pagination-item.disabled') || link.closest('.vd-pagination-item.active')) {\n return;\n }\n\n e.preventDefault();\n\n const item = link.closest('.vd-pagination-item');\n const page = item.dataset.page;\n\n if (page) {\n this.goToPage(pagination, parseInt(page));\n } else if (item.classList.contains('pagination-prev')) {\n this.prevPage(pagination);\n } else if (item.classList.contains('pagination-next')) {\n this.nextPage(pagination);\n }\n };\n pagination.addEventListener('click', clickHandler);\n\n this.instances.set(pagination, {\n cleanup: [() => pagination.removeEventListener('click', clickHandler)]\n });\n },\n \n /**\n * Render pagination\n * @param {HTMLElement} pagination - Pagination container\n * @param {Object} options - Pagination options\n */\n render: function(pagination, options) {\n const { totalPages, currentPage, maxVisible } = options;\n \n if (totalPages <= 1) {\n pagination.innerHTML = '';\n return;\n }\n \n let html = '';\n \n // Previous button\n html += `
  • `;\n html += `Previous`;\n html += `
    • `;\n \n // Calculate page range\n const pages = this.calculatePages(currentPage, totalPages, maxVisible);\n \n // Page numbers\n let lastPage = 0;\n pages.forEach(page => {\n if (page === 'ellipsis') {\n html += `
  • \u2026
    • `;\n } else {\n if (page !== lastPage + 1 && lastPage > 0) {\n html += `
  • \u2026
    • `;\n }\n const safePage = Number(page);\n html += `
  • `;\n html += `${safePage}`;\n html += `
    • `;\n lastPage = page;\n }\n });\n \n // Next button\n html += `
  • `;\n html += `Next`;\n html += `
    • `;\n \n pagination.innerHTML = html;\n \n // Update data attributes\n pagination.dataset.currentPage = currentPage;\n },\n \n /**\n * Calculate which pages to show\n * @param {number} currentPage - Current page\n * @param {number} totalPages - Total pages\n * @param {number} maxVisible - Maximum visible pages\n * @returns {Array} Array of page numbers or 'ellipsis'\n */\n calculatePages: function(currentPage, totalPages, maxVisible) {\n const pages = [];\n const half = Math.floor(maxVisible / 2);\n \n if (totalPages <= maxVisible) {\n // Show all pages\n for (let i = 1; i <= totalPages; i++) {\n pages.push(i);\n }\n } else {\n // Always show first page\n pages.push(1);\n \n let start = Math.max(2, currentPage - half);\n let end = Math.min(totalPages - 1, currentPage + half);\n \n // Adjust if we're near the start\n if (currentPage <= half + 1) {\n end = Math.min(totalPages - 1, maxVisible - 1);\n }\n \n // Adjust if we're near the end\n if (currentPage >= totalPages - half) {\n start = Math.max(2, totalPages - maxVisible + 2);\n }\n \n // Add ellipsis before if needed\n if (start > 2) {\n pages.push('ellipsis');\n }\n \n // Add middle pages\n for (let i = start; i <= end; i++) {\n pages.push(i);\n }\n \n // Add ellipsis after if needed\n if (end < totalPages - 1) {\n pages.push('ellipsis');\n }\n \n // Always show last page\n if (totalPages > 1) {\n pages.push(totalPages);\n }\n }\n \n return pages;\n },\n \n /**\n * Go to specific page\n * @param {HTMLElement} pagination - Pagination container\n * @param {number} page - Page number\n */\n goToPage: function(pagination, page) {\n const totalPages = parseInt(pagination.dataset.totalPages) || 1;\n const maxVisible = parseInt(pagination.dataset.maxVisible) || 7;\n \n if (page < 1 || page > totalPages) {\n return;\n }\n \n this.render(pagination, {\n totalPages: totalPages,\n currentPage: page,\n maxVisible: maxVisible\n });\n \n // Dispatch event\n pagination.dispatchEvent(new CustomEvent('pagination:change', {\n bubbles: true,\n detail: { page, totalPages }\n }));\n },\n \n /**\n * Go to previous page\n * @param {HTMLElement} pagination - Pagination container\n */\n prevPage: function(pagination) {\n const currentPage = parseInt(pagination.dataset.currentPage) || 1;\n if (currentPage > 1) {\n this.goToPage(pagination, currentPage - 1);\n }\n },\n \n /**\n * Go to next page\n * @param {HTMLElement} pagination - Pagination container\n */\n nextPage: function(pagination) {\n const currentPage = parseInt(pagination.dataset.currentPage) || 1;\n const totalPages = parseInt(pagination.dataset.totalPages) || 1;\n if (currentPage < totalPages) {\n this.goToPage(pagination, currentPage + 1);\n }\n },\n \n /**\n * Update pagination\n * @param {HTMLElement|string} pagination - Pagination container or selector\n * @param {Object} options - Pagination options\n */\n update: function(pagination, options) {\n const el = typeof pagination === 'string' ? document.querySelector(pagination) : pagination;\n if (el) {\n if (options.totalPages !== undefined) {\n el.dataset.totalPages = options.totalPages;\n }\n if (options.currentPage !== undefined) {\n el.dataset.currentPage = options.currentPage;\n }\n if (options.maxVisible !== undefined) {\n el.dataset.maxVisible = options.maxVisible;\n }\n \n this.render(el, {\n totalPages: parseInt(el.dataset.totalPages) || 1,\n currentPage: parseInt(el.dataset.currentPage) || 1,\n maxVisible: parseInt(el.dataset.maxVisible) || 7\n });\n }\n },\n\n /**\n * Destroy a pagination instance and clean up event listeners\n * @param {HTMLElement} pagination - Pagination container\n */\n destroy: function(pagination) {\n const instance = this.instances.get(pagination);\n if (!instance) return;\n\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(pagination);\n },\n\n /**\n * Destroy all pagination instances\n */\n destroyAll: function() {\n this.instances.forEach((instance, pagination) => {\n this.destroy(pagination);\n });\n }\n };\n \n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('pagination', Pagination);\n }\n \n // Expose globally\n window.VanduoPagination = Pagination;\n \n})();\n\n", "/**\n * Vanduo Framework - Parallax Component\n * JavaScript functionality for parallax scroll effects\n */\n\n(function () {\n 'use strict';\n\n /**\n * Parallax Component\n */\n const Parallax = {\n parallaxElements: new Map(),\n ticking: false,\n isMobile: window.innerWidth < 768,\n reducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches,\n isInitialized: false,\n _onScroll: null,\n _onResize: null,\n\n /**\n * Initialize parallax components\n */\n init: function () {\n if (this.isInitialized) {\n this.refresh();\n return;\n }\n\n this.isInitialized = true;\n\n // Check for reduced motion preference\n if (this.reducedMotion) {\n return; // Don't initialize if user prefers reduced motion\n }\n\n const parallaxElements = document.querySelectorAll('.vd-parallax');\n\n parallaxElements.forEach(element => {\n if (!element.dataset.parallaxInitialized) {\n this.initParallax(element);\n }\n });\n\n // Handle scroll\n this.handleScroll();\n this._onScroll = () => {\n this.handleScroll();\n };\n window.addEventListener('scroll', this._onScroll, { passive: true });\n\n // Handle resize\n this._onResize = () => {\n this.isMobile = window.innerWidth < 768;\n this.updateAll();\n };\n window.addEventListener('resize', this._onResize);\n },\n\n /**\n * Initialize a parallax element\n * @param {HTMLElement} element - Parallax container\n */\n initParallax: function (element) {\n element.dataset.parallaxInitialized = 'true';\n\n // Check if disabled on mobile\n const disableMobile = element.classList.contains('parallax-disable-mobile');\n if (disableMobile && this.isMobile) {\n return;\n }\n\n const layers = element.querySelectorAll('.vd-parallax-layer, .vd-parallax-bg');\n const speed = this.getSpeed(element);\n const direction = element.classList.contains('parallax-horizontal') ? 'horizontal' : 'vertical';\n\n this.parallaxElements.set(element, {\n layers: Array.from(layers),\n speed: speed,\n direction: direction,\n disableMobile: disableMobile\n });\n\n // Initial update\n this.updateParallax(element);\n },\n\n /**\n * Get parallax speed from element\n * @param {HTMLElement} element - Parallax element\n * @returns {number} Speed multiplier\n */\n getSpeed: function (element) {\n if (element.classList.contains('parallax-slow')) {\n return 0.5;\n } else if (element.classList.contains('parallax-fast')) {\n return 1.5;\n }\n return 1; // Default medium speed\n },\n\n /**\n * Handle scroll event\n */\n handleScroll: function () {\n if (!this.ticking) {\n window.requestAnimationFrame(() => {\n this.updateAll();\n this.ticking = false;\n });\n this.ticking = true;\n }\n },\n\n /**\n * Update all parallax elements\n */\n updateAll: function () {\n this.parallaxElements.forEach((config, element) => {\n // Skip if disabled on mobile\n if (config.disableMobile && this.isMobile) {\n return;\n }\n\n this.updateParallax(element);\n });\n },\n\n /**\n * Update parallax for a single element\n * @param {HTMLElement} element - Parallax element\n */\n updateParallax: function (element) {\n const config = this.parallaxElements.get(element);\n if (!config) {\n return;\n }\n\n const rect = element.getBoundingClientRect();\n const windowHeight = window.innerHeight;\n const elementTop = rect.top;\n const elementHeight = rect.height;\n\n // Calculate scroll progress (0 to 1)\n const scrollProgress = Math.max(0, Math.min(1,\n (windowHeight - elementTop) / (windowHeight + elementHeight)\n ));\n\n // Calculate offset based on speed and direction\n const offset = (scrollProgress - 0.5) * config.speed * 100;\n\n config.layers.forEach((layer, _index) => {\n // Different layers can have different speeds\n const layerSpeed = layer.dataset.parallaxSpeed ? parseFloat(layer.dataset.parallaxSpeed) : 1;\n const layerOffset = offset * layerSpeed;\n\n if (config.direction === 'horizontal') {\n layer.style.transform = `translateX(${layerOffset}px)`;\n } else {\n layer.style.transform = `translateY(${layerOffset}px)`;\n }\n });\n },\n\n /**\n * Destroy parallax element\n * @param {HTMLElement|string} element - Parallax element or selector\n */\n destroy: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.parallaxElements.has(el)) {\n const config = this.parallaxElements.get(el);\n config.layers.forEach(layer => {\n layer.style.transform = '';\n });\n this.parallaxElements.delete(el);\n }\n },\n\n /**\n * Refresh parallax (recalculate positions)\n */\n refresh: function () {\n this.updateAll();\n },\n\n destroyAll: function () {\n this.parallaxElements.forEach((_config, element) => {\n this.destroy(element);\n });\n this.parallaxElements.clear();\n\n if (this._onScroll) {\n window.removeEventListener('scroll', this._onScroll);\n this._onScroll = null;\n }\n\n if (this._onResize) {\n window.removeEventListener('resize', this._onResize);\n this._onResize = null;\n }\n\n this.isInitialized = false;\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('parallax', Parallax);\n }\n\n // Expose globally\n window.VanduoParallax = Parallax;\n\n})();\n\n", "/**\n * Vanduo Framework - Preloader Component\n * JavaScript functionality for progress bars and loaders\n */\n\n(function() {\n 'use strict';\n\n /**\n * Preloader Component\n */\n const Preloader = {\n /**\n * Initialize preloader components\n */\n init: function() {\n const progressBars = document.querySelectorAll('.progress-bar[data-progress]');\n \n progressBars.forEach(bar => {\n if (!bar.dataset.progressInitialized) {\n this.initProgressBar(bar);\n }\n });\n },\n \n /**\n * Initialize a progress bar\n * @param {HTMLElement} bar - Progress bar element\n */\n initProgressBar: function(bar) {\n bar.dataset.progressInitialized = 'true';\n \n const initialValue = parseInt(bar.dataset.progress) || 0;\n this.setProgress(bar, initialValue, false);\n },\n \n /**\n * Set progress value\n * @param {HTMLElement|string} bar - Progress bar element or selector\n * @param {number} value - Progress value (0-100)\n * @param {boolean} animate - Whether to animate\n */\n setProgress: function(bar, value, animate = true) {\n const el = typeof bar === 'string' ? document.querySelector(bar) : bar;\n \n if (!el) {\n return;\n }\n \n // Clamp value between 0 and 100\n value = Math.max(0, Math.min(100, value));\n \n // Update width\n if (animate) {\n el.style.transition = 'width var(--transition-duration-slow) var(--transition-ease)';\n } else {\n el.style.transition = 'none';\n setTimeout(() => {\n el.style.transition = '';\n }, 0);\n }\n \n el.style.width = value + '%';\n el.setAttribute('aria-valuenow', value);\n el.setAttribute('aria-valuemin', 0);\n el.setAttribute('aria-valuemax', 100);\n \n // Update text if exists\n const text = el.querySelector('.progress-text');\n if (text) {\n text.textContent = value + '%';\n }\n \n // Dispatch event\n el.dispatchEvent(new CustomEvent('progress:update', {\n bubbles: true,\n detail: { value, max: 100 }\n }));\n \n // Complete event\n if (value >= 100) {\n el.dispatchEvent(new CustomEvent('progress:complete', {\n bubbles: true,\n detail: { value, max: 100 }\n }));\n }\n },\n \n /**\n * Animate progress from current to target\n * @param {HTMLElement|string} bar - Progress bar element or selector\n * @param {number} targetValue - Target progress value (0-100)\n * @param {number} duration - Animation duration in ms\n */\n animateProgress: function(bar, targetValue, duration = 1000) {\n const el = typeof bar === 'string' ? document.querySelector(bar) : bar;\n \n if (!el) {\n return;\n }\n \n const startValue = parseInt(el.style.width) || 0;\n const difference = targetValue - startValue;\n const startTime = performance.now();\n \n const animate = (currentTime) => {\n const elapsed = currentTime - startTime;\n const progress = Math.min(elapsed / duration, 1);\n \n // Easing function (ease-out)\n const easeOut = 1 - Math.pow(1 - progress, 3);\n const currentValue = startValue + (difference * easeOut);\n \n this.setProgress(el, currentValue, false);\n \n if (progress < 1) {\n requestAnimationFrame(animate);\n }\n };\n \n requestAnimationFrame(animate);\n },\n \n /**\n * Show preloader\n * @param {HTMLElement|string} preloader - Preloader element or selector\n */\n show: function(preloader) {\n const el = typeof preloader === 'string' ? document.querySelector(preloader) : preloader;\n if (el) {\n el.style.display = 'inline-block';\n el.setAttribute('aria-hidden', 'false');\n }\n },\n \n /**\n * Hide preloader\n * @param {HTMLElement|string} preloader - Preloader element or selector\n */\n hide: function(preloader) {\n const el = typeof preloader === 'string' ? document.querySelector(preloader) : preloader;\n if (el) {\n el.style.display = 'none';\n el.setAttribute('aria-hidden', 'true');\n }\n },\n \n /**\n * Toggle preloader\n * @param {HTMLElement|string} preloader - Preloader element or selector\n */\n toggle: function(preloader) {\n const el = typeof preloader === 'string' ? document.querySelector(preloader) : preloader;\n if (el) {\n if (el.style.display === 'none' || el.getAttribute('aria-hidden') === 'true') {\n this.show(el);\n } else {\n this.hide(el);\n }\n }\n },\n\n /**\n * Destroy all progress bar instances\n */\n destroyAll: function() {\n const progressBars = document.querySelectorAll('.progress-bar[data-progress-initialized=\"true\"]');\n progressBars.forEach(bar => {\n delete bar.dataset.progressInitialized;\n });\n }\n };\n \n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('preloader', Preloader);\n }\n \n // Expose globally\n window.VanduoPreloader = Preloader;\n \n})();\n\n", "/**\n * Vanduo Framework - Select Component\n * Custom select dropdown with enhanced functionality\n */\n\n(function () {\n 'use strict';\n\n /**\n * Select Component\n */\n const Select = {\n // Store initialized selects and their cleanup functions\n instances: new Map(),\n\n /**\n * Initialize select components\n */\n init: function () {\n const selects = document.querySelectorAll('select.vd-custom-select-input, select[data-custom-select]');\n\n selects.forEach(select => {\n if (this.instances.has(select)) {\n return;\n }\n this.initSelect(select);\n });\n },\n\n /**\n * Initialize a single select\n * @param {HTMLSelectElement} select - Select element\n */\n initSelect: function (select) {\n // Skip if already has custom wrapper\n if (select.closest('.vd-custom-select-wrapper')) {\n return;\n }\n\n const cleanupFunctions = [];\n\n // Create wrapper\n const wrapper = document.createElement('div');\n wrapper.className = 'custom-select-wrapper';\n select.parentNode.insertBefore(wrapper, select);\n wrapper.appendChild(select);\n\n // Create custom button\n const button = document.createElement('button');\n button.type = 'button';\n button.className = 'custom-select-button';\n button.setAttribute('aria-haspopup', 'listbox');\n button.setAttribute('aria-expanded', 'false');\n button.setAttribute('aria-labelledby', select.id || this.generateId(select));\n\n // Create dropdown\n const dropdown = document.createElement('div');\n dropdown.className = 'custom-select-dropdown';\n dropdown.setAttribute('role', 'listbox');\n\n // Create search input if searchable\n if (select.dataset.searchable === 'true') {\n const searchWrapper = document.createElement('div');\n searchWrapper.className = 'custom-select-search';\n const searchInput = document.createElement('input');\n searchInput.type = 'text';\n searchInput.className = 'input input-sm';\n searchInput.placeholder = 'Search...';\n searchInput.setAttribute('aria-label', 'Search options');\n searchWrapper.appendChild(searchInput);\n dropdown.appendChild(searchWrapper);\n\n const filterFn = (e) => {\n this.filterOptions(dropdown, e.target.value);\n };\n const searchHandler = typeof debounce === 'function' ? debounce(filterFn, 150) : filterFn;\n searchInput.addEventListener('input', searchHandler);\n cleanupFunctions.push(() => searchInput.removeEventListener('input', searchHandler));\n }\n\n // Build options\n this.buildOptions(select, dropdown, button);\n\n wrapper.appendChild(button);\n wrapper.appendChild(dropdown);\n\n // Update button text\n this.updateButtonText(select, button);\n\n // Event listeners\n const buttonClickHandler = (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggleDropdown(button, dropdown);\n };\n button.addEventListener('click', buttonClickHandler);\n cleanupFunctions.push(() => button.removeEventListener('click', buttonClickHandler));\n\n // Close on outside click\n const documentClickHandler = (e) => {\n if (!wrapper.contains(e.target) && dropdown.classList.contains('is-open')) {\n this.closeDropdown(button, dropdown);\n }\n };\n document.addEventListener('click', documentClickHandler);\n cleanupFunctions.push(() => document.removeEventListener('click', documentClickHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, select, button, dropdown);\n };\n button.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => button.removeEventListener('keydown', keydownHandler));\n\n // Update on select change\n const changeHandler = () => {\n this.updateButtonText(select, button);\n this.updateSelectedOptions(select, dropdown);\n };\n select.addEventListener('change', changeHandler);\n cleanupFunctions.push(() => select.removeEventListener('change', changeHandler));\n\n this.instances.set(select, { wrapper, button, dropdown, cleanup: cleanupFunctions, typeaheadBuffer: '', typeaheadTimer: null });\n },\n\n /**\n * Build options in dropdown\n * @param {HTMLSelectElement} select - Select element\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} button - Button element\n */\n buildOptions: function (select, dropdown, button) {\n const options = select.querySelectorAll('option');\n const fragment = document.createDocumentFragment();\n\n options.forEach((option, index) => {\n if (option.parentElement.tagName === 'OPTGROUP') {\n // Handle option groups\n const group = option.parentElement;\n if (!dropdown.querySelector(`[data-group=\"${group.label}\"]`)) {\n const groupElement = document.createElement('div');\n groupElement.className = 'custom-select-option-group';\n groupElement.textContent = group.label;\n groupElement.dataset.group = group.label;\n fragment.appendChild(groupElement);\n }\n }\n\n if (option.value === '' && !option.textContent.trim()) {\n return; // Skip empty options\n }\n\n const optionElement = document.createElement('div');\n optionElement.className = 'custom-select-option';\n optionElement.textContent = option.textContent;\n optionElement.setAttribute('role', 'option');\n optionElement.setAttribute('data-value', option.value);\n optionElement.setAttribute('data-index', index);\n\n if (option.selected) {\n optionElement.classList.add('is-selected');\n optionElement.setAttribute('aria-selected', 'true');\n }\n\n if (option.disabled) {\n optionElement.classList.add('is-disabled');\n optionElement.setAttribute('aria-disabled', 'true');\n }\n\n optionElement.addEventListener('click', (_e) => {\n if (!option.disabled) {\n this.selectOption(select, option, optionElement, button, dropdown);\n }\n });\n\n fragment.appendChild(optionElement);\n });\n\n dropdown.appendChild(fragment);\n },\n\n /**\n * Select an option\n * @param {HTMLSelectElement} select - Select element\n * @param {HTMLOptionElement} option - Option element\n * @param {HTMLElement} optionElement - Custom option element\n * @param {HTMLElement} button - Button element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n selectOption: function (select, option, optionElement, button, dropdown) {\n if (select.multiple) {\n // Multi-select\n option.selected = !option.selected;\n optionElement.classList.toggle('is-selected');\n optionElement.setAttribute('aria-selected', option.selected);\n } else {\n // Single select\n select.value = option.value;\n select.dispatchEvent(new Event('change', { bubbles: true }));\n this.closeDropdown(button, dropdown);\n }\n\n this.updateButtonText(select, button);\n },\n\n /**\n * Update button text\n * @param {HTMLSelectElement} select - Select element\n * @param {HTMLElement} button - Button element\n */\n updateButtonText: function (select, button) {\n if (select.multiple) {\n const selected = Array.from(select.selectedOptions);\n if (selected.length === 0) {\n button.textContent = select.dataset.placeholder || 'Select options...';\n } else if (selected.length === 1) {\n button.textContent = selected[0].textContent;\n } else {\n button.textContent = `${selected.length} selected`;\n }\n } else {\n const selectedOption = select.options[select.selectedIndex];\n button.textContent = selectedOption ? selectedOption.textContent : (select.dataset.placeholder || 'Select...');\n }\n },\n\n /**\n * Update selected options in dropdown\n * @param {HTMLSelectElement} select - Select element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n updateSelectedOptions: function (select, dropdown) {\n const options = dropdown.querySelectorAll('.custom-select-option');\n const selectedValues = Array.from(select.selectedOptions).map(opt => opt.value);\n\n options.forEach(optionEl => {\n const value = optionEl.dataset.value;\n if (selectedValues.includes(value)) {\n optionEl.classList.add('is-selected');\n optionEl.setAttribute('aria-selected', 'true');\n } else {\n optionEl.classList.remove('is-selected');\n optionEl.setAttribute('aria-selected', 'false');\n }\n });\n },\n\n /**\n * Toggle dropdown\n * @param {HTMLElement} button - Button element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n toggleDropdown: function (button, dropdown) {\n const isOpen = dropdown.classList.contains('is-open');\n\n if (isOpen) {\n this.closeDropdown(button, dropdown);\n } else {\n this.openDropdown(button, dropdown);\n }\n },\n\n /**\n * Open dropdown\n * @param {HTMLElement} button - Button element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n openDropdown: function (button, dropdown) {\n dropdown.classList.add('is-open');\n button.setAttribute('aria-expanded', 'true');\n\n // Focus first option\n const firstOption = dropdown.querySelector('.custom-select-option:not(.is-disabled)');\n if (firstOption) {\n firstOption.focus();\n }\n },\n\n /**\n * Close dropdown\n * @param {HTMLElement} button - Button element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n closeDropdown: function (button, dropdown) {\n dropdown.classList.remove('is-open');\n button.setAttribute('aria-expanded', 'false');\n },\n\n /**\n * Handle keyboard navigation\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLSelectElement} select - Select element\n * @param {HTMLElement} button - Button element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n handleKeydown: function (e, select, button, dropdown) {\n const isOpen = dropdown.classList.contains('is-open');\n const options = Array.from(dropdown.querySelectorAll('.custom-select-option:not(.is-disabled)'));\n const currentIndex = options.findIndex(opt => opt === document.activeElement);\n\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n if (isOpen && currentIndex >= 0) {\n const optionEl = options[currentIndex];\n const option = select.options[parseInt(optionEl.dataset.index)];\n this.selectOption(select, option, optionEl, button, dropdown);\n } else {\n this.openDropdown(button, dropdown);\n }\n break;\n\n case 'Escape':\n if (isOpen) {\n e.preventDefault();\n this.closeDropdown(button, dropdown);\n button.focus();\n }\n break;\n\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen) {\n this.openDropdown(button, dropdown);\n } else {\n const nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0;\n options[nextIndex].focus();\n }\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n if (isOpen) {\n const prevIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1;\n options[prevIndex].focus();\n }\n break;\n\n case 'Home':\n if (isOpen) {\n e.preventDefault();\n options[0].focus();\n }\n break;\n\n case 'End':\n if (isOpen) {\n e.preventDefault();\n options[options.length - 1].focus();\n }\n break;\n\n default:\n // Typeahead: jump to matching option when typing printable characters\n if (isOpen && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\n // Per-instance typeahead state to avoid cross-instance corruption\n const instance = this.instances.get(select);\n if (!instance) break;\n clearTimeout(instance.typeaheadTimer);\n instance.typeaheadBuffer += e.key.toLowerCase();\n\n const match = options.find(opt =>\n opt.textContent.trim().toLowerCase().startsWith(instance.typeaheadBuffer)\n );\n if (match) {\n match.focus();\n }\n\n instance.typeaheadTimer = setTimeout(() => {\n instance.typeaheadBuffer = '';\n }, 500);\n }\n break;\n }\n },\n\n /**\n * Filter options by search term\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {string} searchTerm - Search term\n */\n filterOptions: function (dropdown, searchTerm) {\n const options = dropdown.querySelectorAll('.vd-custom-select-option');\n const term = searchTerm.toLowerCase();\n\n options.forEach(option => {\n const text = option.textContent.toLowerCase();\n if (text.includes(term)) {\n option.style.display = 'block';\n } else {\n option.style.display = 'none';\n }\n });\n },\n\n /**\n * Generate unique ID\n * @param {HTMLElement} element - Element\n * @returns {string} Generated ID\n */\n generateId: function (element) {\n if (element.id) {\n return element.id;\n }\n const id = 'select-' + Math.random().toString(36).substr(2, 9);\n element.id = id;\n return id;\n },\n\n /**\n * Destroy a select instance and clean up event listeners\n * @param {HTMLSelectElement} select - Select element\n */\n destroy: function (select) {\n const instance = this.instances.get(select);\n if (!instance) return;\n\n instance.cleanup.forEach(fn => fn());\n\n // Unwrap the select element back to its original parent\n if (instance.wrapper && instance.wrapper.parentNode) {\n instance.wrapper.parentNode.insertBefore(select, instance.wrapper);\n instance.wrapper.parentNode.removeChild(instance.wrapper);\n }\n\n this.instances.delete(select);\n },\n\n /**\n * Destroy all select instances\n */\n destroyAll: function () {\n this.instances.forEach((instance, select) => {\n this.destroy(select);\n });\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('select', Select);\n }\n\n})();\n\n", "/**\n * Vanduo Framework - Sidenav Component\n * JavaScript functionality for side navigation drawer\n */\n\n(function() {\n 'use strict';\n\n /**\n * Sidenav Component\n */\n const Sidenav = {\n sidenavs: new Map(),\n breakpoint: 992, // Desktop breakpoint\n \n // Global cleanup functions (toggles, resize)\n _globalCleanups: [],\n\n isFixedVariant: function(sidenav) {\n return sidenav.classList.contains('vd-sidenav-fixed') || sidenav.classList.contains('sidenav-fixed');\n },\n\n isPushVariant: function(sidenav) {\n return sidenav.classList.contains('vd-sidenav-push') || sidenav.classList.contains('sidenav-push');\n },\n\n isRightVariant: function(sidenav) {\n return sidenav.classList.contains('vd-sidenav-right') || sidenav.classList.contains('sidenav-right');\n },\n\n /**\n * Initialize sidenav components\n */\n init: function() {\n const sidenavs = document.querySelectorAll('.vd-sidenav, .vd-offcanvas');\n\n sidenavs.forEach(sidenav => {\n if (this.sidenavs.has(sidenav)) {\n return;\n }\n this.initSidenav(sidenav);\n });\n\n // Handle toggle buttons\n const toggles = document.querySelectorAll('[data-sidenav-toggle]');\n toggles.forEach(toggle => {\n if (toggle.dataset.sidenavToggleInitialized) return;\n toggle.dataset.sidenavToggleInitialized = 'true';\n\n const toggleClickHandler = (e) => {\n e.preventDefault();\n const targetId = toggle.dataset.sidenavToggle;\n const sidenav = document.querySelector(targetId);\n if (sidenav) {\n this.toggle(sidenav);\n }\n };\n toggle.addEventListener('click', toggleClickHandler);\n this._globalCleanups.push(() => toggle.removeEventListener('click', toggleClickHandler));\n });\n\n // Handle responsive behavior\n this.handleResize();\n const resizeHandler = () => {\n this.handleResize();\n };\n window.addEventListener('resize', resizeHandler);\n this._globalCleanups.push(() => window.removeEventListener('resize', resizeHandler));\n },\n\n /**\n * Initialize a single sidenav\n * @param {HTMLElement} sidenav - Sidenav element\n */\n initSidenav: function(sidenav) {\n // Apply data-vd-position direction class if specified\n const position = sidenav.getAttribute('data-vd-position');\n if (position) {\n const prefix = sidenav.classList.contains('vd-offcanvas') ? 'vd-offcanvas' : 'vd-sidenav';\n sidenav.classList.add(prefix + '-' + position);\n }\n\n const overlay = this.createOverlay(sidenav);\n const closeButton = sidenav.querySelector('.vd-sidenav-close, .vd-offcanvas-close');\n const cleanupFunctions = [];\n\n // Set ARIA attributes\n sidenav.setAttribute('role', 'navigation');\n sidenav.setAttribute('aria-hidden', 'true');\n\n // Close button handler\n if (closeButton) {\n const closeHandler = () => {\n this.close(sidenav);\n };\n closeButton.addEventListener('click', closeHandler);\n cleanupFunctions.push(() => closeButton.removeEventListener('click', closeHandler));\n }\n\n // Overlay click handler\n const overlayClickHandler = () => {\n if (sidenav.dataset.backdrop !== 'static') {\n this.close(sidenav);\n }\n };\n overlay.addEventListener('click', overlayClickHandler);\n cleanupFunctions.push(() => overlay.removeEventListener('click', overlayClickHandler));\n\n // ESC key handler\n const escKeyHandler = (e) => {\n if (e.key === 'Escape' && sidenav.classList.contains('is-open')) {\n if (sidenav.dataset.keyboard !== 'false') {\n this.close(sidenav);\n }\n }\n };\n document.addEventListener('keydown', escKeyHandler);\n cleanupFunctions.push(() => document.removeEventListener('keydown', escKeyHandler));\n\n this.sidenavs.set(sidenav, { overlay, cleanup: cleanupFunctions });\n },\n \n /**\n * Create overlay element\n * @param {HTMLElement} sidenav - Sidenav element\n * @returns {HTMLElement} Overlay element\n */\n createOverlay: function(sidenav) {\n let overlay = sidenav.querySelector('.vd-sidenav-overlay');\n \n if (!overlay) {\n overlay = document.createElement('div');\n overlay.className = 'vd-sidenav-overlay';\n document.body.appendChild(overlay);\n }\n \n return overlay;\n },\n \n /**\n * Open sidenav\n * @param {HTMLElement|string} sidenav - Sidenav element or selector\n */\n open: function(sidenav) {\n const el = typeof sidenav === 'string' ? document.querySelector(sidenav) : sidenav;\n \n if (!el || !this.sidenavs.has(el)) {\n return;\n }\n \n const { overlay } = this.sidenavs.get(el);\n \n // Show overlay (if not fixed)\n if (!this.isFixedVariant(el)) {\n overlay.classList.add('is-visible');\n }\n \n // Open sidenav\n el.classList.add('is-open');\n el.setAttribute('aria-hidden', 'false');\n \n // Lock body scroll\n document.body.classList.add('body-sidenav-open');\n \n // Handle push variant\n if (this.isPushVariant(el)) {\n this.handlePushVariant(el, true);\n }\n \n // Dispatch event\n el.dispatchEvent(new CustomEvent('sidenav:open', { bubbles: true }));\n },\n \n /**\n * Close sidenav\n * @param {HTMLElement|string} sidenav - Sidenav element or selector\n */\n close: function(sidenav) {\n const el = typeof sidenav === 'string' ? document.querySelector(sidenav) : sidenav;\n \n if (!el || !this.sidenavs.has(el)) {\n return;\n }\n \n const { overlay } = this.sidenavs.get(el);\n \n // Hide overlay\n overlay.classList.remove('is-visible');\n \n // Close sidenav\n el.classList.remove('is-open');\n el.setAttribute('aria-hidden', 'true');\n \n // Unlock body scroll\n document.body.classList.remove('body-sidenav-open');\n \n // Handle push variant\n if (this.isPushVariant(el)) {\n this.handlePushVariant(el, false);\n }\n \n // Dispatch event\n el.dispatchEvent(new CustomEvent('sidenav:close', { bubbles: true }));\n },\n \n /**\n * Toggle sidenav\n * @param {HTMLElement|string} sidenav - Sidenav element or selector\n */\n toggle: function(sidenav) {\n const el = typeof sidenav === 'string' ? document.querySelector(sidenav) : sidenav;\n if (el) {\n if (el.classList.contains('is-open')) {\n this.close(el);\n } else {\n this.open(el);\n }\n }\n },\n \n /**\n * Handle push variant\n * @param {HTMLElement} sidenav - Sidenav element\n * @param {boolean} isOpen - Whether sidenav is open\n */\n handlePushVariant: function(sidenav, isOpen) {\n // Find the main content wrapper\n const content = document.querySelector('main, .main-content, .content, [role=\"main\"]') || document.body;\n \n if (isOpen) {\n if (window.innerWidth >= this.breakpoint) {\n if (this.isRightVariant(sidenav)) {\n content.style.marginRight = sidenav.offsetWidth + 'px';\n } else {\n content.style.marginLeft = sidenav.offsetWidth + 'px';\n }\n }\n } else {\n content.style.marginLeft = '';\n content.style.marginRight = '';\n }\n },\n \n /**\n * Handle window resize\n */\n handleResize: function() {\n this.sidenavs.forEach(({ overlay }, sidenav) => {\n // Close overlay sidenavs on resize to desktop if they're open\n if (window.innerWidth >= this.breakpoint) {\n if (this.isFixedVariant(sidenav) && !sidenav.classList.contains('is-open')) {\n // Fixed sidenavs should be visible on desktop\n sidenav.classList.add('is-open');\n sidenav.setAttribute('aria-hidden', 'false');\n overlay.classList.remove('is-visible');\n }\n } else {\n // On mobile, fixed sidenavs become overlay\n if (this.isFixedVariant(sidenav) && sidenav.classList.contains('is-open')) {\n this.close(sidenav);\n }\n }\n });\n },\n\n /**\n * Destroy a sidenav instance and clean up event listeners\n * @param {HTMLElement} sidenav - Sidenav element\n */\n destroy: function(sidenav) {\n const data = this.sidenavs.get(sidenav);\n if (!data) return;\n\n // Close if open\n if (sidenav.classList.contains('is-open')) {\n this.close(sidenav);\n }\n\n data.cleanup.forEach(fn => fn());\n\n // Remove created overlay\n if (data.overlay && data.overlay.parentNode) {\n data.overlay.parentNode.removeChild(data.overlay);\n }\n\n this.sidenavs.delete(sidenav);\n },\n\n /**\n * Destroy all sidenav instances\n */\n destroyAll: function() {\n this.sidenavs.forEach((data, sidenav) => {\n this.destroy(sidenav);\n });\n this._globalCleanups.forEach(fn => fn());\n this._globalCleanups = [];\n }\n };\n \n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('sidenav', Sidenav);\n }\n \n // Expose globally\n window.VanduoSidenav = Sidenav;\n \n})();\n\n", "/**\n * Vanduo Framework - Tabs Component\n * Tabbed content navigation with keyboard support\n */\n\n(function() {\n 'use strict';\n\n /**\n * Tabs Component\n */\n const Tabs = {\n // Store initialized tab containers and their cleanup functions\n instances: new Map(),\n\n /**\n * Initialize all tab components\n */\n init: function() {\n const tabContainers = document.querySelectorAll('.vd-tabs, [data-tabs]');\n\n tabContainers.forEach(container => {\n if (this.instances.has(container)) {\n return;\n }\n this.initTabs(container);\n });\n },\n\n /**\n * Initialize a single tab container\n * @param {HTMLElement} container - Tabs container element\n */\n initTabs: function(container) {\n const tabList = container.querySelector('.vd-tab-list, [role=\"tablist\"]');\n const tabLinks = container.querySelectorAll('.vd-tab-link, [data-tab]');\n const tabPanes = container.querySelectorAll('.vd-tab-pane, [data-tab-pane]');\n\n if (!tabList || tabLinks.length === 0) return;\n\n const cleanupFunctions = [];\n\n // Set up ARIA attributes\n tabList.setAttribute('role', 'tablist');\n\n tabLinks.forEach((link, index) => {\n const tabId = link.dataset.tab || link.getAttribute('href')?.replace('#', '') || `tab-${index}`;\n const pane = this.findPane(container, tabId, tabPanes);\n\n // Set up tab attributes\n link.setAttribute('role', 'tab');\n link.setAttribute('aria-selected', link.classList.contains('is-active') ? 'true' : 'false');\n link.setAttribute('tabindex', link.classList.contains('is-active') ? '0' : '-1');\n\n if (!link.id) {\n link.id = `tab-btn-${tabId}`;\n }\n\n // Set up pane attributes\n if (pane) {\n pane.setAttribute('role', 'tabpanel');\n pane.setAttribute('aria-labelledby', link.id);\n if (!pane.id) {\n pane.id = `tab-pane-${tabId}`;\n }\n link.setAttribute('aria-controls', pane.id);\n }\n\n // Click handler\n const clickHandler = (e) => {\n e.preventDefault();\n if (!link.classList.contains('disabled') && !link.disabled) {\n this.activateTab(container, link, tabLinks, tabPanes);\n }\n };\n link.addEventListener('click', clickHandler);\n cleanupFunctions.push(() => link.removeEventListener('click', clickHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, container, link, tabLinks, tabPanes);\n };\n link.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => link.removeEventListener('keydown', keydownHandler));\n });\n\n // Ensure one tab is active\n const activeTab = container.querySelector('.vd-tab-link.is-active, [data-tab].is-active');\n if (!activeTab && tabLinks.length > 0) {\n this.activateTab(container, tabLinks[0], tabLinks, tabPanes);\n }\n\n this.instances.set(container, { cleanup: cleanupFunctions });\n },\n\n /**\n * Find the pane associated with a tab\n * @param {HTMLElement} container - Tabs container\n * @param {string} tabId - Tab identifier\n * @param {NodeList} tabPanes - All tab panes\n * @returns {HTMLElement|null} The matching pane\n */\n findPane: function(container, tabId, tabPanes) {\n // Try data attribute first\n let pane = container.querySelector(`[data-tab-pane=\"${tabId}\"]`);\n\n // Try ID\n if (!pane) {\n pane = container.querySelector(`#${tabId}`);\n }\n\n // Try matching by index\n if (!pane) {\n const tabLinks = container.querySelectorAll('.vd-tab-link, [data-tab]');\n tabLinks.forEach((link, index) => {\n const linkTabId = link.dataset.tab || link.getAttribute('href')?.replace('#', '');\n if (linkTabId === tabId && tabPanes[index]) {\n pane = tabPanes[index];\n }\n });\n }\n\n return pane;\n },\n\n /**\n * Activate a tab\n * @param {HTMLElement} container - Tabs container\n * @param {HTMLElement} tab - Tab to activate\n * @param {NodeList} allTabs - All tab links\n * @param {NodeList} allPanes - All tab panes\n */\n activateTab: function(container, tab, allTabs, allPanes) {\n const tabId = tab.dataset.tab || tab.getAttribute('href')?.replace('#', '') || tab.id;\n\n // Deactivate all tabs\n allTabs.forEach(t => {\n t.classList.remove('is-active');\n t.setAttribute('aria-selected', 'false');\n t.setAttribute('tabindex', '-1');\n\n // Also handle parent li if exists\n if (t.parentElement && t.parentElement.classList.contains('tab-item')) {\n t.parentElement.classList.remove('is-active');\n }\n });\n\n // Hide all panes\n allPanes.forEach(p => {\n p.classList.remove('is-active');\n });\n\n // Activate selected tab\n tab.classList.add('is-active');\n tab.setAttribute('aria-selected', 'true');\n tab.setAttribute('tabindex', '0');\n\n // Also handle parent li if exists\n if (tab.parentElement && tab.parentElement.classList.contains('tab-item')) {\n tab.parentElement.classList.add('is-active');\n }\n\n // Show corresponding pane\n const pane = this.findPane(container, tabId, allPanes);\n if (pane) {\n pane.classList.add('is-active');\n }\n\n // Dispatch custom event\n const event = new CustomEvent('tab:change', {\n bubbles: true,\n detail: {\n tab: tab,\n pane: pane,\n tabId: tabId\n }\n });\n container.dispatchEvent(event);\n },\n\n /**\n * Handle keyboard navigation\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} container - Tabs container\n * @param {HTMLElement} currentTab - Currently focused tab\n * @param {NodeList} allTabs - All tab links\n * @param {NodeList} allPanes - All tab panes\n */\n handleKeydown: function(e, container, currentTab, allTabs, allPanes) {\n const isVertical = container.classList.contains('tabs-vertical');\n const tabs = Array.from(allTabs).filter(t => !t.classList.contains('disabled') && !t.disabled);\n const currentIndex = tabs.indexOf(currentTab);\n\n let newIndex = currentIndex;\n\n switch (e.key) {\n case 'ArrowLeft':\n if (!isVertical) {\n e.preventDefault();\n newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;\n }\n break;\n\n case 'ArrowRight':\n if (!isVertical) {\n e.preventDefault();\n newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;\n }\n break;\n\n case 'ArrowUp':\n if (isVertical) {\n e.preventDefault();\n newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;\n }\n break;\n\n case 'ArrowDown':\n if (isVertical) {\n e.preventDefault();\n newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;\n }\n break;\n\n case 'Home':\n e.preventDefault();\n newIndex = 0;\n break;\n\n case 'End':\n e.preventDefault();\n newIndex = tabs.length - 1;\n break;\n\n case 'Enter':\n case ' ':\n e.preventDefault();\n this.activateTab(container, currentTab, allTabs, allPanes);\n return;\n\n default:\n return;\n }\n\n // Focus and activate new tab\n if (newIndex !== currentIndex) {\n tabs[newIndex].focus();\n this.activateTab(container, tabs[newIndex], allTabs, allPanes);\n }\n },\n\n /**\n * Programmatically show a tab\n * @param {string|HTMLElement} tab - Tab identifier or element\n */\n show: function(tab) {\n let tabElement;\n\n if (typeof tab === 'string') {\n tabElement = document.querySelector(`[data-tab=\"${tab}\"], [href=\"#${tab}\"]`);\n } else {\n tabElement = tab;\n }\n\n if (!tabElement) return;\n\n const container = tabElement.closest('.vd-tabs, [data-tabs]');\n if (!container) return;\n\n const allTabs = container.querySelectorAll('.vd-tab-link, [data-tab]');\n const allPanes = container.querySelectorAll('.vd-tab-pane, [data-tab-pane]');\n\n this.activateTab(container, tabElement, allTabs, allPanes);\n },\n\n /**\n * Destroy a tabs instance and clean up event listeners\n * @param {HTMLElement} container - Tabs container\n */\n destroy: function(container) {\n const instance = this.instances.get(container);\n if (!instance) return;\n\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(container);\n },\n\n /**\n * Destroy all tabs instances\n */\n destroyAll: function() {\n this.instances.forEach((instance, container) => {\n this.destroy(container);\n });\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tabs', Tabs);\n }\n\n})();\n", "/**\n * Vanduo Framework - Theme Customizer\n * A comprehensive theme customization component for the navbar\n * Handles primary color, neutral color, radius, font, and color mode\n */\n\n(function () {\n 'use strict';\n\n const ThemeCustomizer = {\n // Storage keys\n STORAGE_KEYS: {\n PRIMARY: 'vanduo-primary-color',\n NEUTRAL: 'vanduo-neutral-color',\n RADIUS: 'vanduo-radius',\n FONT: 'vanduo-font-preference',\n THEME: 'vanduo-theme-preference'\n },\n\n // Default values\n DEFAULTS: {\n PRIMARY_LIGHT: 'black',\n PRIMARY_DARK: 'amber',\n NEUTRAL: 'neutral',\n RADIUS: '0.5',\n FONT: 'ubuntu',\n THEME: 'system'\n },\n\n // Primary color definitions (Open Color based)\n PRIMARY_COLORS: {\n 'black': { name: 'Black', color: '#000000' },\n 'red': { name: 'Red', color: '#fa5252' },\n 'orange': { name: 'Orange', color: '#fd7e14' },\n 'amber': { name: 'Amber', color: '#f59f00' },\n 'yellow': { name: 'Yellow', color: '#fcc419' },\n 'lime': { name: 'Lime', color: '#82c91e' },\n 'green': { name: 'Green', color: '#40c057' },\n 'emerald': { name: 'Emerald', color: '#20c997' },\n 'teal': { name: 'Teal', color: '#12b886' },\n 'cyan': { name: 'Cyan', color: '#22b8cf' },\n 'sky': { name: 'Sky', color: '#3bc9db' },\n 'blue': { name: 'Blue', color: '#228be6' },\n 'indigo': { name: 'Indigo', color: '#4c6ef5' },\n 'violet': { name: 'Violet', color: '#7950f2' },\n 'purple': { name: 'Purple', color: '#be4bdb' },\n 'fuchsia': { name: 'Fuchsia', color: '#f06595' },\n 'pink': { name: 'Pink', color: '#e64980' },\n 'rose': { name: 'Rose', color: '#ff8787' }\n },\n\n // Neutral color definitions\n NEUTRAL_COLORS: {\n 'slate': { name: 'Slate', color: '#64748b' },\n 'gray': { name: 'Gray', color: '#6b7280' },\n 'zinc': { name: 'Zinc', color: '#71717a' },\n 'neutral': { name: 'Neutral', color: '#737373' },\n 'stone': { name: 'Stone', color: '#78716c' }\n },\n\n // Radius options\n RADIUS_OPTIONS: ['0', '0.125', '0.25', '0.375', '0.5'],\n\n // Font options\n FONT_OPTIONS: {\n 'jetbrains-mono': { name: 'JetBrains Mono', family: \"'JetBrains Mono', monospace\" },\n 'inter': { name: 'Inter', family: \"'Inter', sans-serif\" },\n 'source-sans': { name: 'Source Sans 3', family: \"'Source Sans 3', sans-serif\" },\n 'fira-sans': { name: 'Fira Sans', family: \"'Fira Sans', sans-serif\" },\n 'ibm-plex': { name: 'IBM Plex Sans', family: \"'IBM Plex Sans', sans-serif\" },\n 'system': { name: 'System Default', family: null },\n // Google Fonts Collection\n 'ubuntu': { name: 'Ubuntu', family: \"'Ubuntu', sans-serif\" },\n 'open-sans': { name: 'Open Sans', family: \"'Open Sans', sans-serif\" },\n 'rubik': { name: 'Rubik', family: \"'Rubik', sans-serif\" },\n 'titillium-web': { name: 'Titillium Web', family: \"'Titillium Web', sans-serif\" }\n },\n\n // Theme mode options\n THEME_MODES: ['system', 'dark', 'light'],\n\n // State\n state: {\n primary: null,\n neutral: null,\n radius: null,\n font: null,\n theme: null,\n isOpen: false\n },\n\n isInitialized: false,\n _cleanup: [],\n\n // DOM references\n elements: {\n customizer: null,\n trigger: null,\n panel: null,\n overlay: null\n },\n\n /**\n * Initialize the Theme Customizer\n */\n init: function () {\n if (this.isInitialized) {\n this.bindExistingElements();\n this.bindPanelEvents();\n this.updateUI();\n return;\n }\n\n this.isInitialized = true;\n this._cleanup = [];\n\n this.loadPreferences();\n this.applyAllPreferences();\n this.bindExistingElements();\n this.bindEvents();\n\n console.log('Vanduo Theme Customizer initialized');\n },\n\n addListener: function (target, event, handler, options) {\n if (!target) return;\n target.addEventListener(event, handler, options);\n this._cleanup.push(() => target.removeEventListener(event, handler, options));\n },\n\n /**\n * Get default primary color based on theme\n */\n getDefaultPrimary: function (theme) {\n if (theme === 'system') {\n if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {\n return this.DEFAULTS.PRIMARY_DARK;\n }\n return this.DEFAULTS.PRIMARY_LIGHT;\n }\n return theme === 'dark' ? this.DEFAULTS.PRIMARY_DARK : this.DEFAULTS.PRIMARY_LIGHT;\n },\n\n /**\n * Load preferences from localStorage\n */\n loadPreferences: function () {\n this.state.theme = this.getStorageValue(this.STORAGE_KEYS.THEME, this.DEFAULTS.THEME);\n this.state.primary = this.getStorageValue(this.STORAGE_KEYS.PRIMARY, this.getDefaultPrimary(this.state.theme));\n this._normalizeDefaultPrimaryIfStaleWithStoredTheme();\n this.state.neutral = this.getStorageValue(this.STORAGE_KEYS.NEUTRAL, this.DEFAULTS.NEUTRAL);\n this.state.radius = this.getStorageValue(this.STORAGE_KEYS.RADIUS, this.DEFAULTS.RADIUS);\n this.state.font = this.getStorageValue(this.STORAGE_KEYS.FONT, this.DEFAULTS.FONT);\n },\n\n /**\n * Save a preference to localStorage\n */\n savePreference: function (key, value) {\n this.setStorageValue(key, value);\n },\n\n /**\n * Apply all preferences\n */\n applyAllPreferences: function () {\n this.applyPrimary(this.state.primary);\n this.applyNeutral(this.state.neutral);\n this.applyRadius(this.state.radius);\n this.applyFont(this.state.font);\n this.applyTheme(this.state.theme);\n },\n\n /**\n * Apply primary color\n */\n applyPrimary: function (colorKey) {\n if (!this.PRIMARY_COLORS[colorKey]) {\n colorKey = this.getDefaultPrimary(this.state.theme);\n }\n\n this.state.primary = colorKey;\n document.documentElement.setAttribute('data-primary', colorKey);\n this.savePreference(this.STORAGE_KEYS.PRIMARY, colorKey);\n\n this.dispatchEvent('primary-change', { color: colorKey });\n },\n\n /**\n * Apply neutral color\n */\n applyNeutral: function (neutralKey) {\n if (!this.NEUTRAL_COLORS[neutralKey]) {\n neutralKey = this.DEFAULTS.NEUTRAL;\n }\n\n this.state.neutral = neutralKey;\n document.documentElement.setAttribute('data-neutral', neutralKey);\n this.savePreference(this.STORAGE_KEYS.NEUTRAL, neutralKey);\n\n this.dispatchEvent('neutral-change', { neutral: neutralKey });\n },\n\n /**\n * Apply border radius\n */\n applyRadius: function (radius) {\n if (!this.RADIUS_OPTIONS.includes(radius)) {\n radius = this.DEFAULTS.RADIUS;\n }\n\n this.state.radius = radius;\n document.documentElement.setAttribute('data-radius', radius);\n document.documentElement.style.setProperty('--radius-scale', radius);\n this.savePreference(this.STORAGE_KEYS.RADIUS, radius);\n\n this.dispatchEvent('radius-change', { radius: radius });\n },\n\n /**\n * Apply font family\n */\n applyFont: function (fontKey) {\n if (!this.FONT_OPTIONS[fontKey]) {\n fontKey = this.DEFAULTS.FONT;\n }\n\n this.state.font = fontKey;\n\n if (fontKey === 'system') {\n document.documentElement.removeAttribute('data-font');\n } else {\n document.documentElement.setAttribute('data-font', fontKey);\n }\n\n this.savePreference(this.STORAGE_KEYS.FONT, fontKey);\n\n // Also update the existing FontSwitcher if available\n if (window.FontSwitcher && window.FontSwitcher.setPreference) {\n window.FontSwitcher.state.preference = fontKey;\n window.FontSwitcher.applyFont();\n }\n\n this.dispatchEvent('font-change', { font: fontKey });\n },\n\n /**\n * Apply theme mode\n */\n applyTheme: function (mode) {\n if (!this.THEME_MODES.includes(mode)) {\n mode = this.DEFAULTS.THEME;\n }\n\n // Prevent circular updates\n this._isApplying = true;\n\n // Re-align black/amber when they don't match the effective primary for the target mode.\n // Covers theme toggles and stale localStorage (e.g. amber saved while theme is light).\n if (this.isUsingDefaultPrimary()) {\n const expected = this.getDefaultPrimary(mode);\n if (this.state.primary !== expected) {\n this.applyPrimary(expected);\n }\n }\n\n this.state.theme = mode;\n\n if (mode === 'system') {\n document.documentElement.removeAttribute('data-theme');\n } else {\n document.documentElement.setAttribute('data-theme', mode);\n }\n\n this.savePreference(this.STORAGE_KEYS.THEME, mode);\n\n // Also update the existing ThemeSwitcher if available\n // Only update state, don't call setPreference to avoid circular calls\n if (window.Vanduo && window.Vanduo.components.themeSwitcher) {\n const themeSwitcher = window.Vanduo.components.themeSwitcher;\n if (themeSwitcher.state && themeSwitcher.state.preference !== mode) {\n themeSwitcher.state.preference = mode;\n if (typeof themeSwitcher.setStorageValue === 'function') {\n themeSwitcher.setStorageValue(themeSwitcher.STORAGE_KEY, mode);\n }\n if (typeof themeSwitcher.updateUI === 'function') {\n themeSwitcher.updateUI();\n }\n }\n }\n\n this._isApplying = false;\n this.dispatchEvent('mode-change', { mode: mode });\n },\n\n /**\n * Dispatch custom event\n */\n dispatchEvent: function (type, detail) {\n const event = new CustomEvent('theme:' + type, {\n bubbles: true,\n detail: detail\n });\n document.dispatchEvent(event);\n\n // Also dispatch a general change event\n const changeEvent = new CustomEvent('theme:change', {\n bubbles: true,\n detail: {\n type: type,\n value: detail[Object.keys(detail)[0]],\n state: { ...this.state }\n }\n });\n document.dispatchEvent(changeEvent);\n },\n\n /**\n * Bind to existing DOM elements or create them dynamically\n */\n bindExistingElements: function () {\n // First check for existing full structure\n this.elements.customizer = document.querySelector('.vd-theme-customizer');\n\n if (this.elements.customizer) {\n this.elements.trigger = this.elements.customizer.querySelector('.vd-theme-customizer-trigger');\n this.elements.panel = this.elements.customizer.querySelector('.vd-theme-customizer-panel');\n this.elements.overlay = this.elements.customizer.querySelector('.vd-theme-customizer-overlay');\n } else {\n // Look for standalone trigger button with data attribute\n const standaloneTrigger = document.querySelector('[data-theme-customizer-trigger]');\n if (standaloneTrigger) {\n this.createDynamicPanel(standaloneTrigger);\n }\n }\n\n // Update UI to reflect current state\n this.updateUI();\n },\n\n /**\n * Create the panel dynamically when only a trigger button exists\n */\n createDynamicPanel: function (triggerButton) {\n // Create wrapper\n const wrapper = document.createElement('div');\n wrapper.className = 'vd-theme-customizer';\n\n // Move trigger into wrapper or create reference\n this.elements.trigger = triggerButton;\n\n // Create overlay\n const overlay = document.createElement('div');\n overlay.className = 'vd-theme-customizer-overlay';\n\n // Create panel\n const panel = document.createElement('div');\n panel.className = 'vd-theme-customizer-panel';\n panel.innerHTML = this.getPanelHTML();\n\n // Append to body\n document.body.appendChild(overlay);\n document.body.appendChild(panel);\n\n // Store references\n this.elements.panel = panel;\n this.elements.overlay = overlay;\n this.elements.customizer = { contains: (el) => panel.contains(el) || triggerButton.contains(el) };\n\n // Position panel below trigger on desktop\n this.positionPanel();\n\n // Bind panel events after creation\n this.bindPanelEvents();\n\n // Reposition on resize\n this.addListener(window, 'resize', () => this.positionPanel());\n },\n\n /**\n * Position the panel below the trigger button on desktop\n */\n positionPanel: function () {\n if (!this.elements.panel || !this.elements.trigger) return;\n\n const isMobile = window.innerWidth < 768;\n\n if (isMobile) {\n // Mobile: full height slide-in from right - let CSS handle it\n this.elements.panel.style.top = '';\n this.elements.panel.style.right = '';\n this.elements.panel.style.left = '';\n this.elements.panel.style.height = '';\n this.elements.panel.style.maxHeight = '';\n } else {\n // Desktop: position directly below the trigger button, aligned to its right edge\n const triggerRect = this.elements.trigger.getBoundingClientRect();\n const panelWidth = 320; // --customizer-width\n const panelTop = triggerRect.bottom + 8;\n\n // Calculate right position: align panel's right edge with trigger's right edge\n // But ensure it doesn't overflow the viewport\n const viewportWidth = window.innerWidth;\n let panelRight = viewportWidth - triggerRect.right;\n\n // Ensure panel doesn't overflow left side of viewport\n const panelLeft = viewportWidth - panelRight - panelWidth;\n if (panelLeft < 8) {\n panelRight = viewportWidth - panelWidth - 8;\n }\n\n this.elements.panel.style.top = panelTop + 'px';\n this.elements.panel.style.right = panelRight + 'px';\n this.elements.panel.style.left = '';\n this.elements.panel.style.height = 'auto';\n this.elements.panel.style.maxHeight = 'calc(100vh - ' + panelTop + 'px)';\n }\n },\n\n /**\n * Bind events specifically for the panel (called after dynamic creation)\n */\n bindPanelEvents: function () {\n if (!this.elements.panel) return;\n if (this.elements.panel.getAttribute('data-customizer-initialized') === 'true') return;\n\n this.elements.panel.setAttribute('data-customizer-initialized', 'true');\n\n // Primary color swatches\n this.elements.panel.querySelectorAll('[data-color]').forEach(swatch => {\n this.addListener(swatch, 'click', () => {\n this.applyPrimary(swatch.dataset.color);\n this.updateUI();\n });\n });\n\n // Neutral color swatches\n this.elements.panel.querySelectorAll('[data-neutral]').forEach(swatch => {\n this.addListener(swatch, 'click', () => {\n this.applyNeutral(swatch.dataset.neutral);\n this.updateUI();\n });\n });\n\n // Radius buttons\n this.elements.panel.querySelectorAll('[data-radius]').forEach(btn => {\n this.addListener(btn, 'click', () => {\n this.applyRadius(btn.dataset.radius);\n this.updateUI();\n });\n });\n\n // Font selector\n const fontSelect = this.elements.panel.querySelector('[data-customizer-font]');\n if (fontSelect) {\n this.addListener(fontSelect, 'change', (e) => {\n this.applyFont(e.target.value);\n this.updateUI();\n });\n }\n\n // Reset button\n const resetBtn = this.elements.panel.querySelector('.customizer-reset');\n if (resetBtn) {\n this.addListener(resetBtn, 'click', () => {\n this.reset();\n });\n }\n\n // Mobile close button\n const closeBtn = this.elements.panel.querySelector('.customizer-mobile-close');\n if (closeBtn) {\n this.addListener(closeBtn, 'click', () => {\n this.close();\n });\n }\n\n // Overlay click\n if (this.elements.overlay) {\n this.addListener(this.elements.overlay, 'click', () => {\n this.close();\n });\n }\n },\n\n /**\n * Generate panel HTML\n */\n getPanelHTML: function () {\n const esc = typeof escapeHtml === 'function'\n ? escapeHtml\n : function (text) {\n const div = document.createElement('div');\n div.textContent = String(text ?? '');\n return div.innerHTML;\n };\n const safeColor = function (value) {\n const normalized = String(value ?? '').trim();\n // Allow common color formats used by palette values.\n if (/^(#[0-9a-fA-F]{3,8}|rgb[a]?\\([^)]{1,60}\\)|hsl[a]?\\([^)]{1,60}\\)|var\\(--[a-zA-Z0-9_-]{1,40}\\))$/.test(normalized)) {\n return normalized;\n }\n return '#000000';\n };\n\n // Generate primary color swatches\n let primarySwatches = '';\n for (const [key, value] of Object.entries(this.PRIMARY_COLORS)) {\n primarySwatches += ``;\n }\n\n // Generate neutral color swatches\n let neutralSwatches = '';\n for (const [key, value] of Object.entries(this.NEUTRAL_COLORS)) {\n neutralSwatches += ``;\n }\n\n // Generate radius buttons\n let radiusButtons = '';\n this.RADIUS_OPTIONS.forEach(r => {\n radiusButtons += ``;\n });\n\n // Generate font options\n let fontOptions = '';\n for (const [key, value] of Object.entries(this.FONT_OPTIONS)) {\n fontOptions += ``;\n }\n\n return `\n
    \n

    Customize Theme

    \n \n
    \n
    \n\n
    \n \n
    \n ${primarySwatches}\n
    \n
    \n
    \n \n
    \n ${neutralSwatches}\n
    \n
    \n
    \n \n
    \n ${radiusButtons}\n
    \n
    \n
    \n \n \n
    \n
    \n
    \n \n
    \n `;\n },\n\n /**\n * Bind event listeners\n */\n /**\n * Check whether the current primary color is one of the auto-defaults\n * (i.e. the user hasn't explicitly picked a non-default color).\n */\n isUsingDefaultPrimary: function () {\n return this.state.primary === this.DEFAULTS.PRIMARY_LIGHT ||\n this.state.primary === this.DEFAULTS.PRIMARY_DARK;\n },\n\n /**\n * When primary is still one of the auto-default palette keys (black/amber) but\n * localStorage was written under a different theme (or OS changed in system mode),\n * align in-memory state before applyAllPreferences runs \u2014 avoids amber+light / black+dark drift.\n */\n _normalizeDefaultPrimaryIfStaleWithStoredTheme: function () {\n if (!this.isUsingDefaultPrimary()) {\n return;\n }\n const expected = this.getDefaultPrimary(this.state.theme);\n if (this.state.primary !== expected) {\n this.state.primary = expected;\n }\n },\n\n bindEvents: function () {\n // Trigger click - bind to any trigger button\n if (this.elements.trigger) {\n this.addListener(this.elements.trigger, 'click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggle();\n });\n }\n\n this.bindPanelEvents();\n\n // Listen for OS dark/light changes so we can swap the default primary\n if (window.matchMedia) {\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const handler = () => {\n if (this.state.theme === 'system' && this.isUsingDefaultPrimary()) {\n const newDefault = this.getDefaultPrimary('system');\n if (newDefault !== this.state.primary) {\n this.applyPrimary(newDefault);\n this.updateUI();\n }\n }\n };\n mq.addEventListener('change', handler);\n this._cleanup.push(() => mq.removeEventListener('change', handler));\n }\n\n // Close on outside click\n this.addListener(document, 'click', (e) => {\n if (this.state.isOpen && this.elements.customizer && !this.elements.customizer.contains(e.target)) {\n this.close();\n }\n });\n\n // Close on Escape key\n this.addListener(document, 'keydown', (e) => {\n if (e.key === 'Escape' && this.state.isOpen) {\n this.close();\n }\n });\n },\n\n /**\n * Toggle panel open/close\n */\n toggle: function () {\n if (this.state.isOpen) {\n this.close();\n } else {\n this.open();\n }\n },\n\n /**\n * Open the panel\n */\n open: function () {\n this.state.isOpen = true;\n\n // Ensure panel is positioned correctly before opening\n this.positionPanel();\n\n if (this.elements.panel) {\n this.elements.panel.classList.add('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'true');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.add('is-active');\n }\n\n this.dispatchEvent('panel-open', { isOpen: true });\n },\n\n /**\n * Close the panel\n */\n close: function () {\n this.state.isOpen = false;\n\n if (this.elements.panel) {\n this.elements.panel.classList.remove('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'false');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.remove('is-active');\n }\n\n this.dispatchEvent('panel-close', { isOpen: false });\n },\n\n /**\n * Update UI to reflect current state\n */\n updateUI: function () {\n if (!this.elements.panel) return;\n\n // Update primary color swatches\n this.elements.panel.querySelectorAll('[data-color]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.color === this.state.primary);\n });\n\n // Update neutral color swatches\n this.elements.panel.querySelectorAll('[data-neutral]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.neutral === this.state.neutral);\n });\n\n // Update radius buttons\n this.elements.panel.querySelectorAll('[data-radius]').forEach(btn => {\n btn.classList.toggle('is-active', btn.dataset.radius === this.state.radius);\n });\n\n // Update font selector\n const fontSelect = this.elements.panel.querySelector('[data-customizer-font]');\n if (fontSelect) {\n fontSelect.value = this.state.font;\n }\n\n },\n\n /**\n * Reset all preferences to defaults\n */\n reset: function () {\n this.applyTheme(this.DEFAULTS.THEME);\n this.applyPrimary(this.getDefaultPrimary(this.DEFAULTS.THEME));\n this.applyNeutral(this.DEFAULTS.NEUTRAL);\n this.applyRadius(this.DEFAULTS.RADIUS);\n this.applyFont(this.DEFAULTS.FONT);\n this.updateUI();\n\n this.dispatchEvent('reset', { state: { ...this.state } });\n },\n\n /**\n * Get current state\n */\n getState: function () {\n return { ...this.state };\n },\n\n /**\n * Programmatically set preferences\n */\n setPreferences: function (prefs) {\n if (prefs.primary) this.applyPrimary(prefs.primary);\n if (prefs.neutral) this.applyNeutral(prefs.neutral);\n if (prefs.radius) this.applyRadius(prefs.radius);\n if (prefs.font) this.applyFont(prefs.font);\n if (prefs.theme) this.applyTheme(prefs.theme);\n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n destroyAll: function () {\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n\n if (this.elements.panel) {\n this.elements.panel.removeAttribute('data-customizer-initialized');\n }\n\n this.close();\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeCustomizer', ThemeCustomizer);\n }\n\n // Expose globally for convenience\n window.ThemeCustomizer = ThemeCustomizer;\n})();\n", "/**\n * Vanduo Framework - Theme Switcher\n * Handles light/dark/system theme toggling and persistence\n */\n\n(function () {\n 'use strict';\n\n const ThemeSwitcher = {\n isInitialized: false,\n _mediaQuery: null,\n _onMediaChange: null,\n\n init: function () {\n this.STORAGE_KEY = 'vanduo-theme-preference';\n this.state = {\n preference: this.getPreference() // 'light', 'dark', or 'system'\n };\n\n if (this.isInitialized) {\n this.applyTheme();\n this.renderUI();\n this.updateUI();\n return;\n }\n\n this.isInitialized = true;\n\n this.applyTheme();\n this.listenForSystemChanges();\n this.renderUI();\n\n console.log('Vanduo Theme Switcher initialized');\n },\n\n getPreference: function () {\n return this.getStorageValue(this.STORAGE_KEY, 'system');\n },\n\n setPreference: function (pref) {\n this.state.preference = pref;\n this.setStorageValue(this.STORAGE_KEY, pref);\n this.applyTheme();\n \n // Coordinate with ThemeCustomizer for primary color swap if available\n // Check _isApplying flag to prevent circular updates\n if (window.ThemeCustomizer && window.ThemeCustomizer.applyTheme && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme(pref);\n }\n \n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n applyTheme: function () {\n const pref = this.state.preference;\n\n if (pref === 'system') {\n // When in system mode, we remove the data attribute to let the media query take over\n // or we can explicitly set it. Explicitly setting it ensures consistency if we rely on [data-theme]\n // But if we rely on @media in CSS, we might want to remove attributes.\n // However, our CSS strategy uses :root:not([data-theme=\"light\"]) inside media query for system dark fallback\n // which is a bit complex.\n\n // Simpler approach: \n // If preference is system, REMOVE data-theme attribute. Let CSS media queries handle it.\n document.documentElement.removeAttribute('data-theme');\n } else {\n document.documentElement.setAttribute('data-theme', pref);\n }\n },\n\n listenForSystemChanges: function () {\n if (this._mediaQuery && this._onMediaChange) {\n return;\n }\n\n this._mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n this._onMediaChange = _e => {\n if (this.state.preference === 'system') {\n // Re-apply (effectively just to ensure consistency, though removing attribute usually suffices)\n this.applyTheme();\n // Keep default primary (black/amber) aligned when OS scheme changes while in system mode\n if (window.ThemeCustomizer && typeof window.ThemeCustomizer.applyTheme === 'function' && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme('system');\n }\n }\n };\n this._mediaQuery.addEventListener('change', this._onMediaChange);\n },\n\n // Helper to facilitate UI creation if needed, though often UI is in HTML\n renderUI: function () {\n // Look for any uninitialized theme toggles\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.getAttribute('data-theme-initialized') === 'true') {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n }\n return;\n }\n\n // Simplified UI Binding - assumes a select or a button cycle\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n const onChange = (e) => {\n this.setPreference(e.target.value);\n };\n toggle.addEventListener('change', onChange);\n toggle._themeToggleHandler = onChange;\n } else {\n // Button implementation (cycle)\n const onClick = () => {\n const modes = ['system', 'light', 'dark'];\n const nextIndex = (modes.indexOf(this.state.preference) + 1) % modes.length;\n this.setPreference(modes[nextIndex]);\n };\n toggle.addEventListener('click', onClick);\n toggle._themeToggleHandler = onClick;\n }\n // Mark as initialized\n toggle.setAttribute('data-theme-initialized', 'true');\n });\n },\n\n updateUI: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n } else {\n // Update button text/icon if needed\n // e.g. toggle.textContent = this.state.preference;\n // For now, assume the user handles visual state or generic text\n\n // If there is an icon or text span inside, update it\n const span = toggle.querySelector('.theme-current-label');\n if (span) {\n span.textContent = this.state.preference.charAt(0).toUpperCase() + this.state.preference.slice(1);\n }\n }\n });\n },\n\n destroyAll: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"][data-theme-initialized=\"true\"]');\n toggles.forEach(toggle => {\n if (toggle._themeToggleHandler) {\n const eventName = toggle.tagName === 'SELECT' ? 'change' : 'click';\n toggle.removeEventListener(eventName, toggle._themeToggleHandler);\n delete toggle._themeToggleHandler;\n }\n toggle.removeAttribute('data-theme-initialized');\n });\n\n if (this._mediaQuery && this._onMediaChange) {\n this._mediaQuery.removeEventListener('change', this._onMediaChange);\n }\n\n this._mediaQuery = null;\n this._onMediaChange = null;\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeSwitcher', ThemeSwitcher);\n }\n})();\n", "/**\n * Vanduo Framework - Toast Component\n * Popup notifications for user feedback\n */\n\n(function() {\n 'use strict';\n\n /**\n * Toast Component\n */\n const Toast = {\n // Default options\n defaults: {\n position: 'top-right',\n duration: 5000,\n dismissible: true,\n showProgress: true,\n pauseOnHover: true\n },\n\n // Container cache\n containers: {},\n\n /**\n * Get or create a toast container for a position\n * @param {string} position - Container position\n * @returns {HTMLElement} Toast container element\n */\n getContainer: function(position) {\n if (this.containers[position]) {\n return this.containers[position];\n }\n\n const container = document.createElement('div');\n container.className = `vd-toast-container vd-toast-container-${position}`;\n container.setAttribute('role', 'status');\n container.setAttribute('aria-live', 'polite');\n container.setAttribute('aria-atomic', 'false');\n document.body.appendChild(container);\n this.containers[position] = container;\n\n return container;\n },\n\n /**\n * Show a toast notification\n * @param {Object|string} options - Toast options or message string\n * @param {string} [type] - Toast type (success, error, warning, info)\n * @param {number} [duration] - Auto-dismiss duration in ms\n * @returns {HTMLElement} Toast element\n */\n show: function(options, type, duration) {\n // Support simple API: Toast.show('Message', 'success', 3000)\n if (typeof options === 'string') {\n options = {\n message: options,\n type: type,\n duration: duration\n };\n }\n\n const config = Object.assign({}, this.defaults, options);\n const container = this.getContainer(config.position);\n\n // Create toast element\n const toast = document.createElement('div');\n toast.className = 'vd-toast';\n\n if (config.type) {\n toast.classList.add(`vd-toast-${config.type}`);\n }\n\n if (config.solid) {\n toast.classList.add('vd-toast-solid');\n }\n\n if (config.showProgress && config.duration > 0) {\n toast.classList.add('vd-toast-with-progress');\n }\n\n // Build toast content\n let html = '';\n\n // Icon (sanitize custom icons, default icons are trusted SVG)\n if (config.icon) {\n const safeIcon = typeof sanitizeHtml === 'function' ? sanitizeHtml(config.icon) : escapeHtml(config.icon);\n html += `${safeIcon}`;\n } else if (config.type) {\n html += `${this.getDefaultIcon(config.type)}`;\n }\n\n // Local escape helper \u2014 guarantees HTML-safe output even if the\n // global escapeHtml utility is not loaded in the current bundle.\n const _esc = typeof escapeHtml === 'function'\n ? escapeHtml\n : function (s) {\n const d = document.createElement('div');\n d.appendChild(document.createTextNode(s));\n return d.innerHTML;\n };\n\n // Content (escape text to prevent injection)\n html += '
    ';\n if (config.title) {\n html += `
    ${_esc(String(config.title))}
    `;\n }\n if (config.message) {\n html += `
    ${_esc(String(config.message))}
    `;\n }\n html += '
    ';\n\n // Close button\n if (config.dismissible) {\n html += '';\n }\n\n // Progress bar\n if (config.showProgress && config.duration > 0) {\n const safeDuration = parseInt(config.duration, 10) || 0;\n html += `
    `;\n }\n\n toast.innerHTML = html;\n\n // Add to container\n container.appendChild(toast);\n\n toast._toastCleanup = [];\n\n // Set up close button handler\n if (config.dismissible) {\n const closeBtn = toast.querySelector('.vd-toast-close');\n const onClose = () => {\n this.dismiss(toast);\n };\n closeBtn.addEventListener('click', onClose);\n toast._toastCleanup.push(() => closeBtn.removeEventListener('click', onClose));\n }\n\n // Pause on hover\n let timeoutId = null;\n let remainingTime = config.duration;\n let startTime = null;\n\n const startTimer = () => {\n if (config.duration > 0) {\n startTime = Date.now();\n timeoutId = setTimeout(() => {\n this.dismiss(toast);\n }, remainingTime);\n toast._toastTimeoutId = timeoutId;\n\n // Resume progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'running';\n }\n }\n };\n\n const pauseTimer = () => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n timeoutId = null;\n toast._toastTimeoutId = null;\n remainingTime -= Date.now() - startTime;\n\n // Pause progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'paused';\n }\n }\n };\n\n if (config.pauseOnHover) {\n toast.addEventListener('mouseenter', pauseTimer);\n toast.addEventListener('mouseleave', startTimer);\n toast._toastCleanup.push(\n () => toast.removeEventListener('mouseenter', pauseTimer),\n () => toast.removeEventListener('mouseleave', startTimer)\n );\n }\n\n // Trigger enter animation\n requestAnimationFrame(() => {\n toast.classList.add('is-visible');\n startTimer();\n });\n\n // Store config on element for later access\n toast._toastConfig = config;\n\n // Dispatch show event\n const showEvent = new CustomEvent('toast:show', {\n bubbles: true,\n detail: { toast, config }\n });\n toast.dispatchEvent(showEvent);\n\n return toast;\n },\n\n /**\n * Dismiss a toast\n * @param {HTMLElement} toast - Toast element to dismiss\n */\n dismiss: function(toast) {\n if (!toast || toast.classList.contains('is-exiting')) return;\n\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n toast._toastTimeoutId = null;\n }\n\n toast.classList.remove('is-visible');\n toast.classList.add('is-exiting');\n\n // Dispatch dismiss event\n const dismissEvent = new CustomEvent('toast:dismiss', {\n bubbles: true,\n detail: { toast }\n });\n toast.dispatchEvent(dismissEvent);\n\n // Remove after animation\n const handleTransitionEnd = () => {\n toast.removeEventListener('transitionend', handleTransitionEnd);\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n };\n\n toast.addEventListener('transitionend', handleTransitionEnd);\n\n // Fallback removal if transition doesn't fire\n setTimeout(() => {\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n }, 400);\n },\n\n /**\n * Destroy all toasts and containers\n */\n destroyAll: function() {\n Object.keys(this.containers).forEach(position => {\n const container = this.containers[position];\n if (!container) return;\n\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => {\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n }\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n });\n\n if (container.parentElement) {\n container.parentElement.removeChild(container);\n }\n });\n\n this.containers = {};\n },\n\n /**\n * Dismiss all toasts\n * @param {string} [position] - Optional position to clear (clears all if not specified)\n */\n dismissAll: function(position) {\n if (position && this.containers[position]) {\n const toasts = this.containers[position].querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n } else {\n Object.values(this.containers).forEach(container => {\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n });\n }\n },\n\n /**\n * Get default icon SVG for a type\n * @param {string} type - Toast type\n * @returns {string} SVG icon markup\n */\n getDefaultIcon: function(type) {\n const icons = {\n success: '',\n error: '',\n warning: '',\n info: ''\n };\n\n return icons[type] || '';\n },\n\n /**\n * Convenience methods for common toast types\n */\n success: function(message, options) {\n return this.show(Object.assign({ message, type: 'success' }, options));\n },\n\n error: function(message, options) {\n return this.show(Object.assign({ message, type: 'error' }, options));\n },\n\n warning: function(message, options) {\n return this.show(Object.assign({ message, type: 'warning' }, options));\n },\n\n info: function(message, options) {\n return this.show(Object.assign({ message, type: 'info' }, options));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('toast', Toast);\n }\n\n // Also expose globally for convenience\n window.Toast = Toast;\n\n})();\n", "/**\n * Vanduo Framework - Tooltips Component\n * JavaScript functionality for tooltips\n */\n\n(function () {\n 'use strict';\n\n /**\n * Tooltips Component\n */\n const Tooltips = {\n tooltips: new Map(),\n delayTimers: new Map(),\n\n /**\n * Sanitize HTML \u2014 delegates to shared sanitizeHtml from helpers.js\n * @param {string} input\n * @returns {string} sanitized HTML\n */\n sanitizeHtml: function (input) {\n if (typeof sanitizeHtml === 'function') {\n return sanitizeHtml(input);\n }\n // Fallback: strip all HTML\n const div = document.createElement('div');\n div.textContent = input || '';\n return div.innerHTML;\n },\n\n /**\n * Initialize tooltips\n */\n init: function () {\n const elements = document.querySelectorAll('[data-tooltip], [data-tooltip-html]');\n\n elements.forEach(element => {\n if (this.tooltips.has(element)) {\n return;\n }\n this.initTooltip(element);\n });\n },\n\n /**\n * Initialize a single tooltip\n * @param {HTMLElement} element - Element with tooltip\n */\n initTooltip: function (element) {\n const tooltip = this.createTooltip(element);\n const cleanupFunctions = [];\n\n // Show on hover/focus\n const enterHandler = () => { this.showTooltip(element, tooltip); };\n const leaveHandler = () => { this.hideTooltip(element, tooltip); };\n const focusHandler = () => { this.showTooltip(element, tooltip); };\n const blurHandler = () => { this.hideTooltip(element, tooltip); };\n\n element.addEventListener('mouseenter', enterHandler);\n element.addEventListener('mouseleave', leaveHandler);\n element.addEventListener('focus', focusHandler);\n element.addEventListener('blur', blurHandler);\n\n cleanupFunctions.push(\n () => element.removeEventListener('mouseenter', enterHandler),\n () => element.removeEventListener('mouseleave', leaveHandler),\n () => element.removeEventListener('focus', focusHandler),\n () => element.removeEventListener('blur', blurHandler)\n );\n\n this.tooltips.set(element, { tooltip, cleanup: cleanupFunctions });\n },\n\n /**\n * Create tooltip element\n * @param {HTMLElement} element - Target element\n * @returns {HTMLElement} Tooltip element\n */\n createTooltip: function (element) {\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-tooltip';\n tooltip.setAttribute('role', 'tooltip');\n tooltip.setAttribute('aria-hidden', 'true');\n\n // Generate unique ID and link via aria-describedby\n const tooltipId = 'tooltip-' + Math.random().toString(36).substr(2, 9);\n tooltip.id = tooltipId;\n element.setAttribute('aria-describedby', tooltipId);\n\n // Get content\n const htmlContent = element.dataset.tooltipHtml;\n const textContent = element.dataset.tooltip;\n\n if (htmlContent) {\n tooltip.innerHTML = this.sanitizeHtml(htmlContent);\n tooltip.classList.add('vd-tooltip-html');\n } else if (textContent) {\n tooltip.textContent = textContent;\n }\n\n // Get placement\n const placement = element.dataset.tooltipPlacement || element.dataset.placement || 'top';\n tooltip.setAttribute('data-placement', placement);\n tooltip.classList.add(`vd-tooltip-${placement}`);\n\n // Get variant\n if (element.dataset.tooltipVariant) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipVariant}`);\n }\n\n // Get size\n if (element.dataset.tooltipSize) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipSize}`);\n }\n\n // Get delay\n const delay = parseInt(element.dataset.tooltipDelay) || 0;\n tooltip.dataset.delay = delay;\n\n document.body.appendChild(tooltip);\n\n return tooltip;\n },\n\n /**\n * Show tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n showTooltip: function (element, tooltip) {\n const delay = parseInt(tooltip.dataset.delay) || 0;\n\n if (delay > 0) {\n const timer = setTimeout(() => {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }, delay);\n this.delayTimers.set(element, timer);\n } else {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }\n },\n\n /**\n * Hide tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n hideTooltip: function (element, tooltip) {\n // Clear delay timer if exists\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n tooltip.classList.remove('is-visible');\n tooltip.setAttribute('aria-hidden', 'true');\n },\n\n /**\n * Position tooltip relative to element\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n positionTooltip: function (element, tooltip) {\n const placement = tooltip.dataset.placement || 'top';\n const rect = element.getBoundingClientRect();\n const tooltipRect = tooltip.getBoundingClientRect();\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;\n\n let top = 0;\n let left = 0;\n\n switch (placement) {\n case 'top':\n top = rect.top + scrollTop - tooltipRect.height - 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'bottom':\n top = rect.bottom + scrollTop + 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'left':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.left + scrollLeft - tooltipRect.width - 8;\n break;\n case 'right':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.right + scrollLeft + 8;\n break;\n }\n\n // Prevent overflow\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const padding = 8;\n\n if (left < padding) {\n left = padding;\n } else if (left + tooltipRect.width > viewportWidth - padding) {\n left = viewportWidth - tooltipRect.width - padding;\n }\n\n if (top < scrollTop + padding) {\n top = scrollTop + padding;\n } else if (top + tooltipRect.height > scrollTop + viewportHeight - padding) {\n top = scrollTop + viewportHeight - tooltipRect.height - padding;\n }\n\n // Use single style assignment with transform for better performance\n tooltip.style.cssText = `position: absolute; top: 0; left: 0; transform: translate(${left}px, ${top}px);`;\n },\n\n /**\n * Show tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n show: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.showTooltip(el, tooltip);\n }\n },\n\n /**\n * Hide tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n hide: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.hideTooltip(el, tooltip);\n }\n },\n\n /**\n * Update tooltip content\n * @param {HTMLElement|string} element - Target element or selector\n * @param {string} content - New content\n * @param {boolean} isHtml - Whether content is HTML\n */\n update: function (element, content, isHtml = false) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n if (isHtml) {\n tooltip.innerHTML = this.sanitizeHtml(content);\n tooltip.classList.add('vd-tooltip-html');\n } else {\n tooltip.textContent = content;\n tooltip.classList.remove('vd-tooltip-html');\n }\n }\n },\n\n /**\n * Destroy a tooltip instance and clean up\n * @param {HTMLElement} element - Element with tooltip\n */\n destroy: function (element) {\n const data = this.tooltips.get(element);\n if (!data) return;\n\n // Clear any pending timer\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n data.cleanup.forEach(fn => fn());\n\n // Remove tooltip element from DOM\n if (data.tooltip && data.tooltip.parentNode) {\n data.tooltip.parentNode.removeChild(data.tooltip);\n }\n\n this.tooltips.delete(element);\n },\n\n /**\n * Destroy all tooltip instances\n */\n destroyAll: function () {\n this.tooltips.forEach((data, element) => {\n this.destroy(element);\n });\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tooltips', Tooltips);\n }\n\n // Expose globally\n window.VanduoTooltips = Tooltips;\n\n})();\n", "/**\n * Vanduo Framework - Search Component\n * Client-side search functionality for content pages\n * \n * @example Basic usage (initialize with defaults)\n * // HTML:\n * //
    \n * // \n * //
    \n * //
    \n * \n * @example Custom configuration\n * var search = Search.create({\n * containerSelector: '.my-search',\n * contentSelector: 'article[id]',\n * titleSelector: 'h2, h3',\n * maxResults: 5,\n * onSelect: function(result) {\n * console.log('Selected:', result.title);\n * }\n * });\n * \n * @example With custom data source\n * var search = Search.create({\n * containerSelector: '.my-search',\n * data: [\n * { id: 'item1', title: 'First Item', content: 'Description...', category: 'Category A' },\n * { id: 'item2', title: 'Second Item', content: 'Description...', category: 'Category B' }\n * ]\n * });\n */\n\n(function() {\n 'use strict';\n\n /**\n * Default configuration\n */\n const DEFAULTS = {\n // Behavior\n minQueryLength: 2,\n maxResults: 10,\n debounceMs: 150,\n highlightTag: 'mark',\n keyboardShortcut: true, // Enable Cmd/Ctrl+K shortcut\n \n // Selectors (for DOM-based indexing)\n containerSelector: '.vd-doc-search',\n inputSelector: '.vd-doc-search-input',\n resultsSelector: '.vd-doc-search-results',\n contentSelector: '.doc-content section[id]',\n titleSelector: '.demo-title, h2, h3',\n navSelector: '.doc-nav-link',\n sectionSelector: '.doc-nav-section',\n \n // Content extraction\n excludeFromContent: 'pre, code, script, style',\n maxContentLength: 500,\n \n // Custom data source (alternative to DOM indexing)\n data: null,\n \n // Category icons mapping\n categoryIcons: {\n 'getting-started': 'ph-rocket-launch',\n 'core': 'ph-cube',\n 'components': 'ph-puzzle-piece',\n 'interactive': 'ph-cursor-click',\n 'data-display': 'ph-table',\n 'feedback': 'ph-bell',\n 'meta': 'ph-info',\n 'default': 'ph-file-text'\n },\n \n // Callbacks\n onSelect: null, // function(result) - called when result is selected\n onSearch: null, // function(query, results) - called after search\n onOpen: null, // function() - called when results open\n onClose: null, // function() - called when results close\n \n // Text customization\n emptyTitle: 'No results found',\n emptyText: 'Try different keywords or check spelling',\n placeholder: 'Search...'\n };\n\n /**\n * Search Component Factory\n * Creates a new search instance with the given configuration\n * \n * @param {Object} options - Configuration options\n * @returns {Object} Search instance\n */\n function createSearch(options) {\n const config = Object.assign({}, DEFAULTS, options || {});\n \n // Instance state\n const state = {\n initialized: false,\n index: [],\n results: [],\n activeIndex: -1,\n isOpen: false,\n query: '',\n container: null,\n input: null,\n resultsContainer: null,\n debounceTimer: null,\n boundHandlers: {}\n };\n\n function safeInvokeCallback(name, fn, ...args) {\n try {\n fn(...args);\n } catch (error) {\n console.warn('[Vanduo Search] Callback error in \"' + name + '\":', error);\n }\n }\n\n function setResultsHtml(html) {\n if (!state.resultsContainer) return;\n try {\n state.resultsContainer.innerHTML = html;\n } catch (error) {\n console.warn('[Vanduo Search] Failed to render results:', error);\n }\n }\n\n /**\n * Initialize the search component\n * Idempotent \u2014 safe to call more than once on the same instance.\n * Returns the instance on success, null if required DOM elements are missing.\n */\n function init() {\n if (state.initialized) {\n return instance;\n }\n\n state.container = document.querySelector(config.containerSelector);\n if (!state.container) {\n state.initialized = false;\n return null;\n }\n\n state.input = state.container.querySelector(config.inputSelector);\n state.resultsContainer = state.container.querySelector(config.resultsSelector);\n\n if (!state.input || !state.resultsContainer) {\n state.initialized = false;\n return null;\n }\n\n // Set placeholder if configured\n if (config.placeholder) {\n state.input.setAttribute('placeholder', config.placeholder);\n }\n\n // Build search index\n buildIndex();\n\n // Bind events\n bindEvents();\n\n // Set up ARIA attributes\n setupAria();\n\n state.initialized = true;\n return instance;\n }\n\n /**\n * Build search index from DOM or custom data\n */\n function buildIndex() {\n state.index = [];\n \n // Use custom data if provided\n if (config.data && Array.isArray(config.data)) {\n config.data.forEach(function(item) {\n state.index.push({\n id: item.id || slugify(item.title),\n title: item.title || '',\n category: item.category || '',\n categorySlug: slugify(item.category || ''),\n content: item.content || '',\n keywords: item.keywords || extractKeywordsFromText(item.title + ' ' + item.content),\n url: item.url || '#' + (item.id || slugify(item.title)),\n icon: item.icon || ''\n });\n });\n return;\n }\n\n // Build from DOM\n const sections = document.querySelectorAll(config.contentSelector);\n const categoryMap = buildCategoryMap();\n\n sections.forEach(function(section) {\n const id = section.id;\n if (!id) return;\n\n const titleEl = section.querySelector(config.titleSelector);\n const title = titleEl ? titleEl.textContent.replace(/v[\\d.]+/g, '').trim() : id;\n const category = categoryMap[id] || 'Documentation';\n const content = extractContent(section);\n const keywords = extractKeywords(section, title);\n const iconEl = titleEl ? titleEl.querySelector('i.ph') : null;\n let icon = '';\n if (iconEl && iconEl.classList) {\n for (let ci = 0; ci < iconEl.classList.length; ci++) {\n if (iconEl.classList[ci].indexOf('ph-') === 0) {\n icon = iconEl.classList[ci];\n break;\n }\n }\n }\n\n state.index.push({\n id: id,\n title: title,\n category: category,\n categorySlug: slugify(category),\n content: content,\n keywords: keywords,\n url: '#' + id,\n icon: icon\n });\n });\n }\n\n /**\n * Build a map of section IDs to their categories\n */\n function buildCategoryMap() {\n const map = {};\n let currentCategory = 'Documentation';\n const navItems = document.querySelectorAll(config.navSelector + ', ' + config.sectionSelector);\n\n navItems.forEach(function(item) {\n if (item.classList.contains('doc-nav-section')) {\n currentCategory = item.textContent.trim();\n } else {\n const href = item.getAttribute('href');\n if (href && href.startsWith('#')) {\n const id = href.substring(1);\n map[id] = currentCategory;\n }\n }\n });\n\n return map;\n }\n\n /**\n * Extract searchable content from a section\n */\n function extractContent(section) {\n const clone = section.cloneNode(true);\n \n const toRemove = clone.querySelectorAll(config.excludeFromContent);\n toRemove.forEach(function(el) {\n el.remove();\n });\n\n let text = clone.textContent || '';\n text = text.replace(/\\s+/g, ' ').trim();\n \n return text.substring(0, config.maxContentLength);\n }\n\n /**\n * Extract keywords from a section\n */\n function extractKeywords(section, title) {\n const keywords = [];\n \n // Add title words\n title.toLowerCase().split(/\\s+/).forEach(function(word) {\n if (word.length > 2) {\n keywords.push(word);\n }\n });\n\n // Add class names from code examples\n const codeBlocks = section.querySelectorAll('code');\n codeBlocks.forEach(function(code) {\n const text = code.textContent || '';\n const classMatches = text.match(/\\.([\\w-]+)/g);\n if (classMatches) {\n classMatches.forEach(function(match) {\n keywords.push(match.substring(1).toLowerCase());\n });\n }\n });\n\n // Add data attributes\n const dataAttrs = section.querySelectorAll('[data-tooltip], [data-modal]');\n dataAttrs.forEach(function(el) {\n const attrs = el.getAttributeNames().filter(function(name) {\n return name.startsWith('data-');\n });\n attrs.forEach(function(attr) {\n keywords.push(attr.replace('data-', ''));\n });\n });\n\n return Array.from(new Set(keywords));\n }\n\n /**\n * Extract keywords from text string\n */\n function extractKeywordsFromText(text) {\n const words = text.toLowerCase().split(/\\s+/);\n return words.filter(function(word) {\n return word.length > 2;\n });\n }\n\n /**\n * Convert string to slug\n */\n function slugify(str) {\n return str.toLowerCase().replace(/\\s+/g, '-').replace(/[^a-z0-9-]/g, '');\n }\n\n /**\n * Bind event listeners\n */\n function bindEvents() {\n // Store bound handlers for cleanup\n state.boundHandlers.handleInput = function(e) {\n handleInput(e);\n };\n state.boundHandlers.handleFocus = function() {\n if (state.query.length >= config.minQueryLength) {\n open();\n }\n };\n state.boundHandlers.handleKeydown = function(e) {\n handleKeydown(e);\n };\n state.boundHandlers.handleOutsideClick = function(e) {\n if (!state.container.contains(e.target)) {\n close();\n }\n };\n state.boundHandlers.handleGlobalKeydown = function(e) {\n if (config.keyboardShortcut && (e.metaKey || e.ctrlKey) && e.key === 'k') {\n e.preventDefault();\n state.input.focus();\n state.input.select();\n }\n };\n state.boundHandlers.handleResultClick = function(e) {\n const result = e.target.closest('.vd-doc-search-result');\n if (result) {\n const index = parseInt(result.dataset.index, 10);\n select(index);\n }\n };\n\n // Input events\n state.input.addEventListener('input', state.boundHandlers.handleInput);\n state.input.addEventListener('focus', state.boundHandlers.handleFocus);\n state.input.addEventListener('keydown', state.boundHandlers.handleKeydown);\n\n // Close on outside click\n document.addEventListener('click', state.boundHandlers.handleOutsideClick);\n\n // Global keyboard shortcut\n document.addEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n\n // Result click handling\n state.resultsContainer.addEventListener('click', state.boundHandlers.handleResultClick);\n }\n\n /**\n * Unbind event listeners\n */\n function unbindEvents() {\n if (state.input) {\n state.input.removeEventListener('input', state.boundHandlers.handleInput);\n state.input.removeEventListener('focus', state.boundHandlers.handleFocus);\n state.input.removeEventListener('keydown', state.boundHandlers.handleKeydown);\n }\n document.removeEventListener('click', state.boundHandlers.handleOutsideClick);\n document.removeEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n if (state.resultsContainer) {\n state.resultsContainer.removeEventListener('click', state.boundHandlers.handleResultClick);\n }\n }\n\n /**\n * Set up ARIA attributes\n */\n function setupAria() {\n const resultsId = state.resultsContainer.id || 'search-results-' + Math.random().toString(36).substr(2, 9);\n state.resultsContainer.id = resultsId;\n \n state.input.setAttribute('role', 'combobox');\n state.input.setAttribute('aria-autocomplete', 'list');\n state.input.setAttribute('aria-controls', resultsId);\n state.input.setAttribute('aria-expanded', 'false');\n \n state.resultsContainer.setAttribute('role', 'listbox');\n state.resultsContainer.setAttribute('aria-label', 'Search results');\n }\n\n /**\n * Handle input changes\n */\n function handleInput(e) {\n const query = e.target.value.trim();\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n state.debounceTimer = setTimeout(function() {\n state.query = query;\n\n if (query.length < config.minQueryLength) {\n close();\n return;\n }\n\n state.results = search(query);\n state.activeIndex = -1;\n render();\n open();\n\n // Callback\n if (typeof config.onSearch === 'function') {\n safeInvokeCallback('onSearch', config.onSearch, query, state.results);\n }\n }, config.debounceMs);\n }\n\n /**\n * Handle keyboard navigation\n */\n function handleKeydown(e) {\n if (!state.isOpen) {\n if (e.key === 'ArrowDown' && state.query.length >= config.minQueryLength) {\n e.preventDefault();\n state.results = search(state.query);\n render();\n open();\n }\n return;\n }\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n navigate(1);\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n navigate(-1);\n break;\n\n case 'Enter':\n e.preventDefault();\n if (state.activeIndex >= 0) {\n select(state.activeIndex);\n } else if (state.results.length > 0) {\n select(0);\n }\n break;\n\n case 'Escape':\n e.preventDefault();\n close();\n break;\n\n case 'Tab':\n close();\n break;\n }\n }\n\n /**\n * Perform search\n */\n function search(query) {\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n const scored = [];\n\n state.index.forEach(function(entry) {\n let score = 0;\n const titleLower = entry.title.toLowerCase();\n const categoryLower = entry.category.toLowerCase();\n const contentLower = entry.content.toLowerCase();\n\n terms.forEach(function(term) {\n // Title match - highest priority\n if (titleLower.includes(term)) {\n score += 100;\n if (titleLower === term) {\n score += 50;\n } else if (titleLower.startsWith(term)) {\n score += 25;\n }\n }\n\n // Category match\n if (categoryLower.includes(term)) {\n score += 50;\n }\n\n // Keyword match\n const keywordMatch = entry.keywords.some(function(k) {\n return k.includes(term);\n });\n if (keywordMatch) {\n score += 30;\n }\n\n // Content match\n if (contentLower.includes(term)) {\n score += 10;\n }\n });\n\n if (score > 0) {\n scored.push({\n id: entry.id,\n title: entry.title,\n category: entry.category,\n categorySlug: entry.categorySlug,\n content: entry.content,\n url: entry.url,\n icon: entry.icon,\n score: score\n });\n }\n });\n\n scored.sort(function(a, b) {\n return b.score - a.score;\n });\n\n return scored.slice(0, config.maxResults);\n }\n\n /**\n * Render search results\n */\n function render() {\n if (state.results.length === 0) {\n setResultsHtml(renderEmpty());\n return;\n }\n\n let html = '
      ';\n\n state.results.forEach(function(result, index) {\n const isActive = index === state.activeIndex;\n const icon = result.icon || getCategoryIcon(result.categorySlug);\n const excerpt = getExcerpt(result.content, state.query);\n\n html += '
    • ' +\n '
      ' +\n '' +\n '
      ' +\n '
      ' +\n '
      ' + highlight(result.title, state.query) + '
      ' +\n '
      ' + escapeHtml(result.category) + '
      ' +\n '
      ' + highlight(excerpt, state.query) + '
      ' +\n '
      ' +\n '
      • ';\n });\n\n html += '
    ';\n html += renderFooter();\n\n setResultsHtml(html);\n }\n\n /**\n * Render empty state\n */\n function renderEmpty() {\n return '
    ' +\n '
    ' +\n '
    ' + escapeHtml(config.emptyTitle) + '
    ' +\n '
    ' + escapeHtml(config.emptyText) + '
    ' +\n '
    ';\n }\n\n /**\n * Render footer with keyboard hints\n */\n function renderFooter() {\n return '
    ' +\n '\u2191\u2193 to navigate' +\n '\u21B5 to select' +\n 'esc to close' +\n '
    ';\n }\n\n /**\n * Get icon for category\n */\n function getCategoryIcon(categorySlug) {\n return config.categoryIcons[categorySlug] || config.categoryIcons['default'] || 'ph-file-text';\n }\n\n /**\n * Get excerpt from content\n */\n function getExcerpt(content, query) {\n const terms = query.toLowerCase().split(/\\s+/);\n const contentLower = content.toLowerCase();\n const excerptLength = 100;\n\n let matchPos = -1;\n for (let i = 0; i < terms.length; i++) {\n const pos = contentLower.indexOf(terms[i]);\n if (pos !== -1 && (matchPos === -1 || pos < matchPos)) {\n matchPos = pos;\n }\n }\n\n if (matchPos === -1) {\n return content.substring(0, excerptLength) + '...';\n }\n\n const start = Math.max(0, matchPos - 30);\n const end = Math.min(content.length, matchPos + excerptLength);\n let excerpt = content.substring(start, end);\n\n if (start > 0) {\n excerpt = '...' + excerpt;\n }\n if (end < content.length) {\n excerpt = excerpt + '...';\n }\n\n return excerpt;\n }\n\n /**\n * Highlight matched terms in text\n */\n function highlight(text, query) {\n if (!query) return escapeHtml(text);\n\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n let escaped = escapeHtml(text);\n\n terms.forEach(function(term) {\n // Skip overly long terms to prevent ReDoS\n if (term.length > 50) return;\n const regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n escaped = escaped.replace(regex, '<' + config.highlightTag + '>$1');\n });\n\n return escaped;\n }\n\n /**\n * Escape HTML entities\n */\n function escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n /**\n * Navigate results with keyboard\n */\n function navigate(direction) {\n let newIndex = state.activeIndex + direction;\n\n if (newIndex < 0) {\n newIndex = state.results.length - 1;\n } else if (newIndex >= state.results.length) {\n newIndex = 0;\n }\n\n setActiveIndex(newIndex);\n }\n\n /**\n * Set active result index\n */\n function setActiveIndex(index) {\n const prevActive = state.resultsContainer.querySelector('.vd-doc-search-result.is-active');\n if (prevActive) {\n prevActive.classList.remove('is-active');\n prevActive.setAttribute('aria-selected', 'false');\n }\n\n state.activeIndex = index;\n\n const newActive = state.resultsContainer.querySelector('[data-index=\"' + index + '\"]');\n if (newActive) {\n newActive.classList.add('is-active');\n newActive.setAttribute('aria-selected', 'true');\n state.input.setAttribute('aria-activedescendant', 'vd-doc-search-result-' + index);\n newActive.scrollIntoView({ block: 'nearest' });\n }\n }\n\n /**\n * Select a result\n */\n function select(index) {\n const result = state.results[index];\n if (!result) return;\n\n // Close search\n close();\n state.input.value = '';\n state.query = '';\n\n // Custom callback\n if (typeof config.onSelect === 'function') {\n safeInvokeCallback('onSelect', config.onSelect, result);\n return;\n }\n\n // Default behavior: navigate to section\n const section = document.querySelector(result.url);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth', block: 'start' });\n window.history.pushState(null, '', result.url);\n updateSidebarActive(result.id);\n }\n }\n\n /**\n * Update sidebar navigation active state\n */\n function updateSidebarActive(sectionId) {\n const navLinks = document.querySelectorAll(config.navSelector);\n navLinks.forEach(function(link) {\n link.classList.remove('active');\n if (link.getAttribute('href') === '#' + sectionId) {\n link.classList.add('active');\n }\n });\n }\n\n /**\n * Open results dropdown\n */\n function open() {\n if (state.isOpen) return;\n\n state.isOpen = true;\n state.resultsContainer.classList.add('is-open');\n state.input.setAttribute('aria-expanded', 'true');\n\n if (typeof config.onOpen === 'function') {\n safeInvokeCallback('onOpen', config.onOpen);\n }\n }\n\n /**\n * Close results dropdown\n */\n function close() {\n if (!state.isOpen) return;\n\n state.isOpen = false;\n state.activeIndex = -1;\n state.resultsContainer.classList.remove('is-open');\n state.input.setAttribute('aria-expanded', 'false');\n state.input.removeAttribute('aria-activedescendant');\n\n if (typeof config.onClose === 'function') {\n safeInvokeCallback('onClose', config.onClose);\n }\n }\n\n /**\n * Destroy the component\n */\n function destroy() {\n unbindEvents();\n \n state.initialized = false;\n state.index = [];\n state.results = [];\n state.isOpen = false;\n state.query = '';\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n if (state.resultsContainer) {\n setResultsHtml('');\n }\n }\n\n /**\n * Rebuild the search index\n */\n function rebuild() {\n buildIndex();\n }\n\n /**\n * Update configuration\n */\n function setConfig(newConfig) {\n Object.assign(config, newConfig);\n }\n\n /**\n * Get current configuration\n */\n function getConfig() {\n return Object.assign({}, config);\n }\n\n /**\n * Get search index\n */\n function getIndex() {\n return state.index.slice();\n }\n\n // Public instance API\n const instance = {\n init: init,\n destroy: destroy,\n rebuild: rebuild,\n search: search,\n open: open,\n close: close,\n setConfig: setConfig,\n getConfig: getConfig,\n getIndex: getIndex\n };\n\n return instance;\n }\n\n /**\n * Search Component (singleton for backward compatibility)\n */\n const Search = {\n // Factory method \u2014 creates and auto-initializes a new independent instance.\n // Always returns the instance so callers retain a reference even if the\n // DOM container is not yet available (they can retry init() later).\n create: function(options) {\n const instance = createSearch(options);\n if (instance) {\n instance.init();\n }\n return instance || null;\n },\n \n // Default instance\n _instance: null,\n \n // Configuration (for default instance)\n config: Object.assign({}, DEFAULTS),\n\n /**\n * Initialize the default search instance\n */\n init: function(options) {\n if (this._instance) {\n this._instance.destroy();\n }\n \n if (options) {\n Object.assign(this.config, options);\n }\n \n this._instance = createSearch(this.config);\n return this._instance ? this._instance.init() : null;\n },\n\n /**\n * Destroy the default instance\n */\n destroy: function() {\n if (this._instance) {\n this._instance.destroy();\n this._instance = null;\n }\n },\n\n destroyAll: function() {\n this.destroy();\n },\n\n /**\n * Rebuild the default instance index\n */\n rebuild: function() {\n if (this._instance) {\n this._instance.rebuild();\n }\n },\n\n /**\n * Search using the default instance\n */\n search: function(query) {\n return this._instance ? this._instance.search(query) : [];\n },\n\n /**\n * Open the default instance\n */\n open: function() {\n if (this._instance) {\n this._instance.open();\n }\n },\n\n /**\n * Close the default instance\n */\n close: function() {\n if (this._instance) {\n this._instance.close();\n }\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('docSearch', Search);\n }\n\n // Expose globally (both names for compatibility)\n window.Search = Search;\n window.DocSearch = Search; // Backward compatibility\n window.VanduoDocSearch = Search; // New name compatibility\n\n})();\n", "/**\n * Vanduo Framework - Draggable Component\n * JavaScript functionality for draggable elements and drop zones\n */\n\n(function () {\n 'use strict';\n\n /**\n * Draggable Component\n */\n const Draggable = {\n // Store initialized draggables and their cleanup functions\n instances: new Map(),\n // Store current drag state\n currentDrag: null,\n // Store touch state\n touchState: null,\n // Feedback element\n feedbackElement: null,\n // Shared selector used by init and touch reorder\n containerSelector: '.vd-draggable-container, .vd-draggable-container-vertical',\n\n /**\n * Initialize draggable components\n */\n init: function () {\n const draggables = document.querySelectorAll('.vd-draggable, [data-draggable]');\n\n draggables.forEach(element => {\n if (this.instances.has(element)) {\n return;\n }\n this.initDraggable(element);\n });\n\n const containers = document.querySelectorAll(this.containerSelector);\n containers.forEach(container => {\n if (!this.instances.has(container)) {\n this.initContainer(container);\n }\n });\n\n const dropZones = document.querySelectorAll('.vd-drop-zone');\n dropZones.forEach(zone => {\n if (!this.instances.has(zone)) {\n this.initDropZone(zone);\n }\n });\n\n this.createFeedbackElement();\n },\n\n /**\n * Initialize a single draggable element\n * @param {HTMLElement} element - Draggable element\n */\n initDraggable: function (element) {\n const cleanupFunctions = [];\n\n // Make element draggable if not already\n if (!element.hasAttribute('draggable')) {\n element.setAttribute('draggable', 'true');\n }\n\n // Accessibility: add ARIA attributes\n if (!element.hasAttribute('tabindex')) {\n element.setAttribute('tabindex', '0');\n }\n element.setAttribute('role', 'option');\n element.setAttribute('aria-roledescription', 'draggable item');\n element.setAttribute('aria-grabbed', 'false');\n\n // Handle drag start\n const dragStartHandler = (e) => {\n this.handleDragStart(e, element);\n };\n element.addEventListener('dragstart', dragStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragstart', dragStartHandler));\n\n // Handle drag\n const dragHandler = (e) => {\n this.handleDrag(e, element);\n };\n element.addEventListener('drag', dragHandler);\n cleanupFunctions.push(() => element.removeEventListener('drag', dragHandler));\n\n // Handle drag end\n const dragEndHandler = (e) => {\n this.handleDragEnd(e, element);\n };\n element.addEventListener('dragend', dragEndHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragend', dragEndHandler));\n\n // Handle touch start (for mobile)\n const touchStartHandler = (e) => {\n this.handleTouchStart(e, element);\n };\n element.addEventListener('touchstart', touchStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchstart', touchStartHandler));\n\n // Handle touch move (for mobile)\n // { passive: false } is required so that e.preventDefault() works\n // once the drag threshold is reached \u2014 without it, modern browsers\n // treat the listener as passive and silently ignore preventDefault().\n const touchMoveHandler = (e) => {\n this.handleTouchMove(e, element);\n };\n element.addEventListener('touchmove', touchMoveHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchmove', touchMoveHandler));\n\n // Handle touch end (for mobile)\n const touchEndHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchend', touchEndHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchend', touchEndHandler));\n\n // Handle touch cancel (for mobile)\n const touchCancelHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchcancel', touchCancelHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchcancel', touchCancelHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, element);\n };\n element.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => element.removeEventListener('keydown', keydownHandler));\n\n this.instances.set(element, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a draggable container\n * @param {HTMLElement} container - Draggable container\n */\n initContainer: function (container) {\n // Accessibility: add ARIA role to container\n container.setAttribute('role', 'listbox');\n container.setAttribute('aria-label', container.getAttribute('aria-label') || 'Draggable items');\n\n const items = container.querySelectorAll('.vd-draggable-item');\n items.forEach(item => {\n if (!this.instances.has(item)) {\n this.initDraggable(item);\n }\n });\n\n const cleanupFunctions = [];\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n };\n\n // Handle drag over for auto-sorting\n const dragOverHandler = (e) => {\n e.preventDefault(); // Necessary to allow drop\n e.dataTransfer.dropEffect = 'move';\n\n if (!this.currentDrag) return;\n const draggingEl = this.currentDrag.element;\n\n // Only reorder if dragging an item that belongs to this container (or if we support cross-container drag, but keep simple)\n if (!container.contains(draggingEl)) return;\n\n // Prevent jumps when the dragging finalizes with 0,0 coordinates near the end\n if (e.clientX === 0 && e.clientY === 0) return;\n\n this.handleReorder(container, draggingEl, e.clientX, e.clientY);\n };\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault(); // crucial to prevent the browser's default handling and snapping back\n };\n\n container.addEventListener('dragenter', dragEnterHandler);\n container.addEventListener('dragover', dragOverHandler);\n container.addEventListener('drop', dropHandler);\n\n cleanupFunctions.push(() => {\n container.removeEventListener('dragenter', dragEnterHandler);\n container.removeEventListener('dragover', dragOverHandler);\n container.removeEventListener('drop', dropHandler);\n });\n\n this.instances.set(container, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a drop zone\n * @param {HTMLElement} zone - Drop zone element\n */\n initDropZone: function (zone) {\n const cleanupFunctions = [];\n\n // Accessibility: add ARIA role to drop zone\n zone.setAttribute('role', 'region');\n zone.setAttribute('aria-dropeffect', 'move');\n if (!zone.hasAttribute('aria-label')) {\n zone.setAttribute('aria-label', 'Drop zone');\n }\n\n // Handle drag over\n const dragOverHandler = (e) => {\n e.preventDefault();\n this.handleDragOver(e, zone);\n };\n zone.addEventListener('dragover', dragOverHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragover', dragOverHandler));\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n this.handleDragEnter(e, zone);\n };\n zone.addEventListener('dragenter', dragEnterHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragenter', dragEnterHandler));\n\n // Handle drag leave\n const dragLeaveHandler = (e) => {\n this.handleDragLeave(e, zone);\n };\n zone.addEventListener('dragleave', dragLeaveHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragleave', dragLeaveHandler));\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault();\n this.handleDrop(e, zone);\n };\n zone.addEventListener('drop', dropHandler);\n cleanupFunctions.push(() => zone.removeEventListener('drop', dropHandler));\n\n this.instances.set(zone, { cleanup: cleanupFunctions });\n },\n\n /**\n * Create feedback element for drag operations\n */\n createFeedbackElement: function () {\n if (!this.feedbackElement) {\n // Reuse existing element if present\n const existing = document.querySelector('.vd-drag-feedback');\n if (existing) {\n this.feedbackElement = existing;\n return;\n }\n\n this.feedbackElement = document.createElement('div');\n this.feedbackElement.className = 'vd-drag-feedback hidden';\n this.feedbackElement.setAttribute('role', 'presentation');\n document.body.appendChild(this.feedbackElement);\n }\n },\n\n /**\n * Handle drag start event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragStart: function (e, element) {\n // Add dragging class\n element.classList.add('is-dragging');\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: e.clientX, y: e.clientY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element)\n };\n\n // Set drag data\n e.dataTransfer.effectAllowed = 'move';\n e.dataTransfer.setData('text/plain', this.currentDrag.data);\n\n // We no longer suppress the native ghost image or manually update feedback\n // for mouse drags, relying on the browser's native rendering instead.\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY }\n }\n }));\n },\n\n /**\n * Handle drag event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDrag: function (e, element) {\n // Guard against null state (race condition on fast interactions)\n if (!this.currentDrag) return;\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - this.currentDrag.initialPosition.x,\n y: e.clientY - this.currentDrag.initialPosition.y\n }\n }\n }));\n },\n\n /**\n * Handle drag end event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragEnd: function (e, element) {\n // Remove dragging class\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'false');\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Guard against null state\n const data = this.currentDrag?.data || this.getData(element);\n const initialPos = this.currentDrag?.initialPosition || { x: 0, y: 0 };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - initialPos.x,\n y: e.clientY - initialPos.y\n }\n }\n }));\n\n // Reset drag state\n this.currentDrag = null;\n },\n\n /**\n * Handle touch start event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchStart: function (e, element) {\n // Don't prevent default here \u2014 it blocks scrolling.\n // We only prevent default in touchmove once drag threshold is reached.\n const touch = e.touches[0];\n const rect = element.getBoundingClientRect();\n this.touchState = {\n element: element,\n startX: touch.clientX,\n startY: touch.clientY,\n lastX: touch.clientX,\n lastY: touch.clientY,\n // Keep preview anchored to the original grab point.\n offsetX: touch.clientX - rect.left,\n offsetY: touch.clientY - rect.top,\n startTime: Date.now(),\n isDragging: false\n };\n },\n\n /**\n * Handle touch move event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchMove: function (e, element) {\n if (!this.touchState) return;\n\n const touch = e.touches[0];\n this.touchState.lastX = touch.clientX;\n this.touchState.lastY = touch.clientY;\n const deltaX = touch.clientX - this.touchState.startX;\n const deltaY = touch.clientY - this.touchState.startY;\n\n // Only start dragging if moved a minimum distance\n if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {\n // Now we know it's a drag, not a scroll \u2014 prevent default\n if (e.cancelable) e.preventDefault();\n\n if (!this.touchState.isDragging) {\n this.touchState.isDragging = true;\n element.classList.add('is-dragging');\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: this.touchState.startX, y: this.touchState.startY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element),\n // Preserve where inside the element the drag started for accurate ghost positioning.\n offsetX: this.touchState.offsetX,\n offsetY: this.touchState.offsetY\n };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY }\n }\n }));\n }\n\n // Update feedback\n this.updateFeedback(touch.clientX, touch.clientY);\n\n // Dispatch event\n if (this.currentDrag) {\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY },\n delta: { x: deltaX, y: deltaY }\n }\n }));\n\n this.updateTouchDropZone(touch.clientX, touch.clientY);\n\n // Reorder for touch\n const container = element.closest(this.containerSelector);\n if (container && container.contains(element)) {\n this.handleReorder(container, element, touch.clientX, touch.clientY);\n }\n }\n }\n },\n\n /**\n * Handle touch end event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchEnd: function (e, element) {\n if (this.touchState && this.touchState.isDragging) {\n if (e.cancelable) e.preventDefault();\n const endTouch = e.changedTouches?.[0];\n const endPosition = {\n x: endTouch?.clientX ?? this.touchState.lastX ?? this.touchState.startX,\n y: endTouch?.clientY ?? this.touchState.lastY ?? this.touchState.startY\n };\n\n const dropZone = this.resolveDropZoneAtPoint(endPosition.x, endPosition.y) || this.touchState.overZone;\n if (dropZone) {\n this.dispatchDrop(dropZone, endPosition);\n } else if (this.touchState.overZone) {\n this.touchState.overZone.classList.remove('is-drag-over');\n }\n\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n element.setAttribute('aria-grabbed', 'false');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Dispatch event\n const data = this.currentDrag?.data || this.getData(element);\n const startX = this.touchState?.startX || 0;\n const startY = this.touchState?.startY || 0;\n\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: endPosition,\n delta: {\n x: endPosition.x - startX,\n y: endPosition.y - startY\n }\n }\n }));\n }\n\n // Reset states\n this.touchState = null;\n this.currentDrag = null;\n },\n\n /**\n * Handle drag over event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} _zone - Drop zone element\n */\n handleDragOver: function (e, _zone) {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n },\n\n /**\n * Handle drag enter event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragEnter: function (e, zone) {\n e.preventDefault();\n zone.classList.add('is-drag-over');\n },\n\n /**\n * Handle drag leave event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragLeave: function (e, zone) {\n zone.classList.remove('is-drag-over');\n },\n\n /**\n * Handle drop event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDrop: function (e, zone) {\n e.preventDefault();\n this.dispatchDrop(zone, { x: e.clientX, y: e.clientY });\n },\n\n /**\n * Resolve a drop zone from viewport coordinates\n * @param {number} x\n * @param {number} y\n * @returns {HTMLElement|null}\n */\n resolveDropZoneAtPoint: function (x, y) {\n if (!Number.isFinite(x) || !Number.isFinite(y)) return null;\n\n // Prefer the full stacking list so overlays/top elements don't hide real drop targets.\n if (typeof document.elementsFromPoint === 'function') {\n const stacked = document.elementsFromPoint(x, y);\n for (const element of stacked) {\n const zone = element.closest('.vd-drop-zone');\n if (zone) return zone;\n }\n }\n\n const target = document.elementFromPoint(x, y);\n const targetZone = target ? target.closest('.vd-drop-zone') : null;\n if (targetZone) return targetZone;\n\n // Last-resort fallback for mobile emulation edge cases.\n const zones = document.querySelectorAll('.vd-drop-zone');\n for (const zone of zones) {\n const rect = zone.getBoundingClientRect();\n if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {\n return zone;\n }\n }\n\n return null;\n },\n\n /**\n * Track and update active drop-zone hover state on touch devices\n * @param {number} x\n * @param {number} y\n */\n updateTouchDropZone: function (x, y) {\n if (!this.touchState) return;\n\n const nextZone = this.resolveDropZoneAtPoint(x, y);\n const prevZone = this.touchState.overZone || null;\n\n if (prevZone && prevZone !== nextZone) {\n prevZone.classList.remove('is-drag-over');\n }\n\n if (nextZone && nextZone !== prevZone) {\n nextZone.classList.add('is-drag-over');\n }\n\n this.touchState.overZone = nextZone || null;\n },\n\n /**\n * Dispatch a normalized drop event for mouse and touch flows\n * @param {HTMLElement} zone\n * @param {{x:number, y:number}} position\n */\n dispatchDrop: function (zone, position) {\n zone.classList.remove('is-drag-over');\n zone.dispatchEvent(new CustomEvent('draggable:drop', {\n bubbles: true,\n detail: {\n zone: zone,\n element: this.currentDrag?.element,\n data: this.currentDrag?.data,\n position: position\n }\n }));\n },\n\n /**\n * Reorder elements in container based on cursor position\n * @param {HTMLElement} container \n * @param {HTMLElement} element \n * @param {number} clientX \n * @param {number} clientY \n */\n handleReorder: function (container, element, clientX, clientY) {\n const isVertical = container.classList.contains('vd-draggable-container-vertical');\n const siblings = [...container.querySelectorAll('.vd-draggable-item:not(.is-dragging), .vd-draggable:not(.is-dragging)')];\n\n const nextSibling = siblings.reduce((closest, child) => {\n const box = child.getBoundingClientRect();\n const offset = isVertical\n ? clientY - box.top - box.height / 2\n : clientX - box.left - box.width / 2;\n\n if (offset < 0 && offset > closest.offset) {\n return { offset: offset, element: child };\n } else {\n return closest;\n }\n }, { offset: Number.NEGATIVE_INFINITY }).element;\n\n if (nextSibling == null) {\n container.appendChild(element);\n } else {\n container.insertBefore(element, nextSibling);\n }\n },\n\n /**\n * Handle keyboard events\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} element - Draggable element\n */\n handleKeydown: function (e, element) {\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n // Trigger click or custom action\n element.click();\n break;\n case 'Escape':\n // Cancel drag if in progress\n if (element.classList.contains('is-dragging')) {\n element.classList.remove('is-dragging');\n element.setAttribute('aria-grabbed', 'false');\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n this.currentDrag = null;\n }\n break;\n case 'ArrowUp':\n case 'ArrowLeft': {\n e.preventDefault();\n const prev = element.previousElementSibling;\n if (prev && (prev.classList.contains('vd-draggable') || prev.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(element, prev);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'up' }\n }));\n }\n break;\n }\n case 'ArrowDown':\n case 'ArrowRight': {\n e.preventDefault();\n const next = element.nextElementSibling;\n if (next && (next.classList.contains('vd-draggable') || next.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(next, element);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'down' }\n }));\n }\n break;\n }\n }\n },\n\n /**\n * Get data from draggable element\n * @param {HTMLElement} element - Draggable element\n * @returns {string} Data associated with the element\n */\n getData: function (element) {\n return element.dataset.draggable || element.textContent.trim();\n },\n\n /**\n * Update drag feedback element\n * @param {number} x - Current X coordinate\n * @param {number} y - Current Y coordinate\n */\n updateFeedback: function (x, y) {\n if (!this.currentDrag) return;\n\n // Show feedback\n this.feedbackElement.classList.remove('hidden');\n\n // Update feedback content\n const rect = this.currentDrag.initialBounds;\n this.feedbackElement.innerHTML = '';\n const clone = this.currentDrag.element.cloneNode(true);\n this.feedbackElement.appendChild(clone);\n\n // Set styles\n const offsetX = this.currentDrag.offsetX ?? 20;\n const offsetY = this.currentDrag.offsetY ?? 20;\n Object.assign(this.feedbackElement.style, {\n left: (x - offsetX) + 'px',\n top: (y - offsetY) + 'px',\n width: rect.width + 'px',\n height: rect.height + 'px'\n });\n },\n\n /**\n * Make an element draggable programmatically\n * @param {HTMLElement|string} element - Element or selector\n * @param {Object} options - Configuration options\n */\n makeDraggable: function (element, options = {}) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && !this.instances.has(el)) {\n // Add classes and attributes\n el.classList.add('vd-draggable');\n el.setAttribute('draggable', 'true');\n\n // Set options\n if (options.data) {\n el.dataset.draggable = options.data;\n }\n\n // Initialize\n this.initDraggable(el);\n }\n },\n\n /**\n * Remove draggable functionality from an element\n * @param {HTMLElement|string} element - Element or selector\n */\n removeDraggable: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && this.instances.has(el)) {\n // Clean up\n const instance = this.instances.get(el);\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n\n // Remove classes and attributes\n el.classList.remove('vd-draggable');\n el.removeAttribute('draggable');\n el.removeAttribute('data-draggable');\n }\n },\n\n /**\n * Destroy a draggable instance and clean up event listeners\n * @param {HTMLElement} element - Draggable element\n */\n destroy: function (element) {\n this.removeDraggable(element);\n },\n\n /**\n * Destroy all draggable instances\n */\n destroyAll: function () {\n const instances = Array.from(this.instances.keys());\n instances.forEach(element => this.destroy(element));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('draggable', Draggable);\n }\n\n // Expose globally\n window.VanduoDraggable = Draggable;\n})();\n", "/**\n * Vanduo Framework \u2013 LazyLoad Component\n * v1.2.1\n *\n * Provides two levels of API:\n *\n * LOW-LEVEL (generic IntersectionObserver wrapper)\n * VanduoLazyLoad.observe(element, callback, options?)\n * VanduoLazyLoad.unobserve(element)\n * VanduoLazyLoad.unobserveAll()\n *\n * HIGH-LEVEL (HTML-section fetcher, mirrors vanduo-docs SPA behaviour)\n * VanduoLazyLoad.loadSection(url, containerEl, options?)\n * options: { placeholder, threshold, rootMargin, onLoaded, onError }\n * placeholder: 'skeleton' | 'spinner' | HTMLString (default: 'skeleton')\n *\n * ATTRIBUTE-DRIVEN (zero-JS usage, wired by init())\n *
    \u2026
    \n *\n * EVENTS dispatched on the host element:\n * lazysection:loading \u2014 fetch started\n * lazysection:loaded \u2014 content injected\n * lazysection:error \u2014 fetch failed\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500 Private state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /** @type {Map} */\n const _observerMap = new Map();\n\n /* \u2500\u2500 Security helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Returns true only if `url` resolves to the same origin as the page\n * (relative paths and same-origin absolute URLs are allowed).\n * Cross-origin URLs are rejected to prevent SSRF-style fetch abuse.\n * @param {string} url\n * @returns {boolean}\n */\n function _isSafeUrl(url) {\n try {\n // Relative URLs (no origin) are always safe\n const resolved = new URL(url, window.location.href);\n return resolved.origin === window.location.origin;\n } catch (_) {\n return false;\n }\n }\n\n /**\n * Safely inject fetched HTML into a container by parsing it with\n * DOMParser (avoids script execution) and replacing children via\n * standard DOM APIs instead of raw innerHTML assignment.\n * @param {Element} containerEl\n * @param {string} html\n */\n function _safeInjectHtml(containerEl, html) {\n const parser = new DOMParser();\n const doc = parser.parseFromString(html.trim(), 'text/html'); // CodeQL [js/xss-through-dom] Intentional: parsed nodes are sanitized below before adoption into live DOM\n\n const DANGEROUS_TAGS = ['SCRIPT', 'IFRAME', 'OBJECT', 'EMBED', 'FORM', 'BASE', 'LINK', 'META', 'STYLE'];\n for (const tag of DANGEROUS_TAGS) {\n const els = doc.querySelectorAll(tag);\n for (let i = els.length - 1; i >= 0; i--) {\n els[i].parentNode.removeChild(els[i]);\n }\n }\n\n // Strip dangerous attributes (e.g. onerror, javascript: urls) from all elements\n function _sanitizeNode(node) {\n if (node.nodeType === Node.ELEMENT_NODE) {\n const attrs = node.attributes;\n for (let i = attrs.length - 1; i >= 0; i--) {\n const attrName = attrs[i].name.toLowerCase();\n const attrValue = attrs[i].value.toLowerCase();\n const trimmedValue = attrValue.trim();\n if (\n attrName.startsWith('on') ||\n trimmedValue.startsWith('javascript:') ||\n trimmedValue.startsWith('data:') ||\n trimmedValue.startsWith('vbscript:')\n ) {\n node.removeAttribute(attrs[i].name);\n }\n }\n const children = node.childNodes;\n for (let i = 0; i < children.length; i++) {\n _sanitizeNode(children[i]);\n }\n }\n }\n _sanitizeNode(doc.body);\n\n // Collect all top-level body children\n const nodes = Array.from(doc.body.childNodes);\n // Clear container and append parsed nodes\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n nodes.forEach(function (node) {\n containerEl.appendChild(document.adoptNode(node));\n });\n }\n\n /* \u2500\u2500 Placeholder HTML \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _skeletonHtml() {\n return '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _spinnerHtml() {\n return '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _resolvePlaceholder(placeholder) {\n if (!placeholder || placeholder === 'skeleton') return _skeletonHtml();\n if (placeholder === 'spinner') return _spinnerHtml();\n // Caller-supplied HTML string\n return placeholder;\n }\n\n /* \u2500\u2500 Dispatch helper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _dispatch(el, eventName, detail) {\n el.dispatchEvent(new CustomEvent(eventName, { bubbles: true, detail: detail || {} }));\n }\n\n /* \u2500\u2500 VanduoLazyLoad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const VanduoLazyLoad = {\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * LOW-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Observe an element. `callback` is invoked once when the element\n * enters the viewport, then the element is automatically unobserved.\n *\n * @param {Element} element\n * @param {function(Element): void} callback\n * @param {{ threshold?: number, rootMargin?: string }} [options]\n */\n observe: function (element, callback, options) {\n if (!(element instanceof Element)) {\n console.warn('[VanduoLazyLoad] observe() requires a DOM Element.');\n return;\n }\n if (typeof callback !== 'function') {\n console.warn('[VanduoLazyLoad] observe() requires a callback function.');\n return;\n }\n // Already observed \u2014 ignore\n if (_observerMap.has(element)) return;\n\n const threshold = (options && options.threshold != null) ? options.threshold : 0;\n const rootMargin = (options && options.rootMargin) ? options.rootMargin : '0px';\n\n const observer = new IntersectionObserver(function (entries, obs) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n obs.unobserve(entry.target);\n _observerMap.delete(entry.target);\n try {\n callback(entry.target);\n } catch (e) {\n console.error('[VanduoLazyLoad] Callback threw:', e);\n }\n }\n });\n }, { threshold: threshold, rootMargin: rootMargin });\n\n _observerMap.set(element, observer);\n observer.observe(element);\n },\n\n /**\n * Stop observing an element that was previously passed to observe().\n * @param {Element} element\n */\n unobserve: function (element) {\n const observer = _observerMap.get(element);\n if (observer) {\n observer.unobserve(element);\n _observerMap.delete(element);\n }\n },\n\n /**\n * Stop observing ALL currently observed elements.\n */\n unobserveAll: function () {\n _observerMap.forEach(function (observer, element) {\n observer.unobserve(element);\n });\n _observerMap.clear();\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * HIGH-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fetch an HTML partial and inject it into `containerEl` when the\n * container enters the viewport. A placeholder is shown immediately.\n *\n * @param {string} url URL of the HTML partial to fetch\n * @param {Element} containerEl Target element whose content will be replaced\n * @param {{\n * placeholder?: 'skeleton'|'spinner'|string,\n * threshold?: number,\n * rootMargin?: string,\n * onLoaded?: function(Element): void,\n * onError?: function(Error): void\n * }} [options]\n */\n loadSection: function (url, containerEl, options) {\n if (typeof url !== 'string' || !url) {\n console.warn('[VanduoLazyLoad] loadSection() requires a non-empty URL string.');\n return;\n }\n if (!(containerEl instanceof Element)) {\n console.warn('[VanduoLazyLoad] loadSection() requires a DOM Element as containerEl.');\n return;\n }\n // Reject cross-origin URLs to prevent SSRF-style fetch abuse\n if (!_isSafeUrl(url)) {\n console.error('[VanduoLazyLoad] loadSection() blocked cross-origin URL:', url);\n return;\n }\n\n const opts = options || {};\n // Placeholders are known-safe static HTML strings built internally\n const placeholderHtml = _resolvePlaceholder(opts.placeholder);\n\n // Use _safeInjectHtml instead of innerHTML to prevent XSS from caller-supplied placeholders\n _safeInjectHtml(containerEl, placeholderHtml);\n _dispatch(containerEl, 'lazysection:loading', { url: url });\n\n // Fetch when visible\n this.observe(containerEl, function () {\n const controller = new window.AbortController();\n const timeoutId = setTimeout(function () { controller.abort(); }, 10000);\n\n window.fetch(url, { signal: controller.signal })\n .then(function (res) {\n clearTimeout(timeoutId);\n if (!res.ok) throw new Error('HTTP ' + res.status);\n return res.text();\n })\n .then(function (html) {\n // Use DOMParser to parse fetched content safely, avoiding\n // raw innerHTML assignment of externally-sourced strings\n _safeInjectHtml(containerEl, html);\n _dispatch(containerEl, 'lazysection:loaded', { url: url });\n // Re-init Vanduo components inside the new content\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.init();\n }\n if (typeof opts.onLoaded === 'function') {\n opts.onLoaded(containerEl);\n }\n })\n .catch(function (err) {\n // Build error node via DOM APIs \u2014 no dynamic HTML strings\n const alertEl = document.createElement('div');\n alertEl.className = 'vd-alert vd-alert-error';\n alertEl.setAttribute('role', 'alert');\n const msgEl = document.createElement('span');\n msgEl.textContent = 'Failed to load content. ';\n const detailEl = document.createElement('small');\n detailEl.style.opacity = '0.7';\n detailEl.textContent = err.message;\n alertEl.appendChild(msgEl);\n alertEl.appendChild(detailEl);\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n containerEl.appendChild(alertEl);\n _dispatch(containerEl, 'lazysection:error', { url: url, error: err });\n console.error('[VanduoLazyLoad] loadSection failed:', err);\n if (typeof opts.onError === 'function') {\n opts.onError(err);\n }\n });\n }, { threshold: opts.threshold, rootMargin: opts.rootMargin });\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * ATTRIBUTE-DRIVEN INIT\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Scan the DOM for [data-vd-lazy] elements and wire them up.\n * Safe to call multiple times \u2014 already-observed elements are skipped.\n */\n init: function () {\n const self = this;\n const elements = document.querySelectorAll('[data-vd-lazy]');\n elements.forEach(function (el) {\n // Skip already-observed or already-loaded elements\n if (_observerMap.has(el) || el.dataset.vdLazyState === 'loading' || el.dataset.vdLazyState === 'loaded') return;\n\n const url = el.getAttribute('data-vd-lazy');\n if (!url) return;\n\n el.dataset.vdLazyState = 'loading';\n const placeholder = el.getAttribute('data-vd-lazy-placeholder') || 'skeleton';\n\n self.loadSection(url, el, {\n placeholder: placeholder,\n onLoaded: function () {\n el.dataset.vdLazyState = 'loaded';\n },\n onError: function () {\n el.dataset.vdLazyState = 'error';\n }\n });\n });\n }\n };\n\n /* \u2500\u2500 Register with Vanduo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('LazyLoad', VanduoLazyLoad);\n }\n\n /* \u2500\u2500 Global convenience alias \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n window.VanduoLazyLoad = VanduoLazyLoad;\n\n})();\n", "/**\n * Vanduo Framework - Glass Scroll Activation\n * Generic scroll-aware glass activation via IntersectionObserver.\n *\n * Usage:\n * Add `data-glass-scroll` to any element carrying a `.vd-glass*` class.\n * By default the previous sibling is used as the sentinel.\n * Point to a custom sentinel via `data-glass-sentinel=\"\"`.\n *\n * Behaviour:\n * - Adds `.is-glass-active` when the sentinel leaves the viewport (scrolled past).\n * - Removes `.is-glass-active` when the sentinel re-enters the viewport.\n */\n(function () {\n 'use strict';\n\n const GlassScroll = {\n /** @type {Map} */\n observers: new Map(),\n\n init: function () {\n document.querySelectorAll('[data-glass-scroll]').forEach(el => {\n if (this.observers.has(el)) return;\n this.initElement(el);\n });\n },\n\n /**\n * Wire up a single scroll-activated glass element.\n * @param {HTMLElement} el\n */\n initElement: function (el) {\n const sentinelSelector = el.dataset.glassSentinel;\n let sentinel;\n\n if (sentinelSelector) {\n sentinel = document.querySelector(sentinelSelector);\n }\n\n if (!sentinel) {\n // Fall back to the previous sibling element\n sentinel = el.previousElementSibling;\n }\n\n if (!sentinel) {\n // No sentinel available \u2014 activate immediately so glass is always shown\n el.classList.add('is-glass-active');\n return;\n }\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n // Active when sentinel is NOT intersecting (scrolled past it)\n el.classList.toggle('is-glass-active', !entry.isIntersecting);\n });\n },\n { threshold: 0, rootMargin: '0px' }\n );\n\n observer.observe(sentinel);\n this.observers.set(el, observer);\n },\n\n /**\n * Disconnect and remove a single element's observer.\n * @param {HTMLElement} el\n */\n destroy: function (el) {\n const observer = this.observers.get(el);\n if (observer) {\n observer.disconnect();\n this.observers.delete(el);\n }\n },\n\n destroyAll: function () {\n this.observers.forEach((observer, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('glassScroll', GlassScroll);\n }\n\n window.VanduoGlassScroll = GlassScroll;\n})();\n", "/**\n * Vanduo Framework - Flow (Carousel/Slider) Component\n * Touch-enabled carousel with slide/fade transitions, autoplay, indicators\n */\n\n(function () {\n 'use strict';\n\n const Flow = {\n instances: new Map(),\n\n init: function () {\n const carousels = document.querySelectorAll('.vd-flow, .vd-carousel');\n carousels.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const track = el.querySelector('.vd-flow-track');\n if (!track) return;\n\n const slides = Array.from(track.querySelectorAll('.vd-flow-slide'));\n if (slides.length === 0) return;\n\n const isFade = el.classList.contains('vd-flow-fade');\n const autoplay = el.hasAttribute('data-vd-autoplay');\n const interval = parseInt(el.getAttribute('data-vd-interval'), 10) || 5000;\n const loop = el.getAttribute('data-vd-loop') !== 'false';\n\n const state = {\n current: 0,\n total: slides.length,\n autoplayTimer: null,\n isFade: isFade,\n loop: loop,\n isDragging: false,\n startX: 0,\n currentX: 0,\n threshold: 50\n };\n\n const cleanup = [];\n\n // Set initial active slide\n slides.forEach((slide, i) => {\n slide.setAttribute('role', 'group');\n slide.setAttribute('aria-roledescription', 'slide');\n slide.setAttribute('aria-label', 'Slide ' + (i + 1) + ' of ' + slides.length);\n if (i === 0) slide.classList.add('is-active');\n });\n\n el.setAttribute('role', 'region');\n el.setAttribute('aria-roledescription', 'carousel');\n if (!el.getAttribute('aria-label')) {\n el.setAttribute('aria-label', 'Carousel');\n }\n\n // Live region for announcements\n const liveRegion = document.createElement('div');\n liveRegion.setAttribute('aria-live', 'polite');\n liveRegion.setAttribute('aria-atomic', 'true');\n liveRegion.className = 'sr-only';\n liveRegion.style.cssText = 'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);';\n el.appendChild(liveRegion);\n\n const goTo = (index, announce) => {\n if (announce === undefined) announce = true;\n let target = index;\n if (state.loop) {\n target = ((index % state.total) + state.total) % state.total;\n } else {\n target = Math.max(0, Math.min(index, state.total - 1));\n }\n\n const prev = state.current;\n state.current = target;\n\n if (state.isFade) {\n slides.forEach((s, i) => {\n s.classList.toggle('is-active', i === target);\n });\n } else {\n track.style.transform = 'translateX(-' + (target * 100) + '%)';\n }\n\n // Update indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.classList.toggle('is-active', i === target);\n ind.setAttribute('aria-selected', i === target ? 'true' : 'false');\n });\n\n // Update slide ARIA\n slides.forEach((s, i) => {\n s.setAttribute('aria-hidden', i !== target ? 'true' : 'false');\n });\n\n if (announce) {\n liveRegion.textContent = 'Slide ' + (target + 1) + ' of ' + state.total;\n }\n\n el.dispatchEvent(new CustomEvent('flow:change', {\n detail: { current: target, previous: prev, total: state.total }\n }));\n };\n\n const next = () => goTo(state.current + 1);\n const prev = () => goTo(state.current - 1);\n\n // Controls\n const prevBtn = el.querySelector('.vd-flow-prev');\n const nextBtn = el.querySelector('.vd-flow-next');\n\n if (prevBtn) {\n const h = () => prev();\n prevBtn.addEventListener('click', h);\n cleanup.push(() => prevBtn.removeEventListener('click', h));\n }\n if (nextBtn) {\n const h = () => next();\n nextBtn.addEventListener('click', h);\n cleanup.push(() => nextBtn.removeEventListener('click', h));\n }\n\n // Indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.setAttribute('role', 'tab');\n ind.setAttribute('aria-selected', i === 0 ? 'true' : 'false');\n ind.setAttribute('aria-label', 'Go to slide ' + (i + 1));\n const h = () => goTo(i);\n ind.addEventListener('click', h);\n cleanup.push(() => ind.removeEventListener('click', h));\n });\n\n // Keyboard navigation\n const keyHandler = (e) => {\n if (e.key === 'ArrowLeft') { prev(); e.preventDefault(); }\n if (e.key === 'ArrowRight') { next(); e.preventDefault(); }\n };\n el.setAttribute('tabindex', '0');\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n // Touch / pointer support\n const pointerDown = (e) => {\n state.isDragging = true;\n state.startX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n state.currentX = state.startX;\n el.classList.add('is-dragging');\n };\n\n const pointerMove = (e) => {\n if (!state.isDragging) return;\n state.currentX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n };\n\n const pointerUp = () => {\n if (!state.isDragging) return;\n state.isDragging = false;\n el.classList.remove('is-dragging');\n const diff = state.startX - state.currentX;\n if (Math.abs(diff) > state.threshold) {\n if (diff > 0) next();\n else prev();\n }\n };\n\n el.addEventListener('mousedown', pointerDown);\n el.addEventListener('mousemove', pointerMove);\n el.addEventListener('mouseup', pointerUp);\n el.addEventListener('mouseleave', pointerUp);\n el.addEventListener('touchstart', pointerDown, { passive: true });\n el.addEventListener('touchmove', pointerMove, { passive: true });\n el.addEventListener('touchend', pointerUp);\n\n cleanup.push(\n () => el.removeEventListener('mousedown', pointerDown),\n () => el.removeEventListener('mousemove', pointerMove),\n () => el.removeEventListener('mouseup', pointerUp),\n () => el.removeEventListener('mouseleave', pointerUp),\n () => el.removeEventListener('touchstart', pointerDown),\n () => el.removeEventListener('touchmove', pointerMove),\n () => el.removeEventListener('touchend', pointerUp)\n );\n\n // Autoplay\n const startAutoplay = () => {\n stopAutoplay();\n state.autoplayTimer = setInterval(next, interval);\n };\n\n const stopAutoplay = () => {\n if (state.autoplayTimer) {\n clearInterval(state.autoplayTimer);\n state.autoplayTimer = null;\n }\n };\n\n if (autoplay) {\n startAutoplay();\n const pauseHandler = () => stopAutoplay();\n const resumeHandler = () => startAutoplay();\n el.addEventListener('mouseenter', pauseHandler);\n el.addEventListener('mouseleave', resumeHandler);\n el.addEventListener('focusin', pauseHandler);\n el.addEventListener('focusout', resumeHandler);\n cleanup.push(\n () => el.removeEventListener('mouseenter', pauseHandler),\n () => el.removeEventListener('mouseleave', resumeHandler),\n () => el.removeEventListener('focusin', pauseHandler),\n () => el.removeEventListener('focusout', resumeHandler),\n () => stopAutoplay()\n );\n }\n\n // Initial ARIA state\n goTo(0, false);\n\n this.instances.set(el, {\n cleanup: cleanup,\n goTo: goTo,\n next: next,\n prev: prev,\n getState: () => ({ ...state })\n });\n },\n\n goTo: function (el, index) {\n const instance = this.instances.get(el);\n if (instance) instance.goTo(index);\n },\n\n next: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.next();\n },\n\n prev: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.prev();\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('flow', Flow);\n }\n\n window.VanduoFlow = Flow;\n\n})();\n", "/**\n * Vanduo Framework - Bubble (Popover) Component\n * Click-triggered rich HTML popover, reuses tooltip positioning concepts\n */\n\n(function () {\n 'use strict';\n\n const Bubble = {\n instances: new Map(),\n _globalCleanups: [],\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-bubble], [data-vd-popover]');\n triggers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n\n if (this._globalCleanups.length === 0) {\n const outsideClick = (e) => {\n this.instances.forEach((inst, trigger) => {\n if (!inst.popover.contains(e.target) && !trigger.contains(e.target)) {\n this.hide(trigger);\n }\n });\n };\n const escHandler = (e) => {\n if (e.key === 'Escape') {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n }\n };\n document.addEventListener('click', outsideClick, true);\n document.addEventListener('keydown', escHandler);\n this._globalCleanups.push(\n () => document.removeEventListener('click', outsideClick, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n }\n },\n\n initInstance: function (trigger) {\n const cleanup = [];\n const placement = trigger.getAttribute('data-vd-bubble-placement') ||\n trigger.getAttribute('data-vd-popover-placement') || 'bottom';\n\n // Build popover element\n const popover = document.createElement('div');\n popover.className = 'vd-bubble-content';\n popover.setAttribute('role', 'dialog');\n popover.setAttribute('aria-modal', 'false');\n popover.setAttribute('data-placement', placement);\n\n const title = trigger.getAttribute('data-vd-bubble-title') ||\n trigger.getAttribute('data-vd-popover-title');\n const content = trigger.getAttribute('data-vd-bubble') ||\n trigger.getAttribute('data-vd-popover') || '';\n const htmlContent = trigger.getAttribute('data-vd-bubble-html') ||\n trigger.getAttribute('data-vd-popover-html');\n\n if (title) {\n const header = document.createElement('div');\n header.className = 'vd-bubble-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const closeBtn = document.createElement('button');\n closeBtn.className = 'vd-bubble-close';\n closeBtn.setAttribute('aria-label', 'Close');\n closeBtn.innerHTML = '×';\n header.appendChild(titleSpan);\n header.appendChild(closeBtn);\n popover.appendChild(header);\n\n const closeHandler = (e) => { e.stopPropagation(); this.hide(trigger); };\n closeBtn.addEventListener('click', closeHandler);\n cleanup.push(() => closeBtn.removeEventListener('click', closeHandler));\n }\n\n const body = document.createElement('div');\n body.className = 'vd-bubble-body';\n if (htmlContent) {\n if (typeof sanitizeHtml === 'function') {\n body.innerHTML = sanitizeHtml(htmlContent);\n } else {\n body.textContent = htmlContent;\n }\n } else {\n body.textContent = content;\n }\n popover.appendChild(body);\n\n document.body.appendChild(popover);\n\n // ARIA on trigger\n const popId = 'vd-bubble-' + Math.random().toString(36).slice(2, 9);\n popover.id = popId;\n trigger.setAttribute('aria-haspopup', 'dialog');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.setAttribute('aria-controls', popId);\n\n // Toggle on click\n const toggleHandler = (e) => {\n e.stopPropagation();\n if (popover.classList.contains('is-visible')) {\n this.hide(trigger);\n } else {\n this.hideAll();\n this.show(trigger);\n }\n };\n trigger.addEventListener('click', toggleHandler);\n cleanup.push(() => trigger.removeEventListener('click', toggleHandler));\n\n this.instances.set(trigger, { popover, cleanup, placement });\n },\n\n position: function (trigger, popover, placement) {\n const rect = trigger.getBoundingClientRect();\n const popRect = popover.getBoundingClientRect();\n const gap = 10;\n let top, left;\n\n switch (placement) {\n case 'top':\n top = rect.top - popRect.height - gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n break;\n case 'left':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.left - popRect.width - gap + window.scrollX;\n break;\n case 'right':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.right + gap + window.scrollX;\n break;\n default: // bottom\n top = rect.bottom + gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n }\n\n // Clamp to viewport\n left = Math.max(8, Math.min(left, window.innerWidth - popRect.width - 8));\n top = Math.max(8, top);\n\n popover.style.top = top + 'px';\n popover.style.left = left + 'px';\n },\n\n show: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n const { popover, placement } = instance;\n\n popover.style.display = 'block';\n popover.classList.add('is-visible');\n trigger.setAttribute('aria-expanded', 'true');\n\n requestAnimationFrame(() => {\n this.position(trigger, popover, placement);\n });\n\n trigger.dispatchEvent(new CustomEvent('bubble:show', { bubbles: true }));\n },\n\n hide: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.popover.classList.remove('is-visible');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.dispatchEvent(new CustomEvent('bubble:hide', { bubbles: true }));\n },\n\n hideAll: function () {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n },\n\n destroy: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n if (instance.popover.parentNode) {\n instance.popover.parentNode.removeChild(instance.popover);\n }\n trigger.removeAttribute('aria-haspopup');\n trigger.removeAttribute('aria-expanded');\n trigger.removeAttribute('aria-controls');\n this.instances.delete(trigger);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, trigger) => this.destroy(trigger));\n this._globalCleanups.forEach(fn => fn());\n this._globalCleanups = [];\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('bubble', Bubble);\n }\n\n window.VanduoBubble = Bubble;\n\n})();\n", "/**\n * Vanduo Framework - Waypoint (Scrollspy) Component\n * Highlights navigation links based on scroll position using IntersectionObserver\n */\n\n(function () {\n 'use strict';\n\n const Waypoint = {\n instances: new Map(),\n\n init: function () {\n const navs = document.querySelectorAll('[data-vd-waypoint-nav], [data-vd-scrollspy-nav]');\n navs.forEach(nav => {\n if (this.instances.has(nav)) return;\n this.initInstance(nav);\n });\n },\n\n initInstance: function (nav) {\n const links = Array.from(nav.querySelectorAll('a[href^=\"#\"]'));\n if (links.length === 0) return;\n\n const cleanup = [];\n const offset = parseInt(nav.getAttribute('data-vd-waypoint-offset') || '80', 10);\n const sections = [];\n\n links.forEach(link => {\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.setAttribute('data-vd-waypoint-section', '');\n sections.push({ id, link, section });\n }\n });\n\n if (sections.length === 0) return;\n\n const activeSections = new Set();\n\n const setActive = (id) => {\n links.forEach(l => l.classList.remove('is-active'));\n const target = links.find(l => l.getAttribute('href') === '#' + id);\n if (target) {\n target.classList.add('is-active');\n nav.dispatchEvent(new CustomEvent('waypoint:change', {\n detail: { activeId: id, link: target }\n }));\n }\n };\n\n const rootMargin = '-' + offset + 'px 0px -40% 0px';\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n activeSections.add(entry.target.id);\n } else {\n activeSections.delete(entry.target.id);\n }\n });\n\n // Pick the topmost visible section\n for (let i = 0; i < sections.length; i++) {\n if (activeSections.has(sections[i].id)) {\n setActive(sections[i].id);\n return;\n }\n }\n }, {\n rootMargin: rootMargin,\n threshold: 0\n });\n\n sections.forEach(s => observer.observe(s.section));\n\n // Smooth scroll on click\n links.forEach(link => {\n const clickHandler = (e) => {\n e.preventDefault();\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth' });\n setActive(id);\n }\n };\n link.addEventListener('click', clickHandler);\n cleanup.push(() => link.removeEventListener('click', clickHandler));\n });\n\n cleanup.push(() => observer.disconnect());\n\n this.instances.set(nav, { observer, cleanup, sections, setActive });\n },\n\n refresh: function (nav) {\n this.destroy(nav);\n this.initInstance(nav);\n },\n\n destroy: function (nav) {\n const instance = this.instances.get(nav);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(nav);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, nav) => this.destroy(nav));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('waypoint', Waypoint);\n }\n\n window.VanduoWaypoint = Waypoint;\n\n})();\n", "/**\n * Vanduo Framework - Ripple (Waves Effect) Component\n * Adds expanding circle animation on click at pointer position\n */\n\n(function () {\n 'use strict';\n\n const Ripple = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-ripple, [data-vd-ripple]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n\n const createWave = (e) => {\n const rect = el.getBoundingClientRect();\n const size = Math.max(rect.width, rect.height);\n const x = (e.clientX || (e.touches && e.touches[0].clientX) || rect.left + rect.width / 2) - rect.left - size / 2;\n const y = (e.clientY || (e.touches && e.touches[0].clientY) || rect.top + rect.height / 2) - rect.top - size / 2;\n\n const wave = document.createElement('span');\n wave.className = 'vd-ripple-wave';\n wave.style.width = size + 'px';\n wave.style.height = size + 'px';\n wave.style.left = x + 'px';\n wave.style.top = y + 'px';\n\n el.appendChild(wave);\n\n wave.addEventListener('animationend', () => {\n if (wave.parentNode) wave.parentNode.removeChild(wave);\n });\n };\n\n el.addEventListener('mousedown', createWave);\n el.addEventListener('touchstart', createWave, { passive: true });\n\n cleanup.push(\n () => el.removeEventListener('mousedown', createWave),\n () => el.removeEventListener('touchstart', createWave)\n );\n\n this.instances.set(el, { cleanup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n // Remove any lingering wave elements\n el.querySelectorAll('.vd-ripple-wave').forEach(w => w.remove());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('ripple', Ripple);\n }\n\n window.VanduoRipple = Ripple;\n\n})();\n", "/**\n * Vanduo Framework - Affix (Sticky) Component\n * Uses IntersectionObserver to toggle .is-stuck within the nearest scrollable parent\n */\n\n(function () {\n 'use strict';\n\n function isScrollable(element) {\n if (!element || element === document.body) return false;\n\n const style = window.getComputedStyle(element);\n const overflowY = style.overflowY;\n const overflowX = style.overflowX;\n const canScrollY = /(auto|scroll|overlay)/.test(overflowY) && element.scrollHeight > element.clientHeight;\n const canScrollX = /(auto|scroll|overlay)/.test(overflowX) && element.scrollWidth > element.clientWidth;\n\n return canScrollY || canScrollX;\n }\n\n function getScrollParent(element) {\n let parent = element.parentElement;\n\n while (parent && parent !== document.body && parent !== document.documentElement) {\n if (isScrollable(parent)) return parent;\n parent = parent.parentElement;\n }\n\n return null;\n }\n\n const Affix = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-affix, .vd-sticky, [data-vd-affix]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const parsedOffset = parseInt(el.getAttribute('data-vd-affix-offset') || '0', 10);\n const offset = Number.isNaN(parsedOffset) ? 0 : parsedOffset;\n const scrollParent = getScrollParent(el);\n let isStuck = false;\n\n const sentinel = document.createElement('div');\n sentinel.style.cssText = 'display:block;height:1px;margin-bottom:-1px;visibility:hidden;pointer-events:none;';\n el.parentNode.insertBefore(sentinel, el);\n\n el.style.setProperty('--affix-top-offset', offset + 'px');\n\n function stick() {\n if (isStuck) return;\n isStuck = true;\n el.classList.add('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:stuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n function unstick() {\n if (!isStuck) return;\n isStuck = false;\n el.classList.remove('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:unstuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n const observer = new IntersectionObserver(function (entries) {\n entries.forEach(entry => {\n if (!entry.isIntersecting) {\n stick();\n } else {\n unstick();\n }\n });\n }, {\n root: scrollParent,\n rootMargin: '-' + offset + 'px 0px 0px 0px',\n threshold: 0\n });\n\n observer.observe(sentinel);\n\n cleanup.push(\n () => observer.disconnect(),\n () => { if (sentinel.parentNode) sentinel.parentNode.removeChild(sentinel); },\n () => {\n el.classList.remove('is-stuck');\n el.style.removeProperty('--affix-top-offset');\n }\n );\n\n this.instances.set(el, { cleanup, observer, sentinel, scrollParent });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n el.classList.remove('is-stuck');\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('affix', Affix);\n }\n\n window.VanduoAffix = Affix;\n\n})();\n", "/**\n * Vanduo Framework - Suggest (Autocomplete) Component\n * Dropdown suggestion list with keyboard navigation, static/async data sources\n */\n\n(function () {\n 'use strict';\n\n /**\n * Escape HTML entities to prevent XSS when inserting into innerHTML\n * @param {string} text\n * @returns {string}\n */\n function _escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n const Suggest = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-suggest], [data-vd-autocomplete]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const minChars = parseInt(input.getAttribute('data-vd-suggest-min-chars') || '1', 10);\n const url = input.getAttribute('data-vd-suggest-url') || '';\n const staticData = input.getAttribute('data-vd-suggest') || input.getAttribute('data-vd-autocomplete') || '';\n let items = [];\n\n try { items = JSON.parse(staticData); } catch (_e) {\n items = staticData.split(',').map(s => s.trim()).filter(Boolean);\n }\n\n // Wrap input if not already wrapped\n let wrapper = input.closest('.vd-suggest-wrapper, .vd-autocomplete-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create dropdown list\n const list = document.createElement('ul');\n list.className = 'vd-suggest-list';\n list.setAttribute('role', 'listbox');\n const listId = 'vd-suggest-' + Math.random().toString(36).slice(2, 9);\n list.id = listId;\n wrapper.appendChild(list);\n\n // ARIA\n input.setAttribute('role', 'combobox');\n input.setAttribute('aria-autocomplete', 'list');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('aria-controls', listId);\n input.setAttribute('autocomplete', 'off');\n\n let highlighted = -1;\n let currentItems = [];\n let debounceTimer = null;\n\n const renderItems = (filtered, query) => {\n list.innerHTML = '';\n currentItems = filtered;\n highlighted = -1;\n\n if (filtered.length === 0) {\n const empty = document.createElement('li');\n empty.className = 'vd-suggest-empty';\n empty.textContent = 'No results';\n list.appendChild(empty);\n return;\n }\n\n filtered.forEach((item, i) => {\n const li = document.createElement('li');\n li.className = 'vd-suggest-item';\n li.setAttribute('role', 'option');\n li.id = listId + '-item-' + i;\n\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n if (query) {\n // Escape HTML first to prevent XSS, then highlight matches in the safe string\n const escaped = _escapeHtml(text);\n const re = new RegExp('(' + query.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n li.innerHTML = escaped.replace(re, '$1');\n } else {\n li.textContent = text;\n }\n\n li.addEventListener('click', () => selectItem(i));\n list.appendChild(li);\n });\n };\n\n const open = () => {\n list.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n list.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n highlighted = -1;\n input.removeAttribute('aria-activedescendant');\n };\n\n const selectItem = (index) => {\n const item = currentItems[index];\n const value = typeof item === 'object' ? (item.value || item.label || String(item)) : String(item);\n input.value = value;\n close();\n input.dispatchEvent(new CustomEvent('suggest:select', {\n detail: { value, item, index },\n bubbles: true\n }));\n };\n\n const highlight = (index) => {\n const listItems = list.querySelectorAll('.vd-suggest-item');\n listItems.forEach(li => li.classList.remove('is-highlighted'));\n if (index >= 0 && index < listItems.length) {\n highlighted = index;\n listItems[index].classList.add('is-highlighted');\n input.setAttribute('aria-activedescendant', listItems[index].id);\n listItems[index].scrollIntoView({ block: 'nearest' });\n }\n };\n\n const doSearch = async (query) => {\n if (query.length < minChars) { close(); return; }\n\n let filtered;\n if (url) {\n try {\n const separator = url.includes('?') ? '&' : '?';\n const res = await window.fetch(url + separator + 'q=' + encodeURIComponent(query));\n filtered = await res.json();\n } catch (_e) {\n filtered = [];\n }\n } else {\n const lower = query.toLowerCase();\n filtered = items.filter(item => {\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n return text.toLowerCase().includes(lower);\n });\n }\n\n renderItems(filtered, query);\n if (filtered.length > 0) open();\n else open(); // show \"no results\"\n };\n\n const inputHandler = () => {\n clearTimeout(debounceTimer);\n debounceTimer = setTimeout(() => doSearch(input.value), 200);\n };\n\n const keyHandler = (e) => {\n if (!list.classList.contains('is-open')) {\n if (e.key === 'ArrowDown') { doSearch(input.value); e.preventDefault(); }\n return;\n }\n\n const total = currentItems.length;\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n highlight(highlighted < total - 1 ? highlighted + 1 : 0);\n break;\n case 'ArrowUp':\n e.preventDefault();\n highlight(highlighted > 0 ? highlighted - 1 : total - 1);\n break;\n case 'Enter':\n e.preventDefault();\n if (highlighted >= 0) selectItem(highlighted);\n break;\n case 'Escape':\n close();\n break;\n }\n };\n\n const blurHandler = () => {\n setTimeout(close, 200);\n };\n\n input.addEventListener('input', inputHandler);\n input.addEventListener('keydown', keyHandler);\n input.addEventListener('blur', blurHandler);\n input.addEventListener('focus', () => { if (input.value.length >= minChars) doSearch(input.value); });\n\n cleanup.push(\n () => input.removeEventListener('input', inputHandler),\n () => input.removeEventListener('keydown', keyHandler),\n () => input.removeEventListener('blur', blurHandler),\n () => clearTimeout(debounceTimer),\n () => { if (list.parentNode) list.parentNode.removeChild(list); }\n );\n\n this.instances.set(input, { cleanup, list, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('suggest', Suggest);\n }\n\n window.VanduoSuggest = Suggest;\n\n})();\n", "/**\n * Vanduo Framework - Validate (Form Validation) Component\n * Declarative validation via data attributes with real-time and on-submit modes\n */\n\n(function () {\n 'use strict';\n\n const Validate = {\n instances: new Map(),\n\n rules: {\n required: (value) => value.trim().length > 0,\n email: (value) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value),\n url: (value) => { try { new URL(value); return true; } catch (_e) { return false; } },\n number: (value) => !isNaN(parseFloat(value)) && isFinite(value),\n min: (value, param) => value.length >= parseInt(param, 10),\n max: (value, param) => value.length <= parseInt(param, 10),\n minVal: (value, param) => parseFloat(value) >= parseFloat(param),\n maxVal: (value, param) => parseFloat(value) <= parseFloat(param),\n pattern: (value, param) => {\n try {\n // Cap regex length to prevent ReDoS from excessively complex patterns\n if (param.length > 100) return false;\n return new RegExp(param).test(value);\n } catch (_e) { return false; }\n },\n match: (value, param) => {\n try {\n const escaped = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(param) : param;\n const other = document.querySelector('[name=\"' + escaped + '\"]');\n return other ? value === other.value : false;\n } catch (_e) {\n return false;\n }\n }\n },\n\n messages: {\n required: 'This field is required',\n email: 'Please enter a valid email address',\n url: 'Please enter a valid URL',\n number: 'Please enter a valid number',\n min: 'Minimum {0} characters required',\n max: 'Maximum {0} characters allowed',\n minVal: 'Value must be at least {0}',\n maxVal: 'Value must be at most {0}',\n pattern: 'Invalid format',\n match: 'Fields do not match'\n },\n\n init: function () {\n const forms = document.querySelectorAll('[data-vd-validate], .vd-validate');\n forms.forEach(form => {\n if (this.instances.has(form)) return;\n this.initInstance(form);\n });\n },\n\n initInstance: function (form) {\n const cleanup = [];\n const mode = form.getAttribute('data-vd-validate-mode') || 'blur'; // blur | input | submit\n const fields = form.querySelectorAll('[data-vd-rules]');\n\n const validateField = (field) => {\n const rulesStr = field.getAttribute('data-vd-rules') || '';\n const rules = rulesStr.split('|').map(r => r.trim()).filter(Boolean);\n const value = field.value;\n const errors = [];\n\n for (const rule of rules) {\n const [name, ...params] = rule.split(':');\n const param = params.join(':');\n const validator = this.rules[name];\n\n if (validator && !validator(value, param)) {\n const customMsg = field.getAttribute('data-vd-msg-' + name);\n let msg = customMsg || this.messages[name] || 'Invalid';\n if (param) msg = msg.replace('{0}', param);\n errors.push(msg);\n break; // one error at a time\n }\n }\n\n this.setFieldState(field, errors);\n return errors.length === 0;\n };\n\n const validateAll = () => {\n let valid = true;\n fields.forEach(field => {\n if (!validateField(field)) valid = false;\n });\n return valid;\n };\n\n // Per-field listeners\n fields.forEach(field => {\n if (mode === 'input' || mode === 'blur') {\n const eventType = mode === 'input' ? 'input' : 'blur';\n const handler = () => validateField(field);\n field.addEventListener(eventType, handler);\n cleanup.push(() => field.removeEventListener(eventType, handler));\n\n if (mode === 'blur') {\n const inputClear = () => {\n if (field.classList.contains('is-invalid') || field.classList.contains('is-valid')) {\n validateField(field);\n }\n };\n field.addEventListener('input', inputClear);\n cleanup.push(() => field.removeEventListener('input', inputClear));\n }\n }\n });\n\n // Form submit\n const submitHandler = (e) => {\n const valid = validateAll();\n if (!valid) {\n e.preventDefault();\n e.stopPropagation();\n // Focus first invalid field\n const firstInvalid = form.querySelector('.is-invalid');\n if (firstInvalid) firstInvalid.focus();\n }\n form.dispatchEvent(new CustomEvent('validate:submit', {\n detail: { valid },\n bubbles: true\n }));\n };\n\n form.addEventListener('submit', submitHandler);\n cleanup.push(() => form.removeEventListener('submit', submitHandler));\n\n this.instances.set(form, { cleanup, validateAll, validateField });\n },\n\n setFieldState: function (field, errors) {\n const wrapper = field.closest('.vd-form-group') || field.parentElement;\n let errorEl = wrapper.querySelector('.vd-validate-error');\n\n field.classList.remove('is-valid', 'is-invalid');\n\n if (errors.length > 0) {\n field.classList.add('is-invalid');\n field.setAttribute('aria-invalid', 'true');\n if (!errorEl) {\n errorEl = document.createElement('div');\n errorEl.className = 'vd-validate-error';\n errorEl.id = 'vd-err-' + Math.random().toString(36).slice(2, 9);\n errorEl.setAttribute('role', 'alert');\n wrapper.appendChild(errorEl);\n }\n errorEl.textContent = errors[0];\n errorEl.style.display = '';\n field.setAttribute('aria-describedby', errorEl.id);\n } else if (field.value.trim()) {\n field.classList.add('is-valid');\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n } else {\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n }\n },\n\n validateForm: function (form) {\n const instance = this.instances.get(form);\n return instance ? instance.validateAll() : false;\n },\n\n addRule: function (name, validator, message) {\n this.rules[name] = validator;\n if (message) this.messages[name] = message;\n },\n\n destroy: function (form) {\n const instance = this.instances.get(form);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(form);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, form) => this.destroy(form));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('validate', Validate);\n }\n\n window.VanduoValidate = Validate;\n\n})();\n", "/**\n * Vanduo Framework - Datepicker Component\n * Calendar popup attached to input field with month/year navigation\n */\n\n(function () {\n 'use strict';\n\n const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\n const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];\n\n const Datepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-datepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const format = input.getAttribute('data-vd-datepicker-format') || 'yyyy-mm-dd';\n const minStr = input.getAttribute('data-vd-datepicker-min');\n const maxStr = input.getAttribute('data-vd-datepicker-max');\n const minDate = minStr ? new Date(minStr) : null;\n const maxDate = maxStr ? new Date(maxStr) : null;\n\n const today = new Date();\n let viewYear = today.getFullYear();\n let viewMonth = today.getMonth();\n let selectedDate = null;\n let viewMode = 'days'; // days | months | years\n\n // Parse existing value\n if (input.value) {\n const parsed = new Date(input.value);\n if (!isNaN(parsed.getTime())) {\n selectedDate = parsed;\n viewYear = parsed.getFullYear();\n viewMonth = parsed.getMonth();\n }\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-datepicker-popup';\n popup.setAttribute('role', 'dialog');\n popup.setAttribute('aria-label', 'Choose date');\n\n const wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n wrapper.appendChild(popup);\n\n const formatDate = (d) => {\n const yyyy = d.getFullYear();\n const mm = String(d.getMonth() + 1).padStart(2, '0');\n const dd = String(d.getDate()).padStart(2, '0');\n return format.replace('yyyy', yyyy).replace('mm', mm).replace('dd', dd);\n };\n\n const isDisabled = (d) => {\n if (minDate && d < minDate) return true;\n if (maxDate && d > maxDate) return true;\n return false;\n };\n\n const isSameDay = (a, b) => a && b &&\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate();\n\n const render = () => {\n popup.innerHTML = '';\n\n // Header\n const header = document.createElement('div');\n header.className = 'vd-datepicker-header';\n\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-datepicker-prev';\n prevBtn.innerHTML = '‹';\n prevBtn.setAttribute('aria-label', 'Previous');\n\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-datepicker-next';\n nextBtn.innerHTML = '›';\n nextBtn.setAttribute('aria-label', 'Next');\n\n const title = document.createElement('span');\n title.className = 'vd-datepicker-title';\n\n if (viewMode === 'days') {\n title.textContent = MONTHS[viewMonth] + ' ' + viewYear;\n title.addEventListener('click', () => { viewMode = 'months'; render(); });\n prevBtn.addEventListener('click', () => { viewMonth--; if (viewMonth < 0) { viewMonth = 11; viewYear--; } render(); });\n nextBtn.addEventListener('click', () => { viewMonth++; if (viewMonth > 11) { viewMonth = 0; viewYear++; } render(); });\n } else if (viewMode === 'months') {\n title.textContent = String(viewYear);\n title.addEventListener('click', () => { viewMode = 'years'; render(); });\n prevBtn.addEventListener('click', () => { viewYear--; render(); });\n nextBtn.addEventListener('click', () => { viewYear++; render(); });\n } else {\n const decadeStart = Math.floor(viewYear / 10) * 10;\n title.textContent = decadeStart + ' - ' + (decadeStart + 9);\n prevBtn.addEventListener('click', () => { viewYear -= 10; render(); });\n nextBtn.addEventListener('click', () => { viewYear += 10; render(); });\n }\n\n header.appendChild(prevBtn);\n header.appendChild(title);\n header.appendChild(nextBtn);\n popup.appendChild(header);\n\n if (viewMode === 'days') {\n // Weekday headers\n const weekdays = document.createElement('div');\n weekdays.className = 'vd-datepicker-weekdays';\n DAYS.forEach(d => {\n const span = document.createElement('span');\n span.textContent = d;\n weekdays.appendChild(span);\n });\n popup.appendChild(weekdays);\n\n // Days grid\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-days';\n\n const firstDay = new Date(viewYear, viewMonth, 1).getDay();\n const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();\n const daysInPrev = new Date(viewYear, viewMonth, 0).getDate();\n\n // Previous month padding\n for (let i = firstDay - 1; i >= 0; i--) {\n const btn = createDayBtn(daysInPrev - i, true);\n grid.appendChild(btn);\n }\n\n // Current month\n for (let d = 1; d <= daysInMonth; d++) {\n const date = new Date(viewYear, viewMonth, d);\n const btn = createDayBtn(d, false, date);\n grid.appendChild(btn);\n }\n\n // Next month padding\n const totalCells = firstDay + daysInMonth;\n const remaining = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7);\n for (let i = 1; i <= remaining; i++) {\n const btn = createDayBtn(i, true);\n grid.appendChild(btn);\n }\n\n popup.appendChild(grid);\n } else if (viewMode === 'months') {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-months';\n MONTHS.forEach((name, i) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-month-btn';\n btn.textContent = name.slice(0, 3);\n if (selectedDate && selectedDate.getFullYear() === viewYear && selectedDate.getMonth() === i) {\n btn.classList.add('is-selected');\n }\n btn.addEventListener('click', () => { viewMonth = i; viewMode = 'days'; render(); });\n grid.appendChild(btn);\n });\n popup.appendChild(grid);\n } else {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-years';\n const decadeStart = Math.floor(viewYear / 10) * 10;\n for (let y = decadeStart - 1; y <= decadeStart + 10; y++) {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-year-btn';\n btn.textContent = y;\n if (selectedDate && selectedDate.getFullYear() === y) btn.classList.add('is-selected');\n if (y < decadeStart || y > decadeStart + 9) btn.style.opacity = '0.4';\n btn.addEventListener('click', () => { viewYear = y; viewMode = 'months'; render(); });\n grid.appendChild(btn);\n }\n popup.appendChild(grid);\n }\n };\n\n const createDayBtn = (day, outside, date) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-day';\n btn.textContent = day;\n\n if (outside) {\n btn.classList.add('is-outside');\n btn.tabIndex = -1;\n return btn;\n }\n\n if (date && isSameDay(date, today)) btn.classList.add('is-today');\n if (date && isSameDay(date, selectedDate)) btn.classList.add('is-selected');\n if (date && isDisabled(date)) {\n btn.classList.add('is-disabled');\n return btn;\n }\n\n if (date) {\n btn.addEventListener('click', () => {\n selectedDate = date;\n viewYear = date.getFullYear();\n viewMonth = date.getMonth();\n input.value = formatDate(date);\n close();\n input.dispatchEvent(new CustomEvent('datepicker:select', {\n detail: { date, formatted: input.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n }\n\n return btn;\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n viewMode = 'days';\n };\n\n // Events\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'dialog');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close, popup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('datepicker', Datepicker);\n }\n\n window.VanduoDatepicker = Datepicker;\n\n})();\n", "/**\n * Vanduo Framework - Timepicker Component\n * Dropdown time selection with 12h/24h format and configurable step intervals\n */\n\n(function () {\n 'use strict';\n\n const Timepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-timepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const is24h = input.getAttribute('data-vd-timepicker-format') === '24h';\n const step = parseInt(input.getAttribute('data-vd-timepicker-step') || '30', 10);\n\n // Create wrapper\n let wrapper = input.closest('.vd-suggest-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-timepicker-popup';\n popup.setAttribute('role', 'listbox');\n wrapper.appendChild(popup);\n\n // Generate time slots\n const times = [];\n for (let h = 0; h < 24; h++) {\n for (let m = 0; m < 60; m += step) {\n const hh24 = String(h).padStart(2, '0');\n const mm = String(m).padStart(2, '0');\n\n if (is24h) {\n times.push({ display: hh24 + ':' + mm, value: hh24 + ':' + mm });\n } else {\n const period = h < 12 ? 'AM' : 'PM';\n const h12 = h === 0 ? 12 : (h > 12 ? h - 12 : h);\n const display = h12 + ':' + mm + ' ' + period;\n times.push({ display, value: hh24 + ':' + mm });\n }\n }\n }\n\n const render = () => {\n popup.innerHTML = '';\n times.forEach(t => {\n const item = document.createElement('div');\n item.className = 'vd-timepicker-item';\n item.setAttribute('role', 'option');\n item.textContent = t.display;\n\n if (input.value === t.value || input.value === t.display) {\n item.classList.add('is-selected');\n }\n\n item.addEventListener('click', () => {\n input.value = t.display;\n popup.querySelectorAll('.vd-timepicker-item').forEach(i => i.classList.remove('is-selected'));\n item.classList.add('is-selected');\n close();\n input.dispatchEvent(new CustomEvent('timepicker:select', {\n detail: { display: t.display, value: t.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n\n popup.appendChild(item);\n });\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n // Scroll to selected\n const selected = popup.querySelector('.is-selected');\n if (selected) selected.scrollIntoView({ block: 'center' });\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n };\n\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'listbox');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n input.readOnly = true;\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('timepicker', Timepicker);\n }\n\n window.VanduoTimepicker = Timepicker;\n\n})();\n", "/**\n * Vanduo Framework - Stepper Component\n * Multi-step progress indicator with state management\n */\n\n(function () {\n 'use strict';\n\n const Stepper = {\n instances: new Map(),\n\n init: function () {\n const steppers = document.querySelectorAll('.vd-stepper');\n steppers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const items = Array.from(el.querySelectorAll('.vd-stepper-item'));\n const isClickable = el.classList.contains('vd-stepper-clickable');\n let currentIndex = items.findIndex(i => i.classList.contains('is-active'));\n if (currentIndex === -1) currentIndex = 0;\n\n const setStep = (index) => {\n if (index < 0 || index >= items.length) return;\n const prev = currentIndex;\n currentIndex = index;\n\n items.forEach((item, i) => {\n item.classList.remove('is-active', 'is-completed');\n if (i < index) item.classList.add('is-completed');\n else if (i === index) item.classList.add('is-active');\n });\n\n el.dispatchEvent(new CustomEvent('stepper:change', {\n detail: { current: index, previous: prev, total: items.length },\n bubbles: true\n }));\n };\n\n if (isClickable) {\n items.forEach((item, i) => {\n const handler = () => setStep(i);\n item.addEventListener('click', handler);\n cleanup.push(() => item.removeEventListener('click', handler));\n });\n }\n\n // Initialize current state\n setStep(currentIndex);\n\n this.instances.set(el, {\n cleanup,\n setStep,\n next: () => setStep(currentIndex + 1),\n prev: () => setStep(currentIndex - 1),\n getCurrent: () => currentIndex\n });\n },\n\n setStep: function (el, index) {\n const inst = this.instances.get(el);\n if (inst) inst.setStep(index);\n },\n\n next: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.next();\n },\n\n prev: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.prev();\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('stepper', Stepper);\n }\n\n window.VanduoStepper = Stepper;\n\n})();\n", "/**\n * Vanduo Framework - Rating Component\n * Star-based rating input with hover preview and read-only mode\n */\n\n(function () {\n 'use strict';\n\n const Rating = {\n instances: new Map(),\n\n init: function () {\n const ratings = document.querySelectorAll('[data-vd-rating]');\n ratings.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const max = parseInt(el.getAttribute('data-vd-rating-max') || '5', 10);\n const initialValue = parseFloat(el.getAttribute('data-vd-rating-value') || '0');\n const readonly = el.classList.contains('vd-rating-readonly') || el.hasAttribute('data-vd-rating-readonly');\n let currentValue = initialValue;\n\n el.classList.add('vd-rating');\n el.setAttribute('role', 'radiogroup');\n el.setAttribute('aria-label', el.getAttribute('aria-label') || 'Rating');\n\n // Clear existing stars\n el.innerHTML = '';\n\n // Create stars\n const stars = [];\n for (let i = 1; i <= max; i++) {\n const star = document.createElement('button');\n star.type = 'button';\n star.className = 'vd-rating-star';\n star.setAttribute('role', 'radio');\n star.setAttribute('aria-label', i + ' star' + (i > 1 ? 's' : ''));\n star.setAttribute('aria-checked', i <= currentValue ? 'true' : 'false');\n if (readonly) star.tabIndex = -1;\n stars.push(star);\n el.appendChild(star);\n }\n\n // Value display\n const valueDisplay = document.createElement('span');\n valueDisplay.className = 'vd-rating-value';\n valueDisplay.textContent = currentValue > 0 ? currentValue.toString() : '';\n el.appendChild(valueDisplay);\n\n const updateStars = (value) => {\n stars.forEach((star, i) => {\n star.classList.remove('is-active', 'is-half');\n const starNum = i + 1;\n if (starNum <= Math.floor(value)) {\n star.classList.add('is-active');\n } else if (starNum - 0.5 <= value) {\n star.classList.add('is-half');\n }\n star.setAttribute('aria-checked', starNum <= value ? 'true' : 'false');\n });\n valueDisplay.textContent = value > 0 ? value.toString() : '';\n };\n\n updateStars(currentValue);\n\n if (!readonly) {\n stars.forEach((star, i) => {\n const enterHandler = () => {\n stars.forEach((s, j) => {\n s.classList.toggle('is-hovered', j <= i);\n });\n };\n const leaveHandler = () => {\n stars.forEach(s => s.classList.remove('is-hovered'));\n };\n const clickHandler = () => {\n currentValue = i + 1;\n el.setAttribute('data-vd-rating-value', currentValue);\n updateStars(currentValue);\n el.dispatchEvent(new CustomEvent('rating:change', {\n detail: { value: currentValue, max },\n bubbles: true\n }));\n };\n\n star.addEventListener('mouseenter', enterHandler);\n star.addEventListener('mouseleave', leaveHandler);\n star.addEventListener('click', clickHandler);\n\n cleanup.push(\n () => star.removeEventListener('mouseenter', enterHandler),\n () => star.removeEventListener('mouseleave', leaveHandler),\n () => star.removeEventListener('click', clickHandler)\n );\n });\n\n // Keyboard\n const keyHandler = (e) => {\n if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n e.preventDefault();\n if (currentValue < max) {\n currentValue++;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n e.preventDefault();\n if (currentValue > 1) {\n currentValue--;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n }\n };\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n }\n\n this.instances.set(el, {\n cleanup,\n getValue: () => currentValue,\n setValue: (v) => { currentValue = v; updateStars(v); }\n });\n },\n\n getValue: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getValue() : 0;\n },\n\n setValue: function (el, value) {\n const inst = this.instances.get(el);\n if (inst) inst.setValue(value);\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('rating', Rating);\n }\n\n window.VanduoRating = Rating;\n\n})();\n", "/**\n * Vanduo Framework - Transfer (Dual-list) Component\n * Source-to-target list transfer with search, select-all, and move actions\n */\n\n(function () {\n 'use strict';\n\n const Transfer = {\n instances: new Map(),\n\n init: function () {\n const transfers = document.querySelectorAll('[data-vd-transfer]');\n transfers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n el.classList.add('vd-transfer');\n\n let sourceData, targetData;\n try {\n const raw = JSON.parse(el.getAttribute('data-vd-transfer') || '[]');\n sourceData = raw.map((item, i) => ({\n id: item.id || 'item-' + i,\n label: item.label || item.text || String(item),\n selected: false\n }));\n } catch (_e) {\n sourceData = [];\n }\n targetData = [];\n\n const sourceSelected = new Set();\n const targetSelected = new Set();\n\n const render = () => {\n el.innerHTML = '';\n\n // Source panel\n const sourcePanel = createPanel('Source', sourceData, sourceSelected, 'source');\n // Actions\n const actions = document.createElement('div');\n actions.className = 'vd-transfer-actions';\n\n const moveRightBtn = document.createElement('button');\n moveRightBtn.type = 'button';\n moveRightBtn.className = 'vd-transfer-btn';\n moveRightBtn.innerHTML = '›';\n moveRightBtn.setAttribute('aria-label', 'Move to target');\n moveRightBtn.disabled = sourceSelected.size === 0;\n moveRightBtn.addEventListener('click', () => moveRight());\n\n const moveLeftBtn = document.createElement('button');\n moveLeftBtn.type = 'button';\n moveLeftBtn.className = 'vd-transfer-btn';\n moveLeftBtn.innerHTML = '‹';\n moveLeftBtn.setAttribute('aria-label', 'Move to source');\n moveLeftBtn.disabled = targetSelected.size === 0;\n moveLeftBtn.addEventListener('click', () => moveLeft());\n\n actions.appendChild(moveRightBtn);\n actions.appendChild(moveLeftBtn);\n\n // Target panel\n const targetPanel = createPanel('Target', targetData, targetSelected, 'target');\n\n el.appendChild(sourcePanel);\n el.appendChild(actions);\n el.appendChild(targetPanel);\n };\n\n const createPanel = (title, data, selected, _side) => {\n const panel = document.createElement('div');\n panel.className = 'vd-transfer-panel';\n\n const header = document.createElement('div');\n header.className = 'vd-transfer-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const count = document.createElement('span');\n count.className = 'vd-transfer-count';\n count.textContent = selected.size + '/' + data.length;\n header.appendChild(titleSpan);\n header.appendChild(count);\n panel.appendChild(header);\n\n // Search\n const searchDiv = document.createElement('div');\n searchDiv.className = 'vd-transfer-search';\n const searchInput = document.createElement('input');\n searchInput.type = 'text';\n searchInput.placeholder = 'Search...';\n searchInput.setAttribute('aria-label', 'Search ' + title.toLowerCase());\n searchDiv.appendChild(searchInput);\n panel.appendChild(searchDiv);\n\n // List\n const list = document.createElement('ul');\n list.className = 'vd-transfer-list';\n list.setAttribute('role', 'listbox');\n\n const renderList = (filter) => {\n list.innerHTML = '';\n const filtered = filter ? data.filter(d => {\n const label = (d.label || d.text || String(d)).toLowerCase();\n return label.includes(filter.toLowerCase());\n }) : data;\n filtered.forEach(item => {\n const li = document.createElement('li');\n li.className = 'vd-transfer-item';\n li.setAttribute('role', 'option');\n if (selected.has(item.id)) li.classList.add('is-selected');\n\n const checkbox = document.createElement('input');\n checkbox.type = 'checkbox';\n checkbox.checked = selected.has(item.id);\n checkbox.setAttribute('aria-label', item.label);\n\n const label = document.createElement('span');\n label.textContent = item.label;\n\n li.addEventListener('click', () => {\n if (selected.has(item.id)) selected.delete(item.id);\n else selected.add(item.id);\n render();\n });\n\n li.appendChild(checkbox);\n li.appendChild(label);\n list.appendChild(li);\n });\n };\n\n searchInput.addEventListener('input', () => renderList(searchInput.value));\n renderList('');\n\n panel.appendChild(list);\n return panel;\n };\n\n const moveRight = () => {\n const toMove = sourceData.filter(d => sourceSelected.has(d.id));\n sourceData = sourceData.filter(d => !sourceSelected.has(d.id));\n targetData = targetData.concat(toMove);\n sourceSelected.clear();\n render();\n fireChange();\n };\n\n const moveLeft = () => {\n const toMove = targetData.filter(d => targetSelected.has(d.id));\n targetData = targetData.filter(d => !targetSelected.has(d.id));\n sourceData = sourceData.concat(toMove);\n targetSelected.clear();\n render();\n fireChange();\n };\n\n const fireChange = () => {\n el.dispatchEvent(new CustomEvent('transfer:change', {\n detail: {\n source: sourceData.map(d => d.id),\n target: targetData.map(d => d.id)\n },\n bubbles: true\n }));\n };\n\n render();\n\n this.instances.set(el, {\n cleanup,\n getTarget: () => targetData.map(d => d.id),\n getSource: () => sourceData.map(d => d.id)\n });\n },\n\n getSelected: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getTarget() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('transfer', Transfer);\n }\n\n window.VanduoTransfer = Transfer;\n\n})();\n", "/**\n * Vanduo Framework - Tree View Component\n * Hierarchical collapsible tree with checkbox selection and keyboard navigation\n */\n\n(function () {\n 'use strict';\n\n const Tree = {\n instances: new Map(),\n\n init: function () {\n const trees = document.querySelectorAll('[data-vd-tree]');\n trees.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const cascade = el.getAttribute('data-vd-tree-cascade') !== 'false';\n\n let data;\n try { data = JSON.parse(el.getAttribute('data-vd-tree') || '[]'); } catch (_e) { data = []; }\n\n el.classList.add('vd-tree');\n el.setAttribute('role', 'tree');\n\n const render = (items, parent) => {\n parent.innerHTML = '';\n items.forEach(item => {\n const node = document.createElement('li');\n node.className = 'vd-tree-node';\n node.setAttribute('role', 'treeitem');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n if (item.open) node.classList.add('is-open');\n\n const content = document.createElement('div');\n content.className = 'vd-tree-node-content';\n\n // Toggle\n if (item.children && item.children.length > 0) {\n const toggle = document.createElement('button');\n toggle.type = 'button';\n toggle.className = 'vd-tree-toggle';\n toggle.setAttribute('aria-label', 'Toggle');\n toggle.addEventListener('click', (e) => {\n e.stopPropagation();\n item.open = !item.open;\n node.classList.toggle('is-open');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n });\n content.appendChild(toggle);\n } else {\n const ph = document.createElement('span');\n ph.className = 'vd-tree-toggle-placeholder';\n content.appendChild(ph);\n }\n\n // Checkbox\n if (el.hasAttribute('data-vd-tree-checkbox')) {\n const cb = document.createElement('input');\n cb.type = 'checkbox';\n cb.className = 'vd-tree-checkbox';\n cb.checked = !!item.checked;\n cb.setAttribute('aria-label', item.label);\n cb.addEventListener('change', (e) => {\n e.stopPropagation();\n item.checked = cb.checked;\n if (cascade && item.children) {\n setChildChecked(item.children, cb.checked);\n render(data, el);\n }\n el.dispatchEvent(new CustomEvent('tree:check', {\n detail: { id: item.id, checked: cb.checked, label: item.label },\n bubbles: true\n }));\n });\n content.appendChild(cb);\n }\n\n // Icon\n if (item.icon) {\n const icon = document.createElement('span');\n icon.className = 'vd-tree-icon ' + item.icon;\n content.appendChild(icon);\n }\n\n // Label\n const label = document.createElement('span');\n label.className = 'vd-tree-label';\n label.textContent = item.label || '';\n content.appendChild(label);\n\n node.appendChild(content);\n\n // Children\n if (item.children && item.children.length > 0) {\n const childList = document.createElement('ul');\n childList.className = 'vd-tree-children';\n childList.setAttribute('role', 'group');\n render(item.children, childList);\n node.appendChild(childList);\n }\n\n parent.appendChild(node);\n });\n };\n\n const setChildChecked = (items, checked) => {\n items.forEach(item => {\n item.checked = checked;\n if (item.children) setChildChecked(item.children, checked);\n });\n };\n\n // Keyboard\n const keyHandler = (e) => {\n const focused = document.activeElement;\n if (!el.contains(focused)) return;\n\n const nodes = Array.from(el.querySelectorAll('.vd-tree-node-content'));\n const idx = nodes.indexOf(focused.closest('.vd-tree-node-content'));\n if (idx === -1) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (idx < nodes.length - 1) {\n const next = nodes[idx + 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (next) next.focus();\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (idx > 0) {\n const prev = nodes[idx - 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (prev) prev.focus();\n }\n break;\n }\n };\n\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n render(data, el);\n\n this.instances.set(el, {\n cleanup,\n getData: () => data,\n getChecked: () => {\n const checked = [];\n const collect = (items) => {\n items.forEach(i => {\n if (i.checked) checked.push(i.id || i.label);\n if (i.children) collect(i.children);\n });\n };\n collect(data);\n return checked;\n }\n });\n },\n\n getChecked: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getChecked() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tree', Tree);\n }\n\n window.VanduoTree = Tree;\n\n})();\n", "/**\n * Vanduo Framework - Spotlight (Feature Discovery) Component\n * Guided tour with overlay highlight and step-through tooltip\n */\n\n(function () {\n 'use strict';\n\n const Spotlight = {\n _active: false,\n _steps: [],\n _currentStep: 0,\n _elements: {},\n _cleanup: [],\n _boundTriggers: new WeakMap(),\n _triggerElement: null,\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-spotlight]');\n\n triggers.forEach(trigger => {\n if (this._boundTriggers.has(trigger)) return;\n\n const clickHandler = (event) => {\n event.preventDefault();\n\n const steps = this._parseSteps(trigger.getAttribute('data-vd-spotlight'));\n if (steps.length === 0) return;\n\n this.start(steps, { trigger });\n };\n\n trigger.addEventListener('click', clickHandler);\n this._boundTriggers.set(trigger, clickHandler);\n });\n },\n\n _parseSteps: function (raw) {\n if (typeof raw !== 'string' || raw.trim() === '') return [];\n\n try {\n const parsed = JSON.parse(raw);\n return this._normalizeSteps(parsed);\n } catch (error) {\n console.error('VanduoSpotlight: invalid data-vd-spotlight payload.', error);\n return [];\n }\n },\n\n _normalizeStep: function (step) {\n if (!step || typeof step !== 'object') return null;\n\n const target = step.target;\n const hasSelectorTarget = typeof target === 'string' && target.trim() !== '';\n const hasElementTarget = typeof Element !== 'undefined' && target instanceof Element;\n\n if (!hasSelectorTarget && !hasElementTarget) return null;\n\n const title = typeof step.title === 'string' ? step.title : '';\n const description = typeof step.description === 'string'\n ? step.description\n : (typeof step.content === 'string' ? step.content : '');\n\n return {\n target,\n title,\n description\n };\n },\n\n _normalizeSteps: function (steps) {\n if (!Array.isArray(steps)) return [];\n\n return steps\n .map(step => this._normalizeStep(step))\n .filter(Boolean);\n },\n\n start: function (steps, options) {\n if (this._active) this.stop();\n\n const normalizedSteps = this._normalizeSteps(steps);\n if (normalizedSteps.length === 0) return;\n\n const startOptions = options || {};\n\n this._steps = normalizedSteps;\n this._currentStep = 0;\n this._active = true;\n this._triggerElement = startOptions.trigger || (document.activeElement instanceof HTMLElement ? document.activeElement : null);\n\n // Create overlay\n const overlay = document.createElement('div');\n overlay.className = 'vd-spotlight-overlay';\n overlay.setAttribute('aria-hidden', 'true');\n document.body.appendChild(overlay);\n\n // Create tooltip\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-spotlight-tooltip';\n tooltip.setAttribute('role', 'dialog');\n tooltip.setAttribute('aria-modal', 'true');\n tooltip.tabIndex = -1;\n document.body.appendChild(tooltip);\n\n this._elements = { overlay, tooltip };\n\n // ESC to close\n const escHandler = (e) => { if (e.key === 'Escape') this.stop(); };\n document.addEventListener('keydown', escHandler);\n this._cleanup.push(() => document.removeEventListener('keydown', escHandler));\n\n // Overlay click to close\n overlay.addEventListener('click', () => this.stop());\n\n this._showStep(this._currentStep);\n },\n\n _showStep: function (index) {\n const step = this._steps[index];\n if (!step) return;\n\n const target = typeof step.target === 'string' ? document.querySelector(step.target) : step.target;\n const { tooltip } = this._elements;\n\n // Remove previous highlight\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n // Highlight target\n if (target) {\n target.classList.add('vd-spotlight-target');\n target.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n\n // Build tooltip content\n const total = this._steps.length;\n tooltip.innerHTML = '';\n tooltip.removeAttribute('aria-labelledby');\n tooltip.removeAttribute('aria-describedby');\n\n if (step.title) {\n const title = document.createElement('h4');\n title.className = 'vd-spotlight-title';\n title.id = 'vd-spotlight-title-' + index + '-' + Date.now();\n title.textContent = step.title;\n tooltip.appendChild(title);\n tooltip.setAttribute('aria-labelledby', title.id);\n }\n\n if (step.description) {\n const desc = document.createElement('p');\n desc.className = 'vd-spotlight-description';\n desc.id = 'vd-spotlight-description-' + index + '-' + Date.now();\n desc.textContent = step.description;\n tooltip.appendChild(desc);\n tooltip.setAttribute('aria-describedby', desc.id);\n }\n\n // Footer\n const footer = document.createElement('div');\n footer.className = 'vd-spotlight-footer';\n footer.setAttribute('aria-label', 'Step ' + (index + 1) + ' of ' + total);\n\n const counter = document.createElement('span');\n counter.className = 'vd-spotlight-counter';\n counter.textContent = (index + 1) + ' / ' + total;\n\n const actions = document.createElement('div');\n actions.className = 'vd-spotlight-actions';\n\n if (index > 0) {\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-spotlight-btn';\n prevBtn.textContent = 'Back';\n prevBtn.addEventListener('click', () => this.prev());\n actions.appendChild(prevBtn);\n }\n\n const skipBtn = document.createElement('button');\n skipBtn.type = 'button';\n skipBtn.className = 'vd-spotlight-btn';\n skipBtn.textContent = 'Skip';\n skipBtn.addEventListener('click', () => this.stop());\n actions.appendChild(skipBtn);\n\n if (index < total - 1) {\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n nextBtn.textContent = 'Next';\n nextBtn.addEventListener('click', () => this.next());\n actions.appendChild(nextBtn);\n } else {\n const doneBtn = document.createElement('button');\n doneBtn.type = 'button';\n doneBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n doneBtn.textContent = 'Done';\n doneBtn.addEventListener('click', () => this.stop());\n actions.appendChild(doneBtn);\n }\n\n footer.appendChild(counter);\n footer.appendChild(actions);\n tooltip.appendChild(footer);\n\n // Position tooltip near target\n if (target) {\n requestAnimationFrame(() => {\n const rect = target.getBoundingClientRect();\n const tRect = tooltip.getBoundingClientRect();\n let top = rect.bottom + 12 + window.scrollY;\n let left = rect.left + (rect.width - tRect.width) / 2 + window.scrollX;\n\n // Keep in viewport\n left = Math.max(8, Math.min(left, window.innerWidth - tRect.width - 8));\n if (top + tRect.height > window.innerHeight + window.scrollY) {\n top = rect.top - tRect.height - 12 + window.scrollY;\n }\n\n tooltip.style.top = top + 'px';\n tooltip.style.left = left + 'px';\n });\n }\n\n document.dispatchEvent(new CustomEvent('spotlight:step', {\n detail: { index, step: index, total, data: step }\n }));\n },\n\n next: function () {\n if (this._currentStep < this._steps.length - 1) {\n this._currentStep++;\n this._showStep(this._currentStep);\n }\n },\n\n prev: function () {\n if (this._currentStep > 0) {\n this._currentStep--;\n this._showStep(this._currentStep);\n }\n },\n\n stop: function () {\n if (!this._active) return;\n\n const total = this._steps.length;\n const detail = {\n completedSteps: total === 0 ? 0 : Math.min(this._currentStep + 1, total),\n total,\n completed: total > 0 && this._currentStep >= total - 1\n };\n\n this._active = false;\n\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n if (this._elements.overlay && this._elements.overlay.parentNode) {\n this._elements.overlay.parentNode.removeChild(this._elements.overlay);\n }\n if (this._elements.tooltip && this._elements.tooltip.parentNode) {\n this._elements.tooltip.parentNode.removeChild(this._elements.tooltip);\n }\n\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n this._elements = {};\n this._steps = [];\n this._currentStep = 0;\n\n if (this._triggerElement && this._triggerElement.isConnected && typeof this._triggerElement.focus === 'function') {\n this._triggerElement.focus();\n }\n this._triggerElement = null;\n\n document.dispatchEvent(new CustomEvent('spotlight:end', { detail }));\n },\n\n destroyAll: function () {\n this.stop();\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('spotlight', Spotlight);\n }\n\n window.VanduoSpotlight = Spotlight;\n\n})();\n", "/**\n * Vanduo Framework - Music Player Component\n * HTML5 Audio-based music player with transport controls, volume,\n * and optional shuffle, seek bar, and playlist features.\n *\n * Options (passed to MusicPlayer.init or data-music-player-options):\n * tracks {Array} - [{name, url}] \u2014 required\n * volume {number} - Initial volume 0\u20131 (default 0.5)\n * shuffle {boolean} - Shuffle on init (default false)\n * showProgress {boolean} - Show seek/progress bar (default false)\n * showPlaylist {boolean} - Show expandable playlist panel (default false)\n * autoAdvance {boolean} - Auto-play next track on end (default true)\n *\n * Custom events (all bubble, dispatched on container):\n * musicplayer:play \u2014 playback started\n * musicplayer:pause \u2014 playback paused\n * musicplayer:trackchange \u2014 detail: { index, name, url }\n * musicplayer:volumechange \u2014 detail: { volume }\n * musicplayer:ended \u2014 last track ended (autoAdvance=false only)\n *\n * Programmatic API:\n * MusicPlayer.init(container?, options?)\n * MusicPlayer.play(container)\n * MusicPlayer.pause(container)\n * MusicPlayer.toggle(container)\n * MusicPlayer.next(container)\n * MusicPlayer.previous(container)\n * MusicPlayer.setVolume(container, value)\n * MusicPlayer.setTrack(container, index)\n * MusicPlayer.shuffle(container)\n * MusicPlayer.getState(container)\n * MusicPlayer.destroy(container)\n * MusicPlayer.destroyAll()\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fisher-Yates shuffle (returns new array).\n * @param {Array} arr\n * @returns {Array}\n */\n function shuffleArray(arr) {\n const shuffled = arr.slice();\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n const tmp = shuffled[i];\n shuffled[i] = shuffled[j];\n shuffled[j] = tmp;\n }\n return shuffled;\n }\n\n /**\n * Format seconds as m:ss.\n * @param {number} seconds\n * @returns {string}\n */\n function formatTime(seconds) {\n if (!isFinite(seconds) || seconds < 0) return '0:00';\n const m = Math.floor(seconds / 60);\n const s = Math.floor(seconds % 60);\n return m + ':' + (s < 10 ? '0' : '') + s;\n }\n\n /**\n * Set CSS background-size on a range input to visually fill the track.\n * @param {HTMLInputElement} input\n */\n function updateRangeFill(input) {\n const min = parseFloat(input.min) || 0;\n const max = parseFloat(input.max) || 1;\n const val = parseFloat(input.value) || 0;\n const pct = ((val - min) / (max - min)) * 100;\n input.style.setProperty('--fill', pct + '%');\n // Fallback inline gradient for browsers without ::-moz-range-progress\n input.style.backgroundImage =\n 'linear-gradient(to right, var(--music-player-track-fill, currentColor) 0%, ' +\n 'var(--music-player-track-fill, currentColor) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) 100%)';\n }\n\n /* \u2500\u2500\u2500 Phosphor icon helper (matches framework icon style) \u2500 */\n\n /**\n * Return an element (Phosphor icon).\n * @param {string} name\n * @returns {HTMLElement}\n */\n function icon(name) {\n const el = document.createElement('i');\n el.className = 'ph ph-' + name;\n el.setAttribute('aria-hidden', 'true');\n return el;\n }\n\n /* \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const MusicPlayer = {\n /** @type {Map} */\n instances: new Map(),\n\n /**\n * Default options.\n */\n defaults: {\n tracks: [],\n volume: 0.5,\n shuffle: false,\n showProgress: false,\n showPlaylist: false,\n autoAdvance: true,\n },\n\n /**\n * Auto-initialize all .vd-music-player / [data-music-player] elements.\n * Options can be provided via data-music-player-options (JSON string).\n */\n init: function () {\n document.querySelectorAll('.vd-music-player, [data-music-player]').forEach((el) => {\n if (this.instances.has(el)) return;\n\n let opts = {};\n const attr = el.getAttribute('data-music-player-options');\n if (attr) {\n try { opts = JSON.parse(attr); } catch (_) { /* ignore malformed JSON */ }\n }\n this.initPlayer(el, opts);\n });\n },\n\n /**\n * Initialize a single player element.\n * @param {HTMLElement} container\n * @param {Object} [options]\n */\n initPlayer: function (container, options) {\n const opts = Object.assign({}, this.defaults, options || {});\n\n // Validate and normalise tracks\n const rawTracks = Array.isArray(opts.tracks) ? opts.tracks : [];\n const tracks = rawTracks.filter((t) => t && typeof t.url === 'string' && t.url.trim());\n\n // Build shuffled working copy without mutating opts\n const trackList = opts.shuffle ? shuffleArray(tracks) : tracks.slice();\n\n /* \u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const state = {\n tracks: trackList,\n originalTracks: tracks.slice(),\n currentIndex: 0,\n isPlaying: false,\n volume: Math.max(0, Math.min(1, opts.volume)),\n shuffle: opts.shuffle,\n showProgress: opts.showProgress,\n showPlaylist: opts.showPlaylist,\n autoAdvance: opts.autoAdvance,\n audio: null,\n };\n\n /* \u2500\u2500 Audio element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const audio = new Audio();\n audio.volume = state.volume;\n audio.preload = 'metadata';\n state.audio = audio;\n\n /* \u2500\u2500 Build DOM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n this._buildDOM(container, state);\n\n // Grab references after DOM build\n const refs = {\n btnPlay: container.querySelector('.vd-music-player-btn-play'),\n btnPrev: container.querySelector('.vd-music-player-btn-prev'),\n btnNext: container.querySelector('.vd-music-player-btn-next'),\n btnShuffle: container.querySelector('.vd-music-player-btn-shuffle'),\n btnPlaylist: container.querySelector('.vd-music-player-btn-playlist'),\n trackName: container.querySelector('.vd-music-player-track-name'),\n volumeSlider: container.querySelector('.vd-music-player-volume-slider'),\n volumeIcon: container.querySelector('.vd-music-player-volume-icon'),\n progressBar: container.querySelector('.vd-music-player-progress-bar'),\n timeElapsed: container.querySelector('.vd-music-player-time-elapsed'),\n timeDuration: container.querySelector('.vd-music-player-time-duration'),\n playlistPanel: container.querySelector('.vd-music-player-playlist'),\n };\n\n /* \u2500\u2500 Internal render helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const renderPlayIcon = () => {\n const btn = refs.btnPlay;\n if (!btn) return;\n btn.innerHTML = '';\n btn.appendChild(icon(state.isPlaying ? 'pause' : 'play'));\n btn.setAttribute('aria-label', state.isPlaying ? 'Pause' : 'Play');\n btn.classList.toggle('is-active', state.isPlaying);\n };\n\n const renderTrackName = () => {\n const el = refs.trackName;\n if (!el) return;\n const track = state.tracks[state.currentIndex];\n if (track) {\n el.textContent = track.name || 'Unknown Track';\n el.classList.remove('is-idle');\n } else {\n el.textContent = 'No tracks loaded';\n el.classList.add('is-idle');\n }\n };\n\n const renderVolumeIcon = () => {\n const el = refs.volumeIcon;\n if (!el) return;\n el.innerHTML = '';\n const v = state.volume;\n const name = v === 0 ? 'speaker-none' : v < 0.5 ? 'speaker-low' : 'speaker-high';\n el.appendChild(icon(name));\n };\n\n const renderShuffleBtn = () => {\n const btn = refs.btnShuffle;\n if (!btn) return;\n btn.classList.toggle('is-active', state.shuffle);\n btn.setAttribute('aria-pressed', state.shuffle ? 'true' : 'false');\n };\n\n const renderPlaylistItems = () => {\n const panel = refs.playlistPanel;\n if (!panel) return;\n panel.innerHTML = '';\n state.tracks.forEach((track, i) => {\n const item = document.createElement('button');\n item.className =\n 'vd-music-player-playlist-item' + (i === state.currentIndex ? ' is-active' : '');\n item.type = 'button';\n item.setAttribute('data-index', String(i));\n item.setAttribute('aria-current', i === state.currentIndex ? 'true' : 'false');\n\n const num = document.createElement('span');\n num.className = 'vd-music-player-playlist-num';\n num.textContent = String(i + 1);\n\n const name = document.createElement('span');\n name.className = 'vd-music-player-playlist-name';\n name.textContent = track.name || 'Track ' + (i + 1);\n\n item.appendChild(num);\n item.appendChild(name);\n panel.appendChild(item);\n });\n };\n\n const renderProgress = () => {\n const bar = refs.progressBar;\n if (!bar || !audio.duration) return;\n const pct = (audio.currentTime / audio.duration) * 100;\n bar.value = String(pct);\n updateRangeFill(bar);\n if (refs.timeElapsed) refs.timeElapsed.textContent = formatTime(audio.currentTime);\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n };\n\n /* \u2500\u2500 Load track \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const loadTrack = (index, autoPlay) => {\n const track = state.tracks[index];\n if (!track) return;\n state.currentIndex = index;\n audio.src = track.url;\n renderTrackName();\n renderPlaylistItems();\n\n // Reset progress\n if (refs.progressBar) {\n refs.progressBar.value = '0';\n updateRangeFill(refs.progressBar);\n }\n if (refs.timeElapsed) refs.timeElapsed.textContent = '0:00';\n if (refs.timeDuration) refs.timeDuration.textContent = '0:00';\n\n container.dispatchEvent(\n new CustomEvent('musicplayer:trackchange', {\n bubbles: true,\n detail: { index, name: track.name, url: track.url },\n })\n );\n\n if (autoPlay) {\n audio.play().catch(() => { /* browser may block autoplay */ });\n }\n };\n\n /* \u2500\u2500 Audio event listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const cleanupFunctions = [];\n\n const onPlay = () => {\n state.isPlaying = true;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:play', { bubbles: true }));\n };\n\n const onPause = () => {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:pause', { bubbles: true }));\n };\n\n const onEnded = () => {\n if (state.autoAdvance && state.tracks.length > 1) {\n const next = (state.currentIndex + 1) % state.tracks.length;\n loadTrack(next, true);\n } else {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:ended', { bubbles: true }));\n }\n };\n\n const onTimeUpdate = () => {\n if (state.showProgress) renderProgress();\n };\n\n const onLoadedMetadata = () => {\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n if (refs.progressBar) {\n refs.progressBar.max = '100';\n updateRangeFill(refs.progressBar);\n }\n };\n\n audio.addEventListener('play', onPlay);\n audio.addEventListener('pause', onPause);\n audio.addEventListener('ended', onEnded);\n audio.addEventListener('timeupdate', onTimeUpdate);\n audio.addEventListener('loadedmetadata', onLoadedMetadata);\n cleanupFunctions.push(() => {\n audio.removeEventListener('play', onPlay);\n audio.removeEventListener('pause', onPause);\n audio.removeEventListener('ended', onEnded);\n audio.removeEventListener('timeupdate', onTimeUpdate);\n audio.removeEventListener('loadedmetadata', onLoadedMetadata);\n audio.pause();\n audio.src = '';\n });\n\n /* \u2500\u2500 Control button listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n if (refs.btnPlay) {\n const handler = () => {\n if (!audio.src && state.tracks.length) loadTrack(state.currentIndex, false);\n if (state.isPlaying) {\n audio.pause();\n } else {\n audio.play().catch(() => {});\n }\n };\n refs.btnPlay.addEventListener('click', handler);\n cleanupFunctions.push(() => refs.btnPlay.removeEventListener('click', handler));\n\n // Keyboard: Space / Enter (already native for `;\n }\n\n // Generate neutral color swatches\n let neutralSwatches = '';\n for (const [key, value] of Object.entries(this.NEUTRAL_COLORS)) {\n neutralSwatches += ``;\n }\n\n // Generate radius buttons\n let radiusButtons = '';\n this.RADIUS_OPTIONS.forEach(r => {\n radiusButtons += ``;\n });\n\n // Generate font options\n let fontOptions = '';\n for (const [key, value] of Object.entries(this.FONT_OPTIONS)) {\n fontOptions += ``;\n }\n\n return `\n
    \n

    Customize Theme

    \n \n
    \n
    \n\n
    \n \n
    \n ${primarySwatches}\n
    \n
    \n
    \n \n
    \n ${neutralSwatches}\n
    \n
    \n
    \n \n
    \n ${radiusButtons}\n
    \n
    \n
    \n \n \n
    \n
    \n
    \n \n
    \n `;\n },\n\n /**\n * Bind event listeners\n */\n /**\n * Check whether the current primary color is one of the auto-defaults\n * (i.e. the user hasn't explicitly picked a non-default color).\n */\n isUsingDefaultPrimary: function () {\n return this.state.primary === this.DEFAULTS.PRIMARY_LIGHT ||\n this.state.primary === this.DEFAULTS.PRIMARY_DARK;\n },\n\n /**\n * When primary is still one of the auto-default palette keys (black/amber) but\n * localStorage was written under a different theme (or OS changed in system mode),\n * align in-memory state before applyAllPreferences runs \u2014 avoids amber+light / black+dark drift.\n */\n _normalizeDefaultPrimaryIfStaleWithStoredTheme: function () {\n if (!this.isUsingDefaultPrimary()) {\n return;\n }\n const expected = this.getDefaultPrimary(this.state.theme);\n if (this.state.primary !== expected) {\n this.state.primary = expected;\n }\n },\n\n bindEvents: function () {\n // Trigger click - bind to any trigger button\n if (this.elements.trigger) {\n this.addListener(this.elements.trigger, 'click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggle();\n });\n }\n\n this.bindPanelEvents();\n\n // Listen for OS dark/light changes so we can swap the default primary\n if (window.matchMedia) {\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const handler = () => {\n if (this.state.theme === 'system' && this.isUsingDefaultPrimary()) {\n const newDefault = this.getDefaultPrimary('system');\n if (newDefault !== this.state.primary) {\n this.applyPrimary(newDefault);\n this.updateUI();\n }\n }\n };\n mq.addEventListener('change', handler);\n this._cleanup.push(() => mq.removeEventListener('change', handler));\n }\n\n // Close on outside click\n this.addListener(document, 'click', (e) => {\n if (this.state.isOpen && this.elements.customizer && !this.elements.customizer.contains(e.target)) {\n this.close();\n }\n });\n\n // Close on Escape key\n this.addListener(document, 'keydown', (e) => {\n if (e.key === 'Escape' && this.state.isOpen) {\n this.close();\n }\n });\n },\n\n /**\n * Toggle panel open/close\n */\n toggle: function () {\n if (this.state.isOpen) {\n this.close();\n } else {\n this.open();\n }\n },\n\n /**\n * Open the panel\n */\n open: function () {\n this.state.isOpen = true;\n\n // Ensure panel is positioned correctly before opening\n this.positionPanel();\n\n if (this.elements.panel) {\n this.elements.panel.classList.add('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'true');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.add('is-active');\n }\n\n this.dispatchEvent('panel-open', { isOpen: true });\n },\n\n /**\n * Close the panel\n */\n close: function () {\n this.state.isOpen = false;\n\n if (this.elements.panel) {\n this.elements.panel.classList.remove('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'false');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.remove('is-active');\n }\n\n this.dispatchEvent('panel-close', { isOpen: false });\n },\n\n /**\n * Update UI to reflect current state\n */\n updateUI: function () {\n if (!this.elements.panel) return;\n\n // Update primary color swatches\n this.elements.panel.querySelectorAll('[data-color]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.color === this.state.primary);\n });\n\n // Update neutral color swatches\n this.elements.panel.querySelectorAll('[data-neutral]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.neutral === this.state.neutral);\n });\n\n // Update radius buttons\n this.elements.panel.querySelectorAll('[data-radius]').forEach(btn => {\n btn.classList.toggle('is-active', btn.dataset.radius === this.state.radius);\n });\n\n // Update font selector\n const fontSelect = this.elements.panel.querySelector('[data-customizer-font]');\n if (fontSelect) {\n fontSelect.value = this.state.font;\n }\n\n },\n\n /**\n * Reset all preferences to defaults\n */\n reset: function () {\n this.applyTheme(this.DEFAULTS.THEME);\n this.applyPrimary(this.getDefaultPrimary(this.DEFAULTS.THEME));\n this.applyNeutral(this.DEFAULTS.NEUTRAL);\n this.applyRadius(this.DEFAULTS.RADIUS);\n this.applyFont(this.DEFAULTS.FONT);\n this.updateUI();\n\n this.dispatchEvent('reset', { state: { ...this.state } });\n },\n\n /**\n * Get current state\n */\n getState: function () {\n return { ...this.state };\n },\n\n /**\n * Programmatically set preferences\n */\n setPreferences: function (prefs) {\n if (prefs.primary) this.applyPrimary(prefs.primary);\n if (prefs.neutral) this.applyNeutral(prefs.neutral);\n if (prefs.radius) this.applyRadius(prefs.radius);\n if (prefs.font) this.applyFont(prefs.font);\n if (prefs.theme) this.applyTheme(prefs.theme);\n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n destroyAll: function () {\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n\n if (this.elements.panel) {\n this.elements.panel.removeAttribute('data-customizer-initialized');\n }\n\n this.close();\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeCustomizer', ThemeCustomizer);\n }\n\n // Expose globally for convenience\n window.ThemeCustomizer = ThemeCustomizer;\n})();\n", "/**\n * Vanduo Framework - Theme Switcher\n * Handles light/dark/system theme toggling and persistence\n */\n\n(function () {\n 'use strict';\n\n const ThemeSwitcher = {\n isInitialized: false,\n _mediaQuery: null,\n _onMediaChange: null,\n\n init: function () {\n this.STORAGE_KEY = 'vanduo-theme-preference';\n this.state = {\n preference: this.getPreference() // 'light', 'dark', or 'system'\n };\n\n if (this.isInitialized) {\n this.applyTheme();\n this.renderUI();\n this.updateUI();\n return;\n }\n\n this.isInitialized = true;\n\n this.applyTheme();\n this.listenForSystemChanges();\n this.renderUI();\n\n console.log('Vanduo Theme Switcher initialized');\n },\n\n getPreference: function () {\n return this.getStorageValue(this.STORAGE_KEY, 'system');\n },\n\n setPreference: function (pref) {\n this.state.preference = pref;\n this.setStorageValue(this.STORAGE_KEY, pref);\n this.applyTheme();\n \n // Coordinate with ThemeCustomizer for primary color swap if available\n // Check _isApplying flag to prevent circular updates\n if (window.ThemeCustomizer && window.ThemeCustomizer.applyTheme && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme(pref);\n }\n \n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n applyTheme: function () {\n const pref = this.state.preference;\n\n if (pref === 'system') {\n // When in system mode, we remove the data attribute to let the media query take over\n // or we can explicitly set it. Explicitly setting it ensures consistency if we rely on [data-theme]\n // But if we rely on @media in CSS, we might want to remove attributes.\n // However, our CSS strategy uses :root:not([data-theme=\"light\"]) inside media query for system dark fallback\n // which is a bit complex.\n\n // Simpler approach: \n // If preference is system, REMOVE data-theme attribute. Let CSS media queries handle it.\n document.documentElement.removeAttribute('data-theme');\n } else {\n document.documentElement.setAttribute('data-theme', pref);\n }\n },\n\n listenForSystemChanges: function () {\n if (this._mediaQuery && this._onMediaChange) {\n return;\n }\n\n this._mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n this._onMediaChange = _e => {\n if (this.state.preference === 'system') {\n // Re-apply (effectively just to ensure consistency, though removing attribute usually suffices)\n this.applyTheme();\n // Keep default primary (black/amber) aligned when OS scheme changes while in system mode\n if (window.ThemeCustomizer && typeof window.ThemeCustomizer.applyTheme === 'function' && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme('system');\n }\n }\n };\n this._mediaQuery.addEventListener('change', this._onMediaChange);\n },\n\n // Helper to facilitate UI creation if needed, though often UI is in HTML\n renderUI: function () {\n // Look for any uninitialized theme toggles\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.getAttribute('data-theme-initialized') === 'true') {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n }\n return;\n }\n\n // Simplified UI Binding - assumes a select or a button cycle\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n const onChange = (e) => {\n this.setPreference(e.target.value);\n };\n toggle.addEventListener('change', onChange);\n toggle._themeToggleHandler = onChange;\n } else {\n // Button implementation (cycle)\n const onClick = () => {\n const modes = ['system', 'light', 'dark'];\n const nextIndex = (modes.indexOf(this.state.preference) + 1) % modes.length;\n this.setPreference(modes[nextIndex]);\n };\n toggle.addEventListener('click', onClick);\n toggle._themeToggleHandler = onClick;\n }\n // Mark as initialized\n toggle.setAttribute('data-theme-initialized', 'true');\n });\n },\n\n updateUI: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n } else {\n // Update button text/icon if needed\n // e.g. toggle.textContent = this.state.preference;\n // For now, assume the user handles visual state or generic text\n\n // If there is an icon or text span inside, update it\n const span = toggle.querySelector('.theme-current-label');\n if (span) {\n span.textContent = this.state.preference.charAt(0).toUpperCase() + this.state.preference.slice(1);\n }\n }\n });\n },\n\n destroyAll: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"][data-theme-initialized=\"true\"]');\n toggles.forEach(toggle => {\n if (toggle._themeToggleHandler) {\n const eventName = toggle.tagName === 'SELECT' ? 'change' : 'click';\n toggle.removeEventListener(eventName, toggle._themeToggleHandler);\n delete toggle._themeToggleHandler;\n }\n toggle.removeAttribute('data-theme-initialized');\n });\n\n if (this._mediaQuery && this._onMediaChange) {\n this._mediaQuery.removeEventListener('change', this._onMediaChange);\n }\n\n this._mediaQuery = null;\n this._onMediaChange = null;\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeSwitcher', ThemeSwitcher);\n }\n})();\n", "/**\n * Vanduo Framework - Toast Component\n * Popup notifications for user feedback\n */\n\n(function() {\n 'use strict';\n\n /**\n * Toast Component\n */\n const Toast = {\n // Default options\n defaults: {\n position: 'top-right',\n duration: 5000,\n dismissible: true,\n showProgress: true,\n pauseOnHover: true\n },\n\n // Container cache\n containers: {},\n\n /**\n * Get or create a toast container for a position\n * @param {string} position - Container position\n * @returns {HTMLElement} Toast container element\n */\n getContainer: function(position) {\n if (this.containers[position]) {\n return this.containers[position];\n }\n\n const container = document.createElement('div');\n container.className = `vd-toast-container vd-toast-container-${position}`;\n container.setAttribute('role', 'status');\n container.setAttribute('aria-live', 'polite');\n container.setAttribute('aria-atomic', 'false');\n document.body.appendChild(container);\n this.containers[position] = container;\n\n return container;\n },\n\n /**\n * Show a toast notification\n * @param {Object|string} options - Toast options or message string\n * @param {string} [type] - Toast type (success, error, warning, info)\n * @param {number} [duration] - Auto-dismiss duration in ms\n * @returns {HTMLElement} Toast element\n */\n show: function(options, type, duration) {\n // Support simple API: Toast.show('Message', 'success', 3000)\n if (typeof options === 'string') {\n options = {\n message: options,\n type: type,\n duration: duration\n };\n }\n\n const config = Object.assign({}, this.defaults, options);\n const container = this.getContainer(config.position);\n\n // Create toast element\n const toast = document.createElement('div');\n toast.className = 'vd-toast';\n\n if (config.type) {\n toast.classList.add(`vd-toast-${config.type}`);\n }\n\n if (config.solid) {\n toast.classList.add('vd-toast-solid');\n }\n\n if (config.showProgress && config.duration > 0) {\n toast.classList.add('vd-toast-with-progress');\n }\n\n // Build toast content\n let html = '';\n\n // Icon (sanitize custom icons, default icons are trusted SVG)\n if (config.icon) {\n const safeIcon = typeof sanitizeHtml === 'function' ? sanitizeHtml(config.icon) : escapeHtml(config.icon);\n html += `${safeIcon}`;\n } else if (config.type) {\n html += `${this.getDefaultIcon(config.type)}`;\n }\n\n // Local escape helper \u2014 guarantees HTML-safe output even if the\n // global escapeHtml utility is not loaded in the current bundle.\n const _esc = typeof escapeHtml === 'function'\n ? escapeHtml\n : function (s) {\n const d = document.createElement('div');\n d.appendChild(document.createTextNode(s));\n return d.innerHTML;\n };\n\n // Content (escape text to prevent injection)\n html += '
    ';\n if (config.title) {\n html += `
    ${_esc(String(config.title))}
    `;\n }\n if (config.message) {\n html += `
    ${_esc(String(config.message))}
    `;\n }\n html += '
    ';\n\n // Close button\n if (config.dismissible) {\n html += '';\n }\n\n // Progress bar\n if (config.showProgress && config.duration > 0) {\n const safeDuration = parseInt(config.duration, 10) || 0;\n html += `
    `;\n }\n\n toast.innerHTML = html;\n\n // Add to container\n container.appendChild(toast);\n\n toast._toastCleanup = [];\n\n // Set up close button handler\n if (config.dismissible) {\n const closeBtn = toast.querySelector('.vd-toast-close');\n const onClose = () => {\n this.dismiss(toast);\n };\n closeBtn.addEventListener('click', onClose);\n toast._toastCleanup.push(() => closeBtn.removeEventListener('click', onClose));\n }\n\n // Pause on hover\n let timeoutId = null;\n let remainingTime = config.duration;\n let startTime = null;\n\n const startTimer = () => {\n if (config.duration > 0) {\n startTime = Date.now();\n timeoutId = setTimeout(() => {\n this.dismiss(toast);\n }, remainingTime);\n toast._toastTimeoutId = timeoutId;\n\n // Resume progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'running';\n }\n }\n };\n\n const pauseTimer = () => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n timeoutId = null;\n toast._toastTimeoutId = null;\n remainingTime -= Date.now() - startTime;\n\n // Pause progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'paused';\n }\n }\n };\n\n if (config.pauseOnHover) {\n toast.addEventListener('mouseenter', pauseTimer);\n toast.addEventListener('mouseleave', startTimer);\n toast._toastCleanup.push(\n () => toast.removeEventListener('mouseenter', pauseTimer),\n () => toast.removeEventListener('mouseleave', startTimer)\n );\n }\n\n // Trigger enter animation\n requestAnimationFrame(() => {\n toast.classList.add('is-visible');\n startTimer();\n });\n\n // Store config on element for later access\n toast._toastConfig = config;\n\n // Dispatch show event\n const showEvent = new CustomEvent('toast:show', {\n bubbles: true,\n detail: { toast, config }\n });\n toast.dispatchEvent(showEvent);\n\n return toast;\n },\n\n /**\n * Dismiss a toast\n * @param {HTMLElement} toast - Toast element to dismiss\n */\n dismiss: function(toast) {\n if (!toast || toast.classList.contains('is-exiting')) return;\n\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n toast._toastTimeoutId = null;\n }\n\n toast.classList.remove('is-visible');\n toast.classList.add('is-exiting');\n\n // Dispatch dismiss event\n const dismissEvent = new CustomEvent('toast:dismiss', {\n bubbles: true,\n detail: { toast }\n });\n toast.dispatchEvent(dismissEvent);\n\n // Remove after animation\n const handleTransitionEnd = () => {\n toast.removeEventListener('transitionend', handleTransitionEnd);\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n };\n\n toast.addEventListener('transitionend', handleTransitionEnd);\n\n // Fallback removal if transition doesn't fire\n setTimeout(() => {\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n }, 400);\n },\n\n /**\n * Destroy all toasts and containers\n */\n destroyAll: function() {\n Object.keys(this.containers).forEach(position => {\n const container = this.containers[position];\n if (!container) return;\n\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => {\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n }\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n });\n\n if (container.parentElement) {\n container.parentElement.removeChild(container);\n }\n });\n\n this.containers = {};\n },\n\n /**\n * Dismiss all toasts\n * @param {string} [position] - Optional position to clear (clears all if not specified)\n */\n dismissAll: function(position) {\n if (position && this.containers[position]) {\n const toasts = this.containers[position].querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n } else {\n Object.values(this.containers).forEach(container => {\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n });\n }\n },\n\n /**\n * Get default icon SVG for a type\n * @param {string} type - Toast type\n * @returns {string} SVG icon markup\n */\n getDefaultIcon: function(type) {\n const icons = {\n success: '',\n error: '',\n warning: '',\n info: ''\n };\n\n return icons[type] || '';\n },\n\n /**\n * Convenience methods for common toast types\n */\n success: function(message, options) {\n return this.show(Object.assign({ message, type: 'success' }, options));\n },\n\n error: function(message, options) {\n return this.show(Object.assign({ message, type: 'error' }, options));\n },\n\n warning: function(message, options) {\n return this.show(Object.assign({ message, type: 'warning' }, options));\n },\n\n info: function(message, options) {\n return this.show(Object.assign({ message, type: 'info' }, options));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('toast', Toast);\n }\n\n // Also expose globally for convenience\n window.Toast = Toast;\n\n})();\n", "/**\n * Vanduo Framework - Tooltips Component\n * JavaScript functionality for tooltips\n */\n\n(function () {\n 'use strict';\n\n /**\n * Tooltips Component\n */\n const Tooltips = {\n tooltips: new Map(),\n delayTimers: new Map(),\n\n /**\n * Sanitize HTML \u2014 delegates to shared sanitizeHtml from helpers.js\n * @param {string} input\n * @returns {string} sanitized HTML\n */\n sanitizeHtml: function (input) {\n if (typeof sanitizeHtml === 'function') {\n return sanitizeHtml(input);\n }\n // Fallback: strip all HTML\n const div = document.createElement('div');\n div.textContent = input || '';\n return div.innerHTML;\n },\n\n /**\n * Initialize tooltips\n */\n init: function () {\n const elements = document.querySelectorAll('[data-tooltip], [data-tooltip-html]');\n\n elements.forEach(element => {\n if (this.tooltips.has(element)) {\n return;\n }\n this.initTooltip(element);\n });\n },\n\n /**\n * Initialize a single tooltip\n * @param {HTMLElement} element - Element with tooltip\n */\n initTooltip: function (element) {\n const tooltip = this.createTooltip(element);\n const cleanupFunctions = [];\n\n // Show on hover/focus\n const enterHandler = () => { this.showTooltip(element, tooltip); };\n const leaveHandler = () => { this.hideTooltip(element, tooltip); };\n const focusHandler = () => { this.showTooltip(element, tooltip); };\n const blurHandler = () => { this.hideTooltip(element, tooltip); };\n\n element.addEventListener('mouseenter', enterHandler);\n element.addEventListener('mouseleave', leaveHandler);\n element.addEventListener('focus', focusHandler);\n element.addEventListener('blur', blurHandler);\n\n cleanupFunctions.push(\n () => element.removeEventListener('mouseenter', enterHandler),\n () => element.removeEventListener('mouseleave', leaveHandler),\n () => element.removeEventListener('focus', focusHandler),\n () => element.removeEventListener('blur', blurHandler)\n );\n\n this.tooltips.set(element, { tooltip, cleanup: cleanupFunctions });\n },\n\n /**\n * Create tooltip element\n * @param {HTMLElement} element - Target element\n * @returns {HTMLElement} Tooltip element\n */\n createTooltip: function (element) {\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-tooltip';\n tooltip.setAttribute('role', 'tooltip');\n tooltip.setAttribute('aria-hidden', 'true');\n\n // Generate unique ID and link via aria-describedby\n const tooltipId = 'tooltip-' + Math.random().toString(36).substr(2, 9);\n tooltip.id = tooltipId;\n element.setAttribute('aria-describedby', tooltipId);\n\n // Get content\n const htmlContent = element.dataset.tooltipHtml;\n const textContent = element.dataset.tooltip;\n\n if (htmlContent) {\n tooltip.innerHTML = this.sanitizeHtml(htmlContent);\n tooltip.classList.add('vd-tooltip-html');\n } else if (textContent) {\n tooltip.textContent = textContent;\n }\n\n // Get placement\n const placement = element.dataset.tooltipPlacement || element.dataset.placement || 'top';\n tooltip.setAttribute('data-placement', placement);\n tooltip.classList.add(`vd-tooltip-${placement}`);\n\n // Get variant\n if (element.dataset.tooltipVariant) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipVariant}`);\n }\n\n // Get size\n if (element.dataset.tooltipSize) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipSize}`);\n }\n\n // Get delay\n const delay = parseInt(element.dataset.tooltipDelay) || 0;\n tooltip.dataset.delay = delay;\n\n document.body.appendChild(tooltip);\n\n return tooltip;\n },\n\n /**\n * Show tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n showTooltip: function (element, tooltip) {\n const delay = parseInt(tooltip.dataset.delay) || 0;\n\n if (delay > 0) {\n const timer = setTimeout(() => {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }, delay);\n this.delayTimers.set(element, timer);\n } else {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }\n },\n\n /**\n * Hide tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n hideTooltip: function (element, tooltip) {\n // Clear delay timer if exists\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n tooltip.classList.remove('is-visible');\n tooltip.setAttribute('aria-hidden', 'true');\n },\n\n /**\n * Position tooltip relative to element\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n positionTooltip: function (element, tooltip) {\n const placement = tooltip.dataset.placement || 'top';\n const rect = element.getBoundingClientRect();\n const tooltipRect = tooltip.getBoundingClientRect();\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;\n\n let top = 0;\n let left = 0;\n\n switch (placement) {\n case 'top':\n top = rect.top + scrollTop - tooltipRect.height - 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'bottom':\n top = rect.bottom + scrollTop + 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'left':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.left + scrollLeft - tooltipRect.width - 8;\n break;\n case 'right':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.right + scrollLeft + 8;\n break;\n }\n\n // Prevent overflow\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const padding = 8;\n\n if (left < padding) {\n left = padding;\n } else if (left + tooltipRect.width > viewportWidth - padding) {\n left = viewportWidth - tooltipRect.width - padding;\n }\n\n if (top < scrollTop + padding) {\n top = scrollTop + padding;\n } else if (top + tooltipRect.height > scrollTop + viewportHeight - padding) {\n top = scrollTop + viewportHeight - tooltipRect.height - padding;\n }\n\n // Use single style assignment with transform for better performance\n tooltip.style.cssText = `position: absolute; top: 0; left: 0; transform: translate(${left}px, ${top}px);`;\n },\n\n /**\n * Show tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n show: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.showTooltip(el, tooltip);\n }\n },\n\n /**\n * Hide tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n hide: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.hideTooltip(el, tooltip);\n }\n },\n\n /**\n * Update tooltip content\n * @param {HTMLElement|string} element - Target element or selector\n * @param {string} content - New content\n * @param {boolean} isHtml - Whether content is HTML\n */\n update: function (element, content, isHtml = false) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n if (isHtml) {\n tooltip.innerHTML = this.sanitizeHtml(content);\n tooltip.classList.add('vd-tooltip-html');\n } else {\n tooltip.textContent = content;\n tooltip.classList.remove('vd-tooltip-html');\n }\n }\n },\n\n /**\n * Destroy a tooltip instance and clean up\n * @param {HTMLElement} element - Element with tooltip\n */\n destroy: function (element) {\n const data = this.tooltips.get(element);\n if (!data) return;\n\n // Clear any pending timer\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n data.cleanup.forEach(fn => fn());\n\n // Remove tooltip element from DOM\n if (data.tooltip && data.tooltip.parentNode) {\n data.tooltip.parentNode.removeChild(data.tooltip);\n }\n\n this.tooltips.delete(element);\n },\n\n /**\n * Destroy all tooltip instances\n */\n destroyAll: function () {\n this.tooltips.forEach((data, element) => {\n this.destroy(element);\n });\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tooltips', Tooltips);\n }\n\n // Expose globally\n window.VanduoTooltips = Tooltips;\n\n})();\n", "/**\n * Vanduo Framework - Search Component\n * Client-side search functionality for content pages\n * \n * @example Basic usage (initialize with defaults)\n * // HTML:\n * //
    \n * // \n * //
    \n * //
    \n * \n * @example Custom configuration\n * var search = Search.create({\n * containerSelector: '.my-search',\n * contentSelector: 'article[id]',\n * titleSelector: 'h2, h3',\n * maxResults: 5,\n * onSelect: function(result) {\n * console.log('Selected:', result.title);\n * }\n * });\n * \n * @example With custom data source\n * var search = Search.create({\n * containerSelector: '.my-search',\n * data: [\n * { id: 'item1', title: 'First Item', content: 'Description...', category: 'Category A' },\n * { id: 'item2', title: 'Second Item', content: 'Description...', category: 'Category B' }\n * ]\n * });\n */\n\n(function() {\n 'use strict';\n\n /**\n * Default configuration\n */\n const DEFAULTS = {\n // Behavior\n minQueryLength: 2,\n maxResults: 10,\n debounceMs: 150,\n highlightTag: 'mark',\n keyboardShortcut: true, // Enable Cmd/Ctrl+K shortcut\n \n // Selectors (for DOM-based indexing)\n containerSelector: '.vd-doc-search',\n inputSelector: '.vd-doc-search-input',\n resultsSelector: '.vd-doc-search-results',\n contentSelector: '.doc-content section[id]',\n titleSelector: '.demo-title, h2, h3',\n navSelector: '.doc-nav-link',\n sectionSelector: '.doc-nav-section',\n \n // Content extraction\n excludeFromContent: 'pre, code, script, style',\n maxContentLength: 500,\n \n // Custom data source (alternative to DOM indexing)\n data: null,\n \n // Category icons mapping\n categoryIcons: {\n 'getting-started': 'ph-rocket-launch',\n 'core': 'ph-cube',\n 'components': 'ph-puzzle-piece',\n 'interactive': 'ph-cursor-click',\n 'data-display': 'ph-table',\n 'feedback': 'ph-bell',\n 'meta': 'ph-info',\n 'default': 'ph-file-text'\n },\n \n // Callbacks\n onSelect: null, // function(result) - called when result is selected\n onSearch: null, // function(query, results) - called after search\n onOpen: null, // function() - called when results open\n onClose: null, // function() - called when results close\n \n // Text customization\n emptyTitle: 'No results found',\n emptyText: 'Try different keywords or check spelling',\n placeholder: 'Search...'\n };\n\n /**\n * Search Component Factory\n * Creates a new search instance with the given configuration\n * \n * @param {Object} options - Configuration options\n * @returns {Object} Search instance\n */\n function createSearch(options) {\n const config = Object.assign({}, DEFAULTS, options || {});\n \n // Instance state\n const state = {\n initialized: false,\n index: [],\n results: [],\n activeIndex: -1,\n isOpen: false,\n query: '',\n container: null,\n input: null,\n resultsContainer: null,\n debounceTimer: null,\n boundHandlers: {}\n };\n\n function safeInvokeCallback(name, fn, ...args) {\n try {\n fn(...args);\n } catch (error) {\n console.warn('[Vanduo Search] Callback error in \"' + name + '\":', error);\n }\n }\n\n function setResultsHtml(html) {\n if (!state.resultsContainer) return;\n try {\n state.resultsContainer.innerHTML = html;\n } catch (error) {\n console.warn('[Vanduo Search] Failed to render results:', error);\n }\n }\n\n /**\n * Initialize the search component\n * Idempotent \u2014 safe to call more than once on the same instance.\n * Returns the instance on success, null if required DOM elements are missing.\n */\n function init() {\n if (state.initialized) {\n return instance;\n }\n\n state.container = document.querySelector(config.containerSelector);\n if (!state.container) {\n state.initialized = false;\n return null;\n }\n\n state.input = state.container.querySelector(config.inputSelector);\n state.resultsContainer = state.container.querySelector(config.resultsSelector);\n\n if (!state.input || !state.resultsContainer) {\n state.initialized = false;\n return null;\n }\n\n // Set placeholder if configured\n if (config.placeholder) {\n state.input.setAttribute('placeholder', config.placeholder);\n }\n\n // Build search index\n buildIndex();\n\n // Bind events\n bindEvents();\n\n // Set up ARIA attributes\n setupAria();\n\n state.initialized = true;\n return instance;\n }\n\n /**\n * Build search index from DOM or custom data\n */\n function buildIndex() {\n state.index = [];\n \n // Use custom data if provided\n if (config.data && Array.isArray(config.data)) {\n config.data.forEach(function(item) {\n state.index.push({\n id: item.id || slugify(item.title),\n title: item.title || '',\n category: item.category || '',\n categorySlug: slugify(item.category || ''),\n content: item.content || '',\n keywords: item.keywords || extractKeywordsFromText(item.title + ' ' + item.content),\n url: item.url || '#' + (item.id || slugify(item.title)),\n icon: item.icon || ''\n });\n });\n return;\n }\n\n // Build from DOM\n const sections = document.querySelectorAll(config.contentSelector);\n const categoryMap = buildCategoryMap();\n\n sections.forEach(function(section) {\n const id = section.id;\n if (!id) return;\n\n const titleEl = section.querySelector(config.titleSelector);\n const title = titleEl ? titleEl.textContent.replace(/v[\\d.]+/g, '').trim() : id;\n const category = categoryMap[id] || 'Documentation';\n const content = extractContent(section);\n const keywords = extractKeywords(section, title);\n const iconEl = titleEl ? titleEl.querySelector('i.ph') : null;\n let icon = '';\n if (iconEl && iconEl.classList) {\n for (let ci = 0; ci < iconEl.classList.length; ci++) {\n if (iconEl.classList[ci].indexOf('ph-') === 0) {\n icon = iconEl.classList[ci];\n break;\n }\n }\n }\n\n state.index.push({\n id: id,\n title: title,\n category: category,\n categorySlug: slugify(category),\n content: content,\n keywords: keywords,\n url: '#' + id,\n icon: icon\n });\n });\n }\n\n /**\n * Build a map of section IDs to their categories\n */\n function buildCategoryMap() {\n const map = {};\n let currentCategory = 'Documentation';\n const navItems = document.querySelectorAll(config.navSelector + ', ' + config.sectionSelector);\n\n navItems.forEach(function(item) {\n if (item.classList.contains('doc-nav-section')) {\n currentCategory = item.textContent.trim();\n } else {\n const href = item.getAttribute('href');\n if (href && href.startsWith('#')) {\n const id = href.substring(1);\n map[id] = currentCategory;\n }\n }\n });\n\n return map;\n }\n\n /**\n * Extract searchable content from a section\n */\n function extractContent(section) {\n const clone = section.cloneNode(true);\n \n const toRemove = clone.querySelectorAll(config.excludeFromContent);\n toRemove.forEach(function(el) {\n el.remove();\n });\n\n let text = clone.textContent || '';\n text = text.replace(/\\s+/g, ' ').trim();\n \n return text.substring(0, config.maxContentLength);\n }\n\n /**\n * Extract keywords from a section\n */\n function extractKeywords(section, title) {\n const keywords = [];\n \n // Add title words\n title.toLowerCase().split(/\\s+/).forEach(function(word) {\n if (word.length > 2) {\n keywords.push(word);\n }\n });\n\n // Add class names from code examples\n const codeBlocks = section.querySelectorAll('code');\n codeBlocks.forEach(function(code) {\n const text = code.textContent || '';\n const classMatches = text.match(/\\.([\\w-]+)/g);\n if (classMatches) {\n classMatches.forEach(function(match) {\n keywords.push(match.substring(1).toLowerCase());\n });\n }\n });\n\n // Add data attributes\n const dataAttrs = section.querySelectorAll('[data-tooltip], [data-modal]');\n dataAttrs.forEach(function(el) {\n const attrs = el.getAttributeNames().filter(function(name) {\n return name.startsWith('data-');\n });\n attrs.forEach(function(attr) {\n keywords.push(attr.replace('data-', ''));\n });\n });\n\n return Array.from(new Set(keywords));\n }\n\n /**\n * Extract keywords from text string\n */\n function extractKeywordsFromText(text) {\n const words = text.toLowerCase().split(/\\s+/);\n return words.filter(function(word) {\n return word.length > 2;\n });\n }\n\n /**\n * Convert string to slug\n */\n function slugify(str) {\n return str.toLowerCase().replace(/\\s+/g, '-').replace(/[^a-z0-9-]/g, '');\n }\n\n /**\n * Bind event listeners\n */\n function bindEvents() {\n // Store bound handlers for cleanup\n state.boundHandlers.handleInput = function(e) {\n handleInput(e);\n };\n state.boundHandlers.handleFocus = function() {\n if (state.query.length >= config.minQueryLength) {\n open();\n }\n };\n state.boundHandlers.handleKeydown = function(e) {\n handleKeydown(e);\n };\n state.boundHandlers.handleOutsideClick = function(e) {\n if (!state.container.contains(e.target)) {\n close();\n }\n };\n state.boundHandlers.handleGlobalKeydown = function(e) {\n if (config.keyboardShortcut && (e.metaKey || e.ctrlKey) && e.key === 'k') {\n e.preventDefault();\n state.input.focus();\n state.input.select();\n }\n };\n state.boundHandlers.handleResultClick = function(e) {\n const result = e.target.closest('.vd-doc-search-result');\n if (result) {\n const index = parseInt(result.dataset.index, 10);\n select(index);\n }\n };\n\n // Input events\n state.input.addEventListener('input', state.boundHandlers.handleInput);\n state.input.addEventListener('focus', state.boundHandlers.handleFocus);\n state.input.addEventListener('keydown', state.boundHandlers.handleKeydown);\n\n // Close on outside click\n document.addEventListener('click', state.boundHandlers.handleOutsideClick);\n\n // Global keyboard shortcut\n document.addEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n\n // Result click handling\n state.resultsContainer.addEventListener('click', state.boundHandlers.handleResultClick);\n }\n\n /**\n * Unbind event listeners\n */\n function unbindEvents() {\n if (state.input) {\n state.input.removeEventListener('input', state.boundHandlers.handleInput);\n state.input.removeEventListener('focus', state.boundHandlers.handleFocus);\n state.input.removeEventListener('keydown', state.boundHandlers.handleKeydown);\n }\n document.removeEventListener('click', state.boundHandlers.handleOutsideClick);\n document.removeEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n if (state.resultsContainer) {\n state.resultsContainer.removeEventListener('click', state.boundHandlers.handleResultClick);\n }\n }\n\n /**\n * Set up ARIA attributes\n */\n function setupAria() {\n const resultsId = state.resultsContainer.id || 'search-results-' + Math.random().toString(36).substr(2, 9);\n state.resultsContainer.id = resultsId;\n \n state.input.setAttribute('role', 'combobox');\n state.input.setAttribute('aria-autocomplete', 'list');\n state.input.setAttribute('aria-controls', resultsId);\n state.input.setAttribute('aria-expanded', 'false');\n \n state.resultsContainer.setAttribute('role', 'listbox');\n state.resultsContainer.setAttribute('aria-label', 'Search results');\n }\n\n /**\n * Handle input changes\n */\n function handleInput(e) {\n const query = e.target.value.trim();\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n state.debounceTimer = setTimeout(function() {\n state.query = query;\n\n if (query.length < config.minQueryLength) {\n close();\n return;\n }\n\n state.results = search(query);\n state.activeIndex = -1;\n render();\n open();\n\n // Callback\n if (typeof config.onSearch === 'function') {\n safeInvokeCallback('onSearch', config.onSearch, query, state.results);\n }\n }, config.debounceMs);\n }\n\n /**\n * Handle keyboard navigation\n */\n function handleKeydown(e) {\n if (!state.isOpen) {\n if (e.key === 'ArrowDown' && state.query.length >= config.minQueryLength) {\n e.preventDefault();\n state.results = search(state.query);\n render();\n open();\n }\n return;\n }\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n navigate(1);\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n navigate(-1);\n break;\n\n case 'Enter':\n e.preventDefault();\n if (state.activeIndex >= 0) {\n select(state.activeIndex);\n } else if (state.results.length > 0) {\n select(0);\n }\n break;\n\n case 'Escape':\n e.preventDefault();\n close();\n break;\n\n case 'Tab':\n close();\n break;\n }\n }\n\n /**\n * Perform search\n */\n function search(query) {\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n const scored = [];\n\n state.index.forEach(function(entry) {\n let score = 0;\n const titleLower = entry.title.toLowerCase();\n const categoryLower = entry.category.toLowerCase();\n const contentLower = entry.content.toLowerCase();\n\n terms.forEach(function(term) {\n // Title match - highest priority\n if (titleLower.includes(term)) {\n score += 100;\n if (titleLower === term) {\n score += 50;\n } else if (titleLower.startsWith(term)) {\n score += 25;\n }\n }\n\n // Category match\n if (categoryLower.includes(term)) {\n score += 50;\n }\n\n // Keyword match\n const keywordMatch = entry.keywords.some(function(k) {\n return k.includes(term);\n });\n if (keywordMatch) {\n score += 30;\n }\n\n // Content match\n if (contentLower.includes(term)) {\n score += 10;\n }\n });\n\n if (score > 0) {\n scored.push({\n id: entry.id,\n title: entry.title,\n category: entry.category,\n categorySlug: entry.categorySlug,\n content: entry.content,\n url: entry.url,\n icon: entry.icon,\n score: score\n });\n }\n });\n\n scored.sort(function(a, b) {\n return b.score - a.score;\n });\n\n return scored.slice(0, config.maxResults);\n }\n\n /**\n * Render search results\n */\n function render() {\n if (state.results.length === 0) {\n setResultsHtml(renderEmpty());\n return;\n }\n\n let html = '
      ';\n\n state.results.forEach(function(result, index) {\n const isActive = index === state.activeIndex;\n const icon = result.icon || getCategoryIcon(result.categorySlug);\n const excerpt = getExcerpt(result.content, state.query);\n\n html += '
    • ' +\n '
      ' +\n '' +\n '
      ' +\n '
      ' +\n '
      ' + highlight(result.title, state.query) + '
      ' +\n '
      ' + escapeHtml(result.category) + '
      ' +\n '
      ' + highlight(excerpt, state.query) + '
      ' +\n '
      ' +\n '
      • ';\n });\n\n html += '
    ';\n html += renderFooter();\n\n setResultsHtml(html);\n }\n\n /**\n * Render empty state\n */\n function renderEmpty() {\n return '
    ' +\n '
    ' +\n '
    ' + escapeHtml(config.emptyTitle) + '
    ' +\n '
    ' + escapeHtml(config.emptyText) + '
    ' +\n '
    ';\n }\n\n /**\n * Render footer with keyboard hints\n */\n function renderFooter() {\n return '
    ' +\n '\u2191\u2193 to navigate' +\n '\u21B5 to select' +\n 'esc to close' +\n '
    ';\n }\n\n /**\n * Get icon for category\n */\n function getCategoryIcon(categorySlug) {\n return config.categoryIcons[categorySlug] || config.categoryIcons['default'] || 'ph-file-text';\n }\n\n /**\n * Get excerpt from content\n */\n function getExcerpt(content, query) {\n const terms = query.toLowerCase().split(/\\s+/);\n const contentLower = content.toLowerCase();\n const excerptLength = 100;\n\n let matchPos = -1;\n for (let i = 0; i < terms.length; i++) {\n const pos = contentLower.indexOf(terms[i]);\n if (pos !== -1 && (matchPos === -1 || pos < matchPos)) {\n matchPos = pos;\n }\n }\n\n if (matchPos === -1) {\n return content.substring(0, excerptLength) + '...';\n }\n\n const start = Math.max(0, matchPos - 30);\n const end = Math.min(content.length, matchPos + excerptLength);\n let excerpt = content.substring(start, end);\n\n if (start > 0) {\n excerpt = '...' + excerpt;\n }\n if (end < content.length) {\n excerpt = excerpt + '...';\n }\n\n return excerpt;\n }\n\n /**\n * Highlight matched terms in text\n */\n function highlight(text, query) {\n if (!query) return escapeHtml(text);\n\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n let escaped = escapeHtml(text);\n\n terms.forEach(function(term) {\n // Skip overly long terms to prevent ReDoS\n if (term.length > 50) return;\n const regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n escaped = escaped.replace(regex, '<' + config.highlightTag + '>$1');\n });\n\n return escaped;\n }\n\n /**\n * Escape HTML entities\n */\n function escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n /**\n * Navigate results with keyboard\n */\n function navigate(direction) {\n let newIndex = state.activeIndex + direction;\n\n if (newIndex < 0) {\n newIndex = state.results.length - 1;\n } else if (newIndex >= state.results.length) {\n newIndex = 0;\n }\n\n setActiveIndex(newIndex);\n }\n\n /**\n * Set active result index\n */\n function setActiveIndex(index) {\n const prevActive = state.resultsContainer.querySelector('.vd-doc-search-result.is-active');\n if (prevActive) {\n prevActive.classList.remove('is-active');\n prevActive.setAttribute('aria-selected', 'false');\n }\n\n state.activeIndex = index;\n\n const newActive = state.resultsContainer.querySelector('[data-index=\"' + index + '\"]');\n if (newActive) {\n newActive.classList.add('is-active');\n newActive.setAttribute('aria-selected', 'true');\n state.input.setAttribute('aria-activedescendant', 'vd-doc-search-result-' + index);\n newActive.scrollIntoView({ block: 'nearest' });\n }\n }\n\n /**\n * Select a result\n */\n function select(index) {\n const result = state.results[index];\n if (!result) return;\n\n // Close search\n close();\n state.input.value = '';\n state.query = '';\n\n // Custom callback\n if (typeof config.onSelect === 'function') {\n safeInvokeCallback('onSelect', config.onSelect, result);\n return;\n }\n\n // Default behavior: navigate to section\n const section = document.querySelector(result.url);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth', block: 'start' });\n window.history.pushState(null, '', result.url);\n updateSidebarActive(result.id);\n }\n }\n\n /**\n * Update sidebar navigation active state\n */\n function updateSidebarActive(sectionId) {\n const navLinks = document.querySelectorAll(config.navSelector);\n navLinks.forEach(function(link) {\n link.classList.remove('active');\n if (link.getAttribute('href') === '#' + sectionId) {\n link.classList.add('active');\n }\n });\n }\n\n /**\n * Open results dropdown\n */\n function open() {\n if (state.isOpen) return;\n\n state.isOpen = true;\n state.resultsContainer.classList.add('is-open');\n state.input.setAttribute('aria-expanded', 'true');\n\n if (typeof config.onOpen === 'function') {\n safeInvokeCallback('onOpen', config.onOpen);\n }\n }\n\n /**\n * Close results dropdown\n */\n function close() {\n if (!state.isOpen) return;\n\n state.isOpen = false;\n state.activeIndex = -1;\n state.resultsContainer.classList.remove('is-open');\n state.input.setAttribute('aria-expanded', 'false');\n state.input.removeAttribute('aria-activedescendant');\n\n if (typeof config.onClose === 'function') {\n safeInvokeCallback('onClose', config.onClose);\n }\n }\n\n /**\n * Destroy the component\n */\n function destroy() {\n unbindEvents();\n \n state.initialized = false;\n state.index = [];\n state.results = [];\n state.isOpen = false;\n state.query = '';\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n if (state.resultsContainer) {\n setResultsHtml('');\n }\n }\n\n /**\n * Rebuild the search index\n */\n function rebuild() {\n buildIndex();\n }\n\n /**\n * Update configuration\n */\n function setConfig(newConfig) {\n Object.assign(config, newConfig);\n }\n\n /**\n * Get current configuration\n */\n function getConfig() {\n return Object.assign({}, config);\n }\n\n /**\n * Get search index\n */\n function getIndex() {\n return state.index.slice();\n }\n\n // Public instance API\n const instance = {\n init: init,\n destroy: destroy,\n rebuild: rebuild,\n search: search,\n open: open,\n close: close,\n setConfig: setConfig,\n getConfig: getConfig,\n getIndex: getIndex\n };\n\n return instance;\n }\n\n /**\n * Search Component (singleton for backward compatibility)\n */\n const Search = {\n // Factory method \u2014 creates and auto-initializes a new independent instance.\n // Always returns the instance so callers retain a reference even if the\n // DOM container is not yet available (they can retry init() later).\n create: function(options) {\n const instance = createSearch(options);\n if (instance) {\n instance.init();\n }\n return instance || null;\n },\n \n // Default instance\n _instance: null,\n \n // Configuration (for default instance)\n config: Object.assign({}, DEFAULTS),\n\n /**\n * Initialize the default search instance\n */\n init: function(options) {\n if (this._instance) {\n this._instance.destroy();\n }\n \n if (options) {\n Object.assign(this.config, options);\n }\n \n this._instance = createSearch(this.config);\n return this._instance ? this._instance.init() : null;\n },\n\n /**\n * Destroy the default instance\n */\n destroy: function() {\n if (this._instance) {\n this._instance.destroy();\n this._instance = null;\n }\n },\n\n destroyAll: function() {\n this.destroy();\n },\n\n /**\n * Rebuild the default instance index\n */\n rebuild: function() {\n if (this._instance) {\n this._instance.rebuild();\n }\n },\n\n /**\n * Search using the default instance\n */\n search: function(query) {\n return this._instance ? this._instance.search(query) : [];\n },\n\n /**\n * Open the default instance\n */\n open: function() {\n if (this._instance) {\n this._instance.open();\n }\n },\n\n /**\n * Close the default instance\n */\n close: function() {\n if (this._instance) {\n this._instance.close();\n }\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('docSearch', Search);\n }\n\n // Expose globally (both names for compatibility)\n window.Search = Search;\n window.DocSearch = Search; // Backward compatibility\n window.VanduoDocSearch = Search; // New name compatibility\n\n})();\n", "/**\n * Vanduo Framework - Draggable Component\n * JavaScript functionality for draggable elements and drop zones\n */\n\n(function () {\n 'use strict';\n\n /**\n * Draggable Component\n */\n const Draggable = {\n // Store initialized draggables and their cleanup functions\n instances: new Map(),\n // Store current drag state\n currentDrag: null,\n // Store touch state\n touchState: null,\n // Feedback element\n feedbackElement: null,\n // Shared selector used by init and touch reorder\n containerSelector: '.vd-draggable-container, .vd-draggable-container-vertical',\n\n /**\n * Initialize draggable components\n */\n init: function () {\n const draggables = document.querySelectorAll('.vd-draggable, [data-draggable]');\n\n draggables.forEach(element => {\n if (this.instances.has(element)) {\n return;\n }\n this.initDraggable(element);\n });\n\n const containers = document.querySelectorAll(this.containerSelector);\n containers.forEach(container => {\n if (!this.instances.has(container)) {\n this.initContainer(container);\n }\n });\n\n const dropZones = document.querySelectorAll('.vd-drop-zone');\n dropZones.forEach(zone => {\n if (!this.instances.has(zone)) {\n this.initDropZone(zone);\n }\n });\n\n this.createFeedbackElement();\n },\n\n /**\n * Initialize a single draggable element\n * @param {HTMLElement} element - Draggable element\n */\n initDraggable: function (element) {\n const cleanupFunctions = [];\n\n // Make element draggable if not already\n if (!element.hasAttribute('draggable')) {\n element.setAttribute('draggable', 'true');\n }\n\n // Accessibility: add ARIA attributes\n if (!element.hasAttribute('tabindex')) {\n element.setAttribute('tabindex', '0');\n }\n element.setAttribute('role', 'option');\n element.setAttribute('aria-roledescription', 'draggable item');\n element.setAttribute('aria-grabbed', 'false');\n\n // Handle drag start\n const dragStartHandler = (e) => {\n this.handleDragStart(e, element);\n };\n element.addEventListener('dragstart', dragStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragstart', dragStartHandler));\n\n // Handle drag\n const dragHandler = (e) => {\n this.handleDrag(e, element);\n };\n element.addEventListener('drag', dragHandler);\n cleanupFunctions.push(() => element.removeEventListener('drag', dragHandler));\n\n // Handle drag end\n const dragEndHandler = (e) => {\n this.handleDragEnd(e, element);\n };\n element.addEventListener('dragend', dragEndHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragend', dragEndHandler));\n\n // Handle touch start (for mobile)\n const touchStartHandler = (e) => {\n this.handleTouchStart(e, element);\n };\n element.addEventListener('touchstart', touchStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchstart', touchStartHandler));\n\n // Handle touch move (for mobile)\n // { passive: false } is required so that e.preventDefault() works\n // once the drag threshold is reached \u2014 without it, modern browsers\n // treat the listener as passive and silently ignore preventDefault().\n const touchMoveHandler = (e) => {\n this.handleTouchMove(e, element);\n };\n element.addEventListener('touchmove', touchMoveHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchmove', touchMoveHandler));\n\n // Handle touch end (for mobile)\n const touchEndHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchend', touchEndHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchend', touchEndHandler));\n\n // Handle touch cancel (for mobile)\n const touchCancelHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchcancel', touchCancelHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchcancel', touchCancelHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, element);\n };\n element.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => element.removeEventListener('keydown', keydownHandler));\n\n this.instances.set(element, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a draggable container\n * @param {HTMLElement} container - Draggable container\n */\n initContainer: function (container) {\n // Accessibility: add ARIA role to container\n container.setAttribute('role', 'listbox');\n container.setAttribute('aria-label', container.getAttribute('aria-label') || 'Draggable items');\n\n const items = container.querySelectorAll('.vd-draggable-item');\n items.forEach(item => {\n if (!this.instances.has(item)) {\n this.initDraggable(item);\n }\n });\n\n const cleanupFunctions = [];\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n };\n\n // Handle drag over for auto-sorting\n const dragOverHandler = (e) => {\n e.preventDefault(); // Necessary to allow drop\n e.dataTransfer.dropEffect = 'move';\n\n if (!this.currentDrag) return;\n const draggingEl = this.currentDrag.element;\n\n // Only reorder if dragging an item that belongs to this container (or if we support cross-container drag, but keep simple)\n if (!container.contains(draggingEl)) return;\n\n // Prevent jumps when the dragging finalizes with 0,0 coordinates near the end\n if (e.clientX === 0 && e.clientY === 0) return;\n\n this.handleReorder(container, draggingEl, e.clientX, e.clientY);\n };\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault(); // crucial to prevent the browser's default handling and snapping back\n };\n\n container.addEventListener('dragenter', dragEnterHandler);\n container.addEventListener('dragover', dragOverHandler);\n container.addEventListener('drop', dropHandler);\n\n cleanupFunctions.push(() => {\n container.removeEventListener('dragenter', dragEnterHandler);\n container.removeEventListener('dragover', dragOverHandler);\n container.removeEventListener('drop', dropHandler);\n });\n\n this.instances.set(container, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a drop zone\n * @param {HTMLElement} zone - Drop zone element\n */\n initDropZone: function (zone) {\n const cleanupFunctions = [];\n\n // Accessibility: add ARIA role to drop zone\n zone.setAttribute('role', 'region');\n zone.setAttribute('aria-dropeffect', 'move');\n if (!zone.hasAttribute('aria-label')) {\n zone.setAttribute('aria-label', 'Drop zone');\n }\n\n // Handle drag over\n const dragOverHandler = (e) => {\n e.preventDefault();\n this.handleDragOver(e, zone);\n };\n zone.addEventListener('dragover', dragOverHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragover', dragOverHandler));\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n this.handleDragEnter(e, zone);\n };\n zone.addEventListener('dragenter', dragEnterHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragenter', dragEnterHandler));\n\n // Handle drag leave\n const dragLeaveHandler = (e) => {\n this.handleDragLeave(e, zone);\n };\n zone.addEventListener('dragleave', dragLeaveHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragleave', dragLeaveHandler));\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault();\n this.handleDrop(e, zone);\n };\n zone.addEventListener('drop', dropHandler);\n cleanupFunctions.push(() => zone.removeEventListener('drop', dropHandler));\n\n this.instances.set(zone, { cleanup: cleanupFunctions });\n },\n\n /**\n * Create feedback element for drag operations\n */\n createFeedbackElement: function () {\n if (!this.feedbackElement) {\n // Reuse existing element if present\n const existing = document.querySelector('.vd-drag-feedback');\n if (existing) {\n this.feedbackElement = existing;\n return;\n }\n\n this.feedbackElement = document.createElement('div');\n this.feedbackElement.className = 'vd-drag-feedback hidden';\n this.feedbackElement.setAttribute('role', 'presentation');\n document.body.appendChild(this.feedbackElement);\n }\n },\n\n /**\n * Handle drag start event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragStart: function (e, element) {\n // Add dragging class\n element.classList.add('is-dragging');\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: e.clientX, y: e.clientY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element)\n };\n\n // Set drag data\n e.dataTransfer.effectAllowed = 'move';\n e.dataTransfer.setData('text/plain', this.currentDrag.data);\n\n // We no longer suppress the native ghost image or manually update feedback\n // for mouse drags, relying on the browser's native rendering instead.\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY }\n }\n }));\n },\n\n /**\n * Handle drag event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDrag: function (e, element) {\n // Guard against null state (race condition on fast interactions)\n if (!this.currentDrag) return;\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - this.currentDrag.initialPosition.x,\n y: e.clientY - this.currentDrag.initialPosition.y\n }\n }\n }));\n },\n\n /**\n * Handle drag end event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragEnd: function (e, element) {\n // Remove dragging class\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'false');\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Guard against null state\n const data = this.currentDrag?.data || this.getData(element);\n const initialPos = this.currentDrag?.initialPosition || { x: 0, y: 0 };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - initialPos.x,\n y: e.clientY - initialPos.y\n }\n }\n }));\n\n // Reset drag state\n this.currentDrag = null;\n },\n\n /**\n * Handle touch start event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchStart: function (e, element) {\n // Don't prevent default here \u2014 it blocks scrolling.\n // We only prevent default in touchmove once drag threshold is reached.\n const touch = e.touches[0];\n const rect = element.getBoundingClientRect();\n this.touchState = {\n element: element,\n startX: touch.clientX,\n startY: touch.clientY,\n lastX: touch.clientX,\n lastY: touch.clientY,\n // Keep preview anchored to the original grab point.\n offsetX: touch.clientX - rect.left,\n offsetY: touch.clientY - rect.top,\n startTime: Date.now(),\n isDragging: false\n };\n },\n\n /**\n * Handle touch move event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchMove: function (e, element) {\n if (!this.touchState) return;\n\n const touch = e.touches[0];\n this.touchState.lastX = touch.clientX;\n this.touchState.lastY = touch.clientY;\n const deltaX = touch.clientX - this.touchState.startX;\n const deltaY = touch.clientY - this.touchState.startY;\n\n // Only start dragging if moved a minimum distance\n if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {\n // Now we know it's a drag, not a scroll \u2014 prevent default\n if (e.cancelable) e.preventDefault();\n\n if (!this.touchState.isDragging) {\n this.touchState.isDragging = true;\n element.classList.add('is-dragging');\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: this.touchState.startX, y: this.touchState.startY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element),\n // Preserve where inside the element the drag started for accurate ghost positioning.\n offsetX: this.touchState.offsetX,\n offsetY: this.touchState.offsetY\n };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY }\n }\n }));\n }\n\n // Update feedback\n this.updateFeedback(touch.clientX, touch.clientY);\n\n // Dispatch event\n if (this.currentDrag) {\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY },\n delta: { x: deltaX, y: deltaY }\n }\n }));\n\n this.updateTouchDropZone(touch.clientX, touch.clientY);\n\n // Reorder for touch\n const container = element.closest(this.containerSelector);\n if (container && container.contains(element)) {\n this.handleReorder(container, element, touch.clientX, touch.clientY);\n }\n }\n }\n },\n\n /**\n * Handle touch end event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchEnd: function (e, element) {\n if (this.touchState && this.touchState.isDragging) {\n if (e.cancelable) e.preventDefault();\n const endTouch = e.changedTouches?.[0];\n const endPosition = {\n x: endTouch?.clientX ?? this.touchState.lastX ?? this.touchState.startX,\n y: endTouch?.clientY ?? this.touchState.lastY ?? this.touchState.startY\n };\n\n const dropZone = this.resolveDropZoneAtPoint(endPosition.x, endPosition.y) || this.touchState.overZone;\n if (dropZone) {\n this.dispatchDrop(dropZone, endPosition);\n } else if (this.touchState.overZone) {\n this.touchState.overZone.classList.remove('is-drag-over');\n }\n\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n element.setAttribute('aria-grabbed', 'false');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Dispatch event\n const data = this.currentDrag?.data || this.getData(element);\n const startX = this.touchState?.startX || 0;\n const startY = this.touchState?.startY || 0;\n\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: endPosition,\n delta: {\n x: endPosition.x - startX,\n y: endPosition.y - startY\n }\n }\n }));\n }\n\n // Reset states\n this.touchState = null;\n this.currentDrag = null;\n },\n\n /**\n * Handle drag over event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} _zone - Drop zone element\n */\n handleDragOver: function (e, _zone) {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n },\n\n /**\n * Handle drag enter event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragEnter: function (e, zone) {\n e.preventDefault();\n zone.classList.add('is-drag-over');\n },\n\n /**\n * Handle drag leave event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragLeave: function (e, zone) {\n zone.classList.remove('is-drag-over');\n },\n\n /**\n * Handle drop event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDrop: function (e, zone) {\n e.preventDefault();\n this.dispatchDrop(zone, { x: e.clientX, y: e.clientY });\n },\n\n /**\n * Resolve a drop zone from viewport coordinates\n * @param {number} x\n * @param {number} y\n * @returns {HTMLElement|null}\n */\n resolveDropZoneAtPoint: function (x, y) {\n if (!Number.isFinite(x) || !Number.isFinite(y)) return null;\n\n // Prefer the full stacking list so overlays/top elements don't hide real drop targets.\n if (typeof document.elementsFromPoint === 'function') {\n const stacked = document.elementsFromPoint(x, y);\n for (const element of stacked) {\n const zone = element.closest('.vd-drop-zone');\n if (zone) return zone;\n }\n }\n\n const target = document.elementFromPoint(x, y);\n const targetZone = target ? target.closest('.vd-drop-zone') : null;\n if (targetZone) return targetZone;\n\n // Last-resort fallback for mobile emulation edge cases.\n const zones = document.querySelectorAll('.vd-drop-zone');\n for (const zone of zones) {\n const rect = zone.getBoundingClientRect();\n if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {\n return zone;\n }\n }\n\n return null;\n },\n\n /**\n * Track and update active drop-zone hover state on touch devices\n * @param {number} x\n * @param {number} y\n */\n updateTouchDropZone: function (x, y) {\n if (!this.touchState) return;\n\n const nextZone = this.resolveDropZoneAtPoint(x, y);\n const prevZone = this.touchState.overZone || null;\n\n if (prevZone && prevZone !== nextZone) {\n prevZone.classList.remove('is-drag-over');\n }\n\n if (nextZone && nextZone !== prevZone) {\n nextZone.classList.add('is-drag-over');\n }\n\n this.touchState.overZone = nextZone || null;\n },\n\n /**\n * Dispatch a normalized drop event for mouse and touch flows\n * @param {HTMLElement} zone\n * @param {{x:number, y:number}} position\n */\n dispatchDrop: function (zone, position) {\n zone.classList.remove('is-drag-over');\n zone.dispatchEvent(new CustomEvent('draggable:drop', {\n bubbles: true,\n detail: {\n zone: zone,\n element: this.currentDrag?.element,\n data: this.currentDrag?.data,\n position: position\n }\n }));\n },\n\n /**\n * Reorder elements in container based on cursor position\n * @param {HTMLElement} container \n * @param {HTMLElement} element \n * @param {number} clientX \n * @param {number} clientY \n */\n handleReorder: function (container, element, clientX, clientY) {\n const isVertical = container.classList.contains('vd-draggable-container-vertical');\n const siblings = [...container.querySelectorAll('.vd-draggable-item:not(.is-dragging), .vd-draggable:not(.is-dragging)')];\n\n const nextSibling = siblings.reduce((closest, child) => {\n const box = child.getBoundingClientRect();\n const offset = isVertical\n ? clientY - box.top - box.height / 2\n : clientX - box.left - box.width / 2;\n\n if (offset < 0 && offset > closest.offset) {\n return { offset: offset, element: child };\n } else {\n return closest;\n }\n }, { offset: Number.NEGATIVE_INFINITY }).element;\n\n if (nextSibling == null) {\n container.appendChild(element);\n } else {\n container.insertBefore(element, nextSibling);\n }\n },\n\n /**\n * Handle keyboard events\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} element - Draggable element\n */\n handleKeydown: function (e, element) {\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n // Trigger click or custom action\n element.click();\n break;\n case 'Escape':\n // Cancel drag if in progress\n if (element.classList.contains('is-dragging')) {\n element.classList.remove('is-dragging');\n element.setAttribute('aria-grabbed', 'false');\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n this.currentDrag = null;\n }\n break;\n case 'ArrowUp':\n case 'ArrowLeft': {\n e.preventDefault();\n const prev = element.previousElementSibling;\n if (prev && (prev.classList.contains('vd-draggable') || prev.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(element, prev);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'up' }\n }));\n }\n break;\n }\n case 'ArrowDown':\n case 'ArrowRight': {\n e.preventDefault();\n const next = element.nextElementSibling;\n if (next && (next.classList.contains('vd-draggable') || next.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(next, element);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'down' }\n }));\n }\n break;\n }\n }\n },\n\n /**\n * Get data from draggable element\n * @param {HTMLElement} element - Draggable element\n * @returns {string} Data associated with the element\n */\n getData: function (element) {\n return element.dataset.draggable || element.textContent.trim();\n },\n\n /**\n * Update drag feedback element\n * @param {number} x - Current X coordinate\n * @param {number} y - Current Y coordinate\n */\n updateFeedback: function (x, y) {\n if (!this.currentDrag) return;\n\n // Show feedback\n this.feedbackElement.classList.remove('hidden');\n\n // Update feedback content\n const rect = this.currentDrag.initialBounds;\n this.feedbackElement.innerHTML = '';\n const clone = this.currentDrag.element.cloneNode(true);\n this.feedbackElement.appendChild(clone);\n\n // Set styles\n const offsetX = this.currentDrag.offsetX ?? 20;\n const offsetY = this.currentDrag.offsetY ?? 20;\n Object.assign(this.feedbackElement.style, {\n left: (x - offsetX) + 'px',\n top: (y - offsetY) + 'px',\n width: rect.width + 'px',\n height: rect.height + 'px'\n });\n },\n\n /**\n * Make an element draggable programmatically\n * @param {HTMLElement|string} element - Element or selector\n * @param {Object} options - Configuration options\n */\n makeDraggable: function (element, options = {}) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && !this.instances.has(el)) {\n // Add classes and attributes\n el.classList.add('vd-draggable');\n el.setAttribute('draggable', 'true');\n\n // Set options\n if (options.data) {\n el.dataset.draggable = options.data;\n }\n\n // Initialize\n this.initDraggable(el);\n }\n },\n\n /**\n * Remove draggable functionality from an element\n * @param {HTMLElement|string} element - Element or selector\n */\n removeDraggable: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && this.instances.has(el)) {\n // Clean up\n const instance = this.instances.get(el);\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n\n // Remove classes and attributes\n el.classList.remove('vd-draggable');\n el.removeAttribute('draggable');\n el.removeAttribute('data-draggable');\n }\n },\n\n /**\n * Destroy a draggable instance and clean up event listeners\n * @param {HTMLElement} element - Draggable element\n */\n destroy: function (element) {\n this.removeDraggable(element);\n },\n\n /**\n * Destroy all draggable instances\n */\n destroyAll: function () {\n const instances = Array.from(this.instances.keys());\n instances.forEach(element => this.destroy(element));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('draggable', Draggable);\n }\n\n // Expose globally\n window.VanduoDraggable = Draggable;\n})();\n", "/**\n * Vanduo Framework \u2013 LazyLoad Component\n * v1.2.1\n *\n * Provides two levels of API:\n *\n * LOW-LEVEL (generic IntersectionObserver wrapper)\n * VanduoLazyLoad.observe(element, callback, options?)\n * VanduoLazyLoad.unobserve(element)\n * VanduoLazyLoad.unobserveAll()\n *\n * HIGH-LEVEL (HTML-section fetcher, mirrors vanduo-docs SPA behaviour)\n * VanduoLazyLoad.loadSection(url, containerEl, options?)\n * options: { placeholder, threshold, rootMargin, onLoaded, onError }\n * placeholder: 'skeleton' | 'spinner' | HTMLString (default: 'skeleton')\n *\n * ATTRIBUTE-DRIVEN (zero-JS usage, wired by init())\n *
    \u2026
    \n *\n * EVENTS dispatched on the host element:\n * lazysection:loading \u2014 fetch started\n * lazysection:loaded \u2014 content injected\n * lazysection:error \u2014 fetch failed\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500 Private state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /** @type {Map} */\n const _observerMap = new Map();\n\n /* \u2500\u2500 Security helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Returns true only if `url` resolves to the same origin as the page\n * (relative paths and same-origin absolute URLs are allowed).\n * Cross-origin URLs are rejected to prevent SSRF-style fetch abuse.\n * @param {string} url\n * @returns {boolean}\n */\n function _isSafeUrl(url) {\n try {\n // Relative URLs (no origin) are always safe\n const resolved = new URL(url, window.location.href);\n return resolved.origin === window.location.origin;\n } catch (_) {\n return false;\n }\n }\n\n /**\n * Safely inject fetched HTML into a container by parsing it with\n * DOMParser (avoids script execution) and replacing children via\n * standard DOM APIs instead of raw innerHTML assignment.\n * @param {Element} containerEl\n * @param {string} html\n */\n function _safeInjectHtml(containerEl, html) {\n const parser = new DOMParser();\n const doc = parser.parseFromString(html.trim(), 'text/html'); // CodeQL [js/xss-through-dom] Intentional: parsed nodes are sanitized below before adoption into live DOM\n\n const DANGEROUS_TAGS = ['SCRIPT', 'IFRAME', 'OBJECT', 'EMBED', 'FORM', 'BASE', 'LINK', 'META', 'STYLE'];\n for (const tag of DANGEROUS_TAGS) {\n const els = doc.querySelectorAll(tag);\n for (let i = els.length - 1; i >= 0; i--) {\n els[i].parentNode.removeChild(els[i]);\n }\n }\n\n // Strip dangerous attributes (e.g. onerror, javascript: urls) from all elements\n function _sanitizeNode(node) {\n if (node.nodeType === Node.ELEMENT_NODE) {\n const attrs = node.attributes;\n for (let i = attrs.length - 1; i >= 0; i--) {\n const attrName = attrs[i].name.toLowerCase();\n const attrValue = attrs[i].value.toLowerCase();\n const trimmedValue = attrValue.trim();\n if (\n attrName.startsWith('on') ||\n trimmedValue.startsWith('javascript:') ||\n trimmedValue.startsWith('data:') ||\n trimmedValue.startsWith('vbscript:')\n ) {\n node.removeAttribute(attrs[i].name);\n }\n }\n const children = node.childNodes;\n for (let i = 0; i < children.length; i++) {\n _sanitizeNode(children[i]);\n }\n }\n }\n _sanitizeNode(doc.body);\n\n // Collect all top-level body children\n const nodes = Array.from(doc.body.childNodes);\n // Clear container and append parsed nodes\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n nodes.forEach(function (node) {\n containerEl.appendChild(document.adoptNode(node));\n });\n }\n\n /* \u2500\u2500 Placeholder HTML \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _skeletonHtml() {\n return '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _spinnerHtml() {\n return '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _resolvePlaceholder(placeholder) {\n if (!placeholder || placeholder === 'skeleton') return _skeletonHtml();\n if (placeholder === 'spinner') return _spinnerHtml();\n // Caller-supplied HTML string\n return placeholder;\n }\n\n /* \u2500\u2500 Dispatch helper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _dispatch(el, eventName, detail) {\n el.dispatchEvent(new CustomEvent(eventName, { bubbles: true, detail: detail || {} }));\n }\n\n /* \u2500\u2500 VanduoLazyLoad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const VanduoLazyLoad = {\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * LOW-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Observe an element. `callback` is invoked once when the element\n * enters the viewport, then the element is automatically unobserved.\n *\n * @param {Element} element\n * @param {function(Element): void} callback\n * @param {{ threshold?: number, rootMargin?: string }} [options]\n */\n observe: function (element, callback, options) {\n if (!(element instanceof Element)) {\n console.warn('[VanduoLazyLoad] observe() requires a DOM Element.');\n return;\n }\n if (typeof callback !== 'function') {\n console.warn('[VanduoLazyLoad] observe() requires a callback function.');\n return;\n }\n // Already observed \u2014 ignore\n if (_observerMap.has(element)) return;\n\n const threshold = (options && options.threshold != null) ? options.threshold : 0;\n const rootMargin = (options && options.rootMargin) ? options.rootMargin : '0px';\n\n const observer = new IntersectionObserver(function (entries, obs) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n obs.unobserve(entry.target);\n _observerMap.delete(entry.target);\n try {\n callback(entry.target);\n } catch (e) {\n console.error('[VanduoLazyLoad] Callback threw:', e);\n }\n }\n });\n }, { threshold: threshold, rootMargin: rootMargin });\n\n _observerMap.set(element, observer);\n observer.observe(element);\n },\n\n /**\n * Stop observing an element that was previously passed to observe().\n * @param {Element} element\n */\n unobserve: function (element) {\n const observer = _observerMap.get(element);\n if (observer) {\n observer.unobserve(element);\n _observerMap.delete(element);\n }\n },\n\n /**\n * Stop observing ALL currently observed elements.\n */\n unobserveAll: function () {\n _observerMap.forEach(function (observer, element) {\n observer.unobserve(element);\n });\n _observerMap.clear();\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * HIGH-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fetch an HTML partial and inject it into `containerEl` when the\n * container enters the viewport. A placeholder is shown immediately.\n *\n * @param {string} url URL of the HTML partial to fetch\n * @param {Element} containerEl Target element whose content will be replaced\n * @param {{\n * placeholder?: 'skeleton'|'spinner'|string,\n * threshold?: number,\n * rootMargin?: string,\n * onLoaded?: function(Element): void,\n * onError?: function(Error): void\n * }} [options]\n */\n loadSection: function (url, containerEl, options) {\n if (typeof url !== 'string' || !url) {\n console.warn('[VanduoLazyLoad] loadSection() requires a non-empty URL string.');\n return;\n }\n if (!(containerEl instanceof Element)) {\n console.warn('[VanduoLazyLoad] loadSection() requires a DOM Element as containerEl.');\n return;\n }\n // Reject cross-origin URLs to prevent SSRF-style fetch abuse\n if (!_isSafeUrl(url)) {\n console.error('[VanduoLazyLoad] loadSection() blocked cross-origin URL:', url);\n return;\n }\n\n const opts = options || {};\n // Placeholders are known-safe static HTML strings built internally\n const placeholderHtml = _resolvePlaceholder(opts.placeholder);\n\n // Use _safeInjectHtml instead of innerHTML to prevent XSS from caller-supplied placeholders\n _safeInjectHtml(containerEl, placeholderHtml);\n _dispatch(containerEl, 'lazysection:loading', { url: url });\n\n // Fetch when visible\n this.observe(containerEl, function () {\n const controller = new window.AbortController();\n const timeoutId = setTimeout(function () { controller.abort(); }, 10000);\n\n window.fetch(url, { signal: controller.signal })\n .then(function (res) {\n clearTimeout(timeoutId);\n if (!res.ok) throw new Error('HTTP ' + res.status);\n return res.text();\n })\n .then(function (html) {\n // Use DOMParser to parse fetched content safely, avoiding\n // raw innerHTML assignment of externally-sourced strings\n _safeInjectHtml(containerEl, html);\n _dispatch(containerEl, 'lazysection:loaded', { url: url });\n // Re-init Vanduo components inside the new content\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.init();\n }\n if (typeof opts.onLoaded === 'function') {\n opts.onLoaded(containerEl);\n }\n })\n .catch(function (err) {\n // Build error node via DOM APIs \u2014 no dynamic HTML strings\n const alertEl = document.createElement('div');\n alertEl.className = 'vd-alert vd-alert-error';\n alertEl.setAttribute('role', 'alert');\n const msgEl = document.createElement('span');\n msgEl.textContent = 'Failed to load content. ';\n const detailEl = document.createElement('small');\n detailEl.style.opacity = '0.7';\n detailEl.textContent = err.message;\n alertEl.appendChild(msgEl);\n alertEl.appendChild(detailEl);\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n containerEl.appendChild(alertEl);\n _dispatch(containerEl, 'lazysection:error', { url: url, error: err });\n console.error('[VanduoLazyLoad] loadSection failed:', err);\n if (typeof opts.onError === 'function') {\n opts.onError(err);\n }\n });\n }, { threshold: opts.threshold, rootMargin: opts.rootMargin });\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * ATTRIBUTE-DRIVEN INIT\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Scan the DOM for [data-vd-lazy] elements and wire them up.\n * Safe to call multiple times \u2014 already-observed elements are skipped.\n */\n init: function () {\n const self = this;\n const elements = document.querySelectorAll('[data-vd-lazy]');\n elements.forEach(function (el) {\n // Skip already-observed or already-loaded elements\n if (_observerMap.has(el) || el.dataset.vdLazyState === 'loading' || el.dataset.vdLazyState === 'loaded') return;\n\n const url = el.getAttribute('data-vd-lazy');\n if (!url) return;\n\n el.dataset.vdLazyState = 'loading';\n const placeholder = el.getAttribute('data-vd-lazy-placeholder') || 'skeleton';\n\n self.loadSection(url, el, {\n placeholder: placeholder,\n onLoaded: function () {\n el.dataset.vdLazyState = 'loaded';\n },\n onError: function () {\n el.dataset.vdLazyState = 'error';\n }\n });\n });\n }\n };\n\n /* \u2500\u2500 Register with Vanduo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('LazyLoad', VanduoLazyLoad);\n }\n\n /* \u2500\u2500 Global convenience alias \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n window.VanduoLazyLoad = VanduoLazyLoad;\n\n})();\n", "/**\n * Vanduo Framework - Glass Scroll Activation\n * Generic scroll-aware glass activation via IntersectionObserver.\n *\n * Usage:\n * Add `data-glass-scroll` to any element carrying a `.vd-glass*` class.\n * By default the previous sibling is used as the sentinel.\n * Point to a custom sentinel via `data-glass-sentinel=\"\"`.\n *\n * Behaviour:\n * - Adds `.is-glass-active` when the sentinel leaves the viewport (scrolled past).\n * - Removes `.is-glass-active` when the sentinel re-enters the viewport.\n */\n(function () {\n 'use strict';\n\n const GlassScroll = {\n /** @type {Map} */\n observers: new Map(),\n\n init: function () {\n document.querySelectorAll('[data-glass-scroll]').forEach(el => {\n if (this.observers.has(el)) return;\n this.initElement(el);\n });\n },\n\n /**\n * Wire up a single scroll-activated glass element.\n * @param {HTMLElement} el\n */\n initElement: function (el) {\n const sentinelSelector = el.dataset.glassSentinel;\n let sentinel;\n\n if (sentinelSelector) {\n sentinel = document.querySelector(sentinelSelector);\n }\n\n if (!sentinel) {\n // Fall back to the previous sibling element\n sentinel = el.previousElementSibling;\n }\n\n if (!sentinel) {\n // No sentinel available \u2014 activate immediately so glass is always shown\n el.classList.add('is-glass-active');\n return;\n }\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n // Active when sentinel is NOT intersecting (scrolled past it)\n el.classList.toggle('is-glass-active', !entry.isIntersecting);\n });\n },\n { threshold: 0, rootMargin: '0px' }\n );\n\n observer.observe(sentinel);\n this.observers.set(el, observer);\n },\n\n /**\n * Disconnect and remove a single element's observer.\n * @param {HTMLElement} el\n */\n destroy: function (el) {\n const observer = this.observers.get(el);\n if (observer) {\n observer.disconnect();\n this.observers.delete(el);\n }\n },\n\n destroyAll: function () {\n this.observers.forEach((observer, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('glassScroll', GlassScroll);\n }\n\n window.VanduoGlassScroll = GlassScroll;\n})();\n", "/**\n * Vanduo Framework - Water Morph Effect Component\n * Liquid wave content-swap animation on click\n *\n * Usage:\n * Add .vd-morph or [data-vd-morph] to any element.\n * Provide .vd-morph-content.vd-morph-current and .vd-morph-content.vd-morph-next children.\n * Wave and shine layers are auto-created if absent.\n *\n * JS API:\n * VanduoMorph.morph(el) \u2014 trigger morph programmatically (from center)\n * VanduoMorph.destroy(el) \u2014 tear down listeners for one element\n * VanduoMorph.destroyAll() \u2014 tear down all instances\n */\n\n(function () {\n 'use strict';\n\n const MORPH_DURATION_MS = 750;\n\n const Morph = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-morph, [data-vd-morph]');\n elements.forEach(function (el) {\n if (Morph.instances.has(el)) return;\n if (el.getAttribute('data-vd-morph') === 'manual') return;\n Morph.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n Morph._ensureLayers(el);\n\n const cleanup = [];\n let morphing = false;\n\n const handleClick = function (e) {\n if (morphing) return;\n Morph._runMorph(el, e, function () { morphing = false; });\n morphing = true;\n };\n\n el.addEventListener('click', handleClick);\n cleanup.push(function () { el.removeEventListener('click', handleClick); });\n\n this.instances.set(el, { cleanup: cleanup });\n },\n\n morph: function (el) {\n if (!el) return;\n if (!this.instances.has(el)) this.initInstance(el);\n this._runMorph(el, null, null);\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(function (fn) { fn(); });\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach(function (_, el) { Morph.destroy(el); });\n },\n\n /* \u2500\u2500 Internal helpers \u2500\u2500 */\n\n _ensureLayers: function (el) {\n if (!el.querySelector('.vd-morph-wave')) {\n const wave = document.createElement('span');\n wave.className = 'vd-morph-wave';\n wave.setAttribute('aria-hidden', 'true');\n el.insertBefore(wave, el.firstChild);\n }\n if (!el.querySelector('.vd-morph-shine')) {\n const shine = document.createElement('span');\n shine.className = 'vd-morph-shine';\n shine.setAttribute('aria-hidden', 'true');\n const waveEl = el.querySelector('.vd-morph-wave');\n if (waveEl && waveEl.nextSibling) {\n el.insertBefore(shine, waveEl.nextSibling);\n } else {\n el.insertBefore(shine, el.firstChild);\n }\n }\n },\n\n _runMorph: function (el, pointerEvent, onComplete) {\n const wave = el.querySelector('.vd-morph-wave');\n if (wave) {\n const rect = el.getBoundingClientRect();\n const cx = rect.left + rect.width / 2;\n const cy = rect.top + rect.height / 2;\n const px = pointerEvent ? (pointerEvent.clientX || cx) : cx;\n const py = pointerEvent ? (pointerEvent.clientY || cy) : cy;\n wave.style.left = (px - rect.left) + 'px';\n wave.style.top = (py - rect.top) + 'px';\n }\n\n el.classList.add('is-morphing');\n\n let duration = MORPH_DURATION_MS;\n const custom = getComputedStyle(el).getPropertyValue('--morph-duration');\n if (custom) {\n const parsed = parseFloat(custom);\n if (!isNaN(parsed)) duration = parsed * (custom.indexOf('ms') !== -1 ? 1 : 1000);\n }\n\n setTimeout(function () {\n el.classList.remove('is-morphing');\n\n const current = el.querySelector('.vd-morph-current');\n const next = el.querySelector('.vd-morph-next');\n if (current && next) {\n current.classList.remove('vd-morph-current');\n current.classList.add('vd-morph-next');\n next.classList.remove('vd-morph-next');\n next.classList.add('vd-morph-current');\n }\n\n el.classList.add('morph-done');\n setTimeout(function () { el.classList.remove('morph-done'); }, 350);\n\n if (typeof onComplete === 'function') onComplete();\n }, duration);\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('morph', Morph);\n }\n\n window.VanduoMorph = Morph;\n\n})();\n", "/**\n * Vanduo Framework - Flow (Carousel/Slider) Component\n * Touch-enabled carousel with slide/fade transitions, autoplay, indicators\n */\n\n(function () {\n 'use strict';\n\n const Flow = {\n instances: new Map(),\n\n init: function () {\n const carousels = document.querySelectorAll('.vd-flow, .vd-carousel');\n carousels.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const track = el.querySelector('.vd-flow-track');\n if (!track) return;\n\n const slides = Array.from(track.querySelectorAll('.vd-flow-slide'));\n if (slides.length === 0) return;\n\n const isFade = el.classList.contains('vd-flow-fade');\n const autoplay = el.hasAttribute('data-vd-autoplay');\n const interval = parseInt(el.getAttribute('data-vd-interval'), 10) || 5000;\n const loop = el.getAttribute('data-vd-loop') !== 'false';\n\n const state = {\n current: 0,\n total: slides.length,\n autoplayTimer: null,\n isFade: isFade,\n loop: loop,\n isDragging: false,\n startX: 0,\n currentX: 0,\n threshold: 50\n };\n\n const cleanup = [];\n\n // Set initial active slide\n slides.forEach((slide, i) => {\n slide.setAttribute('role', 'group');\n slide.setAttribute('aria-roledescription', 'slide');\n slide.setAttribute('aria-label', 'Slide ' + (i + 1) + ' of ' + slides.length);\n if (i === 0) slide.classList.add('is-active');\n });\n\n el.setAttribute('role', 'region');\n el.setAttribute('aria-roledescription', 'carousel');\n if (!el.getAttribute('aria-label')) {\n el.setAttribute('aria-label', 'Carousel');\n }\n\n // Live region for announcements\n const liveRegion = document.createElement('div');\n liveRegion.setAttribute('aria-live', 'polite');\n liveRegion.setAttribute('aria-atomic', 'true');\n liveRegion.className = 'sr-only';\n liveRegion.style.cssText = 'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);';\n el.appendChild(liveRegion);\n\n const goTo = (index, announce) => {\n if (announce === undefined) announce = true;\n let target = index;\n if (state.loop) {\n target = ((index % state.total) + state.total) % state.total;\n } else {\n target = Math.max(0, Math.min(index, state.total - 1));\n }\n\n const prev = state.current;\n state.current = target;\n\n if (state.isFade) {\n slides.forEach((s, i) => {\n s.classList.toggle('is-active', i === target);\n });\n } else {\n track.style.transform = 'translateX(-' + (target * 100) + '%)';\n }\n\n // Update indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.classList.toggle('is-active', i === target);\n ind.setAttribute('aria-selected', i === target ? 'true' : 'false');\n });\n\n // Update slide ARIA\n slides.forEach((s, i) => {\n s.setAttribute('aria-hidden', i !== target ? 'true' : 'false');\n });\n\n if (announce) {\n liveRegion.textContent = 'Slide ' + (target + 1) + ' of ' + state.total;\n }\n\n el.dispatchEvent(new CustomEvent('flow:change', {\n detail: { current: target, previous: prev, total: state.total }\n }));\n };\n\n const next = () => goTo(state.current + 1);\n const prev = () => goTo(state.current - 1);\n\n // Controls\n const prevBtn = el.querySelector('.vd-flow-prev');\n const nextBtn = el.querySelector('.vd-flow-next');\n\n if (prevBtn) {\n const h = () => prev();\n prevBtn.addEventListener('click', h);\n cleanup.push(() => prevBtn.removeEventListener('click', h));\n }\n if (nextBtn) {\n const h = () => next();\n nextBtn.addEventListener('click', h);\n cleanup.push(() => nextBtn.removeEventListener('click', h));\n }\n\n // Indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.setAttribute('role', 'tab');\n ind.setAttribute('aria-selected', i === 0 ? 'true' : 'false');\n ind.setAttribute('aria-label', 'Go to slide ' + (i + 1));\n const h = () => goTo(i);\n ind.addEventListener('click', h);\n cleanup.push(() => ind.removeEventListener('click', h));\n });\n\n // Keyboard navigation\n const keyHandler = (e) => {\n if (e.key === 'ArrowLeft') { prev(); e.preventDefault(); }\n if (e.key === 'ArrowRight') { next(); e.preventDefault(); }\n };\n el.setAttribute('tabindex', '0');\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n // Touch / pointer support\n const pointerDown = (e) => {\n state.isDragging = true;\n state.startX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n state.currentX = state.startX;\n el.classList.add('is-dragging');\n };\n\n const pointerMove = (e) => {\n if (!state.isDragging) return;\n state.currentX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n };\n\n const pointerUp = () => {\n if (!state.isDragging) return;\n state.isDragging = false;\n el.classList.remove('is-dragging');\n const diff = state.startX - state.currentX;\n if (Math.abs(diff) > state.threshold) {\n if (diff > 0) next();\n else prev();\n }\n };\n\n el.addEventListener('mousedown', pointerDown);\n el.addEventListener('mousemove', pointerMove);\n el.addEventListener('mouseup', pointerUp);\n el.addEventListener('mouseleave', pointerUp);\n el.addEventListener('touchstart', pointerDown, { passive: true });\n el.addEventListener('touchmove', pointerMove, { passive: true });\n el.addEventListener('touchend', pointerUp);\n\n cleanup.push(\n () => el.removeEventListener('mousedown', pointerDown),\n () => el.removeEventListener('mousemove', pointerMove),\n () => el.removeEventListener('mouseup', pointerUp),\n () => el.removeEventListener('mouseleave', pointerUp),\n () => el.removeEventListener('touchstart', pointerDown),\n () => el.removeEventListener('touchmove', pointerMove),\n () => el.removeEventListener('touchend', pointerUp)\n );\n\n // Autoplay\n const startAutoplay = () => {\n stopAutoplay();\n state.autoplayTimer = setInterval(next, interval);\n };\n\n const stopAutoplay = () => {\n if (state.autoplayTimer) {\n clearInterval(state.autoplayTimer);\n state.autoplayTimer = null;\n }\n };\n\n if (autoplay) {\n startAutoplay();\n const pauseHandler = () => stopAutoplay();\n const resumeHandler = () => startAutoplay();\n el.addEventListener('mouseenter', pauseHandler);\n el.addEventListener('mouseleave', resumeHandler);\n el.addEventListener('focusin', pauseHandler);\n el.addEventListener('focusout', resumeHandler);\n cleanup.push(\n () => el.removeEventListener('mouseenter', pauseHandler),\n () => el.removeEventListener('mouseleave', resumeHandler),\n () => el.removeEventListener('focusin', pauseHandler),\n () => el.removeEventListener('focusout', resumeHandler),\n () => stopAutoplay()\n );\n }\n\n // Initial ARIA state\n goTo(0, false);\n\n this.instances.set(el, {\n cleanup: cleanup,\n goTo: goTo,\n next: next,\n prev: prev,\n getState: () => ({ ...state })\n });\n },\n\n goTo: function (el, index) {\n const instance = this.instances.get(el);\n if (instance) instance.goTo(index);\n },\n\n next: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.next();\n },\n\n prev: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.prev();\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('flow', Flow);\n }\n\n window.VanduoFlow = Flow;\n\n})();\n", "/**\n * Vanduo Framework - Bubble (Popover) Component\n * Click-triggered rich HTML popover, reuses tooltip positioning concepts\n */\n\n(function () {\n 'use strict';\n\n const Bubble = {\n instances: new Map(),\n _globalCleanups: [],\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-bubble], [data-vd-popover]');\n triggers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n\n if (this._globalCleanups.length === 0) {\n const outsideClick = (e) => {\n this.instances.forEach((inst, trigger) => {\n if (!inst.popover.contains(e.target) && !trigger.contains(e.target)) {\n this.hide(trigger);\n }\n });\n };\n const escHandler = (e) => {\n if (e.key === 'Escape') {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n }\n };\n document.addEventListener('click', outsideClick, true);\n document.addEventListener('keydown', escHandler);\n this._globalCleanups.push(\n () => document.removeEventListener('click', outsideClick, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n }\n },\n\n initInstance: function (trigger) {\n const cleanup = [];\n const placement = trigger.getAttribute('data-vd-bubble-placement') ||\n trigger.getAttribute('data-vd-popover-placement') || 'bottom';\n\n // Build popover element\n const popover = document.createElement('div');\n popover.className = 'vd-bubble-content';\n popover.setAttribute('role', 'dialog');\n popover.setAttribute('aria-modal', 'false');\n popover.setAttribute('data-placement', placement);\n\n const title = trigger.getAttribute('data-vd-bubble-title') ||\n trigger.getAttribute('data-vd-popover-title');\n const content = trigger.getAttribute('data-vd-bubble') ||\n trigger.getAttribute('data-vd-popover') || '';\n const htmlContent = trigger.getAttribute('data-vd-bubble-html') ||\n trigger.getAttribute('data-vd-popover-html');\n\n if (title) {\n const header = document.createElement('div');\n header.className = 'vd-bubble-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const closeBtn = document.createElement('button');\n closeBtn.className = 'vd-bubble-close';\n closeBtn.setAttribute('aria-label', 'Close');\n closeBtn.innerHTML = '×';\n header.appendChild(titleSpan);\n header.appendChild(closeBtn);\n popover.appendChild(header);\n\n const closeHandler = (e) => { e.stopPropagation(); this.hide(trigger); };\n closeBtn.addEventListener('click', closeHandler);\n cleanup.push(() => closeBtn.removeEventListener('click', closeHandler));\n }\n\n const body = document.createElement('div');\n body.className = 'vd-bubble-body';\n if (htmlContent) {\n if (typeof sanitizeHtml === 'function') {\n body.innerHTML = sanitizeHtml(htmlContent);\n } else {\n body.textContent = htmlContent;\n }\n } else {\n body.textContent = content;\n }\n popover.appendChild(body);\n\n document.body.appendChild(popover);\n\n // ARIA on trigger\n const popId = 'vd-bubble-' + Math.random().toString(36).slice(2, 9);\n popover.id = popId;\n trigger.setAttribute('aria-haspopup', 'dialog');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.setAttribute('aria-controls', popId);\n\n // Toggle on click\n const toggleHandler = (e) => {\n e.stopPropagation();\n if (popover.classList.contains('is-visible')) {\n this.hide(trigger);\n } else {\n this.hideAll();\n this.show(trigger);\n }\n };\n trigger.addEventListener('click', toggleHandler);\n cleanup.push(() => trigger.removeEventListener('click', toggleHandler));\n\n this.instances.set(trigger, { popover, cleanup, placement });\n },\n\n position: function (trigger, popover, placement) {\n const rect = trigger.getBoundingClientRect();\n const popRect = popover.getBoundingClientRect();\n const gap = 10;\n let top, left;\n\n switch (placement) {\n case 'top':\n top = rect.top - popRect.height - gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n break;\n case 'left':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.left - popRect.width - gap + window.scrollX;\n break;\n case 'right':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.right + gap + window.scrollX;\n break;\n default: // bottom\n top = rect.bottom + gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n }\n\n // Clamp to viewport\n left = Math.max(8, Math.min(left, window.innerWidth - popRect.width - 8));\n top = Math.max(8, top);\n\n popover.style.top = top + 'px';\n popover.style.left = left + 'px';\n },\n\n show: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n const { popover, placement } = instance;\n\n popover.style.display = 'block';\n popover.classList.add('is-visible');\n trigger.setAttribute('aria-expanded', 'true');\n\n requestAnimationFrame(() => {\n this.position(trigger, popover, placement);\n });\n\n trigger.dispatchEvent(new CustomEvent('bubble:show', { bubbles: true }));\n },\n\n hide: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.popover.classList.remove('is-visible');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.dispatchEvent(new CustomEvent('bubble:hide', { bubbles: true }));\n },\n\n hideAll: function () {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n },\n\n destroy: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n if (instance.popover.parentNode) {\n instance.popover.parentNode.removeChild(instance.popover);\n }\n trigger.removeAttribute('aria-haspopup');\n trigger.removeAttribute('aria-expanded');\n trigger.removeAttribute('aria-controls');\n this.instances.delete(trigger);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, trigger) => this.destroy(trigger));\n this._globalCleanups.forEach(fn => fn());\n this._globalCleanups = [];\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('bubble', Bubble);\n }\n\n window.VanduoBubble = Bubble;\n\n})();\n", "/**\n * Vanduo Framework - Waypoint (Scrollspy) Component\n * Highlights navigation links based on scroll position using IntersectionObserver\n */\n\n(function () {\n 'use strict';\n\n const Waypoint = {\n instances: new Map(),\n\n init: function () {\n const navs = document.querySelectorAll('[data-vd-waypoint-nav], [data-vd-scrollspy-nav]');\n navs.forEach(nav => {\n if (this.instances.has(nav)) return;\n this.initInstance(nav);\n });\n },\n\n initInstance: function (nav) {\n const links = Array.from(nav.querySelectorAll('a[href^=\"#\"]'));\n if (links.length === 0) return;\n\n const cleanup = [];\n const offset = parseInt(nav.getAttribute('data-vd-waypoint-offset') || '80', 10);\n const sections = [];\n\n links.forEach(link => {\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.setAttribute('data-vd-waypoint-section', '');\n sections.push({ id, link, section });\n }\n });\n\n if (sections.length === 0) return;\n\n const activeSections = new Set();\n\n const setActive = (id) => {\n links.forEach(l => l.classList.remove('is-active'));\n const target = links.find(l => l.getAttribute('href') === '#' + id);\n if (target) {\n target.classList.add('is-active');\n nav.dispatchEvent(new CustomEvent('waypoint:change', {\n detail: { activeId: id, link: target }\n }));\n }\n };\n\n const rootMargin = '-' + offset + 'px 0px -40% 0px';\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n activeSections.add(entry.target.id);\n } else {\n activeSections.delete(entry.target.id);\n }\n });\n\n // Pick the topmost visible section\n for (let i = 0; i < sections.length; i++) {\n if (activeSections.has(sections[i].id)) {\n setActive(sections[i].id);\n return;\n }\n }\n }, {\n rootMargin: rootMargin,\n threshold: 0\n });\n\n sections.forEach(s => observer.observe(s.section));\n\n // Smooth scroll on click\n links.forEach(link => {\n const clickHandler = (e) => {\n e.preventDefault();\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth' });\n setActive(id);\n }\n };\n link.addEventListener('click', clickHandler);\n cleanup.push(() => link.removeEventListener('click', clickHandler));\n });\n\n cleanup.push(() => observer.disconnect());\n\n this.instances.set(nav, { observer, cleanup, sections, setActive });\n },\n\n refresh: function (nav) {\n this.destroy(nav);\n this.initInstance(nav);\n },\n\n destroy: function (nav) {\n const instance = this.instances.get(nav);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(nav);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, nav) => this.destroy(nav));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('waypoint', Waypoint);\n }\n\n window.VanduoWaypoint = Waypoint;\n\n})();\n", "/**\n * Vanduo Framework - Ripple (Waves Effect) Component\n * Adds expanding circle animation on click at pointer position\n */\n\n(function () {\n 'use strict';\n\n const Ripple = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-ripple, [data-vd-ripple]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n\n const createWave = (e) => {\n const rect = el.getBoundingClientRect();\n const size = Math.max(rect.width, rect.height);\n const x = (e.clientX || (e.touches && e.touches[0].clientX) || rect.left + rect.width / 2) - rect.left - size / 2;\n const y = (e.clientY || (e.touches && e.touches[0].clientY) || rect.top + rect.height / 2) - rect.top - size / 2;\n\n const wave = document.createElement('span');\n wave.className = 'vd-ripple-wave';\n wave.style.width = size + 'px';\n wave.style.height = size + 'px';\n wave.style.left = x + 'px';\n wave.style.top = y + 'px';\n\n el.appendChild(wave);\n\n wave.addEventListener('animationend', () => {\n if (wave.parentNode) wave.parentNode.removeChild(wave);\n });\n };\n\n el.addEventListener('mousedown', createWave);\n el.addEventListener('touchstart', createWave, { passive: true });\n\n cleanup.push(\n () => el.removeEventListener('mousedown', createWave),\n () => el.removeEventListener('touchstart', createWave)\n );\n\n this.instances.set(el, { cleanup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n // Remove any lingering wave elements\n el.querySelectorAll('.vd-ripple-wave').forEach(w => w.remove());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('ripple', Ripple);\n }\n\n window.VanduoRipple = Ripple;\n\n})();\n", "/**\n * Vanduo Framework - Affix (Sticky) Component\n * Uses IntersectionObserver to toggle .is-stuck within the nearest scrollable parent\n */\n\n(function () {\n 'use strict';\n\n function isScrollable(element) {\n if (!element || element === document.body) return false;\n\n const style = window.getComputedStyle(element);\n const overflowY = style.overflowY;\n const overflowX = style.overflowX;\n const canScrollY = /(auto|scroll|overlay)/.test(overflowY) && element.scrollHeight > element.clientHeight;\n const canScrollX = /(auto|scroll|overlay)/.test(overflowX) && element.scrollWidth > element.clientWidth;\n\n return canScrollY || canScrollX;\n }\n\n function getScrollParent(element) {\n let parent = element.parentElement;\n\n while (parent && parent !== document.body && parent !== document.documentElement) {\n if (isScrollable(parent)) return parent;\n parent = parent.parentElement;\n }\n\n return null;\n }\n\n const Affix = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-affix, .vd-sticky, [data-vd-affix]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const parsedOffset = parseInt(el.getAttribute('data-vd-affix-offset') || '0', 10);\n const offset = Number.isNaN(parsedOffset) ? 0 : parsedOffset;\n const scrollParent = getScrollParent(el);\n let isStuck = false;\n\n const sentinel = document.createElement('div');\n sentinel.style.cssText = 'display:block;height:1px;margin-bottom:-1px;visibility:hidden;pointer-events:none;';\n el.parentNode.insertBefore(sentinel, el);\n\n el.style.setProperty('--affix-top-offset', offset + 'px');\n\n function stick() {\n if (isStuck) return;\n isStuck = true;\n el.classList.add('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:stuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n function unstick() {\n if (!isStuck) return;\n isStuck = false;\n el.classList.remove('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:unstuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n const observer = new IntersectionObserver(function (entries) {\n entries.forEach(entry => {\n if (!entry.isIntersecting) {\n stick();\n } else {\n unstick();\n }\n });\n }, {\n root: scrollParent,\n rootMargin: '-' + offset + 'px 0px 0px 0px',\n threshold: 0\n });\n\n observer.observe(sentinel);\n\n cleanup.push(\n () => observer.disconnect(),\n () => { if (sentinel.parentNode) sentinel.parentNode.removeChild(sentinel); },\n () => {\n el.classList.remove('is-stuck');\n el.style.removeProperty('--affix-top-offset');\n }\n );\n\n this.instances.set(el, { cleanup, observer, sentinel, scrollParent });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n el.classList.remove('is-stuck');\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('affix', Affix);\n }\n\n window.VanduoAffix = Affix;\n\n})();\n", "/**\n * Vanduo Framework - Suggest (Autocomplete) Component\n * Dropdown suggestion list with keyboard navigation, static/async data sources\n */\n\n(function () {\n 'use strict';\n\n /**\n * Escape HTML entities to prevent XSS when inserting into innerHTML\n * @param {string} text\n * @returns {string}\n */\n function _escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n const Suggest = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-suggest], [data-vd-autocomplete]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const minChars = parseInt(input.getAttribute('data-vd-suggest-min-chars') || '1', 10);\n const url = input.getAttribute('data-vd-suggest-url') || '';\n const staticData = input.getAttribute('data-vd-suggest') || input.getAttribute('data-vd-autocomplete') || '';\n let items = [];\n\n try { items = JSON.parse(staticData); } catch (_e) {\n items = staticData.split(',').map(s => s.trim()).filter(Boolean);\n }\n\n // Wrap input if not already wrapped\n let wrapper = input.closest('.vd-suggest-wrapper, .vd-autocomplete-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create dropdown list\n const list = document.createElement('ul');\n list.className = 'vd-suggest-list';\n list.setAttribute('role', 'listbox');\n const listId = 'vd-suggest-' + Math.random().toString(36).slice(2, 9);\n list.id = listId;\n wrapper.appendChild(list);\n\n // ARIA\n input.setAttribute('role', 'combobox');\n input.setAttribute('aria-autocomplete', 'list');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('aria-controls', listId);\n input.setAttribute('autocomplete', 'off');\n\n let highlighted = -1;\n let currentItems = [];\n let debounceTimer = null;\n\n const renderItems = (filtered, query) => {\n list.innerHTML = '';\n currentItems = filtered;\n highlighted = -1;\n\n if (filtered.length === 0) {\n const empty = document.createElement('li');\n empty.className = 'vd-suggest-empty';\n empty.textContent = 'No results';\n list.appendChild(empty);\n return;\n }\n\n filtered.forEach((item, i) => {\n const li = document.createElement('li');\n li.className = 'vd-suggest-item';\n li.setAttribute('role', 'option');\n li.id = listId + '-item-' + i;\n\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n if (query) {\n // Escape HTML first to prevent XSS, then highlight matches in the safe string\n const escaped = _escapeHtml(text);\n const re = new RegExp('(' + query.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n li.innerHTML = escaped.replace(re, '$1');\n } else {\n li.textContent = text;\n }\n\n li.addEventListener('click', () => selectItem(i));\n list.appendChild(li);\n });\n };\n\n const open = () => {\n list.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n list.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n highlighted = -1;\n input.removeAttribute('aria-activedescendant');\n };\n\n const selectItem = (index) => {\n const item = currentItems[index];\n const value = typeof item === 'object' ? (item.value || item.label || String(item)) : String(item);\n input.value = value;\n close();\n input.dispatchEvent(new CustomEvent('suggest:select', {\n detail: { value, item, index },\n bubbles: true\n }));\n };\n\n const highlight = (index) => {\n const listItems = list.querySelectorAll('.vd-suggest-item');\n listItems.forEach(li => li.classList.remove('is-highlighted'));\n if (index >= 0 && index < listItems.length) {\n highlighted = index;\n listItems[index].classList.add('is-highlighted');\n input.setAttribute('aria-activedescendant', listItems[index].id);\n listItems[index].scrollIntoView({ block: 'nearest' });\n }\n };\n\n const doSearch = async (query) => {\n if (query.length < minChars) { close(); return; }\n\n let filtered;\n if (url) {\n try {\n const separator = url.includes('?') ? '&' : '?';\n const res = await window.fetch(url + separator + 'q=' + encodeURIComponent(query));\n filtered = await res.json();\n } catch (_e) {\n filtered = [];\n }\n } else {\n const lower = query.toLowerCase();\n filtered = items.filter(item => {\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n return text.toLowerCase().includes(lower);\n });\n }\n\n renderItems(filtered, query);\n if (filtered.length > 0) open();\n else open(); // show \"no results\"\n };\n\n const inputHandler = () => {\n clearTimeout(debounceTimer);\n debounceTimer = setTimeout(() => doSearch(input.value), 200);\n };\n\n const keyHandler = (e) => {\n if (!list.classList.contains('is-open')) {\n if (e.key === 'ArrowDown') { doSearch(input.value); e.preventDefault(); }\n return;\n }\n\n const total = currentItems.length;\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n highlight(highlighted < total - 1 ? highlighted + 1 : 0);\n break;\n case 'ArrowUp':\n e.preventDefault();\n highlight(highlighted > 0 ? highlighted - 1 : total - 1);\n break;\n case 'Enter':\n e.preventDefault();\n if (highlighted >= 0) selectItem(highlighted);\n break;\n case 'Escape':\n close();\n break;\n }\n };\n\n const blurHandler = () => {\n setTimeout(close, 200);\n };\n\n input.addEventListener('input', inputHandler);\n input.addEventListener('keydown', keyHandler);\n input.addEventListener('blur', blurHandler);\n input.addEventListener('focus', () => { if (input.value.length >= minChars) doSearch(input.value); });\n\n cleanup.push(\n () => input.removeEventListener('input', inputHandler),\n () => input.removeEventListener('keydown', keyHandler),\n () => input.removeEventListener('blur', blurHandler),\n () => clearTimeout(debounceTimer),\n () => { if (list.parentNode) list.parentNode.removeChild(list); }\n );\n\n this.instances.set(input, { cleanup, list, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('suggest', Suggest);\n }\n\n window.VanduoSuggest = Suggest;\n\n})();\n", "/**\n * Vanduo Framework - Validate (Form Validation) Component\n * Declarative validation via data attributes with real-time and on-submit modes\n */\n\n(function () {\n 'use strict';\n\n const Validate = {\n instances: new Map(),\n\n rules: {\n required: (value) => value.trim().length > 0,\n email: (value) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value),\n url: (value) => { try { new URL(value); return true; } catch (_e) { return false; } },\n number: (value) => !isNaN(parseFloat(value)) && isFinite(value),\n min: (value, param) => value.length >= parseInt(param, 10),\n max: (value, param) => value.length <= parseInt(param, 10),\n minVal: (value, param) => parseFloat(value) >= parseFloat(param),\n maxVal: (value, param) => parseFloat(value) <= parseFloat(param),\n pattern: (value, param) => {\n try {\n // Cap regex length to prevent ReDoS from excessively complex patterns\n if (param.length > 100) return false;\n return new RegExp(param).test(value);\n } catch (_e) { return false; }\n },\n match: (value, param) => {\n try {\n const escaped = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(param) : param;\n const other = document.querySelector('[name=\"' + escaped + '\"]');\n return other ? value === other.value : false;\n } catch (_e) {\n return false;\n }\n }\n },\n\n messages: {\n required: 'This field is required',\n email: 'Please enter a valid email address',\n url: 'Please enter a valid URL',\n number: 'Please enter a valid number',\n min: 'Minimum {0} characters required',\n max: 'Maximum {0} characters allowed',\n minVal: 'Value must be at least {0}',\n maxVal: 'Value must be at most {0}',\n pattern: 'Invalid format',\n match: 'Fields do not match'\n },\n\n init: function () {\n const forms = document.querySelectorAll('[data-vd-validate], .vd-validate');\n forms.forEach(form => {\n if (this.instances.has(form)) return;\n this.initInstance(form);\n });\n },\n\n initInstance: function (form) {\n const cleanup = [];\n const mode = form.getAttribute('data-vd-validate-mode') || 'blur'; // blur | input | submit\n const fields = form.querySelectorAll('[data-vd-rules]');\n\n const validateField = (field) => {\n const rulesStr = field.getAttribute('data-vd-rules') || '';\n const rules = rulesStr.split('|').map(r => r.trim()).filter(Boolean);\n const value = field.value;\n const errors = [];\n\n for (const rule of rules) {\n const [name, ...params] = rule.split(':');\n const param = params.join(':');\n const validator = this.rules[name];\n\n if (validator && !validator(value, param)) {\n const customMsg = field.getAttribute('data-vd-msg-' + name);\n let msg = customMsg || this.messages[name] || 'Invalid';\n if (param) msg = msg.replace('{0}', param);\n errors.push(msg);\n break; // one error at a time\n }\n }\n\n this.setFieldState(field, errors);\n return errors.length === 0;\n };\n\n const validateAll = () => {\n let valid = true;\n fields.forEach(field => {\n if (!validateField(field)) valid = false;\n });\n return valid;\n };\n\n // Per-field listeners\n fields.forEach(field => {\n if (mode === 'input' || mode === 'blur') {\n const eventType = mode === 'input' ? 'input' : 'blur';\n const handler = () => validateField(field);\n field.addEventListener(eventType, handler);\n cleanup.push(() => field.removeEventListener(eventType, handler));\n\n if (mode === 'blur') {\n const inputClear = () => {\n if (field.classList.contains('is-invalid') || field.classList.contains('is-valid')) {\n validateField(field);\n }\n };\n field.addEventListener('input', inputClear);\n cleanup.push(() => field.removeEventListener('input', inputClear));\n }\n }\n });\n\n // Form submit\n const submitHandler = (e) => {\n const valid = validateAll();\n if (!valid) {\n e.preventDefault();\n e.stopPropagation();\n // Focus first invalid field\n const firstInvalid = form.querySelector('.is-invalid');\n if (firstInvalid) firstInvalid.focus();\n }\n form.dispatchEvent(new CustomEvent('validate:submit', {\n detail: { valid },\n bubbles: true\n }));\n };\n\n form.addEventListener('submit', submitHandler);\n cleanup.push(() => form.removeEventListener('submit', submitHandler));\n\n this.instances.set(form, { cleanup, validateAll, validateField });\n },\n\n setFieldState: function (field, errors) {\n const wrapper = field.closest('.vd-form-group') || field.parentElement;\n let errorEl = wrapper.querySelector('.vd-validate-error');\n\n field.classList.remove('is-valid', 'is-invalid');\n\n if (errors.length > 0) {\n field.classList.add('is-invalid');\n field.setAttribute('aria-invalid', 'true');\n if (!errorEl) {\n errorEl = document.createElement('div');\n errorEl.className = 'vd-validate-error';\n errorEl.id = 'vd-err-' + Math.random().toString(36).slice(2, 9);\n errorEl.setAttribute('role', 'alert');\n wrapper.appendChild(errorEl);\n }\n errorEl.textContent = errors[0];\n errorEl.style.display = '';\n field.setAttribute('aria-describedby', errorEl.id);\n } else if (field.value.trim()) {\n field.classList.add('is-valid');\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n } else {\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n }\n },\n\n validateForm: function (form) {\n const instance = this.instances.get(form);\n return instance ? instance.validateAll() : false;\n },\n\n addRule: function (name, validator, message) {\n this.rules[name] = validator;\n if (message) this.messages[name] = message;\n },\n\n destroy: function (form) {\n const instance = this.instances.get(form);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(form);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, form) => this.destroy(form));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('validate', Validate);\n }\n\n window.VanduoValidate = Validate;\n\n})();\n", "/**\n * Vanduo Framework - Datepicker Component\n * Calendar popup attached to input field with month/year navigation\n */\n\n(function () {\n 'use strict';\n\n const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\n const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];\n\n const Datepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-datepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const format = input.getAttribute('data-vd-datepicker-format') || 'yyyy-mm-dd';\n const minStr = input.getAttribute('data-vd-datepicker-min');\n const maxStr = input.getAttribute('data-vd-datepicker-max');\n const minDate = minStr ? new Date(minStr) : null;\n const maxDate = maxStr ? new Date(maxStr) : null;\n\n const today = new Date();\n let viewYear = today.getFullYear();\n let viewMonth = today.getMonth();\n let selectedDate = null;\n let viewMode = 'days'; // days | months | years\n\n // Parse existing value\n if (input.value) {\n const parsed = new Date(input.value);\n if (!isNaN(parsed.getTime())) {\n selectedDate = parsed;\n viewYear = parsed.getFullYear();\n viewMonth = parsed.getMonth();\n }\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-datepicker-popup';\n popup.setAttribute('role', 'dialog');\n popup.setAttribute('aria-label', 'Choose date');\n\n const wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n wrapper.appendChild(popup);\n\n const formatDate = (d) => {\n const yyyy = d.getFullYear();\n const mm = String(d.getMonth() + 1).padStart(2, '0');\n const dd = String(d.getDate()).padStart(2, '0');\n return format.replace('yyyy', yyyy).replace('mm', mm).replace('dd', dd);\n };\n\n const isDisabled = (d) => {\n if (minDate && d < minDate) return true;\n if (maxDate && d > maxDate) return true;\n return false;\n };\n\n const isSameDay = (a, b) => a && b &&\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate();\n\n const render = () => {\n popup.innerHTML = '';\n\n // Header\n const header = document.createElement('div');\n header.className = 'vd-datepicker-header';\n\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-datepicker-prev';\n prevBtn.innerHTML = '‹';\n prevBtn.setAttribute('aria-label', 'Previous');\n\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-datepicker-next';\n nextBtn.innerHTML = '›';\n nextBtn.setAttribute('aria-label', 'Next');\n\n const title = document.createElement('span');\n title.className = 'vd-datepicker-title';\n\n if (viewMode === 'days') {\n title.textContent = MONTHS[viewMonth] + ' ' + viewYear;\n title.addEventListener('click', () => { viewMode = 'months'; render(); });\n prevBtn.addEventListener('click', () => { viewMonth--; if (viewMonth < 0) { viewMonth = 11; viewYear--; } render(); });\n nextBtn.addEventListener('click', () => { viewMonth++; if (viewMonth > 11) { viewMonth = 0; viewYear++; } render(); });\n } else if (viewMode === 'months') {\n title.textContent = String(viewYear);\n title.addEventListener('click', () => { viewMode = 'years'; render(); });\n prevBtn.addEventListener('click', () => { viewYear--; render(); });\n nextBtn.addEventListener('click', () => { viewYear++; render(); });\n } else {\n const decadeStart = Math.floor(viewYear / 10) * 10;\n title.textContent = decadeStart + ' - ' + (decadeStart + 9);\n prevBtn.addEventListener('click', () => { viewYear -= 10; render(); });\n nextBtn.addEventListener('click', () => { viewYear += 10; render(); });\n }\n\n header.appendChild(prevBtn);\n header.appendChild(title);\n header.appendChild(nextBtn);\n popup.appendChild(header);\n\n if (viewMode === 'days') {\n // Weekday headers\n const weekdays = document.createElement('div');\n weekdays.className = 'vd-datepicker-weekdays';\n DAYS.forEach(d => {\n const span = document.createElement('span');\n span.textContent = d;\n weekdays.appendChild(span);\n });\n popup.appendChild(weekdays);\n\n // Days grid\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-days';\n\n const firstDay = new Date(viewYear, viewMonth, 1).getDay();\n const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();\n const daysInPrev = new Date(viewYear, viewMonth, 0).getDate();\n\n // Previous month padding\n for (let i = firstDay - 1; i >= 0; i--) {\n const btn = createDayBtn(daysInPrev - i, true);\n grid.appendChild(btn);\n }\n\n // Current month\n for (let d = 1; d <= daysInMonth; d++) {\n const date = new Date(viewYear, viewMonth, d);\n const btn = createDayBtn(d, false, date);\n grid.appendChild(btn);\n }\n\n // Next month padding\n const totalCells = firstDay + daysInMonth;\n const remaining = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7);\n for (let i = 1; i <= remaining; i++) {\n const btn = createDayBtn(i, true);\n grid.appendChild(btn);\n }\n\n popup.appendChild(grid);\n } else if (viewMode === 'months') {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-months';\n MONTHS.forEach((name, i) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-month-btn';\n btn.textContent = name.slice(0, 3);\n if (selectedDate && selectedDate.getFullYear() === viewYear && selectedDate.getMonth() === i) {\n btn.classList.add('is-selected');\n }\n btn.addEventListener('click', () => { viewMonth = i; viewMode = 'days'; render(); });\n grid.appendChild(btn);\n });\n popup.appendChild(grid);\n } else {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-years';\n const decadeStart = Math.floor(viewYear / 10) * 10;\n for (let y = decadeStart - 1; y <= decadeStart + 10; y++) {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-year-btn';\n btn.textContent = y;\n if (selectedDate && selectedDate.getFullYear() === y) btn.classList.add('is-selected');\n if (y < decadeStart || y > decadeStart + 9) btn.style.opacity = '0.4';\n btn.addEventListener('click', () => { viewYear = y; viewMode = 'months'; render(); });\n grid.appendChild(btn);\n }\n popup.appendChild(grid);\n }\n };\n\n const createDayBtn = (day, outside, date) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-day';\n btn.textContent = day;\n\n if (outside) {\n btn.classList.add('is-outside');\n btn.tabIndex = -1;\n return btn;\n }\n\n if (date && isSameDay(date, today)) btn.classList.add('is-today');\n if (date && isSameDay(date, selectedDate)) btn.classList.add('is-selected');\n if (date && isDisabled(date)) {\n btn.classList.add('is-disabled');\n return btn;\n }\n\n if (date) {\n btn.addEventListener('click', () => {\n selectedDate = date;\n viewYear = date.getFullYear();\n viewMonth = date.getMonth();\n input.value = formatDate(date);\n close();\n input.dispatchEvent(new CustomEvent('datepicker:select', {\n detail: { date, formatted: input.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n }\n\n return btn;\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n viewMode = 'days';\n };\n\n // Events\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'dialog');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close, popup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('datepicker', Datepicker);\n }\n\n window.VanduoDatepicker = Datepicker;\n\n})();\n", "/**\n * Vanduo Framework - Timepicker Component\n * Dropdown time selection with 12h/24h format and configurable step intervals\n */\n\n(function () {\n 'use strict';\n\n const Timepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-timepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const is24h = input.getAttribute('data-vd-timepicker-format') === '24h';\n const step = parseInt(input.getAttribute('data-vd-timepicker-step') || '30', 10);\n\n // Create wrapper\n let wrapper = input.closest('.vd-suggest-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-timepicker-popup';\n popup.setAttribute('role', 'listbox');\n wrapper.appendChild(popup);\n\n // Generate time slots\n const times = [];\n for (let h = 0; h < 24; h++) {\n for (let m = 0; m < 60; m += step) {\n const hh24 = String(h).padStart(2, '0');\n const mm = String(m).padStart(2, '0');\n\n if (is24h) {\n times.push({ display: hh24 + ':' + mm, value: hh24 + ':' + mm });\n } else {\n const period = h < 12 ? 'AM' : 'PM';\n const h12 = h === 0 ? 12 : (h > 12 ? h - 12 : h);\n const display = h12 + ':' + mm + ' ' + period;\n times.push({ display, value: hh24 + ':' + mm });\n }\n }\n }\n\n const render = () => {\n popup.innerHTML = '';\n times.forEach(t => {\n const item = document.createElement('div');\n item.className = 'vd-timepicker-item';\n item.setAttribute('role', 'option');\n item.textContent = t.display;\n\n if (input.value === t.value || input.value === t.display) {\n item.classList.add('is-selected');\n }\n\n item.addEventListener('click', () => {\n input.value = t.display;\n popup.querySelectorAll('.vd-timepicker-item').forEach(i => i.classList.remove('is-selected'));\n item.classList.add('is-selected');\n close();\n input.dispatchEvent(new CustomEvent('timepicker:select', {\n detail: { display: t.display, value: t.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n\n popup.appendChild(item);\n });\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n // Scroll to selected\n const selected = popup.querySelector('.is-selected');\n if (selected) selected.scrollIntoView({ block: 'center' });\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n };\n\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'listbox');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n input.readOnly = true;\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('timepicker', Timepicker);\n }\n\n window.VanduoTimepicker = Timepicker;\n\n})();\n", "/**\n * Vanduo Framework - Stepper Component\n * Multi-step progress indicator with state management\n */\n\n(function () {\n 'use strict';\n\n const Stepper = {\n instances: new Map(),\n\n init: function () {\n const steppers = document.querySelectorAll('.vd-stepper');\n steppers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const items = Array.from(el.querySelectorAll('.vd-stepper-item'));\n const isClickable = el.classList.contains('vd-stepper-clickable');\n let currentIndex = items.findIndex(i => i.classList.contains('is-active'));\n if (currentIndex === -1) currentIndex = 0;\n\n const setStep = (index) => {\n if (index < 0 || index >= items.length) return;\n const prev = currentIndex;\n currentIndex = index;\n\n items.forEach((item, i) => {\n item.classList.remove('is-active', 'is-completed');\n if (i < index) item.classList.add('is-completed');\n else if (i === index) item.classList.add('is-active');\n });\n\n el.dispatchEvent(new CustomEvent('stepper:change', {\n detail: { current: index, previous: prev, total: items.length },\n bubbles: true\n }));\n };\n\n if (isClickable) {\n items.forEach((item, i) => {\n const handler = () => setStep(i);\n item.addEventListener('click', handler);\n cleanup.push(() => item.removeEventListener('click', handler));\n });\n }\n\n // Initialize current state\n setStep(currentIndex);\n\n this.instances.set(el, {\n cleanup,\n setStep,\n next: () => setStep(currentIndex + 1),\n prev: () => setStep(currentIndex - 1),\n getCurrent: () => currentIndex\n });\n },\n\n setStep: function (el, index) {\n const inst = this.instances.get(el);\n if (inst) inst.setStep(index);\n },\n\n next: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.next();\n },\n\n prev: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.prev();\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('stepper', Stepper);\n }\n\n window.VanduoStepper = Stepper;\n\n})();\n", "/**\n * Vanduo Framework - Rating Component\n * Star-based rating input with hover preview and read-only mode\n */\n\n(function () {\n 'use strict';\n\n const Rating = {\n instances: new Map(),\n\n init: function () {\n const ratings = document.querySelectorAll('[data-vd-rating]');\n ratings.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const max = parseInt(el.getAttribute('data-vd-rating-max') || '5', 10);\n const initialValue = parseFloat(el.getAttribute('data-vd-rating-value') || '0');\n const readonly = el.classList.contains('vd-rating-readonly') || el.hasAttribute('data-vd-rating-readonly');\n let currentValue = initialValue;\n\n el.classList.add('vd-rating');\n el.setAttribute('role', 'radiogroup');\n el.setAttribute('aria-label', el.getAttribute('aria-label') || 'Rating');\n\n // Clear existing stars\n el.innerHTML = '';\n\n // Create stars\n const stars = [];\n for (let i = 1; i <= max; i++) {\n const star = document.createElement('button');\n star.type = 'button';\n star.className = 'vd-rating-star';\n star.setAttribute('role', 'radio');\n star.setAttribute('aria-label', i + ' star' + (i > 1 ? 's' : ''));\n star.setAttribute('aria-checked', i <= currentValue ? 'true' : 'false');\n if (readonly) star.tabIndex = -1;\n stars.push(star);\n el.appendChild(star);\n }\n\n // Value display\n const valueDisplay = document.createElement('span');\n valueDisplay.className = 'vd-rating-value';\n valueDisplay.textContent = currentValue > 0 ? currentValue.toString() : '';\n el.appendChild(valueDisplay);\n\n const updateStars = (value) => {\n stars.forEach((star, i) => {\n star.classList.remove('is-active', 'is-half');\n const starNum = i + 1;\n if (starNum <= Math.floor(value)) {\n star.classList.add('is-active');\n } else if (starNum - 0.5 <= value) {\n star.classList.add('is-half');\n }\n star.setAttribute('aria-checked', starNum <= value ? 'true' : 'false');\n });\n valueDisplay.textContent = value > 0 ? value.toString() : '';\n };\n\n updateStars(currentValue);\n\n if (!readonly) {\n stars.forEach((star, i) => {\n const enterHandler = () => {\n stars.forEach((s, j) => {\n s.classList.toggle('is-hovered', j <= i);\n });\n };\n const leaveHandler = () => {\n stars.forEach(s => s.classList.remove('is-hovered'));\n };\n const clickHandler = () => {\n currentValue = i + 1;\n el.setAttribute('data-vd-rating-value', currentValue);\n updateStars(currentValue);\n el.dispatchEvent(new CustomEvent('rating:change', {\n detail: { value: currentValue, max },\n bubbles: true\n }));\n };\n\n star.addEventListener('mouseenter', enterHandler);\n star.addEventListener('mouseleave', leaveHandler);\n star.addEventListener('click', clickHandler);\n\n cleanup.push(\n () => star.removeEventListener('mouseenter', enterHandler),\n () => star.removeEventListener('mouseleave', leaveHandler),\n () => star.removeEventListener('click', clickHandler)\n );\n });\n\n // Keyboard\n const keyHandler = (e) => {\n if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n e.preventDefault();\n if (currentValue < max) {\n currentValue++;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n e.preventDefault();\n if (currentValue > 1) {\n currentValue--;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n }\n };\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n }\n\n this.instances.set(el, {\n cleanup,\n getValue: () => currentValue,\n setValue: (v) => { currentValue = v; updateStars(v); }\n });\n },\n\n getValue: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getValue() : 0;\n },\n\n setValue: function (el, value) {\n const inst = this.instances.get(el);\n if (inst) inst.setValue(value);\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('rating', Rating);\n }\n\n window.VanduoRating = Rating;\n\n})();\n", "/**\n * Vanduo Framework - Transfer (Dual-list) Component\n * Source-to-target list transfer with search, select-all, and move actions\n */\n\n(function () {\n 'use strict';\n\n const Transfer = {\n instances: new Map(),\n\n init: function () {\n const transfers = document.querySelectorAll('[data-vd-transfer]');\n transfers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n el.classList.add('vd-transfer');\n\n let sourceData, targetData;\n try {\n const raw = JSON.parse(el.getAttribute('data-vd-transfer') || '[]');\n sourceData = raw.map((item, i) => ({\n id: item.id || 'item-' + i,\n label: item.label || item.text || String(item),\n selected: false\n }));\n } catch (_e) {\n sourceData = [];\n }\n targetData = [];\n\n const sourceSelected = new Set();\n const targetSelected = new Set();\n\n const render = () => {\n el.innerHTML = '';\n\n // Source panel\n const sourcePanel = createPanel('Source', sourceData, sourceSelected, 'source');\n // Actions\n const actions = document.createElement('div');\n actions.className = 'vd-transfer-actions';\n\n const moveRightBtn = document.createElement('button');\n moveRightBtn.type = 'button';\n moveRightBtn.className = 'vd-transfer-btn';\n moveRightBtn.innerHTML = '›';\n moveRightBtn.setAttribute('aria-label', 'Move to target');\n moveRightBtn.disabled = sourceSelected.size === 0;\n moveRightBtn.addEventListener('click', () => moveRight());\n\n const moveLeftBtn = document.createElement('button');\n moveLeftBtn.type = 'button';\n moveLeftBtn.className = 'vd-transfer-btn';\n moveLeftBtn.innerHTML = '‹';\n moveLeftBtn.setAttribute('aria-label', 'Move to source');\n moveLeftBtn.disabled = targetSelected.size === 0;\n moveLeftBtn.addEventListener('click', () => moveLeft());\n\n actions.appendChild(moveRightBtn);\n actions.appendChild(moveLeftBtn);\n\n // Target panel\n const targetPanel = createPanel('Target', targetData, targetSelected, 'target');\n\n el.appendChild(sourcePanel);\n el.appendChild(actions);\n el.appendChild(targetPanel);\n };\n\n const createPanel = (title, data, selected, _side) => {\n const panel = document.createElement('div');\n panel.className = 'vd-transfer-panel';\n\n const header = document.createElement('div');\n header.className = 'vd-transfer-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const count = document.createElement('span');\n count.className = 'vd-transfer-count';\n count.textContent = selected.size + '/' + data.length;\n header.appendChild(titleSpan);\n header.appendChild(count);\n panel.appendChild(header);\n\n // Search\n const searchDiv = document.createElement('div');\n searchDiv.className = 'vd-transfer-search';\n const searchInput = document.createElement('input');\n searchInput.type = 'text';\n searchInput.placeholder = 'Search...';\n searchInput.setAttribute('aria-label', 'Search ' + title.toLowerCase());\n searchDiv.appendChild(searchInput);\n panel.appendChild(searchDiv);\n\n // List\n const list = document.createElement('ul');\n list.className = 'vd-transfer-list';\n list.setAttribute('role', 'listbox');\n\n const renderList = (filter) => {\n list.innerHTML = '';\n const filtered = filter ? data.filter(d => {\n const label = (d.label || d.text || String(d)).toLowerCase();\n return label.includes(filter.toLowerCase());\n }) : data;\n filtered.forEach(item => {\n const li = document.createElement('li');\n li.className = 'vd-transfer-item';\n li.setAttribute('role', 'option');\n if (selected.has(item.id)) li.classList.add('is-selected');\n\n const checkbox = document.createElement('input');\n checkbox.type = 'checkbox';\n checkbox.checked = selected.has(item.id);\n checkbox.setAttribute('aria-label', item.label);\n\n const label = document.createElement('span');\n label.textContent = item.label;\n\n li.addEventListener('click', () => {\n if (selected.has(item.id)) selected.delete(item.id);\n else selected.add(item.id);\n render();\n });\n\n li.appendChild(checkbox);\n li.appendChild(label);\n list.appendChild(li);\n });\n };\n\n searchInput.addEventListener('input', () => renderList(searchInput.value));\n renderList('');\n\n panel.appendChild(list);\n return panel;\n };\n\n const moveRight = () => {\n const toMove = sourceData.filter(d => sourceSelected.has(d.id));\n sourceData = sourceData.filter(d => !sourceSelected.has(d.id));\n targetData = targetData.concat(toMove);\n sourceSelected.clear();\n render();\n fireChange();\n };\n\n const moveLeft = () => {\n const toMove = targetData.filter(d => targetSelected.has(d.id));\n targetData = targetData.filter(d => !targetSelected.has(d.id));\n sourceData = sourceData.concat(toMove);\n targetSelected.clear();\n render();\n fireChange();\n };\n\n const fireChange = () => {\n el.dispatchEvent(new CustomEvent('transfer:change', {\n detail: {\n source: sourceData.map(d => d.id),\n target: targetData.map(d => d.id)\n },\n bubbles: true\n }));\n };\n\n render();\n\n this.instances.set(el, {\n cleanup,\n getTarget: () => targetData.map(d => d.id),\n getSource: () => sourceData.map(d => d.id)\n });\n },\n\n getSelected: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getTarget() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('transfer', Transfer);\n }\n\n window.VanduoTransfer = Transfer;\n\n})();\n", "/**\n * Vanduo Framework - Tree View Component\n * Hierarchical collapsible tree with checkbox selection and keyboard navigation\n */\n\n(function () {\n 'use strict';\n\n const Tree = {\n instances: new Map(),\n\n init: function () {\n const trees = document.querySelectorAll('[data-vd-tree]');\n trees.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const cascade = el.getAttribute('data-vd-tree-cascade') !== 'false';\n\n let data;\n try { data = JSON.parse(el.getAttribute('data-vd-tree') || '[]'); } catch (_e) { data = []; }\n\n el.classList.add('vd-tree');\n el.setAttribute('role', 'tree');\n\n const render = (items, parent) => {\n parent.innerHTML = '';\n items.forEach(item => {\n const node = document.createElement('li');\n node.className = 'vd-tree-node';\n node.setAttribute('role', 'treeitem');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n if (item.open) node.classList.add('is-open');\n\n const content = document.createElement('div');\n content.className = 'vd-tree-node-content';\n\n // Toggle\n if (item.children && item.children.length > 0) {\n const toggle = document.createElement('button');\n toggle.type = 'button';\n toggle.className = 'vd-tree-toggle';\n toggle.setAttribute('aria-label', 'Toggle');\n toggle.addEventListener('click', (e) => {\n e.stopPropagation();\n item.open = !item.open;\n node.classList.toggle('is-open');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n });\n content.appendChild(toggle);\n } else {\n const ph = document.createElement('span');\n ph.className = 'vd-tree-toggle-placeholder';\n content.appendChild(ph);\n }\n\n // Checkbox\n if (el.hasAttribute('data-vd-tree-checkbox')) {\n const cb = document.createElement('input');\n cb.type = 'checkbox';\n cb.className = 'vd-tree-checkbox';\n cb.checked = !!item.checked;\n cb.setAttribute('aria-label', item.label);\n cb.addEventListener('change', (e) => {\n e.stopPropagation();\n item.checked = cb.checked;\n if (cascade && item.children) {\n setChildChecked(item.children, cb.checked);\n render(data, el);\n }\n el.dispatchEvent(new CustomEvent('tree:check', {\n detail: { id: item.id, checked: cb.checked, label: item.label },\n bubbles: true\n }));\n });\n content.appendChild(cb);\n }\n\n // Icon\n if (item.icon) {\n const icon = document.createElement('span');\n icon.className = 'vd-tree-icon ' + item.icon;\n content.appendChild(icon);\n }\n\n // Label\n const label = document.createElement('span');\n label.className = 'vd-tree-label';\n label.textContent = item.label || '';\n content.appendChild(label);\n\n node.appendChild(content);\n\n // Children\n if (item.children && item.children.length > 0) {\n const childList = document.createElement('ul');\n childList.className = 'vd-tree-children';\n childList.setAttribute('role', 'group');\n render(item.children, childList);\n node.appendChild(childList);\n }\n\n parent.appendChild(node);\n });\n };\n\n const setChildChecked = (items, checked) => {\n items.forEach(item => {\n item.checked = checked;\n if (item.children) setChildChecked(item.children, checked);\n });\n };\n\n // Keyboard\n const keyHandler = (e) => {\n const focused = document.activeElement;\n if (!el.contains(focused)) return;\n\n const nodes = Array.from(el.querySelectorAll('.vd-tree-node-content'));\n const idx = nodes.indexOf(focused.closest('.vd-tree-node-content'));\n if (idx === -1) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (idx < nodes.length - 1) {\n const next = nodes[idx + 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (next) next.focus();\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (idx > 0) {\n const prev = nodes[idx - 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (prev) prev.focus();\n }\n break;\n }\n };\n\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n render(data, el);\n\n this.instances.set(el, {\n cleanup,\n getData: () => data,\n getChecked: () => {\n const checked = [];\n const collect = (items) => {\n items.forEach(i => {\n if (i.checked) checked.push(i.id || i.label);\n if (i.children) collect(i.children);\n });\n };\n collect(data);\n return checked;\n }\n });\n },\n\n getChecked: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getChecked() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tree', Tree);\n }\n\n window.VanduoTree = Tree;\n\n})();\n", "/**\n * Vanduo Framework - Spotlight (Feature Discovery) Component\n * Guided tour with overlay highlight and step-through tooltip\n */\n\n(function () {\n 'use strict';\n\n const Spotlight = {\n _active: false,\n _steps: [],\n _currentStep: 0,\n _elements: {},\n _cleanup: [],\n _boundTriggers: new WeakMap(),\n _triggerElement: null,\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-spotlight]');\n\n triggers.forEach(trigger => {\n if (this._boundTriggers.has(trigger)) return;\n\n const clickHandler = (event) => {\n event.preventDefault();\n\n const steps = this._parseSteps(trigger.getAttribute('data-vd-spotlight'));\n if (steps.length === 0) return;\n\n this.start(steps, { trigger });\n };\n\n trigger.addEventListener('click', clickHandler);\n this._boundTriggers.set(trigger, clickHandler);\n });\n },\n\n _parseSteps: function (raw) {\n if (typeof raw !== 'string' || raw.trim() === '') return [];\n\n try {\n const parsed = JSON.parse(raw);\n return this._normalizeSteps(parsed);\n } catch (error) {\n console.error('VanduoSpotlight: invalid data-vd-spotlight payload.', error);\n return [];\n }\n },\n\n _normalizeStep: function (step) {\n if (!step || typeof step !== 'object') return null;\n\n const target = step.target;\n const hasSelectorTarget = typeof target === 'string' && target.trim() !== '';\n const hasElementTarget = typeof Element !== 'undefined' && target instanceof Element;\n\n if (!hasSelectorTarget && !hasElementTarget) return null;\n\n const title = typeof step.title === 'string' ? step.title : '';\n const description = typeof step.description === 'string'\n ? step.description\n : (typeof step.content === 'string' ? step.content : '');\n\n return {\n target,\n title,\n description\n };\n },\n\n _normalizeSteps: function (steps) {\n if (!Array.isArray(steps)) return [];\n\n return steps\n .map(step => this._normalizeStep(step))\n .filter(Boolean);\n },\n\n start: function (steps, options) {\n if (this._active) this.stop();\n\n const normalizedSteps = this._normalizeSteps(steps);\n if (normalizedSteps.length === 0) return;\n\n const startOptions = options || {};\n\n this._steps = normalizedSteps;\n this._currentStep = 0;\n this._active = true;\n this._triggerElement = startOptions.trigger || (document.activeElement instanceof HTMLElement ? document.activeElement : null);\n\n // Create overlay\n const overlay = document.createElement('div');\n overlay.className = 'vd-spotlight-overlay';\n overlay.setAttribute('aria-hidden', 'true');\n document.body.appendChild(overlay);\n\n // Create tooltip\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-spotlight-tooltip';\n tooltip.setAttribute('role', 'dialog');\n tooltip.setAttribute('aria-modal', 'true');\n tooltip.tabIndex = -1;\n document.body.appendChild(tooltip);\n\n this._elements = { overlay, tooltip };\n\n // ESC to close\n const escHandler = (e) => { if (e.key === 'Escape') this.stop(); };\n document.addEventListener('keydown', escHandler);\n this._cleanup.push(() => document.removeEventListener('keydown', escHandler));\n\n // Overlay click to close\n overlay.addEventListener('click', () => this.stop());\n\n this._showStep(this._currentStep);\n },\n\n _showStep: function (index) {\n const step = this._steps[index];\n if (!step) return;\n\n const target = typeof step.target === 'string' ? document.querySelector(step.target) : step.target;\n const { tooltip } = this._elements;\n\n // Remove previous highlight\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n // Highlight target\n if (target) {\n target.classList.add('vd-spotlight-target');\n target.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n\n // Build tooltip content\n const total = this._steps.length;\n tooltip.innerHTML = '';\n tooltip.removeAttribute('aria-labelledby');\n tooltip.removeAttribute('aria-describedby');\n\n if (step.title) {\n const title = document.createElement('h4');\n title.className = 'vd-spotlight-title';\n title.id = 'vd-spotlight-title-' + index + '-' + Date.now();\n title.textContent = step.title;\n tooltip.appendChild(title);\n tooltip.setAttribute('aria-labelledby', title.id);\n }\n\n if (step.description) {\n const desc = document.createElement('p');\n desc.className = 'vd-spotlight-description';\n desc.id = 'vd-spotlight-description-' + index + '-' + Date.now();\n desc.textContent = step.description;\n tooltip.appendChild(desc);\n tooltip.setAttribute('aria-describedby', desc.id);\n }\n\n // Footer\n const footer = document.createElement('div');\n footer.className = 'vd-spotlight-footer';\n footer.setAttribute('aria-label', 'Step ' + (index + 1) + ' of ' + total);\n\n const counter = document.createElement('span');\n counter.className = 'vd-spotlight-counter';\n counter.textContent = (index + 1) + ' / ' + total;\n\n const actions = document.createElement('div');\n actions.className = 'vd-spotlight-actions';\n\n if (index > 0) {\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-spotlight-btn';\n prevBtn.textContent = 'Back';\n prevBtn.addEventListener('click', () => this.prev());\n actions.appendChild(prevBtn);\n }\n\n const skipBtn = document.createElement('button');\n skipBtn.type = 'button';\n skipBtn.className = 'vd-spotlight-btn';\n skipBtn.textContent = 'Skip';\n skipBtn.addEventListener('click', () => this.stop());\n actions.appendChild(skipBtn);\n\n if (index < total - 1) {\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n nextBtn.textContent = 'Next';\n nextBtn.addEventListener('click', () => this.next());\n actions.appendChild(nextBtn);\n } else {\n const doneBtn = document.createElement('button');\n doneBtn.type = 'button';\n doneBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n doneBtn.textContent = 'Done';\n doneBtn.addEventListener('click', () => this.stop());\n actions.appendChild(doneBtn);\n }\n\n footer.appendChild(counter);\n footer.appendChild(actions);\n tooltip.appendChild(footer);\n\n // Position tooltip near target\n if (target) {\n requestAnimationFrame(() => {\n const rect = target.getBoundingClientRect();\n const tRect = tooltip.getBoundingClientRect();\n let top = rect.bottom + 12 + window.scrollY;\n let left = rect.left + (rect.width - tRect.width) / 2 + window.scrollX;\n\n // Keep in viewport\n left = Math.max(8, Math.min(left, window.innerWidth - tRect.width - 8));\n if (top + tRect.height > window.innerHeight + window.scrollY) {\n top = rect.top - tRect.height - 12 + window.scrollY;\n }\n\n tooltip.style.top = top + 'px';\n tooltip.style.left = left + 'px';\n });\n }\n\n document.dispatchEvent(new CustomEvent('spotlight:step', {\n detail: { index, step: index, total, data: step }\n }));\n },\n\n next: function () {\n if (this._currentStep < this._steps.length - 1) {\n this._currentStep++;\n this._showStep(this._currentStep);\n }\n },\n\n prev: function () {\n if (this._currentStep > 0) {\n this._currentStep--;\n this._showStep(this._currentStep);\n }\n },\n\n stop: function () {\n if (!this._active) return;\n\n const total = this._steps.length;\n const detail = {\n completedSteps: total === 0 ? 0 : Math.min(this._currentStep + 1, total),\n total,\n completed: total > 0 && this._currentStep >= total - 1\n };\n\n this._active = false;\n\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n if (this._elements.overlay && this._elements.overlay.parentNode) {\n this._elements.overlay.parentNode.removeChild(this._elements.overlay);\n }\n if (this._elements.tooltip && this._elements.tooltip.parentNode) {\n this._elements.tooltip.parentNode.removeChild(this._elements.tooltip);\n }\n\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n this._elements = {};\n this._steps = [];\n this._currentStep = 0;\n\n if (this._triggerElement && this._triggerElement.isConnected && typeof this._triggerElement.focus === 'function') {\n this._triggerElement.focus();\n }\n this._triggerElement = null;\n\n document.dispatchEvent(new CustomEvent('spotlight:end', { detail }));\n },\n\n destroyAll: function () {\n this.stop();\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('spotlight', Spotlight);\n }\n\n window.VanduoSpotlight = Spotlight;\n\n})();\n", "/**\n * Vanduo Framework - Music Player Component\n * HTML5 Audio-based music player with transport controls, volume,\n * and optional shuffle, seek bar, and playlist features.\n *\n * Options (passed to MusicPlayer.init or data-music-player-options):\n * tracks {Array} - [{name, url}] \u2014 required\n * volume {number} - Initial volume 0\u20131 (default 0.5)\n * shuffle {boolean} - Shuffle on init (default false)\n * showProgress {boolean} - Show seek/progress bar (default false)\n * showPlaylist {boolean} - Show expandable playlist panel (default false)\n * autoAdvance {boolean} - Auto-play next track on end (default true)\n *\n * Custom events (all bubble, dispatched on container):\n * musicplayer:play \u2014 playback started\n * musicplayer:pause \u2014 playback paused\n * musicplayer:trackchange \u2014 detail: { index, name, url }\n * musicplayer:volumechange \u2014 detail: { volume }\n * musicplayer:ended \u2014 last track ended (autoAdvance=false only)\n *\n * Programmatic API:\n * MusicPlayer.init(container?, options?)\n * MusicPlayer.play(container)\n * MusicPlayer.pause(container)\n * MusicPlayer.toggle(container)\n * MusicPlayer.next(container)\n * MusicPlayer.previous(container)\n * MusicPlayer.setVolume(container, value)\n * MusicPlayer.setTrack(container, index)\n * MusicPlayer.shuffle(container)\n * MusicPlayer.getState(container)\n * MusicPlayer.destroy(container)\n * MusicPlayer.destroyAll()\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fisher-Yates shuffle (returns new array).\n * @param {Array} arr\n * @returns {Array}\n */\n function shuffleArray(arr) {\n const shuffled = arr.slice();\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n const tmp = shuffled[i];\n shuffled[i] = shuffled[j];\n shuffled[j] = tmp;\n }\n return shuffled;\n }\n\n /**\n * Format seconds as m:ss.\n * @param {number} seconds\n * @returns {string}\n */\n function formatTime(seconds) {\n if (!isFinite(seconds) || seconds < 0) return '0:00';\n const m = Math.floor(seconds / 60);\n const s = Math.floor(seconds % 60);\n return m + ':' + (s < 10 ? '0' : '') + s;\n }\n\n /**\n * Set CSS background-size on a range input to visually fill the track.\n * @param {HTMLInputElement} input\n */\n function updateRangeFill(input) {\n const min = parseFloat(input.min) || 0;\n const max = parseFloat(input.max) || 1;\n const val = parseFloat(input.value) || 0;\n const pct = ((val - min) / (max - min)) * 100;\n input.style.setProperty('--fill', pct + '%');\n // Fallback inline gradient for browsers without ::-moz-range-progress\n input.style.backgroundImage =\n 'linear-gradient(to right, var(--music-player-track-fill, currentColor) 0%, ' +\n 'var(--music-player-track-fill, currentColor) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) 100%)';\n }\n\n /* \u2500\u2500\u2500 Phosphor icon helper (matches framework icon style) \u2500 */\n\n /**\n * Return an element (Phosphor icon).\n * @param {string} name\n * @returns {HTMLElement}\n */\n function icon(name) {\n const el = document.createElement('i');\n el.className = 'ph ph-' + name;\n el.setAttribute('aria-hidden', 'true');\n return el;\n }\n\n /* \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const MusicPlayer = {\n /** @type {Map} */\n instances: new Map(),\n\n /**\n * Default options.\n */\n defaults: {\n tracks: [],\n volume: 0.5,\n shuffle: false,\n showProgress: false,\n showPlaylist: false,\n autoAdvance: true,\n },\n\n /**\n * Auto-initialize all .vd-music-player / [data-music-player] elements.\n * Options can be provided via data-music-player-options (JSON string).\n */\n init: function () {\n document.querySelectorAll('.vd-music-player, [data-music-player]').forEach((el) => {\n if (this.instances.has(el)) return;\n\n let opts = {};\n const attr = el.getAttribute('data-music-player-options');\n if (attr) {\n try { opts = JSON.parse(attr); } catch (_) { /* ignore malformed JSON */ }\n }\n this.initPlayer(el, opts);\n });\n },\n\n /**\n * Initialize a single player element.\n * @param {HTMLElement} container\n * @param {Object} [options]\n */\n initPlayer: function (container, options) {\n const opts = Object.assign({}, this.defaults, options || {});\n\n // Validate and normalise tracks\n const rawTracks = Array.isArray(opts.tracks) ? opts.tracks : [];\n const tracks = rawTracks.filter((t) => t && typeof t.url === 'string' && t.url.trim());\n\n // Build shuffled working copy without mutating opts\n const trackList = opts.shuffle ? shuffleArray(tracks) : tracks.slice();\n\n /* \u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const state = {\n tracks: trackList,\n originalTracks: tracks.slice(),\n currentIndex: 0,\n isPlaying: false,\n volume: Math.max(0, Math.min(1, opts.volume)),\n shuffle: opts.shuffle,\n showProgress: opts.showProgress,\n showPlaylist: opts.showPlaylist,\n autoAdvance: opts.autoAdvance,\n audio: null,\n };\n\n /* \u2500\u2500 Audio element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const audio = new Audio();\n audio.volume = state.volume;\n audio.preload = 'metadata';\n state.audio = audio;\n\n /* \u2500\u2500 Build DOM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n this._buildDOM(container, state);\n\n // Grab references after DOM build\n const refs = {\n btnPlay: container.querySelector('.vd-music-player-btn-play'),\n btnPrev: container.querySelector('.vd-music-player-btn-prev'),\n btnNext: container.querySelector('.vd-music-player-btn-next'),\n btnShuffle: container.querySelector('.vd-music-player-btn-shuffle'),\n btnPlaylist: container.querySelector('.vd-music-player-btn-playlist'),\n trackName: container.querySelector('.vd-music-player-track-name'),\n volumeSlider: container.querySelector('.vd-music-player-volume-slider'),\n volumeIcon: container.querySelector('.vd-music-player-volume-icon'),\n progressBar: container.querySelector('.vd-music-player-progress-bar'),\n timeElapsed: container.querySelector('.vd-music-player-time-elapsed'),\n timeDuration: container.querySelector('.vd-music-player-time-duration'),\n playlistPanel: container.querySelector('.vd-music-player-playlist'),\n };\n\n /* \u2500\u2500 Internal render helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const renderPlayIcon = () => {\n const btn = refs.btnPlay;\n if (!btn) return;\n btn.innerHTML = '';\n btn.appendChild(icon(state.isPlaying ? 'pause' : 'play'));\n btn.setAttribute('aria-label', state.isPlaying ? 'Pause' : 'Play');\n btn.classList.toggle('is-active', state.isPlaying);\n };\n\n const renderTrackName = () => {\n const el = refs.trackName;\n if (!el) return;\n const track = state.tracks[state.currentIndex];\n if (track) {\n el.textContent = track.name || 'Unknown Track';\n el.classList.remove('is-idle');\n } else {\n el.textContent = 'No tracks loaded';\n el.classList.add('is-idle');\n }\n };\n\n const renderVolumeIcon = () => {\n const el = refs.volumeIcon;\n if (!el) return;\n el.innerHTML = '';\n const v = state.volume;\n const name = v === 0 ? 'speaker-none' : v < 0.5 ? 'speaker-low' : 'speaker-high';\n el.appendChild(icon(name));\n };\n\n const renderShuffleBtn = () => {\n const btn = refs.btnShuffle;\n if (!btn) return;\n btn.classList.toggle('is-active', state.shuffle);\n btn.setAttribute('aria-pressed', state.shuffle ? 'true' : 'false');\n };\n\n const renderPlaylistItems = () => {\n const panel = refs.playlistPanel;\n if (!panel) return;\n panel.innerHTML = '';\n state.tracks.forEach((track, i) => {\n const item = document.createElement('button');\n item.className =\n 'vd-music-player-playlist-item' + (i === state.currentIndex ? ' is-active' : '');\n item.type = 'button';\n item.setAttribute('data-index', String(i));\n item.setAttribute('aria-current', i === state.currentIndex ? 'true' : 'false');\n\n const num = document.createElement('span');\n num.className = 'vd-music-player-playlist-num';\n num.textContent = String(i + 1);\n\n const name = document.createElement('span');\n name.className = 'vd-music-player-playlist-name';\n name.textContent = track.name || 'Track ' + (i + 1);\n\n item.appendChild(num);\n item.appendChild(name);\n panel.appendChild(item);\n });\n };\n\n const renderProgress = () => {\n const bar = refs.progressBar;\n if (!bar || !audio.duration) return;\n const pct = (audio.currentTime / audio.duration) * 100;\n bar.value = String(pct);\n updateRangeFill(bar);\n if (refs.timeElapsed) refs.timeElapsed.textContent = formatTime(audio.currentTime);\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n };\n\n /* \u2500\u2500 Load track \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const loadTrack = (index, autoPlay) => {\n const track = state.tracks[index];\n if (!track) return;\n state.currentIndex = index;\n audio.src = track.url;\n renderTrackName();\n renderPlaylistItems();\n\n // Reset progress\n if (refs.progressBar) {\n refs.progressBar.value = '0';\n updateRangeFill(refs.progressBar);\n }\n if (refs.timeElapsed) refs.timeElapsed.textContent = '0:00';\n if (refs.timeDuration) refs.timeDuration.textContent = '0:00';\n\n container.dispatchEvent(\n new CustomEvent('musicplayer:trackchange', {\n bubbles: true,\n detail: { index, name: track.name, url: track.url },\n })\n );\n\n if (autoPlay) {\n audio.play().catch(() => { /* browser may block autoplay */ });\n }\n };\n\n /* \u2500\u2500 Audio event listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const cleanupFunctions = [];\n\n const onPlay = () => {\n state.isPlaying = true;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:play', { bubbles: true }));\n };\n\n const onPause = () => {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:pause', { bubbles: true }));\n };\n\n const onEnded = () => {\n if (state.autoAdvance && state.tracks.length > 1) {\n const next = (state.currentIndex + 1) % state.tracks.length;\n loadTrack(next, true);\n } else {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:ended', { bubbles: true }));\n }\n };\n\n const onTimeUpdate = () => {\n if (state.showProgress) renderProgress();\n };\n\n const onLoadedMetadata = () => {\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n if (refs.progressBar) {\n refs.progressBar.max = '100';\n updateRangeFill(refs.progressBar);\n }\n };\n\n audio.addEventListener('play', onPlay);\n audio.addEventListener('pause', onPause);\n audio.addEventListener('ended', onEnded);\n audio.addEventListener('timeupdate', onTimeUpdate);\n audio.addEventListener('loadedmetadata', onLoadedMetadata);\n cleanupFunctions.push(() => {\n audio.removeEventListener('play', onPlay);\n audio.removeEventListener('pause', onPause);\n audio.removeEventListener('ended', onEnded);\n audio.removeEventListener('timeupdate', onTimeUpdate);\n audio.removeEventListener('loadedmetadata', onLoadedMetadata);\n audio.pause();\n audio.src = '';\n });\n\n /* \u2500\u2500 Control button listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n if (refs.btnPlay) {\n const handler = () => {\n if (!audio.src && state.tracks.length) loadTrack(state.currentIndex, false);\n if (state.isPlaying) {\n audio.pause();\n } else {\n audio.play().catch(() => {});\n }\n };\n refs.btnPlay.addEventListener('click', handler);\n cleanupFunctions.push(() => refs.btnPlay.removeEventListener('click', handler));\n\n // Keyboard: Space / Enter (already native for `;\n }\n\n // Generate neutral color swatches\n let neutralSwatches = '';\n for (const [key, value] of Object.entries(this.NEUTRAL_COLORS)) {\n neutralSwatches += ``;\n }\n\n // Generate radius buttons\n let radiusButtons = '';\n this.RADIUS_OPTIONS.forEach(r => {\n radiusButtons += ``;\n });\n\n // Generate font options\n let fontOptions = '';\n for (const [key, value] of Object.entries(this.FONT_OPTIONS)) {\n fontOptions += ``;\n }\n\n return `\n
    \n

    Customize Theme

    \n \n
    \n
    \n\n
    \n \n
    \n ${primarySwatches}\n
    \n
    \n
    \n \n
    \n ${neutralSwatches}\n
    \n
    \n
    \n \n
    \n ${radiusButtons}\n
    \n
    \n
    \n \n \n
    \n
    \n
    \n \n
    \n `;\n },\n\n /**\n * Bind event listeners\n */\n /**\n * Check whether the current primary color is one of the auto-defaults\n * (i.e. the user hasn't explicitly picked a non-default color).\n */\n isUsingDefaultPrimary: function () {\n return this.state.primary === this.DEFAULTS.PRIMARY_LIGHT ||\n this.state.primary === this.DEFAULTS.PRIMARY_DARK;\n },\n\n /**\n * When primary is still one of the auto-default palette keys (black/amber) but\n * localStorage was written under a different theme (or OS changed in system mode),\n * align in-memory state before applyAllPreferences runs \u2014 avoids amber+light / black+dark drift.\n */\n _normalizeDefaultPrimaryIfStaleWithStoredTheme: function () {\n if (!this.isUsingDefaultPrimary()) {\n return;\n }\n const expected = this.getDefaultPrimary(this.state.theme);\n if (this.state.primary !== expected) {\n this.state.primary = expected;\n }\n },\n\n bindEvents: function () {\n // Trigger click - bind to any trigger button\n if (this.elements.trigger) {\n this.addListener(this.elements.trigger, 'click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggle();\n });\n }\n\n this.bindPanelEvents();\n\n // Listen for OS dark/light changes so we can swap the default primary\n if (window.matchMedia) {\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const handler = () => {\n if (this.state.theme === 'system' && this.isUsingDefaultPrimary()) {\n const newDefault = this.getDefaultPrimary('system');\n if (newDefault !== this.state.primary) {\n this.applyPrimary(newDefault);\n this.updateUI();\n }\n }\n };\n mq.addEventListener('change', handler);\n this._cleanup.push(() => mq.removeEventListener('change', handler));\n }\n\n // Close on outside click\n this.addListener(document, 'click', (e) => {\n if (this.state.isOpen && this.elements.customizer && !this.elements.customizer.contains(e.target)) {\n this.close();\n }\n });\n\n // Close on Escape key\n this.addListener(document, 'keydown', (e) => {\n if (e.key === 'Escape' && this.state.isOpen) {\n this.close();\n }\n });\n },\n\n /**\n * Toggle panel open/close\n */\n toggle: function () {\n if (this.state.isOpen) {\n this.close();\n } else {\n this.open();\n }\n },\n\n /**\n * Open the panel\n */\n open: function () {\n this.state.isOpen = true;\n\n // Ensure panel is positioned correctly before opening\n this.positionPanel();\n\n if (this.elements.panel) {\n this.elements.panel.classList.add('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'true');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.add('is-active');\n }\n\n this.dispatchEvent('panel-open', { isOpen: true });\n },\n\n /**\n * Close the panel\n */\n close: function () {\n this.state.isOpen = false;\n\n if (this.elements.panel) {\n this.elements.panel.classList.remove('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'false');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.remove('is-active');\n }\n\n this.dispatchEvent('panel-close', { isOpen: false });\n },\n\n /**\n * Update UI to reflect current state\n */\n updateUI: function () {\n if (!this.elements.panel) return;\n\n // Update primary color swatches\n this.elements.panel.querySelectorAll('[data-color]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.color === this.state.primary);\n });\n\n // Update neutral color swatches\n this.elements.panel.querySelectorAll('[data-neutral]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.neutral === this.state.neutral);\n });\n\n // Update radius buttons\n this.elements.panel.querySelectorAll('[data-radius]').forEach(btn => {\n btn.classList.toggle('is-active', btn.dataset.radius === this.state.radius);\n });\n\n // Update font selector\n const fontSelect = this.elements.panel.querySelector('[data-customizer-font]');\n if (fontSelect) {\n fontSelect.value = this.state.font;\n }\n\n },\n\n /**\n * Reset all preferences to defaults\n */\n reset: function () {\n this.applyTheme(this.DEFAULTS.THEME);\n this.applyPrimary(this.getDefaultPrimary(this.DEFAULTS.THEME));\n this.applyNeutral(this.DEFAULTS.NEUTRAL);\n this.applyRadius(this.DEFAULTS.RADIUS);\n this.applyFont(this.DEFAULTS.FONT);\n this.updateUI();\n\n this.dispatchEvent('reset', { state: { ...this.state } });\n },\n\n /**\n * Get current state\n */\n getState: function () {\n return { ...this.state };\n },\n\n /**\n * Programmatically set preferences\n */\n setPreferences: function (prefs) {\n if (prefs.primary) this.applyPrimary(prefs.primary);\n if (prefs.neutral) this.applyNeutral(prefs.neutral);\n if (prefs.radius) this.applyRadius(prefs.radius);\n if (prefs.font) this.applyFont(prefs.font);\n if (prefs.theme) this.applyTheme(prefs.theme);\n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n destroyAll: function () {\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n\n if (this.elements.panel) {\n this.elements.panel.removeAttribute('data-customizer-initialized');\n }\n\n this.close();\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeCustomizer', ThemeCustomizer);\n }\n\n // Expose globally for convenience\n window.ThemeCustomizer = ThemeCustomizer;\n})();\n", "/**\n * Vanduo Framework - Theme Switcher\n * Handles light/dark/system theme toggling and persistence\n */\n\n(function () {\n 'use strict';\n\n const ThemeSwitcher = {\n isInitialized: false,\n _mediaQuery: null,\n _onMediaChange: null,\n\n init: function () {\n this.STORAGE_KEY = 'vanduo-theme-preference';\n this.state = {\n preference: this.getPreference() // 'light', 'dark', or 'system'\n };\n\n if (this.isInitialized) {\n this.applyTheme();\n this.renderUI();\n this.updateUI();\n return;\n }\n\n this.isInitialized = true;\n\n this.applyTheme();\n this.listenForSystemChanges();\n this.renderUI();\n\n console.log('Vanduo Theme Switcher initialized');\n },\n\n getPreference: function () {\n return this.getStorageValue(this.STORAGE_KEY, 'system');\n },\n\n setPreference: function (pref) {\n this.state.preference = pref;\n this.setStorageValue(this.STORAGE_KEY, pref);\n this.applyTheme();\n \n // Coordinate with ThemeCustomizer for primary color swap if available\n // Check _isApplying flag to prevent circular updates\n if (window.ThemeCustomizer && window.ThemeCustomizer.applyTheme && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme(pref);\n }\n \n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n applyTheme: function () {\n const pref = this.state.preference;\n\n if (pref === 'system') {\n // When in system mode, we remove the data attribute to let the media query take over\n // or we can explicitly set it. Explicitly setting it ensures consistency if we rely on [data-theme]\n // But if we rely on @media in CSS, we might want to remove attributes.\n // However, our CSS strategy uses :root:not([data-theme=\"light\"]) inside media query for system dark fallback\n // which is a bit complex.\n\n // Simpler approach: \n // If preference is system, REMOVE data-theme attribute. Let CSS media queries handle it.\n document.documentElement.removeAttribute('data-theme');\n } else {\n document.documentElement.setAttribute('data-theme', pref);\n }\n },\n\n listenForSystemChanges: function () {\n if (this._mediaQuery && this._onMediaChange) {\n return;\n }\n\n this._mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n this._onMediaChange = _e => {\n if (this.state.preference === 'system') {\n // Re-apply (effectively just to ensure consistency, though removing attribute usually suffices)\n this.applyTheme();\n // Keep default primary (black/amber) aligned when OS scheme changes while in system mode\n if (window.ThemeCustomizer && typeof window.ThemeCustomizer.applyTheme === 'function' && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme('system');\n }\n }\n };\n this._mediaQuery.addEventListener('change', this._onMediaChange);\n },\n\n // Helper to facilitate UI creation if needed, though often UI is in HTML\n renderUI: function () {\n // Look for any uninitialized theme toggles\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.getAttribute('data-theme-initialized') === 'true') {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n }\n return;\n }\n\n // Simplified UI Binding - assumes a select or a button cycle\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n const onChange = (e) => {\n this.setPreference(e.target.value);\n };\n toggle.addEventListener('change', onChange);\n toggle._themeToggleHandler = onChange;\n } else {\n // Button implementation (cycle)\n const onClick = () => {\n const modes = ['system', 'light', 'dark'];\n const nextIndex = (modes.indexOf(this.state.preference) + 1) % modes.length;\n this.setPreference(modes[nextIndex]);\n };\n toggle.addEventListener('click', onClick);\n toggle._themeToggleHandler = onClick;\n }\n // Mark as initialized\n toggle.setAttribute('data-theme-initialized', 'true');\n });\n },\n\n updateUI: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n } else {\n // Update button text/icon if needed\n // e.g. toggle.textContent = this.state.preference;\n // For now, assume the user handles visual state or generic text\n\n // If there is an icon or text span inside, update it\n const span = toggle.querySelector('.theme-current-label');\n if (span) {\n span.textContent = this.state.preference.charAt(0).toUpperCase() + this.state.preference.slice(1);\n }\n }\n });\n },\n\n destroyAll: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"][data-theme-initialized=\"true\"]');\n toggles.forEach(toggle => {\n if (toggle._themeToggleHandler) {\n const eventName = toggle.tagName === 'SELECT' ? 'change' : 'click';\n toggle.removeEventListener(eventName, toggle._themeToggleHandler);\n delete toggle._themeToggleHandler;\n }\n toggle.removeAttribute('data-theme-initialized');\n });\n\n if (this._mediaQuery && this._onMediaChange) {\n this._mediaQuery.removeEventListener('change', this._onMediaChange);\n }\n\n this._mediaQuery = null;\n this._onMediaChange = null;\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeSwitcher', ThemeSwitcher);\n }\n})();\n", "/**\n * Vanduo Framework - Toast Component\n * Popup notifications for user feedback\n */\n\n(function() {\n 'use strict';\n\n /**\n * Toast Component\n */\n const Toast = {\n // Default options\n defaults: {\n position: 'top-right',\n duration: 5000,\n dismissible: true,\n showProgress: true,\n pauseOnHover: true\n },\n\n // Container cache\n containers: {},\n\n /**\n * Get or create a toast container for a position\n * @param {string} position - Container position\n * @returns {HTMLElement} Toast container element\n */\n getContainer: function(position) {\n if (this.containers[position]) {\n return this.containers[position];\n }\n\n const container = document.createElement('div');\n container.className = `vd-toast-container vd-toast-container-${position}`;\n container.setAttribute('role', 'status');\n container.setAttribute('aria-live', 'polite');\n container.setAttribute('aria-atomic', 'false');\n document.body.appendChild(container);\n this.containers[position] = container;\n\n return container;\n },\n\n /**\n * Show a toast notification\n * @param {Object|string} options - Toast options or message string\n * @param {string} [type] - Toast type (success, error, warning, info)\n * @param {number} [duration] - Auto-dismiss duration in ms\n * @returns {HTMLElement} Toast element\n */\n show: function(options, type, duration) {\n // Support simple API: Toast.show('Message', 'success', 3000)\n if (typeof options === 'string') {\n options = {\n message: options,\n type: type,\n duration: duration\n };\n }\n\n const config = Object.assign({}, this.defaults, options);\n const container = this.getContainer(config.position);\n\n // Create toast element\n const toast = document.createElement('div');\n toast.className = 'vd-toast';\n\n if (config.type) {\n toast.classList.add(`vd-toast-${config.type}`);\n }\n\n if (config.solid) {\n toast.classList.add('vd-toast-solid');\n }\n\n if (config.showProgress && config.duration > 0) {\n toast.classList.add('vd-toast-with-progress');\n }\n\n // Build toast content\n let html = '';\n\n // Icon (sanitize custom icons, default icons are trusted SVG)\n if (config.icon) {\n const safeIcon = typeof sanitizeHtml === 'function' ? sanitizeHtml(config.icon) : escapeHtml(config.icon);\n html += `${safeIcon}`;\n } else if (config.type) {\n html += `${this.getDefaultIcon(config.type)}`;\n }\n\n // Local escape helper \u2014 guarantees HTML-safe output even if the\n // global escapeHtml utility is not loaded in the current bundle.\n const _esc = typeof escapeHtml === 'function'\n ? escapeHtml\n : function (s) {\n const d = document.createElement('div');\n d.appendChild(document.createTextNode(s));\n return d.innerHTML;\n };\n\n // Content (escape text to prevent injection)\n html += '
    ';\n if (config.title) {\n html += `
    ${_esc(String(config.title))}
    `;\n }\n if (config.message) {\n html += `
    ${_esc(String(config.message))}
    `;\n }\n html += '
    ';\n\n // Close button\n if (config.dismissible) {\n html += '';\n }\n\n // Progress bar\n if (config.showProgress && config.duration > 0) {\n const safeDuration = parseInt(config.duration, 10) || 0;\n html += `
    `;\n }\n\n toast.innerHTML = html;\n\n // Add to container\n container.appendChild(toast);\n\n toast._toastCleanup = [];\n\n // Set up close button handler\n if (config.dismissible) {\n const closeBtn = toast.querySelector('.vd-toast-close');\n const onClose = () => {\n this.dismiss(toast);\n };\n closeBtn.addEventListener('click', onClose);\n toast._toastCleanup.push(() => closeBtn.removeEventListener('click', onClose));\n }\n\n // Pause on hover\n let timeoutId = null;\n let remainingTime = config.duration;\n let startTime = null;\n\n const startTimer = () => {\n if (config.duration > 0) {\n startTime = Date.now();\n timeoutId = setTimeout(() => {\n this.dismiss(toast);\n }, remainingTime);\n toast._toastTimeoutId = timeoutId;\n\n // Resume progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'running';\n }\n }\n };\n\n const pauseTimer = () => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n timeoutId = null;\n toast._toastTimeoutId = null;\n remainingTime -= Date.now() - startTime;\n\n // Pause progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'paused';\n }\n }\n };\n\n if (config.pauseOnHover) {\n toast.addEventListener('mouseenter', pauseTimer);\n toast.addEventListener('mouseleave', startTimer);\n toast._toastCleanup.push(\n () => toast.removeEventListener('mouseenter', pauseTimer),\n () => toast.removeEventListener('mouseleave', startTimer)\n );\n }\n\n // Trigger enter animation\n requestAnimationFrame(() => {\n toast.classList.add('is-visible');\n startTimer();\n });\n\n // Store config on element for later access\n toast._toastConfig = config;\n\n // Dispatch show event\n const showEvent = new CustomEvent('toast:show', {\n bubbles: true,\n detail: { toast, config }\n });\n toast.dispatchEvent(showEvent);\n\n return toast;\n },\n\n /**\n * Dismiss a toast\n * @param {HTMLElement} toast - Toast element to dismiss\n */\n dismiss: function(toast) {\n if (!toast || toast.classList.contains('is-exiting')) return;\n\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n toast._toastTimeoutId = null;\n }\n\n toast.classList.remove('is-visible');\n toast.classList.add('is-exiting');\n\n // Dispatch dismiss event\n const dismissEvent = new CustomEvent('toast:dismiss', {\n bubbles: true,\n detail: { toast }\n });\n toast.dispatchEvent(dismissEvent);\n\n // Remove after animation\n const handleTransitionEnd = () => {\n toast.removeEventListener('transitionend', handleTransitionEnd);\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n };\n\n toast.addEventListener('transitionend', handleTransitionEnd);\n\n // Fallback removal if transition doesn't fire\n setTimeout(() => {\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n }, 400);\n },\n\n /**\n * Destroy all toasts and containers\n */\n destroyAll: function() {\n Object.keys(this.containers).forEach(position => {\n const container = this.containers[position];\n if (!container) return;\n\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => {\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n }\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n });\n\n if (container.parentElement) {\n container.parentElement.removeChild(container);\n }\n });\n\n this.containers = {};\n },\n\n /**\n * Dismiss all toasts\n * @param {string} [position] - Optional position to clear (clears all if not specified)\n */\n dismissAll: function(position) {\n if (position && this.containers[position]) {\n const toasts = this.containers[position].querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n } else {\n Object.values(this.containers).forEach(container => {\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n });\n }\n },\n\n /**\n * Get default icon SVG for a type\n * @param {string} type - Toast type\n * @returns {string} SVG icon markup\n */\n getDefaultIcon: function(type) {\n const icons = {\n success: '',\n error: '',\n warning: '',\n info: ''\n };\n\n return icons[type] || '';\n },\n\n /**\n * Convenience methods for common toast types\n */\n success: function(message, options) {\n return this.show(Object.assign({ message, type: 'success' }, options));\n },\n\n error: function(message, options) {\n return this.show(Object.assign({ message, type: 'error' }, options));\n },\n\n warning: function(message, options) {\n return this.show(Object.assign({ message, type: 'warning' }, options));\n },\n\n info: function(message, options) {\n return this.show(Object.assign({ message, type: 'info' }, options));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('toast', Toast);\n }\n\n // Also expose globally for convenience\n window.Toast = Toast;\n\n})();\n", "/**\n * Vanduo Framework - Tooltips Component\n * JavaScript functionality for tooltips\n */\n\n(function () {\n 'use strict';\n\n /**\n * Tooltips Component\n */\n const Tooltips = {\n tooltips: new Map(),\n delayTimers: new Map(),\n\n /**\n * Sanitize HTML \u2014 delegates to shared sanitizeHtml from helpers.js\n * @param {string} input\n * @returns {string} sanitized HTML\n */\n sanitizeHtml: function (input) {\n if (typeof sanitizeHtml === 'function') {\n return sanitizeHtml(input);\n }\n // Fallback: strip all HTML\n const div = document.createElement('div');\n div.textContent = input || '';\n return div.innerHTML;\n },\n\n /**\n * Initialize tooltips\n */\n init: function () {\n const elements = document.querySelectorAll('[data-tooltip], [data-tooltip-html]');\n\n elements.forEach(element => {\n if (this.tooltips.has(element)) {\n return;\n }\n this.initTooltip(element);\n });\n },\n\n /**\n * Initialize a single tooltip\n * @param {HTMLElement} element - Element with tooltip\n */\n initTooltip: function (element) {\n const tooltip = this.createTooltip(element);\n const cleanupFunctions = [];\n\n // Show on hover/focus\n const enterHandler = () => { this.showTooltip(element, tooltip); };\n const leaveHandler = () => { this.hideTooltip(element, tooltip); };\n const focusHandler = () => { this.showTooltip(element, tooltip); };\n const blurHandler = () => { this.hideTooltip(element, tooltip); };\n\n element.addEventListener('mouseenter', enterHandler);\n element.addEventListener('mouseleave', leaveHandler);\n element.addEventListener('focus', focusHandler);\n element.addEventListener('blur', blurHandler);\n\n cleanupFunctions.push(\n () => element.removeEventListener('mouseenter', enterHandler),\n () => element.removeEventListener('mouseleave', leaveHandler),\n () => element.removeEventListener('focus', focusHandler),\n () => element.removeEventListener('blur', blurHandler)\n );\n\n this.tooltips.set(element, { tooltip, cleanup: cleanupFunctions });\n },\n\n /**\n * Create tooltip element\n * @param {HTMLElement} element - Target element\n * @returns {HTMLElement} Tooltip element\n */\n createTooltip: function (element) {\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-tooltip';\n tooltip.setAttribute('role', 'tooltip');\n tooltip.setAttribute('aria-hidden', 'true');\n\n // Generate unique ID and link via aria-describedby\n const tooltipId = 'tooltip-' + Math.random().toString(36).substr(2, 9);\n tooltip.id = tooltipId;\n element.setAttribute('aria-describedby', tooltipId);\n\n // Get content\n const htmlContent = element.dataset.tooltipHtml;\n const textContent = element.dataset.tooltip;\n\n if (htmlContent) {\n tooltip.innerHTML = this.sanitizeHtml(htmlContent);\n tooltip.classList.add('vd-tooltip-html');\n } else if (textContent) {\n tooltip.textContent = textContent;\n }\n\n // Get placement\n const placement = element.dataset.tooltipPlacement || element.dataset.placement || 'top';\n tooltip.setAttribute('data-placement', placement);\n tooltip.classList.add(`vd-tooltip-${placement}`);\n\n // Get variant\n if (element.dataset.tooltipVariant) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipVariant}`);\n }\n\n // Get size\n if (element.dataset.tooltipSize) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipSize}`);\n }\n\n // Get delay\n const delay = parseInt(element.dataset.tooltipDelay) || 0;\n tooltip.dataset.delay = delay;\n\n document.body.appendChild(tooltip);\n\n return tooltip;\n },\n\n /**\n * Show tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n showTooltip: function (element, tooltip) {\n const delay = parseInt(tooltip.dataset.delay) || 0;\n\n if (delay > 0) {\n const timer = setTimeout(() => {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }, delay);\n this.delayTimers.set(element, timer);\n } else {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }\n },\n\n /**\n * Hide tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n hideTooltip: function (element, tooltip) {\n // Clear delay timer if exists\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n tooltip.classList.remove('is-visible');\n tooltip.setAttribute('aria-hidden', 'true');\n },\n\n /**\n * Position tooltip relative to element\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n positionTooltip: function (element, tooltip) {\n const placement = tooltip.dataset.placement || 'top';\n const rect = element.getBoundingClientRect();\n const tooltipRect = tooltip.getBoundingClientRect();\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;\n\n let top = 0;\n let left = 0;\n\n switch (placement) {\n case 'top':\n top = rect.top + scrollTop - tooltipRect.height - 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'bottom':\n top = rect.bottom + scrollTop + 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'left':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.left + scrollLeft - tooltipRect.width - 8;\n break;\n case 'right':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.right + scrollLeft + 8;\n break;\n }\n\n // Prevent overflow\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const padding = 8;\n\n if (left < padding) {\n left = padding;\n } else if (left + tooltipRect.width > viewportWidth - padding) {\n left = viewportWidth - tooltipRect.width - padding;\n }\n\n if (top < scrollTop + padding) {\n top = scrollTop + padding;\n } else if (top + tooltipRect.height > scrollTop + viewportHeight - padding) {\n top = scrollTop + viewportHeight - tooltipRect.height - padding;\n }\n\n // Use single style assignment with transform for better performance\n tooltip.style.cssText = `position: absolute; top: 0; left: 0; transform: translate(${left}px, ${top}px);`;\n },\n\n /**\n * Show tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n show: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.showTooltip(el, tooltip);\n }\n },\n\n /**\n * Hide tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n hide: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.hideTooltip(el, tooltip);\n }\n },\n\n /**\n * Update tooltip content\n * @param {HTMLElement|string} element - Target element or selector\n * @param {string} content - New content\n * @param {boolean} isHtml - Whether content is HTML\n */\n update: function (element, content, isHtml = false) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n if (isHtml) {\n tooltip.innerHTML = this.sanitizeHtml(content);\n tooltip.classList.add('vd-tooltip-html');\n } else {\n tooltip.textContent = content;\n tooltip.classList.remove('vd-tooltip-html');\n }\n }\n },\n\n /**\n * Destroy a tooltip instance and clean up\n * @param {HTMLElement} element - Element with tooltip\n */\n destroy: function (element) {\n const data = this.tooltips.get(element);\n if (!data) return;\n\n // Clear any pending timer\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n data.cleanup.forEach(fn => fn());\n\n // Remove tooltip element from DOM\n if (data.tooltip && data.tooltip.parentNode) {\n data.tooltip.parentNode.removeChild(data.tooltip);\n }\n\n this.tooltips.delete(element);\n },\n\n /**\n * Destroy all tooltip instances\n */\n destroyAll: function () {\n this.tooltips.forEach((data, element) => {\n this.destroy(element);\n });\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tooltips', Tooltips);\n }\n\n // Expose globally\n window.VanduoTooltips = Tooltips;\n\n})();\n", "/**\n * Vanduo Framework - Search Component\n * Client-side search functionality for content pages\n * \n * @example Basic usage (initialize with defaults)\n * // HTML:\n * //
    \n * // \n * //
    \n * //
    \n * \n * @example Custom configuration\n * var search = Search.create({\n * containerSelector: '.my-search',\n * contentSelector: 'article[id]',\n * titleSelector: 'h2, h3',\n * maxResults: 5,\n * onSelect: function(result) {\n * console.log('Selected:', result.title);\n * }\n * });\n * \n * @example With custom data source\n * var search = Search.create({\n * containerSelector: '.my-search',\n * data: [\n * { id: 'item1', title: 'First Item', content: 'Description...', category: 'Category A' },\n * { id: 'item2', title: 'Second Item', content: 'Description...', category: 'Category B' }\n * ]\n * });\n */\n\n(function() {\n 'use strict';\n\n /**\n * Default configuration\n */\n const DEFAULTS = {\n // Behavior\n minQueryLength: 2,\n maxResults: 10,\n debounceMs: 150,\n highlightTag: 'mark',\n keyboardShortcut: true, // Enable Cmd/Ctrl+K shortcut\n \n // Selectors (for DOM-based indexing)\n containerSelector: '.vd-doc-search',\n inputSelector: '.vd-doc-search-input',\n resultsSelector: '.vd-doc-search-results',\n contentSelector: '.doc-content section[id]',\n titleSelector: '.demo-title, h2, h3',\n navSelector: '.doc-nav-link',\n sectionSelector: '.doc-nav-section',\n \n // Content extraction\n excludeFromContent: 'pre, code, script, style',\n maxContentLength: 500,\n \n // Custom data source (alternative to DOM indexing)\n data: null,\n \n // Category icons mapping\n categoryIcons: {\n 'getting-started': 'ph-rocket-launch',\n 'core': 'ph-cube',\n 'components': 'ph-puzzle-piece',\n 'interactive': 'ph-cursor-click',\n 'data-display': 'ph-table',\n 'feedback': 'ph-bell',\n 'meta': 'ph-info',\n 'default': 'ph-file-text'\n },\n \n // Callbacks\n onSelect: null, // function(result) - called when result is selected\n onSearch: null, // function(query, results) - called after search\n onOpen: null, // function() - called when results open\n onClose: null, // function() - called when results close\n \n // Text customization\n emptyTitle: 'No results found',\n emptyText: 'Try different keywords or check spelling',\n placeholder: 'Search...'\n };\n\n /**\n * Search Component Factory\n * Creates a new search instance with the given configuration\n * \n * @param {Object} options - Configuration options\n * @returns {Object} Search instance\n */\n function createSearch(options) {\n const config = Object.assign({}, DEFAULTS, options || {});\n \n // Instance state\n const state = {\n initialized: false,\n index: [],\n results: [],\n activeIndex: -1,\n isOpen: false,\n query: '',\n container: null,\n input: null,\n resultsContainer: null,\n debounceTimer: null,\n boundHandlers: {}\n };\n\n function safeInvokeCallback(name, fn, ...args) {\n try {\n fn(...args);\n } catch (error) {\n console.warn('[Vanduo Search] Callback error in \"' + name + '\":', error);\n }\n }\n\n function setResultsHtml(html) {\n if (!state.resultsContainer) return;\n try {\n state.resultsContainer.innerHTML = html;\n } catch (error) {\n console.warn('[Vanduo Search] Failed to render results:', error);\n }\n }\n\n /**\n * Initialize the search component\n * Idempotent \u2014 safe to call more than once on the same instance.\n * Returns the instance on success, null if required DOM elements are missing.\n */\n function init() {\n if (state.initialized) {\n return instance;\n }\n\n state.container = document.querySelector(config.containerSelector);\n if (!state.container) {\n state.initialized = false;\n return null;\n }\n\n state.input = state.container.querySelector(config.inputSelector);\n state.resultsContainer = state.container.querySelector(config.resultsSelector);\n\n if (!state.input || !state.resultsContainer) {\n state.initialized = false;\n return null;\n }\n\n // Set placeholder if configured\n if (config.placeholder) {\n state.input.setAttribute('placeholder', config.placeholder);\n }\n\n // Build search index\n buildIndex();\n\n // Bind events\n bindEvents();\n\n // Set up ARIA attributes\n setupAria();\n\n state.initialized = true;\n return instance;\n }\n\n /**\n * Build search index from DOM or custom data\n */\n function buildIndex() {\n state.index = [];\n \n // Use custom data if provided\n if (config.data && Array.isArray(config.data)) {\n config.data.forEach(function(item) {\n state.index.push({\n id: item.id || slugify(item.title),\n title: item.title || '',\n category: item.category || '',\n categorySlug: slugify(item.category || ''),\n content: item.content || '',\n keywords: item.keywords || extractKeywordsFromText(item.title + ' ' + item.content),\n url: item.url || '#' + (item.id || slugify(item.title)),\n icon: item.icon || ''\n });\n });\n return;\n }\n\n // Build from DOM\n const sections = document.querySelectorAll(config.contentSelector);\n const categoryMap = buildCategoryMap();\n\n sections.forEach(function(section) {\n const id = section.id;\n if (!id) return;\n\n const titleEl = section.querySelector(config.titleSelector);\n const title = titleEl ? titleEl.textContent.replace(/v[\\d.]+/g, '').trim() : id;\n const category = categoryMap[id] || 'Documentation';\n const content = extractContent(section);\n const keywords = extractKeywords(section, title);\n const iconEl = titleEl ? titleEl.querySelector('i.ph') : null;\n let icon = '';\n if (iconEl && iconEl.classList) {\n for (let ci = 0; ci < iconEl.classList.length; ci++) {\n if (iconEl.classList[ci].indexOf('ph-') === 0) {\n icon = iconEl.classList[ci];\n break;\n }\n }\n }\n\n state.index.push({\n id: id,\n title: title,\n category: category,\n categorySlug: slugify(category),\n content: content,\n keywords: keywords,\n url: '#' + id,\n icon: icon\n });\n });\n }\n\n /**\n * Build a map of section IDs to their categories\n */\n function buildCategoryMap() {\n const map = {};\n let currentCategory = 'Documentation';\n const navItems = document.querySelectorAll(config.navSelector + ', ' + config.sectionSelector);\n\n navItems.forEach(function(item) {\n if (item.classList.contains('doc-nav-section')) {\n currentCategory = item.textContent.trim();\n } else {\n const href = item.getAttribute('href');\n if (href && href.startsWith('#')) {\n const id = href.substring(1);\n map[id] = currentCategory;\n }\n }\n });\n\n return map;\n }\n\n /**\n * Extract searchable content from a section\n */\n function extractContent(section) {\n const clone = section.cloneNode(true);\n \n const toRemove = clone.querySelectorAll(config.excludeFromContent);\n toRemove.forEach(function(el) {\n el.remove();\n });\n\n let text = clone.textContent || '';\n text = text.replace(/\\s+/g, ' ').trim();\n \n return text.substring(0, config.maxContentLength);\n }\n\n /**\n * Extract keywords from a section\n */\n function extractKeywords(section, title) {\n const keywords = [];\n \n // Add title words\n title.toLowerCase().split(/\\s+/).forEach(function(word) {\n if (word.length > 2) {\n keywords.push(word);\n }\n });\n\n // Add class names from code examples\n const codeBlocks = section.querySelectorAll('code');\n codeBlocks.forEach(function(code) {\n const text = code.textContent || '';\n const classMatches = text.match(/\\.([\\w-]+)/g);\n if (classMatches) {\n classMatches.forEach(function(match) {\n keywords.push(match.substring(1).toLowerCase());\n });\n }\n });\n\n // Add data attributes\n const dataAttrs = section.querySelectorAll('[data-tooltip], [data-modal]');\n dataAttrs.forEach(function(el) {\n const attrs = el.getAttributeNames().filter(function(name) {\n return name.startsWith('data-');\n });\n attrs.forEach(function(attr) {\n keywords.push(attr.replace('data-', ''));\n });\n });\n\n return Array.from(new Set(keywords));\n }\n\n /**\n * Extract keywords from text string\n */\n function extractKeywordsFromText(text) {\n const words = text.toLowerCase().split(/\\s+/);\n return words.filter(function(word) {\n return word.length > 2;\n });\n }\n\n /**\n * Convert string to slug\n */\n function slugify(str) {\n return str.toLowerCase().replace(/\\s+/g, '-').replace(/[^a-z0-9-]/g, '');\n }\n\n /**\n * Bind event listeners\n */\n function bindEvents() {\n // Store bound handlers for cleanup\n state.boundHandlers.handleInput = function(e) {\n handleInput(e);\n };\n state.boundHandlers.handleFocus = function() {\n if (state.query.length >= config.minQueryLength) {\n open();\n }\n };\n state.boundHandlers.handleKeydown = function(e) {\n handleKeydown(e);\n };\n state.boundHandlers.handleOutsideClick = function(e) {\n if (!state.container.contains(e.target)) {\n close();\n }\n };\n state.boundHandlers.handleGlobalKeydown = function(e) {\n if (config.keyboardShortcut && (e.metaKey || e.ctrlKey) && e.key === 'k') {\n e.preventDefault();\n state.input.focus();\n state.input.select();\n }\n };\n state.boundHandlers.handleResultClick = function(e) {\n const result = e.target.closest('.vd-doc-search-result');\n if (result) {\n const index = parseInt(result.dataset.index, 10);\n select(index);\n }\n };\n\n // Input events\n state.input.addEventListener('input', state.boundHandlers.handleInput);\n state.input.addEventListener('focus', state.boundHandlers.handleFocus);\n state.input.addEventListener('keydown', state.boundHandlers.handleKeydown);\n\n // Close on outside click\n document.addEventListener('click', state.boundHandlers.handleOutsideClick);\n\n // Global keyboard shortcut\n document.addEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n\n // Result click handling\n state.resultsContainer.addEventListener('click', state.boundHandlers.handleResultClick);\n }\n\n /**\n * Unbind event listeners\n */\n function unbindEvents() {\n if (state.input) {\n state.input.removeEventListener('input', state.boundHandlers.handleInput);\n state.input.removeEventListener('focus', state.boundHandlers.handleFocus);\n state.input.removeEventListener('keydown', state.boundHandlers.handleKeydown);\n }\n document.removeEventListener('click', state.boundHandlers.handleOutsideClick);\n document.removeEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n if (state.resultsContainer) {\n state.resultsContainer.removeEventListener('click', state.boundHandlers.handleResultClick);\n }\n }\n\n /**\n * Set up ARIA attributes\n */\n function setupAria() {\n const resultsId = state.resultsContainer.id || 'search-results-' + Math.random().toString(36).substr(2, 9);\n state.resultsContainer.id = resultsId;\n \n state.input.setAttribute('role', 'combobox');\n state.input.setAttribute('aria-autocomplete', 'list');\n state.input.setAttribute('aria-controls', resultsId);\n state.input.setAttribute('aria-expanded', 'false');\n \n state.resultsContainer.setAttribute('role', 'listbox');\n state.resultsContainer.setAttribute('aria-label', 'Search results');\n }\n\n /**\n * Handle input changes\n */\n function handleInput(e) {\n const query = e.target.value.trim();\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n state.debounceTimer = setTimeout(function() {\n state.query = query;\n\n if (query.length < config.minQueryLength) {\n close();\n return;\n }\n\n state.results = search(query);\n state.activeIndex = -1;\n render();\n open();\n\n // Callback\n if (typeof config.onSearch === 'function') {\n safeInvokeCallback('onSearch', config.onSearch, query, state.results);\n }\n }, config.debounceMs);\n }\n\n /**\n * Handle keyboard navigation\n */\n function handleKeydown(e) {\n if (!state.isOpen) {\n if (e.key === 'ArrowDown' && state.query.length >= config.minQueryLength) {\n e.preventDefault();\n state.results = search(state.query);\n render();\n open();\n }\n return;\n }\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n navigate(1);\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n navigate(-1);\n break;\n\n case 'Enter':\n e.preventDefault();\n if (state.activeIndex >= 0) {\n select(state.activeIndex);\n } else if (state.results.length > 0) {\n select(0);\n }\n break;\n\n case 'Escape':\n e.preventDefault();\n close();\n break;\n\n case 'Tab':\n close();\n break;\n }\n }\n\n /**\n * Perform search\n */\n function search(query) {\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n const scored = [];\n\n state.index.forEach(function(entry) {\n let score = 0;\n const titleLower = entry.title.toLowerCase();\n const categoryLower = entry.category.toLowerCase();\n const contentLower = entry.content.toLowerCase();\n\n terms.forEach(function(term) {\n // Title match - highest priority\n if (titleLower.includes(term)) {\n score += 100;\n if (titleLower === term) {\n score += 50;\n } else if (titleLower.startsWith(term)) {\n score += 25;\n }\n }\n\n // Category match\n if (categoryLower.includes(term)) {\n score += 50;\n }\n\n // Keyword match\n const keywordMatch = entry.keywords.some(function(k) {\n return k.includes(term);\n });\n if (keywordMatch) {\n score += 30;\n }\n\n // Content match\n if (contentLower.includes(term)) {\n score += 10;\n }\n });\n\n if (score > 0) {\n scored.push({\n id: entry.id,\n title: entry.title,\n category: entry.category,\n categorySlug: entry.categorySlug,\n content: entry.content,\n url: entry.url,\n icon: entry.icon,\n score: score\n });\n }\n });\n\n scored.sort(function(a, b) {\n return b.score - a.score;\n });\n\n return scored.slice(0, config.maxResults);\n }\n\n /**\n * Render search results\n */\n function render() {\n if (state.results.length === 0) {\n setResultsHtml(renderEmpty());\n return;\n }\n\n let html = '
      ';\n\n state.results.forEach(function(result, index) {\n const isActive = index === state.activeIndex;\n const icon = result.icon || getCategoryIcon(result.categorySlug);\n const excerpt = getExcerpt(result.content, state.query);\n\n html += '
    • ' +\n '
      ' +\n '' +\n '
      ' +\n '
      ' +\n '
      ' + highlight(result.title, state.query) + '
      ' +\n '
      ' + escapeHtml(result.category) + '
      ' +\n '
      ' + highlight(excerpt, state.query) + '
      ' +\n '
      ' +\n '
      • ';\n });\n\n html += '
    ';\n html += renderFooter();\n\n setResultsHtml(html);\n }\n\n /**\n * Render empty state\n */\n function renderEmpty() {\n return '
    ' +\n '
    ' +\n '
    ' + escapeHtml(config.emptyTitle) + '
    ' +\n '
    ' + escapeHtml(config.emptyText) + '
    ' +\n '
    ';\n }\n\n /**\n * Render footer with keyboard hints\n */\n function renderFooter() {\n return '
    ' +\n '\u2191\u2193 to navigate' +\n '\u21B5 to select' +\n 'esc to close' +\n '
    ';\n }\n\n /**\n * Get icon for category\n */\n function getCategoryIcon(categorySlug) {\n return config.categoryIcons[categorySlug] || config.categoryIcons['default'] || 'ph-file-text';\n }\n\n /**\n * Get excerpt from content\n */\n function getExcerpt(content, query) {\n const terms = query.toLowerCase().split(/\\s+/);\n const contentLower = content.toLowerCase();\n const excerptLength = 100;\n\n let matchPos = -1;\n for (let i = 0; i < terms.length; i++) {\n const pos = contentLower.indexOf(terms[i]);\n if (pos !== -1 && (matchPos === -1 || pos < matchPos)) {\n matchPos = pos;\n }\n }\n\n if (matchPos === -1) {\n return content.substring(0, excerptLength) + '...';\n }\n\n const start = Math.max(0, matchPos - 30);\n const end = Math.min(content.length, matchPos + excerptLength);\n let excerpt = content.substring(start, end);\n\n if (start > 0) {\n excerpt = '...' + excerpt;\n }\n if (end < content.length) {\n excerpt = excerpt + '...';\n }\n\n return excerpt;\n }\n\n /**\n * Highlight matched terms in text\n */\n function highlight(text, query) {\n if (!query) return escapeHtml(text);\n\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n let escaped = escapeHtml(text);\n\n terms.forEach(function(term) {\n // Skip overly long terms to prevent ReDoS\n if (term.length > 50) return;\n const regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n escaped = escaped.replace(regex, '<' + config.highlightTag + '>$1');\n });\n\n return escaped;\n }\n\n /**\n * Escape HTML entities\n */\n function escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n /**\n * Navigate results with keyboard\n */\n function navigate(direction) {\n let newIndex = state.activeIndex + direction;\n\n if (newIndex < 0) {\n newIndex = state.results.length - 1;\n } else if (newIndex >= state.results.length) {\n newIndex = 0;\n }\n\n setActiveIndex(newIndex);\n }\n\n /**\n * Set active result index\n */\n function setActiveIndex(index) {\n const prevActive = state.resultsContainer.querySelector('.vd-doc-search-result.is-active');\n if (prevActive) {\n prevActive.classList.remove('is-active');\n prevActive.setAttribute('aria-selected', 'false');\n }\n\n state.activeIndex = index;\n\n const newActive = state.resultsContainer.querySelector('[data-index=\"' + index + '\"]');\n if (newActive) {\n newActive.classList.add('is-active');\n newActive.setAttribute('aria-selected', 'true');\n state.input.setAttribute('aria-activedescendant', 'vd-doc-search-result-' + index);\n newActive.scrollIntoView({ block: 'nearest' });\n }\n }\n\n /**\n * Select a result\n */\n function select(index) {\n const result = state.results[index];\n if (!result) return;\n\n // Close search\n close();\n state.input.value = '';\n state.query = '';\n\n // Custom callback\n if (typeof config.onSelect === 'function') {\n safeInvokeCallback('onSelect', config.onSelect, result);\n return;\n }\n\n // Default behavior: navigate to section\n const section = document.querySelector(result.url);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth', block: 'start' });\n window.history.pushState(null, '', result.url);\n updateSidebarActive(result.id);\n }\n }\n\n /**\n * Update sidebar navigation active state\n */\n function updateSidebarActive(sectionId) {\n const navLinks = document.querySelectorAll(config.navSelector);\n navLinks.forEach(function(link) {\n link.classList.remove('active');\n if (link.getAttribute('href') === '#' + sectionId) {\n link.classList.add('active');\n }\n });\n }\n\n /**\n * Open results dropdown\n */\n function open() {\n if (state.isOpen) return;\n\n state.isOpen = true;\n state.resultsContainer.classList.add('is-open');\n state.input.setAttribute('aria-expanded', 'true');\n\n if (typeof config.onOpen === 'function') {\n safeInvokeCallback('onOpen', config.onOpen);\n }\n }\n\n /**\n * Close results dropdown\n */\n function close() {\n if (!state.isOpen) return;\n\n state.isOpen = false;\n state.activeIndex = -1;\n state.resultsContainer.classList.remove('is-open');\n state.input.setAttribute('aria-expanded', 'false');\n state.input.removeAttribute('aria-activedescendant');\n\n if (typeof config.onClose === 'function') {\n safeInvokeCallback('onClose', config.onClose);\n }\n }\n\n /**\n * Destroy the component\n */\n function destroy() {\n unbindEvents();\n \n state.initialized = false;\n state.index = [];\n state.results = [];\n state.isOpen = false;\n state.query = '';\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n if (state.resultsContainer) {\n setResultsHtml('');\n }\n }\n\n /**\n * Rebuild the search index\n */\n function rebuild() {\n buildIndex();\n }\n\n /**\n * Update configuration\n */\n function setConfig(newConfig) {\n Object.assign(config, newConfig);\n }\n\n /**\n * Get current configuration\n */\n function getConfig() {\n return Object.assign({}, config);\n }\n\n /**\n * Get search index\n */\n function getIndex() {\n return state.index.slice();\n }\n\n // Public instance API\n const instance = {\n init: init,\n destroy: destroy,\n rebuild: rebuild,\n search: search,\n open: open,\n close: close,\n setConfig: setConfig,\n getConfig: getConfig,\n getIndex: getIndex\n };\n\n return instance;\n }\n\n /**\n * Search Component (singleton for backward compatibility)\n */\n const Search = {\n // Factory method \u2014 creates and auto-initializes a new independent instance.\n // Always returns the instance so callers retain a reference even if the\n // DOM container is not yet available (they can retry init() later).\n create: function(options) {\n const instance = createSearch(options);\n if (instance) {\n instance.init();\n }\n return instance || null;\n },\n \n // Default instance\n _instance: null,\n \n // Configuration (for default instance)\n config: Object.assign({}, DEFAULTS),\n\n /**\n * Initialize the default search instance\n */\n init: function(options) {\n if (this._instance) {\n this._instance.destroy();\n }\n \n if (options) {\n Object.assign(this.config, options);\n }\n \n this._instance = createSearch(this.config);\n return this._instance ? this._instance.init() : null;\n },\n\n /**\n * Destroy the default instance\n */\n destroy: function() {\n if (this._instance) {\n this._instance.destroy();\n this._instance = null;\n }\n },\n\n destroyAll: function() {\n this.destroy();\n },\n\n /**\n * Rebuild the default instance index\n */\n rebuild: function() {\n if (this._instance) {\n this._instance.rebuild();\n }\n },\n\n /**\n * Search using the default instance\n */\n search: function(query) {\n return this._instance ? this._instance.search(query) : [];\n },\n\n /**\n * Open the default instance\n */\n open: function() {\n if (this._instance) {\n this._instance.open();\n }\n },\n\n /**\n * Close the default instance\n */\n close: function() {\n if (this._instance) {\n this._instance.close();\n }\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('docSearch', Search);\n }\n\n // Expose globally (both names for compatibility)\n window.Search = Search;\n window.DocSearch = Search; // Backward compatibility\n window.VanduoDocSearch = Search; // New name compatibility\n\n})();\n", "/**\n * Vanduo Framework - Draggable Component\n * JavaScript functionality for draggable elements and drop zones\n */\n\n(function () {\n 'use strict';\n\n /**\n * Draggable Component\n */\n const Draggable = {\n // Store initialized draggables and their cleanup functions\n instances: new Map(),\n // Store current drag state\n currentDrag: null,\n // Store touch state\n touchState: null,\n // Feedback element\n feedbackElement: null,\n // Shared selector used by init and touch reorder\n containerSelector: '.vd-draggable-container, .vd-draggable-container-vertical',\n\n /**\n * Initialize draggable components\n */\n init: function () {\n const draggables = document.querySelectorAll('.vd-draggable, [data-draggable]');\n\n draggables.forEach(element => {\n if (this.instances.has(element)) {\n return;\n }\n this.initDraggable(element);\n });\n\n const containers = document.querySelectorAll(this.containerSelector);\n containers.forEach(container => {\n if (!this.instances.has(container)) {\n this.initContainer(container);\n }\n });\n\n const dropZones = document.querySelectorAll('.vd-drop-zone');\n dropZones.forEach(zone => {\n if (!this.instances.has(zone)) {\n this.initDropZone(zone);\n }\n });\n\n this.createFeedbackElement();\n },\n\n /**\n * Initialize a single draggable element\n * @param {HTMLElement} element - Draggable element\n */\n initDraggable: function (element) {\n const cleanupFunctions = [];\n\n // Make element draggable if not already\n if (!element.hasAttribute('draggable')) {\n element.setAttribute('draggable', 'true');\n }\n\n // Accessibility: add ARIA attributes\n if (!element.hasAttribute('tabindex')) {\n element.setAttribute('tabindex', '0');\n }\n element.setAttribute('role', 'option');\n element.setAttribute('aria-roledescription', 'draggable item');\n element.setAttribute('aria-grabbed', 'false');\n\n // Handle drag start\n const dragStartHandler = (e) => {\n this.handleDragStart(e, element);\n };\n element.addEventListener('dragstart', dragStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragstart', dragStartHandler));\n\n // Handle drag\n const dragHandler = (e) => {\n this.handleDrag(e, element);\n };\n element.addEventListener('drag', dragHandler);\n cleanupFunctions.push(() => element.removeEventListener('drag', dragHandler));\n\n // Handle drag end\n const dragEndHandler = (e) => {\n this.handleDragEnd(e, element);\n };\n element.addEventListener('dragend', dragEndHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragend', dragEndHandler));\n\n // Handle touch start (for mobile)\n const touchStartHandler = (e) => {\n this.handleTouchStart(e, element);\n };\n element.addEventListener('touchstart', touchStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchstart', touchStartHandler));\n\n // Handle touch move (for mobile)\n // { passive: false } is required so that e.preventDefault() works\n // once the drag threshold is reached \u2014 without it, modern browsers\n // treat the listener as passive and silently ignore preventDefault().\n const touchMoveHandler = (e) => {\n this.handleTouchMove(e, element);\n };\n element.addEventListener('touchmove', touchMoveHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchmove', touchMoveHandler));\n\n // Handle touch end (for mobile)\n const touchEndHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchend', touchEndHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchend', touchEndHandler));\n\n // Handle touch cancel (for mobile)\n const touchCancelHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchcancel', touchCancelHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchcancel', touchCancelHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, element);\n };\n element.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => element.removeEventListener('keydown', keydownHandler));\n\n this.instances.set(element, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a draggable container\n * @param {HTMLElement} container - Draggable container\n */\n initContainer: function (container) {\n // Accessibility: add ARIA role to container\n container.setAttribute('role', 'listbox');\n container.setAttribute('aria-label', container.getAttribute('aria-label') || 'Draggable items');\n\n const items = container.querySelectorAll('.vd-draggable-item');\n items.forEach(item => {\n if (!this.instances.has(item)) {\n this.initDraggable(item);\n }\n });\n\n const cleanupFunctions = [];\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n };\n\n // Handle drag over for auto-sorting\n const dragOverHandler = (e) => {\n e.preventDefault(); // Necessary to allow drop\n e.dataTransfer.dropEffect = 'move';\n\n if (!this.currentDrag) return;\n const draggingEl = this.currentDrag.element;\n\n // Only reorder if dragging an item that belongs to this container (or if we support cross-container drag, but keep simple)\n if (!container.contains(draggingEl)) return;\n\n // Prevent jumps when the dragging finalizes with 0,0 coordinates near the end\n if (e.clientX === 0 && e.clientY === 0) return;\n\n this.handleReorder(container, draggingEl, e.clientX, e.clientY);\n };\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault(); // crucial to prevent the browser's default handling and snapping back\n };\n\n container.addEventListener('dragenter', dragEnterHandler);\n container.addEventListener('dragover', dragOverHandler);\n container.addEventListener('drop', dropHandler);\n\n cleanupFunctions.push(() => {\n container.removeEventListener('dragenter', dragEnterHandler);\n container.removeEventListener('dragover', dragOverHandler);\n container.removeEventListener('drop', dropHandler);\n });\n\n this.instances.set(container, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a drop zone\n * @param {HTMLElement} zone - Drop zone element\n */\n initDropZone: function (zone) {\n const cleanupFunctions = [];\n\n // Accessibility: add ARIA role to drop zone\n zone.setAttribute('role', 'region');\n zone.setAttribute('aria-dropeffect', 'move');\n if (!zone.hasAttribute('aria-label')) {\n zone.setAttribute('aria-label', 'Drop zone');\n }\n\n // Handle drag over\n const dragOverHandler = (e) => {\n e.preventDefault();\n this.handleDragOver(e, zone);\n };\n zone.addEventListener('dragover', dragOverHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragover', dragOverHandler));\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n this.handleDragEnter(e, zone);\n };\n zone.addEventListener('dragenter', dragEnterHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragenter', dragEnterHandler));\n\n // Handle drag leave\n const dragLeaveHandler = (e) => {\n this.handleDragLeave(e, zone);\n };\n zone.addEventListener('dragleave', dragLeaveHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragleave', dragLeaveHandler));\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault();\n this.handleDrop(e, zone);\n };\n zone.addEventListener('drop', dropHandler);\n cleanupFunctions.push(() => zone.removeEventListener('drop', dropHandler));\n\n this.instances.set(zone, { cleanup: cleanupFunctions });\n },\n\n /**\n * Create feedback element for drag operations\n */\n createFeedbackElement: function () {\n if (!this.feedbackElement) {\n // Reuse existing element if present\n const existing = document.querySelector('.vd-drag-feedback');\n if (existing) {\n this.feedbackElement = existing;\n return;\n }\n\n this.feedbackElement = document.createElement('div');\n this.feedbackElement.className = 'vd-drag-feedback hidden';\n this.feedbackElement.setAttribute('role', 'presentation');\n document.body.appendChild(this.feedbackElement);\n }\n },\n\n /**\n * Handle drag start event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragStart: function (e, element) {\n // Add dragging class\n element.classList.add('is-dragging');\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: e.clientX, y: e.clientY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element)\n };\n\n // Set drag data\n e.dataTransfer.effectAllowed = 'move';\n e.dataTransfer.setData('text/plain', this.currentDrag.data);\n\n // We no longer suppress the native ghost image or manually update feedback\n // for mouse drags, relying on the browser's native rendering instead.\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY }\n }\n }));\n },\n\n /**\n * Handle drag event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDrag: function (e, element) {\n // Guard against null state (race condition on fast interactions)\n if (!this.currentDrag) return;\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - this.currentDrag.initialPosition.x,\n y: e.clientY - this.currentDrag.initialPosition.y\n }\n }\n }));\n },\n\n /**\n * Handle drag end event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragEnd: function (e, element) {\n // Remove dragging class\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'false');\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Guard against null state\n const data = this.currentDrag?.data || this.getData(element);\n const initialPos = this.currentDrag?.initialPosition || { x: 0, y: 0 };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - initialPos.x,\n y: e.clientY - initialPos.y\n }\n }\n }));\n\n // Reset drag state\n this.currentDrag = null;\n },\n\n /**\n * Handle touch start event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchStart: function (e, element) {\n // Don't prevent default here \u2014 it blocks scrolling.\n // We only prevent default in touchmove once drag threshold is reached.\n const touch = e.touches[0];\n const rect = element.getBoundingClientRect();\n this.touchState = {\n element: element,\n startX: touch.clientX,\n startY: touch.clientY,\n lastX: touch.clientX,\n lastY: touch.clientY,\n // Keep preview anchored to the original grab point.\n offsetX: touch.clientX - rect.left,\n offsetY: touch.clientY - rect.top,\n startTime: Date.now(),\n isDragging: false\n };\n },\n\n /**\n * Handle touch move event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchMove: function (e, element) {\n if (!this.touchState) return;\n\n const touch = e.touches[0];\n this.touchState.lastX = touch.clientX;\n this.touchState.lastY = touch.clientY;\n const deltaX = touch.clientX - this.touchState.startX;\n const deltaY = touch.clientY - this.touchState.startY;\n\n // Only start dragging if moved a minimum distance\n if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {\n // Now we know it's a drag, not a scroll \u2014 prevent default\n if (e.cancelable) e.preventDefault();\n\n if (!this.touchState.isDragging) {\n this.touchState.isDragging = true;\n element.classList.add('is-dragging');\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: this.touchState.startX, y: this.touchState.startY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element),\n // Preserve where inside the element the drag started for accurate ghost positioning.\n offsetX: this.touchState.offsetX,\n offsetY: this.touchState.offsetY\n };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY }\n }\n }));\n }\n\n // Update feedback\n this.updateFeedback(touch.clientX, touch.clientY);\n\n // Dispatch event\n if (this.currentDrag) {\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY },\n delta: { x: deltaX, y: deltaY }\n }\n }));\n\n this.updateTouchDropZone(touch.clientX, touch.clientY);\n\n // Reorder for touch\n const container = element.closest(this.containerSelector);\n if (container && container.contains(element)) {\n this.handleReorder(container, element, touch.clientX, touch.clientY);\n }\n }\n }\n },\n\n /**\n * Handle touch end event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchEnd: function (e, element) {\n if (this.touchState && this.touchState.isDragging) {\n if (e.cancelable) e.preventDefault();\n const endTouch = e.changedTouches?.[0];\n const endPosition = {\n x: endTouch?.clientX ?? this.touchState.lastX ?? this.touchState.startX,\n y: endTouch?.clientY ?? this.touchState.lastY ?? this.touchState.startY\n };\n\n const dropZone = this.resolveDropZoneAtPoint(endPosition.x, endPosition.y) || this.touchState.overZone;\n if (dropZone) {\n this.dispatchDrop(dropZone, endPosition);\n } else if (this.touchState.overZone) {\n this.touchState.overZone.classList.remove('is-drag-over');\n }\n\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n element.setAttribute('aria-grabbed', 'false');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Dispatch event\n const data = this.currentDrag?.data || this.getData(element);\n const startX = this.touchState?.startX || 0;\n const startY = this.touchState?.startY || 0;\n\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: endPosition,\n delta: {\n x: endPosition.x - startX,\n y: endPosition.y - startY\n }\n }\n }));\n }\n\n // Reset states\n this.touchState = null;\n this.currentDrag = null;\n },\n\n /**\n * Handle drag over event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} _zone - Drop zone element\n */\n handleDragOver: function (e, _zone) {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n },\n\n /**\n * Handle drag enter event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragEnter: function (e, zone) {\n e.preventDefault();\n zone.classList.add('is-drag-over');\n },\n\n /**\n * Handle drag leave event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragLeave: function (e, zone) {\n zone.classList.remove('is-drag-over');\n },\n\n /**\n * Handle drop event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDrop: function (e, zone) {\n e.preventDefault();\n this.dispatchDrop(zone, { x: e.clientX, y: e.clientY });\n },\n\n /**\n * Resolve a drop zone from viewport coordinates\n * @param {number} x\n * @param {number} y\n * @returns {HTMLElement|null}\n */\n resolveDropZoneAtPoint: function (x, y) {\n if (!Number.isFinite(x) || !Number.isFinite(y)) return null;\n\n // Prefer the full stacking list so overlays/top elements don't hide real drop targets.\n if (typeof document.elementsFromPoint === 'function') {\n const stacked = document.elementsFromPoint(x, y);\n for (const element of stacked) {\n const zone = element.closest('.vd-drop-zone');\n if (zone) return zone;\n }\n }\n\n const target = document.elementFromPoint(x, y);\n const targetZone = target ? target.closest('.vd-drop-zone') : null;\n if (targetZone) return targetZone;\n\n // Last-resort fallback for mobile emulation edge cases.\n const zones = document.querySelectorAll('.vd-drop-zone');\n for (const zone of zones) {\n const rect = zone.getBoundingClientRect();\n if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {\n return zone;\n }\n }\n\n return null;\n },\n\n /**\n * Track and update active drop-zone hover state on touch devices\n * @param {number} x\n * @param {number} y\n */\n updateTouchDropZone: function (x, y) {\n if (!this.touchState) return;\n\n const nextZone = this.resolveDropZoneAtPoint(x, y);\n const prevZone = this.touchState.overZone || null;\n\n if (prevZone && prevZone !== nextZone) {\n prevZone.classList.remove('is-drag-over');\n }\n\n if (nextZone && nextZone !== prevZone) {\n nextZone.classList.add('is-drag-over');\n }\n\n this.touchState.overZone = nextZone || null;\n },\n\n /**\n * Dispatch a normalized drop event for mouse and touch flows\n * @param {HTMLElement} zone\n * @param {{x:number, y:number}} position\n */\n dispatchDrop: function (zone, position) {\n zone.classList.remove('is-drag-over');\n zone.dispatchEvent(new CustomEvent('draggable:drop', {\n bubbles: true,\n detail: {\n zone: zone,\n element: this.currentDrag?.element,\n data: this.currentDrag?.data,\n position: position\n }\n }));\n },\n\n /**\n * Reorder elements in container based on cursor position\n * @param {HTMLElement} container \n * @param {HTMLElement} element \n * @param {number} clientX \n * @param {number} clientY \n */\n handleReorder: function (container, element, clientX, clientY) {\n const isVertical = container.classList.contains('vd-draggable-container-vertical');\n const siblings = [...container.querySelectorAll('.vd-draggable-item:not(.is-dragging), .vd-draggable:not(.is-dragging)')];\n\n const nextSibling = siblings.reduce((closest, child) => {\n const box = child.getBoundingClientRect();\n const offset = isVertical\n ? clientY - box.top - box.height / 2\n : clientX - box.left - box.width / 2;\n\n if (offset < 0 && offset > closest.offset) {\n return { offset: offset, element: child };\n } else {\n return closest;\n }\n }, { offset: Number.NEGATIVE_INFINITY }).element;\n\n if (nextSibling == null) {\n container.appendChild(element);\n } else {\n container.insertBefore(element, nextSibling);\n }\n },\n\n /**\n * Handle keyboard events\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} element - Draggable element\n */\n handleKeydown: function (e, element) {\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n // Trigger click or custom action\n element.click();\n break;\n case 'Escape':\n // Cancel drag if in progress\n if (element.classList.contains('is-dragging')) {\n element.classList.remove('is-dragging');\n element.setAttribute('aria-grabbed', 'false');\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n this.currentDrag = null;\n }\n break;\n case 'ArrowUp':\n case 'ArrowLeft': {\n e.preventDefault();\n const prev = element.previousElementSibling;\n if (prev && (prev.classList.contains('vd-draggable') || prev.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(element, prev);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'up' }\n }));\n }\n break;\n }\n case 'ArrowDown':\n case 'ArrowRight': {\n e.preventDefault();\n const next = element.nextElementSibling;\n if (next && (next.classList.contains('vd-draggable') || next.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(next, element);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'down' }\n }));\n }\n break;\n }\n }\n },\n\n /**\n * Get data from draggable element\n * @param {HTMLElement} element - Draggable element\n * @returns {string} Data associated with the element\n */\n getData: function (element) {\n return element.dataset.draggable || element.textContent.trim();\n },\n\n /**\n * Update drag feedback element\n * @param {number} x - Current X coordinate\n * @param {number} y - Current Y coordinate\n */\n updateFeedback: function (x, y) {\n if (!this.currentDrag) return;\n\n // Show feedback\n this.feedbackElement.classList.remove('hidden');\n\n // Update feedback content\n const rect = this.currentDrag.initialBounds;\n this.feedbackElement.innerHTML = '';\n const clone = this.currentDrag.element.cloneNode(true);\n this.feedbackElement.appendChild(clone);\n\n // Set styles\n const offsetX = this.currentDrag.offsetX ?? 20;\n const offsetY = this.currentDrag.offsetY ?? 20;\n Object.assign(this.feedbackElement.style, {\n left: (x - offsetX) + 'px',\n top: (y - offsetY) + 'px',\n width: rect.width + 'px',\n height: rect.height + 'px'\n });\n },\n\n /**\n * Make an element draggable programmatically\n * @param {HTMLElement|string} element - Element or selector\n * @param {Object} options - Configuration options\n */\n makeDraggable: function (element, options = {}) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && !this.instances.has(el)) {\n // Add classes and attributes\n el.classList.add('vd-draggable');\n el.setAttribute('draggable', 'true');\n\n // Set options\n if (options.data) {\n el.dataset.draggable = options.data;\n }\n\n // Initialize\n this.initDraggable(el);\n }\n },\n\n /**\n * Remove draggable functionality from an element\n * @param {HTMLElement|string} element - Element or selector\n */\n removeDraggable: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && this.instances.has(el)) {\n // Clean up\n const instance = this.instances.get(el);\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n\n // Remove classes and attributes\n el.classList.remove('vd-draggable');\n el.removeAttribute('draggable');\n el.removeAttribute('data-draggable');\n }\n },\n\n /**\n * Destroy a draggable instance and clean up event listeners\n * @param {HTMLElement} element - Draggable element\n */\n destroy: function (element) {\n this.removeDraggable(element);\n },\n\n /**\n * Destroy all draggable instances\n */\n destroyAll: function () {\n const instances = Array.from(this.instances.keys());\n instances.forEach(element => this.destroy(element));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('draggable', Draggable);\n }\n\n // Expose globally\n window.VanduoDraggable = Draggable;\n})();\n", "/**\n * Vanduo Framework \u2013 LazyLoad Component\n * v1.2.1\n *\n * Provides two levels of API:\n *\n * LOW-LEVEL (generic IntersectionObserver wrapper)\n * VanduoLazyLoad.observe(element, callback, options?)\n * VanduoLazyLoad.unobserve(element)\n * VanduoLazyLoad.unobserveAll()\n *\n * HIGH-LEVEL (HTML-section fetcher, mirrors vanduo-docs SPA behaviour)\n * VanduoLazyLoad.loadSection(url, containerEl, options?)\n * options: { placeholder, threshold, rootMargin, onLoaded, onError }\n * placeholder: 'skeleton' | 'spinner' | HTMLString (default: 'skeleton')\n *\n * ATTRIBUTE-DRIVEN (zero-JS usage, wired by init())\n *
    \u2026
    \n *\n * EVENTS dispatched on the host element:\n * lazysection:loading \u2014 fetch started\n * lazysection:loaded \u2014 content injected\n * lazysection:error \u2014 fetch failed\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500 Private state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /** @type {Map} */\n const _observerMap = new Map();\n\n /* \u2500\u2500 Security helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Returns true only if `url` resolves to the same origin as the page\n * (relative paths and same-origin absolute URLs are allowed).\n * Cross-origin URLs are rejected to prevent SSRF-style fetch abuse.\n * @param {string} url\n * @returns {boolean}\n */\n function _isSafeUrl(url) {\n try {\n // Relative URLs (no origin) are always safe\n const resolved = new URL(url, window.location.href);\n return resolved.origin === window.location.origin;\n } catch (_) {\n return false;\n }\n }\n\n /**\n * Safely inject fetched HTML into a container by parsing it with\n * DOMParser (avoids script execution) and replacing children via\n * standard DOM APIs instead of raw innerHTML assignment.\n * @param {Element} containerEl\n * @param {string} html\n */\n function _safeInjectHtml(containerEl, html) {\n const parser = new DOMParser();\n const doc = parser.parseFromString(html.trim(), 'text/html'); // CodeQL [js/xss-through-dom] Intentional: parsed nodes are sanitized below before adoption into live DOM\n\n const DANGEROUS_TAGS = ['SCRIPT', 'IFRAME', 'OBJECT', 'EMBED', 'FORM', 'BASE', 'LINK', 'META', 'STYLE'];\n for (const tag of DANGEROUS_TAGS) {\n const els = doc.querySelectorAll(tag);\n for (let i = els.length - 1; i >= 0; i--) {\n els[i].parentNode.removeChild(els[i]);\n }\n }\n\n // Strip dangerous attributes (e.g. onerror, javascript: urls) from all elements\n function _sanitizeNode(node) {\n if (node.nodeType === Node.ELEMENT_NODE) {\n const attrs = node.attributes;\n for (let i = attrs.length - 1; i >= 0; i--) {\n const attrName = attrs[i].name.toLowerCase();\n const attrValue = attrs[i].value.toLowerCase();\n const trimmedValue = attrValue.trim();\n if (\n attrName.startsWith('on') ||\n trimmedValue.startsWith('javascript:') ||\n trimmedValue.startsWith('data:') ||\n trimmedValue.startsWith('vbscript:')\n ) {\n node.removeAttribute(attrs[i].name);\n }\n }\n const children = node.childNodes;\n for (let i = 0; i < children.length; i++) {\n _sanitizeNode(children[i]);\n }\n }\n }\n _sanitizeNode(doc.body);\n\n // Collect all top-level body children\n const nodes = Array.from(doc.body.childNodes);\n // Clear container and append parsed nodes\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n nodes.forEach(function (node) {\n containerEl.appendChild(document.adoptNode(node));\n });\n }\n\n /* \u2500\u2500 Placeholder HTML \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _skeletonHtml() {\n return '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _spinnerHtml() {\n return '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _resolvePlaceholder(placeholder) {\n if (!placeholder || placeholder === 'skeleton') return _skeletonHtml();\n if (placeholder === 'spinner') return _spinnerHtml();\n // Caller-supplied HTML string\n return placeholder;\n }\n\n /* \u2500\u2500 Dispatch helper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _dispatch(el, eventName, detail) {\n el.dispatchEvent(new CustomEvent(eventName, { bubbles: true, detail: detail || {} }));\n }\n\n /* \u2500\u2500 VanduoLazyLoad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const VanduoLazyLoad = {\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * LOW-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Observe an element. `callback` is invoked once when the element\n * enters the viewport, then the element is automatically unobserved.\n *\n * @param {Element} element\n * @param {function(Element): void} callback\n * @param {{ threshold?: number, rootMargin?: string }} [options]\n */\n observe: function (element, callback, options) {\n if (!(element instanceof Element)) {\n console.warn('[VanduoLazyLoad] observe() requires a DOM Element.');\n return;\n }\n if (typeof callback !== 'function') {\n console.warn('[VanduoLazyLoad] observe() requires a callback function.');\n return;\n }\n // Already observed \u2014 ignore\n if (_observerMap.has(element)) return;\n\n const threshold = (options && options.threshold != null) ? options.threshold : 0;\n const rootMargin = (options && options.rootMargin) ? options.rootMargin : '0px';\n\n const observer = new IntersectionObserver(function (entries, obs) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n obs.unobserve(entry.target);\n _observerMap.delete(entry.target);\n try {\n callback(entry.target);\n } catch (e) {\n console.error('[VanduoLazyLoad] Callback threw:', e);\n }\n }\n });\n }, { threshold: threshold, rootMargin: rootMargin });\n\n _observerMap.set(element, observer);\n observer.observe(element);\n },\n\n /**\n * Stop observing an element that was previously passed to observe().\n * @param {Element} element\n */\n unobserve: function (element) {\n const observer = _observerMap.get(element);\n if (observer) {\n observer.unobserve(element);\n _observerMap.delete(element);\n }\n },\n\n /**\n * Stop observing ALL currently observed elements.\n */\n unobserveAll: function () {\n _observerMap.forEach(function (observer, element) {\n observer.unobserve(element);\n });\n _observerMap.clear();\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * HIGH-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fetch an HTML partial and inject it into `containerEl` when the\n * container enters the viewport. A placeholder is shown immediately.\n *\n * @param {string} url URL of the HTML partial to fetch\n * @param {Element} containerEl Target element whose content will be replaced\n * @param {{\n * placeholder?: 'skeleton'|'spinner'|string,\n * threshold?: number,\n * rootMargin?: string,\n * onLoaded?: function(Element): void,\n * onError?: function(Error): void\n * }} [options]\n */\n loadSection: function (url, containerEl, options) {\n if (typeof url !== 'string' || !url) {\n console.warn('[VanduoLazyLoad] loadSection() requires a non-empty URL string.');\n return;\n }\n if (!(containerEl instanceof Element)) {\n console.warn('[VanduoLazyLoad] loadSection() requires a DOM Element as containerEl.');\n return;\n }\n // Reject cross-origin URLs to prevent SSRF-style fetch abuse\n if (!_isSafeUrl(url)) {\n console.error('[VanduoLazyLoad] loadSection() blocked cross-origin URL:', url);\n return;\n }\n\n const opts = options || {};\n // Placeholders are known-safe static HTML strings built internally\n const placeholderHtml = _resolvePlaceholder(opts.placeholder);\n\n // Use _safeInjectHtml instead of innerHTML to prevent XSS from caller-supplied placeholders\n _safeInjectHtml(containerEl, placeholderHtml);\n _dispatch(containerEl, 'lazysection:loading', { url: url });\n\n // Fetch when visible\n this.observe(containerEl, function () {\n const controller = new window.AbortController();\n const timeoutId = setTimeout(function () { controller.abort(); }, 10000);\n\n window.fetch(url, { signal: controller.signal })\n .then(function (res) {\n clearTimeout(timeoutId);\n if (!res.ok) throw new Error('HTTP ' + res.status);\n return res.text();\n })\n .then(function (html) {\n // Use DOMParser to parse fetched content safely, avoiding\n // raw innerHTML assignment of externally-sourced strings\n _safeInjectHtml(containerEl, html);\n _dispatch(containerEl, 'lazysection:loaded', { url: url });\n // Re-init Vanduo components inside the new content\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.init();\n }\n if (typeof opts.onLoaded === 'function') {\n opts.onLoaded(containerEl);\n }\n })\n .catch(function (err) {\n // Build error node via DOM APIs \u2014 no dynamic HTML strings\n const alertEl = document.createElement('div');\n alertEl.className = 'vd-alert vd-alert-error';\n alertEl.setAttribute('role', 'alert');\n const msgEl = document.createElement('span');\n msgEl.textContent = 'Failed to load content. ';\n const detailEl = document.createElement('small');\n detailEl.style.opacity = '0.7';\n detailEl.textContent = err.message;\n alertEl.appendChild(msgEl);\n alertEl.appendChild(detailEl);\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n containerEl.appendChild(alertEl);\n _dispatch(containerEl, 'lazysection:error', { url: url, error: err });\n console.error('[VanduoLazyLoad] loadSection failed:', err);\n if (typeof opts.onError === 'function') {\n opts.onError(err);\n }\n });\n }, { threshold: opts.threshold, rootMargin: opts.rootMargin });\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * ATTRIBUTE-DRIVEN INIT\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Scan the DOM for [data-vd-lazy] elements and wire them up.\n * Safe to call multiple times \u2014 already-observed elements are skipped.\n */\n init: function () {\n const self = this;\n const elements = document.querySelectorAll('[data-vd-lazy]');\n elements.forEach(function (el) {\n // Skip already-observed or already-loaded elements\n if (_observerMap.has(el) || el.dataset.vdLazyState === 'loading' || el.dataset.vdLazyState === 'loaded') return;\n\n const url = el.getAttribute('data-vd-lazy');\n if (!url) return;\n\n el.dataset.vdLazyState = 'loading';\n const placeholder = el.getAttribute('data-vd-lazy-placeholder') || 'skeleton';\n\n self.loadSection(url, el, {\n placeholder: placeholder,\n onLoaded: function () {\n el.dataset.vdLazyState = 'loaded';\n },\n onError: function () {\n el.dataset.vdLazyState = 'error';\n }\n });\n });\n }\n };\n\n /* \u2500\u2500 Register with Vanduo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('LazyLoad', VanduoLazyLoad);\n }\n\n /* \u2500\u2500 Global convenience alias \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n window.VanduoLazyLoad = VanduoLazyLoad;\n\n})();\n", "/**\n * Vanduo Framework - Glass Scroll Activation\n * Generic scroll-aware glass activation via IntersectionObserver.\n *\n * Usage:\n * Add `data-glass-scroll` to any element carrying a `.vd-glass*` class.\n * By default the previous sibling is used as the sentinel.\n * Point to a custom sentinel via `data-glass-sentinel=\"\"`.\n *\n * Behaviour:\n * - Adds `.is-glass-active` when the sentinel leaves the viewport (scrolled past).\n * - Removes `.is-glass-active` when the sentinel re-enters the viewport.\n */\n(function () {\n 'use strict';\n\n const GlassScroll = {\n /** @type {Map} */\n observers: new Map(),\n\n init: function () {\n document.querySelectorAll('[data-glass-scroll]').forEach(el => {\n if (this.observers.has(el)) return;\n this.initElement(el);\n });\n },\n\n /**\n * Wire up a single scroll-activated glass element.\n * @param {HTMLElement} el\n */\n initElement: function (el) {\n const sentinelSelector = el.dataset.glassSentinel;\n let sentinel;\n\n if (sentinelSelector) {\n sentinel = document.querySelector(sentinelSelector);\n }\n\n if (!sentinel) {\n // Fall back to the previous sibling element\n sentinel = el.previousElementSibling;\n }\n\n if (!sentinel) {\n // No sentinel available \u2014 activate immediately so glass is always shown\n el.classList.add('is-glass-active');\n return;\n }\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n // Active when sentinel is NOT intersecting (scrolled past it)\n el.classList.toggle('is-glass-active', !entry.isIntersecting);\n });\n },\n { threshold: 0, rootMargin: '0px' }\n );\n\n observer.observe(sentinel);\n this.observers.set(el, observer);\n },\n\n /**\n * Disconnect and remove a single element's observer.\n * @param {HTMLElement} el\n */\n destroy: function (el) {\n const observer = this.observers.get(el);\n if (observer) {\n observer.disconnect();\n this.observers.delete(el);\n }\n },\n\n destroyAll: function () {\n this.observers.forEach((observer, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('glassScroll', GlassScroll);\n }\n\n window.VanduoGlassScroll = GlassScroll;\n})();\n", "/**\n * Vanduo Framework - Flow (Carousel/Slider) Component\n * Touch-enabled carousel with slide/fade transitions, autoplay, indicators\n */\n\n(function () {\n 'use strict';\n\n const Flow = {\n instances: new Map(),\n\n init: function () {\n const carousels = document.querySelectorAll('.vd-flow, .vd-carousel');\n carousels.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const track = el.querySelector('.vd-flow-track');\n if (!track) return;\n\n const slides = Array.from(track.querySelectorAll('.vd-flow-slide'));\n if (slides.length === 0) return;\n\n const isFade = el.classList.contains('vd-flow-fade');\n const autoplay = el.hasAttribute('data-vd-autoplay');\n const interval = parseInt(el.getAttribute('data-vd-interval'), 10) || 5000;\n const loop = el.getAttribute('data-vd-loop') !== 'false';\n\n const state = {\n current: 0,\n total: slides.length,\n autoplayTimer: null,\n isFade: isFade,\n loop: loop,\n isDragging: false,\n startX: 0,\n currentX: 0,\n threshold: 50\n };\n\n const cleanup = [];\n\n // Set initial active slide\n slides.forEach((slide, i) => {\n slide.setAttribute('role', 'group');\n slide.setAttribute('aria-roledescription', 'slide');\n slide.setAttribute('aria-label', 'Slide ' + (i + 1) + ' of ' + slides.length);\n if (i === 0) slide.classList.add('is-active');\n });\n\n el.setAttribute('role', 'region');\n el.setAttribute('aria-roledescription', 'carousel');\n if (!el.getAttribute('aria-label')) {\n el.setAttribute('aria-label', 'Carousel');\n }\n\n // Live region for announcements\n const liveRegion = document.createElement('div');\n liveRegion.setAttribute('aria-live', 'polite');\n liveRegion.setAttribute('aria-atomic', 'true');\n liveRegion.className = 'sr-only';\n liveRegion.style.cssText = 'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);';\n el.appendChild(liveRegion);\n\n const goTo = (index, announce) => {\n if (announce === undefined) announce = true;\n let target = index;\n if (state.loop) {\n target = ((index % state.total) + state.total) % state.total;\n } else {\n target = Math.max(0, Math.min(index, state.total - 1));\n }\n\n const prev = state.current;\n state.current = target;\n\n if (state.isFade) {\n slides.forEach((s, i) => {\n s.classList.toggle('is-active', i === target);\n });\n } else {\n track.style.transform = 'translateX(-' + (target * 100) + '%)';\n }\n\n // Update indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.classList.toggle('is-active', i === target);\n ind.setAttribute('aria-selected', i === target ? 'true' : 'false');\n });\n\n // Update slide ARIA\n slides.forEach((s, i) => {\n s.setAttribute('aria-hidden', i !== target ? 'true' : 'false');\n });\n\n if (announce) {\n liveRegion.textContent = 'Slide ' + (target + 1) + ' of ' + state.total;\n }\n\n el.dispatchEvent(new CustomEvent('flow:change', {\n detail: { current: target, previous: prev, total: state.total }\n }));\n };\n\n const next = () => goTo(state.current + 1);\n const prev = () => goTo(state.current - 1);\n\n // Controls\n const prevBtn = el.querySelector('.vd-flow-prev');\n const nextBtn = el.querySelector('.vd-flow-next');\n\n if (prevBtn) {\n const h = () => prev();\n prevBtn.addEventListener('click', h);\n cleanup.push(() => prevBtn.removeEventListener('click', h));\n }\n if (nextBtn) {\n const h = () => next();\n nextBtn.addEventListener('click', h);\n cleanup.push(() => nextBtn.removeEventListener('click', h));\n }\n\n // Indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.setAttribute('role', 'tab');\n ind.setAttribute('aria-selected', i === 0 ? 'true' : 'false');\n ind.setAttribute('aria-label', 'Go to slide ' + (i + 1));\n const h = () => goTo(i);\n ind.addEventListener('click', h);\n cleanup.push(() => ind.removeEventListener('click', h));\n });\n\n // Keyboard navigation\n const keyHandler = (e) => {\n if (e.key === 'ArrowLeft') { prev(); e.preventDefault(); }\n if (e.key === 'ArrowRight') { next(); e.preventDefault(); }\n };\n el.setAttribute('tabindex', '0');\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n // Touch / pointer support\n const pointerDown = (e) => {\n state.isDragging = true;\n state.startX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n state.currentX = state.startX;\n el.classList.add('is-dragging');\n };\n\n const pointerMove = (e) => {\n if (!state.isDragging) return;\n state.currentX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n };\n\n const pointerUp = () => {\n if (!state.isDragging) return;\n state.isDragging = false;\n el.classList.remove('is-dragging');\n const diff = state.startX - state.currentX;\n if (Math.abs(diff) > state.threshold) {\n if (diff > 0) next();\n else prev();\n }\n };\n\n el.addEventListener('mousedown', pointerDown);\n el.addEventListener('mousemove', pointerMove);\n el.addEventListener('mouseup', pointerUp);\n el.addEventListener('mouseleave', pointerUp);\n el.addEventListener('touchstart', pointerDown, { passive: true });\n el.addEventListener('touchmove', pointerMove, { passive: true });\n el.addEventListener('touchend', pointerUp);\n\n cleanup.push(\n () => el.removeEventListener('mousedown', pointerDown),\n () => el.removeEventListener('mousemove', pointerMove),\n () => el.removeEventListener('mouseup', pointerUp),\n () => el.removeEventListener('mouseleave', pointerUp),\n () => el.removeEventListener('touchstart', pointerDown),\n () => el.removeEventListener('touchmove', pointerMove),\n () => el.removeEventListener('touchend', pointerUp)\n );\n\n // Autoplay\n const startAutoplay = () => {\n stopAutoplay();\n state.autoplayTimer = setInterval(next, interval);\n };\n\n const stopAutoplay = () => {\n if (state.autoplayTimer) {\n clearInterval(state.autoplayTimer);\n state.autoplayTimer = null;\n }\n };\n\n if (autoplay) {\n startAutoplay();\n const pauseHandler = () => stopAutoplay();\n const resumeHandler = () => startAutoplay();\n el.addEventListener('mouseenter', pauseHandler);\n el.addEventListener('mouseleave', resumeHandler);\n el.addEventListener('focusin', pauseHandler);\n el.addEventListener('focusout', resumeHandler);\n cleanup.push(\n () => el.removeEventListener('mouseenter', pauseHandler),\n () => el.removeEventListener('mouseleave', resumeHandler),\n () => el.removeEventListener('focusin', pauseHandler),\n () => el.removeEventListener('focusout', resumeHandler),\n () => stopAutoplay()\n );\n }\n\n // Initial ARIA state\n goTo(0, false);\n\n this.instances.set(el, {\n cleanup: cleanup,\n goTo: goTo,\n next: next,\n prev: prev,\n getState: () => ({ ...state })\n });\n },\n\n goTo: function (el, index) {\n const instance = this.instances.get(el);\n if (instance) instance.goTo(index);\n },\n\n next: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.next();\n },\n\n prev: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.prev();\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('flow', Flow);\n }\n\n window.VanduoFlow = Flow;\n\n})();\n", "/**\n * Vanduo Framework - Bubble (Popover) Component\n * Click-triggered rich HTML popover, reuses tooltip positioning concepts\n */\n\n(function () {\n 'use strict';\n\n const Bubble = {\n instances: new Map(),\n _globalCleanups: [],\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-bubble], [data-vd-popover]');\n triggers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n\n if (this._globalCleanups.length === 0) {\n const outsideClick = (e) => {\n this.instances.forEach((inst, trigger) => {\n if (!inst.popover.contains(e.target) && !trigger.contains(e.target)) {\n this.hide(trigger);\n }\n });\n };\n const escHandler = (e) => {\n if (e.key === 'Escape') {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n }\n };\n document.addEventListener('click', outsideClick, true);\n document.addEventListener('keydown', escHandler);\n this._globalCleanups.push(\n () => document.removeEventListener('click', outsideClick, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n }\n },\n\n initInstance: function (trigger) {\n const cleanup = [];\n const placement = trigger.getAttribute('data-vd-bubble-placement') ||\n trigger.getAttribute('data-vd-popover-placement') || 'bottom';\n\n // Build popover element\n const popover = document.createElement('div');\n popover.className = 'vd-bubble-content';\n popover.setAttribute('role', 'dialog');\n popover.setAttribute('aria-modal', 'false');\n popover.setAttribute('data-placement', placement);\n\n const title = trigger.getAttribute('data-vd-bubble-title') ||\n trigger.getAttribute('data-vd-popover-title');\n const content = trigger.getAttribute('data-vd-bubble') ||\n trigger.getAttribute('data-vd-popover') || '';\n const htmlContent = trigger.getAttribute('data-vd-bubble-html') ||\n trigger.getAttribute('data-vd-popover-html');\n\n if (title) {\n const header = document.createElement('div');\n header.className = 'vd-bubble-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const closeBtn = document.createElement('button');\n closeBtn.className = 'vd-bubble-close';\n closeBtn.setAttribute('aria-label', 'Close');\n closeBtn.innerHTML = '×';\n header.appendChild(titleSpan);\n header.appendChild(closeBtn);\n popover.appendChild(header);\n\n const closeHandler = (e) => { e.stopPropagation(); this.hide(trigger); };\n closeBtn.addEventListener('click', closeHandler);\n cleanup.push(() => closeBtn.removeEventListener('click', closeHandler));\n }\n\n const body = document.createElement('div');\n body.className = 'vd-bubble-body';\n if (htmlContent) {\n if (typeof sanitizeHtml === 'function') {\n body.innerHTML = sanitizeHtml(htmlContent);\n } else {\n body.textContent = htmlContent;\n }\n } else {\n body.textContent = content;\n }\n popover.appendChild(body);\n\n document.body.appendChild(popover);\n\n // ARIA on trigger\n const popId = 'vd-bubble-' + Math.random().toString(36).slice(2, 9);\n popover.id = popId;\n trigger.setAttribute('aria-haspopup', 'dialog');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.setAttribute('aria-controls', popId);\n\n // Toggle on click\n const toggleHandler = (e) => {\n e.stopPropagation();\n if (popover.classList.contains('is-visible')) {\n this.hide(trigger);\n } else {\n this.hideAll();\n this.show(trigger);\n }\n };\n trigger.addEventListener('click', toggleHandler);\n cleanup.push(() => trigger.removeEventListener('click', toggleHandler));\n\n this.instances.set(trigger, { popover, cleanup, placement });\n },\n\n position: function (trigger, popover, placement) {\n const rect = trigger.getBoundingClientRect();\n const popRect = popover.getBoundingClientRect();\n const gap = 10;\n let top, left;\n\n switch (placement) {\n case 'top':\n top = rect.top - popRect.height - gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n break;\n case 'left':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.left - popRect.width - gap + window.scrollX;\n break;\n case 'right':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.right + gap + window.scrollX;\n break;\n default: // bottom\n top = rect.bottom + gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n }\n\n // Clamp to viewport\n left = Math.max(8, Math.min(left, window.innerWidth - popRect.width - 8));\n top = Math.max(8, top);\n\n popover.style.top = top + 'px';\n popover.style.left = left + 'px';\n },\n\n show: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n const { popover, placement } = instance;\n\n popover.style.display = 'block';\n popover.classList.add('is-visible');\n trigger.setAttribute('aria-expanded', 'true');\n\n requestAnimationFrame(() => {\n this.position(trigger, popover, placement);\n });\n\n trigger.dispatchEvent(new CustomEvent('bubble:show', { bubbles: true }));\n },\n\n hide: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.popover.classList.remove('is-visible');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.dispatchEvent(new CustomEvent('bubble:hide', { bubbles: true }));\n },\n\n hideAll: function () {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n },\n\n destroy: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n if (instance.popover.parentNode) {\n instance.popover.parentNode.removeChild(instance.popover);\n }\n trigger.removeAttribute('aria-haspopup');\n trigger.removeAttribute('aria-expanded');\n trigger.removeAttribute('aria-controls');\n this.instances.delete(trigger);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, trigger) => this.destroy(trigger));\n this._globalCleanups.forEach(fn => fn());\n this._globalCleanups = [];\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('bubble', Bubble);\n }\n\n window.VanduoBubble = Bubble;\n\n})();\n", "/**\n * Vanduo Framework - Waypoint (Scrollspy) Component\n * Highlights navigation links based on scroll position using IntersectionObserver\n */\n\n(function () {\n 'use strict';\n\n const Waypoint = {\n instances: new Map(),\n\n init: function () {\n const navs = document.querySelectorAll('[data-vd-waypoint-nav], [data-vd-scrollspy-nav]');\n navs.forEach(nav => {\n if (this.instances.has(nav)) return;\n this.initInstance(nav);\n });\n },\n\n initInstance: function (nav) {\n const links = Array.from(nav.querySelectorAll('a[href^=\"#\"]'));\n if (links.length === 0) return;\n\n const cleanup = [];\n const offset = parseInt(nav.getAttribute('data-vd-waypoint-offset') || '80', 10);\n const sections = [];\n\n links.forEach(link => {\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.setAttribute('data-vd-waypoint-section', '');\n sections.push({ id, link, section });\n }\n });\n\n if (sections.length === 0) return;\n\n const activeSections = new Set();\n\n const setActive = (id) => {\n links.forEach(l => l.classList.remove('is-active'));\n const target = links.find(l => l.getAttribute('href') === '#' + id);\n if (target) {\n target.classList.add('is-active');\n nav.dispatchEvent(new CustomEvent('waypoint:change', {\n detail: { activeId: id, link: target }\n }));\n }\n };\n\n const rootMargin = '-' + offset + 'px 0px -40% 0px';\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n activeSections.add(entry.target.id);\n } else {\n activeSections.delete(entry.target.id);\n }\n });\n\n // Pick the topmost visible section\n for (let i = 0; i < sections.length; i++) {\n if (activeSections.has(sections[i].id)) {\n setActive(sections[i].id);\n return;\n }\n }\n }, {\n rootMargin: rootMargin,\n threshold: 0\n });\n\n sections.forEach(s => observer.observe(s.section));\n\n // Smooth scroll on click\n links.forEach(link => {\n const clickHandler = (e) => {\n e.preventDefault();\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth' });\n setActive(id);\n }\n };\n link.addEventListener('click', clickHandler);\n cleanup.push(() => link.removeEventListener('click', clickHandler));\n });\n\n cleanup.push(() => observer.disconnect());\n\n this.instances.set(nav, { observer, cleanup, sections, setActive });\n },\n\n refresh: function (nav) {\n this.destroy(nav);\n this.initInstance(nav);\n },\n\n destroy: function (nav) {\n const instance = this.instances.get(nav);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(nav);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, nav) => this.destroy(nav));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('waypoint', Waypoint);\n }\n\n window.VanduoWaypoint = Waypoint;\n\n})();\n", "/**\n * Vanduo Framework - Ripple (Waves Effect) Component\n * Adds expanding circle animation on click at pointer position\n */\n\n(function () {\n 'use strict';\n\n const Ripple = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-ripple, [data-vd-ripple]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n\n const createWave = (e) => {\n const rect = el.getBoundingClientRect();\n const size = Math.max(rect.width, rect.height);\n const x = (e.clientX || (e.touches && e.touches[0].clientX) || rect.left + rect.width / 2) - rect.left - size / 2;\n const y = (e.clientY || (e.touches && e.touches[0].clientY) || rect.top + rect.height / 2) - rect.top - size / 2;\n\n const wave = document.createElement('span');\n wave.className = 'vd-ripple-wave';\n wave.style.width = size + 'px';\n wave.style.height = size + 'px';\n wave.style.left = x + 'px';\n wave.style.top = y + 'px';\n\n el.appendChild(wave);\n\n wave.addEventListener('animationend', () => {\n if (wave.parentNode) wave.parentNode.removeChild(wave);\n });\n };\n\n el.addEventListener('mousedown', createWave);\n el.addEventListener('touchstart', createWave, { passive: true });\n\n cleanup.push(\n () => el.removeEventListener('mousedown', createWave),\n () => el.removeEventListener('touchstart', createWave)\n );\n\n this.instances.set(el, { cleanup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n // Remove any lingering wave elements\n el.querySelectorAll('.vd-ripple-wave').forEach(w => w.remove());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('ripple', Ripple);\n }\n\n window.VanduoRipple = Ripple;\n\n})();\n", "/**\n * Vanduo Framework - Affix (Sticky) Component\n * Uses IntersectionObserver to toggle .is-stuck within the nearest scrollable parent\n */\n\n(function () {\n 'use strict';\n\n function isScrollable(element) {\n if (!element || element === document.body) return false;\n\n const style = window.getComputedStyle(element);\n const overflowY = style.overflowY;\n const overflowX = style.overflowX;\n const canScrollY = /(auto|scroll|overlay)/.test(overflowY) && element.scrollHeight > element.clientHeight;\n const canScrollX = /(auto|scroll|overlay)/.test(overflowX) && element.scrollWidth > element.clientWidth;\n\n return canScrollY || canScrollX;\n }\n\n function getScrollParent(element) {\n let parent = element.parentElement;\n\n while (parent && parent !== document.body && parent !== document.documentElement) {\n if (isScrollable(parent)) return parent;\n parent = parent.parentElement;\n }\n\n return null;\n }\n\n const Affix = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-affix, .vd-sticky, [data-vd-affix]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const parsedOffset = parseInt(el.getAttribute('data-vd-affix-offset') || '0', 10);\n const offset = Number.isNaN(parsedOffset) ? 0 : parsedOffset;\n const scrollParent = getScrollParent(el);\n let isStuck = false;\n\n const sentinel = document.createElement('div');\n sentinel.style.cssText = 'display:block;height:1px;margin-bottom:-1px;visibility:hidden;pointer-events:none;';\n el.parentNode.insertBefore(sentinel, el);\n\n el.style.setProperty('--affix-top-offset', offset + 'px');\n\n function stick() {\n if (isStuck) return;\n isStuck = true;\n el.classList.add('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:stuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n function unstick() {\n if (!isStuck) return;\n isStuck = false;\n el.classList.remove('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:unstuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n const observer = new IntersectionObserver(function (entries) {\n entries.forEach(entry => {\n if (!entry.isIntersecting) {\n stick();\n } else {\n unstick();\n }\n });\n }, {\n root: scrollParent,\n rootMargin: '-' + offset + 'px 0px 0px 0px',\n threshold: 0\n });\n\n observer.observe(sentinel);\n\n cleanup.push(\n () => observer.disconnect(),\n () => { if (sentinel.parentNode) sentinel.parentNode.removeChild(sentinel); },\n () => {\n el.classList.remove('is-stuck');\n el.style.removeProperty('--affix-top-offset');\n }\n );\n\n this.instances.set(el, { cleanup, observer, sentinel, scrollParent });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n el.classList.remove('is-stuck');\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('affix', Affix);\n }\n\n window.VanduoAffix = Affix;\n\n})();\n", "/**\n * Vanduo Framework - Suggest (Autocomplete) Component\n * Dropdown suggestion list with keyboard navigation, static/async data sources\n */\n\n(function () {\n 'use strict';\n\n /**\n * Escape HTML entities to prevent XSS when inserting into innerHTML\n * @param {string} text\n * @returns {string}\n */\n function _escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n const Suggest = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-suggest], [data-vd-autocomplete]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const minChars = parseInt(input.getAttribute('data-vd-suggest-min-chars') || '1', 10);\n const url = input.getAttribute('data-vd-suggest-url') || '';\n const staticData = input.getAttribute('data-vd-suggest') || input.getAttribute('data-vd-autocomplete') || '';\n let items = [];\n\n try { items = JSON.parse(staticData); } catch (_e) {\n items = staticData.split(',').map(s => s.trim()).filter(Boolean);\n }\n\n // Wrap input if not already wrapped\n let wrapper = input.closest('.vd-suggest-wrapper, .vd-autocomplete-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create dropdown list\n const list = document.createElement('ul');\n list.className = 'vd-suggest-list';\n list.setAttribute('role', 'listbox');\n const listId = 'vd-suggest-' + Math.random().toString(36).slice(2, 9);\n list.id = listId;\n wrapper.appendChild(list);\n\n // ARIA\n input.setAttribute('role', 'combobox');\n input.setAttribute('aria-autocomplete', 'list');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('aria-controls', listId);\n input.setAttribute('autocomplete', 'off');\n\n let highlighted = -1;\n let currentItems = [];\n let debounceTimer = null;\n\n const renderItems = (filtered, query) => {\n list.innerHTML = '';\n currentItems = filtered;\n highlighted = -1;\n\n if (filtered.length === 0) {\n const empty = document.createElement('li');\n empty.className = 'vd-suggest-empty';\n empty.textContent = 'No results';\n list.appendChild(empty);\n return;\n }\n\n filtered.forEach((item, i) => {\n const li = document.createElement('li');\n li.className = 'vd-suggest-item';\n li.setAttribute('role', 'option');\n li.id = listId + '-item-' + i;\n\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n if (query) {\n // Escape HTML first to prevent XSS, then highlight matches in the safe string\n const escaped = _escapeHtml(text);\n const re = new RegExp('(' + query.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n li.innerHTML = escaped.replace(re, '$1');\n } else {\n li.textContent = text;\n }\n\n li.addEventListener('click', () => selectItem(i));\n list.appendChild(li);\n });\n };\n\n const open = () => {\n list.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n list.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n highlighted = -1;\n input.removeAttribute('aria-activedescendant');\n };\n\n const selectItem = (index) => {\n const item = currentItems[index];\n const value = typeof item === 'object' ? (item.value || item.label || String(item)) : String(item);\n input.value = value;\n close();\n input.dispatchEvent(new CustomEvent('suggest:select', {\n detail: { value, item, index },\n bubbles: true\n }));\n };\n\n const highlight = (index) => {\n const listItems = list.querySelectorAll('.vd-suggest-item');\n listItems.forEach(li => li.classList.remove('is-highlighted'));\n if (index >= 0 && index < listItems.length) {\n highlighted = index;\n listItems[index].classList.add('is-highlighted');\n input.setAttribute('aria-activedescendant', listItems[index].id);\n listItems[index].scrollIntoView({ block: 'nearest' });\n }\n };\n\n const doSearch = async (query) => {\n if (query.length < minChars) { close(); return; }\n\n let filtered;\n if (url) {\n try {\n const separator = url.includes('?') ? '&' : '?';\n const res = await window.fetch(url + separator + 'q=' + encodeURIComponent(query));\n filtered = await res.json();\n } catch (_e) {\n filtered = [];\n }\n } else {\n const lower = query.toLowerCase();\n filtered = items.filter(item => {\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n return text.toLowerCase().includes(lower);\n });\n }\n\n renderItems(filtered, query);\n if (filtered.length > 0) open();\n else open(); // show \"no results\"\n };\n\n const inputHandler = () => {\n clearTimeout(debounceTimer);\n debounceTimer = setTimeout(() => doSearch(input.value), 200);\n };\n\n const keyHandler = (e) => {\n if (!list.classList.contains('is-open')) {\n if (e.key === 'ArrowDown') { doSearch(input.value); e.preventDefault(); }\n return;\n }\n\n const total = currentItems.length;\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n highlight(highlighted < total - 1 ? highlighted + 1 : 0);\n break;\n case 'ArrowUp':\n e.preventDefault();\n highlight(highlighted > 0 ? highlighted - 1 : total - 1);\n break;\n case 'Enter':\n e.preventDefault();\n if (highlighted >= 0) selectItem(highlighted);\n break;\n case 'Escape':\n close();\n break;\n }\n };\n\n const blurHandler = () => {\n setTimeout(close, 200);\n };\n\n input.addEventListener('input', inputHandler);\n input.addEventListener('keydown', keyHandler);\n input.addEventListener('blur', blurHandler);\n input.addEventListener('focus', () => { if (input.value.length >= minChars) doSearch(input.value); });\n\n cleanup.push(\n () => input.removeEventListener('input', inputHandler),\n () => input.removeEventListener('keydown', keyHandler),\n () => input.removeEventListener('blur', blurHandler),\n () => clearTimeout(debounceTimer),\n () => { if (list.parentNode) list.parentNode.removeChild(list); }\n );\n\n this.instances.set(input, { cleanup, list, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('suggest', Suggest);\n }\n\n window.VanduoSuggest = Suggest;\n\n})();\n", "/**\n * Vanduo Framework - Validate (Form Validation) Component\n * Declarative validation via data attributes with real-time and on-submit modes\n */\n\n(function () {\n 'use strict';\n\n const Validate = {\n instances: new Map(),\n\n rules: {\n required: (value) => value.trim().length > 0,\n email: (value) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value),\n url: (value) => { try { new URL(value); return true; } catch (_e) { return false; } },\n number: (value) => !isNaN(parseFloat(value)) && isFinite(value),\n min: (value, param) => value.length >= parseInt(param, 10),\n max: (value, param) => value.length <= parseInt(param, 10),\n minVal: (value, param) => parseFloat(value) >= parseFloat(param),\n maxVal: (value, param) => parseFloat(value) <= parseFloat(param),\n pattern: (value, param) => {\n try {\n // Cap regex length to prevent ReDoS from excessively complex patterns\n if (param.length > 100) return false;\n return new RegExp(param).test(value);\n } catch (_e) { return false; }\n },\n match: (value, param) => {\n try {\n const escaped = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(param) : param;\n const other = document.querySelector('[name=\"' + escaped + '\"]');\n return other ? value === other.value : false;\n } catch (_e) {\n return false;\n }\n }\n },\n\n messages: {\n required: 'This field is required',\n email: 'Please enter a valid email address',\n url: 'Please enter a valid URL',\n number: 'Please enter a valid number',\n min: 'Minimum {0} characters required',\n max: 'Maximum {0} characters allowed',\n minVal: 'Value must be at least {0}',\n maxVal: 'Value must be at most {0}',\n pattern: 'Invalid format',\n match: 'Fields do not match'\n },\n\n init: function () {\n const forms = document.querySelectorAll('[data-vd-validate], .vd-validate');\n forms.forEach(form => {\n if (this.instances.has(form)) return;\n this.initInstance(form);\n });\n },\n\n initInstance: function (form) {\n const cleanup = [];\n const mode = form.getAttribute('data-vd-validate-mode') || 'blur'; // blur | input | submit\n const fields = form.querySelectorAll('[data-vd-rules]');\n\n const validateField = (field) => {\n const rulesStr = field.getAttribute('data-vd-rules') || '';\n const rules = rulesStr.split('|').map(r => r.trim()).filter(Boolean);\n const value = field.value;\n const errors = [];\n\n for (const rule of rules) {\n const [name, ...params] = rule.split(':');\n const param = params.join(':');\n const validator = this.rules[name];\n\n if (validator && !validator(value, param)) {\n const customMsg = field.getAttribute('data-vd-msg-' + name);\n let msg = customMsg || this.messages[name] || 'Invalid';\n if (param) msg = msg.replace('{0}', param);\n errors.push(msg);\n break; // one error at a time\n }\n }\n\n this.setFieldState(field, errors);\n return errors.length === 0;\n };\n\n const validateAll = () => {\n let valid = true;\n fields.forEach(field => {\n if (!validateField(field)) valid = false;\n });\n return valid;\n };\n\n // Per-field listeners\n fields.forEach(field => {\n if (mode === 'input' || mode === 'blur') {\n const eventType = mode === 'input' ? 'input' : 'blur';\n const handler = () => validateField(field);\n field.addEventListener(eventType, handler);\n cleanup.push(() => field.removeEventListener(eventType, handler));\n\n if (mode === 'blur') {\n const inputClear = () => {\n if (field.classList.contains('is-invalid') || field.classList.contains('is-valid')) {\n validateField(field);\n }\n };\n field.addEventListener('input', inputClear);\n cleanup.push(() => field.removeEventListener('input', inputClear));\n }\n }\n });\n\n // Form submit\n const submitHandler = (e) => {\n const valid = validateAll();\n if (!valid) {\n e.preventDefault();\n e.stopPropagation();\n // Focus first invalid field\n const firstInvalid = form.querySelector('.is-invalid');\n if (firstInvalid) firstInvalid.focus();\n }\n form.dispatchEvent(new CustomEvent('validate:submit', {\n detail: { valid },\n bubbles: true\n }));\n };\n\n form.addEventListener('submit', submitHandler);\n cleanup.push(() => form.removeEventListener('submit', submitHandler));\n\n this.instances.set(form, { cleanup, validateAll, validateField });\n },\n\n setFieldState: function (field, errors) {\n const wrapper = field.closest('.vd-form-group') || field.parentElement;\n let errorEl = wrapper.querySelector('.vd-validate-error');\n\n field.classList.remove('is-valid', 'is-invalid');\n\n if (errors.length > 0) {\n field.classList.add('is-invalid');\n field.setAttribute('aria-invalid', 'true');\n if (!errorEl) {\n errorEl = document.createElement('div');\n errorEl.className = 'vd-validate-error';\n errorEl.id = 'vd-err-' + Math.random().toString(36).slice(2, 9);\n errorEl.setAttribute('role', 'alert');\n wrapper.appendChild(errorEl);\n }\n errorEl.textContent = errors[0];\n errorEl.style.display = '';\n field.setAttribute('aria-describedby', errorEl.id);\n } else if (field.value.trim()) {\n field.classList.add('is-valid');\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n } else {\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n }\n },\n\n validateForm: function (form) {\n const instance = this.instances.get(form);\n return instance ? instance.validateAll() : false;\n },\n\n addRule: function (name, validator, message) {\n this.rules[name] = validator;\n if (message) this.messages[name] = message;\n },\n\n destroy: function (form) {\n const instance = this.instances.get(form);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(form);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, form) => this.destroy(form));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('validate', Validate);\n }\n\n window.VanduoValidate = Validate;\n\n})();\n", "/**\n * Vanduo Framework - Datepicker Component\n * Calendar popup attached to input field with month/year navigation\n */\n\n(function () {\n 'use strict';\n\n const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\n const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];\n\n const Datepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-datepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const format = input.getAttribute('data-vd-datepicker-format') || 'yyyy-mm-dd';\n const minStr = input.getAttribute('data-vd-datepicker-min');\n const maxStr = input.getAttribute('data-vd-datepicker-max');\n const minDate = minStr ? new Date(minStr) : null;\n const maxDate = maxStr ? new Date(maxStr) : null;\n\n const today = new Date();\n let viewYear = today.getFullYear();\n let viewMonth = today.getMonth();\n let selectedDate = null;\n let viewMode = 'days'; // days | months | years\n\n // Parse existing value\n if (input.value) {\n const parsed = new Date(input.value);\n if (!isNaN(parsed.getTime())) {\n selectedDate = parsed;\n viewYear = parsed.getFullYear();\n viewMonth = parsed.getMonth();\n }\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-datepicker-popup';\n popup.setAttribute('role', 'dialog');\n popup.setAttribute('aria-label', 'Choose date');\n\n const wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n wrapper.appendChild(popup);\n\n const formatDate = (d) => {\n const yyyy = d.getFullYear();\n const mm = String(d.getMonth() + 1).padStart(2, '0');\n const dd = String(d.getDate()).padStart(2, '0');\n return format.replace('yyyy', yyyy).replace('mm', mm).replace('dd', dd);\n };\n\n const isDisabled = (d) => {\n if (minDate && d < minDate) return true;\n if (maxDate && d > maxDate) return true;\n return false;\n };\n\n const isSameDay = (a, b) => a && b &&\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate();\n\n const render = () => {\n popup.innerHTML = '';\n\n // Header\n const header = document.createElement('div');\n header.className = 'vd-datepicker-header';\n\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-datepicker-prev';\n prevBtn.innerHTML = '‹';\n prevBtn.setAttribute('aria-label', 'Previous');\n\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-datepicker-next';\n nextBtn.innerHTML = '›';\n nextBtn.setAttribute('aria-label', 'Next');\n\n const title = document.createElement('span');\n title.className = 'vd-datepicker-title';\n\n if (viewMode === 'days') {\n title.textContent = MONTHS[viewMonth] + ' ' + viewYear;\n title.addEventListener('click', () => { viewMode = 'months'; render(); });\n prevBtn.addEventListener('click', () => { viewMonth--; if (viewMonth < 0) { viewMonth = 11; viewYear--; } render(); });\n nextBtn.addEventListener('click', () => { viewMonth++; if (viewMonth > 11) { viewMonth = 0; viewYear++; } render(); });\n } else if (viewMode === 'months') {\n title.textContent = String(viewYear);\n title.addEventListener('click', () => { viewMode = 'years'; render(); });\n prevBtn.addEventListener('click', () => { viewYear--; render(); });\n nextBtn.addEventListener('click', () => { viewYear++; render(); });\n } else {\n const decadeStart = Math.floor(viewYear / 10) * 10;\n title.textContent = decadeStart + ' - ' + (decadeStart + 9);\n prevBtn.addEventListener('click', () => { viewYear -= 10; render(); });\n nextBtn.addEventListener('click', () => { viewYear += 10; render(); });\n }\n\n header.appendChild(prevBtn);\n header.appendChild(title);\n header.appendChild(nextBtn);\n popup.appendChild(header);\n\n if (viewMode === 'days') {\n // Weekday headers\n const weekdays = document.createElement('div');\n weekdays.className = 'vd-datepicker-weekdays';\n DAYS.forEach(d => {\n const span = document.createElement('span');\n span.textContent = d;\n weekdays.appendChild(span);\n });\n popup.appendChild(weekdays);\n\n // Days grid\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-days';\n\n const firstDay = new Date(viewYear, viewMonth, 1).getDay();\n const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();\n const daysInPrev = new Date(viewYear, viewMonth, 0).getDate();\n\n // Previous month padding\n for (let i = firstDay - 1; i >= 0; i--) {\n const btn = createDayBtn(daysInPrev - i, true);\n grid.appendChild(btn);\n }\n\n // Current month\n for (let d = 1; d <= daysInMonth; d++) {\n const date = new Date(viewYear, viewMonth, d);\n const btn = createDayBtn(d, false, date);\n grid.appendChild(btn);\n }\n\n // Next month padding\n const totalCells = firstDay + daysInMonth;\n const remaining = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7);\n for (let i = 1; i <= remaining; i++) {\n const btn = createDayBtn(i, true);\n grid.appendChild(btn);\n }\n\n popup.appendChild(grid);\n } else if (viewMode === 'months') {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-months';\n MONTHS.forEach((name, i) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-month-btn';\n btn.textContent = name.slice(0, 3);\n if (selectedDate && selectedDate.getFullYear() === viewYear && selectedDate.getMonth() === i) {\n btn.classList.add('is-selected');\n }\n btn.addEventListener('click', () => { viewMonth = i; viewMode = 'days'; render(); });\n grid.appendChild(btn);\n });\n popup.appendChild(grid);\n } else {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-years';\n const decadeStart = Math.floor(viewYear / 10) * 10;\n for (let y = decadeStart - 1; y <= decadeStart + 10; y++) {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-year-btn';\n btn.textContent = y;\n if (selectedDate && selectedDate.getFullYear() === y) btn.classList.add('is-selected');\n if (y < decadeStart || y > decadeStart + 9) btn.style.opacity = '0.4';\n btn.addEventListener('click', () => { viewYear = y; viewMode = 'months'; render(); });\n grid.appendChild(btn);\n }\n popup.appendChild(grid);\n }\n };\n\n const createDayBtn = (day, outside, date) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-day';\n btn.textContent = day;\n\n if (outside) {\n btn.classList.add('is-outside');\n btn.tabIndex = -1;\n return btn;\n }\n\n if (date && isSameDay(date, today)) btn.classList.add('is-today');\n if (date && isSameDay(date, selectedDate)) btn.classList.add('is-selected');\n if (date && isDisabled(date)) {\n btn.classList.add('is-disabled');\n return btn;\n }\n\n if (date) {\n btn.addEventListener('click', () => {\n selectedDate = date;\n viewYear = date.getFullYear();\n viewMonth = date.getMonth();\n input.value = formatDate(date);\n close();\n input.dispatchEvent(new CustomEvent('datepicker:select', {\n detail: { date, formatted: input.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n }\n\n return btn;\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n viewMode = 'days';\n };\n\n // Events\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'dialog');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close, popup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('datepicker', Datepicker);\n }\n\n window.VanduoDatepicker = Datepicker;\n\n})();\n", "/**\n * Vanduo Framework - Timepicker Component\n * Dropdown time selection with 12h/24h format and configurable step intervals\n */\n\n(function () {\n 'use strict';\n\n const Timepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-timepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const is24h = input.getAttribute('data-vd-timepicker-format') === '24h';\n const step = parseInt(input.getAttribute('data-vd-timepicker-step') || '30', 10);\n\n // Create wrapper\n let wrapper = input.closest('.vd-suggest-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-timepicker-popup';\n popup.setAttribute('role', 'listbox');\n wrapper.appendChild(popup);\n\n // Generate time slots\n const times = [];\n for (let h = 0; h < 24; h++) {\n for (let m = 0; m < 60; m += step) {\n const hh24 = String(h).padStart(2, '0');\n const mm = String(m).padStart(2, '0');\n\n if (is24h) {\n times.push({ display: hh24 + ':' + mm, value: hh24 + ':' + mm });\n } else {\n const period = h < 12 ? 'AM' : 'PM';\n const h12 = h === 0 ? 12 : (h > 12 ? h - 12 : h);\n const display = h12 + ':' + mm + ' ' + period;\n times.push({ display, value: hh24 + ':' + mm });\n }\n }\n }\n\n const render = () => {\n popup.innerHTML = '';\n times.forEach(t => {\n const item = document.createElement('div');\n item.className = 'vd-timepicker-item';\n item.setAttribute('role', 'option');\n item.textContent = t.display;\n\n if (input.value === t.value || input.value === t.display) {\n item.classList.add('is-selected');\n }\n\n item.addEventListener('click', () => {\n input.value = t.display;\n popup.querySelectorAll('.vd-timepicker-item').forEach(i => i.classList.remove('is-selected'));\n item.classList.add('is-selected');\n close();\n input.dispatchEvent(new CustomEvent('timepicker:select', {\n detail: { display: t.display, value: t.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n\n popup.appendChild(item);\n });\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n // Scroll to selected\n const selected = popup.querySelector('.is-selected');\n if (selected) selected.scrollIntoView({ block: 'center' });\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n };\n\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'listbox');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n input.readOnly = true;\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('timepicker', Timepicker);\n }\n\n window.VanduoTimepicker = Timepicker;\n\n})();\n", "/**\n * Vanduo Framework - Stepper Component\n * Multi-step progress indicator with state management\n */\n\n(function () {\n 'use strict';\n\n const Stepper = {\n instances: new Map(),\n\n init: function () {\n const steppers = document.querySelectorAll('.vd-stepper');\n steppers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const items = Array.from(el.querySelectorAll('.vd-stepper-item'));\n const isClickable = el.classList.contains('vd-stepper-clickable');\n let currentIndex = items.findIndex(i => i.classList.contains('is-active'));\n if (currentIndex === -1) currentIndex = 0;\n\n const setStep = (index) => {\n if (index < 0 || index >= items.length) return;\n const prev = currentIndex;\n currentIndex = index;\n\n items.forEach((item, i) => {\n item.classList.remove('is-active', 'is-completed');\n if (i < index) item.classList.add('is-completed');\n else if (i === index) item.classList.add('is-active');\n });\n\n el.dispatchEvent(new CustomEvent('stepper:change', {\n detail: { current: index, previous: prev, total: items.length },\n bubbles: true\n }));\n };\n\n if (isClickable) {\n items.forEach((item, i) => {\n const handler = () => setStep(i);\n item.addEventListener('click', handler);\n cleanup.push(() => item.removeEventListener('click', handler));\n });\n }\n\n // Initialize current state\n setStep(currentIndex);\n\n this.instances.set(el, {\n cleanup,\n setStep,\n next: () => setStep(currentIndex + 1),\n prev: () => setStep(currentIndex - 1),\n getCurrent: () => currentIndex\n });\n },\n\n setStep: function (el, index) {\n const inst = this.instances.get(el);\n if (inst) inst.setStep(index);\n },\n\n next: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.next();\n },\n\n prev: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.prev();\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('stepper', Stepper);\n }\n\n window.VanduoStepper = Stepper;\n\n})();\n", "/**\n * Vanduo Framework - Rating Component\n * Star-based rating input with hover preview and read-only mode\n */\n\n(function () {\n 'use strict';\n\n const Rating = {\n instances: new Map(),\n\n init: function () {\n const ratings = document.querySelectorAll('[data-vd-rating]');\n ratings.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const max = parseInt(el.getAttribute('data-vd-rating-max') || '5', 10);\n const initialValue = parseFloat(el.getAttribute('data-vd-rating-value') || '0');\n const readonly = el.classList.contains('vd-rating-readonly') || el.hasAttribute('data-vd-rating-readonly');\n let currentValue = initialValue;\n\n el.classList.add('vd-rating');\n el.setAttribute('role', 'radiogroup');\n el.setAttribute('aria-label', el.getAttribute('aria-label') || 'Rating');\n\n // Clear existing stars\n el.innerHTML = '';\n\n // Create stars\n const stars = [];\n for (let i = 1; i <= max; i++) {\n const star = document.createElement('button');\n star.type = 'button';\n star.className = 'vd-rating-star';\n star.setAttribute('role', 'radio');\n star.setAttribute('aria-label', i + ' star' + (i > 1 ? 's' : ''));\n star.setAttribute('aria-checked', i <= currentValue ? 'true' : 'false');\n if (readonly) star.tabIndex = -1;\n stars.push(star);\n el.appendChild(star);\n }\n\n // Value display\n const valueDisplay = document.createElement('span');\n valueDisplay.className = 'vd-rating-value';\n valueDisplay.textContent = currentValue > 0 ? currentValue.toString() : '';\n el.appendChild(valueDisplay);\n\n const updateStars = (value) => {\n stars.forEach((star, i) => {\n star.classList.remove('is-active', 'is-half');\n const starNum = i + 1;\n if (starNum <= Math.floor(value)) {\n star.classList.add('is-active');\n } else if (starNum - 0.5 <= value) {\n star.classList.add('is-half');\n }\n star.setAttribute('aria-checked', starNum <= value ? 'true' : 'false');\n });\n valueDisplay.textContent = value > 0 ? value.toString() : '';\n };\n\n updateStars(currentValue);\n\n if (!readonly) {\n stars.forEach((star, i) => {\n const enterHandler = () => {\n stars.forEach((s, j) => {\n s.classList.toggle('is-hovered', j <= i);\n });\n };\n const leaveHandler = () => {\n stars.forEach(s => s.classList.remove('is-hovered'));\n };\n const clickHandler = () => {\n currentValue = i + 1;\n el.setAttribute('data-vd-rating-value', currentValue);\n updateStars(currentValue);\n el.dispatchEvent(new CustomEvent('rating:change', {\n detail: { value: currentValue, max },\n bubbles: true\n }));\n };\n\n star.addEventListener('mouseenter', enterHandler);\n star.addEventListener('mouseleave', leaveHandler);\n star.addEventListener('click', clickHandler);\n\n cleanup.push(\n () => star.removeEventListener('mouseenter', enterHandler),\n () => star.removeEventListener('mouseleave', leaveHandler),\n () => star.removeEventListener('click', clickHandler)\n );\n });\n\n // Keyboard\n const keyHandler = (e) => {\n if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n e.preventDefault();\n if (currentValue < max) {\n currentValue++;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n e.preventDefault();\n if (currentValue > 1) {\n currentValue--;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n }\n };\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n }\n\n this.instances.set(el, {\n cleanup,\n getValue: () => currentValue,\n setValue: (v) => { currentValue = v; updateStars(v); }\n });\n },\n\n getValue: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getValue() : 0;\n },\n\n setValue: function (el, value) {\n const inst = this.instances.get(el);\n if (inst) inst.setValue(value);\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('rating', Rating);\n }\n\n window.VanduoRating = Rating;\n\n})();\n", "/**\n * Vanduo Framework - Transfer (Dual-list) Component\n * Source-to-target list transfer with search, select-all, and move actions\n */\n\n(function () {\n 'use strict';\n\n const Transfer = {\n instances: new Map(),\n\n init: function () {\n const transfers = document.querySelectorAll('[data-vd-transfer]');\n transfers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n el.classList.add('vd-transfer');\n\n let sourceData, targetData;\n try {\n const raw = JSON.parse(el.getAttribute('data-vd-transfer') || '[]');\n sourceData = raw.map((item, i) => ({\n id: item.id || 'item-' + i,\n label: item.label || item.text || String(item),\n selected: false\n }));\n } catch (_e) {\n sourceData = [];\n }\n targetData = [];\n\n const sourceSelected = new Set();\n const targetSelected = new Set();\n\n const render = () => {\n el.innerHTML = '';\n\n // Source panel\n const sourcePanel = createPanel('Source', sourceData, sourceSelected, 'source');\n // Actions\n const actions = document.createElement('div');\n actions.className = 'vd-transfer-actions';\n\n const moveRightBtn = document.createElement('button');\n moveRightBtn.type = 'button';\n moveRightBtn.className = 'vd-transfer-btn';\n moveRightBtn.innerHTML = '›';\n moveRightBtn.setAttribute('aria-label', 'Move to target');\n moveRightBtn.disabled = sourceSelected.size === 0;\n moveRightBtn.addEventListener('click', () => moveRight());\n\n const moveLeftBtn = document.createElement('button');\n moveLeftBtn.type = 'button';\n moveLeftBtn.className = 'vd-transfer-btn';\n moveLeftBtn.innerHTML = '‹';\n moveLeftBtn.setAttribute('aria-label', 'Move to source');\n moveLeftBtn.disabled = targetSelected.size === 0;\n moveLeftBtn.addEventListener('click', () => moveLeft());\n\n actions.appendChild(moveRightBtn);\n actions.appendChild(moveLeftBtn);\n\n // Target panel\n const targetPanel = createPanel('Target', targetData, targetSelected, 'target');\n\n el.appendChild(sourcePanel);\n el.appendChild(actions);\n el.appendChild(targetPanel);\n };\n\n const createPanel = (title, data, selected, _side) => {\n const panel = document.createElement('div');\n panel.className = 'vd-transfer-panel';\n\n const header = document.createElement('div');\n header.className = 'vd-transfer-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const count = document.createElement('span');\n count.className = 'vd-transfer-count';\n count.textContent = selected.size + '/' + data.length;\n header.appendChild(titleSpan);\n header.appendChild(count);\n panel.appendChild(header);\n\n // Search\n const searchDiv = document.createElement('div');\n searchDiv.className = 'vd-transfer-search';\n const searchInput = document.createElement('input');\n searchInput.type = 'text';\n searchInput.placeholder = 'Search...';\n searchInput.setAttribute('aria-label', 'Search ' + title.toLowerCase());\n searchDiv.appendChild(searchInput);\n panel.appendChild(searchDiv);\n\n // List\n const list = document.createElement('ul');\n list.className = 'vd-transfer-list';\n list.setAttribute('role', 'listbox');\n\n const renderList = (filter) => {\n list.innerHTML = '';\n const filtered = filter ? data.filter(d => {\n const label = (d.label || d.text || String(d)).toLowerCase();\n return label.includes(filter.toLowerCase());\n }) : data;\n filtered.forEach(item => {\n const li = document.createElement('li');\n li.className = 'vd-transfer-item';\n li.setAttribute('role', 'option');\n if (selected.has(item.id)) li.classList.add('is-selected');\n\n const checkbox = document.createElement('input');\n checkbox.type = 'checkbox';\n checkbox.checked = selected.has(item.id);\n checkbox.setAttribute('aria-label', item.label);\n\n const label = document.createElement('span');\n label.textContent = item.label;\n\n li.addEventListener('click', () => {\n if (selected.has(item.id)) selected.delete(item.id);\n else selected.add(item.id);\n render();\n });\n\n li.appendChild(checkbox);\n li.appendChild(label);\n list.appendChild(li);\n });\n };\n\n searchInput.addEventListener('input', () => renderList(searchInput.value));\n renderList('');\n\n panel.appendChild(list);\n return panel;\n };\n\n const moveRight = () => {\n const toMove = sourceData.filter(d => sourceSelected.has(d.id));\n sourceData = sourceData.filter(d => !sourceSelected.has(d.id));\n targetData = targetData.concat(toMove);\n sourceSelected.clear();\n render();\n fireChange();\n };\n\n const moveLeft = () => {\n const toMove = targetData.filter(d => targetSelected.has(d.id));\n targetData = targetData.filter(d => !targetSelected.has(d.id));\n sourceData = sourceData.concat(toMove);\n targetSelected.clear();\n render();\n fireChange();\n };\n\n const fireChange = () => {\n el.dispatchEvent(new CustomEvent('transfer:change', {\n detail: {\n source: sourceData.map(d => d.id),\n target: targetData.map(d => d.id)\n },\n bubbles: true\n }));\n };\n\n render();\n\n this.instances.set(el, {\n cleanup,\n getTarget: () => targetData.map(d => d.id),\n getSource: () => sourceData.map(d => d.id)\n });\n },\n\n getSelected: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getTarget() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('transfer', Transfer);\n }\n\n window.VanduoTransfer = Transfer;\n\n})();\n", "/**\n * Vanduo Framework - Tree View Component\n * Hierarchical collapsible tree with checkbox selection and keyboard navigation\n */\n\n(function () {\n 'use strict';\n\n const Tree = {\n instances: new Map(),\n\n init: function () {\n const trees = document.querySelectorAll('[data-vd-tree]');\n trees.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const cascade = el.getAttribute('data-vd-tree-cascade') !== 'false';\n\n let data;\n try { data = JSON.parse(el.getAttribute('data-vd-tree') || '[]'); } catch (_e) { data = []; }\n\n el.classList.add('vd-tree');\n el.setAttribute('role', 'tree');\n\n const render = (items, parent) => {\n parent.innerHTML = '';\n items.forEach(item => {\n const node = document.createElement('li');\n node.className = 'vd-tree-node';\n node.setAttribute('role', 'treeitem');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n if (item.open) node.classList.add('is-open');\n\n const content = document.createElement('div');\n content.className = 'vd-tree-node-content';\n\n // Toggle\n if (item.children && item.children.length > 0) {\n const toggle = document.createElement('button');\n toggle.type = 'button';\n toggle.className = 'vd-tree-toggle';\n toggle.setAttribute('aria-label', 'Toggle');\n toggle.addEventListener('click', (e) => {\n e.stopPropagation();\n item.open = !item.open;\n node.classList.toggle('is-open');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n });\n content.appendChild(toggle);\n } else {\n const ph = document.createElement('span');\n ph.className = 'vd-tree-toggle-placeholder';\n content.appendChild(ph);\n }\n\n // Checkbox\n if (el.hasAttribute('data-vd-tree-checkbox')) {\n const cb = document.createElement('input');\n cb.type = 'checkbox';\n cb.className = 'vd-tree-checkbox';\n cb.checked = !!item.checked;\n cb.setAttribute('aria-label', item.label);\n cb.addEventListener('change', (e) => {\n e.stopPropagation();\n item.checked = cb.checked;\n if (cascade && item.children) {\n setChildChecked(item.children, cb.checked);\n render(data, el);\n }\n el.dispatchEvent(new CustomEvent('tree:check', {\n detail: { id: item.id, checked: cb.checked, label: item.label },\n bubbles: true\n }));\n });\n content.appendChild(cb);\n }\n\n // Icon\n if (item.icon) {\n const icon = document.createElement('span');\n icon.className = 'vd-tree-icon ' + item.icon;\n content.appendChild(icon);\n }\n\n // Label\n const label = document.createElement('span');\n label.className = 'vd-tree-label';\n label.textContent = item.label || '';\n content.appendChild(label);\n\n node.appendChild(content);\n\n // Children\n if (item.children && item.children.length > 0) {\n const childList = document.createElement('ul');\n childList.className = 'vd-tree-children';\n childList.setAttribute('role', 'group');\n render(item.children, childList);\n node.appendChild(childList);\n }\n\n parent.appendChild(node);\n });\n };\n\n const setChildChecked = (items, checked) => {\n items.forEach(item => {\n item.checked = checked;\n if (item.children) setChildChecked(item.children, checked);\n });\n };\n\n // Keyboard\n const keyHandler = (e) => {\n const focused = document.activeElement;\n if (!el.contains(focused)) return;\n\n const nodes = Array.from(el.querySelectorAll('.vd-tree-node-content'));\n const idx = nodes.indexOf(focused.closest('.vd-tree-node-content'));\n if (idx === -1) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (idx < nodes.length - 1) {\n const next = nodes[idx + 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (next) next.focus();\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (idx > 0) {\n const prev = nodes[idx - 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (prev) prev.focus();\n }\n break;\n }\n };\n\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n render(data, el);\n\n this.instances.set(el, {\n cleanup,\n getData: () => data,\n getChecked: () => {\n const checked = [];\n const collect = (items) => {\n items.forEach(i => {\n if (i.checked) checked.push(i.id || i.label);\n if (i.children) collect(i.children);\n });\n };\n collect(data);\n return checked;\n }\n });\n },\n\n getChecked: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getChecked() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tree', Tree);\n }\n\n window.VanduoTree = Tree;\n\n})();\n", "/**\n * Vanduo Framework - Spotlight (Feature Discovery) Component\n * Guided tour with overlay highlight and step-through tooltip\n */\n\n(function () {\n 'use strict';\n\n const Spotlight = {\n _active: false,\n _steps: [],\n _currentStep: 0,\n _elements: {},\n _cleanup: [],\n _boundTriggers: new WeakMap(),\n _triggerElement: null,\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-spotlight]');\n\n triggers.forEach(trigger => {\n if (this._boundTriggers.has(trigger)) return;\n\n const clickHandler = (event) => {\n event.preventDefault();\n\n const steps = this._parseSteps(trigger.getAttribute('data-vd-spotlight'));\n if (steps.length === 0) return;\n\n this.start(steps, { trigger });\n };\n\n trigger.addEventListener('click', clickHandler);\n this._boundTriggers.set(trigger, clickHandler);\n });\n },\n\n _parseSteps: function (raw) {\n if (typeof raw !== 'string' || raw.trim() === '') return [];\n\n try {\n const parsed = JSON.parse(raw);\n return this._normalizeSteps(parsed);\n } catch (error) {\n console.error('VanduoSpotlight: invalid data-vd-spotlight payload.', error);\n return [];\n }\n },\n\n _normalizeStep: function (step) {\n if (!step || typeof step !== 'object') return null;\n\n const target = step.target;\n const hasSelectorTarget = typeof target === 'string' && target.trim() !== '';\n const hasElementTarget = typeof Element !== 'undefined' && target instanceof Element;\n\n if (!hasSelectorTarget && !hasElementTarget) return null;\n\n const title = typeof step.title === 'string' ? step.title : '';\n const description = typeof step.description === 'string'\n ? step.description\n : (typeof step.content === 'string' ? step.content : '');\n\n return {\n target,\n title,\n description\n };\n },\n\n _normalizeSteps: function (steps) {\n if (!Array.isArray(steps)) return [];\n\n return steps\n .map(step => this._normalizeStep(step))\n .filter(Boolean);\n },\n\n start: function (steps, options) {\n if (this._active) this.stop();\n\n const normalizedSteps = this._normalizeSteps(steps);\n if (normalizedSteps.length === 0) return;\n\n const startOptions = options || {};\n\n this._steps = normalizedSteps;\n this._currentStep = 0;\n this._active = true;\n this._triggerElement = startOptions.trigger || (document.activeElement instanceof HTMLElement ? document.activeElement : null);\n\n // Create overlay\n const overlay = document.createElement('div');\n overlay.className = 'vd-spotlight-overlay';\n overlay.setAttribute('aria-hidden', 'true');\n document.body.appendChild(overlay);\n\n // Create tooltip\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-spotlight-tooltip';\n tooltip.setAttribute('role', 'dialog');\n tooltip.setAttribute('aria-modal', 'true');\n tooltip.tabIndex = -1;\n document.body.appendChild(tooltip);\n\n this._elements = { overlay, tooltip };\n\n // ESC to close\n const escHandler = (e) => { if (e.key === 'Escape') this.stop(); };\n document.addEventListener('keydown', escHandler);\n this._cleanup.push(() => document.removeEventListener('keydown', escHandler));\n\n // Overlay click to close\n overlay.addEventListener('click', () => this.stop());\n\n this._showStep(this._currentStep);\n },\n\n _showStep: function (index) {\n const step = this._steps[index];\n if (!step) return;\n\n const target = typeof step.target === 'string' ? document.querySelector(step.target) : step.target;\n const { tooltip } = this._elements;\n\n // Remove previous highlight\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n // Highlight target\n if (target) {\n target.classList.add('vd-spotlight-target');\n target.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n\n // Build tooltip content\n const total = this._steps.length;\n tooltip.innerHTML = '';\n tooltip.removeAttribute('aria-labelledby');\n tooltip.removeAttribute('aria-describedby');\n\n if (step.title) {\n const title = document.createElement('h4');\n title.className = 'vd-spotlight-title';\n title.id = 'vd-spotlight-title-' + index + '-' + Date.now();\n title.textContent = step.title;\n tooltip.appendChild(title);\n tooltip.setAttribute('aria-labelledby', title.id);\n }\n\n if (step.description) {\n const desc = document.createElement('p');\n desc.className = 'vd-spotlight-description';\n desc.id = 'vd-spotlight-description-' + index + '-' + Date.now();\n desc.textContent = step.description;\n tooltip.appendChild(desc);\n tooltip.setAttribute('aria-describedby', desc.id);\n }\n\n // Footer\n const footer = document.createElement('div');\n footer.className = 'vd-spotlight-footer';\n footer.setAttribute('aria-label', 'Step ' + (index + 1) + ' of ' + total);\n\n const counter = document.createElement('span');\n counter.className = 'vd-spotlight-counter';\n counter.textContent = (index + 1) + ' / ' + total;\n\n const actions = document.createElement('div');\n actions.className = 'vd-spotlight-actions';\n\n if (index > 0) {\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-spotlight-btn';\n prevBtn.textContent = 'Back';\n prevBtn.addEventListener('click', () => this.prev());\n actions.appendChild(prevBtn);\n }\n\n const skipBtn = document.createElement('button');\n skipBtn.type = 'button';\n skipBtn.className = 'vd-spotlight-btn';\n skipBtn.textContent = 'Skip';\n skipBtn.addEventListener('click', () => this.stop());\n actions.appendChild(skipBtn);\n\n if (index < total - 1) {\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n nextBtn.textContent = 'Next';\n nextBtn.addEventListener('click', () => this.next());\n actions.appendChild(nextBtn);\n } else {\n const doneBtn = document.createElement('button');\n doneBtn.type = 'button';\n doneBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n doneBtn.textContent = 'Done';\n doneBtn.addEventListener('click', () => this.stop());\n actions.appendChild(doneBtn);\n }\n\n footer.appendChild(counter);\n footer.appendChild(actions);\n tooltip.appendChild(footer);\n\n // Position tooltip near target\n if (target) {\n requestAnimationFrame(() => {\n const rect = target.getBoundingClientRect();\n const tRect = tooltip.getBoundingClientRect();\n let top = rect.bottom + 12 + window.scrollY;\n let left = rect.left + (rect.width - tRect.width) / 2 + window.scrollX;\n\n // Keep in viewport\n left = Math.max(8, Math.min(left, window.innerWidth - tRect.width - 8));\n if (top + tRect.height > window.innerHeight + window.scrollY) {\n top = rect.top - tRect.height - 12 + window.scrollY;\n }\n\n tooltip.style.top = top + 'px';\n tooltip.style.left = left + 'px';\n });\n }\n\n document.dispatchEvent(new CustomEvent('spotlight:step', {\n detail: { index, step: index, total, data: step }\n }));\n },\n\n next: function () {\n if (this._currentStep < this._steps.length - 1) {\n this._currentStep++;\n this._showStep(this._currentStep);\n }\n },\n\n prev: function () {\n if (this._currentStep > 0) {\n this._currentStep--;\n this._showStep(this._currentStep);\n }\n },\n\n stop: function () {\n if (!this._active) return;\n\n const total = this._steps.length;\n const detail = {\n completedSteps: total === 0 ? 0 : Math.min(this._currentStep + 1, total),\n total,\n completed: total > 0 && this._currentStep >= total - 1\n };\n\n this._active = false;\n\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n if (this._elements.overlay && this._elements.overlay.parentNode) {\n this._elements.overlay.parentNode.removeChild(this._elements.overlay);\n }\n if (this._elements.tooltip && this._elements.tooltip.parentNode) {\n this._elements.tooltip.parentNode.removeChild(this._elements.tooltip);\n }\n\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n this._elements = {};\n this._steps = [];\n this._currentStep = 0;\n\n if (this._triggerElement && this._triggerElement.isConnected && typeof this._triggerElement.focus === 'function') {\n this._triggerElement.focus();\n }\n this._triggerElement = null;\n\n document.dispatchEvent(new CustomEvent('spotlight:end', { detail }));\n },\n\n destroyAll: function () {\n this.stop();\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('spotlight', Spotlight);\n }\n\n window.VanduoSpotlight = Spotlight;\n\n})();\n", "/**\n * Vanduo Framework - Music Player Component\n * HTML5 Audio-based music player with transport controls, volume,\n * and optional shuffle, seek bar, and playlist features.\n *\n * Options (passed to MusicPlayer.init or data-music-player-options):\n * tracks {Array} - [{name, url}] \u2014 required\n * volume {number} - Initial volume 0\u20131 (default 0.5)\n * shuffle {boolean} - Shuffle on init (default false)\n * showProgress {boolean} - Show seek/progress bar (default false)\n * showPlaylist {boolean} - Show expandable playlist panel (default false)\n * autoAdvance {boolean} - Auto-play next track on end (default true)\n *\n * Custom events (all bubble, dispatched on container):\n * musicplayer:play \u2014 playback started\n * musicplayer:pause \u2014 playback paused\n * musicplayer:trackchange \u2014 detail: { index, name, url }\n * musicplayer:volumechange \u2014 detail: { volume }\n * musicplayer:ended \u2014 last track ended (autoAdvance=false only)\n *\n * Programmatic API:\n * MusicPlayer.init(container?, options?)\n * MusicPlayer.play(container)\n * MusicPlayer.pause(container)\n * MusicPlayer.toggle(container)\n * MusicPlayer.next(container)\n * MusicPlayer.previous(container)\n * MusicPlayer.setVolume(container, value)\n * MusicPlayer.setTrack(container, index)\n * MusicPlayer.shuffle(container)\n * MusicPlayer.getState(container)\n * MusicPlayer.destroy(container)\n * MusicPlayer.destroyAll()\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fisher-Yates shuffle (returns new array).\n * @param {Array} arr\n * @returns {Array}\n */\n function shuffleArray(arr) {\n const shuffled = arr.slice();\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n const tmp = shuffled[i];\n shuffled[i] = shuffled[j];\n shuffled[j] = tmp;\n }\n return shuffled;\n }\n\n /**\n * Format seconds as m:ss.\n * @param {number} seconds\n * @returns {string}\n */\n function formatTime(seconds) {\n if (!isFinite(seconds) || seconds < 0) return '0:00';\n const m = Math.floor(seconds / 60);\n const s = Math.floor(seconds % 60);\n return m + ':' + (s < 10 ? '0' : '') + s;\n }\n\n /**\n * Set CSS background-size on a range input to visually fill the track.\n * @param {HTMLInputElement} input\n */\n function updateRangeFill(input) {\n const min = parseFloat(input.min) || 0;\n const max = parseFloat(input.max) || 1;\n const val = parseFloat(input.value) || 0;\n const pct = ((val - min) / (max - min)) * 100;\n input.style.setProperty('--fill', pct + '%');\n // Fallback inline gradient for browsers without ::-moz-range-progress\n input.style.backgroundImage =\n 'linear-gradient(to right, var(--music-player-track-fill, currentColor) 0%, ' +\n 'var(--music-player-track-fill, currentColor) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) 100%)';\n }\n\n /* \u2500\u2500\u2500 Phosphor icon helper (matches framework icon style) \u2500 */\n\n /**\n * Return an element (Phosphor icon).\n * @param {string} name\n * @returns {HTMLElement}\n */\n function icon(name) {\n const el = document.createElement('i');\n el.className = 'ph ph-' + name;\n el.setAttribute('aria-hidden', 'true');\n return el;\n }\n\n /* \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const MusicPlayer = {\n /** @type {Map} */\n instances: new Map(),\n\n /**\n * Default options.\n */\n defaults: {\n tracks: [],\n volume: 0.5,\n shuffle: false,\n showProgress: false,\n showPlaylist: false,\n autoAdvance: true,\n },\n\n /**\n * Auto-initialize all .vd-music-player / [data-music-player] elements.\n * Options can be provided via data-music-player-options (JSON string).\n */\n init: function () {\n document.querySelectorAll('.vd-music-player, [data-music-player]').forEach((el) => {\n if (this.instances.has(el)) return;\n\n let opts = {};\n const attr = el.getAttribute('data-music-player-options');\n if (attr) {\n try { opts = JSON.parse(attr); } catch (_) { /* ignore malformed JSON */ }\n }\n this.initPlayer(el, opts);\n });\n },\n\n /**\n * Initialize a single player element.\n * @param {HTMLElement} container\n * @param {Object} [options]\n */\n initPlayer: function (container, options) {\n const opts = Object.assign({}, this.defaults, options || {});\n\n // Validate and normalise tracks\n const rawTracks = Array.isArray(opts.tracks) ? opts.tracks : [];\n const tracks = rawTracks.filter((t) => t && typeof t.url === 'string' && t.url.trim());\n\n // Build shuffled working copy without mutating opts\n const trackList = opts.shuffle ? shuffleArray(tracks) : tracks.slice();\n\n /* \u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const state = {\n tracks: trackList,\n originalTracks: tracks.slice(),\n currentIndex: 0,\n isPlaying: false,\n volume: Math.max(0, Math.min(1, opts.volume)),\n shuffle: opts.shuffle,\n showProgress: opts.showProgress,\n showPlaylist: opts.showPlaylist,\n autoAdvance: opts.autoAdvance,\n audio: null,\n };\n\n /* \u2500\u2500 Audio element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const audio = new Audio();\n audio.volume = state.volume;\n audio.preload = 'metadata';\n state.audio = audio;\n\n /* \u2500\u2500 Build DOM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n this._buildDOM(container, state);\n\n // Grab references after DOM build\n const refs = {\n btnPlay: container.querySelector('.vd-music-player-btn-play'),\n btnPrev: container.querySelector('.vd-music-player-btn-prev'),\n btnNext: container.querySelector('.vd-music-player-btn-next'),\n btnShuffle: container.querySelector('.vd-music-player-btn-shuffle'),\n btnPlaylist: container.querySelector('.vd-music-player-btn-playlist'),\n trackName: container.querySelector('.vd-music-player-track-name'),\n volumeSlider: container.querySelector('.vd-music-player-volume-slider'),\n volumeIcon: container.querySelector('.vd-music-player-volume-icon'),\n progressBar: container.querySelector('.vd-music-player-progress-bar'),\n timeElapsed: container.querySelector('.vd-music-player-time-elapsed'),\n timeDuration: container.querySelector('.vd-music-player-time-duration'),\n playlistPanel: container.querySelector('.vd-music-player-playlist'),\n };\n\n /* \u2500\u2500 Internal render helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const renderPlayIcon = () => {\n const btn = refs.btnPlay;\n if (!btn) return;\n btn.innerHTML = '';\n btn.appendChild(icon(state.isPlaying ? 'pause' : 'play'));\n btn.setAttribute('aria-label', state.isPlaying ? 'Pause' : 'Play');\n btn.classList.toggle('is-active', state.isPlaying);\n };\n\n const renderTrackName = () => {\n const el = refs.trackName;\n if (!el) return;\n const track = state.tracks[state.currentIndex];\n if (track) {\n el.textContent = track.name || 'Unknown Track';\n el.classList.remove('is-idle');\n } else {\n el.textContent = 'No tracks loaded';\n el.classList.add('is-idle');\n }\n };\n\n const renderVolumeIcon = () => {\n const el = refs.volumeIcon;\n if (!el) return;\n el.innerHTML = '';\n const v = state.volume;\n const name = v === 0 ? 'speaker-none' : v < 0.5 ? 'speaker-low' : 'speaker-high';\n el.appendChild(icon(name));\n };\n\n const renderShuffleBtn = () => {\n const btn = refs.btnShuffle;\n if (!btn) return;\n btn.classList.toggle('is-active', state.shuffle);\n btn.setAttribute('aria-pressed', state.shuffle ? 'true' : 'false');\n };\n\n const renderPlaylistItems = () => {\n const panel = refs.playlistPanel;\n if (!panel) return;\n panel.innerHTML = '';\n state.tracks.forEach((track, i) => {\n const item = document.createElement('button');\n item.className =\n 'vd-music-player-playlist-item' + (i === state.currentIndex ? ' is-active' : '');\n item.type = 'button';\n item.setAttribute('data-index', String(i));\n item.setAttribute('aria-current', i === state.currentIndex ? 'true' : 'false');\n\n const num = document.createElement('span');\n num.className = 'vd-music-player-playlist-num';\n num.textContent = String(i + 1);\n\n const name = document.createElement('span');\n name.className = 'vd-music-player-playlist-name';\n name.textContent = track.name || 'Track ' + (i + 1);\n\n item.appendChild(num);\n item.appendChild(name);\n panel.appendChild(item);\n });\n };\n\n const renderProgress = () => {\n const bar = refs.progressBar;\n if (!bar || !audio.duration) return;\n const pct = (audio.currentTime / audio.duration) * 100;\n bar.value = String(pct);\n updateRangeFill(bar);\n if (refs.timeElapsed) refs.timeElapsed.textContent = formatTime(audio.currentTime);\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n };\n\n /* \u2500\u2500 Load track \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const loadTrack = (index, autoPlay) => {\n const track = state.tracks[index];\n if (!track) return;\n state.currentIndex = index;\n audio.src = track.url;\n renderTrackName();\n renderPlaylistItems();\n\n // Reset progress\n if (refs.progressBar) {\n refs.progressBar.value = '0';\n updateRangeFill(refs.progressBar);\n }\n if (refs.timeElapsed) refs.timeElapsed.textContent = '0:00';\n if (refs.timeDuration) refs.timeDuration.textContent = '0:00';\n\n container.dispatchEvent(\n new CustomEvent('musicplayer:trackchange', {\n bubbles: true,\n detail: { index, name: track.name, url: track.url },\n })\n );\n\n if (autoPlay) {\n audio.play().catch(() => { /* browser may block autoplay */ });\n }\n };\n\n /* \u2500\u2500 Audio event listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const cleanupFunctions = [];\n\n const onPlay = () => {\n state.isPlaying = true;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:play', { bubbles: true }));\n };\n\n const onPause = () => {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:pause', { bubbles: true }));\n };\n\n const onEnded = () => {\n if (state.autoAdvance && state.tracks.length > 1) {\n const next = (state.currentIndex + 1) % state.tracks.length;\n loadTrack(next, true);\n } else {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:ended', { bubbles: true }));\n }\n };\n\n const onTimeUpdate = () => {\n if (state.showProgress) renderProgress();\n };\n\n const onLoadedMetadata = () => {\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n if (refs.progressBar) {\n refs.progressBar.max = '100';\n updateRangeFill(refs.progressBar);\n }\n };\n\n audio.addEventListener('play', onPlay);\n audio.addEventListener('pause', onPause);\n audio.addEventListener('ended', onEnded);\n audio.addEventListener('timeupdate', onTimeUpdate);\n audio.addEventListener('loadedmetadata', onLoadedMetadata);\n cleanupFunctions.push(() => {\n audio.removeEventListener('play', onPlay);\n audio.removeEventListener('pause', onPause);\n audio.removeEventListener('ended', onEnded);\n audio.removeEventListener('timeupdate', onTimeUpdate);\n audio.removeEventListener('loadedmetadata', onLoadedMetadata);\n audio.pause();\n audio.src = '';\n });\n\n /* \u2500\u2500 Control button listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n if (refs.btnPlay) {\n const handler = () => {\n if (!audio.src && state.tracks.length) loadTrack(state.currentIndex, false);\n if (state.isPlaying) {\n audio.pause();\n } else {\n audio.play().catch(() => {});\n }\n };\n refs.btnPlay.addEventListener('click', handler);\n cleanupFunctions.push(() => refs.btnPlay.removeEventListener('click', handler));\n\n // Keyboard: Space / Enter (already native for `;\n }\n\n // Generate neutral color swatches\n let neutralSwatches = '';\n for (const [key, value] of Object.entries(this.NEUTRAL_COLORS)) {\n neutralSwatches += ``;\n }\n\n // Generate radius buttons\n let radiusButtons = '';\n this.RADIUS_OPTIONS.forEach(r => {\n radiusButtons += ``;\n });\n\n // Generate font options\n let fontOptions = '';\n for (const [key, value] of Object.entries(this.FONT_OPTIONS)) {\n fontOptions += ``;\n }\n\n return `\n
    \n

    Customize Theme

    \n \n
    \n
    \n\n
    \n \n
    \n ${primarySwatches}\n
    \n
    \n
    \n \n
    \n ${neutralSwatches}\n
    \n
    \n
    \n \n
    \n ${radiusButtons}\n
    \n
    \n
    \n \n \n
    \n
    \n
    \n \n
    \n `;\n },\n\n /**\n * Bind event listeners\n */\n /**\n * Check whether the current primary color is one of the auto-defaults\n * (i.e. the user hasn't explicitly picked a non-default color).\n */\n isUsingDefaultPrimary: function () {\n return this.state.primary === this.DEFAULTS.PRIMARY_LIGHT ||\n this.state.primary === this.DEFAULTS.PRIMARY_DARK;\n },\n\n /**\n * When primary is still one of the auto-default palette keys (black/amber) but\n * localStorage was written under a different theme (or OS changed in system mode),\n * align in-memory state before applyAllPreferences runs \u2014 avoids amber+light / black+dark drift.\n */\n _normalizeDefaultPrimaryIfStaleWithStoredTheme: function () {\n if (!this.isUsingDefaultPrimary()) {\n return;\n }\n const expected = this.getDefaultPrimary(this.state.theme);\n if (this.state.primary !== expected) {\n this.state.primary = expected;\n }\n },\n\n bindEvents: function () {\n // Trigger click - bind to any trigger button\n if (this.elements.trigger) {\n this.addListener(this.elements.trigger, 'click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggle();\n });\n }\n\n this.bindPanelEvents();\n\n // Listen for OS dark/light changes so we can swap the default primary\n if (window.matchMedia) {\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const handler = () => {\n if (this.state.theme === 'system' && this.isUsingDefaultPrimary()) {\n const newDefault = this.getDefaultPrimary('system');\n if (newDefault !== this.state.primary) {\n this.applyPrimary(newDefault);\n this.updateUI();\n }\n }\n };\n mq.addEventListener('change', handler);\n this._cleanup.push(() => mq.removeEventListener('change', handler));\n }\n\n // Close on outside click\n this.addListener(document, 'click', (e) => {\n if (this.state.isOpen && this.elements.customizer && !this.elements.customizer.contains(e.target)) {\n this.close();\n }\n });\n\n // Close on Escape key\n this.addListener(document, 'keydown', (e) => {\n if (e.key === 'Escape' && this.state.isOpen) {\n this.close();\n }\n });\n },\n\n /**\n * Toggle panel open/close\n */\n toggle: function () {\n if (this.state.isOpen) {\n this.close();\n } else {\n this.open();\n }\n },\n\n /**\n * Open the panel\n */\n open: function () {\n this.state.isOpen = true;\n\n // Ensure panel is positioned correctly before opening\n this.positionPanel();\n\n if (this.elements.panel) {\n this.elements.panel.classList.add('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'true');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.add('is-active');\n }\n\n this.dispatchEvent('panel-open', { isOpen: true });\n },\n\n /**\n * Close the panel\n */\n close: function () {\n this.state.isOpen = false;\n\n if (this.elements.panel) {\n this.elements.panel.classList.remove('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'false');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.remove('is-active');\n }\n\n this.dispatchEvent('panel-close', { isOpen: false });\n },\n\n /**\n * Update UI to reflect current state\n */\n updateUI: function () {\n if (!this.elements.panel) return;\n\n // Update primary color swatches\n this.elements.panel.querySelectorAll('[data-color]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.color === this.state.primary);\n });\n\n // Update neutral color swatches\n this.elements.panel.querySelectorAll('[data-neutral]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.neutral === this.state.neutral);\n });\n\n // Update radius buttons\n this.elements.panel.querySelectorAll('[data-radius]').forEach(btn => {\n btn.classList.toggle('is-active', btn.dataset.radius === this.state.radius);\n });\n\n // Update font selector\n const fontSelect = this.elements.panel.querySelector('[data-customizer-font]');\n if (fontSelect) {\n fontSelect.value = this.state.font;\n }\n\n },\n\n /**\n * Reset all preferences to defaults\n */\n reset: function () {\n this.applyTheme(this.DEFAULTS.THEME);\n this.applyPrimary(this.getDefaultPrimary(this.DEFAULTS.THEME));\n this.applyNeutral(this.DEFAULTS.NEUTRAL);\n this.applyRadius(this.DEFAULTS.RADIUS);\n this.applyFont(this.DEFAULTS.FONT);\n this.updateUI();\n\n this.dispatchEvent('reset', { state: { ...this.state } });\n },\n\n /**\n * Get current state\n */\n getState: function () {\n return { ...this.state };\n },\n\n /**\n * Programmatically set preferences\n */\n setPreferences: function (prefs) {\n if (prefs.primary) this.applyPrimary(prefs.primary);\n if (prefs.neutral) this.applyNeutral(prefs.neutral);\n if (prefs.radius) this.applyRadius(prefs.radius);\n if (prefs.font) this.applyFont(prefs.font);\n if (prefs.theme) this.applyTheme(prefs.theme);\n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n destroyAll: function () {\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n\n if (this.elements.panel) {\n this.elements.panel.removeAttribute('data-customizer-initialized');\n }\n\n this.close();\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeCustomizer', ThemeCustomizer);\n }\n\n // Expose globally for convenience\n window.ThemeCustomizer = ThemeCustomizer;\n})();\n", "/**\n * Vanduo Framework - Theme Switcher\n * Handles light/dark/system theme toggling and persistence\n */\n\n(function () {\n 'use strict';\n\n const ThemeSwitcher = {\n isInitialized: false,\n _mediaQuery: null,\n _onMediaChange: null,\n\n init: function () {\n this.STORAGE_KEY = 'vanduo-theme-preference';\n this.state = {\n preference: this.getPreference() // 'light', 'dark', or 'system'\n };\n\n if (this.isInitialized) {\n this.applyTheme();\n this.renderUI();\n this.updateUI();\n return;\n }\n\n this.isInitialized = true;\n\n this.applyTheme();\n this.listenForSystemChanges();\n this.renderUI();\n\n console.log('Vanduo Theme Switcher initialized');\n },\n\n getPreference: function () {\n return this.getStorageValue(this.STORAGE_KEY, 'system');\n },\n\n setPreference: function (pref) {\n this.state.preference = pref;\n this.setStorageValue(this.STORAGE_KEY, pref);\n this.applyTheme();\n \n // Coordinate with ThemeCustomizer for primary color swap if available\n // Check _isApplying flag to prevent circular updates\n if (window.ThemeCustomizer && window.ThemeCustomizer.applyTheme && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme(pref);\n }\n \n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n applyTheme: function () {\n const pref = this.state.preference;\n\n if (pref === 'system') {\n // When in system mode, we remove the data attribute to let the media query take over\n // or we can explicitly set it. Explicitly setting it ensures consistency if we rely on [data-theme]\n // But if we rely on @media in CSS, we might want to remove attributes.\n // However, our CSS strategy uses :root:not([data-theme=\"light\"]) inside media query for system dark fallback\n // which is a bit complex.\n\n // Simpler approach: \n // If preference is system, REMOVE data-theme attribute. Let CSS media queries handle it.\n document.documentElement.removeAttribute('data-theme');\n } else {\n document.documentElement.setAttribute('data-theme', pref);\n }\n },\n\n listenForSystemChanges: function () {\n if (this._mediaQuery && this._onMediaChange) {\n return;\n }\n\n this._mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n this._onMediaChange = _e => {\n if (this.state.preference === 'system') {\n // Re-apply (effectively just to ensure consistency, though removing attribute usually suffices)\n this.applyTheme();\n // Keep default primary (black/amber) aligned when OS scheme changes while in system mode\n if (window.ThemeCustomizer && typeof window.ThemeCustomizer.applyTheme === 'function' && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme('system');\n }\n }\n };\n this._mediaQuery.addEventListener('change', this._onMediaChange);\n },\n\n // Helper to facilitate UI creation if needed, though often UI is in HTML\n renderUI: function () {\n // Look for any uninitialized theme toggles\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.getAttribute('data-theme-initialized') === 'true') {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n }\n return;\n }\n\n // Simplified UI Binding - assumes a select or a button cycle\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n const onChange = (e) => {\n this.setPreference(e.target.value);\n };\n toggle.addEventListener('change', onChange);\n toggle._themeToggleHandler = onChange;\n } else {\n // Button implementation (cycle)\n const onClick = () => {\n const modes = ['system', 'light', 'dark'];\n const nextIndex = (modes.indexOf(this.state.preference) + 1) % modes.length;\n this.setPreference(modes[nextIndex]);\n };\n toggle.addEventListener('click', onClick);\n toggle._themeToggleHandler = onClick;\n }\n // Mark as initialized\n toggle.setAttribute('data-theme-initialized', 'true');\n });\n },\n\n updateUI: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n } else {\n // Update button text/icon if needed\n // e.g. toggle.textContent = this.state.preference;\n // For now, assume the user handles visual state or generic text\n\n // If there is an icon or text span inside, update it\n const span = toggle.querySelector('.theme-current-label');\n if (span) {\n span.textContent = this.state.preference.charAt(0).toUpperCase() + this.state.preference.slice(1);\n }\n }\n });\n },\n\n destroyAll: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"][data-theme-initialized=\"true\"]');\n toggles.forEach(toggle => {\n if (toggle._themeToggleHandler) {\n const eventName = toggle.tagName === 'SELECT' ? 'change' : 'click';\n toggle.removeEventListener(eventName, toggle._themeToggleHandler);\n delete toggle._themeToggleHandler;\n }\n toggle.removeAttribute('data-theme-initialized');\n });\n\n if (this._mediaQuery && this._onMediaChange) {\n this._mediaQuery.removeEventListener('change', this._onMediaChange);\n }\n\n this._mediaQuery = null;\n this._onMediaChange = null;\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeSwitcher', ThemeSwitcher);\n }\n})();\n", "/**\n * Vanduo Framework - Toast Component\n * Popup notifications for user feedback\n */\n\n(function() {\n 'use strict';\n\n /**\n * Toast Component\n */\n const Toast = {\n // Default options\n defaults: {\n position: 'top-right',\n duration: 5000,\n dismissible: true,\n showProgress: true,\n pauseOnHover: true\n },\n\n // Container cache\n containers: {},\n\n /**\n * Get or create a toast container for a position\n * @param {string} position - Container position\n * @returns {HTMLElement} Toast container element\n */\n getContainer: function(position) {\n if (this.containers[position]) {\n return this.containers[position];\n }\n\n const container = document.createElement('div');\n container.className = `vd-toast-container vd-toast-container-${position}`;\n container.setAttribute('role', 'status');\n container.setAttribute('aria-live', 'polite');\n container.setAttribute('aria-atomic', 'false');\n document.body.appendChild(container);\n this.containers[position] = container;\n\n return container;\n },\n\n /**\n * Show a toast notification\n * @param {Object|string} options - Toast options or message string\n * @param {string} [type] - Toast type (success, error, warning, info)\n * @param {number} [duration] - Auto-dismiss duration in ms\n * @returns {HTMLElement} Toast element\n */\n show: function(options, type, duration) {\n // Support simple API: Toast.show('Message', 'success', 3000)\n if (typeof options === 'string') {\n options = {\n message: options,\n type: type,\n duration: duration\n };\n }\n\n const config = Object.assign({}, this.defaults, options);\n const container = this.getContainer(config.position);\n\n // Create toast element\n const toast = document.createElement('div');\n toast.className = 'vd-toast';\n\n if (config.type) {\n toast.classList.add(`vd-toast-${config.type}`);\n }\n\n if (config.solid) {\n toast.classList.add('vd-toast-solid');\n }\n\n if (config.showProgress && config.duration > 0) {\n toast.classList.add('vd-toast-with-progress');\n }\n\n // Build toast content\n let html = '';\n\n // Icon (sanitize custom icons, default icons are trusted SVG)\n if (config.icon) {\n const safeIcon = typeof sanitizeHtml === 'function' ? sanitizeHtml(config.icon) : escapeHtml(config.icon);\n html += `${safeIcon}`;\n } else if (config.type) {\n html += `${this.getDefaultIcon(config.type)}`;\n }\n\n // Local escape helper \u2014 guarantees HTML-safe output even if the\n // global escapeHtml utility is not loaded in the current bundle.\n const _esc = typeof escapeHtml === 'function'\n ? escapeHtml\n : function (s) {\n const d = document.createElement('div');\n d.appendChild(document.createTextNode(s));\n return d.innerHTML;\n };\n\n // Content (escape text to prevent injection)\n html += '
    ';\n if (config.title) {\n html += `
    ${_esc(String(config.title))}
    `;\n }\n if (config.message) {\n html += `
    ${_esc(String(config.message))}
    `;\n }\n html += '
    ';\n\n // Close button\n if (config.dismissible) {\n html += '';\n }\n\n // Progress bar\n if (config.showProgress && config.duration > 0) {\n const safeDuration = parseInt(config.duration, 10) || 0;\n html += `
    `;\n }\n\n toast.innerHTML = html;\n\n // Add to container\n container.appendChild(toast);\n\n toast._toastCleanup = [];\n\n // Set up close button handler\n if (config.dismissible) {\n const closeBtn = toast.querySelector('.vd-toast-close');\n const onClose = () => {\n this.dismiss(toast);\n };\n closeBtn.addEventListener('click', onClose);\n toast._toastCleanup.push(() => closeBtn.removeEventListener('click', onClose));\n }\n\n // Pause on hover\n let timeoutId = null;\n let remainingTime = config.duration;\n let startTime = null;\n\n const startTimer = () => {\n if (config.duration > 0) {\n startTime = Date.now();\n timeoutId = setTimeout(() => {\n this.dismiss(toast);\n }, remainingTime);\n toast._toastTimeoutId = timeoutId;\n\n // Resume progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'running';\n }\n }\n };\n\n const pauseTimer = () => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n timeoutId = null;\n toast._toastTimeoutId = null;\n remainingTime -= Date.now() - startTime;\n\n // Pause progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'paused';\n }\n }\n };\n\n if (config.pauseOnHover) {\n toast.addEventListener('mouseenter', pauseTimer);\n toast.addEventListener('mouseleave', startTimer);\n toast._toastCleanup.push(\n () => toast.removeEventListener('mouseenter', pauseTimer),\n () => toast.removeEventListener('mouseleave', startTimer)\n );\n }\n\n // Trigger enter animation\n requestAnimationFrame(() => {\n toast.classList.add('is-visible');\n startTimer();\n });\n\n // Store config on element for later access\n toast._toastConfig = config;\n\n // Dispatch show event\n const showEvent = new CustomEvent('toast:show', {\n bubbles: true,\n detail: { toast, config }\n });\n toast.dispatchEvent(showEvent);\n\n return toast;\n },\n\n /**\n * Dismiss a toast\n * @param {HTMLElement} toast - Toast element to dismiss\n */\n dismiss: function(toast) {\n if (!toast || toast.classList.contains('is-exiting')) return;\n\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n toast._toastTimeoutId = null;\n }\n\n toast.classList.remove('is-visible');\n toast.classList.add('is-exiting');\n\n // Dispatch dismiss event\n const dismissEvent = new CustomEvent('toast:dismiss', {\n bubbles: true,\n detail: { toast }\n });\n toast.dispatchEvent(dismissEvent);\n\n // Remove after animation\n const handleTransitionEnd = () => {\n toast.removeEventListener('transitionend', handleTransitionEnd);\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n };\n\n toast.addEventListener('transitionend', handleTransitionEnd);\n\n // Fallback removal if transition doesn't fire\n setTimeout(() => {\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n }, 400);\n },\n\n /**\n * Destroy all toasts and containers\n */\n destroyAll: function() {\n Object.keys(this.containers).forEach(position => {\n const container = this.containers[position];\n if (!container) return;\n\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => {\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n }\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n });\n\n if (container.parentElement) {\n container.parentElement.removeChild(container);\n }\n });\n\n this.containers = {};\n },\n\n /**\n * Dismiss all toasts\n * @param {string} [position] - Optional position to clear (clears all if not specified)\n */\n dismissAll: function(position) {\n if (position && this.containers[position]) {\n const toasts = this.containers[position].querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n } else {\n Object.values(this.containers).forEach(container => {\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n });\n }\n },\n\n /**\n * Get default icon SVG for a type\n * @param {string} type - Toast type\n * @returns {string} SVG icon markup\n */\n getDefaultIcon: function(type) {\n const icons = {\n success: '',\n error: '',\n warning: '',\n info: ''\n };\n\n return icons[type] || '';\n },\n\n /**\n * Convenience methods for common toast types\n */\n success: function(message, options) {\n return this.show(Object.assign({ message, type: 'success' }, options));\n },\n\n error: function(message, options) {\n return this.show(Object.assign({ message, type: 'error' }, options));\n },\n\n warning: function(message, options) {\n return this.show(Object.assign({ message, type: 'warning' }, options));\n },\n\n info: function(message, options) {\n return this.show(Object.assign({ message, type: 'info' }, options));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('toast', Toast);\n }\n\n // Also expose globally for convenience\n window.Toast = Toast;\n\n})();\n", "/**\n * Vanduo Framework - Tooltips Component\n * JavaScript functionality for tooltips\n */\n\n(function () {\n 'use strict';\n\n /**\n * Tooltips Component\n */\n const Tooltips = {\n tooltips: new Map(),\n delayTimers: new Map(),\n\n /**\n * Sanitize HTML \u2014 delegates to shared sanitizeHtml from helpers.js\n * @param {string} input\n * @returns {string} sanitized HTML\n */\n sanitizeHtml: function (input) {\n if (typeof sanitizeHtml === 'function') {\n return sanitizeHtml(input);\n }\n // Fallback: strip all HTML\n const div = document.createElement('div');\n div.textContent = input || '';\n return div.innerHTML;\n },\n\n /**\n * Initialize tooltips\n */\n init: function () {\n const elements = document.querySelectorAll('[data-tooltip], [data-tooltip-html]');\n\n elements.forEach(element => {\n if (this.tooltips.has(element)) {\n return;\n }\n this.initTooltip(element);\n });\n },\n\n /**\n * Initialize a single tooltip\n * @param {HTMLElement} element - Element with tooltip\n */\n initTooltip: function (element) {\n const tooltip = this.createTooltip(element);\n const cleanupFunctions = [];\n\n // Show on hover/focus\n const enterHandler = () => { this.showTooltip(element, tooltip); };\n const leaveHandler = () => { this.hideTooltip(element, tooltip); };\n const focusHandler = () => { this.showTooltip(element, tooltip); };\n const blurHandler = () => { this.hideTooltip(element, tooltip); };\n\n element.addEventListener('mouseenter', enterHandler);\n element.addEventListener('mouseleave', leaveHandler);\n element.addEventListener('focus', focusHandler);\n element.addEventListener('blur', blurHandler);\n\n cleanupFunctions.push(\n () => element.removeEventListener('mouseenter', enterHandler),\n () => element.removeEventListener('mouseleave', leaveHandler),\n () => element.removeEventListener('focus', focusHandler),\n () => element.removeEventListener('blur', blurHandler)\n );\n\n this.tooltips.set(element, { tooltip, cleanup: cleanupFunctions });\n },\n\n /**\n * Create tooltip element\n * @param {HTMLElement} element - Target element\n * @returns {HTMLElement} Tooltip element\n */\n createTooltip: function (element) {\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-tooltip';\n tooltip.setAttribute('role', 'tooltip');\n tooltip.setAttribute('aria-hidden', 'true');\n\n // Generate unique ID and link via aria-describedby\n const tooltipId = 'tooltip-' + Math.random().toString(36).substr(2, 9);\n tooltip.id = tooltipId;\n element.setAttribute('aria-describedby', tooltipId);\n\n // Get content\n const htmlContent = element.dataset.tooltipHtml;\n const textContent = element.dataset.tooltip;\n\n if (htmlContent) {\n tooltip.innerHTML = this.sanitizeHtml(htmlContent);\n tooltip.classList.add('vd-tooltip-html');\n } else if (textContent) {\n tooltip.textContent = textContent;\n }\n\n // Get placement\n const placement = element.dataset.tooltipPlacement || element.dataset.placement || 'top';\n tooltip.setAttribute('data-placement', placement);\n tooltip.classList.add(`vd-tooltip-${placement}`);\n\n // Get variant\n if (element.dataset.tooltipVariant) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipVariant}`);\n }\n\n // Get size\n if (element.dataset.tooltipSize) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipSize}`);\n }\n\n // Get delay\n const delay = parseInt(element.dataset.tooltipDelay) || 0;\n tooltip.dataset.delay = delay;\n\n document.body.appendChild(tooltip);\n\n return tooltip;\n },\n\n /**\n * Show tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n showTooltip: function (element, tooltip) {\n const delay = parseInt(tooltip.dataset.delay) || 0;\n\n if (delay > 0) {\n const timer = setTimeout(() => {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }, delay);\n this.delayTimers.set(element, timer);\n } else {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }\n },\n\n /**\n * Hide tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n hideTooltip: function (element, tooltip) {\n // Clear delay timer if exists\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n tooltip.classList.remove('is-visible');\n tooltip.setAttribute('aria-hidden', 'true');\n },\n\n /**\n * Position tooltip relative to element\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n positionTooltip: function (element, tooltip) {\n const placement = tooltip.dataset.placement || 'top';\n const rect = element.getBoundingClientRect();\n const tooltipRect = tooltip.getBoundingClientRect();\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;\n\n let top = 0;\n let left = 0;\n\n switch (placement) {\n case 'top':\n top = rect.top + scrollTop - tooltipRect.height - 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'bottom':\n top = rect.bottom + scrollTop + 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'left':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.left + scrollLeft - tooltipRect.width - 8;\n break;\n case 'right':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.right + scrollLeft + 8;\n break;\n }\n\n // Prevent overflow\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const padding = 8;\n\n if (left < padding) {\n left = padding;\n } else if (left + tooltipRect.width > viewportWidth - padding) {\n left = viewportWidth - tooltipRect.width - padding;\n }\n\n if (top < scrollTop + padding) {\n top = scrollTop + padding;\n } else if (top + tooltipRect.height > scrollTop + viewportHeight - padding) {\n top = scrollTop + viewportHeight - tooltipRect.height - padding;\n }\n\n // Use single style assignment with transform for better performance\n tooltip.style.cssText = `position: absolute; top: 0; left: 0; transform: translate(${left}px, ${top}px);`;\n },\n\n /**\n * Show tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n show: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.showTooltip(el, tooltip);\n }\n },\n\n /**\n * Hide tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n hide: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.hideTooltip(el, tooltip);\n }\n },\n\n /**\n * Update tooltip content\n * @param {HTMLElement|string} element - Target element or selector\n * @param {string} content - New content\n * @param {boolean} isHtml - Whether content is HTML\n */\n update: function (element, content, isHtml = false) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n if (isHtml) {\n tooltip.innerHTML = this.sanitizeHtml(content);\n tooltip.classList.add('vd-tooltip-html');\n } else {\n tooltip.textContent = content;\n tooltip.classList.remove('vd-tooltip-html');\n }\n }\n },\n\n /**\n * Destroy a tooltip instance and clean up\n * @param {HTMLElement} element - Element with tooltip\n */\n destroy: function (element) {\n const data = this.tooltips.get(element);\n if (!data) return;\n\n // Clear any pending timer\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n data.cleanup.forEach(fn => fn());\n\n // Remove tooltip element from DOM\n if (data.tooltip && data.tooltip.parentNode) {\n data.tooltip.parentNode.removeChild(data.tooltip);\n }\n\n this.tooltips.delete(element);\n },\n\n /**\n * Destroy all tooltip instances\n */\n destroyAll: function () {\n this.tooltips.forEach((data, element) => {\n this.destroy(element);\n });\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tooltips', Tooltips);\n }\n\n // Expose globally\n window.VanduoTooltips = Tooltips;\n\n})();\n", "/**\n * Vanduo Framework - Search Component\n * Client-side search functionality for content pages\n * \n * @example Basic usage (initialize with defaults)\n * // HTML:\n * //
    \n * // \n * //
    \n * //
    \n * \n * @example Custom configuration\n * var search = Search.create({\n * containerSelector: '.my-search',\n * contentSelector: 'article[id]',\n * titleSelector: 'h2, h3',\n * maxResults: 5,\n * onSelect: function(result) {\n * console.log('Selected:', result.title);\n * }\n * });\n * \n * @example With custom data source\n * var search = Search.create({\n * containerSelector: '.my-search',\n * data: [\n * { id: 'item1', title: 'First Item', content: 'Description...', category: 'Category A' },\n * { id: 'item2', title: 'Second Item', content: 'Description...', category: 'Category B' }\n * ]\n * });\n */\n\n(function() {\n 'use strict';\n\n /**\n * Default configuration\n */\n const DEFAULTS = {\n // Behavior\n minQueryLength: 2,\n maxResults: 10,\n debounceMs: 150,\n highlightTag: 'mark',\n keyboardShortcut: true, // Enable Cmd/Ctrl+K shortcut\n \n // Selectors (for DOM-based indexing)\n containerSelector: '.vd-doc-search',\n inputSelector: '.vd-doc-search-input',\n resultsSelector: '.vd-doc-search-results',\n contentSelector: '.doc-content section[id]',\n titleSelector: '.demo-title, h2, h3',\n navSelector: '.doc-nav-link',\n sectionSelector: '.doc-nav-section',\n \n // Content extraction\n excludeFromContent: 'pre, code, script, style',\n maxContentLength: 500,\n \n // Custom data source (alternative to DOM indexing)\n data: null,\n \n // Category icons mapping\n categoryIcons: {\n 'getting-started': 'ph-rocket-launch',\n 'core': 'ph-cube',\n 'components': 'ph-puzzle-piece',\n 'interactive': 'ph-cursor-click',\n 'data-display': 'ph-table',\n 'feedback': 'ph-bell',\n 'meta': 'ph-info',\n 'default': 'ph-file-text'\n },\n \n // Callbacks\n onSelect: null, // function(result) - called when result is selected\n onSearch: null, // function(query, results) - called after search\n onOpen: null, // function() - called when results open\n onClose: null, // function() - called when results close\n \n // Text customization\n emptyTitle: 'No results found',\n emptyText: 'Try different keywords or check spelling',\n placeholder: 'Search...'\n };\n\n /**\n * Search Component Factory\n * Creates a new search instance with the given configuration\n * \n * @param {Object} options - Configuration options\n * @returns {Object} Search instance\n */\n function createSearch(options) {\n const config = Object.assign({}, DEFAULTS, options || {});\n \n // Instance state\n const state = {\n initialized: false,\n index: [],\n results: [],\n activeIndex: -1,\n isOpen: false,\n query: '',\n container: null,\n input: null,\n resultsContainer: null,\n debounceTimer: null,\n boundHandlers: {}\n };\n\n function safeInvokeCallback(name, fn, ...args) {\n try {\n fn(...args);\n } catch (error) {\n console.warn('[Vanduo Search] Callback error in \"' + name + '\":', error);\n }\n }\n\n function setResultsHtml(html) {\n if (!state.resultsContainer) return;\n try {\n state.resultsContainer.innerHTML = html;\n } catch (error) {\n console.warn('[Vanduo Search] Failed to render results:', error);\n }\n }\n\n /**\n * Initialize the search component\n * Idempotent \u2014 safe to call more than once on the same instance.\n * Returns the instance on success, null if required DOM elements are missing.\n */\n function init() {\n if (state.initialized) {\n return instance;\n }\n\n state.container = document.querySelector(config.containerSelector);\n if (!state.container) {\n state.initialized = false;\n return null;\n }\n\n state.input = state.container.querySelector(config.inputSelector);\n state.resultsContainer = state.container.querySelector(config.resultsSelector);\n\n if (!state.input || !state.resultsContainer) {\n state.initialized = false;\n return null;\n }\n\n // Set placeholder if configured\n if (config.placeholder) {\n state.input.setAttribute('placeholder', config.placeholder);\n }\n\n // Build search index\n buildIndex();\n\n // Bind events\n bindEvents();\n\n // Set up ARIA attributes\n setupAria();\n\n state.initialized = true;\n return instance;\n }\n\n /**\n * Build search index from DOM or custom data\n */\n function buildIndex() {\n state.index = [];\n \n // Use custom data if provided\n if (config.data && Array.isArray(config.data)) {\n config.data.forEach(function(item) {\n state.index.push({\n id: item.id || slugify(item.title),\n title: item.title || '',\n category: item.category || '',\n categorySlug: slugify(item.category || ''),\n content: item.content || '',\n keywords: item.keywords || extractKeywordsFromText(item.title + ' ' + item.content),\n url: item.url || '#' + (item.id || slugify(item.title)),\n icon: item.icon || ''\n });\n });\n return;\n }\n\n // Build from DOM\n const sections = document.querySelectorAll(config.contentSelector);\n const categoryMap = buildCategoryMap();\n\n sections.forEach(function(section) {\n const id = section.id;\n if (!id) return;\n\n const titleEl = section.querySelector(config.titleSelector);\n const title = titleEl ? titleEl.textContent.replace(/v[\\d.]+/g, '').trim() : id;\n const category = categoryMap[id] || 'Documentation';\n const content = extractContent(section);\n const keywords = extractKeywords(section, title);\n const iconEl = titleEl ? titleEl.querySelector('i.ph') : null;\n let icon = '';\n if (iconEl && iconEl.classList) {\n for (let ci = 0; ci < iconEl.classList.length; ci++) {\n if (iconEl.classList[ci].indexOf('ph-') === 0) {\n icon = iconEl.classList[ci];\n break;\n }\n }\n }\n\n state.index.push({\n id: id,\n title: title,\n category: category,\n categorySlug: slugify(category),\n content: content,\n keywords: keywords,\n url: '#' + id,\n icon: icon\n });\n });\n }\n\n /**\n * Build a map of section IDs to their categories\n */\n function buildCategoryMap() {\n const map = {};\n let currentCategory = 'Documentation';\n const navItems = document.querySelectorAll(config.navSelector + ', ' + config.sectionSelector);\n\n navItems.forEach(function(item) {\n if (item.classList.contains('doc-nav-section')) {\n currentCategory = item.textContent.trim();\n } else {\n const href = item.getAttribute('href');\n if (href && href.startsWith('#')) {\n const id = href.substring(1);\n map[id] = currentCategory;\n }\n }\n });\n\n return map;\n }\n\n /**\n * Extract searchable content from a section\n */\n function extractContent(section) {\n const clone = section.cloneNode(true);\n \n const toRemove = clone.querySelectorAll(config.excludeFromContent);\n toRemove.forEach(function(el) {\n el.remove();\n });\n\n let text = clone.textContent || '';\n text = text.replace(/\\s+/g, ' ').trim();\n \n return text.substring(0, config.maxContentLength);\n }\n\n /**\n * Extract keywords from a section\n */\n function extractKeywords(section, title) {\n const keywords = [];\n \n // Add title words\n title.toLowerCase().split(/\\s+/).forEach(function(word) {\n if (word.length > 2) {\n keywords.push(word);\n }\n });\n\n // Add class names from code examples\n const codeBlocks = section.querySelectorAll('code');\n codeBlocks.forEach(function(code) {\n const text = code.textContent || '';\n const classMatches = text.match(/\\.([\\w-]+)/g);\n if (classMatches) {\n classMatches.forEach(function(match) {\n keywords.push(match.substring(1).toLowerCase());\n });\n }\n });\n\n // Add data attributes\n const dataAttrs = section.querySelectorAll('[data-tooltip], [data-modal]');\n dataAttrs.forEach(function(el) {\n const attrs = el.getAttributeNames().filter(function(name) {\n return name.startsWith('data-');\n });\n attrs.forEach(function(attr) {\n keywords.push(attr.replace('data-', ''));\n });\n });\n\n return Array.from(new Set(keywords));\n }\n\n /**\n * Extract keywords from text string\n */\n function extractKeywordsFromText(text) {\n const words = text.toLowerCase().split(/\\s+/);\n return words.filter(function(word) {\n return word.length > 2;\n });\n }\n\n /**\n * Convert string to slug\n */\n function slugify(str) {\n return str.toLowerCase().replace(/\\s+/g, '-').replace(/[^a-z0-9-]/g, '');\n }\n\n /**\n * Bind event listeners\n */\n function bindEvents() {\n // Store bound handlers for cleanup\n state.boundHandlers.handleInput = function(e) {\n handleInput(e);\n };\n state.boundHandlers.handleFocus = function() {\n if (state.query.length >= config.minQueryLength) {\n open();\n }\n };\n state.boundHandlers.handleKeydown = function(e) {\n handleKeydown(e);\n };\n state.boundHandlers.handleOutsideClick = function(e) {\n if (!state.container.contains(e.target)) {\n close();\n }\n };\n state.boundHandlers.handleGlobalKeydown = function(e) {\n if (config.keyboardShortcut && (e.metaKey || e.ctrlKey) && e.key === 'k') {\n e.preventDefault();\n state.input.focus();\n state.input.select();\n }\n };\n state.boundHandlers.handleResultClick = function(e) {\n const result = e.target.closest('.vd-doc-search-result');\n if (result) {\n const index = parseInt(result.dataset.index, 10);\n select(index);\n }\n };\n\n // Input events\n state.input.addEventListener('input', state.boundHandlers.handleInput);\n state.input.addEventListener('focus', state.boundHandlers.handleFocus);\n state.input.addEventListener('keydown', state.boundHandlers.handleKeydown);\n\n // Close on outside click\n document.addEventListener('click', state.boundHandlers.handleOutsideClick);\n\n // Global keyboard shortcut\n document.addEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n\n // Result click handling\n state.resultsContainer.addEventListener('click', state.boundHandlers.handleResultClick);\n }\n\n /**\n * Unbind event listeners\n */\n function unbindEvents() {\n if (state.input) {\n state.input.removeEventListener('input', state.boundHandlers.handleInput);\n state.input.removeEventListener('focus', state.boundHandlers.handleFocus);\n state.input.removeEventListener('keydown', state.boundHandlers.handleKeydown);\n }\n document.removeEventListener('click', state.boundHandlers.handleOutsideClick);\n document.removeEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n if (state.resultsContainer) {\n state.resultsContainer.removeEventListener('click', state.boundHandlers.handleResultClick);\n }\n }\n\n /**\n * Set up ARIA attributes\n */\n function setupAria() {\n const resultsId = state.resultsContainer.id || 'search-results-' + Math.random().toString(36).substr(2, 9);\n state.resultsContainer.id = resultsId;\n \n state.input.setAttribute('role', 'combobox');\n state.input.setAttribute('aria-autocomplete', 'list');\n state.input.setAttribute('aria-controls', resultsId);\n state.input.setAttribute('aria-expanded', 'false');\n \n state.resultsContainer.setAttribute('role', 'listbox');\n state.resultsContainer.setAttribute('aria-label', 'Search results');\n }\n\n /**\n * Handle input changes\n */\n function handleInput(e) {\n const query = e.target.value.trim();\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n state.debounceTimer = setTimeout(function() {\n state.query = query;\n\n if (query.length < config.minQueryLength) {\n close();\n return;\n }\n\n state.results = search(query);\n state.activeIndex = -1;\n render();\n open();\n\n // Callback\n if (typeof config.onSearch === 'function') {\n safeInvokeCallback('onSearch', config.onSearch, query, state.results);\n }\n }, config.debounceMs);\n }\n\n /**\n * Handle keyboard navigation\n */\n function handleKeydown(e) {\n if (!state.isOpen) {\n if (e.key === 'ArrowDown' && state.query.length >= config.minQueryLength) {\n e.preventDefault();\n state.results = search(state.query);\n render();\n open();\n }\n return;\n }\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n navigate(1);\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n navigate(-1);\n break;\n\n case 'Enter':\n e.preventDefault();\n if (state.activeIndex >= 0) {\n select(state.activeIndex);\n } else if (state.results.length > 0) {\n select(0);\n }\n break;\n\n case 'Escape':\n e.preventDefault();\n close();\n break;\n\n case 'Tab':\n close();\n break;\n }\n }\n\n /**\n * Perform search\n */\n function search(query) {\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n const scored = [];\n\n state.index.forEach(function(entry) {\n let score = 0;\n const titleLower = entry.title.toLowerCase();\n const categoryLower = entry.category.toLowerCase();\n const contentLower = entry.content.toLowerCase();\n\n terms.forEach(function(term) {\n // Title match - highest priority\n if (titleLower.includes(term)) {\n score += 100;\n if (titleLower === term) {\n score += 50;\n } else if (titleLower.startsWith(term)) {\n score += 25;\n }\n }\n\n // Category match\n if (categoryLower.includes(term)) {\n score += 50;\n }\n\n // Keyword match\n const keywordMatch = entry.keywords.some(function(k) {\n return k.includes(term);\n });\n if (keywordMatch) {\n score += 30;\n }\n\n // Content match\n if (contentLower.includes(term)) {\n score += 10;\n }\n });\n\n if (score > 0) {\n scored.push({\n id: entry.id,\n title: entry.title,\n category: entry.category,\n categorySlug: entry.categorySlug,\n content: entry.content,\n url: entry.url,\n icon: entry.icon,\n score: score\n });\n }\n });\n\n scored.sort(function(a, b) {\n return b.score - a.score;\n });\n\n return scored.slice(0, config.maxResults);\n }\n\n /**\n * Render search results\n */\n function render() {\n if (state.results.length === 0) {\n setResultsHtml(renderEmpty());\n return;\n }\n\n let html = '
      ';\n\n state.results.forEach(function(result, index) {\n const isActive = index === state.activeIndex;\n const icon = result.icon || getCategoryIcon(result.categorySlug);\n const excerpt = getExcerpt(result.content, state.query);\n\n html += '
    • ' +\n '
      ' +\n '' +\n '
      ' +\n '
      ' +\n '
      ' + highlight(result.title, state.query) + '
      ' +\n '
      ' + escapeHtml(result.category) + '
      ' +\n '
      ' + highlight(excerpt, state.query) + '
      ' +\n '
      ' +\n '
      • ';\n });\n\n html += '
    ';\n html += renderFooter();\n\n setResultsHtml(html);\n }\n\n /**\n * Render empty state\n */\n function renderEmpty() {\n return '
    ' +\n '
    ' +\n '
    ' + escapeHtml(config.emptyTitle) + '
    ' +\n '
    ' + escapeHtml(config.emptyText) + '
    ' +\n '
    ';\n }\n\n /**\n * Render footer with keyboard hints\n */\n function renderFooter() {\n return '
    ' +\n '\u2191\u2193 to navigate' +\n '\u21B5 to select' +\n 'esc to close' +\n '
    ';\n }\n\n /**\n * Get icon for category\n */\n function getCategoryIcon(categorySlug) {\n return config.categoryIcons[categorySlug] || config.categoryIcons['default'] || 'ph-file-text';\n }\n\n /**\n * Get excerpt from content\n */\n function getExcerpt(content, query) {\n const terms = query.toLowerCase().split(/\\s+/);\n const contentLower = content.toLowerCase();\n const excerptLength = 100;\n\n let matchPos = -1;\n for (let i = 0; i < terms.length; i++) {\n const pos = contentLower.indexOf(terms[i]);\n if (pos !== -1 && (matchPos === -1 || pos < matchPos)) {\n matchPos = pos;\n }\n }\n\n if (matchPos === -1) {\n return content.substring(0, excerptLength) + '...';\n }\n\n const start = Math.max(0, matchPos - 30);\n const end = Math.min(content.length, matchPos + excerptLength);\n let excerpt = content.substring(start, end);\n\n if (start > 0) {\n excerpt = '...' + excerpt;\n }\n if (end < content.length) {\n excerpt = excerpt + '...';\n }\n\n return excerpt;\n }\n\n /**\n * Highlight matched terms in text\n */\n function highlight(text, query) {\n if (!query) return escapeHtml(text);\n\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n let escaped = escapeHtml(text);\n\n terms.forEach(function(term) {\n // Skip overly long terms to prevent ReDoS\n if (term.length > 50) return;\n const regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n escaped = escaped.replace(regex, '<' + config.highlightTag + '>$1');\n });\n\n return escaped;\n }\n\n /**\n * Escape HTML entities\n */\n function escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n /**\n * Navigate results with keyboard\n */\n function navigate(direction) {\n let newIndex = state.activeIndex + direction;\n\n if (newIndex < 0) {\n newIndex = state.results.length - 1;\n } else if (newIndex >= state.results.length) {\n newIndex = 0;\n }\n\n setActiveIndex(newIndex);\n }\n\n /**\n * Set active result index\n */\n function setActiveIndex(index) {\n const prevActive = state.resultsContainer.querySelector('.vd-doc-search-result.is-active');\n if (prevActive) {\n prevActive.classList.remove('is-active');\n prevActive.setAttribute('aria-selected', 'false');\n }\n\n state.activeIndex = index;\n\n const newActive = state.resultsContainer.querySelector('[data-index=\"' + index + '\"]');\n if (newActive) {\n newActive.classList.add('is-active');\n newActive.setAttribute('aria-selected', 'true');\n state.input.setAttribute('aria-activedescendant', 'vd-doc-search-result-' + index);\n newActive.scrollIntoView({ block: 'nearest' });\n }\n }\n\n /**\n * Select a result\n */\n function select(index) {\n const result = state.results[index];\n if (!result) return;\n\n // Close search\n close();\n state.input.value = '';\n state.query = '';\n\n // Custom callback\n if (typeof config.onSelect === 'function') {\n safeInvokeCallback('onSelect', config.onSelect, result);\n return;\n }\n\n // Default behavior: navigate to section\n const section = document.querySelector(result.url);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth', block: 'start' });\n window.history.pushState(null, '', result.url);\n updateSidebarActive(result.id);\n }\n }\n\n /**\n * Update sidebar navigation active state\n */\n function updateSidebarActive(sectionId) {\n const navLinks = document.querySelectorAll(config.navSelector);\n navLinks.forEach(function(link) {\n link.classList.remove('active');\n if (link.getAttribute('href') === '#' + sectionId) {\n link.classList.add('active');\n }\n });\n }\n\n /**\n * Open results dropdown\n */\n function open() {\n if (state.isOpen) return;\n\n state.isOpen = true;\n state.resultsContainer.classList.add('is-open');\n state.input.setAttribute('aria-expanded', 'true');\n\n if (typeof config.onOpen === 'function') {\n safeInvokeCallback('onOpen', config.onOpen);\n }\n }\n\n /**\n * Close results dropdown\n */\n function close() {\n if (!state.isOpen) return;\n\n state.isOpen = false;\n state.activeIndex = -1;\n state.resultsContainer.classList.remove('is-open');\n state.input.setAttribute('aria-expanded', 'false');\n state.input.removeAttribute('aria-activedescendant');\n\n if (typeof config.onClose === 'function') {\n safeInvokeCallback('onClose', config.onClose);\n }\n }\n\n /**\n * Destroy the component\n */\n function destroy() {\n unbindEvents();\n \n state.initialized = false;\n state.index = [];\n state.results = [];\n state.isOpen = false;\n state.query = '';\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n if (state.resultsContainer) {\n setResultsHtml('');\n }\n }\n\n /**\n * Rebuild the search index\n */\n function rebuild() {\n buildIndex();\n }\n\n /**\n * Update configuration\n */\n function setConfig(newConfig) {\n Object.assign(config, newConfig);\n }\n\n /**\n * Get current configuration\n */\n function getConfig() {\n return Object.assign({}, config);\n }\n\n /**\n * Get search index\n */\n function getIndex() {\n return state.index.slice();\n }\n\n // Public instance API\n const instance = {\n init: init,\n destroy: destroy,\n rebuild: rebuild,\n search: search,\n open: open,\n close: close,\n setConfig: setConfig,\n getConfig: getConfig,\n getIndex: getIndex\n };\n\n return instance;\n }\n\n /**\n * Search Component (singleton for backward compatibility)\n */\n const Search = {\n // Factory method \u2014 creates and auto-initializes a new independent instance.\n // Always returns the instance so callers retain a reference even if the\n // DOM container is not yet available (they can retry init() later).\n create: function(options) {\n const instance = createSearch(options);\n if (instance) {\n instance.init();\n }\n return instance || null;\n },\n \n // Default instance\n _instance: null,\n \n // Configuration (for default instance)\n config: Object.assign({}, DEFAULTS),\n\n /**\n * Initialize the default search instance\n */\n init: function(options) {\n if (this._instance) {\n this._instance.destroy();\n }\n \n if (options) {\n Object.assign(this.config, options);\n }\n \n this._instance = createSearch(this.config);\n return this._instance ? this._instance.init() : null;\n },\n\n /**\n * Destroy the default instance\n */\n destroy: function() {\n if (this._instance) {\n this._instance.destroy();\n this._instance = null;\n }\n },\n\n destroyAll: function() {\n this.destroy();\n },\n\n /**\n * Rebuild the default instance index\n */\n rebuild: function() {\n if (this._instance) {\n this._instance.rebuild();\n }\n },\n\n /**\n * Search using the default instance\n */\n search: function(query) {\n return this._instance ? this._instance.search(query) : [];\n },\n\n /**\n * Open the default instance\n */\n open: function() {\n if (this._instance) {\n this._instance.open();\n }\n },\n\n /**\n * Close the default instance\n */\n close: function() {\n if (this._instance) {\n this._instance.close();\n }\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('docSearch', Search);\n }\n\n // Expose globally (both names for compatibility)\n window.Search = Search;\n window.DocSearch = Search; // Backward compatibility\n window.VanduoDocSearch = Search; // New name compatibility\n\n})();\n", "/**\n * Vanduo Framework - Draggable Component\n * JavaScript functionality for draggable elements and drop zones\n */\n\n(function () {\n 'use strict';\n\n /**\n * Draggable Component\n */\n const Draggable = {\n // Store initialized draggables and their cleanup functions\n instances: new Map(),\n // Store current drag state\n currentDrag: null,\n // Store touch state\n touchState: null,\n // Feedback element\n feedbackElement: null,\n // Shared selector used by init and touch reorder\n containerSelector: '.vd-draggable-container, .vd-draggable-container-vertical',\n\n /**\n * Initialize draggable components\n */\n init: function () {\n const draggables = document.querySelectorAll('.vd-draggable, [data-draggable]');\n\n draggables.forEach(element => {\n if (this.instances.has(element)) {\n return;\n }\n this.initDraggable(element);\n });\n\n const containers = document.querySelectorAll(this.containerSelector);\n containers.forEach(container => {\n if (!this.instances.has(container)) {\n this.initContainer(container);\n }\n });\n\n const dropZones = document.querySelectorAll('.vd-drop-zone');\n dropZones.forEach(zone => {\n if (!this.instances.has(zone)) {\n this.initDropZone(zone);\n }\n });\n\n this.createFeedbackElement();\n },\n\n /**\n * Initialize a single draggable element\n * @param {HTMLElement} element - Draggable element\n */\n initDraggable: function (element) {\n const cleanupFunctions = [];\n\n // Make element draggable if not already\n if (!element.hasAttribute('draggable')) {\n element.setAttribute('draggable', 'true');\n }\n\n // Accessibility: add ARIA attributes\n if (!element.hasAttribute('tabindex')) {\n element.setAttribute('tabindex', '0');\n }\n element.setAttribute('role', 'option');\n element.setAttribute('aria-roledescription', 'draggable item');\n element.setAttribute('aria-grabbed', 'false');\n\n // Handle drag start\n const dragStartHandler = (e) => {\n this.handleDragStart(e, element);\n };\n element.addEventListener('dragstart', dragStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragstart', dragStartHandler));\n\n // Handle drag\n const dragHandler = (e) => {\n this.handleDrag(e, element);\n };\n element.addEventListener('drag', dragHandler);\n cleanupFunctions.push(() => element.removeEventListener('drag', dragHandler));\n\n // Handle drag end\n const dragEndHandler = (e) => {\n this.handleDragEnd(e, element);\n };\n element.addEventListener('dragend', dragEndHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragend', dragEndHandler));\n\n // Handle touch start (for mobile)\n const touchStartHandler = (e) => {\n this.handleTouchStart(e, element);\n };\n element.addEventListener('touchstart', touchStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchstart', touchStartHandler));\n\n // Handle touch move (for mobile)\n // { passive: false } is required so that e.preventDefault() works\n // once the drag threshold is reached \u2014 without it, modern browsers\n // treat the listener as passive and silently ignore preventDefault().\n const touchMoveHandler = (e) => {\n this.handleTouchMove(e, element);\n };\n element.addEventListener('touchmove', touchMoveHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchmove', touchMoveHandler));\n\n // Handle touch end (for mobile)\n const touchEndHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchend', touchEndHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchend', touchEndHandler));\n\n // Handle touch cancel (for mobile)\n const touchCancelHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchcancel', touchCancelHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchcancel', touchCancelHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, element);\n };\n element.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => element.removeEventListener('keydown', keydownHandler));\n\n this.instances.set(element, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a draggable container\n * @param {HTMLElement} container - Draggable container\n */\n initContainer: function (container) {\n // Accessibility: add ARIA role to container\n container.setAttribute('role', 'listbox');\n container.setAttribute('aria-label', container.getAttribute('aria-label') || 'Draggable items');\n\n const items = container.querySelectorAll('.vd-draggable-item');\n items.forEach(item => {\n if (!this.instances.has(item)) {\n this.initDraggable(item);\n }\n });\n\n const cleanupFunctions = [];\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n };\n\n // Handle drag over for auto-sorting\n const dragOverHandler = (e) => {\n e.preventDefault(); // Necessary to allow drop\n e.dataTransfer.dropEffect = 'move';\n\n if (!this.currentDrag) return;\n const draggingEl = this.currentDrag.element;\n\n // Only reorder if dragging an item that belongs to this container (or if we support cross-container drag, but keep simple)\n if (!container.contains(draggingEl)) return;\n\n // Prevent jumps when the dragging finalizes with 0,0 coordinates near the end\n if (e.clientX === 0 && e.clientY === 0) return;\n\n this.handleReorder(container, draggingEl, e.clientX, e.clientY);\n };\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault(); // crucial to prevent the browser's default handling and snapping back\n };\n\n container.addEventListener('dragenter', dragEnterHandler);\n container.addEventListener('dragover', dragOverHandler);\n container.addEventListener('drop', dropHandler);\n\n cleanupFunctions.push(() => {\n container.removeEventListener('dragenter', dragEnterHandler);\n container.removeEventListener('dragover', dragOverHandler);\n container.removeEventListener('drop', dropHandler);\n });\n\n this.instances.set(container, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a drop zone\n * @param {HTMLElement} zone - Drop zone element\n */\n initDropZone: function (zone) {\n const cleanupFunctions = [];\n\n // Accessibility: add ARIA role to drop zone\n zone.setAttribute('role', 'region');\n zone.setAttribute('aria-dropeffect', 'move');\n if (!zone.hasAttribute('aria-label')) {\n zone.setAttribute('aria-label', 'Drop zone');\n }\n\n // Handle drag over\n const dragOverHandler = (e) => {\n e.preventDefault();\n this.handleDragOver(e, zone);\n };\n zone.addEventListener('dragover', dragOverHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragover', dragOverHandler));\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n this.handleDragEnter(e, zone);\n };\n zone.addEventListener('dragenter', dragEnterHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragenter', dragEnterHandler));\n\n // Handle drag leave\n const dragLeaveHandler = (e) => {\n this.handleDragLeave(e, zone);\n };\n zone.addEventListener('dragleave', dragLeaveHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragleave', dragLeaveHandler));\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault();\n this.handleDrop(e, zone);\n };\n zone.addEventListener('drop', dropHandler);\n cleanupFunctions.push(() => zone.removeEventListener('drop', dropHandler));\n\n this.instances.set(zone, { cleanup: cleanupFunctions });\n },\n\n /**\n * Create feedback element for drag operations\n */\n createFeedbackElement: function () {\n if (!this.feedbackElement) {\n // Reuse existing element if present\n const existing = document.querySelector('.vd-drag-feedback');\n if (existing) {\n this.feedbackElement = existing;\n return;\n }\n\n this.feedbackElement = document.createElement('div');\n this.feedbackElement.className = 'vd-drag-feedback hidden';\n this.feedbackElement.setAttribute('role', 'presentation');\n document.body.appendChild(this.feedbackElement);\n }\n },\n\n /**\n * Handle drag start event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragStart: function (e, element) {\n // Add dragging class\n element.classList.add('is-dragging');\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: e.clientX, y: e.clientY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element)\n };\n\n // Set drag data\n e.dataTransfer.effectAllowed = 'move';\n e.dataTransfer.setData('text/plain', this.currentDrag.data);\n\n // We no longer suppress the native ghost image or manually update feedback\n // for mouse drags, relying on the browser's native rendering instead.\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY }\n }\n }));\n },\n\n /**\n * Handle drag event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDrag: function (e, element) {\n // Guard against null state (race condition on fast interactions)\n if (!this.currentDrag) return;\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - this.currentDrag.initialPosition.x,\n y: e.clientY - this.currentDrag.initialPosition.y\n }\n }\n }));\n },\n\n /**\n * Handle drag end event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragEnd: function (e, element) {\n // Remove dragging class\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'false');\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Guard against null state\n const data = this.currentDrag?.data || this.getData(element);\n const initialPos = this.currentDrag?.initialPosition || { x: 0, y: 0 };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - initialPos.x,\n y: e.clientY - initialPos.y\n }\n }\n }));\n\n // Reset drag state\n this.currentDrag = null;\n },\n\n /**\n * Handle touch start event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchStart: function (e, element) {\n // Don't prevent default here \u2014 it blocks scrolling.\n // We only prevent default in touchmove once drag threshold is reached.\n const touch = e.touches[0];\n const rect = element.getBoundingClientRect();\n this.touchState = {\n element: element,\n startX: touch.clientX,\n startY: touch.clientY,\n lastX: touch.clientX,\n lastY: touch.clientY,\n // Keep preview anchored to the original grab point.\n offsetX: touch.clientX - rect.left,\n offsetY: touch.clientY - rect.top,\n startTime: Date.now(),\n isDragging: false\n };\n },\n\n /**\n * Handle touch move event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchMove: function (e, element) {\n if (!this.touchState) return;\n\n const touch = e.touches[0];\n this.touchState.lastX = touch.clientX;\n this.touchState.lastY = touch.clientY;\n const deltaX = touch.clientX - this.touchState.startX;\n const deltaY = touch.clientY - this.touchState.startY;\n\n // Only start dragging if moved a minimum distance\n if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {\n // Now we know it's a drag, not a scroll \u2014 prevent default\n if (e.cancelable) e.preventDefault();\n\n if (!this.touchState.isDragging) {\n this.touchState.isDragging = true;\n element.classList.add('is-dragging');\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: this.touchState.startX, y: this.touchState.startY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element),\n // Preserve where inside the element the drag started for accurate ghost positioning.\n offsetX: this.touchState.offsetX,\n offsetY: this.touchState.offsetY\n };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY }\n }\n }));\n }\n\n // Update feedback\n this.updateFeedback(touch.clientX, touch.clientY);\n\n // Dispatch event\n if (this.currentDrag) {\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY },\n delta: { x: deltaX, y: deltaY }\n }\n }));\n\n this.updateTouchDropZone(touch.clientX, touch.clientY);\n\n // Reorder for touch\n const container = element.closest(this.containerSelector);\n if (container && container.contains(element)) {\n this.handleReorder(container, element, touch.clientX, touch.clientY);\n }\n }\n }\n },\n\n /**\n * Handle touch end event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchEnd: function (e, element) {\n if (this.touchState && this.touchState.isDragging) {\n if (e.cancelable) e.preventDefault();\n const endTouch = e.changedTouches?.[0];\n const endPosition = {\n x: endTouch?.clientX ?? this.touchState.lastX ?? this.touchState.startX,\n y: endTouch?.clientY ?? this.touchState.lastY ?? this.touchState.startY\n };\n\n const dropZone = this.resolveDropZoneAtPoint(endPosition.x, endPosition.y) || this.touchState.overZone;\n if (dropZone) {\n this.dispatchDrop(dropZone, endPosition);\n } else if (this.touchState.overZone) {\n this.touchState.overZone.classList.remove('is-drag-over');\n }\n\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n element.setAttribute('aria-grabbed', 'false');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Dispatch event\n const data = this.currentDrag?.data || this.getData(element);\n const startX = this.touchState?.startX || 0;\n const startY = this.touchState?.startY || 0;\n\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: endPosition,\n delta: {\n x: endPosition.x - startX,\n y: endPosition.y - startY\n }\n }\n }));\n }\n\n // Reset states\n this.touchState = null;\n this.currentDrag = null;\n },\n\n /**\n * Handle drag over event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} _zone - Drop zone element\n */\n handleDragOver: function (e, _zone) {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n },\n\n /**\n * Handle drag enter event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragEnter: function (e, zone) {\n e.preventDefault();\n zone.classList.add('is-drag-over');\n },\n\n /**\n * Handle drag leave event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragLeave: function (e, zone) {\n zone.classList.remove('is-drag-over');\n },\n\n /**\n * Handle drop event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDrop: function (e, zone) {\n e.preventDefault();\n this.dispatchDrop(zone, { x: e.clientX, y: e.clientY });\n },\n\n /**\n * Resolve a drop zone from viewport coordinates\n * @param {number} x\n * @param {number} y\n * @returns {HTMLElement|null}\n */\n resolveDropZoneAtPoint: function (x, y) {\n if (!Number.isFinite(x) || !Number.isFinite(y)) return null;\n\n // Prefer the full stacking list so overlays/top elements don't hide real drop targets.\n if (typeof document.elementsFromPoint === 'function') {\n const stacked = document.elementsFromPoint(x, y);\n for (const element of stacked) {\n const zone = element.closest('.vd-drop-zone');\n if (zone) return zone;\n }\n }\n\n const target = document.elementFromPoint(x, y);\n const targetZone = target ? target.closest('.vd-drop-zone') : null;\n if (targetZone) return targetZone;\n\n // Last-resort fallback for mobile emulation edge cases.\n const zones = document.querySelectorAll('.vd-drop-zone');\n for (const zone of zones) {\n const rect = zone.getBoundingClientRect();\n if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {\n return zone;\n }\n }\n\n return null;\n },\n\n /**\n * Track and update active drop-zone hover state on touch devices\n * @param {number} x\n * @param {number} y\n */\n updateTouchDropZone: function (x, y) {\n if (!this.touchState) return;\n\n const nextZone = this.resolveDropZoneAtPoint(x, y);\n const prevZone = this.touchState.overZone || null;\n\n if (prevZone && prevZone !== nextZone) {\n prevZone.classList.remove('is-drag-over');\n }\n\n if (nextZone && nextZone !== prevZone) {\n nextZone.classList.add('is-drag-over');\n }\n\n this.touchState.overZone = nextZone || null;\n },\n\n /**\n * Dispatch a normalized drop event for mouse and touch flows\n * @param {HTMLElement} zone\n * @param {{x:number, y:number}} position\n */\n dispatchDrop: function (zone, position) {\n zone.classList.remove('is-drag-over');\n zone.dispatchEvent(new CustomEvent('draggable:drop', {\n bubbles: true,\n detail: {\n zone: zone,\n element: this.currentDrag?.element,\n data: this.currentDrag?.data,\n position: position\n }\n }));\n },\n\n /**\n * Reorder elements in container based on cursor position\n * @param {HTMLElement} container \n * @param {HTMLElement} element \n * @param {number} clientX \n * @param {number} clientY \n */\n handleReorder: function (container, element, clientX, clientY) {\n const isVertical = container.classList.contains('vd-draggable-container-vertical');\n const siblings = [...container.querySelectorAll('.vd-draggable-item:not(.is-dragging), .vd-draggable:not(.is-dragging)')];\n\n const nextSibling = siblings.reduce((closest, child) => {\n const box = child.getBoundingClientRect();\n const offset = isVertical\n ? clientY - box.top - box.height / 2\n : clientX - box.left - box.width / 2;\n\n if (offset < 0 && offset > closest.offset) {\n return { offset: offset, element: child };\n } else {\n return closest;\n }\n }, { offset: Number.NEGATIVE_INFINITY }).element;\n\n if (nextSibling == null) {\n container.appendChild(element);\n } else {\n container.insertBefore(element, nextSibling);\n }\n },\n\n /**\n * Handle keyboard events\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} element - Draggable element\n */\n handleKeydown: function (e, element) {\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n // Trigger click or custom action\n element.click();\n break;\n case 'Escape':\n // Cancel drag if in progress\n if (element.classList.contains('is-dragging')) {\n element.classList.remove('is-dragging');\n element.setAttribute('aria-grabbed', 'false');\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n this.currentDrag = null;\n }\n break;\n case 'ArrowUp':\n case 'ArrowLeft': {\n e.preventDefault();\n const prev = element.previousElementSibling;\n if (prev && (prev.classList.contains('vd-draggable') || prev.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(element, prev);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'up' }\n }));\n }\n break;\n }\n case 'ArrowDown':\n case 'ArrowRight': {\n e.preventDefault();\n const next = element.nextElementSibling;\n if (next && (next.classList.contains('vd-draggable') || next.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(next, element);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'down' }\n }));\n }\n break;\n }\n }\n },\n\n /**\n * Get data from draggable element\n * @param {HTMLElement} element - Draggable element\n * @returns {string} Data associated with the element\n */\n getData: function (element) {\n return element.dataset.draggable || element.textContent.trim();\n },\n\n /**\n * Update drag feedback element\n * @param {number} x - Current X coordinate\n * @param {number} y - Current Y coordinate\n */\n updateFeedback: function (x, y) {\n if (!this.currentDrag) return;\n\n // Show feedback\n this.feedbackElement.classList.remove('hidden');\n\n // Update feedback content\n const rect = this.currentDrag.initialBounds;\n this.feedbackElement.innerHTML = '';\n const clone = this.currentDrag.element.cloneNode(true);\n this.feedbackElement.appendChild(clone);\n\n // Set styles\n const offsetX = this.currentDrag.offsetX ?? 20;\n const offsetY = this.currentDrag.offsetY ?? 20;\n Object.assign(this.feedbackElement.style, {\n left: (x - offsetX) + 'px',\n top: (y - offsetY) + 'px',\n width: rect.width + 'px',\n height: rect.height + 'px'\n });\n },\n\n /**\n * Make an element draggable programmatically\n * @param {HTMLElement|string} element - Element or selector\n * @param {Object} options - Configuration options\n */\n makeDraggable: function (element, options = {}) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && !this.instances.has(el)) {\n // Add classes and attributes\n el.classList.add('vd-draggable');\n el.setAttribute('draggable', 'true');\n\n // Set options\n if (options.data) {\n el.dataset.draggable = options.data;\n }\n\n // Initialize\n this.initDraggable(el);\n }\n },\n\n /**\n * Remove draggable functionality from an element\n * @param {HTMLElement|string} element - Element or selector\n */\n removeDraggable: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && this.instances.has(el)) {\n // Clean up\n const instance = this.instances.get(el);\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n\n // Remove classes and attributes\n el.classList.remove('vd-draggable');\n el.removeAttribute('draggable');\n el.removeAttribute('data-draggable');\n }\n },\n\n /**\n * Destroy a draggable instance and clean up event listeners\n * @param {HTMLElement} element - Draggable element\n */\n destroy: function (element) {\n this.removeDraggable(element);\n },\n\n /**\n * Destroy all draggable instances\n */\n destroyAll: function () {\n const instances = Array.from(this.instances.keys());\n instances.forEach(element => this.destroy(element));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('draggable', Draggable);\n }\n\n // Expose globally\n window.VanduoDraggable = Draggable;\n})();\n", "/**\n * Vanduo Framework \u2013 LazyLoad Component\n * v1.2.1\n *\n * Provides two levels of API:\n *\n * LOW-LEVEL (generic IntersectionObserver wrapper)\n * VanduoLazyLoad.observe(element, callback, options?)\n * VanduoLazyLoad.unobserve(element)\n * VanduoLazyLoad.unobserveAll()\n *\n * HIGH-LEVEL (HTML-section fetcher, mirrors vanduo-docs SPA behaviour)\n * VanduoLazyLoad.loadSection(url, containerEl, options?)\n * options: { placeholder, threshold, rootMargin, onLoaded, onError }\n * placeholder: 'skeleton' | 'spinner' | HTMLString (default: 'skeleton')\n *\n * ATTRIBUTE-DRIVEN (zero-JS usage, wired by init())\n *
    \u2026
    \n *\n * EVENTS dispatched on the host element:\n * lazysection:loading \u2014 fetch started\n * lazysection:loaded \u2014 content injected\n * lazysection:error \u2014 fetch failed\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500 Private state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /** @type {Map} */\n const _observerMap = new Map();\n\n /* \u2500\u2500 Security helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Returns true only if `url` resolves to the same origin as the page\n * (relative paths and same-origin absolute URLs are allowed).\n * Cross-origin URLs are rejected to prevent SSRF-style fetch abuse.\n * @param {string} url\n * @returns {boolean}\n */\n function _isSafeUrl(url) {\n try {\n // Relative URLs (no origin) are always safe\n const resolved = new URL(url, window.location.href);\n return resolved.origin === window.location.origin;\n } catch (_) {\n return false;\n }\n }\n\n /**\n * Safely inject fetched HTML into a container by parsing it with\n * DOMParser (avoids script execution) and replacing children via\n * standard DOM APIs instead of raw innerHTML assignment.\n * @param {Element} containerEl\n * @param {string} html\n */\n function _safeInjectHtml(containerEl, html) {\n const parser = new DOMParser();\n const doc = parser.parseFromString(html.trim(), 'text/html'); // CodeQL [js/xss-through-dom] Intentional: parsed nodes are sanitized below before adoption into live DOM\n\n const DANGEROUS_TAGS = ['SCRIPT', 'IFRAME', 'OBJECT', 'EMBED', 'FORM', 'BASE', 'LINK', 'META', 'STYLE'];\n for (const tag of DANGEROUS_TAGS) {\n const els = doc.querySelectorAll(tag);\n for (let i = els.length - 1; i >= 0; i--) {\n els[i].parentNode.removeChild(els[i]);\n }\n }\n\n // Strip dangerous attributes (e.g. onerror, javascript: urls) from all elements\n function _sanitizeNode(node) {\n if (node.nodeType === Node.ELEMENT_NODE) {\n const attrs = node.attributes;\n for (let i = attrs.length - 1; i >= 0; i--) {\n const attrName = attrs[i].name.toLowerCase();\n const attrValue = attrs[i].value.toLowerCase();\n const trimmedValue = attrValue.trim();\n if (\n attrName.startsWith('on') ||\n trimmedValue.startsWith('javascript:') ||\n trimmedValue.startsWith('data:') ||\n trimmedValue.startsWith('vbscript:')\n ) {\n node.removeAttribute(attrs[i].name);\n }\n }\n const children = node.childNodes;\n for (let i = 0; i < children.length; i++) {\n _sanitizeNode(children[i]);\n }\n }\n }\n _sanitizeNode(doc.body);\n\n // Collect all top-level body children\n const nodes = Array.from(doc.body.childNodes);\n // Clear container and append parsed nodes\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n nodes.forEach(function (node) {\n containerEl.appendChild(document.adoptNode(node));\n });\n }\n\n /* \u2500\u2500 Placeholder HTML \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _skeletonHtml() {\n return '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _spinnerHtml() {\n return '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _resolvePlaceholder(placeholder) {\n if (!placeholder || placeholder === 'skeleton') return _skeletonHtml();\n if (placeholder === 'spinner') return _spinnerHtml();\n // Caller-supplied HTML string\n return placeholder;\n }\n\n /* \u2500\u2500 Dispatch helper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _dispatch(el, eventName, detail) {\n el.dispatchEvent(new CustomEvent(eventName, { bubbles: true, detail: detail || {} }));\n }\n\n /* \u2500\u2500 VanduoLazyLoad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const VanduoLazyLoad = {\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * LOW-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Observe an element. `callback` is invoked once when the element\n * enters the viewport, then the element is automatically unobserved.\n *\n * @param {Element} element\n * @param {function(Element): void} callback\n * @param {{ threshold?: number, rootMargin?: string }} [options]\n */\n observe: function (element, callback, options) {\n if (!(element instanceof Element)) {\n console.warn('[VanduoLazyLoad] observe() requires a DOM Element.');\n return;\n }\n if (typeof callback !== 'function') {\n console.warn('[VanduoLazyLoad] observe() requires a callback function.');\n return;\n }\n // Already observed \u2014 ignore\n if (_observerMap.has(element)) return;\n\n const threshold = (options && options.threshold != null) ? options.threshold : 0;\n const rootMargin = (options && options.rootMargin) ? options.rootMargin : '0px';\n\n const observer = new IntersectionObserver(function (entries, obs) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n obs.unobserve(entry.target);\n _observerMap.delete(entry.target);\n try {\n callback(entry.target);\n } catch (e) {\n console.error('[VanduoLazyLoad] Callback threw:', e);\n }\n }\n });\n }, { threshold: threshold, rootMargin: rootMargin });\n\n _observerMap.set(element, observer);\n observer.observe(element);\n },\n\n /**\n * Stop observing an element that was previously passed to observe().\n * @param {Element} element\n */\n unobserve: function (element) {\n const observer = _observerMap.get(element);\n if (observer) {\n observer.unobserve(element);\n _observerMap.delete(element);\n }\n },\n\n /**\n * Stop observing ALL currently observed elements.\n */\n unobserveAll: function () {\n _observerMap.forEach(function (observer, element) {\n observer.unobserve(element);\n });\n _observerMap.clear();\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * HIGH-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fetch an HTML partial and inject it into `containerEl` when the\n * container enters the viewport. A placeholder is shown immediately.\n *\n * @param {string} url URL of the HTML partial to fetch\n * @param {Element} containerEl Target element whose content will be replaced\n * @param {{\n * placeholder?: 'skeleton'|'spinner'|string,\n * threshold?: number,\n * rootMargin?: string,\n * onLoaded?: function(Element): void,\n * onError?: function(Error): void\n * }} [options]\n */\n loadSection: function (url, containerEl, options) {\n if (typeof url !== 'string' || !url) {\n console.warn('[VanduoLazyLoad] loadSection() requires a non-empty URL string.');\n return;\n }\n if (!(containerEl instanceof Element)) {\n console.warn('[VanduoLazyLoad] loadSection() requires a DOM Element as containerEl.');\n return;\n }\n // Reject cross-origin URLs to prevent SSRF-style fetch abuse\n if (!_isSafeUrl(url)) {\n console.error('[VanduoLazyLoad] loadSection() blocked cross-origin URL:', url);\n return;\n }\n\n const opts = options || {};\n // Placeholders are known-safe static HTML strings built internally\n const placeholderHtml = _resolvePlaceholder(opts.placeholder);\n\n // Use _safeInjectHtml instead of innerHTML to prevent XSS from caller-supplied placeholders\n _safeInjectHtml(containerEl, placeholderHtml);\n _dispatch(containerEl, 'lazysection:loading', { url: url });\n\n // Fetch when visible\n this.observe(containerEl, function () {\n const controller = new window.AbortController();\n const timeoutId = setTimeout(function () { controller.abort(); }, 10000);\n\n window.fetch(url, { signal: controller.signal })\n .then(function (res) {\n clearTimeout(timeoutId);\n if (!res.ok) throw new Error('HTTP ' + res.status);\n return res.text();\n })\n .then(function (html) {\n // Use DOMParser to parse fetched content safely, avoiding\n // raw innerHTML assignment of externally-sourced strings\n _safeInjectHtml(containerEl, html);\n _dispatch(containerEl, 'lazysection:loaded', { url: url });\n // Re-init Vanduo components inside the new content\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.init();\n }\n if (typeof opts.onLoaded === 'function') {\n opts.onLoaded(containerEl);\n }\n })\n .catch(function (err) {\n // Build error node via DOM APIs \u2014 no dynamic HTML strings\n const alertEl = document.createElement('div');\n alertEl.className = 'vd-alert vd-alert-error';\n alertEl.setAttribute('role', 'alert');\n const msgEl = document.createElement('span');\n msgEl.textContent = 'Failed to load content. ';\n const detailEl = document.createElement('small');\n detailEl.style.opacity = '0.7';\n detailEl.textContent = err.message;\n alertEl.appendChild(msgEl);\n alertEl.appendChild(detailEl);\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n containerEl.appendChild(alertEl);\n _dispatch(containerEl, 'lazysection:error', { url: url, error: err });\n console.error('[VanduoLazyLoad] loadSection failed:', err);\n if (typeof opts.onError === 'function') {\n opts.onError(err);\n }\n });\n }, { threshold: opts.threshold, rootMargin: opts.rootMargin });\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * ATTRIBUTE-DRIVEN INIT\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Scan the DOM for [data-vd-lazy] elements and wire them up.\n * Safe to call multiple times \u2014 already-observed elements are skipped.\n */\n init: function () {\n const self = this;\n const elements = document.querySelectorAll('[data-vd-lazy]');\n elements.forEach(function (el) {\n // Skip already-observed or already-loaded elements\n if (_observerMap.has(el) || el.dataset.vdLazyState === 'loading' || el.dataset.vdLazyState === 'loaded') return;\n\n const url = el.getAttribute('data-vd-lazy');\n if (!url) return;\n\n el.dataset.vdLazyState = 'loading';\n const placeholder = el.getAttribute('data-vd-lazy-placeholder') || 'skeleton';\n\n self.loadSection(url, el, {\n placeholder: placeholder,\n onLoaded: function () {\n el.dataset.vdLazyState = 'loaded';\n },\n onError: function () {\n el.dataset.vdLazyState = 'error';\n }\n });\n });\n }\n };\n\n /* \u2500\u2500 Register with Vanduo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('LazyLoad', VanduoLazyLoad);\n }\n\n /* \u2500\u2500 Global convenience alias \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n window.VanduoLazyLoad = VanduoLazyLoad;\n\n})();\n", "/**\n * Vanduo Framework - Glass Scroll Activation\n * Generic scroll-aware glass activation via IntersectionObserver.\n *\n * Usage:\n * Add `data-glass-scroll` to any element carrying a `.vd-glass*` class.\n * By default the previous sibling is used as the sentinel.\n * Point to a custom sentinel via `data-glass-sentinel=\"\"`.\n *\n * Behaviour:\n * - Adds `.is-glass-active` when the sentinel leaves the viewport (scrolled past).\n * - Removes `.is-glass-active` when the sentinel re-enters the viewport.\n */\n(function () {\n 'use strict';\n\n const GlassScroll = {\n /** @type {Map} */\n observers: new Map(),\n\n init: function () {\n document.querySelectorAll('[data-glass-scroll]').forEach(el => {\n if (this.observers.has(el)) return;\n this.initElement(el);\n });\n },\n\n /**\n * Wire up a single scroll-activated glass element.\n * @param {HTMLElement} el\n */\n initElement: function (el) {\n const sentinelSelector = el.dataset.glassSentinel;\n let sentinel;\n\n if (sentinelSelector) {\n sentinel = document.querySelector(sentinelSelector);\n }\n\n if (!sentinel) {\n // Fall back to the previous sibling element\n sentinel = el.previousElementSibling;\n }\n\n if (!sentinel) {\n // No sentinel available \u2014 activate immediately so glass is always shown\n el.classList.add('is-glass-active');\n return;\n }\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n // Active when sentinel is NOT intersecting (scrolled past it)\n el.classList.toggle('is-glass-active', !entry.isIntersecting);\n });\n },\n { threshold: 0, rootMargin: '0px' }\n );\n\n observer.observe(sentinel);\n this.observers.set(el, observer);\n },\n\n /**\n * Disconnect and remove a single element's observer.\n * @param {HTMLElement} el\n */\n destroy: function (el) {\n const observer = this.observers.get(el);\n if (observer) {\n observer.disconnect();\n this.observers.delete(el);\n }\n },\n\n destroyAll: function () {\n this.observers.forEach((observer, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('glassScroll', GlassScroll);\n }\n\n window.VanduoGlassScroll = GlassScroll;\n})();\n", "/**\n * Vanduo Framework - Water Morph Effect Component\n * Liquid wave content-swap animation on click\n *\n * Usage:\n * Add .vd-morph or [data-vd-morph] to any element.\n * Provide .vd-morph-content.vd-morph-current and .vd-morph-content.vd-morph-next children.\n * Wave and shine layers are auto-created if absent.\n *\n * JS API:\n * VanduoMorph.morph(el) \u2014 trigger morph programmatically (from center)\n * VanduoMorph.destroy(el) \u2014 tear down listeners for one element\n * VanduoMorph.destroyAll() \u2014 tear down all instances\n */\n\n(function () {\n 'use strict';\n\n const MORPH_DURATION_MS = 750;\n\n const Morph = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-morph, [data-vd-morph]');\n elements.forEach(function (el) {\n if (Morph.instances.has(el)) return;\n if (el.getAttribute('data-vd-morph') === 'manual') return;\n Morph.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n Morph._ensureLayers(el);\n\n const cleanup = [];\n let morphing = false;\n\n const handleClick = function (e) {\n if (morphing) return;\n Morph._runMorph(el, e, function () { morphing = false; });\n morphing = true;\n };\n\n el.addEventListener('click', handleClick);\n cleanup.push(function () { el.removeEventListener('click', handleClick); });\n\n this.instances.set(el, { cleanup: cleanup });\n },\n\n morph: function (el) {\n if (!el) return;\n if (!this.instances.has(el)) this.initInstance(el);\n this._runMorph(el, null, null);\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(function (fn) { fn(); });\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach(function (_, el) { Morph.destroy(el); });\n },\n\n /* \u2500\u2500 Internal helpers \u2500\u2500 */\n\n _ensureLayers: function (el) {\n if (!el.querySelector('.vd-morph-wave')) {\n const wave = document.createElement('span');\n wave.className = 'vd-morph-wave';\n wave.setAttribute('aria-hidden', 'true');\n el.insertBefore(wave, el.firstChild);\n }\n if (!el.querySelector('.vd-morph-shine')) {\n const shine = document.createElement('span');\n shine.className = 'vd-morph-shine';\n shine.setAttribute('aria-hidden', 'true');\n const waveEl = el.querySelector('.vd-morph-wave');\n if (waveEl && waveEl.nextSibling) {\n el.insertBefore(shine, waveEl.nextSibling);\n } else {\n el.insertBefore(shine, el.firstChild);\n }\n }\n },\n\n _runMorph: function (el, pointerEvent, onComplete) {\n const wave = el.querySelector('.vd-morph-wave');\n if (wave) {\n const rect = el.getBoundingClientRect();\n const cx = rect.left + rect.width / 2;\n const cy = rect.top + rect.height / 2;\n const px = pointerEvent ? (pointerEvent.clientX || cx) : cx;\n const py = pointerEvent ? (pointerEvent.clientY || cy) : cy;\n wave.style.left = (px - rect.left) + 'px';\n wave.style.top = (py - rect.top) + 'px';\n }\n\n el.classList.add('is-morphing');\n\n let duration = MORPH_DURATION_MS;\n const custom = getComputedStyle(el).getPropertyValue('--morph-duration');\n if (custom) {\n const parsed = parseFloat(custom);\n if (!isNaN(parsed)) duration = parsed * (custom.indexOf('ms') !== -1 ? 1 : 1000);\n }\n\n setTimeout(function () {\n el.classList.remove('is-morphing');\n\n const current = el.querySelector('.vd-morph-current');\n const next = el.querySelector('.vd-morph-next');\n if (current && next) {\n current.classList.remove('vd-morph-current');\n current.classList.add('vd-morph-next');\n next.classList.remove('vd-morph-next');\n next.classList.add('vd-morph-current');\n }\n\n el.classList.add('morph-done');\n setTimeout(function () { el.classList.remove('morph-done'); }, 350);\n\n if (typeof onComplete === 'function') onComplete();\n }, duration);\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('morph', Morph);\n }\n\n window.VanduoMorph = Morph;\n\n})();\n", "/**\n * Vanduo Framework - Flow (Carousel/Slider) Component\n * Touch-enabled carousel with slide/fade transitions, autoplay, indicators\n */\n\n(function () {\n 'use strict';\n\n const Flow = {\n instances: new Map(),\n\n init: function () {\n const carousels = document.querySelectorAll('.vd-flow, .vd-carousel');\n carousels.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const track = el.querySelector('.vd-flow-track');\n if (!track) return;\n\n const slides = Array.from(track.querySelectorAll('.vd-flow-slide'));\n if (slides.length === 0) return;\n\n const isFade = el.classList.contains('vd-flow-fade');\n const autoplay = el.hasAttribute('data-vd-autoplay');\n const interval = parseInt(el.getAttribute('data-vd-interval'), 10) || 5000;\n const loop = el.getAttribute('data-vd-loop') !== 'false';\n\n const state = {\n current: 0,\n total: slides.length,\n autoplayTimer: null,\n isFade: isFade,\n loop: loop,\n isDragging: false,\n startX: 0,\n currentX: 0,\n threshold: 50\n };\n\n const cleanup = [];\n\n // Set initial active slide\n slides.forEach((slide, i) => {\n slide.setAttribute('role', 'group');\n slide.setAttribute('aria-roledescription', 'slide');\n slide.setAttribute('aria-label', 'Slide ' + (i + 1) + ' of ' + slides.length);\n if (i === 0) slide.classList.add('is-active');\n });\n\n el.setAttribute('role', 'region');\n el.setAttribute('aria-roledescription', 'carousel');\n if (!el.getAttribute('aria-label')) {\n el.setAttribute('aria-label', 'Carousel');\n }\n\n // Live region for announcements\n const liveRegion = document.createElement('div');\n liveRegion.setAttribute('aria-live', 'polite');\n liveRegion.setAttribute('aria-atomic', 'true');\n liveRegion.className = 'sr-only';\n liveRegion.style.cssText = 'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);';\n el.appendChild(liveRegion);\n\n const goTo = (index, announce) => {\n if (announce === undefined) announce = true;\n let target = index;\n if (state.loop) {\n target = ((index % state.total) + state.total) % state.total;\n } else {\n target = Math.max(0, Math.min(index, state.total - 1));\n }\n\n const prev = state.current;\n state.current = target;\n\n if (state.isFade) {\n slides.forEach((s, i) => {\n s.classList.toggle('is-active', i === target);\n });\n } else {\n track.style.transform = 'translateX(-' + (target * 100) + '%)';\n }\n\n // Update indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.classList.toggle('is-active', i === target);\n ind.setAttribute('aria-selected', i === target ? 'true' : 'false');\n });\n\n // Update slide ARIA\n slides.forEach((s, i) => {\n s.setAttribute('aria-hidden', i !== target ? 'true' : 'false');\n });\n\n if (announce) {\n liveRegion.textContent = 'Slide ' + (target + 1) + ' of ' + state.total;\n }\n\n el.dispatchEvent(new CustomEvent('flow:change', {\n detail: { current: target, previous: prev, total: state.total }\n }));\n };\n\n const next = () => goTo(state.current + 1);\n const prev = () => goTo(state.current - 1);\n\n // Controls\n const prevBtn = el.querySelector('.vd-flow-prev');\n const nextBtn = el.querySelector('.vd-flow-next');\n\n if (prevBtn) {\n const h = () => prev();\n prevBtn.addEventListener('click', h);\n cleanup.push(() => prevBtn.removeEventListener('click', h));\n }\n if (nextBtn) {\n const h = () => next();\n nextBtn.addEventListener('click', h);\n cleanup.push(() => nextBtn.removeEventListener('click', h));\n }\n\n // Indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.setAttribute('role', 'tab');\n ind.setAttribute('aria-selected', i === 0 ? 'true' : 'false');\n ind.setAttribute('aria-label', 'Go to slide ' + (i + 1));\n const h = () => goTo(i);\n ind.addEventListener('click', h);\n cleanup.push(() => ind.removeEventListener('click', h));\n });\n\n // Keyboard navigation\n const keyHandler = (e) => {\n if (e.key === 'ArrowLeft') { prev(); e.preventDefault(); }\n if (e.key === 'ArrowRight') { next(); e.preventDefault(); }\n };\n el.setAttribute('tabindex', '0');\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n // Touch / pointer support\n const pointerDown = (e) => {\n state.isDragging = true;\n state.startX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n state.currentX = state.startX;\n el.classList.add('is-dragging');\n };\n\n const pointerMove = (e) => {\n if (!state.isDragging) return;\n state.currentX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n };\n\n const pointerUp = () => {\n if (!state.isDragging) return;\n state.isDragging = false;\n el.classList.remove('is-dragging');\n const diff = state.startX - state.currentX;\n if (Math.abs(diff) > state.threshold) {\n if (diff > 0) next();\n else prev();\n }\n };\n\n el.addEventListener('mousedown', pointerDown);\n el.addEventListener('mousemove', pointerMove);\n el.addEventListener('mouseup', pointerUp);\n el.addEventListener('mouseleave', pointerUp);\n el.addEventListener('touchstart', pointerDown, { passive: true });\n el.addEventListener('touchmove', pointerMove, { passive: true });\n el.addEventListener('touchend', pointerUp);\n\n cleanup.push(\n () => el.removeEventListener('mousedown', pointerDown),\n () => el.removeEventListener('mousemove', pointerMove),\n () => el.removeEventListener('mouseup', pointerUp),\n () => el.removeEventListener('mouseleave', pointerUp),\n () => el.removeEventListener('touchstart', pointerDown),\n () => el.removeEventListener('touchmove', pointerMove),\n () => el.removeEventListener('touchend', pointerUp)\n );\n\n // Autoplay\n const startAutoplay = () => {\n stopAutoplay();\n state.autoplayTimer = setInterval(next, interval);\n };\n\n const stopAutoplay = () => {\n if (state.autoplayTimer) {\n clearInterval(state.autoplayTimer);\n state.autoplayTimer = null;\n }\n };\n\n if (autoplay) {\n startAutoplay();\n const pauseHandler = () => stopAutoplay();\n const resumeHandler = () => startAutoplay();\n el.addEventListener('mouseenter', pauseHandler);\n el.addEventListener('mouseleave', resumeHandler);\n el.addEventListener('focusin', pauseHandler);\n el.addEventListener('focusout', resumeHandler);\n cleanup.push(\n () => el.removeEventListener('mouseenter', pauseHandler),\n () => el.removeEventListener('mouseleave', resumeHandler),\n () => el.removeEventListener('focusin', pauseHandler),\n () => el.removeEventListener('focusout', resumeHandler),\n () => stopAutoplay()\n );\n }\n\n // Initial ARIA state\n goTo(0, false);\n\n this.instances.set(el, {\n cleanup: cleanup,\n goTo: goTo,\n next: next,\n prev: prev,\n getState: () => ({ ...state })\n });\n },\n\n goTo: function (el, index) {\n const instance = this.instances.get(el);\n if (instance) instance.goTo(index);\n },\n\n next: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.next();\n },\n\n prev: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.prev();\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('flow', Flow);\n }\n\n window.VanduoFlow = Flow;\n\n})();\n", "/**\n * Vanduo Framework - Bubble (Popover) Component\n * Click-triggered rich HTML popover, reuses tooltip positioning concepts\n */\n\n(function () {\n 'use strict';\n\n const Bubble = {\n instances: new Map(),\n _globalCleanups: [],\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-bubble], [data-vd-popover]');\n triggers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n\n if (this._globalCleanups.length === 0) {\n const outsideClick = (e) => {\n this.instances.forEach((inst, trigger) => {\n if (!inst.popover.contains(e.target) && !trigger.contains(e.target)) {\n this.hide(trigger);\n }\n });\n };\n const escHandler = (e) => {\n if (e.key === 'Escape') {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n }\n };\n document.addEventListener('click', outsideClick, true);\n document.addEventListener('keydown', escHandler);\n this._globalCleanups.push(\n () => document.removeEventListener('click', outsideClick, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n }\n },\n\n initInstance: function (trigger) {\n const cleanup = [];\n const placement = trigger.getAttribute('data-vd-bubble-placement') ||\n trigger.getAttribute('data-vd-popover-placement') || 'bottom';\n\n // Build popover element\n const popover = document.createElement('div');\n popover.className = 'vd-bubble-content';\n popover.setAttribute('role', 'dialog');\n popover.setAttribute('aria-modal', 'false');\n popover.setAttribute('data-placement', placement);\n\n const title = trigger.getAttribute('data-vd-bubble-title') ||\n trigger.getAttribute('data-vd-popover-title');\n const content = trigger.getAttribute('data-vd-bubble') ||\n trigger.getAttribute('data-vd-popover') || '';\n const htmlContent = trigger.getAttribute('data-vd-bubble-html') ||\n trigger.getAttribute('data-vd-popover-html');\n\n if (title) {\n const header = document.createElement('div');\n header.className = 'vd-bubble-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const closeBtn = document.createElement('button');\n closeBtn.className = 'vd-bubble-close';\n closeBtn.setAttribute('aria-label', 'Close');\n closeBtn.innerHTML = '×';\n header.appendChild(titleSpan);\n header.appendChild(closeBtn);\n popover.appendChild(header);\n\n const closeHandler = (e) => { e.stopPropagation(); this.hide(trigger); };\n closeBtn.addEventListener('click', closeHandler);\n cleanup.push(() => closeBtn.removeEventListener('click', closeHandler));\n }\n\n const body = document.createElement('div');\n body.className = 'vd-bubble-body';\n if (htmlContent) {\n if (typeof sanitizeHtml === 'function') {\n body.innerHTML = sanitizeHtml(htmlContent);\n } else {\n body.textContent = htmlContent;\n }\n } else {\n body.textContent = content;\n }\n popover.appendChild(body);\n\n document.body.appendChild(popover);\n\n // ARIA on trigger\n const popId = 'vd-bubble-' + Math.random().toString(36).slice(2, 9);\n popover.id = popId;\n trigger.setAttribute('aria-haspopup', 'dialog');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.setAttribute('aria-controls', popId);\n\n // Toggle on click\n const toggleHandler = (e) => {\n e.stopPropagation();\n if (popover.classList.contains('is-visible')) {\n this.hide(trigger);\n } else {\n this.hideAll();\n this.show(trigger);\n }\n };\n trigger.addEventListener('click', toggleHandler);\n cleanup.push(() => trigger.removeEventListener('click', toggleHandler));\n\n this.instances.set(trigger, { popover, cleanup, placement });\n },\n\n position: function (trigger, popover, placement) {\n const rect = trigger.getBoundingClientRect();\n const popRect = popover.getBoundingClientRect();\n const gap = 10;\n let top, left;\n\n switch (placement) {\n case 'top':\n top = rect.top - popRect.height - gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n break;\n case 'left':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.left - popRect.width - gap + window.scrollX;\n break;\n case 'right':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.right + gap + window.scrollX;\n break;\n default: // bottom\n top = rect.bottom + gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n }\n\n // Clamp to viewport\n left = Math.max(8, Math.min(left, window.innerWidth - popRect.width - 8));\n top = Math.max(8, top);\n\n popover.style.top = top + 'px';\n popover.style.left = left + 'px';\n },\n\n show: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n const { popover, placement } = instance;\n\n popover.style.display = 'block';\n popover.classList.add('is-visible');\n trigger.setAttribute('aria-expanded', 'true');\n\n requestAnimationFrame(() => {\n this.position(trigger, popover, placement);\n });\n\n trigger.dispatchEvent(new CustomEvent('bubble:show', { bubbles: true }));\n },\n\n hide: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.popover.classList.remove('is-visible');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.dispatchEvent(new CustomEvent('bubble:hide', { bubbles: true }));\n },\n\n hideAll: function () {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n },\n\n destroy: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n if (instance.popover.parentNode) {\n instance.popover.parentNode.removeChild(instance.popover);\n }\n trigger.removeAttribute('aria-haspopup');\n trigger.removeAttribute('aria-expanded');\n trigger.removeAttribute('aria-controls');\n this.instances.delete(trigger);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, trigger) => this.destroy(trigger));\n this._globalCleanups.forEach(fn => fn());\n this._globalCleanups = [];\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('bubble', Bubble);\n }\n\n window.VanduoBubble = Bubble;\n\n})();\n", "/**\n * Vanduo Framework - Waypoint (Scrollspy) Component\n * Highlights navigation links based on scroll position using IntersectionObserver\n */\n\n(function () {\n 'use strict';\n\n const Waypoint = {\n instances: new Map(),\n\n init: function () {\n const navs = document.querySelectorAll('[data-vd-waypoint-nav], [data-vd-scrollspy-nav]');\n navs.forEach(nav => {\n if (this.instances.has(nav)) return;\n this.initInstance(nav);\n });\n },\n\n initInstance: function (nav) {\n const links = Array.from(nav.querySelectorAll('a[href^=\"#\"]'));\n if (links.length === 0) return;\n\n const cleanup = [];\n const offset = parseInt(nav.getAttribute('data-vd-waypoint-offset') || '80', 10);\n const sections = [];\n\n links.forEach(link => {\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.setAttribute('data-vd-waypoint-section', '');\n sections.push({ id, link, section });\n }\n });\n\n if (sections.length === 0) return;\n\n const activeSections = new Set();\n\n const setActive = (id) => {\n links.forEach(l => l.classList.remove('is-active'));\n const target = links.find(l => l.getAttribute('href') === '#' + id);\n if (target) {\n target.classList.add('is-active');\n nav.dispatchEvent(new CustomEvent('waypoint:change', {\n detail: { activeId: id, link: target }\n }));\n }\n };\n\n const rootMargin = '-' + offset + 'px 0px -40% 0px';\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n activeSections.add(entry.target.id);\n } else {\n activeSections.delete(entry.target.id);\n }\n });\n\n // Pick the topmost visible section\n for (let i = 0; i < sections.length; i++) {\n if (activeSections.has(sections[i].id)) {\n setActive(sections[i].id);\n return;\n }\n }\n }, {\n rootMargin: rootMargin,\n threshold: 0\n });\n\n sections.forEach(s => observer.observe(s.section));\n\n // Smooth scroll on click\n links.forEach(link => {\n const clickHandler = (e) => {\n e.preventDefault();\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth' });\n setActive(id);\n }\n };\n link.addEventListener('click', clickHandler);\n cleanup.push(() => link.removeEventListener('click', clickHandler));\n });\n\n cleanup.push(() => observer.disconnect());\n\n this.instances.set(nav, { observer, cleanup, sections, setActive });\n },\n\n refresh: function (nav) {\n this.destroy(nav);\n this.initInstance(nav);\n },\n\n destroy: function (nav) {\n const instance = this.instances.get(nav);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(nav);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, nav) => this.destroy(nav));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('waypoint', Waypoint);\n }\n\n window.VanduoWaypoint = Waypoint;\n\n})();\n", "/**\n * Vanduo Framework - Ripple (Waves Effect) Component\n * Adds expanding circle animation on click at pointer position\n */\n\n(function () {\n 'use strict';\n\n const Ripple = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-ripple, [data-vd-ripple]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n\n const createWave = (e) => {\n const rect = el.getBoundingClientRect();\n const size = Math.max(rect.width, rect.height);\n const x = (e.clientX || (e.touches && e.touches[0].clientX) || rect.left + rect.width / 2) - rect.left - size / 2;\n const y = (e.clientY || (e.touches && e.touches[0].clientY) || rect.top + rect.height / 2) - rect.top - size / 2;\n\n const wave = document.createElement('span');\n wave.className = 'vd-ripple-wave';\n wave.style.width = size + 'px';\n wave.style.height = size + 'px';\n wave.style.left = x + 'px';\n wave.style.top = y + 'px';\n\n el.appendChild(wave);\n\n wave.addEventListener('animationend', () => {\n if (wave.parentNode) wave.parentNode.removeChild(wave);\n });\n };\n\n el.addEventListener('mousedown', createWave);\n el.addEventListener('touchstart', createWave, { passive: true });\n\n cleanup.push(\n () => el.removeEventListener('mousedown', createWave),\n () => el.removeEventListener('touchstart', createWave)\n );\n\n this.instances.set(el, { cleanup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n // Remove any lingering wave elements\n el.querySelectorAll('.vd-ripple-wave').forEach(w => w.remove());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('ripple', Ripple);\n }\n\n window.VanduoRipple = Ripple;\n\n})();\n", "/**\n * Vanduo Framework - Affix (Sticky) Component\n * Uses IntersectionObserver to toggle .is-stuck within the nearest scrollable parent\n */\n\n(function () {\n 'use strict';\n\n function isScrollable(element) {\n if (!element || element === document.body) return false;\n\n const style = window.getComputedStyle(element);\n const overflowY = style.overflowY;\n const overflowX = style.overflowX;\n const canScrollY = /(auto|scroll|overlay)/.test(overflowY) && element.scrollHeight > element.clientHeight;\n const canScrollX = /(auto|scroll|overlay)/.test(overflowX) && element.scrollWidth > element.clientWidth;\n\n return canScrollY || canScrollX;\n }\n\n function getScrollParent(element) {\n let parent = element.parentElement;\n\n while (parent && parent !== document.body && parent !== document.documentElement) {\n if (isScrollable(parent)) return parent;\n parent = parent.parentElement;\n }\n\n return null;\n }\n\n const Affix = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-affix, .vd-sticky, [data-vd-affix]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const parsedOffset = parseInt(el.getAttribute('data-vd-affix-offset') || '0', 10);\n const offset = Number.isNaN(parsedOffset) ? 0 : parsedOffset;\n const scrollParent = getScrollParent(el);\n let isStuck = false;\n\n const sentinel = document.createElement('div');\n sentinel.style.cssText = 'display:block;height:1px;margin-bottom:-1px;visibility:hidden;pointer-events:none;';\n el.parentNode.insertBefore(sentinel, el);\n\n el.style.setProperty('--affix-top-offset', offset + 'px');\n\n function stick() {\n if (isStuck) return;\n isStuck = true;\n el.classList.add('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:stuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n function unstick() {\n if (!isStuck) return;\n isStuck = false;\n el.classList.remove('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:unstuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n const observer = new IntersectionObserver(function (entries) {\n entries.forEach(entry => {\n if (!entry.isIntersecting) {\n stick();\n } else {\n unstick();\n }\n });\n }, {\n root: scrollParent,\n rootMargin: '-' + offset + 'px 0px 0px 0px',\n threshold: 0\n });\n\n observer.observe(sentinel);\n\n cleanup.push(\n () => observer.disconnect(),\n () => { if (sentinel.parentNode) sentinel.parentNode.removeChild(sentinel); },\n () => {\n el.classList.remove('is-stuck');\n el.style.removeProperty('--affix-top-offset');\n }\n );\n\n this.instances.set(el, { cleanup, observer, sentinel, scrollParent });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n el.classList.remove('is-stuck');\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('affix', Affix);\n }\n\n window.VanduoAffix = Affix;\n\n})();\n", "/**\n * Vanduo Framework - Suggest (Autocomplete) Component\n * Dropdown suggestion list with keyboard navigation, static/async data sources\n */\n\n(function () {\n 'use strict';\n\n /**\n * Escape HTML entities to prevent XSS when inserting into innerHTML\n * @param {string} text\n * @returns {string}\n */\n function _escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n const Suggest = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-suggest], [data-vd-autocomplete]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const minChars = parseInt(input.getAttribute('data-vd-suggest-min-chars') || '1', 10);\n const url = input.getAttribute('data-vd-suggest-url') || '';\n const staticData = input.getAttribute('data-vd-suggest') || input.getAttribute('data-vd-autocomplete') || '';\n let items = [];\n\n try { items = JSON.parse(staticData); } catch (_e) {\n items = staticData.split(',').map(s => s.trim()).filter(Boolean);\n }\n\n // Wrap input if not already wrapped\n let wrapper = input.closest('.vd-suggest-wrapper, .vd-autocomplete-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create dropdown list\n const list = document.createElement('ul');\n list.className = 'vd-suggest-list';\n list.setAttribute('role', 'listbox');\n const listId = 'vd-suggest-' + Math.random().toString(36).slice(2, 9);\n list.id = listId;\n wrapper.appendChild(list);\n\n // ARIA\n input.setAttribute('role', 'combobox');\n input.setAttribute('aria-autocomplete', 'list');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('aria-controls', listId);\n input.setAttribute('autocomplete', 'off');\n\n let highlighted = -1;\n let currentItems = [];\n let debounceTimer = null;\n\n const renderItems = (filtered, query) => {\n list.innerHTML = '';\n currentItems = filtered;\n highlighted = -1;\n\n if (filtered.length === 0) {\n const empty = document.createElement('li');\n empty.className = 'vd-suggest-empty';\n empty.textContent = 'No results';\n list.appendChild(empty);\n return;\n }\n\n filtered.forEach((item, i) => {\n const li = document.createElement('li');\n li.className = 'vd-suggest-item';\n li.setAttribute('role', 'option');\n li.id = listId + '-item-' + i;\n\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n if (query) {\n // Escape HTML first to prevent XSS, then highlight matches in the safe string\n const escaped = _escapeHtml(text);\n const re = new RegExp('(' + query.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n li.innerHTML = escaped.replace(re, '$1');\n } else {\n li.textContent = text;\n }\n\n li.addEventListener('click', () => selectItem(i));\n list.appendChild(li);\n });\n };\n\n const open = () => {\n list.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n list.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n highlighted = -1;\n input.removeAttribute('aria-activedescendant');\n };\n\n const selectItem = (index) => {\n const item = currentItems[index];\n const value = typeof item === 'object' ? (item.value || item.label || String(item)) : String(item);\n input.value = value;\n close();\n input.dispatchEvent(new CustomEvent('suggest:select', {\n detail: { value, item, index },\n bubbles: true\n }));\n };\n\n const highlight = (index) => {\n const listItems = list.querySelectorAll('.vd-suggest-item');\n listItems.forEach(li => li.classList.remove('is-highlighted'));\n if (index >= 0 && index < listItems.length) {\n highlighted = index;\n listItems[index].classList.add('is-highlighted');\n input.setAttribute('aria-activedescendant', listItems[index].id);\n listItems[index].scrollIntoView({ block: 'nearest' });\n }\n };\n\n const doSearch = async (query) => {\n if (query.length < minChars) { close(); return; }\n\n let filtered;\n if (url) {\n try {\n const separator = url.includes('?') ? '&' : '?';\n const res = await window.fetch(url + separator + 'q=' + encodeURIComponent(query));\n filtered = await res.json();\n } catch (_e) {\n filtered = [];\n }\n } else {\n const lower = query.toLowerCase();\n filtered = items.filter(item => {\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n return text.toLowerCase().includes(lower);\n });\n }\n\n renderItems(filtered, query);\n if (filtered.length > 0) open();\n else open(); // show \"no results\"\n };\n\n const inputHandler = () => {\n clearTimeout(debounceTimer);\n debounceTimer = setTimeout(() => doSearch(input.value), 200);\n };\n\n const keyHandler = (e) => {\n if (!list.classList.contains('is-open')) {\n if (e.key === 'ArrowDown') { doSearch(input.value); e.preventDefault(); }\n return;\n }\n\n const total = currentItems.length;\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n highlight(highlighted < total - 1 ? highlighted + 1 : 0);\n break;\n case 'ArrowUp':\n e.preventDefault();\n highlight(highlighted > 0 ? highlighted - 1 : total - 1);\n break;\n case 'Enter':\n e.preventDefault();\n if (highlighted >= 0) selectItem(highlighted);\n break;\n case 'Escape':\n close();\n break;\n }\n };\n\n const blurHandler = () => {\n setTimeout(close, 200);\n };\n\n input.addEventListener('input', inputHandler);\n input.addEventListener('keydown', keyHandler);\n input.addEventListener('blur', blurHandler);\n input.addEventListener('focus', () => { if (input.value.length >= minChars) doSearch(input.value); });\n\n cleanup.push(\n () => input.removeEventListener('input', inputHandler),\n () => input.removeEventListener('keydown', keyHandler),\n () => input.removeEventListener('blur', blurHandler),\n () => clearTimeout(debounceTimer),\n () => { if (list.parentNode) list.parentNode.removeChild(list); }\n );\n\n this.instances.set(input, { cleanup, list, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('suggest', Suggest);\n }\n\n window.VanduoSuggest = Suggest;\n\n})();\n", "/**\n * Vanduo Framework - Validate (Form Validation) Component\n * Declarative validation via data attributes with real-time and on-submit modes\n */\n\n(function () {\n 'use strict';\n\n const Validate = {\n instances: new Map(),\n\n rules: {\n required: (value) => value.trim().length > 0,\n email: (value) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value),\n url: (value) => { try { new URL(value); return true; } catch (_e) { return false; } },\n number: (value) => !isNaN(parseFloat(value)) && isFinite(value),\n min: (value, param) => value.length >= parseInt(param, 10),\n max: (value, param) => value.length <= parseInt(param, 10),\n minVal: (value, param) => parseFloat(value) >= parseFloat(param),\n maxVal: (value, param) => parseFloat(value) <= parseFloat(param),\n pattern: (value, param) => {\n try {\n // Cap regex length to prevent ReDoS from excessively complex patterns\n if (param.length > 100) return false;\n return new RegExp(param).test(value);\n } catch (_e) { return false; }\n },\n match: (value, param) => {\n try {\n const escaped = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(param) : param;\n const other = document.querySelector('[name=\"' + escaped + '\"]');\n return other ? value === other.value : false;\n } catch (_e) {\n return false;\n }\n }\n },\n\n messages: {\n required: 'This field is required',\n email: 'Please enter a valid email address',\n url: 'Please enter a valid URL',\n number: 'Please enter a valid number',\n min: 'Minimum {0} characters required',\n max: 'Maximum {0} characters allowed',\n minVal: 'Value must be at least {0}',\n maxVal: 'Value must be at most {0}',\n pattern: 'Invalid format',\n match: 'Fields do not match'\n },\n\n init: function () {\n const forms = document.querySelectorAll('[data-vd-validate], .vd-validate');\n forms.forEach(form => {\n if (this.instances.has(form)) return;\n this.initInstance(form);\n });\n },\n\n initInstance: function (form) {\n const cleanup = [];\n const mode = form.getAttribute('data-vd-validate-mode') || 'blur'; // blur | input | submit\n const fields = form.querySelectorAll('[data-vd-rules]');\n\n const validateField = (field) => {\n const rulesStr = field.getAttribute('data-vd-rules') || '';\n const rules = rulesStr.split('|').map(r => r.trim()).filter(Boolean);\n const value = field.value;\n const errors = [];\n\n for (const rule of rules) {\n const [name, ...params] = rule.split(':');\n const param = params.join(':');\n const validator = this.rules[name];\n\n if (validator && !validator(value, param)) {\n const customMsg = field.getAttribute('data-vd-msg-' + name);\n let msg = customMsg || this.messages[name] || 'Invalid';\n if (param) msg = msg.replace('{0}', param);\n errors.push(msg);\n break; // one error at a time\n }\n }\n\n this.setFieldState(field, errors);\n return errors.length === 0;\n };\n\n const validateAll = () => {\n let valid = true;\n fields.forEach(field => {\n if (!validateField(field)) valid = false;\n });\n return valid;\n };\n\n // Per-field listeners\n fields.forEach(field => {\n if (mode === 'input' || mode === 'blur') {\n const eventType = mode === 'input' ? 'input' : 'blur';\n const handler = () => validateField(field);\n field.addEventListener(eventType, handler);\n cleanup.push(() => field.removeEventListener(eventType, handler));\n\n if (mode === 'blur') {\n const inputClear = () => {\n if (field.classList.contains('is-invalid') || field.classList.contains('is-valid')) {\n validateField(field);\n }\n };\n field.addEventListener('input', inputClear);\n cleanup.push(() => field.removeEventListener('input', inputClear));\n }\n }\n });\n\n // Form submit\n const submitHandler = (e) => {\n const valid = validateAll();\n if (!valid) {\n e.preventDefault();\n e.stopPropagation();\n // Focus first invalid field\n const firstInvalid = form.querySelector('.is-invalid');\n if (firstInvalid) firstInvalid.focus();\n }\n form.dispatchEvent(new CustomEvent('validate:submit', {\n detail: { valid },\n bubbles: true\n }));\n };\n\n form.addEventListener('submit', submitHandler);\n cleanup.push(() => form.removeEventListener('submit', submitHandler));\n\n this.instances.set(form, { cleanup, validateAll, validateField });\n },\n\n setFieldState: function (field, errors) {\n const wrapper = field.closest('.vd-form-group') || field.parentElement;\n let errorEl = wrapper.querySelector('.vd-validate-error');\n\n field.classList.remove('is-valid', 'is-invalid');\n\n if (errors.length > 0) {\n field.classList.add('is-invalid');\n field.setAttribute('aria-invalid', 'true');\n if (!errorEl) {\n errorEl = document.createElement('div');\n errorEl.className = 'vd-validate-error';\n errorEl.id = 'vd-err-' + Math.random().toString(36).slice(2, 9);\n errorEl.setAttribute('role', 'alert');\n wrapper.appendChild(errorEl);\n }\n errorEl.textContent = errors[0];\n errorEl.style.display = '';\n field.setAttribute('aria-describedby', errorEl.id);\n } else if (field.value.trim()) {\n field.classList.add('is-valid');\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n } else {\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n }\n },\n\n validateForm: function (form) {\n const instance = this.instances.get(form);\n return instance ? instance.validateAll() : false;\n },\n\n addRule: function (name, validator, message) {\n this.rules[name] = validator;\n if (message) this.messages[name] = message;\n },\n\n destroy: function (form) {\n const instance = this.instances.get(form);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(form);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, form) => this.destroy(form));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('validate', Validate);\n }\n\n window.VanduoValidate = Validate;\n\n})();\n", "/**\n * Vanduo Framework - Datepicker Component\n * Calendar popup attached to input field with month/year navigation\n */\n\n(function () {\n 'use strict';\n\n const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\n const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];\n\n const Datepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-datepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const format = input.getAttribute('data-vd-datepicker-format') || 'yyyy-mm-dd';\n const minStr = input.getAttribute('data-vd-datepicker-min');\n const maxStr = input.getAttribute('data-vd-datepicker-max');\n const minDate = minStr ? new Date(minStr) : null;\n const maxDate = maxStr ? new Date(maxStr) : null;\n\n const today = new Date();\n let viewYear = today.getFullYear();\n let viewMonth = today.getMonth();\n let selectedDate = null;\n let viewMode = 'days'; // days | months | years\n\n // Parse existing value\n if (input.value) {\n const parsed = new Date(input.value);\n if (!isNaN(parsed.getTime())) {\n selectedDate = parsed;\n viewYear = parsed.getFullYear();\n viewMonth = parsed.getMonth();\n }\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-datepicker-popup';\n popup.setAttribute('role', 'dialog');\n popup.setAttribute('aria-label', 'Choose date');\n\n const wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n wrapper.appendChild(popup);\n\n const formatDate = (d) => {\n const yyyy = d.getFullYear();\n const mm = String(d.getMonth() + 1).padStart(2, '0');\n const dd = String(d.getDate()).padStart(2, '0');\n return format.replace('yyyy', yyyy).replace('mm', mm).replace('dd', dd);\n };\n\n const isDisabled = (d) => {\n if (minDate && d < minDate) return true;\n if (maxDate && d > maxDate) return true;\n return false;\n };\n\n const isSameDay = (a, b) => a && b &&\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate();\n\n const render = () => {\n popup.innerHTML = '';\n\n // Header\n const header = document.createElement('div');\n header.className = 'vd-datepicker-header';\n\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-datepicker-prev';\n prevBtn.innerHTML = '‹';\n prevBtn.setAttribute('aria-label', 'Previous');\n\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-datepicker-next';\n nextBtn.innerHTML = '›';\n nextBtn.setAttribute('aria-label', 'Next');\n\n const title = document.createElement('span');\n title.className = 'vd-datepicker-title';\n\n if (viewMode === 'days') {\n title.textContent = MONTHS[viewMonth] + ' ' + viewYear;\n title.addEventListener('click', () => { viewMode = 'months'; render(); });\n prevBtn.addEventListener('click', () => { viewMonth--; if (viewMonth < 0) { viewMonth = 11; viewYear--; } render(); });\n nextBtn.addEventListener('click', () => { viewMonth++; if (viewMonth > 11) { viewMonth = 0; viewYear++; } render(); });\n } else if (viewMode === 'months') {\n title.textContent = String(viewYear);\n title.addEventListener('click', () => { viewMode = 'years'; render(); });\n prevBtn.addEventListener('click', () => { viewYear--; render(); });\n nextBtn.addEventListener('click', () => { viewYear++; render(); });\n } else {\n const decadeStart = Math.floor(viewYear / 10) * 10;\n title.textContent = decadeStart + ' - ' + (decadeStart + 9);\n prevBtn.addEventListener('click', () => { viewYear -= 10; render(); });\n nextBtn.addEventListener('click', () => { viewYear += 10; render(); });\n }\n\n header.appendChild(prevBtn);\n header.appendChild(title);\n header.appendChild(nextBtn);\n popup.appendChild(header);\n\n if (viewMode === 'days') {\n // Weekday headers\n const weekdays = document.createElement('div');\n weekdays.className = 'vd-datepicker-weekdays';\n DAYS.forEach(d => {\n const span = document.createElement('span');\n span.textContent = d;\n weekdays.appendChild(span);\n });\n popup.appendChild(weekdays);\n\n // Days grid\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-days';\n\n const firstDay = new Date(viewYear, viewMonth, 1).getDay();\n const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();\n const daysInPrev = new Date(viewYear, viewMonth, 0).getDate();\n\n // Previous month padding\n for (let i = firstDay - 1; i >= 0; i--) {\n const btn = createDayBtn(daysInPrev - i, true);\n grid.appendChild(btn);\n }\n\n // Current month\n for (let d = 1; d <= daysInMonth; d++) {\n const date = new Date(viewYear, viewMonth, d);\n const btn = createDayBtn(d, false, date);\n grid.appendChild(btn);\n }\n\n // Next month padding\n const totalCells = firstDay + daysInMonth;\n const remaining = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7);\n for (let i = 1; i <= remaining; i++) {\n const btn = createDayBtn(i, true);\n grid.appendChild(btn);\n }\n\n popup.appendChild(grid);\n } else if (viewMode === 'months') {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-months';\n MONTHS.forEach((name, i) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-month-btn';\n btn.textContent = name.slice(0, 3);\n if (selectedDate && selectedDate.getFullYear() === viewYear && selectedDate.getMonth() === i) {\n btn.classList.add('is-selected');\n }\n btn.addEventListener('click', () => { viewMonth = i; viewMode = 'days'; render(); });\n grid.appendChild(btn);\n });\n popup.appendChild(grid);\n } else {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-years';\n const decadeStart = Math.floor(viewYear / 10) * 10;\n for (let y = decadeStart - 1; y <= decadeStart + 10; y++) {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-year-btn';\n btn.textContent = y;\n if (selectedDate && selectedDate.getFullYear() === y) btn.classList.add('is-selected');\n if (y < decadeStart || y > decadeStart + 9) btn.style.opacity = '0.4';\n btn.addEventListener('click', () => { viewYear = y; viewMode = 'months'; render(); });\n grid.appendChild(btn);\n }\n popup.appendChild(grid);\n }\n };\n\n const createDayBtn = (day, outside, date) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-day';\n btn.textContent = day;\n\n if (outside) {\n btn.classList.add('is-outside');\n btn.tabIndex = -1;\n return btn;\n }\n\n if (date && isSameDay(date, today)) btn.classList.add('is-today');\n if (date && isSameDay(date, selectedDate)) btn.classList.add('is-selected');\n if (date && isDisabled(date)) {\n btn.classList.add('is-disabled');\n return btn;\n }\n\n if (date) {\n btn.addEventListener('click', () => {\n selectedDate = date;\n viewYear = date.getFullYear();\n viewMonth = date.getMonth();\n input.value = formatDate(date);\n close();\n input.dispatchEvent(new CustomEvent('datepicker:select', {\n detail: { date, formatted: input.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n }\n\n return btn;\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n viewMode = 'days';\n };\n\n // Events\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'dialog');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close, popup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('datepicker', Datepicker);\n }\n\n window.VanduoDatepicker = Datepicker;\n\n})();\n", "/**\n * Vanduo Framework - Timepicker Component\n * Dropdown time selection with 12h/24h format and configurable step intervals\n */\n\n(function () {\n 'use strict';\n\n const Timepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-timepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const is24h = input.getAttribute('data-vd-timepicker-format') === '24h';\n const step = parseInt(input.getAttribute('data-vd-timepicker-step') || '30', 10);\n\n // Create wrapper\n let wrapper = input.closest('.vd-suggest-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-timepicker-popup';\n popup.setAttribute('role', 'listbox');\n wrapper.appendChild(popup);\n\n // Generate time slots\n const times = [];\n for (let h = 0; h < 24; h++) {\n for (let m = 0; m < 60; m += step) {\n const hh24 = String(h).padStart(2, '0');\n const mm = String(m).padStart(2, '0');\n\n if (is24h) {\n times.push({ display: hh24 + ':' + mm, value: hh24 + ':' + mm });\n } else {\n const period = h < 12 ? 'AM' : 'PM';\n const h12 = h === 0 ? 12 : (h > 12 ? h - 12 : h);\n const display = h12 + ':' + mm + ' ' + period;\n times.push({ display, value: hh24 + ':' + mm });\n }\n }\n }\n\n const render = () => {\n popup.innerHTML = '';\n times.forEach(t => {\n const item = document.createElement('div');\n item.className = 'vd-timepicker-item';\n item.setAttribute('role', 'option');\n item.textContent = t.display;\n\n if (input.value === t.value || input.value === t.display) {\n item.classList.add('is-selected');\n }\n\n item.addEventListener('click', () => {\n input.value = t.display;\n popup.querySelectorAll('.vd-timepicker-item').forEach(i => i.classList.remove('is-selected'));\n item.classList.add('is-selected');\n close();\n input.dispatchEvent(new CustomEvent('timepicker:select', {\n detail: { display: t.display, value: t.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n\n popup.appendChild(item);\n });\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n // Scroll to selected\n const selected = popup.querySelector('.is-selected');\n if (selected) selected.scrollIntoView({ block: 'center' });\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n };\n\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'listbox');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n input.readOnly = true;\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('timepicker', Timepicker);\n }\n\n window.VanduoTimepicker = Timepicker;\n\n})();\n", "/**\n * Vanduo Framework - Stepper Component\n * Multi-step progress indicator with state management\n */\n\n(function () {\n 'use strict';\n\n const Stepper = {\n instances: new Map(),\n\n init: function () {\n const steppers = document.querySelectorAll('.vd-stepper');\n steppers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const items = Array.from(el.querySelectorAll('.vd-stepper-item'));\n const isClickable = el.classList.contains('vd-stepper-clickable');\n let currentIndex = items.findIndex(i => i.classList.contains('is-active'));\n if (currentIndex === -1) currentIndex = 0;\n\n const setStep = (index) => {\n if (index < 0 || index >= items.length) return;\n const prev = currentIndex;\n currentIndex = index;\n\n items.forEach((item, i) => {\n item.classList.remove('is-active', 'is-completed');\n if (i < index) item.classList.add('is-completed');\n else if (i === index) item.classList.add('is-active');\n });\n\n el.dispatchEvent(new CustomEvent('stepper:change', {\n detail: { current: index, previous: prev, total: items.length },\n bubbles: true\n }));\n };\n\n if (isClickable) {\n items.forEach((item, i) => {\n const handler = () => setStep(i);\n item.addEventListener('click', handler);\n cleanup.push(() => item.removeEventListener('click', handler));\n });\n }\n\n // Initialize current state\n setStep(currentIndex);\n\n this.instances.set(el, {\n cleanup,\n setStep,\n next: () => setStep(currentIndex + 1),\n prev: () => setStep(currentIndex - 1),\n getCurrent: () => currentIndex\n });\n },\n\n setStep: function (el, index) {\n const inst = this.instances.get(el);\n if (inst) inst.setStep(index);\n },\n\n next: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.next();\n },\n\n prev: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.prev();\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('stepper', Stepper);\n }\n\n window.VanduoStepper = Stepper;\n\n})();\n", "/**\n * Vanduo Framework - Rating Component\n * Star-based rating input with hover preview and read-only mode\n */\n\n(function () {\n 'use strict';\n\n const Rating = {\n instances: new Map(),\n\n init: function () {\n const ratings = document.querySelectorAll('[data-vd-rating]');\n ratings.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const max = parseInt(el.getAttribute('data-vd-rating-max') || '5', 10);\n const initialValue = parseFloat(el.getAttribute('data-vd-rating-value') || '0');\n const readonly = el.classList.contains('vd-rating-readonly') || el.hasAttribute('data-vd-rating-readonly');\n let currentValue = initialValue;\n\n el.classList.add('vd-rating');\n el.setAttribute('role', 'radiogroup');\n el.setAttribute('aria-label', el.getAttribute('aria-label') || 'Rating');\n\n // Clear existing stars\n el.innerHTML = '';\n\n // Create stars\n const stars = [];\n for (let i = 1; i <= max; i++) {\n const star = document.createElement('button');\n star.type = 'button';\n star.className = 'vd-rating-star';\n star.setAttribute('role', 'radio');\n star.setAttribute('aria-label', i + ' star' + (i > 1 ? 's' : ''));\n star.setAttribute('aria-checked', i <= currentValue ? 'true' : 'false');\n if (readonly) star.tabIndex = -1;\n stars.push(star);\n el.appendChild(star);\n }\n\n // Value display\n const valueDisplay = document.createElement('span');\n valueDisplay.className = 'vd-rating-value';\n valueDisplay.textContent = currentValue > 0 ? currentValue.toString() : '';\n el.appendChild(valueDisplay);\n\n const updateStars = (value) => {\n stars.forEach((star, i) => {\n star.classList.remove('is-active', 'is-half');\n const starNum = i + 1;\n if (starNum <= Math.floor(value)) {\n star.classList.add('is-active');\n } else if (starNum - 0.5 <= value) {\n star.classList.add('is-half');\n }\n star.setAttribute('aria-checked', starNum <= value ? 'true' : 'false');\n });\n valueDisplay.textContent = value > 0 ? value.toString() : '';\n };\n\n updateStars(currentValue);\n\n if (!readonly) {\n stars.forEach((star, i) => {\n const enterHandler = () => {\n stars.forEach((s, j) => {\n s.classList.toggle('is-hovered', j <= i);\n });\n };\n const leaveHandler = () => {\n stars.forEach(s => s.classList.remove('is-hovered'));\n };\n const clickHandler = () => {\n currentValue = i + 1;\n el.setAttribute('data-vd-rating-value', currentValue);\n updateStars(currentValue);\n el.dispatchEvent(new CustomEvent('rating:change', {\n detail: { value: currentValue, max },\n bubbles: true\n }));\n };\n\n star.addEventListener('mouseenter', enterHandler);\n star.addEventListener('mouseleave', leaveHandler);\n star.addEventListener('click', clickHandler);\n\n cleanup.push(\n () => star.removeEventListener('mouseenter', enterHandler),\n () => star.removeEventListener('mouseleave', leaveHandler),\n () => star.removeEventListener('click', clickHandler)\n );\n });\n\n // Keyboard\n const keyHandler = (e) => {\n if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n e.preventDefault();\n if (currentValue < max) {\n currentValue++;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n e.preventDefault();\n if (currentValue > 1) {\n currentValue--;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n }\n };\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n }\n\n this.instances.set(el, {\n cleanup,\n getValue: () => currentValue,\n setValue: (v) => { currentValue = v; updateStars(v); }\n });\n },\n\n getValue: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getValue() : 0;\n },\n\n setValue: function (el, value) {\n const inst = this.instances.get(el);\n if (inst) inst.setValue(value);\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('rating', Rating);\n }\n\n window.VanduoRating = Rating;\n\n})();\n", "/**\n * Vanduo Framework - Transfer (Dual-list) Component\n * Source-to-target list transfer with search, select-all, and move actions\n */\n\n(function () {\n 'use strict';\n\n const Transfer = {\n instances: new Map(),\n\n init: function () {\n const transfers = document.querySelectorAll('[data-vd-transfer]');\n transfers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n el.classList.add('vd-transfer');\n\n let sourceData, targetData;\n try {\n const raw = JSON.parse(el.getAttribute('data-vd-transfer') || '[]');\n sourceData = raw.map((item, i) => ({\n id: item.id || 'item-' + i,\n label: item.label || item.text || String(item),\n selected: false\n }));\n } catch (_e) {\n sourceData = [];\n }\n targetData = [];\n\n const sourceSelected = new Set();\n const targetSelected = new Set();\n\n const render = () => {\n el.innerHTML = '';\n\n // Source panel\n const sourcePanel = createPanel('Source', sourceData, sourceSelected, 'source');\n // Actions\n const actions = document.createElement('div');\n actions.className = 'vd-transfer-actions';\n\n const moveRightBtn = document.createElement('button');\n moveRightBtn.type = 'button';\n moveRightBtn.className = 'vd-transfer-btn';\n moveRightBtn.innerHTML = '›';\n moveRightBtn.setAttribute('aria-label', 'Move to target');\n moveRightBtn.disabled = sourceSelected.size === 0;\n moveRightBtn.addEventListener('click', () => moveRight());\n\n const moveLeftBtn = document.createElement('button');\n moveLeftBtn.type = 'button';\n moveLeftBtn.className = 'vd-transfer-btn';\n moveLeftBtn.innerHTML = '‹';\n moveLeftBtn.setAttribute('aria-label', 'Move to source');\n moveLeftBtn.disabled = targetSelected.size === 0;\n moveLeftBtn.addEventListener('click', () => moveLeft());\n\n actions.appendChild(moveRightBtn);\n actions.appendChild(moveLeftBtn);\n\n // Target panel\n const targetPanel = createPanel('Target', targetData, targetSelected, 'target');\n\n el.appendChild(sourcePanel);\n el.appendChild(actions);\n el.appendChild(targetPanel);\n };\n\n const createPanel = (title, data, selected, _side) => {\n const panel = document.createElement('div');\n panel.className = 'vd-transfer-panel';\n\n const header = document.createElement('div');\n header.className = 'vd-transfer-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const count = document.createElement('span');\n count.className = 'vd-transfer-count';\n count.textContent = selected.size + '/' + data.length;\n header.appendChild(titleSpan);\n header.appendChild(count);\n panel.appendChild(header);\n\n // Search\n const searchDiv = document.createElement('div');\n searchDiv.className = 'vd-transfer-search';\n const searchInput = document.createElement('input');\n searchInput.type = 'text';\n searchInput.placeholder = 'Search...';\n searchInput.setAttribute('aria-label', 'Search ' + title.toLowerCase());\n searchDiv.appendChild(searchInput);\n panel.appendChild(searchDiv);\n\n // List\n const list = document.createElement('ul');\n list.className = 'vd-transfer-list';\n list.setAttribute('role', 'listbox');\n\n const renderList = (filter) => {\n list.innerHTML = '';\n const filtered = filter ? data.filter(d => {\n const label = (d.label || d.text || String(d)).toLowerCase();\n return label.includes(filter.toLowerCase());\n }) : data;\n filtered.forEach(item => {\n const li = document.createElement('li');\n li.className = 'vd-transfer-item';\n li.setAttribute('role', 'option');\n if (selected.has(item.id)) li.classList.add('is-selected');\n\n const checkbox = document.createElement('input');\n checkbox.type = 'checkbox';\n checkbox.checked = selected.has(item.id);\n checkbox.setAttribute('aria-label', item.label);\n\n const label = document.createElement('span');\n label.textContent = item.label;\n\n li.addEventListener('click', () => {\n if (selected.has(item.id)) selected.delete(item.id);\n else selected.add(item.id);\n render();\n });\n\n li.appendChild(checkbox);\n li.appendChild(label);\n list.appendChild(li);\n });\n };\n\n searchInput.addEventListener('input', () => renderList(searchInput.value));\n renderList('');\n\n panel.appendChild(list);\n return panel;\n };\n\n const moveRight = () => {\n const toMove = sourceData.filter(d => sourceSelected.has(d.id));\n sourceData = sourceData.filter(d => !sourceSelected.has(d.id));\n targetData = targetData.concat(toMove);\n sourceSelected.clear();\n render();\n fireChange();\n };\n\n const moveLeft = () => {\n const toMove = targetData.filter(d => targetSelected.has(d.id));\n targetData = targetData.filter(d => !targetSelected.has(d.id));\n sourceData = sourceData.concat(toMove);\n targetSelected.clear();\n render();\n fireChange();\n };\n\n const fireChange = () => {\n el.dispatchEvent(new CustomEvent('transfer:change', {\n detail: {\n source: sourceData.map(d => d.id),\n target: targetData.map(d => d.id)\n },\n bubbles: true\n }));\n };\n\n render();\n\n this.instances.set(el, {\n cleanup,\n getTarget: () => targetData.map(d => d.id),\n getSource: () => sourceData.map(d => d.id)\n });\n },\n\n getSelected: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getTarget() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('transfer', Transfer);\n }\n\n window.VanduoTransfer = Transfer;\n\n})();\n", "/**\n * Vanduo Framework - Tree View Component\n * Hierarchical collapsible tree with checkbox selection and keyboard navigation\n */\n\n(function () {\n 'use strict';\n\n const Tree = {\n instances: new Map(),\n\n init: function () {\n const trees = document.querySelectorAll('[data-vd-tree]');\n trees.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const cascade = el.getAttribute('data-vd-tree-cascade') !== 'false';\n\n let data;\n try { data = JSON.parse(el.getAttribute('data-vd-tree') || '[]'); } catch (_e) { data = []; }\n\n el.classList.add('vd-tree');\n el.setAttribute('role', 'tree');\n\n const render = (items, parent) => {\n parent.innerHTML = '';\n items.forEach(item => {\n const node = document.createElement('li');\n node.className = 'vd-tree-node';\n node.setAttribute('role', 'treeitem');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n if (item.open) node.classList.add('is-open');\n\n const content = document.createElement('div');\n content.className = 'vd-tree-node-content';\n\n // Toggle\n if (item.children && item.children.length > 0) {\n const toggle = document.createElement('button');\n toggle.type = 'button';\n toggle.className = 'vd-tree-toggle';\n toggle.setAttribute('aria-label', 'Toggle');\n toggle.addEventListener('click', (e) => {\n e.stopPropagation();\n item.open = !item.open;\n node.classList.toggle('is-open');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n });\n content.appendChild(toggle);\n } else {\n const ph = document.createElement('span');\n ph.className = 'vd-tree-toggle-placeholder';\n content.appendChild(ph);\n }\n\n // Checkbox\n if (el.hasAttribute('data-vd-tree-checkbox')) {\n const cb = document.createElement('input');\n cb.type = 'checkbox';\n cb.className = 'vd-tree-checkbox';\n cb.checked = !!item.checked;\n cb.setAttribute('aria-label', item.label);\n cb.addEventListener('change', (e) => {\n e.stopPropagation();\n item.checked = cb.checked;\n if (cascade && item.children) {\n setChildChecked(item.children, cb.checked);\n render(data, el);\n }\n el.dispatchEvent(new CustomEvent('tree:check', {\n detail: { id: item.id, checked: cb.checked, label: item.label },\n bubbles: true\n }));\n });\n content.appendChild(cb);\n }\n\n // Icon\n if (item.icon) {\n const icon = document.createElement('span');\n icon.className = 'vd-tree-icon ' + item.icon;\n content.appendChild(icon);\n }\n\n // Label\n const label = document.createElement('span');\n label.className = 'vd-tree-label';\n label.textContent = item.label || '';\n content.appendChild(label);\n\n node.appendChild(content);\n\n // Children\n if (item.children && item.children.length > 0) {\n const childList = document.createElement('ul');\n childList.className = 'vd-tree-children';\n childList.setAttribute('role', 'group');\n render(item.children, childList);\n node.appendChild(childList);\n }\n\n parent.appendChild(node);\n });\n };\n\n const setChildChecked = (items, checked) => {\n items.forEach(item => {\n item.checked = checked;\n if (item.children) setChildChecked(item.children, checked);\n });\n };\n\n // Keyboard\n const keyHandler = (e) => {\n const focused = document.activeElement;\n if (!el.contains(focused)) return;\n\n const nodes = Array.from(el.querySelectorAll('.vd-tree-node-content'));\n const idx = nodes.indexOf(focused.closest('.vd-tree-node-content'));\n if (idx === -1) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (idx < nodes.length - 1) {\n const next = nodes[idx + 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (next) next.focus();\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (idx > 0) {\n const prev = nodes[idx - 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (prev) prev.focus();\n }\n break;\n }\n };\n\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n render(data, el);\n\n this.instances.set(el, {\n cleanup,\n getData: () => data,\n getChecked: () => {\n const checked = [];\n const collect = (items) => {\n items.forEach(i => {\n if (i.checked) checked.push(i.id || i.label);\n if (i.children) collect(i.children);\n });\n };\n collect(data);\n return checked;\n }\n });\n },\n\n getChecked: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getChecked() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tree', Tree);\n }\n\n window.VanduoTree = Tree;\n\n})();\n", "/**\n * Vanduo Framework - Spotlight (Feature Discovery) Component\n * Guided tour with overlay highlight and step-through tooltip\n */\n\n(function () {\n 'use strict';\n\n const Spotlight = {\n _active: false,\n _steps: [],\n _currentStep: 0,\n _elements: {},\n _cleanup: [],\n _boundTriggers: new WeakMap(),\n _triggerElement: null,\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-spotlight]');\n\n triggers.forEach(trigger => {\n if (this._boundTriggers.has(trigger)) return;\n\n const clickHandler = (event) => {\n event.preventDefault();\n\n const steps = this._parseSteps(trigger.getAttribute('data-vd-spotlight'));\n if (steps.length === 0) return;\n\n this.start(steps, { trigger });\n };\n\n trigger.addEventListener('click', clickHandler);\n this._boundTriggers.set(trigger, clickHandler);\n });\n },\n\n _parseSteps: function (raw) {\n if (typeof raw !== 'string' || raw.trim() === '') return [];\n\n try {\n const parsed = JSON.parse(raw);\n return this._normalizeSteps(parsed);\n } catch (error) {\n console.error('VanduoSpotlight: invalid data-vd-spotlight payload.', error);\n return [];\n }\n },\n\n _normalizeStep: function (step) {\n if (!step || typeof step !== 'object') return null;\n\n const target = step.target;\n const hasSelectorTarget = typeof target === 'string' && target.trim() !== '';\n const hasElementTarget = typeof Element !== 'undefined' && target instanceof Element;\n\n if (!hasSelectorTarget && !hasElementTarget) return null;\n\n const title = typeof step.title === 'string' ? step.title : '';\n const description = typeof step.description === 'string'\n ? step.description\n : (typeof step.content === 'string' ? step.content : '');\n\n return {\n target,\n title,\n description\n };\n },\n\n _normalizeSteps: function (steps) {\n if (!Array.isArray(steps)) return [];\n\n return steps\n .map(step => this._normalizeStep(step))\n .filter(Boolean);\n },\n\n start: function (steps, options) {\n if (this._active) this.stop();\n\n const normalizedSteps = this._normalizeSteps(steps);\n if (normalizedSteps.length === 0) return;\n\n const startOptions = options || {};\n\n this._steps = normalizedSteps;\n this._currentStep = 0;\n this._active = true;\n this._triggerElement = startOptions.trigger || (document.activeElement instanceof HTMLElement ? document.activeElement : null);\n\n // Create overlay\n const overlay = document.createElement('div');\n overlay.className = 'vd-spotlight-overlay';\n overlay.setAttribute('aria-hidden', 'true');\n document.body.appendChild(overlay);\n\n // Create tooltip\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-spotlight-tooltip';\n tooltip.setAttribute('role', 'dialog');\n tooltip.setAttribute('aria-modal', 'true');\n tooltip.tabIndex = -1;\n document.body.appendChild(tooltip);\n\n this._elements = { overlay, tooltip };\n\n // ESC to close\n const escHandler = (e) => { if (e.key === 'Escape') this.stop(); };\n document.addEventListener('keydown', escHandler);\n this._cleanup.push(() => document.removeEventListener('keydown', escHandler));\n\n // Overlay click to close\n overlay.addEventListener('click', () => this.stop());\n\n this._showStep(this._currentStep);\n },\n\n _showStep: function (index) {\n const step = this._steps[index];\n if (!step) return;\n\n const target = typeof step.target === 'string' ? document.querySelector(step.target) : step.target;\n const { tooltip } = this._elements;\n\n // Remove previous highlight\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n // Highlight target\n if (target) {\n target.classList.add('vd-spotlight-target');\n target.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n\n // Build tooltip content\n const total = this._steps.length;\n tooltip.innerHTML = '';\n tooltip.removeAttribute('aria-labelledby');\n tooltip.removeAttribute('aria-describedby');\n\n if (step.title) {\n const title = document.createElement('h4');\n title.className = 'vd-spotlight-title';\n title.id = 'vd-spotlight-title-' + index + '-' + Date.now();\n title.textContent = step.title;\n tooltip.appendChild(title);\n tooltip.setAttribute('aria-labelledby', title.id);\n }\n\n if (step.description) {\n const desc = document.createElement('p');\n desc.className = 'vd-spotlight-description';\n desc.id = 'vd-spotlight-description-' + index + '-' + Date.now();\n desc.textContent = step.description;\n tooltip.appendChild(desc);\n tooltip.setAttribute('aria-describedby', desc.id);\n }\n\n // Footer\n const footer = document.createElement('div');\n footer.className = 'vd-spotlight-footer';\n footer.setAttribute('aria-label', 'Step ' + (index + 1) + ' of ' + total);\n\n const counter = document.createElement('span');\n counter.className = 'vd-spotlight-counter';\n counter.textContent = (index + 1) + ' / ' + total;\n\n const actions = document.createElement('div');\n actions.className = 'vd-spotlight-actions';\n\n if (index > 0) {\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-spotlight-btn';\n prevBtn.textContent = 'Back';\n prevBtn.addEventListener('click', () => this.prev());\n actions.appendChild(prevBtn);\n }\n\n const skipBtn = document.createElement('button');\n skipBtn.type = 'button';\n skipBtn.className = 'vd-spotlight-btn';\n skipBtn.textContent = 'Skip';\n skipBtn.addEventListener('click', () => this.stop());\n actions.appendChild(skipBtn);\n\n if (index < total - 1) {\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n nextBtn.textContent = 'Next';\n nextBtn.addEventListener('click', () => this.next());\n actions.appendChild(nextBtn);\n } else {\n const doneBtn = document.createElement('button');\n doneBtn.type = 'button';\n doneBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n doneBtn.textContent = 'Done';\n doneBtn.addEventListener('click', () => this.stop());\n actions.appendChild(doneBtn);\n }\n\n footer.appendChild(counter);\n footer.appendChild(actions);\n tooltip.appendChild(footer);\n\n // Position tooltip near target\n if (target) {\n requestAnimationFrame(() => {\n const rect = target.getBoundingClientRect();\n const tRect = tooltip.getBoundingClientRect();\n let top = rect.bottom + 12 + window.scrollY;\n let left = rect.left + (rect.width - tRect.width) / 2 + window.scrollX;\n\n // Keep in viewport\n left = Math.max(8, Math.min(left, window.innerWidth - tRect.width - 8));\n if (top + tRect.height > window.innerHeight + window.scrollY) {\n top = rect.top - tRect.height - 12 + window.scrollY;\n }\n\n tooltip.style.top = top + 'px';\n tooltip.style.left = left + 'px';\n });\n }\n\n document.dispatchEvent(new CustomEvent('spotlight:step', {\n detail: { index, step: index, total, data: step }\n }));\n },\n\n next: function () {\n if (this._currentStep < this._steps.length - 1) {\n this._currentStep++;\n this._showStep(this._currentStep);\n }\n },\n\n prev: function () {\n if (this._currentStep > 0) {\n this._currentStep--;\n this._showStep(this._currentStep);\n }\n },\n\n stop: function () {\n if (!this._active) return;\n\n const total = this._steps.length;\n const detail = {\n completedSteps: total === 0 ? 0 : Math.min(this._currentStep + 1, total),\n total,\n completed: total > 0 && this._currentStep >= total - 1\n };\n\n this._active = false;\n\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n if (this._elements.overlay && this._elements.overlay.parentNode) {\n this._elements.overlay.parentNode.removeChild(this._elements.overlay);\n }\n if (this._elements.tooltip && this._elements.tooltip.parentNode) {\n this._elements.tooltip.parentNode.removeChild(this._elements.tooltip);\n }\n\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n this._elements = {};\n this._steps = [];\n this._currentStep = 0;\n\n if (this._triggerElement && this._triggerElement.isConnected && typeof this._triggerElement.focus === 'function') {\n this._triggerElement.focus();\n }\n this._triggerElement = null;\n\n document.dispatchEvent(new CustomEvent('spotlight:end', { detail }));\n },\n\n destroyAll: function () {\n this.stop();\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('spotlight', Spotlight);\n }\n\n window.VanduoSpotlight = Spotlight;\n\n})();\n", "/**\n * Vanduo Framework - Music Player Component\n * HTML5 Audio-based music player with transport controls, volume,\n * and optional shuffle, seek bar, and playlist features.\n *\n * Options (passed to MusicPlayer.init or data-music-player-options):\n * tracks {Array} - [{name, url}] \u2014 required\n * volume {number} - Initial volume 0\u20131 (default 0.5)\n * shuffle {boolean} - Shuffle on init (default false)\n * showProgress {boolean} - Show seek/progress bar (default false)\n * showPlaylist {boolean} - Show expandable playlist panel (default false)\n * autoAdvance {boolean} - Auto-play next track on end (default true)\n *\n * Custom events (all bubble, dispatched on container):\n * musicplayer:play \u2014 playback started\n * musicplayer:pause \u2014 playback paused\n * musicplayer:trackchange \u2014 detail: { index, name, url }\n * musicplayer:volumechange \u2014 detail: { volume }\n * musicplayer:ended \u2014 last track ended (autoAdvance=false only)\n *\n * Programmatic API:\n * MusicPlayer.init(container?, options?)\n * MusicPlayer.play(container)\n * MusicPlayer.pause(container)\n * MusicPlayer.toggle(container)\n * MusicPlayer.next(container)\n * MusicPlayer.previous(container)\n * MusicPlayer.setVolume(container, value)\n * MusicPlayer.setTrack(container, index)\n * MusicPlayer.shuffle(container)\n * MusicPlayer.getState(container)\n * MusicPlayer.destroy(container)\n * MusicPlayer.destroyAll()\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fisher-Yates shuffle (returns new array).\n * @param {Array} arr\n * @returns {Array}\n */\n function shuffleArray(arr) {\n const shuffled = arr.slice();\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n const tmp = shuffled[i];\n shuffled[i] = shuffled[j];\n shuffled[j] = tmp;\n }\n return shuffled;\n }\n\n /**\n * Format seconds as m:ss.\n * @param {number} seconds\n * @returns {string}\n */\n function formatTime(seconds) {\n if (!isFinite(seconds) || seconds < 0) return '0:00';\n const m = Math.floor(seconds / 60);\n const s = Math.floor(seconds % 60);\n return m + ':' + (s < 10 ? '0' : '') + s;\n }\n\n /**\n * Set CSS background-size on a range input to visually fill the track.\n * @param {HTMLInputElement} input\n */\n function updateRangeFill(input) {\n const min = parseFloat(input.min) || 0;\n const max = parseFloat(input.max) || 1;\n const val = parseFloat(input.value) || 0;\n const pct = ((val - min) / (max - min)) * 100;\n input.style.setProperty('--fill', pct + '%');\n // Fallback inline gradient for browsers without ::-moz-range-progress\n input.style.backgroundImage =\n 'linear-gradient(to right, var(--music-player-track-fill, currentColor) 0%, ' +\n 'var(--music-player-track-fill, currentColor) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) 100%)';\n }\n\n /* \u2500\u2500\u2500 Phosphor icon helper (matches framework icon style) \u2500 */\n\n /**\n * Return an element (Phosphor icon).\n * @param {string} name\n * @returns {HTMLElement}\n */\n function icon(name) {\n const el = document.createElement('i');\n el.className = 'ph ph-' + name;\n el.setAttribute('aria-hidden', 'true');\n return el;\n }\n\n /* \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const MusicPlayer = {\n /** @type {Map} */\n instances: new Map(),\n\n /**\n * Default options.\n */\n defaults: {\n tracks: [],\n volume: 0.5,\n shuffle: false,\n showProgress: false,\n showPlaylist: false,\n autoAdvance: true,\n },\n\n /**\n * Auto-initialize all .vd-music-player / [data-music-player] elements.\n * Options can be provided via data-music-player-options (JSON string).\n */\n init: function () {\n document.querySelectorAll('.vd-music-player, [data-music-player]').forEach((el) => {\n if (this.instances.has(el)) return;\n\n let opts = {};\n const attr = el.getAttribute('data-music-player-options');\n if (attr) {\n try { opts = JSON.parse(attr); } catch (_) { /* ignore malformed JSON */ }\n }\n this.initPlayer(el, opts);\n });\n },\n\n /**\n * Initialize a single player element.\n * @param {HTMLElement} container\n * @param {Object} [options]\n */\n initPlayer: function (container, options) {\n const opts = Object.assign({}, this.defaults, options || {});\n\n // Validate and normalise tracks\n const rawTracks = Array.isArray(opts.tracks) ? opts.tracks : [];\n const tracks = rawTracks.filter((t) => t && typeof t.url === 'string' && t.url.trim());\n\n // Build shuffled working copy without mutating opts\n const trackList = opts.shuffle ? shuffleArray(tracks) : tracks.slice();\n\n /* \u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const state = {\n tracks: trackList,\n originalTracks: tracks.slice(),\n currentIndex: 0,\n isPlaying: false,\n volume: Math.max(0, Math.min(1, opts.volume)),\n shuffle: opts.shuffle,\n showProgress: opts.showProgress,\n showPlaylist: opts.showPlaylist,\n autoAdvance: opts.autoAdvance,\n audio: null,\n };\n\n /* \u2500\u2500 Audio element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const audio = new Audio();\n audio.volume = state.volume;\n audio.preload = 'metadata';\n state.audio = audio;\n\n /* \u2500\u2500 Build DOM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n this._buildDOM(container, state);\n\n // Grab references after DOM build\n const refs = {\n btnPlay: container.querySelector('.vd-music-player-btn-play'),\n btnPrev: container.querySelector('.vd-music-player-btn-prev'),\n btnNext: container.querySelector('.vd-music-player-btn-next'),\n btnShuffle: container.querySelector('.vd-music-player-btn-shuffle'),\n btnPlaylist: container.querySelector('.vd-music-player-btn-playlist'),\n trackName: container.querySelector('.vd-music-player-track-name'),\n volumeSlider: container.querySelector('.vd-music-player-volume-slider'),\n volumeIcon: container.querySelector('.vd-music-player-volume-icon'),\n progressBar: container.querySelector('.vd-music-player-progress-bar'),\n timeElapsed: container.querySelector('.vd-music-player-time-elapsed'),\n timeDuration: container.querySelector('.vd-music-player-time-duration'),\n playlistPanel: container.querySelector('.vd-music-player-playlist'),\n };\n\n /* \u2500\u2500 Internal render helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const renderPlayIcon = () => {\n const btn = refs.btnPlay;\n if (!btn) return;\n btn.innerHTML = '';\n btn.appendChild(icon(state.isPlaying ? 'pause' : 'play'));\n btn.setAttribute('aria-label', state.isPlaying ? 'Pause' : 'Play');\n btn.classList.toggle('is-active', state.isPlaying);\n };\n\n const renderTrackName = () => {\n const el = refs.trackName;\n if (!el) return;\n const track = state.tracks[state.currentIndex];\n if (track) {\n el.textContent = track.name || 'Unknown Track';\n el.classList.remove('is-idle');\n } else {\n el.textContent = 'No tracks loaded';\n el.classList.add('is-idle');\n }\n };\n\n const renderVolumeIcon = () => {\n const el = refs.volumeIcon;\n if (!el) return;\n el.innerHTML = '';\n const v = state.volume;\n const name = v === 0 ? 'speaker-none' : v < 0.5 ? 'speaker-low' : 'speaker-high';\n el.appendChild(icon(name));\n };\n\n const renderShuffleBtn = () => {\n const btn = refs.btnShuffle;\n if (!btn) return;\n btn.classList.toggle('is-active', state.shuffle);\n btn.setAttribute('aria-pressed', state.shuffle ? 'true' : 'false');\n };\n\n const renderPlaylistItems = () => {\n const panel = refs.playlistPanel;\n if (!panel) return;\n panel.innerHTML = '';\n state.tracks.forEach((track, i) => {\n const item = document.createElement('button');\n item.className =\n 'vd-music-player-playlist-item' + (i === state.currentIndex ? ' is-active' : '');\n item.type = 'button';\n item.setAttribute('data-index', String(i));\n item.setAttribute('aria-current', i === state.currentIndex ? 'true' : 'false');\n\n const num = document.createElement('span');\n num.className = 'vd-music-player-playlist-num';\n num.textContent = String(i + 1);\n\n const name = document.createElement('span');\n name.className = 'vd-music-player-playlist-name';\n name.textContent = track.name || 'Track ' + (i + 1);\n\n item.appendChild(num);\n item.appendChild(name);\n panel.appendChild(item);\n });\n };\n\n const renderProgress = () => {\n const bar = refs.progressBar;\n if (!bar || !audio.duration) return;\n const pct = (audio.currentTime / audio.duration) * 100;\n bar.value = String(pct);\n updateRangeFill(bar);\n if (refs.timeElapsed) refs.timeElapsed.textContent = formatTime(audio.currentTime);\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n };\n\n /* \u2500\u2500 Load track \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const loadTrack = (index, autoPlay) => {\n const track = state.tracks[index];\n if (!track) return;\n state.currentIndex = index;\n audio.src = track.url;\n renderTrackName();\n renderPlaylistItems();\n\n // Reset progress\n if (refs.progressBar) {\n refs.progressBar.value = '0';\n updateRangeFill(refs.progressBar);\n }\n if (refs.timeElapsed) refs.timeElapsed.textContent = '0:00';\n if (refs.timeDuration) refs.timeDuration.textContent = '0:00';\n\n container.dispatchEvent(\n new CustomEvent('musicplayer:trackchange', {\n bubbles: true,\n detail: { index, name: track.name, url: track.url },\n })\n );\n\n if (autoPlay) {\n audio.play().catch(() => { /* browser may block autoplay */ });\n }\n };\n\n /* \u2500\u2500 Audio event listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const cleanupFunctions = [];\n\n const onPlay = () => {\n state.isPlaying = true;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:play', { bubbles: true }));\n };\n\n const onPause = () => {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:pause', { bubbles: true }));\n };\n\n const onEnded = () => {\n if (state.autoAdvance && state.tracks.length > 1) {\n const next = (state.currentIndex + 1) % state.tracks.length;\n loadTrack(next, true);\n } else {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:ended', { bubbles: true }));\n }\n };\n\n const onTimeUpdate = () => {\n if (state.showProgress) renderProgress();\n };\n\n const onLoadedMetadata = () => {\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n if (refs.progressBar) {\n refs.progressBar.max = '100';\n updateRangeFill(refs.progressBar);\n }\n };\n\n audio.addEventListener('play', onPlay);\n audio.addEventListener('pause', onPause);\n audio.addEventListener('ended', onEnded);\n audio.addEventListener('timeupdate', onTimeUpdate);\n audio.addEventListener('loadedmetadata', onLoadedMetadata);\n cleanupFunctions.push(() => {\n audio.removeEventListener('play', onPlay);\n audio.removeEventListener('pause', onPause);\n audio.removeEventListener('ended', onEnded);\n audio.removeEventListener('timeupdate', onTimeUpdate);\n audio.removeEventListener('loadedmetadata', onLoadedMetadata);\n audio.pause();\n audio.src = '';\n });\n\n /* \u2500\u2500 Control button listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n if (refs.btnPlay) {\n const handler = () => {\n if (!audio.src && state.tracks.length) loadTrack(state.currentIndex, false);\n if (state.isPlaying) {\n audio.pause();\n } else {\n audio.play().catch(() => {});\n }\n };\n refs.btnPlay.addEventListener('click', handler);\n cleanupFunctions.push(() => refs.btnPlay.removeEventListener('click', handler));\n\n // Keyboard: Space / Enter (already native for `;let s="";for(let[o,r]of Object.entries(this.NEUTRAL_COLORS))s+=``;let i="";this.RADIUS_OPTIONS.forEach(o=>{i+=``});let a="";for(let[o,r]of Object.entries(this.FONT_OPTIONS))a+=``;return` +`).length,i=document.createElement("div");i.className="vd-code-snippet-line-numbers",i.setAttribute("aria-hidden","true");for(let o=1;o<=s;o++){let r=document.createElement("span");r.textContent=o,i.appendChild(r)}let a=document.createElement("div");a.className="vd-code-snippet-code",a.appendChild(t.cloneNode(!0)),t.parentNode.removeChild(t),e.appendChild(i),e.appendChild(a)},expand:function(e){if(typeof e=="string"&&(e=document.querySelector(e)),!e)return;e.dataset.expanded="true";let t=e.querySelector(".vd-code-snippet-toggle"),n=e.querySelector(".vd-code-snippet-content");t&&t.setAttribute("aria-expanded","true"),n&&(n.dataset.visible="true")},collapse:function(e){if(typeof e=="string"&&(e=document.querySelector(e)),!e)return;e.dataset.expanded="false";let t=e.querySelector(".vd-code-snippet-toggle"),n=e.querySelector(".vd-code-snippet-content");t&&t.setAttribute("aria-expanded","false"),n&&(n.dataset.visible="false")},showLang:function(e,t){if(typeof e=="string"&&(e=document.querySelector(e)),!e)return;let n=e.querySelector(`.vd-code-snippet-tab[data-lang="${t}"]`),s=e.querySelectorAll(".vd-code-snippet-tab"),i=e.querySelectorAll(".vd-code-snippet-pane");n&&this.switchTab(e,n,s,i)},destroy:function(e){typeof e=="string"&&(e=document.querySelector(e)),e&&(e._codeSnippetCleanup&&(e._codeSnippetCleanup.forEach(t=>t()),delete e._codeSnippetCleanup),delete e.dataset.initialized)},destroyAll:function(){document.querySelectorAll('.vd-code-snippet[data-initialized="true"]').forEach(t=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("codeSnippet",m),window.CodeSnippet=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll(".vd-collapsible, .accordion").forEach(t=>{this.instances.has(t)||this.initCollapsible(t)})},initCollapsible:function(e){let t=e.classList.contains("accordion"),n=e.querySelectorAll(".vd-collapsible-item, .accordion-item"),s=[];n.forEach(i=>{let a=i.querySelector(".vd-collapsible-header, .accordion-header"),o=i.querySelector(".vd-collapsible-body, .accordion-body"),r=i.querySelector(".vd-collapsible-trigger, .accordion-trigger")||a;if(!a||!o)return;i.classList.contains("is-open")?this.openItem(i,o,!1):this.closeItem(i,o,!1);let l=d=>{d.preventDefault(),this.toggleItem(i,o,e,t)};r.addEventListener("click",l),s.push(()=>r.removeEventListener("click",l))}),this.instances.set(e,{cleanup:s})},toggleItem:function(e,t,n,s){e.classList.contains("is-open")?this.closeItem(e,t):(s&&n.querySelectorAll(".vd-collapsible-item.is-open, .accordion-item.is-open").forEach(o=>{if(o!==e){let r=o.querySelector(".vd-collapsible-body, .accordion-body");this.closeItem(o,r)}}),this.openItem(e,t))},openItem:function(e,t,n=!0){n||(t.style.transition="none"),e.classList.add("is-open"),e.setAttribute("aria-expanded","true");let s=t.scrollHeight;t.style.maxHeight=`${s}px`,n||setTimeout(()=>{t.style.transition=""},0),e.dispatchEvent(new CustomEvent("collapsible:open",{bubbles:!0}))},closeItem:function(e,t,n=!0){n||(t.style.transition="none"),e.classList.remove("is-open"),e.setAttribute("aria-expanded","false"),t.style.maxHeight="0",n||setTimeout(()=>{t.style.transition=""},0),e.dispatchEvent(new CustomEvent("collapsible:close",{bubbles:!0}))},open:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t){let n=t.querySelector(".vd-collapsible-body, .accordion-body");n&&this.openItem(t,n)}},close:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t){let n=t.querySelector(".vd-collapsible-body, .accordion-body");n&&this.closeItem(t,n)}},toggle:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t){let n=t.querySelector(".vd-collapsible-body, .accordion-body"),s=t.closest(".vd-collapsible, .accordion"),i=s&&s.classList.contains("accordion");n&&this.toggleItem(t,n,s,i)}},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>{this.destroy(t)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("collapsible",m),window.VanduoCollapsible=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll(".vd-dropdown").forEach(t=>{this.instances.has(t)||this.initDropdown(t)})},initDropdown:function(e){let t=e.querySelector(".vd-dropdown-toggle"),n=e.querySelector(".vd-dropdown-menu");if(!t||!n)return;let s=[];t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-expanded","false"),n.setAttribute("role","menu"),n.setAttribute("aria-hidden","true");let i=l=>{l.preventDefault(),l.stopPropagation(),this.toggleDropdown(e,t,n)};t.addEventListener("click",i),s.push(()=>t.removeEventListener("click",i));let a=l=>{!e.contains(l.target)&&n.classList.contains("is-open")&&this.closeDropdown(e,t,n)};document.addEventListener("click",a),s.push(()=>document.removeEventListener("click",a));let o=l=>{this.handleKeydown(l,e,t,n)};t.addEventListener("keydown",o),s.push(()=>t.removeEventListener("keydown",o)),n.querySelectorAll(".vd-dropdown-item:not(.disabled):not(.is-disabled)").forEach(l=>{let d=u=>{u.preventDefault(),this.selectItem(l,e,t,n)};l.addEventListener("click",d),s.push(()=>l.removeEventListener("click",d));let c=u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),this.selectItem(l,e,t,n))};l.addEventListener("keydown",c),s.push(()=>l.removeEventListener("keydown",c))}),this.instances.set(e,{toggle:t,menu:n,cleanup:s,typeaheadBuffer:"",typeaheadTimer:null})},toggleDropdown:function(e,t,n){n.classList.contains("is-open")?this.closeDropdown(e,t,n):this.openDropdown(e,t,n)},openDropdown:function(e,t,n){document.querySelectorAll(".vd-dropdown-menu.is-open").forEach(a=>{if(a!==n){let o=a.closest(".vd-dropdown"),r=o.querySelector(".vd-dropdown-toggle");this.closeDropdown(o,r,a)}}),e.classList.add("is-open"),n.classList.add("is-open"),t.setAttribute("aria-expanded","true"),n.setAttribute("aria-hidden","false"),this.positionMenu(e,n);let i=n.querySelector(".vd-dropdown-item:not(.disabled):not(.is-disabled)");i&&setTimeout(()=>i.focus(),0)},closeDropdown:function(e,t,n){e.classList.remove("is-open"),n.classList.remove("is-open"),t.setAttribute("aria-expanded","false"),n.setAttribute("aria-hidden","true"),t.focus()},positionMenu:function(e,t){let n=e.getBoundingClientRect(),s=t.getBoundingClientRect(),i=window.innerWidth,a=window.innerHeight,o=8;n.left+s.width>i-o&&(t.classList.add("vd-dropdown-menu-end"),t.classList.remove("vd-dropdown-menu-start")),t.classList.contains("dropdown-menu-top")?n.top-s.heighta-o&&t.classList.add("vd-dropdown-menu-top")},handleKeydown:function(e,t,n,s){let i=s.classList.contains("is-open"),a=Array.from(s.querySelectorAll(".vd-dropdown-item:not(.disabled):not(.is-disabled)")),o=a.findIndex(r=>r===document.activeElement);switch(e.key){case"Enter":case" ":case"ArrowDown":if(e.preventDefault(),!i)this.openDropdown(t,n,s);else if(e.key==="ArrowDown"){let r=o0?o-1:a.length-1;a[r].focus()}break;case"Escape":i&&(e.preventDefault(),this.closeDropdown(t,n,s));break;case"Home":i&&(e.preventDefault(),a[0].focus());break;case"End":i&&(e.preventDefault(),a[a.length-1].focus());break;default:if(i&&e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey){let r=this.instances.get(t);if(!r)break;clearTimeout(r.typeaheadTimer),r.typeaheadBuffer+=e.key.toLowerCase();let l=a.find(d=>d.textContent.trim().toLowerCase().startsWith(r.typeaheadBuffer));l&&l.focus(),r.typeaheadTimer=setTimeout(()=>{r.typeaheadBuffer=""},500)}break}},selectItem:function(e,t,n,s){s.querySelectorAll(".vd-dropdown-item").forEach(i=>{i.classList.remove("active","is-active")}),e.classList.add("active","is-active"),(n.tagName==="BUTTON"||n.classList.contains("btn"))&&(n.textContent=e.textContent.trim()),this.closeDropdown(t,n,s),e.dispatchEvent(new CustomEvent("dropdown:select",{bubbles:!0,detail:{item:e,value:e.dataset.value||e.textContent}}))},open:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t){let n=t.querySelector(".vd-dropdown-toggle"),s=t.querySelector(".vd-dropdown-menu");n&&s&&this.openDropdown(t,n,s)}},close:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t){let n=t.querySelector(".vd-dropdown-toggle"),s=t.querySelector(".vd-dropdown-menu");n&&s&&this.closeDropdown(t,n,s)}},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>{this.destroy(t)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("dropdown",m),window.VanduoDropdown=m})();(function(){"use strict";let m={STORAGE_KEY:"vanduo-font-preference",isInitialized:!1,fonts:{system:{name:"System Default",family:null},inter:{name:"Inter",family:"'Inter', sans-serif"},"source-sans":{name:"Source Sans 3",family:"'Source Sans 3', sans-serif"},"fira-sans":{name:"Fira Sans",family:"'Fira Sans', sans-serif"},"ibm-plex":{name:"IBM Plex Sans",family:"'IBM Plex Sans', sans-serif"},"jetbrains-mono":{name:"JetBrains Mono",family:"'JetBrains Mono', monospace"},ubuntu:{name:"Ubuntu",family:"'Ubuntu', sans-serif",category:"sans-serif",description:"Friendly, humanist sans-serif"},"open-sans":{name:"Open Sans",family:"'Open Sans', sans-serif",category:"sans-serif",description:"Neutral, highly readable"},rubik:{name:"Rubik",family:"'Rubik', sans-serif",category:"sans-serif",description:"Modern, geometric"},"titillium-web":{name:"Titillium Web",family:"'Titillium Web', sans-serif",category:"sans-serif",description:"Technical, elegant"}},init:function(){if(this.state={preference:this.getPreference()},this.isInitialized){this.applyFont(),this.renderUI(),this.updateUI();return}this.isInitialized=!0,this.applyFont(),this.renderUI(),console.log("Vanduo Font Switcher initialized")},getPreference:function(){return this.getStorageValue(this.STORAGE_KEY,"ubuntu")},setPreference:function(e){if(!this.fonts[e]){console.warn("Unknown font:",e);return}this.state.preference=e,this.setStorageValue(this.STORAGE_KEY,e),this.applyFont(),this.updateUI();let t=new CustomEvent("font:change",{bubbles:!0,detail:{font:e,fontData:this.fonts[e]}});document.dispatchEvent(t)},applyFont:function(){let e=this.state.preference;e==="system"?document.documentElement.removeAttribute("data-font"):document.documentElement.setAttribute("data-font",e)},renderUI:function(){document.querySelectorAll('[data-toggle="font"]').forEach(t=>{if(t.getAttribute("data-font-initialized")==="true"){t.tagName==="SELECT"&&(t.value=this.state.preference);return}if(t.tagName==="SELECT"){t.value=this.state.preference;let n=s=>{this.setPreference(s.target.value)};t.addEventListener("change",n),t._fontToggleHandler=n}else{let n=()=>{let s=Object.keys(this.fonts),a=(s.indexOf(this.state.preference)+1)%s.length;this.setPreference(s[a])};t.addEventListener("click",n),t._fontToggleHandler=n}t.setAttribute("data-font-initialized","true")})},updateUI:function(){document.querySelectorAll('[data-toggle="font"]').forEach(t=>{if(t.tagName==="SELECT")t.value=this.state.preference;else{let n=t.querySelector(".font-current-label");n&&(n.textContent=this.fonts[this.state.preference].name)}})},getCurrentFont:function(){return this.state.preference},getFontData:function(e){return this.fonts[e]||null},destroyAll:function(){document.querySelectorAll('[data-toggle="font"][data-font-initialized="true"]').forEach(t=>{if(t._fontToggleHandler){let n=t.tagName==="SELECT"?"change":"click";t.removeEventListener(n,t._fontToggleHandler),delete t._fontToggleHandler}t.removeAttribute("data-font-initialized")}),this.isInitialized=!1},getStorageValue:function(e,t){if(typeof window.safeStorageGet=="function")return window.safeStorageGet(e,t);try{let n=localStorage.getItem(e);return n!==null?n:t}catch{return t}},setStorageValue:function(e,t){if(typeof window.safeStorageSet=="function")return window.safeStorageSet(e,t);try{return localStorage.setItem(e,t),!0}catch{return!1}}};window.Vanduo&&window.Vanduo.register("fontSwitcher",m),window.FontSwitcher=m})();(function(){"use strict";let m=(function(){try{return CSS.supports("selector(:has(*))")}catch{return!1}})(),e={instances:new Map,init:function(){document.querySelectorAll("[data-layout-mode]").forEach(function(n){this.instances.has(n)||this.initContainer(n)}.bind(this)),this.initToggleButtons()},initContainer:function(t){let n=t.getAttribute("data-layout-mode")||"standard",s=[];this.applyMode(t,n),t.setAttribute("role","region"),t.setAttribute("aria-label","Grid layout: "+n+" mode"),this.instances.set(t,{cleanup:s,mode:n})},initToggleButtons:function(){document.querySelectorAll("[data-grid-toggle]").forEach(function(n){if(n.getAttribute("data-grid-initialized")==="true")return;let s=function(i){i.preventDefault();let a=n.getAttribute("data-grid-toggle"),o;a?o=document.querySelector(a):o=n.closest("[data-layout-mode]"),o&&this.toggle(o)}.bind(this);n.addEventListener("click",s),n.setAttribute("data-grid-initialized","true"),n.setAttribute("aria-pressed","false"),n._gridCleanup=function(){n.removeEventListener("click",s),n.removeAttribute("data-grid-initialized"),n.removeAttribute("aria-pressed")}}.bind(this))},applyFibFallback:function(t){if(m)return;t.querySelectorAll(".vd-row, .row").forEach(function(s){let a=s.querySelectorAll(':scope > [class*="vd-col-"], :scope > [class*="col-"]').length;a===1?s.style.gridTemplateColumns="1fr":a===2?s.style.gridTemplateColumns="1fr 1.618fr":a===3?s.style.gridTemplateColumns="2fr 3fr 5fr":a===4?s.style.gridTemplateColumns="1fr 2fr 3fr 5fr":s.style.gridTemplateColumns="repeat("+a+", 1fr)"})},removeFibFallback:function(t){t.querySelectorAll(".vd-row, .row").forEach(function(s){s.style.gridTemplateColumns=""})},applyMode:function(t,n){t.classList.remove("vd-grid-standard","vd-grid-fibonacci"),n==="fibonacci"?(t.classList.add("vd-grid-fibonacci"),this.applyFibFallback(t)):(t.classList.add("vd-grid-standard"),this.removeFibFallback(t)),t.setAttribute("data-layout-mode",n),t.setAttribute("aria-label","Grid layout: "+n+" mode"),document.querySelectorAll("[data-grid-toggle]").forEach(function(o){let r=o.getAttribute("data-grid-toggle");if(r&&t.matches(r)){let l=n==="fibonacci";l?o.classList.add("is-active"):o.classList.remove("is-active"),o.setAttribute("aria-pressed",l?"true":"false")}});let i=this.instances.get(t);i&&(i.mode=n);let a;try{a=new CustomEvent("grid:modechange",{bubbles:!0,detail:{container:t,mode:n}})}catch{a=document.createEvent("CustomEvent"),a.initCustomEvent("grid:modechange",!0,!0,{container:t,mode:n})}t.dispatchEvent(a)},toggle:function(t){if(typeof t=="string"&&(t=document.querySelector(t)),!t)return;let s=(t.getAttribute("data-layout-mode")||"standard")==="fibonacci"?"standard":"fibonacci";this.applyMode(t,s)},setMode:function(t,n){typeof t=="string"&&(t=document.querySelector(t)),t&&(n!=="fibonacci"&&n!=="standard"||this.applyMode(t,n))},getMode:function(t){return typeof t=="string"&&(t=document.querySelector(t)),t?t.getAttribute("data-layout-mode")||"standard":null},destroy:function(t){let n=this.instances.get(t);n&&(n.cleanup.forEach(function(s){s()}),t.classList.remove("vd-grid-standard","vd-grid-fibonacci"),t.removeAttribute("aria-label"),this.removeFibFallback(t),this.instances.delete(t))},destroyAll:function(){this.instances.forEach(function(n,s){this.destroy(s)}.bind(this)),document.querySelectorAll('[data-grid-initialized="true"]').forEach(function(n){n._gridCleanup&&(n._gridCleanup(),delete n._gridCleanup)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("gridLayout",e),window.VanduoGridLayout=e})();(function(){"use strict";let m={backdrop:null,container:null,img:null,closeBtn:null,caption:null,currentTrigger:null,scrollThreshold:50,initialScrollY:0,isOpen:!1,_cleanupFunctions:[],init:function(){this.createBackdrop(),this.bindTriggers()},createBackdrop:function(){if(this.backdrop||document.querySelector(".vd-image-box-backdrop")){this.backdrop||(this.backdrop=document.querySelector(".vd-image-box-backdrop"),this.container=this.backdrop.querySelector(".vd-image-box-container"),this.img=this.backdrop.querySelector(".vd-image-box-img"),this.closeBtn=this.backdrop.querySelector(".vd-image-box-close"),this.caption=this.backdrop.querySelector(".vd-image-box-caption"),this.bindBackdropEvents());return}this.backdrop=document.createElement("div"),this.backdrop.className="vd-image-box-backdrop",this.backdrop.setAttribute("role","dialog"),this.backdrop.setAttribute("aria-modal","true"),this.backdrop.setAttribute("aria-label","Image viewer"),this.backdrop.setAttribute("tabindex","-1"),this.container=document.createElement("div"),this.container.className="vd-image-box-container",this.img=document.createElement("img"),this.img.className="vd-image-box-img",this.img.alt="",this.closeBtn=document.createElement("button"),this.closeBtn.className="vd-image-box-close",this.closeBtn.setAttribute("aria-label","Close image viewer"),this.closeBtn.innerHTML="×",this.caption=document.createElement("div"),this.caption.className="vd-image-box-caption",this.container.appendChild(this.img),this.backdrop.appendChild(this.closeBtn),this.backdrop.appendChild(this.container),this.backdrop.appendChild(this.caption),document.body.appendChild(this.backdrop),this.bindBackdropEvents()},bindBackdropEvents:function(){let e=this,t=function(o){(o.target===e.backdrop||o.target===e.container)&&e.close()};this.backdrop.addEventListener("click",t),this._cleanupFunctions.push(()=>this.backdrop.removeEventListener("click",t));let n=function(){e.close()};this.img.addEventListener("click",n),this._cleanupFunctions.push(()=>this.img.removeEventListener("click",n));let s=function(){e.close()};this.closeBtn.addEventListener("click",s),this._cleanupFunctions.push(()=>this.closeBtn.removeEventListener("click",s));let i=function(o){o.key==="Escape"&&e.isOpen&&e.close()};document.addEventListener("keydown",i),this._cleanupFunctions.push(()=>document.removeEventListener("keydown",i));let a=function(){if(!e.isOpen)return;let o=window.scrollY;Math.abs(o-e.initialScrollY)>e.scrollThreshold&&e.close()};window.addEventListener("scroll",a,{passive:!0}),this._cleanupFunctions.push(()=>window.removeEventListener("scroll",a))},bindTriggers:function(){let e=this;document.querySelectorAll("[data-image-box]").forEach(function(n){if(n.dataset.imageBoxInitialized)return;if(n.dataset.imageBoxInitialized="true",n.classList.add("vd-image-box-trigger"),n.tagName==="IMG"){n.complete&&n.naturalWidth===0&&n.classList.add("is-broken");let i=function(){n.classList.add("is-broken")};n.addEventListener("error",i);let a=function(){n.classList.remove("is-broken")};n.addEventListener("load",a)}let s=function(i){i.preventDefault(),e.open(n)};if(n.addEventListener("click",s),n._imageBoxCleanup=()=>n.removeEventListener("click",s),n.tagName!=="BUTTON"&&n.tagName!=="A"){n.setAttribute("role","button"),n.setAttribute("tabindex","0"),n.setAttribute("aria-label","View enlarged image");let i=function(o){(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),e.open(n))};n.addEventListener("keydown",i);let a=n._imageBoxCleanup;n._imageBoxCleanup=()=>{a(),n.removeEventListener("keydown",i)}}})},open:function(e){if(this.isOpen)return;this.currentTrigger=e,this.isOpen=!0,this.initialScrollY=window.scrollY;let t=e.dataset.imageBoxFullSrc||e.dataset.imageBoxSrc||e.src||e.href;if(!t){console.warn("[Vanduo ImageBox] No image source found for trigger:",e);return}let n=e.dataset.imageBoxCaption||e.alt||"";this.img.src=t,this.img.alt=e.alt||"",n?(this.caption.textContent=n,this.caption.style.display="block"):this.caption.style.display="none";let s=window.innerWidth-document.documentElement.clientWidth;document.body.style.setProperty("--scrollbar-width",`${s}px`),document.body.classList.add("body-image-box-open"),this.backdrop.classList.add("is-visible"),this.backdrop.focus(),e.dispatchEvent(new CustomEvent("imageBox:open",{bubbles:!0,detail:{src:t}})),this.img.complete||(this.img.style.opacity="0",this._imgLoadHandler=()=>{this.img.style.opacity=""},this.img.addEventListener("load",this._imgLoadHandler,{once:!0}))},close:function(){this.isOpen&&(this.isOpen=!1,this.backdrop.classList.remove("is-visible"),document.body.classList.remove("body-image-box-open"),document.body.style.removeProperty("--scrollbar-width"),this.currentTrigger&&(this.currentTrigger.focus(),this.currentTrigger.dispatchEvent(new CustomEvent("imageBox:close",{bubbles:!0})),this.currentTrigger=null),setTimeout(()=>{this.isOpen||(this._imgLoadHandler&&(this.img.removeEventListener("load",this._imgLoadHandler),this._imgLoadHandler=null),this.img.src="",this.img.alt="")},300))},reinit:function(){this.bindTriggers()},destroy:function(){this.isOpen&&this.close(),this.backdrop&&this.backdrop.parentNode&&this.backdrop.parentNode.removeChild(this.backdrop),this._cleanupFunctions.forEach(t=>t()),this._cleanupFunctions=[],document.querySelectorAll("[data-image-box-initialized]").forEach(t=>{t.classList.remove("vd-image-box-trigger"),t._imageBoxCleanup&&(t._imageBoxCleanup(),delete t._imageBoxCleanup),delete t.dataset.imageBoxInitialized}),this.backdrop=null,this.container=null,this.img=null,this.closeBtn=null,this.caption=null,this.currentTrigger=null,this.isOpen=!1},destroyAll:function(){this.destroy()}};typeof window.Vanduo<"u"&&window.Vanduo.register("imageBox",m),window.VanduoImageBox=m})();(function(){"use strict";let m={modals:new Map,openModals:[],zIndexCounter:1050,_triggerCleanups:[],_sharedEscHandler:null,init:function(){document.querySelectorAll(".vd-modal").forEach(n=>{this.modals.has(n)||this.initModal(n)}),document.querySelectorAll("[data-modal]").forEach(n=>{if(n.dataset.modalTriggerInitialized)return;n.dataset.modalTriggerInitialized="true";let s=i=>{i.preventDefault();let a=n.dataset.modal,o=document.querySelector(a);o&&this.open(o)};n.addEventListener("click",s),this._triggerCleanups.push(()=>n.removeEventListener("click",s))})},initModal:function(e){let t=this.createBackdrop(e),n=e.querySelectorAll('.vd-modal-close, [data-dismiss="modal"]'),s=e.querySelector(".vd-modal-dialog");if(!s)return;let i=[];e.setAttribute("role","dialog"),e.setAttribute("aria-modal","true"),e.setAttribute("aria-hidden","true"),e.id||(e.id="modal-"+Math.random().toString(36).substr(2,9));let a=e.querySelector(".vd-modal-title");a&&!a.id&&(a.id=e.id+"-title",e.setAttribute("aria-labelledby",a.id)),n.forEach(r=>{let l=()=>{this.close(e)};r.addEventListener("click",l),i.push(()=>r.removeEventListener("click",l))});let o=r=>{r.target===t&&e.dataset.backdrop!=="static"&&this.close(e)};t.addEventListener("click",o),i.push(()=>t.removeEventListener("click",o)),this._sharedEscHandler||(this._sharedEscHandler=r=>{if(r.key==="Escape"&&this.openModals.length>0){let l=this.openModals[this.openModals.length-1];l.dataset.keyboard!=="false"&&this.close(l)}},document.addEventListener("keydown",this._sharedEscHandler)),this.modals.set(e,{backdrop:t,dialog:s,trapHandler:null,cleanup:i})},createBackdrop:function(e){let t=e.querySelector(".vd-modal-backdrop");return t||(t=document.createElement("div"),t.className="vd-modal-backdrop",document.body.appendChild(t)),t},open:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(!t){console.warn("[Vanduo Modals] Modal element not found:",e);return}if(!this.modals.has(t)){console.warn("[Vanduo Modals] Modal not initialized:",t);return}let n=this.modals.get(t),{backdrop:s,dialog:i}=n;if(this.zIndexCounter+=10,t.style.zIndex=this.zIndexCounter,s.style.zIndex=this.zIndexCounter-1,this.openModals.push(t),s.classList.add("is-visible"),t.classList.add("is-open"),t.setAttribute("aria-hidden","false"),this.openModals.length===1){document.body.classList.add("body-modal-open");let o=window.innerWidth-document.documentElement.clientWidth;o>0&&(document.body.style.paddingRight=`${o}px`)}let a=this.trapFocus(t);n.trapHandler=a,setTimeout(()=>{let o=this.getFocusableElements(t)[0];o&&o.focus()},100),t.dispatchEvent(new CustomEvent("modal:open",{bubbles:!0}))},close:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(!t){console.warn("[Vanduo Modals] Modal element not found:",e);return}if(!this.modals.has(t)){console.warn("[Vanduo Modals] Modal not initialized:",t);return}let n=this.modals.get(t),{backdrop:s,trapHandler:i}=n;i&&(t.removeEventListener("keydown",i),n.trapHandler=null);let a=this.openModals.indexOf(t);if(a>-1&&this.openModals.splice(a,1),t.classList.remove("is-open"),t.setAttribute("aria-hidden","true"),this.openModals.length===0)s.classList.remove("is-visible"),document.body.classList.remove("body-modal-open"),document.body.style.paddingRight="",this.zIndexCounter=1050;else{let r=this.openModals[this.openModals.length-1];this.modals.get(r).backdrop.classList.add("is-visible")}let o=document.querySelector(`[data-modal="#${t.id}"]`);o&&o.focus(),t.dispatchEvent(new CustomEvent("modal:close",{bubbles:!0}))},trapFocus:function(e){let t=this,n=function(s){if(s.key!=="Tab")return;let i=t.getFocusableElements(e),a=i[0],o=i[i.length-1];s.shiftKey?document.activeElement===a&&(s.preventDefault(),o.focus()):document.activeElement===o&&(s.preventDefault(),a.focus())};return e.addEventListener("keydown",n),n},getFocusableElements:function(e){return Array.from(e.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter(n=>!n.hasAttribute("disabled")&&n.offsetWidth>0&&n.offsetHeight>0)},toggle:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&(t.classList.contains("is-open")?this.close(t):this.open(t))},destroy:function(e){let t=this.modals.get(e);t&&(e.classList.contains("is-open")&&this.close(e),t.cleanup&&t.cleanup.forEach(n=>n()),t.backdrop&&t.backdrop.parentNode&&t.backdrop.parentNode.removeChild(t.backdrop),this.modals.delete(e))},destroyAll:function(){this.modals.forEach((e,t)=>{this.destroy(t)}),this._triggerCleanups.forEach(e=>e()),this._triggerCleanups=[],this._sharedEscHandler&&(document.removeEventListener("keydown",this._sharedEscHandler),this._sharedEscHandler=null)}};typeof window.Vanduo<"u"&&window.Vanduo.register("modals",m),window.VanduoModals=m})();(function(){"use strict";let m={instances:new Map,getBreakpoint:function(){let t=getComputedStyle(document.documentElement).getPropertyValue("--breakpoint-lg").trim(),n=parseInt(t,10);return isNaN(n)?992:n},init:function(){document.querySelectorAll(".vd-navbar").forEach(t=>{this.instances.has(t)||this.initNavbar(t)})},initScrollWatcher:function(e){let t=e.classList.contains("vd-navbar-glass"),n=e.classList.contains("vd-navbar-transparent");if(!t&&!n)return null;let s=()=>{let a=parseInt(e.dataset.scrollThreshold,10);return isNaN(a)?e.offsetHeight||60:a},i=()=>{let a=window.scrollY>s();e.classList.toggle("vd-navbar-scrolled",a)};return i(),window.addEventListener("scroll",i,{passive:!0}),()=>window.removeEventListener("scroll",i)},initNavbar:function(e){let t=e.querySelector(".vd-navbar-toggle, .vd-navbar-burger"),n=e.querySelector(".vd-navbar-menu"),s=e.querySelector(".vd-navbar-overlay")||this.createOverlay(e),i=[],a=this.initScrollWatcher(e);if(a&&i.push(a),!t||!n){i.length&&this.instances.set(e,{toggle:null,menu:null,overlay:null,cleanup:i});return}let o=h=>{h.preventDefault(),h.stopPropagation(),this.toggleMenu(e,t,n,s)};if(t.addEventListener("click",o),i.push(()=>t.removeEventListener("click",o)),s){let h=()=>{this.closeMenu(e,t,n,s)};s.addEventListener("click",h),i.push(()=>s.removeEventListener("click",h))}let r=h=>{h.key==="Escape"&&n.classList.contains("is-open")&&this.closeMenu(e,t,n,s)};document.addEventListener("keydown",r),i.push(()=>document.removeEventListener("keydown",r));let l,d=()=>{clearTimeout(l),l=setTimeout(()=>{let h=this.getBreakpoint();window.innerWidth>=h&&n.classList.contains("is-open")&&this.closeMenu(e,t,n,s)},250)};window.addEventListener("resize",d),i.push(()=>{clearTimeout(l),window.removeEventListener("resize",d)});let c=h=>{n.classList.contains("is-open")&&!e.contains(h.target)&&!n.contains(h.target)&&this.closeMenu(e,t,n,s)};document.addEventListener("click",c),i.push(()=>document.removeEventListener("click",c)),n.querySelectorAll(".vd-navbar-dropdown > .vd-nav-link, .vd-navbar-dropdown > .nav-link").forEach(h=>{let p=v=>{let y=this.getBreakpoint();if(window.innerWidthh.removeEventListener("click",p))}),this.instances.set(e,{toggle:t,menu:n,overlay:s,cleanup:i})},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),t.overlay&&t.overlay.parentNode&&t.overlay.parentNode.removeChild(t.overlay),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>{this.destroy(t)})},toggleMenu:function(e,t,n,s){n.classList.contains("is-open")?this.closeMenu(e,t,n,s):this.openMenu(e,t,n,s)},openMenu:function(e,t,n,s){n.classList.add("is-open"),t.classList.add("is-active"),s&&s.classList.add("is-active"),document.body.classList.add("body-navbar-open"),t.setAttribute("aria-expanded","true"),n.setAttribute("aria-hidden","false")},closeMenu:function(e,t,n,s){n.classList.remove("is-open"),t.classList.remove("is-active"),s&&s.classList.remove("is-active"),document.body.classList.remove("body-navbar-open"),n.querySelectorAll(".vd-navbar-dropdown-menu.is-open").forEach(a=>{a.classList.remove("is-open")}),t.setAttribute("aria-expanded","false"),n.setAttribute("aria-hidden","true")},createOverlay:function(e){let t=document.createElement("div");return t.className="vd-navbar-overlay",document.body.appendChild(t),t}};typeof window.Vanduo<"u"&&window.Vanduo.register("navbar",m),window.VanduoNavbar=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll(".vd-pagination[data-pagination]").forEach(t=>{this.instances.has(t)||this.initPagination(t)})},initPagination:function(e){let t=parseInt(e.dataset.totalPages)||1,n=parseInt(e.dataset.currentPage)||1,s=parseInt(e.dataset.maxVisible)||7;this.render(e,{totalPages:t,currentPage:n,maxVisible:s});let i=a=>{let o=a.target.closest(".vd-pagination-link");if(!o||o.closest(".vd-pagination-item.disabled")||o.closest(".vd-pagination-item.active"))return;a.preventDefault();let r=o.closest(".vd-pagination-item"),l=r.dataset.page;l?this.goToPage(e,parseInt(l)):r.classList.contains("pagination-prev")?this.prevPage(e):r.classList.contains("pagination-next")&&this.nextPage(e)};e.addEventListener("click",i),this.instances.set(e,{cleanup:[()=>e.removeEventListener("click",i)]})},render:function(e,t){let{totalPages:n,currentPage:s,maxVisible:i}=t;if(n<=1){e.innerHTML="";return}let a="";a+=`
  • `,a+='Previous',a+="
    • ";let o=this.calculatePages(s,n,i),r=0;o.forEach(l=>{if(l==="ellipsis")a+='
  • \u2026
    • ';else{l!==r+1&&r>0&&(a+='
  • \u2026
    • ');let d=Number(l);a+=`
  • `,a+=`${d}`,a+="
    • ",r=l}}),a+=`
  • `,a+='Next',a+="
    • ",e.innerHTML=a,e.dataset.currentPage=s},calculatePages:function(e,t,n){let s=[],i=Math.floor(n/2);if(t<=n)for(let a=1;a<=t;a++)s.push(a);else{s.push(1);let a=Math.max(2,e-i),o=Math.min(t-1,e+i);e<=i+1&&(o=Math.min(t-1,n-1)),e>=t-i&&(a=Math.max(2,t-n+2)),a>2&&s.push("ellipsis");for(let r=a;r<=o;r++)s.push(r);o1&&s.push(t)}return s},goToPage:function(e,t){let n=parseInt(e.dataset.totalPages)||1,s=parseInt(e.dataset.maxVisible)||7;t<1||t>n||(this.render(e,{totalPages:n,currentPage:t,maxVisible:s}),e.dispatchEvent(new CustomEvent("pagination:change",{bubbles:!0,detail:{page:t,totalPages:n}})))},prevPage:function(e){let t=parseInt(e.dataset.currentPage)||1;t>1&&this.goToPage(e,t-1)},nextPage:function(e){let t=parseInt(e.dataset.currentPage)||1,n=parseInt(e.dataset.totalPages)||1;tn()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>{this.destroy(t)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("pagination",m),window.VanduoPagination=m})();(function(){"use strict";let m={parallaxElements:new Map,ticking:!1,isMobile:window.innerWidth<768,reducedMotion:window.matchMedia("(prefers-reduced-motion: reduce)").matches,isInitialized:!1,_onScroll:null,_onResize:null,init:function(){if(this.isInitialized){this.refresh();return}if(this.isInitialized=!0,this.reducedMotion)return;document.querySelectorAll(".vd-parallax").forEach(t=>{t.dataset.parallaxInitialized||this.initParallax(t)}),this.handleScroll(),this._onScroll=()=>{this.handleScroll()},window.addEventListener("scroll",this._onScroll,{passive:!0}),this._onResize=()=>{this.isMobile=window.innerWidth<768,this.updateAll()},window.addEventListener("resize",this._onResize)},initParallax:function(e){e.dataset.parallaxInitialized="true";let t=e.classList.contains("parallax-disable-mobile");if(t&&this.isMobile)return;let n=e.querySelectorAll(".vd-parallax-layer, .vd-parallax-bg"),s=this.getSpeed(e),i=e.classList.contains("parallax-horizontal")?"horizontal":"vertical";this.parallaxElements.set(e,{layers:Array.from(n),speed:s,direction:i,disableMobile:t}),this.updateParallax(e)},getSpeed:function(e){return e.classList.contains("parallax-slow")?.5:e.classList.contains("parallax-fast")?1.5:1},handleScroll:function(){this.ticking||(window.requestAnimationFrame(()=>{this.updateAll(),this.ticking=!1}),this.ticking=!0)},updateAll:function(){this.parallaxElements.forEach((e,t)=>{e.disableMobile&&this.isMobile||this.updateParallax(t)})},updateParallax:function(e){let t=this.parallaxElements.get(e);if(!t)return;let n=e.getBoundingClientRect(),s=window.innerHeight,i=n.top,a=n.height,r=(Math.max(0,Math.min(1,(s-i)/(s+a)))-.5)*t.speed*100;t.layers.forEach((l,d)=>{let c=l.dataset.parallaxSpeed?parseFloat(l.dataset.parallaxSpeed):1,u=r*c;t.direction==="horizontal"?l.style.transform=`translateX(${u}px)`:l.style.transform=`translateY(${u}px)`})},destroy:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&this.parallaxElements.has(t)&&(this.parallaxElements.get(t).layers.forEach(s=>{s.style.transform=""}),this.parallaxElements.delete(t))},refresh:function(){this.updateAll()},destroyAll:function(){this.parallaxElements.forEach((e,t)=>{this.destroy(t)}),this.parallaxElements.clear(),this._onScroll&&(window.removeEventListener("scroll",this._onScroll),this._onScroll=null),this._onResize&&(window.removeEventListener("resize",this._onResize),this._onResize=null),this.isInitialized=!1}};typeof window.Vanduo<"u"&&window.Vanduo.register("parallax",m),window.VanduoParallax=m})();(function(){"use strict";let m={init:function(){document.querySelectorAll(".progress-bar[data-progress]").forEach(t=>{t.dataset.progressInitialized||this.initProgressBar(t)})},initProgressBar:function(e){e.dataset.progressInitialized="true";let t=parseInt(e.dataset.progress)||0;this.setProgress(e,t,!1)},setProgress:function(e,t,n=!0){let s=typeof e=="string"?document.querySelector(e):e;if(!s)return;t=Math.max(0,Math.min(100,t)),n?s.style.transition="width var(--transition-duration-slow) var(--transition-ease)":(s.style.transition="none",setTimeout(()=>{s.style.transition=""},0)),s.style.width=t+"%",s.setAttribute("aria-valuenow",t),s.setAttribute("aria-valuemin",0),s.setAttribute("aria-valuemax",100);let i=s.querySelector(".progress-text");i&&(i.textContent=t+"%"),s.dispatchEvent(new CustomEvent("progress:update",{bubbles:!0,detail:{value:t,max:100}})),t>=100&&s.dispatchEvent(new CustomEvent("progress:complete",{bubbles:!0,detail:{value:t,max:100}}))},animateProgress:function(e,t,n=1e3){let s=typeof e=="string"?document.querySelector(e):e;if(!s)return;let i=parseInt(s.style.width)||0,a=t-i,o=performance.now(),r=l=>{let d=l-o,c=Math.min(d/n,1),u=1-Math.pow(1-c,3),h=i+a*u;this.setProgress(s,h,!1),c<1&&requestAnimationFrame(r)};requestAnimationFrame(r)},show:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&(t.style.display="inline-block",t.setAttribute("aria-hidden","false"))},hide:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&(t.style.display="none",t.setAttribute("aria-hidden","true"))},toggle:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&(t.style.display==="none"||t.getAttribute("aria-hidden")==="true"?this.show(t):this.hide(t))},destroyAll:function(){document.querySelectorAll('.progress-bar[data-progress-initialized="true"]').forEach(t=>{delete t.dataset.progressInitialized})}};typeof window.Vanduo<"u"&&window.Vanduo.register("preloader",m),window.VanduoPreloader=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("select.vd-custom-select-input, select[data-custom-select]").forEach(t=>{this.instances.has(t)||this.initSelect(t)})},initSelect:function(e){if(e.closest(".vd-custom-select-wrapper"))return;let t=[],n=document.createElement("div");n.className="custom-select-wrapper",e.parentNode.insertBefore(n,e),n.appendChild(e);let s=document.createElement("button");s.type="button",s.className="custom-select-button",s.setAttribute("aria-haspopup","listbox"),s.setAttribute("aria-expanded","false"),s.setAttribute("aria-labelledby",e.id||this.generateId(e));let i=document.createElement("div");if(i.className="custom-select-dropdown",i.setAttribute("role","listbox"),e.dataset.searchable==="true"){let d=document.createElement("div");d.className="custom-select-search";let c=document.createElement("input");c.type="text",c.className="input input-sm",c.placeholder="Search...",c.setAttribute("aria-label","Search options"),d.appendChild(c),i.appendChild(d);let u=p=>{this.filterOptions(i,p.target.value)},h=typeof debounce=="function"?debounce(u,150):u;c.addEventListener("input",h),t.push(()=>c.removeEventListener("input",h))}this.buildOptions(e,i,s),n.appendChild(s),n.appendChild(i),this.updateButtonText(e,s);let a=d=>{d.preventDefault(),d.stopPropagation(),this.toggleDropdown(s,i)};s.addEventListener("click",a),t.push(()=>s.removeEventListener("click",a));let o=d=>{!n.contains(d.target)&&i.classList.contains("is-open")&&this.closeDropdown(s,i)};document.addEventListener("click",o),t.push(()=>document.removeEventListener("click",o));let r=d=>{this.handleKeydown(d,e,s,i)};s.addEventListener("keydown",r),t.push(()=>s.removeEventListener("keydown",r));let l=()=>{this.updateButtonText(e,s),this.updateSelectedOptions(e,i)};e.addEventListener("change",l),t.push(()=>e.removeEventListener("change",l)),this.instances.set(e,{wrapper:n,button:s,dropdown:i,cleanup:t,typeaheadBuffer:"",typeaheadTimer:null})},buildOptions:function(e,t,n){let s=e.querySelectorAll("option"),i=document.createDocumentFragment();s.forEach((a,o)=>{if(a.parentElement.tagName==="OPTGROUP"){let l=a.parentElement;if(!t.querySelector(`[data-group="${l.label}"]`)){let d=document.createElement("div");d.className="custom-select-option-group",d.textContent=l.label,d.dataset.group=l.label,i.appendChild(d)}}if(a.value===""&&!a.textContent.trim())return;let r=document.createElement("div");r.className="custom-select-option",r.textContent=a.textContent,r.setAttribute("role","option"),r.setAttribute("data-value",a.value),r.setAttribute("data-index",o),a.selected&&(r.classList.add("is-selected"),r.setAttribute("aria-selected","true")),a.disabled&&(r.classList.add("is-disabled"),r.setAttribute("aria-disabled","true")),r.addEventListener("click",l=>{a.disabled||this.selectOption(e,a,r,n,t)}),i.appendChild(r)}),t.appendChild(i)},selectOption:function(e,t,n,s,i){e.multiple?(t.selected=!t.selected,n.classList.toggle("is-selected"),n.setAttribute("aria-selected",t.selected)):(e.value=t.value,e.dispatchEvent(new Event("change",{bubbles:!0})),this.closeDropdown(s,i)),this.updateButtonText(e,s)},updateButtonText:function(e,t){if(e.multiple){let n=Array.from(e.selectedOptions);n.length===0?t.textContent=e.dataset.placeholder||"Select options...":n.length===1?t.textContent=n[0].textContent:t.textContent=`${n.length} selected`}else{let n=e.options[e.selectedIndex];t.textContent=n?n.textContent:e.dataset.placeholder||"Select..."}},updateSelectedOptions:function(e,t){let n=t.querySelectorAll(".custom-select-option"),s=Array.from(e.selectedOptions).map(i=>i.value);n.forEach(i=>{let a=i.dataset.value;s.includes(a)?(i.classList.add("is-selected"),i.setAttribute("aria-selected","true")):(i.classList.remove("is-selected"),i.setAttribute("aria-selected","false"))})},toggleDropdown:function(e,t){t.classList.contains("is-open")?this.closeDropdown(e,t):this.openDropdown(e,t)},openDropdown:function(e,t){t.classList.add("is-open"),e.setAttribute("aria-expanded","true");let n=t.querySelector(".custom-select-option:not(.is-disabled)");n&&n.focus()},closeDropdown:function(e,t){t.classList.remove("is-open"),e.setAttribute("aria-expanded","false")},handleKeydown:function(e,t,n,s){let i=s.classList.contains("is-open"),a=Array.from(s.querySelectorAll(".custom-select-option:not(.is-disabled)")),o=a.findIndex(r=>r===document.activeElement);switch(e.key){case"Enter":case" ":if(e.preventDefault(),i&&o>=0){let r=a[o],l=t.options[parseInt(r.dataset.index)];this.selectOption(t,l,r,n,s)}else this.openDropdown(n,s);break;case"Escape":i&&(e.preventDefault(),this.closeDropdown(n,s),n.focus());break;case"ArrowDown":if(e.preventDefault(),!i)this.openDropdown(n,s);else{let r=o0?o-1:a.length-1;a[r].focus()}break;case"Home":i&&(e.preventDefault(),a[0].focus());break;case"End":i&&(e.preventDefault(),a[a.length-1].focus());break;default:if(i&&e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey){let r=this.instances.get(t);if(!r)break;clearTimeout(r.typeaheadTimer),r.typeaheadBuffer+=e.key.toLowerCase();let l=a.find(d=>d.textContent.trim().toLowerCase().startsWith(r.typeaheadBuffer));l&&l.focus(),r.typeaheadTimer=setTimeout(()=>{r.typeaheadBuffer=""},500)}break}},filterOptions:function(e,t){let n=e.querySelectorAll(".vd-custom-select-option"),s=t.toLowerCase();n.forEach(i=>{i.textContent.toLowerCase().includes(s)?i.style.display="block":i.style.display="none"})},generateId:function(e){if(e.id)return e.id;let t="select-"+Math.random().toString(36).substr(2,9);return e.id=t,t},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),t.wrapper&&t.wrapper.parentNode&&(t.wrapper.parentNode.insertBefore(e,t.wrapper),t.wrapper.parentNode.removeChild(t.wrapper)),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>{this.destroy(t)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("select",m)})();(function(){"use strict";let m={sidenavs:new Map,breakpoint:992,_globalCleanups:[],isFixedVariant:function(e){return e.classList.contains("vd-sidenav-fixed")||e.classList.contains("sidenav-fixed")},isPushVariant:function(e){return e.classList.contains("vd-sidenav-push")||e.classList.contains("sidenav-push")},isRightVariant:function(e){return e.classList.contains("vd-sidenav-right")||e.classList.contains("sidenav-right")},init:function(){document.querySelectorAll(".vd-sidenav, .vd-offcanvas").forEach(s=>{this.sidenavs.has(s)||this.initSidenav(s)}),document.querySelectorAll("[data-sidenav-toggle]").forEach(s=>{if(s.dataset.sidenavToggleInitialized)return;s.dataset.sidenavToggleInitialized="true";let i=a=>{a.preventDefault();let o=s.dataset.sidenavToggle,r=document.querySelector(o);r&&this.toggle(r)};s.addEventListener("click",i),this._globalCleanups.push(()=>s.removeEventListener("click",i))}),this.handleResize();let n=()=>{this.handleResize()};window.addEventListener("resize",n),this._globalCleanups.push(()=>window.removeEventListener("resize",n))},initSidenav:function(e){let t=e.getAttribute("data-vd-position");if(t){let r=e.classList.contains("vd-offcanvas")?"vd-offcanvas":"vd-sidenav";e.classList.add(r+"-"+t)}let n=this.createOverlay(e),s=e.querySelector(".vd-sidenav-close, .vd-offcanvas-close"),i=[];if(e.setAttribute("role","navigation"),e.setAttribute("aria-hidden","true"),s){let r=()=>{this.close(e)};s.addEventListener("click",r),i.push(()=>s.removeEventListener("click",r))}let a=()=>{e.dataset.backdrop!=="static"&&this.close(e)};n.addEventListener("click",a),i.push(()=>n.removeEventListener("click",a));let o=r=>{r.key==="Escape"&&e.classList.contains("is-open")&&e.dataset.keyboard!=="false"&&this.close(e)};document.addEventListener("keydown",o),i.push(()=>document.removeEventListener("keydown",o)),this.sidenavs.set(e,{overlay:n,cleanup:i})},createOverlay:function(e){let t=e.querySelector(".vd-sidenav-overlay");return t||(t=document.createElement("div"),t.className="vd-sidenav-overlay",document.body.appendChild(t)),t},open:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(!t||!this.sidenavs.has(t))return;let{overlay:n}=this.sidenavs.get(t);this.isFixedVariant(t)||n.classList.add("is-visible"),t.classList.add("is-open"),t.setAttribute("aria-hidden","false"),document.body.classList.add("body-sidenav-open"),this.isPushVariant(t)&&this.handlePushVariant(t,!0),t.dispatchEvent(new CustomEvent("sidenav:open",{bubbles:!0}))},close:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(!t||!this.sidenavs.has(t))return;let{overlay:n}=this.sidenavs.get(t);n.classList.remove("is-visible"),t.classList.remove("is-open"),t.setAttribute("aria-hidden","true"),document.body.classList.remove("body-sidenav-open"),this.isPushVariant(t)&&this.handlePushVariant(t,!1),t.dispatchEvent(new CustomEvent("sidenav:close",{bubbles:!0}))},toggle:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&(t.classList.contains("is-open")?this.close(t):this.open(t))},handlePushVariant:function(e,t){let n=document.querySelector('main, .main-content, .content, [role="main"]')||document.body;t?window.innerWidth>=this.breakpoint&&(this.isRightVariant(e)?n.style.marginRight=e.offsetWidth+"px":n.style.marginLeft=e.offsetWidth+"px"):(n.style.marginLeft="",n.style.marginRight="")},handleResize:function(){this.sidenavs.forEach(({overlay:e},t)=>{window.innerWidth>=this.breakpoint?this.isFixedVariant(t)&&!t.classList.contains("is-open")&&(t.classList.add("is-open"),t.setAttribute("aria-hidden","false"),e.classList.remove("is-visible")):this.isFixedVariant(t)&&t.classList.contains("is-open")&&this.close(t)})},destroy:function(e){let t=this.sidenavs.get(e);t&&(e.classList.contains("is-open")&&this.close(e),t.cleanup.forEach(n=>n()),t.overlay&&t.overlay.parentNode&&t.overlay.parentNode.removeChild(t.overlay),this.sidenavs.delete(e))},destroyAll:function(){this.sidenavs.forEach((e,t)=>{this.destroy(t)}),this._globalCleanups.forEach(e=>e()),this._globalCleanups=[]}};typeof window.Vanduo<"u"&&window.Vanduo.register("sidenav",m),window.VanduoSidenav=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll(".vd-tabs, [data-tabs]").forEach(t=>{this.instances.has(t)||this.initTabs(t)})},initTabs:function(e){let t=e.querySelector('.vd-tab-list, [role="tablist"]'),n=e.querySelectorAll(".vd-tab-link, [data-tab]"),s=e.querySelectorAll(".vd-tab-pane, [data-tab-pane]");if(!t||n.length===0)return;let i=[];t.setAttribute("role","tablist"),n.forEach((o,r)=>{let l=o.dataset.tab||o.getAttribute("href")?.replace("#","")||`tab-${r}`,d=this.findPane(e,l,s);o.setAttribute("role","tab"),o.setAttribute("aria-selected",o.classList.contains("is-active")?"true":"false"),o.setAttribute("tabindex",o.classList.contains("is-active")?"0":"-1"),o.id||(o.id=`tab-btn-${l}`),d&&(d.setAttribute("role","tabpanel"),d.setAttribute("aria-labelledby",o.id),d.id||(d.id=`tab-pane-${l}`),o.setAttribute("aria-controls",d.id));let c=h=>{h.preventDefault(),!o.classList.contains("disabled")&&!o.disabled&&this.activateTab(e,o,n,s)};o.addEventListener("click",c),i.push(()=>o.removeEventListener("click",c));let u=h=>{this.handleKeydown(h,e,o,n,s)};o.addEventListener("keydown",u),i.push(()=>o.removeEventListener("keydown",u))}),!e.querySelector(".vd-tab-link.is-active, [data-tab].is-active")&&n.length>0&&this.activateTab(e,n[0],n,s),this.instances.set(e,{cleanup:i})},findPane:function(e,t,n){let s=e.querySelector(`[data-tab-pane="${t}"]`);return s||(s=e.querySelector(`#${t}`)),s||e.querySelectorAll(".vd-tab-link, [data-tab]").forEach((a,o)=>{(a.dataset.tab||a.getAttribute("href")?.replace("#",""))===t&&n[o]&&(s=n[o])}),s},activateTab:function(e,t,n,s){let i=t.dataset.tab||t.getAttribute("href")?.replace("#","")||t.id;n.forEach(r=>{r.classList.remove("is-active"),r.setAttribute("aria-selected","false"),r.setAttribute("tabindex","-1"),r.parentElement&&r.parentElement.classList.contains("tab-item")&&r.parentElement.classList.remove("is-active")}),s.forEach(r=>{r.classList.remove("is-active")}),t.classList.add("is-active"),t.setAttribute("aria-selected","true"),t.setAttribute("tabindex","0"),t.parentElement&&t.parentElement.classList.contains("tab-item")&&t.parentElement.classList.add("is-active");let a=this.findPane(e,i,s);a&&a.classList.add("is-active");let o=new CustomEvent("tab:change",{bubbles:!0,detail:{tab:t,pane:a,tabId:i}});e.dispatchEvent(o)},handleKeydown:function(e,t,n,s,i){let a=t.classList.contains("tabs-vertical"),o=Array.from(s).filter(d=>!d.classList.contains("disabled")&&!d.disabled),r=o.indexOf(n),l=r;switch(e.key){case"ArrowLeft":a||(e.preventDefault(),l=r>0?r-1:o.length-1);break;case"ArrowRight":a||(e.preventDefault(),l=r0?r-1:o.length-1);break;case"ArrowDown":a&&(e.preventDefault(),l=rn()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>{this.destroy(t)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("tabs",m)})();(function(){"use strict";let m={STORAGE_KEYS:{PRIMARY:"vanduo-primary-color",NEUTRAL:"vanduo-neutral-color",RADIUS:"vanduo-radius",FONT:"vanduo-font-preference",THEME:"vanduo-theme-preference"},DEFAULTS:{PRIMARY_LIGHT:"black",PRIMARY_DARK:"amber",NEUTRAL:"neutral",RADIUS:"0.5",FONT:"ubuntu",THEME:"system"},PRIMARY_COLORS:{black:{name:"Black",color:"#000000"},red:{name:"Red",color:"#fa5252"},orange:{name:"Orange",color:"#fd7e14"},amber:{name:"Amber",color:"#f59f00"},yellow:{name:"Yellow",color:"#fcc419"},lime:{name:"Lime",color:"#82c91e"},green:{name:"Green",color:"#40c057"},emerald:{name:"Emerald",color:"#20c997"},teal:{name:"Teal",color:"#12b886"},cyan:{name:"Cyan",color:"#22b8cf"},sky:{name:"Sky",color:"#3bc9db"},blue:{name:"Blue",color:"#228be6"},indigo:{name:"Indigo",color:"#4c6ef5"},violet:{name:"Violet",color:"#7950f2"},purple:{name:"Purple",color:"#be4bdb"},fuchsia:{name:"Fuchsia",color:"#f06595"},pink:{name:"Pink",color:"#e64980"},rose:{name:"Rose",color:"#ff8787"}},NEUTRAL_COLORS:{slate:{name:"Slate",color:"#64748b"},gray:{name:"Gray",color:"#6b7280"},zinc:{name:"Zinc",color:"#71717a"},neutral:{name:"Neutral",color:"#737373"},stone:{name:"Stone",color:"#78716c"}},RADIUS_OPTIONS:["0","0.125","0.25","0.375","0.5"],FONT_OPTIONS:{"jetbrains-mono":{name:"JetBrains Mono",family:"'JetBrains Mono', monospace"},inter:{name:"Inter",family:"'Inter', sans-serif"},"source-sans":{name:"Source Sans 3",family:"'Source Sans 3', sans-serif"},"fira-sans":{name:"Fira Sans",family:"'Fira Sans', sans-serif"},"ibm-plex":{name:"IBM Plex Sans",family:"'IBM Plex Sans', sans-serif"},system:{name:"System Default",family:null},ubuntu:{name:"Ubuntu",family:"'Ubuntu', sans-serif"},"open-sans":{name:"Open Sans",family:"'Open Sans', sans-serif"},rubik:{name:"Rubik",family:"'Rubik', sans-serif"},"titillium-web":{name:"Titillium Web",family:"'Titillium Web', sans-serif"}},THEME_MODES:["system","dark","light"],state:{primary:null,neutral:null,radius:null,font:null,theme:null,isOpen:!1},isInitialized:!1,_cleanup:[],elements:{customizer:null,trigger:null,panel:null,overlay:null},init:function(){if(this.isInitialized){this.bindExistingElements(),this.bindPanelEvents(),this.updateUI();return}this.isInitialized=!0,this._cleanup=[],this.loadPreferences(),this.applyAllPreferences(),this.bindExistingElements(),this.bindEvents(),console.log("Vanduo Theme Customizer initialized")},addListener:function(e,t,n,s){e&&(e.addEventListener(t,n,s),this._cleanup.push(()=>e.removeEventListener(t,n,s)))},getDefaultPrimary:function(e){return e==="system"?window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?this.DEFAULTS.PRIMARY_DARK:this.DEFAULTS.PRIMARY_LIGHT:e==="dark"?this.DEFAULTS.PRIMARY_DARK:this.DEFAULTS.PRIMARY_LIGHT},loadPreferences:function(){this.state.theme=this.getStorageValue(this.STORAGE_KEYS.THEME,this.DEFAULTS.THEME),this.state.primary=this.getStorageValue(this.STORAGE_KEYS.PRIMARY,this.getDefaultPrimary(this.state.theme)),this._normalizeDefaultPrimaryIfStaleWithStoredTheme(),this.state.neutral=this.getStorageValue(this.STORAGE_KEYS.NEUTRAL,this.DEFAULTS.NEUTRAL),this.state.radius=this.getStorageValue(this.STORAGE_KEYS.RADIUS,this.DEFAULTS.RADIUS),this.state.font=this.getStorageValue(this.STORAGE_KEYS.FONT,this.DEFAULTS.FONT)},savePreference:function(e,t){this.setStorageValue(e,t)},applyAllPreferences:function(){this.applyPrimary(this.state.primary),this.applyNeutral(this.state.neutral),this.applyRadius(this.state.radius),this.applyFont(this.state.font),this.applyTheme(this.state.theme)},applyPrimary:function(e){this.PRIMARY_COLORS[e]||(e=this.getDefaultPrimary(this.state.theme)),this.state.primary=e,document.documentElement.setAttribute("data-primary",e),this.savePreference(this.STORAGE_KEYS.PRIMARY,e),this.dispatchEvent("primary-change",{color:e})},applyNeutral:function(e){this.NEUTRAL_COLORS[e]||(e=this.DEFAULTS.NEUTRAL),this.state.neutral=e,document.documentElement.setAttribute("data-neutral",e),this.savePreference(this.STORAGE_KEYS.NEUTRAL,e),this.dispatchEvent("neutral-change",{neutral:e})},applyRadius:function(e){this.RADIUS_OPTIONS.includes(e)||(e=this.DEFAULTS.RADIUS),this.state.radius=e,document.documentElement.setAttribute("data-radius",e),document.documentElement.style.setProperty("--radius-scale",e),this.savePreference(this.STORAGE_KEYS.RADIUS,e),this.dispatchEvent("radius-change",{radius:e})},applyFont:function(e){this.FONT_OPTIONS[e]||(e=this.DEFAULTS.FONT),this.state.font=e,e==="system"?document.documentElement.removeAttribute("data-font"):document.documentElement.setAttribute("data-font",e),this.savePreference(this.STORAGE_KEYS.FONT,e),window.FontSwitcher&&window.FontSwitcher.setPreference&&(window.FontSwitcher.state.preference=e,window.FontSwitcher.applyFont()),this.dispatchEvent("font-change",{font:e})},applyTheme:function(e){if(this.THEME_MODES.includes(e)||(e=this.DEFAULTS.THEME),this._isApplying=!0,this.isUsingDefaultPrimary()){let t=this.getDefaultPrimary(e);this.state.primary!==t&&this.applyPrimary(t)}if(this.state.theme=e,e==="system"?document.documentElement.removeAttribute("data-theme"):document.documentElement.setAttribute("data-theme",e),this.savePreference(this.STORAGE_KEYS.THEME,e),window.Vanduo&&window.Vanduo.components.themeSwitcher){let t=window.Vanduo.components.themeSwitcher;t.state&&t.state.preference!==e&&(t.state.preference=e,typeof t.setStorageValue=="function"&&t.setStorageValue(t.STORAGE_KEY,e),typeof t.updateUI=="function"&&t.updateUI())}this._isApplying=!1,this.dispatchEvent("mode-change",{mode:e})},dispatchEvent:function(e,t){let n=new CustomEvent("theme:"+e,{bubbles:!0,detail:t});document.dispatchEvent(n);let s=new CustomEvent("theme:change",{bubbles:!0,detail:{type:e,value:t[Object.keys(t)[0]],state:{...this.state}}});document.dispatchEvent(s)},bindExistingElements:function(){if(this.elements.customizer=document.querySelector(".vd-theme-customizer"),this.elements.customizer)this.elements.trigger=this.elements.customizer.querySelector(".vd-theme-customizer-trigger"),this.elements.panel=this.elements.customizer.querySelector(".vd-theme-customizer-panel"),this.elements.overlay=this.elements.customizer.querySelector(".vd-theme-customizer-overlay");else{let e=document.querySelector("[data-theme-customizer-trigger]");e&&this.createDynamicPanel(e)}this.updateUI()},createDynamicPanel:function(e){let t=document.createElement("div");t.className="vd-theme-customizer",this.elements.trigger=e;let n=document.createElement("div");n.className="vd-theme-customizer-overlay";let s=document.createElement("div");s.className="vd-theme-customizer-panel",s.innerHTML=this.getPanelHTML(),document.body.appendChild(n),document.body.appendChild(s),this.elements.panel=s,this.elements.overlay=n,this.elements.customizer={contains:i=>s.contains(i)||e.contains(i)},this.positionPanel(),this.bindPanelEvents(),this.addListener(window,"resize",()=>this.positionPanel())},positionPanel:function(){if(!this.elements.panel||!this.elements.trigger)return;if(window.innerWidth<768)this.elements.panel.style.top="",this.elements.panel.style.right="",this.elements.panel.style.left="",this.elements.panel.style.height="",this.elements.panel.style.maxHeight="";else{let t=this.elements.trigger.getBoundingClientRect(),n=320,s=t.bottom+8,i=window.innerWidth,a=i-t.right;i-a-n<8&&(a=i-n-8),this.elements.panel.style.top=s+"px",this.elements.panel.style.right=a+"px",this.elements.panel.style.left="",this.elements.panel.style.height="auto",this.elements.panel.style.maxHeight="calc(100vh - "+s+"px)"}},bindPanelEvents:function(){if(!this.elements.panel||this.elements.panel.getAttribute("data-customizer-initialized")==="true")return;this.elements.panel.setAttribute("data-customizer-initialized","true"),this.elements.panel.querySelectorAll("[data-color]").forEach(s=>{this.addListener(s,"click",()=>{this.applyPrimary(s.dataset.color),this.updateUI()})}),this.elements.panel.querySelectorAll("[data-neutral]").forEach(s=>{this.addListener(s,"click",()=>{this.applyNeutral(s.dataset.neutral),this.updateUI()})}),this.elements.panel.querySelectorAll("[data-radius]").forEach(s=>{this.addListener(s,"click",()=>{this.applyRadius(s.dataset.radius),this.updateUI()})});let e=this.elements.panel.querySelector("[data-customizer-font]");e&&this.addListener(e,"change",s=>{this.applyFont(s.target.value),this.updateUI()});let t=this.elements.panel.querySelector(".customizer-reset");t&&this.addListener(t,"click",()=>{this.reset()});let n=this.elements.panel.querySelector(".customizer-mobile-close");n&&this.addListener(n,"click",()=>{this.close()}),this.elements.overlay&&this.addListener(this.elements.overlay,"click",()=>{this.close()})},getPanelHTML:function(){let e=typeof escapeHtml=="function"?escapeHtml:function(o){let r=document.createElement("div");return r.textContent=String(o??""),r.innerHTML},t=function(o){let r=String(o??"").trim();return/^(#[0-9a-fA-F]{3,8}|rgb[a]?\([^)]{1,60}\)|hsl[a]?\([^)]{1,60}\)|var\(--[a-zA-Z0-9_-]{1,40}\))$/.test(r)?r:"#000000"},n="";for(let[o,r]of Object.entries(this.PRIMARY_COLORS))n+=``;let s="";for(let[o,r]of Object.entries(this.NEUTRAL_COLORS))s+=``;let i="";this.RADIUS_OPTIONS.forEach(o=>{i+=``});let a="";for(let[o,r]of Object.entries(this.FONT_OPTIONS))a+=``;return`

    Customize Theme

    - `},isUsingDefaultPrimary:function(){return this.state.primary===this.DEFAULTS.PRIMARY_LIGHT||this.state.primary===this.DEFAULTS.PRIMARY_DARK},_normalizeDefaultPrimaryIfStaleWithStoredTheme:function(){if(!this.isUsingDefaultPrimary())return;let e=this.getDefaultPrimary(this.state.theme);this.state.primary!==e&&(this.state.primary=e)},bindEvents:function(){if(this.elements.trigger&&this.addListener(this.elements.trigger,"click",e=>{e.preventDefault(),e.stopPropagation(),this.toggle()}),this.bindPanelEvents(),window.matchMedia){let e=window.matchMedia("(prefers-color-scheme: dark)"),t=()=>{if(this.state.theme==="system"&&this.isUsingDefaultPrimary()){let n=this.getDefaultPrimary("system");n!==this.state.primary&&(this.applyPrimary(n),this.updateUI())}};e.addEventListener("change",t),this._cleanup.push(()=>e.removeEventListener("change",t))}this.addListener(document,"click",e=>{this.state.isOpen&&this.elements.customizer&&!this.elements.customizer.contains(e.target)&&this.close()}),this.addListener(document,"keydown",e=>{e.key==="Escape"&&this.state.isOpen&&this.close()})},toggle:function(){this.state.isOpen?this.close():this.open()},open:function(){this.state.isOpen=!0,this.positionPanel(),this.elements.panel&&this.elements.panel.classList.add("is-open"),this.elements.trigger&&this.elements.trigger.setAttribute("aria-expanded","true"),this.elements.overlay&&this.elements.overlay.classList.add("is-active"),this.dispatchEvent("panel-open",{isOpen:!0})},close:function(){this.state.isOpen=!1,this.elements.panel&&this.elements.panel.classList.remove("is-open"),this.elements.trigger&&this.elements.trigger.setAttribute("aria-expanded","false"),this.elements.overlay&&this.elements.overlay.classList.remove("is-active"),this.dispatchEvent("panel-close",{isOpen:!1})},updateUI:function(){if(!this.elements.panel)return;this.elements.panel.querySelectorAll("[data-color]").forEach(t=>{t.classList.toggle("is-active",t.dataset.color===this.state.primary)}),this.elements.panel.querySelectorAll("[data-neutral]").forEach(t=>{t.classList.toggle("is-active",t.dataset.neutral===this.state.neutral)}),this.elements.panel.querySelectorAll("[data-radius]").forEach(t=>{t.classList.toggle("is-active",t.dataset.radius===this.state.radius)});let e=this.elements.panel.querySelector("[data-customizer-font]");e&&(e.value=this.state.font)},reset:function(){this.applyTheme(this.DEFAULTS.THEME),this.applyPrimary(this.getDefaultPrimary(this.DEFAULTS.THEME)),this.applyNeutral(this.DEFAULTS.NEUTRAL),this.applyRadius(this.DEFAULTS.RADIUS),this.applyFont(this.DEFAULTS.FONT),this.updateUI(),this.dispatchEvent("reset",{state:{...this.state}})},getState:function(){return{...this.state}},setPreferences:function(e){e.primary&&this.applyPrimary(e.primary),e.neutral&&this.applyNeutral(e.neutral),e.radius&&this.applyRadius(e.radius),e.font&&this.applyFont(e.font),e.theme&&this.applyTheme(e.theme),this.updateUI()},getStorageValue:function(e,t){if(typeof window.safeStorageGet=="function")return window.safeStorageGet(e,t);try{let n=localStorage.getItem(e);return n!==null?n:t}catch{return t}},setStorageValue:function(e,t){if(typeof window.safeStorageSet=="function")return window.safeStorageSet(e,t);try{return localStorage.setItem(e,t),!0}catch{return!1}},destroyAll:function(){this._cleanup.forEach(e=>e()),this._cleanup=[],this.elements.panel&&this.elements.panel.removeAttribute("data-customizer-initialized"),this.close(),this.isInitialized=!1}};window.Vanduo&&window.Vanduo.register("themeCustomizer",m),window.ThemeCustomizer=m})();(function(){"use strict";let m={isInitialized:!1,_mediaQuery:null,_onMediaChange:null,init:function(){if(this.STORAGE_KEY="vanduo-theme-preference",this.state={preference:this.getPreference()},this.isInitialized){this.applyTheme(),this.renderUI(),this.updateUI();return}this.isInitialized=!0,this.applyTheme(),this.listenForSystemChanges(),this.renderUI(),console.log("Vanduo Theme Switcher initialized")},getPreference:function(){return this.getStorageValue(this.STORAGE_KEY,"system")},setPreference:function(e){this.state.preference=e,this.setStorageValue(this.STORAGE_KEY,e),this.applyTheme(),window.ThemeCustomizer&&window.ThemeCustomizer.applyTheme&&!window.ThemeCustomizer._isApplying&&window.ThemeCustomizer.applyTheme(e),this.updateUI()},getStorageValue:function(e,t){if(typeof window.safeStorageGet=="function")return window.safeStorageGet(e,t);try{let n=localStorage.getItem(e);return n!==null?n:t}catch{return t}},setStorageValue:function(e,t){if(typeof window.safeStorageSet=="function")return window.safeStorageSet(e,t);try{return localStorage.setItem(e,t),!0}catch{return!1}},applyTheme:function(){let e=this.state.preference;e==="system"?document.documentElement.removeAttribute("data-theme"):document.documentElement.setAttribute("data-theme",e)},listenForSystemChanges:function(){this._mediaQuery&&this._onMediaChange||(this._mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this._onMediaChange=e=>{this.state.preference==="system"&&(this.applyTheme(),window.ThemeCustomizer&&typeof window.ThemeCustomizer.applyTheme=="function"&&!window.ThemeCustomizer._isApplying&&window.ThemeCustomizer.applyTheme("system"))},this._mediaQuery.addEventListener("change",this._onMediaChange))},renderUI:function(){document.querySelectorAll('[data-toggle="theme"]').forEach(t=>{if(t.getAttribute("data-theme-initialized")==="true"){t.tagName==="SELECT"&&(t.value=this.state.preference);return}if(t.tagName==="SELECT"){t.value=this.state.preference;let n=s=>{this.setPreference(s.target.value)};t.addEventListener("change",n),t._themeToggleHandler=n}else{let n=()=>{let s=["system","light","dark"],i=(s.indexOf(this.state.preference)+1)%s.length;this.setPreference(s[i])};t.addEventListener("click",n),t._themeToggleHandler=n}t.setAttribute("data-theme-initialized","true")})},updateUI:function(){document.querySelectorAll('[data-toggle="theme"]').forEach(t=>{if(t.tagName==="SELECT")t.value=this.state.preference;else{let n=t.querySelector(".theme-current-label");n&&(n.textContent=this.state.preference.charAt(0).toUpperCase()+this.state.preference.slice(1))}})},destroyAll:function(){document.querySelectorAll('[data-toggle="theme"][data-theme-initialized="true"]').forEach(t=>{if(t._themeToggleHandler){let n=t.tagName==="SELECT"?"change":"click";t.removeEventListener(n,t._themeToggleHandler),delete t._themeToggleHandler}t.removeAttribute("data-theme-initialized")}),this._mediaQuery&&this._onMediaChange&&this._mediaQuery.removeEventListener("change",this._onMediaChange),this._mediaQuery=null,this._onMediaChange=null,this.isInitialized=!1}};window.Vanduo&&window.Vanduo.register("themeSwitcher",m)})();(function(){"use strict";let m={defaults:{position:"top-right",duration:5e3,dismissible:!0,showProgress:!0,pauseOnHover:!0},containers:{},getContainer:function(e){if(this.containers[e])return this.containers[e];let t=document.createElement("div");return t.className=`vd-toast-container vd-toast-container-${e}`,t.setAttribute("role","status"),t.setAttribute("aria-live","polite"),t.setAttribute("aria-atomic","false"),document.body.appendChild(t),this.containers[e]=t,t},show:function(e,t,n){typeof e=="string"&&(e={message:e,type:t,duration:n});let s=Object.assign({},this.defaults,e),i=this.getContainer(s.position),a=document.createElement("div");a.className="vd-toast",s.type&&a.classList.add(`vd-toast-${s.type}`),s.solid&&a.classList.add("vd-toast-solid"),s.showProgress&&s.duration>0&&a.classList.add("vd-toast-with-progress");let o="";if(s.icon){let v=typeof sanitizeHtml=="function"?sanitizeHtml(s.icon):escapeHtml(s.icon);o+=`${v}`}else s.type&&(o+=`${this.getDefaultIcon(s.type)}`);let r=typeof escapeHtml=="function"?escapeHtml:function(v){let y=document.createElement("div");return y.appendChild(document.createTextNode(v)),y.innerHTML};if(o+='
    ',s.title&&(o+=`
    ${r(String(s.title))}
    `),s.message&&(o+=`
    ${r(String(s.message))}
    `),o+="
    ",s.dismissible&&(o+=''),s.showProgress&&s.duration>0){let v=parseInt(s.duration,10)||0;o+=`
    `}if(a.innerHTML=o,i.appendChild(a),a._toastCleanup=[],s.dismissible){let v=a.querySelector(".vd-toast-close"),y=()=>{this.dismiss(a)};v.addEventListener("click",y),a._toastCleanup.push(()=>v.removeEventListener("click",y))}let l=null,d=s.duration,c=null,h=()=>{if(s.duration>0){c=Date.now(),l=setTimeout(()=>{this.dismiss(a)},d),a._toastTimeoutId=l;let v=a.querySelector(".vd-toast-progress");v&&(v.style.animationPlayState="running")}},u=()=>{if(l){clearTimeout(l),l=null,a._toastTimeoutId=null,d-=Date.now()-c;let v=a.querySelector(".vd-toast-progress");v&&(v.style.animationPlayState="paused")}};s.pauseOnHover&&(a.addEventListener("mouseenter",u),a.addEventListener("mouseleave",h),a._toastCleanup.push(()=>a.removeEventListener("mouseenter",u),()=>a.removeEventListener("mouseleave",h))),requestAnimationFrame(()=>{a.classList.add("is-visible"),h()}),a._toastConfig=s;let p=new CustomEvent("toast:show",{bubbles:!0,detail:{toast:a,config:s}});return a.dispatchEvent(p),a},dismiss:function(e){if(!e||e.classList.contains("is-exiting"))return;e._toastTimeoutId&&(clearTimeout(e._toastTimeoutId),e._toastTimeoutId=null),e.classList.remove("is-visible"),e.classList.add("is-exiting");let t=new CustomEvent("toast:dismiss",{bubbles:!0,detail:{toast:e}});e.dispatchEvent(t);let n=()=>{e.removeEventListener("transitionend",n),e._toastCleanup&&(e._toastCleanup.forEach(s=>s()),delete e._toastCleanup),e.parentElement&&e.parentElement.removeChild(e)};e.addEventListener("transitionend",n),setTimeout(()=>{e._toastCleanup&&(e._toastCleanup.forEach(s=>s()),delete e._toastCleanup),e.parentElement&&e.parentElement.removeChild(e)},400)},destroyAll:function(){Object.keys(this.containers).forEach(e=>{let t=this.containers[e];if(!t)return;t.querySelectorAll(".vd-toast").forEach(s=>{s._toastTimeoutId&&clearTimeout(s._toastTimeoutId),s._toastCleanup&&(s._toastCleanup.forEach(i=>i()),delete s._toastCleanup),s.parentElement&&s.parentElement.removeChild(s)}),t.parentElement&&t.parentElement.removeChild(t)}),this.containers={}},dismissAll:function(e){e&&this.containers[e]?this.containers[e].querySelectorAll(".vd-toast").forEach(n=>this.dismiss(n)):Object.values(this.containers).forEach(t=>{t.querySelectorAll(".vd-toast").forEach(s=>this.dismiss(s))})},getDefaultIcon:function(e){return{success:'',error:'',warning:'',info:''}[e]||""},success:function(e,t){return this.show(Object.assign({message:e,type:"success"},t))},error:function(e,t){return this.show(Object.assign({message:e,type:"error"},t))},warning:function(e,t){return this.show(Object.assign({message:e,type:"warning"},t))},info:function(e,t){return this.show(Object.assign({message:e,type:"info"},t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("toast",m),window.Toast=m})();(function(){"use strict";let m={tooltips:new Map,delayTimers:new Map,sanitizeHtml:function(e){if(typeof sanitizeHtml=="function")return sanitizeHtml(e);let t=document.createElement("div");return t.textContent=e||"",t.innerHTML},init:function(){document.querySelectorAll("[data-tooltip], [data-tooltip-html]").forEach(t=>{this.tooltips.has(t)||this.initTooltip(t)})},initTooltip:function(e){let t=this.createTooltip(e),n=[],s=()=>{this.showTooltip(e,t)},i=()=>{this.hideTooltip(e,t)},a=()=>{this.showTooltip(e,t)},o=()=>{this.hideTooltip(e,t)};e.addEventListener("mouseenter",s),e.addEventListener("mouseleave",i),e.addEventListener("focus",a),e.addEventListener("blur",o),n.push(()=>e.removeEventListener("mouseenter",s),()=>e.removeEventListener("mouseleave",i),()=>e.removeEventListener("focus",a),()=>e.removeEventListener("blur",o)),this.tooltips.set(e,{tooltip:t,cleanup:n})},createTooltip:function(e){let t=document.createElement("div");t.className="vd-tooltip",t.setAttribute("role","tooltip"),t.setAttribute("aria-hidden","true");let n="tooltip-"+Math.random().toString(36).substr(2,9);t.id=n,e.setAttribute("aria-describedby",n);let s=e.dataset.tooltipHtml,i=e.dataset.tooltip;s?(t.innerHTML=this.sanitizeHtml(s),t.classList.add("vd-tooltip-html")):i&&(t.textContent=i);let a=e.dataset.tooltipPlacement||e.dataset.placement||"top";t.setAttribute("data-placement",a),t.classList.add(`vd-tooltip-${a}`),e.dataset.tooltipVariant&&t.classList.add(`vd-tooltip-${e.dataset.tooltipVariant}`),e.dataset.tooltipSize&&t.classList.add(`vd-tooltip-${e.dataset.tooltipSize}`);let o=parseInt(e.dataset.tooltipDelay)||0;return t.dataset.delay=o,document.body.appendChild(t),t},showTooltip:function(e,t){let n=parseInt(t.dataset.delay)||0;if(n>0){let s=setTimeout(()=>{this.positionTooltip(e,t),t.classList.add("is-visible"),t.setAttribute("aria-hidden","false")},n);this.delayTimers.set(e,s)}else this.positionTooltip(e,t),t.classList.add("is-visible"),t.setAttribute("aria-hidden","false")},hideTooltip:function(e,t){let n=this.delayTimers.get(e);n&&(clearTimeout(n),this.delayTimers.delete(e)),t.classList.remove("is-visible"),t.setAttribute("aria-hidden","true")},positionTooltip:function(e,t){let n=t.dataset.placement||"top",s=e.getBoundingClientRect(),i=t.getBoundingClientRect(),a=window.pageYOffset||document.documentElement.scrollTop,o=window.pageXOffset||document.documentElement.scrollLeft,r=0,l=0;switch(n){case"top":r=s.top+a-i.height-8,l=s.left+o+s.width/2-i.width/2;break;case"bottom":r=s.bottom+a+8,l=s.left+o+s.width/2-i.width/2;break;case"left":r=s.top+a+s.height/2-i.height/2,l=s.left+o-i.width-8;break;case"right":r=s.top+a+s.height/2-i.height/2,l=s.right+o+8;break}let d=window.innerWidth,c=window.innerHeight,h=8;ld-h&&(l=d-i.width-h),ra+c-h&&(r=a+c-i.height-h),t.style.cssText=`position: absolute; top: 0; left: 0; transform: translate(${l}px, ${r}px);`},show:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t&&this.tooltips.has(t)){let{tooltip:n}=this.tooltips.get(t);this.showTooltip(t,n)}},hide:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t&&this.tooltips.has(t)){let{tooltip:n}=this.tooltips.get(t);this.hideTooltip(t,n)}},update:function(e,t,n=!1){let s=typeof e=="string"?document.querySelector(e):e;if(s&&this.tooltips.has(s)){let{tooltip:i}=this.tooltips.get(s);n?(i.innerHTML=this.sanitizeHtml(t),i.classList.add("vd-tooltip-html")):(i.textContent=t,i.classList.remove("vd-tooltip-html"))}},destroy:function(e){let t=this.tooltips.get(e);if(!t)return;let n=this.delayTimers.get(e);n&&(clearTimeout(n),this.delayTimers.delete(e)),t.cleanup.forEach(s=>s()),t.tooltip&&t.tooltip.parentNode&&t.tooltip.parentNode.removeChild(t.tooltip),this.tooltips.delete(e)},destroyAll:function(){this.tooltips.forEach((e,t)=>{this.destroy(t)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("tooltips",m),window.VanduoTooltips=m})();(function(){"use strict";let m={minQueryLength:2,maxResults:10,debounceMs:150,highlightTag:"mark",keyboardShortcut:!0,containerSelector:".vd-doc-search",inputSelector:".vd-doc-search-input",resultsSelector:".vd-doc-search-results",contentSelector:".doc-content section[id]",titleSelector:".demo-title, h2, h3",navSelector:".doc-nav-link",sectionSelector:".doc-nav-section",excludeFromContent:"pre, code, script, style",maxContentLength:500,data:null,categoryIcons:{"getting-started":"ph-rocket-launch",core:"ph-cube",components:"ph-puzzle-piece",interactive:"ph-cursor-click","data-display":"ph-table",feedback:"ph-bell",meta:"ph-info",default:"ph-file-text"},onSelect:null,onSearch:null,onOpen:null,onClose:null,emptyTitle:"No results found",emptyText:"Try different keywords or check spelling",placeholder:"Search..."};function e(n){let s=Object.assign({},m,n||{}),i={initialized:!1,index:[],results:[],activeIndex:-1,isOpen:!1,query:"",container:null,input:null,resultsContainer:null,debounceTimer:null,boundHandlers:{}};function a(b,S,...A){try{S(...A)}catch(D){console.warn('[Vanduo Search] Callback error in "'+b+'":',D)}}function o(b){if(i.resultsContainer)try{i.resultsContainer.innerHTML=b}catch(S){console.warn("[Vanduo Search] Failed to render results:",S)}}function r(){return i.initialized?U:(i.container=document.querySelector(s.containerSelector),!i.container||(i.input=i.container.querySelector(s.inputSelector),i.resultsContainer=i.container.querySelector(s.resultsSelector),!i.input||!i.resultsContainer)?(i.initialized=!1,null):(s.placeholder&&i.input.setAttribute("placeholder",s.placeholder),l(),v(),C(),i.initialized=!0,U))}function l(){if(i.index=[],s.data&&Array.isArray(s.data)){s.data.forEach(function(A){i.index.push({id:A.id||p(A.title),title:A.title||"",category:A.category||"",categorySlug:p(A.category||""),content:A.content||"",keywords:A.keywords||u(A.title+" "+A.content),url:A.url||"#"+(A.id||p(A.title)),icon:A.icon||""})});return}let b=document.querySelectorAll(s.contentSelector),S=d();b.forEach(function(A){let D=A.id;if(!D)return;let N=A.querySelector(s.titleSelector),q=N?N.textContent.replace(/v[\d.]+/g,"").trim():D,X=S[D]||"Documentation",$=c(A),B=h(A,q),Y=N?N.querySelector("i.ph"):null,W="";if(Y&&Y.classList){for(let K=0;K2&&A.push(q)}),b.querySelectorAll("code").forEach(function(q){let $=(q.textContent||"").match(/\.([\w-]+)/g);$&&$.forEach(function(B){A.push(B.substring(1).toLowerCase())})}),b.querySelectorAll("[data-tooltip], [data-modal]").forEach(function(q){q.getAttributeNames().filter(function($){return $.startsWith("data-")}).forEach(function($){A.push($.replace("data-",""))})}),Array.from(new Set(A))}function u(b){return b.toLowerCase().split(/\s+/).filter(function(A){return A.length>2})}function p(b){return b.toLowerCase().replace(/\s+/g,"-").replace(/[^a-z0-9-]/g,"")}function v(){i.boundHandlers.handleInput=function(b){L(b)},i.boundHandlers.handleFocus=function(){i.query.length>=s.minQueryLength&&H()},i.boundHandlers.handleKeydown=function(b){P(b)},i.boundHandlers.handleOutsideClick=function(b){i.container.contains(b.target)||z()},i.boundHandlers.handleGlobalKeydown=function(b){s.keyboardShortcut&&(b.metaKey||b.ctrlKey)&&b.key==="k"&&(b.preventDefault(),i.input.focus(),i.input.select())},i.boundHandlers.handleResultClick=function(b){let S=b.target.closest(".vd-doc-search-result");if(S){let A=parseInt(S.dataset.index,10);I(A)}},i.input.addEventListener("input",i.boundHandlers.handleInput),i.input.addEventListener("focus",i.boundHandlers.handleFocus),i.input.addEventListener("keydown",i.boundHandlers.handleKeydown),document.addEventListener("click",i.boundHandlers.handleOutsideClick),document.addEventListener("keydown",i.boundHandlers.handleGlobalKeydown),i.resultsContainer.addEventListener("click",i.boundHandlers.handleResultClick)}function y(){i.input&&(i.input.removeEventListener("input",i.boundHandlers.handleInput),i.input.removeEventListener("focus",i.boundHandlers.handleFocus),i.input.removeEventListener("keydown",i.boundHandlers.handleKeydown)),document.removeEventListener("click",i.boundHandlers.handleOutsideClick),document.removeEventListener("keydown",i.boundHandlers.handleGlobalKeydown),i.resultsContainer&&i.resultsContainer.removeEventListener("click",i.boundHandlers.handleResultClick)}function C(){let b=i.resultsContainer.id||"search-results-"+Math.random().toString(36).substr(2,9);i.resultsContainer.id=b,i.input.setAttribute("role","combobox"),i.input.setAttribute("aria-autocomplete","list"),i.input.setAttribute("aria-controls",b),i.input.setAttribute("aria-expanded","false"),i.resultsContainer.setAttribute("role","listbox"),i.resultsContainer.setAttribute("aria-label","Search results")}function L(b){let S=b.target.value.trim();i.debounceTimer&&clearTimeout(i.debounceTimer),i.debounceTimer=setTimeout(function(){if(i.query=S,S.length=s.minQueryLength&&(b.preventDefault(),i.results=x(i.query),_(),H());return}switch(b.key){case"ArrowDown":b.preventDefault(),w(1);break;case"ArrowUp":b.preventDefault(),w(-1);break;case"Enter":b.preventDefault(),i.activeIndex>=0?I(i.activeIndex):i.results.length>0&&I(0);break;case"Escape":b.preventDefault(),z();break;case"Tab":z();break}}function x(b){let S=b.toLowerCase().split(/\s+/).filter(function(D){return D.length>0}),A=[];return i.index.forEach(function(D){let N=0,q=D.title.toLowerCase(),X=D.category.toLowerCase(),$=D.content.toLowerCase();S.forEach(function(B){q.includes(B)&&(N+=100,q===B?N+=50:q.startsWith(B)&&(N+=25)),X.includes(B)&&(N+=50),D.keywords.some(function(W){return W.includes(B)})&&(N+=30),$.includes(B)&&(N+=10)}),N>0&&A.push({id:D.id,title:D.title,category:D.category,categorySlug:D.categorySlug,content:D.content,url:D.url,icon:D.icon,score:N})}),A.sort(function(D,N){return N.score-D.score}),A.slice(0,s.maxResults)}function _(){if(i.results.length===0){o(V());return}let b='
      ';i.results.forEach(function(S,A){let D=A===i.activeIndex,N=S.icon||k(S.categorySlug),q=T(S.content,i.query);b+='
    • '+M(S.title,i.query)+'
      '+f(S.category)+'
      '+M(q,i.query)+"
      • "}),b+="
    ",b+=g(),o(b)}function V(){return'
    '+f(s.emptyTitle)+'
    '+f(s.emptyText)+"
    "}function g(){return'
    \u2191\u2193 to navigate\u21B5 to selectesc to close
    '}function k(b){return s.categoryIcons[b]||s.categoryIcons.default||"ph-file-text"}function T(b,S){let A=S.toLowerCase().split(/\s+/),D=b.toLowerCase(),N=100,q=-1;for(let Y=0;Y0&&(B="..."+B),$0}),D=f(b);return A.forEach(function(N){if(N.length>50)return;let q=new RegExp("("+N.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")+")","gi");D=D.replace(q,"<"+s.highlightTag+">$1")}),D}function f(b){let S=document.createElement("div");return S.textContent=b,S.innerHTML}function w(b){let S=i.activeIndex+b;S<0?S=i.results.length-1:S>=i.results.length&&(S=0),E(S)}function E(b){let S=i.resultsContainer.querySelector(".vd-doc-search-result.is-active");S&&(S.classList.remove("is-active"),S.setAttribute("aria-selected","false")),i.activeIndex=b;let A=i.resultsContainer.querySelector('[data-index="'+b+'"]');A&&(A.classList.add("is-active"),A.setAttribute("aria-selected","true"),i.input.setAttribute("aria-activedescendant","vd-doc-search-result-"+b),A.scrollIntoView({block:"nearest"}))}function I(b){let S=i.results[b];if(!S)return;if(z(),i.input.value="",i.query="",typeof s.onSelect=="function"){a("onSelect",s.onSelect,S);return}let A=document.querySelector(S.url);A&&(A.scrollIntoView({behavior:"smooth",block:"start"}),window.history.pushState(null,"",S.url),O(S.id))}function O(b){document.querySelectorAll(s.navSelector).forEach(function(A){A.classList.remove("active"),A.getAttribute("href")==="#"+b&&A.classList.add("active")})}function H(){i.isOpen||(i.isOpen=!0,i.resultsContainer.classList.add("is-open"),i.input.setAttribute("aria-expanded","true"),typeof s.onOpen=="function"&&a("onOpen",s.onOpen))}function z(){i.isOpen&&(i.isOpen=!1,i.activeIndex=-1,i.resultsContainer.classList.remove("is-open"),i.input.setAttribute("aria-expanded","false"),i.input.removeAttribute("aria-activedescendant"),typeof s.onClose=="function"&&a("onClose",s.onClose))}function R(){y(),i.initialized=!1,i.index=[],i.results=[],i.isOpen=!1,i.query="",i.debounceTimer&&clearTimeout(i.debounceTimer),i.resultsContainer&&o("")}function j(){l()}function G(b){Object.assign(s,b)}function Z(){return Object.assign({},s)}function F(){return i.index.slice()}let U={init:r,destroy:R,rebuild:j,search:x,open:H,close:z,setConfig:G,getConfig:Z,getIndex:F};return U}let t={create:function(n){let s=e(n);return s&&s.init(),s||null},_instance:null,config:Object.assign({},m),init:function(n){return this._instance&&this._instance.destroy(),n&&Object.assign(this.config,n),this._instance=e(this.config),this._instance?this._instance.init():null},destroy:function(){this._instance&&(this._instance.destroy(),this._instance=null)},destroyAll:function(){this.destroy()},rebuild:function(){this._instance&&this._instance.rebuild()},search:function(n){return this._instance?this._instance.search(n):[]},open:function(){this._instance&&this._instance.open()},close:function(){this._instance&&this._instance.close()}};typeof window.Vanduo<"u"&&window.Vanduo.register("docSearch",t),window.Search=t,window.DocSearch=t,window.VanduoDocSearch=t})();(function(){"use strict";let m={instances:new Map,currentDrag:null,touchState:null,feedbackElement:null,containerSelector:".vd-draggable-container, .vd-draggable-container-vertical",init:function(){document.querySelectorAll(".vd-draggable, [data-draggable]").forEach(s=>{this.instances.has(s)||this.initDraggable(s)}),document.querySelectorAll(this.containerSelector).forEach(s=>{this.instances.has(s)||this.initContainer(s)}),document.querySelectorAll(".vd-drop-zone").forEach(s=>{this.instances.has(s)||this.initDropZone(s)}),this.createFeedbackElement()},initDraggable:function(e){let t=[];e.hasAttribute("draggable")||e.setAttribute("draggable","true"),e.hasAttribute("tabindex")||e.setAttribute("tabindex","0"),e.setAttribute("role","option"),e.setAttribute("aria-roledescription","draggable item"),e.setAttribute("aria-grabbed","false");let n=c=>{this.handleDragStart(c,e)};e.addEventListener("dragstart",n),t.push(()=>e.removeEventListener("dragstart",n));let s=c=>{this.handleDrag(c,e)};e.addEventListener("drag",s),t.push(()=>e.removeEventListener("drag",s));let i=c=>{this.handleDragEnd(c,e)};e.addEventListener("dragend",i),t.push(()=>e.removeEventListener("dragend",i));let a=c=>{this.handleTouchStart(c,e)};e.addEventListener("touchstart",a),t.push(()=>e.removeEventListener("touchstart",a));let o=c=>{this.handleTouchMove(c,e)};e.addEventListener("touchmove",o,{passive:!1}),t.push(()=>e.removeEventListener("touchmove",o));let r=c=>{this.handleTouchEnd(c,e)};e.addEventListener("touchend",r,{passive:!1}),t.push(()=>e.removeEventListener("touchend",r));let l=c=>{this.handleTouchEnd(c,e)};e.addEventListener("touchcancel",l),t.push(()=>e.removeEventListener("touchcancel",l));let d=c=>{this.handleKeydown(c,e)};e.addEventListener("keydown",d),t.push(()=>e.removeEventListener("keydown",d)),this.instances.set(e,{cleanup:t})},initContainer:function(e){e.setAttribute("role","listbox"),e.setAttribute("aria-label",e.getAttribute("aria-label")||"Draggable items"),e.querySelectorAll(".vd-draggable-item").forEach(o=>{this.instances.has(o)||this.initDraggable(o)});let n=[],s=o=>{o.preventDefault(),o.dataTransfer.dropEffect="move"},i=o=>{if(o.preventDefault(),o.dataTransfer.dropEffect="move",!this.currentDrag)return;let r=this.currentDrag.element;e.contains(r)&&(o.clientX===0&&o.clientY===0||this.handleReorder(e,r,o.clientX,o.clientY))},a=o=>{o.preventDefault()};e.addEventListener("dragenter",s),e.addEventListener("dragover",i),e.addEventListener("drop",a),n.push(()=>{e.removeEventListener("dragenter",s),e.removeEventListener("dragover",i),e.removeEventListener("drop",a)}),this.instances.set(e,{cleanup:n})},initDropZone:function(e){let t=[];e.setAttribute("role","region"),e.setAttribute("aria-dropeffect","move"),e.hasAttribute("aria-label")||e.setAttribute("aria-label","Drop zone");let n=o=>{o.preventDefault(),this.handleDragOver(o,e)};e.addEventListener("dragover",n),t.push(()=>e.removeEventListener("dragover",n));let s=o=>{o.preventDefault(),this.handleDragEnter(o,e)};e.addEventListener("dragenter",s),t.push(()=>e.removeEventListener("dragenter",s));let i=o=>{this.handleDragLeave(o,e)};e.addEventListener("dragleave",i),t.push(()=>e.removeEventListener("dragleave",i));let a=o=>{o.preventDefault(),this.handleDrop(o,e)};e.addEventListener("drop",a),t.push(()=>e.removeEventListener("drop",a)),this.instances.set(e,{cleanup:t})},createFeedbackElement:function(){if(!this.feedbackElement){let e=document.querySelector(".vd-drag-feedback");if(e){this.feedbackElement=e;return}this.feedbackElement=document.createElement("div"),this.feedbackElement.className="vd-drag-feedback hidden",this.feedbackElement.setAttribute("role","presentation"),document.body.appendChild(this.feedbackElement)}},handleDragStart:function(e,t){t.classList.add("is-dragging"),t.setAttribute("aria-grabbed","true"),this.currentDrag={element:t,initialPosition:{x:e.clientX,y:e.clientY},initialBounds:t.getBoundingClientRect(),data:this.getData(t)},e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",this.currentDrag.data),t.dispatchEvent(new CustomEvent("draggable:start",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:e.clientX,y:e.clientY}}}))},handleDrag:function(e,t){this.currentDrag&&t.dispatchEvent(new CustomEvent("draggable:drag",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:e.clientX,y:e.clientY},delta:{x:e.clientX-this.currentDrag.initialPosition.x,y:e.clientY-this.currentDrag.initialPosition.y}}}))},handleDragEnd:function(e,t){t.classList.remove("is-dragging"),t.classList.add("is-dropped"),setTimeout(()=>t.classList.remove("is-dropped"),300),t.setAttribute("aria-grabbed","false"),this.feedbackElement&&this.feedbackElement.classList.add("hidden");let n=this.currentDrag?.data||this.getData(t),s=this.currentDrag?.initialPosition||{x:0,y:0};t.dispatchEvent(new CustomEvent("draggable:end",{bubbles:!0,detail:{element:t,data:n,position:{x:e.clientX,y:e.clientY},delta:{x:e.clientX-s.x,y:e.clientY-s.y}}})),this.currentDrag=null},handleTouchStart:function(e,t){let n=e.touches[0],s=t.getBoundingClientRect();this.touchState={element:t,startX:n.clientX,startY:n.clientY,lastX:n.clientX,lastY:n.clientY,offsetX:n.clientX-s.left,offsetY:n.clientY-s.top,startTime:Date.now(),isDragging:!1}},handleTouchMove:function(e,t){if(!this.touchState)return;let n=e.touches[0];this.touchState.lastX=n.clientX,this.touchState.lastY=n.clientY;let s=n.clientX-this.touchState.startX,i=n.clientY-this.touchState.startY;if((Math.abs(s)>10||Math.abs(i)>10)&&(e.cancelable&&e.preventDefault(),this.touchState.isDragging||(this.touchState.isDragging=!0,t.classList.add("is-dragging"),t.setAttribute("aria-grabbed","true"),this.currentDrag={element:t,initialPosition:{x:this.touchState.startX,y:this.touchState.startY},initialBounds:t.getBoundingClientRect(),data:this.getData(t),offsetX:this.touchState.offsetX,offsetY:this.touchState.offsetY},t.dispatchEvent(new CustomEvent("draggable:start",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:n.clientX,y:n.clientY}}}))),this.updateFeedback(n.clientX,n.clientY),this.currentDrag)){t.dispatchEvent(new CustomEvent("draggable:drag",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:n.clientX,y:n.clientY},delta:{x:s,y:i}}})),this.updateTouchDropZone(n.clientX,n.clientY);let a=t.closest(this.containerSelector);a&&a.contains(t)&&this.handleReorder(a,t,n.clientX,n.clientY)}},handleTouchEnd:function(e,t){if(this.touchState&&this.touchState.isDragging){e.cancelable&&e.preventDefault();let n=e.changedTouches?.[0],s={x:n?.clientX??this.touchState.lastX??this.touchState.startX,y:n?.clientY??this.touchState.lastY??this.touchState.startY},i=this.resolveDropZoneAtPoint(s.x,s.y)||this.touchState.overZone;i?this.dispatchDrop(i,s):this.touchState.overZone&&this.touchState.overZone.classList.remove("is-drag-over"),t.classList.remove("is-dragging"),t.classList.add("is-dropped"),t.setAttribute("aria-grabbed","false"),setTimeout(()=>t.classList.remove("is-dropped"),300),this.feedbackElement&&this.feedbackElement.classList.add("hidden");let a=this.currentDrag?.data||this.getData(t),o=this.touchState?.startX||0,r=this.touchState?.startY||0;t.dispatchEvent(new CustomEvent("draggable:end",{bubbles:!0,detail:{element:t,data:a,position:s,delta:{x:s.x-o,y:s.y-r}}}))}this.touchState=null,this.currentDrag=null},handleDragOver:function(e,t){e.preventDefault(),e.dataTransfer.dropEffect="move"},handleDragEnter:function(e,t){e.preventDefault(),t.classList.add("is-drag-over")},handleDragLeave:function(e,t){t.classList.remove("is-drag-over")},handleDrop:function(e,t){e.preventDefault(),this.dispatchDrop(t,{x:e.clientX,y:e.clientY})},resolveDropZoneAtPoint:function(e,t){if(!Number.isFinite(e)||!Number.isFinite(t))return null;if(typeof document.elementsFromPoint=="function"){let a=document.elementsFromPoint(e,t);for(let o of a){let r=o.closest(".vd-drop-zone");if(r)return r}}let n=document.elementFromPoint(e,t),s=n?n.closest(".vd-drop-zone"):null;if(s)return s;let i=document.querySelectorAll(".vd-drop-zone");for(let a of i){let o=a.getBoundingClientRect();if(e>=o.left&&e<=o.right&&t>=o.top&&t<=o.bottom)return a}return null},updateTouchDropZone:function(e,t){if(!this.touchState)return;let n=this.resolveDropZoneAtPoint(e,t),s=this.touchState.overZone||null;s&&s!==n&&s.classList.remove("is-drag-over"),n&&n!==s&&n.classList.add("is-drag-over"),this.touchState.overZone=n||null},dispatchDrop:function(e,t){e.classList.remove("is-drag-over"),e.dispatchEvent(new CustomEvent("draggable:drop",{bubbles:!0,detail:{zone:e,element:this.currentDrag?.element,data:this.currentDrag?.data,position:t}}))},handleReorder:function(e,t,n,s){let i=e.classList.contains("vd-draggable-container-vertical"),o=[...e.querySelectorAll(".vd-draggable-item:not(.is-dragging), .vd-draggable:not(.is-dragging)")].reduce((r,l)=>{let d=l.getBoundingClientRect(),c=i?s-d.top-d.height/2:n-d.left-d.width/2;return c<0&&c>r.offset?{offset:c,element:l}:r},{offset:Number.NEGATIVE_INFINITY}).element;o==null?e.appendChild(t):e.insertBefore(t,o)},handleKeydown:function(e,t){switch(e.key){case"Enter":case" ":e.preventDefault(),t.click();break;case"Escape":t.classList.contains("is-dragging")&&(t.classList.remove("is-dragging"),t.setAttribute("aria-grabbed","false"),this.feedbackElement&&this.feedbackElement.classList.add("hidden"),this.currentDrag=null);break;case"ArrowUp":case"ArrowLeft":{e.preventDefault();let n=t.previousElementSibling;n&&(n.classList.contains("vd-draggable")||n.classList.contains("vd-draggable-item"))&&(t.parentNode.insertBefore(t,n),t.focus(),t.dispatchEvent(new CustomEvent("draggable:reorder",{bubbles:!0,detail:{element:t,direction:"up"}})));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();let n=t.nextElementSibling;n&&(n.classList.contains("vd-draggable")||n.classList.contains("vd-draggable-item"))&&(t.parentNode.insertBefore(n,t),t.focus(),t.dispatchEvent(new CustomEvent("draggable:reorder",{bubbles:!0,detail:{element:t,direction:"down"}})));break}}},getData:function(e){return e.dataset.draggable||e.textContent.trim()},updateFeedback:function(e,t){if(!this.currentDrag)return;this.feedbackElement.classList.remove("hidden");let n=this.currentDrag.initialBounds;this.feedbackElement.innerHTML="";let s=this.currentDrag.element.cloneNode(!0);this.feedbackElement.appendChild(s);let i=this.currentDrag.offsetX??20,a=this.currentDrag.offsetY??20;Object.assign(this.feedbackElement.style,{left:e-i+"px",top:t-a+"px",width:n.width+"px",height:n.height+"px"})},makeDraggable:function(e,t={}){let n=typeof e=="string"?document.querySelector(e):e;n&&!this.instances.has(n)&&(n.classList.add("vd-draggable"),n.setAttribute("draggable","true"),t.data&&(n.dataset.draggable=t.data),this.initDraggable(n))},removeDraggable:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&this.instances.has(t)&&(this.instances.get(t).cleanup.forEach(s=>s()),this.instances.delete(t),t.classList.remove("vd-draggable"),t.removeAttribute("draggable"),t.removeAttribute("data-draggable"))},destroy:function(e){this.removeDraggable(e)},destroyAll:function(){Array.from(this.instances.keys()).forEach(t=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("draggable",m),window.VanduoDraggable=m})();(function(){"use strict";let m=new Map;function e(r){try{return new URL(r,window.location.href).origin===window.location.origin}catch{return!1}}function t(r,l){let c=new DOMParser().parseFromString(l.trim(),"text/html"),h=["SCRIPT","IFRAME","OBJECT","EMBED","FORM","BASE","LINK","META","STYLE"];for(let v of h){let y=c.querySelectorAll(v);for(let C=y.length-1;C>=0;C--)y[C].parentNode.removeChild(y[C])}function u(v){if(v.nodeType===Node.ELEMENT_NODE){let y=v.attributes;for(let L=y.length-1;L>=0;L--){let P=y[L].name.toLowerCase(),_=y[L].value.toLowerCase().trim();(P.startsWith("on")||_.startsWith("javascript:")||_.startsWith("data:")||_.startsWith("vbscript:"))&&v.removeAttribute(y[L].name)}let C=v.childNodes;for(let L=0;L
    Loading\u2026
    '}function s(){return'
    Loading\u2026
    '}function i(r){return!r||r==="skeleton"?n():r==="spinner"?s():r}function a(r,l,d){r.dispatchEvent(new CustomEvent(l,{bubbles:!0,detail:d||{}}))}let o={observe:function(r,l,d){if(!(r instanceof Element)){console.warn("[VanduoLazyLoad] observe() requires a DOM Element.");return}if(typeof l!="function"){console.warn("[VanduoLazyLoad] observe() requires a callback function.");return}if(m.has(r))return;let c=d&&d.threshold!=null?d.threshold:0,h=d&&d.rootMargin?d.rootMargin:"0px",u=new IntersectionObserver(function(p,v){p.forEach(function(y){if(y.isIntersecting){v.unobserve(y.target),m.delete(y.target);try{l(y.target)}catch(C){console.error("[VanduoLazyLoad] Callback threw:",C)}}})},{threshold:c,rootMargin:h});m.set(r,u),u.observe(r)},unobserve:function(r){let l=m.get(r);l&&(l.unobserve(r),m.delete(r))},unobserveAll:function(){m.forEach(function(r,l){r.unobserve(l)}),m.clear()},loadSection:function(r,l,d){if(typeof r!="string"||!r){console.warn("[VanduoLazyLoad] loadSection() requires a non-empty URL string.");return}if(!(l instanceof Element)){console.warn("[VanduoLazyLoad] loadSection() requires a DOM Element as containerEl.");return}if(!e(r)){console.error("[VanduoLazyLoad] loadSection() blocked cross-origin URL:",r);return}let c=d||{},h=i(c.placeholder);t(l,h),a(l,"lazysection:loading",{url:r}),this.observe(l,function(){let u=new window.AbortController,p=setTimeout(function(){u.abort()},1e4);window.fetch(r,{signal:u.signal}).then(function(v){if(clearTimeout(p),!v.ok)throw new Error("HTTP "+v.status);return v.text()}).then(function(v){t(l,v),a(l,"lazysection:loaded",{url:r}),typeof window.Vanduo<"u"&&window.Vanduo.init(),typeof c.onLoaded=="function"&&c.onLoaded(l)}).catch(function(v){let y=document.createElement("div");y.className="vd-alert vd-alert-error",y.setAttribute("role","alert");let C=document.createElement("span");C.textContent="Failed to load content. ";let L=document.createElement("small");for(L.style.opacity="0.7",L.textContent=v.message,y.appendChild(C),y.appendChild(L);l.firstChild;)l.removeChild(l.firstChild);l.appendChild(y),a(l,"lazysection:error",{url:r,error:v}),console.error("[VanduoLazyLoad] loadSection failed:",v),typeof c.onError=="function"&&c.onError(v)})},{threshold:c.threshold,rootMargin:c.rootMargin})},init:function(){let r=this;document.querySelectorAll("[data-vd-lazy]").forEach(function(d){if(m.has(d)||d.dataset.vdLazyState==="loading"||d.dataset.vdLazyState==="loaded")return;let c=d.getAttribute("data-vd-lazy");if(!c)return;d.dataset.vdLazyState="loading";let h=d.getAttribute("data-vd-lazy-placeholder")||"skeleton";r.loadSection(c,d,{placeholder:h,onLoaded:function(){d.dataset.vdLazyState="loaded"},onError:function(){d.dataset.vdLazyState="error"}})})}};typeof window.Vanduo<"u"&&window.Vanduo.register("LazyLoad",o),window.VanduoLazyLoad=o})();(function(){"use strict";let m={observers:new Map,init:function(){document.querySelectorAll("[data-glass-scroll]").forEach(e=>{this.observers.has(e)||this.initElement(e)})},initElement:function(e){let t=e.dataset.glassSentinel,n;if(t&&(n=document.querySelector(t)),n||(n=e.previousElementSibling),!n){e.classList.add("is-glass-active");return}let s=new IntersectionObserver(i=>{i.forEach(a=>{e.classList.toggle("is-glass-active",!a.isIntersecting)})},{threshold:0,rootMargin:"0px"});s.observe(n),this.observers.set(e,s)},destroy:function(e){let t=this.observers.get(e);t&&(t.disconnect(),this.observers.delete(e))},destroyAll:function(){this.observers.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("glassScroll",m),window.VanduoGlassScroll=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll(".vd-flow, .vd-carousel").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=e.querySelector(".vd-flow-track");if(!t)return;let n=Array.from(t.querySelectorAll(".vd-flow-slide"));if(n.length===0)return;let s=e.classList.contains("vd-flow-fade"),i=e.hasAttribute("data-vd-autoplay"),a=parseInt(e.getAttribute("data-vd-interval"),10)||5e3,o=e.getAttribute("data-vd-loop")!=="false",r={current:0,total:n.length,autoplayTimer:null,isFade:s,loop:o,isDragging:!1,startX:0,currentX:0,threshold:50},l=[];n.forEach((g,k)=>{g.setAttribute("role","group"),g.setAttribute("aria-roledescription","slide"),g.setAttribute("aria-label","Slide "+(k+1)+" of "+n.length),k===0&&g.classList.add("is-active")}),e.setAttribute("role","region"),e.setAttribute("aria-roledescription","carousel"),e.getAttribute("aria-label")||e.setAttribute("aria-label","Carousel");let d=document.createElement("div");d.setAttribute("aria-live","polite"),d.setAttribute("aria-atomic","true"),d.className="sr-only",d.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);",e.appendChild(d);let c=(g,k)=>{k===void 0&&(k=!0);let T=g;r.loop?T=(g%r.total+r.total)%r.total:T=Math.max(0,Math.min(g,r.total-1));let M=r.current;r.current=T,r.isFade?n.forEach((w,E)=>{w.classList.toggle("is-active",E===T)}):t.style.transform="translateX(-"+T*100+"%)",e.querySelectorAll(".vd-flow-indicator").forEach((w,E)=>{w.classList.toggle("is-active",E===T),w.setAttribute("aria-selected",E===T?"true":"false")}),n.forEach((w,E)=>{w.setAttribute("aria-hidden",E!==T?"true":"false")}),k&&(d.textContent="Slide "+(T+1)+" of "+r.total),e.dispatchEvent(new CustomEvent("flow:change",{detail:{current:T,previous:M,total:r.total}}))},h=()=>c(r.current+1),u=()=>c(r.current-1),p=e.querySelector(".vd-flow-prev"),v=e.querySelector(".vd-flow-next");if(p){let g=()=>u();p.addEventListener("click",g),l.push(()=>p.removeEventListener("click",g))}if(v){let g=()=>h();v.addEventListener("click",g),l.push(()=>v.removeEventListener("click",g))}e.querySelectorAll(".vd-flow-indicator").forEach((g,k)=>{g.setAttribute("role","tab"),g.setAttribute("aria-selected",k===0?"true":"false"),g.setAttribute("aria-label","Go to slide "+(k+1));let T=()=>c(k);g.addEventListener("click",T),l.push(()=>g.removeEventListener("click",T))});let C=g=>{g.key==="ArrowLeft"&&(u(),g.preventDefault()),g.key==="ArrowRight"&&(h(),g.preventDefault())};e.setAttribute("tabindex","0"),e.addEventListener("keydown",C),l.push(()=>e.removeEventListener("keydown",C));let L=g=>{r.isDragging=!0,r.startX=g.clientX||g.touches&&g.touches[0].clientX||0,r.currentX=r.startX,e.classList.add("is-dragging")},P=g=>{r.isDragging&&(r.currentX=g.clientX||g.touches&&g.touches[0].clientX||0)},x=()=>{if(!r.isDragging)return;r.isDragging=!1,e.classList.remove("is-dragging");let g=r.startX-r.currentX;Math.abs(g)>r.threshold&&(g>0?h():u())};e.addEventListener("mousedown",L),e.addEventListener("mousemove",P),e.addEventListener("mouseup",x),e.addEventListener("mouseleave",x),e.addEventListener("touchstart",L,{passive:!0}),e.addEventListener("touchmove",P,{passive:!0}),e.addEventListener("touchend",x),l.push(()=>e.removeEventListener("mousedown",L),()=>e.removeEventListener("mousemove",P),()=>e.removeEventListener("mouseup",x),()=>e.removeEventListener("mouseleave",x),()=>e.removeEventListener("touchstart",L),()=>e.removeEventListener("touchmove",P),()=>e.removeEventListener("touchend",x));let _=()=>{V(),r.autoplayTimer=setInterval(h,a)},V=()=>{r.autoplayTimer&&(clearInterval(r.autoplayTimer),r.autoplayTimer=null)};if(i){_();let g=()=>V(),k=()=>_();e.addEventListener("mouseenter",g),e.addEventListener("mouseleave",k),e.addEventListener("focusin",g),e.addEventListener("focusout",k),l.push(()=>e.removeEventListener("mouseenter",g),()=>e.removeEventListener("mouseleave",k),()=>e.removeEventListener("focusin",g),()=>e.removeEventListener("focusout",k),()=>V())}c(0,!1),this.instances.set(e,{cleanup:l,goTo:c,next:h,prev:u,getState:()=>({...r})})},goTo:function(e,t){let n=this.instances.get(e);n&&n.goTo(t)},next:function(e){let t=this.instances.get(e);t&&t.next()},prev:function(e){let t=this.instances.get(e);t&&t.prev()},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("flow",m),window.VanduoFlow=m})();(function(){"use strict";let m={instances:new Map,_globalCleanups:[],init:function(){if(document.querySelectorAll("[data-vd-bubble], [data-vd-popover]").forEach(t=>{this.instances.has(t)||this.initInstance(t)}),this._globalCleanups.length===0){let t=s=>{this.instances.forEach((i,a)=>{!i.popover.contains(s.target)&&!a.contains(s.target)&&this.hide(a)})},n=s=>{s.key==="Escape"&&this.instances.forEach((i,a)=>this.hide(a))};document.addEventListener("click",t,!0),document.addEventListener("keydown",n),this._globalCleanups.push(()=>document.removeEventListener("click",t,!0),()=>document.removeEventListener("keydown",n))}},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-bubble-placement")||e.getAttribute("data-vd-popover-placement")||"bottom",s=document.createElement("div");s.className="vd-bubble-content",s.setAttribute("role","dialog"),s.setAttribute("aria-modal","false"),s.setAttribute("data-placement",n);let i=e.getAttribute("data-vd-bubble-title")||e.getAttribute("data-vd-popover-title"),a=e.getAttribute("data-vd-bubble")||e.getAttribute("data-vd-popover")||"",o=e.getAttribute("data-vd-bubble-html")||e.getAttribute("data-vd-popover-html");if(i){let c=document.createElement("div");c.className="vd-bubble-header";let h=document.createElement("span");h.textContent=i;let u=document.createElement("button");u.className="vd-bubble-close",u.setAttribute("aria-label","Close"),u.innerHTML="×",c.appendChild(h),c.appendChild(u),s.appendChild(c);let p=v=>{v.stopPropagation(),this.hide(e)};u.addEventListener("click",p),t.push(()=>u.removeEventListener("click",p))}let r=document.createElement("div");r.className="vd-bubble-body",o?typeof sanitizeHtml=="function"?r.innerHTML=sanitizeHtml(o):r.textContent=o:r.textContent=a,s.appendChild(r),document.body.appendChild(s);let l="vd-bubble-"+Math.random().toString(36).slice(2,9);s.id=l,e.setAttribute("aria-haspopup","dialog"),e.setAttribute("aria-expanded","false"),e.setAttribute("aria-controls",l);let d=c=>{c.stopPropagation(),s.classList.contains("is-visible")?this.hide(e):(this.hideAll(),this.show(e))};e.addEventListener("click",d),t.push(()=>e.removeEventListener("click",d)),this.instances.set(e,{popover:s,cleanup:t,placement:n})},position:function(e,t,n){let s=e.getBoundingClientRect(),i=t.getBoundingClientRect(),a=10,o,r;switch(n){case"top":o=s.top-i.height-a+window.scrollY,r=s.left+(s.width-i.width)/2+window.scrollX;break;case"left":o=s.top+(s.height-i.height)/2+window.scrollY,r=s.left-i.width-a+window.scrollX;break;case"right":o=s.top+(s.height-i.height)/2+window.scrollY,r=s.right+a+window.scrollX;break;default:o=s.bottom+a+window.scrollY,r=s.left+(s.width-i.width)/2+window.scrollX}r=Math.max(8,Math.min(r,window.innerWidth-i.width-8)),o=Math.max(8,o),t.style.top=o+"px",t.style.left=r+"px"},show:function(e){let t=this.instances.get(e);if(!t)return;let{popover:n,placement:s}=t;n.style.display="block",n.classList.add("is-visible"),e.setAttribute("aria-expanded","true"),requestAnimationFrame(()=>{this.position(e,n,s)}),e.dispatchEvent(new CustomEvent("bubble:show",{bubbles:!0}))},hide:function(e){let t=this.instances.get(e);t&&(t.popover.classList.remove("is-visible"),e.setAttribute("aria-expanded","false"),e.dispatchEvent(new CustomEvent("bubble:hide",{bubbles:!0})))},hideAll:function(){this.instances.forEach((e,t)=>this.hide(t))},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),t.popover.parentNode&&t.popover.parentNode.removeChild(t.popover),e.removeAttribute("aria-haspopup"),e.removeAttribute("aria-expanded"),e.removeAttribute("aria-controls"),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t)),this._globalCleanups.forEach(e=>e()),this._globalCleanups=[]}};typeof window.Vanduo<"u"&&window.Vanduo.register("bubble",m),window.VanduoBubble=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("[data-vd-waypoint-nav], [data-vd-scrollspy-nav]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=Array.from(e.querySelectorAll('a[href^="#"]'));if(t.length===0)return;let n=[],s=parseInt(e.getAttribute("data-vd-waypoint-offset")||"80",10),i=[];if(t.forEach(d=>{let c=d.getAttribute("href").slice(1),h=document.getElementById(c);h&&(h.setAttribute("data-vd-waypoint-section",""),i.push({id:c,link:d,section:h}))}),i.length===0)return;let a=new Set,o=d=>{t.forEach(h=>h.classList.remove("is-active"));let c=t.find(h=>h.getAttribute("href")==="#"+d);c&&(c.classList.add("is-active"),e.dispatchEvent(new CustomEvent("waypoint:change",{detail:{activeId:d,link:c}})))},r="-"+s+"px 0px -40% 0px",l=new IntersectionObserver(d=>{d.forEach(c=>{c.isIntersecting?a.add(c.target.id):a.delete(c.target.id)});for(let c=0;cl.observe(d.section)),t.forEach(d=>{let c=h=>{h.preventDefault();let u=d.getAttribute("href").slice(1),p=document.getElementById(u);p&&(p.scrollIntoView({behavior:"smooth"}),o(u))};d.addEventListener("click",c),n.push(()=>d.removeEventListener("click",c))}),n.push(()=>l.disconnect()),this.instances.set(e,{observer:l,cleanup:n,sections:i,setActive:o})},refresh:function(e){this.destroy(e),this.initInstance(e)},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("waypoint",m),window.VanduoWaypoint=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll(".vd-ripple, [data-vd-ripple]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=s=>{let i=e.getBoundingClientRect(),a=Math.max(i.width,i.height),o=(s.clientX||s.touches&&s.touches[0].clientX||i.left+i.width/2)-i.left-a/2,r=(s.clientY||s.touches&&s.touches[0].clientY||i.top+i.height/2)-i.top-a/2,l=document.createElement("span");l.className="vd-ripple-wave",l.style.width=a+"px",l.style.height=a+"px",l.style.left=o+"px",l.style.top=r+"px",e.appendChild(l),l.addEventListener("animationend",()=>{l.parentNode&&l.parentNode.removeChild(l)})};e.addEventListener("mousedown",n),e.addEventListener("touchstart",n,{passive:!0}),t.push(()=>e.removeEventListener("mousedown",n),()=>e.removeEventListener("touchstart",n)),this.instances.set(e,{cleanup:t})},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),e.querySelectorAll(".vd-ripple-wave").forEach(n=>n.remove()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("ripple",m),window.VanduoRipple=m})();(function(){"use strict";function m(n){if(!n||n===document.body)return!1;let s=window.getComputedStyle(n),i=s.overflowY,a=s.overflowX,o=/(auto|scroll|overlay)/.test(i)&&n.scrollHeight>n.clientHeight,r=/(auto|scroll|overlay)/.test(a)&&n.scrollWidth>n.clientWidth;return o||r}function e(n){let s=n.parentElement;for(;s&&s!==document.body&&s!==document.documentElement;){if(m(s))return s;s=s.parentElement}return null}let t={instances:new Map,init:function(){document.querySelectorAll(".vd-affix, .vd-sticky, [data-vd-affix]").forEach(s=>{this.instances.has(s)||this.initInstance(s)})},initInstance:function(n){let s=[],i=parseInt(n.getAttribute("data-vd-affix-offset")||"0",10),a=Number.isNaN(i)?0:i,o=e(n),r=!1,l=document.createElement("div");l.style.cssText="display:block;height:1px;margin-bottom:-1px;visibility:hidden;pointer-events:none;",n.parentNode.insertBefore(l,n),n.style.setProperty("--affix-top-offset",a+"px");function d(){r||(r=!0,n.classList.add("is-stuck"),n.dispatchEvent(new CustomEvent("affix:stuck",{bubbles:!0,detail:{offset:a,root:o||window}})))}function c(){r&&(r=!1,n.classList.remove("is-stuck"),n.dispatchEvent(new CustomEvent("affix:unstuck",{bubbles:!0,detail:{offset:a,root:o||window}})))}let h=new IntersectionObserver(function(u){u.forEach(p=>{p.isIntersecting?c():d()})},{root:o,rootMargin:"-"+a+"px 0px 0px 0px",threshold:0});h.observe(l),s.push(()=>h.disconnect(),()=>{l.parentNode&&l.parentNode.removeChild(l)},()=>{n.classList.remove("is-stuck"),n.style.removeProperty("--affix-top-offset")}),this.instances.set(n,{cleanup:s,observer:h,sentinel:l,scrollParent:o})},destroy:function(n){let s=this.instances.get(n);s&&(s.cleanup.forEach(i=>i()),n.classList.remove("is-stuck"),this.instances.delete(n))},destroyAll:function(){this.instances.forEach((n,s)=>this.destroy(s))}};typeof window.Vanduo<"u"&&window.Vanduo.register("affix",t),window.VanduoAffix=t})();(function(){"use strict";function m(t){let n=document.createElement("div");return n.textContent=t,n.innerHTML}let e={instances:new Map,init:function(){document.querySelectorAll("[data-vd-suggest], [data-vd-autocomplete]").forEach(n=>{this.instances.has(n)||this.initInstance(n)})},initInstance:function(t){let n=[],s=parseInt(t.getAttribute("data-vd-suggest-min-chars")||"1",10),i=t.getAttribute("data-vd-suggest-url")||"",a=t.getAttribute("data-vd-suggest")||t.getAttribute("data-vd-autocomplete")||"",o=[];try{o=JSON.parse(a)}catch{o=a.split(",").map(k=>k.trim()).filter(Boolean)}let r=t.closest(".vd-suggest-wrapper, .vd-autocomplete-wrapper");r||(r=document.createElement("div"),r.className="vd-suggest-wrapper",t.parentNode.insertBefore(r,t),r.appendChild(t));let l=document.createElement("ul");l.className="vd-suggest-list",l.setAttribute("role","listbox");let d="vd-suggest-"+Math.random().toString(36).slice(2,9);l.id=d,r.appendChild(l),t.setAttribute("role","combobox"),t.setAttribute("aria-autocomplete","list"),t.setAttribute("aria-expanded","false"),t.setAttribute("aria-controls",d),t.setAttribute("autocomplete","off");let c=-1,h=[],u=null,p=(g,k)=>{if(l.innerHTML="",h=g,c=-1,g.length===0){let T=document.createElement("li");T.className="vd-suggest-empty",T.textContent="No results",l.appendChild(T);return}g.forEach((T,M)=>{let f=document.createElement("li");f.className="vd-suggest-item",f.setAttribute("role","option"),f.id=d+"-item-"+M;let w=typeof T=="object"&&(T.label||T.text)||String(T);if(k){let E=m(w),I=new RegExp("("+k.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")+")","gi");f.innerHTML=E.replace(I,'$1')}else f.textContent=w;f.addEventListener("click",()=>C(M)),l.appendChild(f)})},v=()=>{l.classList.add("is-open"),t.setAttribute("aria-expanded","true")},y=()=>{l.classList.remove("is-open"),t.setAttribute("aria-expanded","false"),c=-1,t.removeAttribute("aria-activedescendant")},C=g=>{let k=h[g],T=typeof k=="object"&&(k.value||k.label)||String(k);t.value=T,y(),t.dispatchEvent(new CustomEvent("suggest:select",{detail:{value:T,item:k,index:g},bubbles:!0}))},L=g=>{let k=l.querySelectorAll(".vd-suggest-item");k.forEach(T=>T.classList.remove("is-highlighted")),g>=0&&g{if(g.length0,v()},x=()=>{clearTimeout(u),u=setTimeout(()=>P(t.value),200)},_=g=>{if(!l.classList.contains("is-open")){g.key==="ArrowDown"&&(P(t.value),g.preventDefault());return}let k=h.length;switch(g.key){case"ArrowDown":g.preventDefault(),L(c0?c-1:k-1);break;case"Enter":g.preventDefault(),c>=0&&C(c);break;case"Escape":y();break}},V=()=>{setTimeout(y,200)};t.addEventListener("input",x),t.addEventListener("keydown",_),t.addEventListener("blur",V),t.addEventListener("focus",()=>{t.value.length>=s&&P(t.value)}),n.push(()=>t.removeEventListener("input",x),()=>t.removeEventListener("keydown",_),()=>t.removeEventListener("blur",V),()=>clearTimeout(u),()=>{l.parentNode&&l.parentNode.removeChild(l)}),this.instances.set(t,{cleanup:n,list:l,close:y})},destroy:function(t){let n=this.instances.get(t);n&&(n.cleanup.forEach(s=>s()),this.instances.delete(t))},destroyAll:function(){this.instances.forEach((t,n)=>this.destroy(n))}};typeof window.Vanduo<"u"&&window.Vanduo.register("suggest",e),window.VanduoSuggest=e})();(function(){"use strict";let m={instances:new Map,rules:{required:e=>e.trim().length>0,email:e=>/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e),url:e=>{try{return new URL(e),!0}catch{return!1}},number:e=>!isNaN(parseFloat(e))&&isFinite(e),min:(e,t)=>e.length>=parseInt(t,10),max:(e,t)=>e.length<=parseInt(t,10),minVal:(e,t)=>parseFloat(e)>=parseFloat(t),maxVal:(e,t)=>parseFloat(e)<=parseFloat(t),pattern:(e,t)=>{try{return t.length>100?!1:new RegExp(t).test(e)}catch{return!1}},match:(e,t)=>{try{let n=typeof CSS<"u"&&CSS.escape?CSS.escape(t):t,s=document.querySelector('[name="'+n+'"]');return s?e===s.value:!1}catch{return!1}}},messages:{required:"This field is required",email:"Please enter a valid email address",url:"Please enter a valid URL",number:"Please enter a valid number",min:"Minimum {0} characters required",max:"Maximum {0} characters allowed",minVal:"Value must be at least {0}",maxVal:"Value must be at most {0}",pattern:"Invalid format",match:"Fields do not match"},init:function(){document.querySelectorAll("[data-vd-validate], .vd-validate").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-validate-mode")||"blur",s=e.querySelectorAll("[data-vd-rules]"),i=r=>{let d=(r.getAttribute("data-vd-rules")||"").split("|").map(u=>u.trim()).filter(Boolean),c=r.value,h=[];for(let u of d){let[p,...v]=u.split(":"),y=v.join(":"),C=this.rules[p];if(C&&!C(c,y)){let P=r.getAttribute("data-vd-msg-"+p)||this.messages[p]||"Invalid";y&&(P=P.replace("{0}",y)),h.push(P);break}}return this.setFieldState(r,h),h.length===0},a=()=>{let r=!0;return s.forEach(l=>{i(l)||(r=!1)}),r};s.forEach(r=>{if(n==="input"||n==="blur"){let l=n==="input"?"input":"blur",d=()=>i(r);if(r.addEventListener(l,d),t.push(()=>r.removeEventListener(l,d)),n==="blur"){let c=()=>{(r.classList.contains("is-invalid")||r.classList.contains("is-valid"))&&i(r)};r.addEventListener("input",c),t.push(()=>r.removeEventListener("input",c))}}});let o=r=>{let l=a();if(!l){r.preventDefault(),r.stopPropagation();let d=e.querySelector(".is-invalid");d&&d.focus()}e.dispatchEvent(new CustomEvent("validate:submit",{detail:{valid:l},bubbles:!0}))};e.addEventListener("submit",o),t.push(()=>e.removeEventListener("submit",o)),this.instances.set(e,{cleanup:t,validateAll:a,validateField:i})},setFieldState:function(e,t){let n=e.closest(".vd-form-group")||e.parentElement,s=n.querySelector(".vd-validate-error");e.classList.remove("is-valid","is-invalid"),t.length>0?(e.classList.add("is-invalid"),e.setAttribute("aria-invalid","true"),s||(s=document.createElement("div"),s.className="vd-validate-error",s.id="vd-err-"+Math.random().toString(36).slice(2,9),s.setAttribute("role","alert"),n.appendChild(s)),s.textContent=t[0],s.style.display="",e.setAttribute("aria-describedby",s.id)):e.value.trim()?(e.classList.add("is-valid"),e.removeAttribute("aria-invalid"),s&&(s.style.display="none")):(e.removeAttribute("aria-invalid"),s&&(s.style.display="none"))},validateForm:function(e){let t=this.instances.get(e);return t?t.validateAll():!1},addRule:function(e,t,n){this.rules[e]=t,n&&(this.messages[e]=n)},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("validate",m),window.VanduoValidate=m})();(function(){"use strict";let m=["Su","Mo","Tu","We","Th","Fr","Sa"],e=["January","February","March","April","May","June","July","August","September","October","November","December"],t={instances:new Map,init:function(){document.querySelectorAll("[data-vd-datepicker]").forEach(s=>{this.instances.has(s)||this.initInstance(s)})},initInstance:function(n){let s=[],i=n.getAttribute("data-vd-datepicker-format")||"yyyy-mm-dd",a=n.getAttribute("data-vd-datepicker-min"),o=n.getAttribute("data-vd-datepicker-max"),r=a?new Date(a):null,l=o?new Date(o):null,d=new Date,c=d.getFullYear(),h=d.getMonth(),u=null,p="days";if(n.value){let f=new Date(n.value);isNaN(f.getTime())||(u=f,c=f.getFullYear(),h=f.getMonth())}let v=document.createElement("div");v.className="vd-datepicker-popup",v.setAttribute("role","dialog"),v.setAttribute("aria-label","Choose date");let y=document.createElement("div");y.className="vd-suggest-wrapper",y.style.position="relative",y.style.display="inline-block",n.parentNode.insertBefore(y,n),y.appendChild(n),y.appendChild(v);let C=f=>{let w=f.getFullYear(),E=String(f.getMonth()+1).padStart(2,"0"),I=String(f.getDate()).padStart(2,"0");return i.replace("yyyy",w).replace("mm",E).replace("dd",I)},L=f=>!!(r&&fl),P=(f,w)=>f&&w&&f.getFullYear()===w.getFullYear()&&f.getMonth()===w.getMonth()&&f.getDate()===w.getDate(),x=()=>{v.innerHTML="";let f=document.createElement("div");f.className="vd-datepicker-header";let w=document.createElement("button");w.type="button",w.className="vd-datepicker-prev",w.innerHTML="‹",w.setAttribute("aria-label","Previous");let E=document.createElement("button");E.type="button",E.className="vd-datepicker-next",E.innerHTML="›",E.setAttribute("aria-label","Next");let I=document.createElement("span");if(I.className="vd-datepicker-title",p==="days")I.textContent=e[h]+" "+c,I.addEventListener("click",()=>{p="months",x()}),w.addEventListener("click",()=>{h--,h<0&&(h=11,c--),x()}),E.addEventListener("click",()=>{h++,h>11&&(h=0,c++),x()});else if(p==="months")I.textContent=String(c),I.addEventListener("click",()=>{p="years",x()}),w.addEventListener("click",()=>{c--,x()}),E.addEventListener("click",()=>{c++,x()});else{let O=Math.floor(c/10)*10;I.textContent=O+" - "+(O+9),w.addEventListener("click",()=>{c-=10,x()}),E.addEventListener("click",()=>{c+=10,x()})}if(f.appendChild(w),f.appendChild(I),f.appendChild(E),v.appendChild(f),p==="days"){let O=document.createElement("div");O.className="vd-datepicker-weekdays",m.forEach(F=>{let U=document.createElement("span");U.textContent=F,O.appendChild(U)}),v.appendChild(O);let H=document.createElement("div");H.className="vd-datepicker-days";let z=new Date(c,h,1).getDay(),R=new Date(c,h+1,0).getDate(),j=new Date(c,h,0).getDate();for(let F=z-1;F>=0;F--){let U=_(j-F,!0);H.appendChild(U)}for(let F=1;F<=R;F++){let U=new Date(c,h,F),b=_(F,!1,U);H.appendChild(b)}let G=z+R,Z=G%7===0?0:7-G%7;for(let F=1;F<=Z;F++){let U=_(F,!0);H.appendChild(U)}v.appendChild(H)}else if(p==="months"){let O=document.createElement("div");O.className="vd-datepicker-months",e.forEach((H,z)=>{let R=document.createElement("button");R.type="button",R.className="vd-datepicker-month-btn",R.textContent=H.slice(0,3),u&&u.getFullYear()===c&&u.getMonth()===z&&R.classList.add("is-selected"),R.addEventListener("click",()=>{h=z,p="days",x()}),O.appendChild(R)}),v.appendChild(O)}else{let O=document.createElement("div");O.className="vd-datepicker-years";let H=Math.floor(c/10)*10;for(let z=H-1;z<=H+10;z++){let R=document.createElement("button");R.type="button",R.className="vd-datepicker-year-btn",R.textContent=z,u&&u.getFullYear()===z&&R.classList.add("is-selected"),(zH+9)&&(R.style.opacity="0.4"),R.addEventListener("click",()=>{c=z,p="months",x()}),O.appendChild(R)}v.appendChild(O)}},_=(f,w,E)=>{let I=document.createElement("button");return I.type="button",I.className="vd-datepicker-day",I.textContent=f,w?(I.classList.add("is-outside"),I.tabIndex=-1,I):(E&&P(E,d)&&I.classList.add("is-today"),E&&P(E,u)&&I.classList.add("is-selected"),E&&L(E)?(I.classList.add("is-disabled"),I):(E&&I.addEventListener("click",()=>{u=E,c=E.getFullYear(),h=E.getMonth(),n.value=C(E),g(),n.dispatchEvent(new CustomEvent("datepicker:select",{detail:{date:E,formatted:n.value},bubbles:!0})),n.dispatchEvent(new Event("change",{bubbles:!0}))}),I))},V=()=>{x(),v.classList.add("is-open"),n.setAttribute("aria-expanded","true")},g=()=>{v.classList.remove("is-open"),n.setAttribute("aria-expanded","false"),p="days"},k=()=>V(),T=f=>{y.contains(f.target)||g()},M=f=>{f.key==="Escape"&&g()};n.addEventListener("focus",k),document.addEventListener("click",T,!0),document.addEventListener("keydown",M),n.setAttribute("aria-haspopup","dialog"),n.setAttribute("aria-expanded","false"),n.setAttribute("autocomplete","off"),s.push(()=>n.removeEventListener("focus",k),()=>document.removeEventListener("click",T,!0),()=>document.removeEventListener("keydown",M)),this.instances.set(n,{cleanup:s,open:V,close:g,popup:v})},destroy:function(n){let s=this.instances.get(n);s&&(s.cleanup.forEach(i=>i()),this.instances.delete(n))},destroyAll:function(){this.instances.forEach((n,s)=>this.destroy(s))}};typeof window.Vanduo<"u"&&window.Vanduo.register("datepicker",t),window.VanduoDatepicker=t})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("[data-vd-timepicker]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-timepicker-format")==="24h",s=parseInt(e.getAttribute("data-vd-timepicker-step")||"30",10),i=e.closest(".vd-suggest-wrapper");i||(i=document.createElement("div"),i.style.position="relative",i.style.display="inline-block",e.parentNode.insertBefore(i,e),i.appendChild(e));let a=document.createElement("div");a.className="vd-timepicker-popup",a.setAttribute("role","listbox"),i.appendChild(a);let o=[];for(let p=0;p<24;p++)for(let v=0;v<60;v+=s){let y=String(p).padStart(2,"0"),C=String(v).padStart(2,"0");if(n)o.push({display:y+":"+C,value:y+":"+C});else{let L=p<12?"AM":"PM",x=(p===0?12:p>12?p-12:p)+":"+C+" "+L;o.push({display:x,value:y+":"+C})}}let r=()=>{a.innerHTML="",o.forEach(p=>{let v=document.createElement("div");v.className="vd-timepicker-item",v.setAttribute("role","option"),v.textContent=p.display,(e.value===p.value||e.value===p.display)&&v.classList.add("is-selected"),v.addEventListener("click",()=>{e.value=p.display,a.querySelectorAll(".vd-timepicker-item").forEach(y=>y.classList.remove("is-selected")),v.classList.add("is-selected"),d(),e.dispatchEvent(new CustomEvent("timepicker:select",{detail:{display:p.display,value:p.value},bubbles:!0})),e.dispatchEvent(new Event("change",{bubbles:!0}))}),a.appendChild(v)})},l=()=>{r(),a.classList.add("is-open"),e.setAttribute("aria-expanded","true");let p=a.querySelector(".is-selected");p&&p.scrollIntoView({block:"center"})},d=()=>{a.classList.remove("is-open"),e.setAttribute("aria-expanded","false")},c=()=>l(),h=p=>{i.contains(p.target)||d()},u=p=>{p.key==="Escape"&&d()};e.addEventListener("focus",c),document.addEventListener("click",h,!0),document.addEventListener("keydown",u),e.setAttribute("aria-haspopup","listbox"),e.setAttribute("aria-expanded","false"),e.setAttribute("autocomplete","off"),e.readOnly=!0,t.push(()=>e.removeEventListener("focus",c),()=>document.removeEventListener("click",h,!0),()=>document.removeEventListener("keydown",u)),this.instances.set(e,{cleanup:t,open:l,close:d})},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("timepicker",m),window.VanduoTimepicker=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll(".vd-stepper").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=Array.from(e.querySelectorAll(".vd-stepper-item")),s=e.classList.contains("vd-stepper-clickable"),i=n.findIndex(o=>o.classList.contains("is-active"));i===-1&&(i=0);let a=o=>{if(o<0||o>=n.length)return;let r=i;i=o,n.forEach((l,d)=>{l.classList.remove("is-active","is-completed"),d{let l=()=>a(r);o.addEventListener("click",l),t.push(()=>o.removeEventListener("click",l))}),a(i),this.instances.set(e,{cleanup:t,setStep:a,next:()=>a(i+1),prev:()=>a(i-1),getCurrent:()=>i})},setStep:function(e,t){let n=this.instances.get(e);n&&n.setStep(t)},next:function(e){let t=this.instances.get(e);t&&t.next()},prev:function(e){let t=this.instances.get(e);t&&t.prev()},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("stepper",m),window.VanduoStepper=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("[data-vd-rating]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=parseInt(e.getAttribute("data-vd-rating-max")||"5",10),s=parseFloat(e.getAttribute("data-vd-rating-value")||"0"),i=e.classList.contains("vd-rating-readonly")||e.hasAttribute("data-vd-rating-readonly"),a=s;e.classList.add("vd-rating"),e.setAttribute("role","radiogroup"),e.setAttribute("aria-label",e.getAttribute("aria-label")||"Rating"),e.innerHTML="";let o=[];for(let d=1;d<=n;d++){let c=document.createElement("button");c.type="button",c.className="vd-rating-star",c.setAttribute("role","radio"),c.setAttribute("aria-label",d+" star"+(d>1?"s":"")),c.setAttribute("aria-checked",d<=a?"true":"false"),i&&(c.tabIndex=-1),o.push(c),e.appendChild(c)}let r=document.createElement("span");r.className="vd-rating-value",r.textContent=a>0?a.toString():"",e.appendChild(r);let l=d=>{o.forEach((c,h)=>{c.classList.remove("is-active","is-half");let u=h+1;u<=Math.floor(d)?c.classList.add("is-active"):u-.5<=d&&c.classList.add("is-half"),c.setAttribute("aria-checked",u<=d?"true":"false")}),r.textContent=d>0?d.toString():""};if(l(a),!i){o.forEach((c,h)=>{let u=()=>{o.forEach((y,C)=>{y.classList.toggle("is-hovered",C<=h)})},p=()=>{o.forEach(y=>y.classList.remove("is-hovered"))},v=()=>{a=h+1,e.setAttribute("data-vd-rating-value",a),l(a),e.dispatchEvent(new CustomEvent("rating:change",{detail:{value:a,max:n},bubbles:!0}))};c.addEventListener("mouseenter",u),c.addEventListener("mouseleave",p),c.addEventListener("click",v),t.push(()=>c.removeEventListener("mouseenter",u),()=>c.removeEventListener("mouseleave",p),()=>c.removeEventListener("click",v))});let d=c=>{c.key==="ArrowRight"||c.key==="ArrowUp"?(c.preventDefault(),a1&&(a--,l(a),o[a-1].focus(),e.dispatchEvent(new CustomEvent("rating:change",{detail:{value:a,max:n},bubbles:!0}))))};e.addEventListener("keydown",d),t.push(()=>e.removeEventListener("keydown",d))}this.instances.set(e,{cleanup:t,getValue:()=>a,setValue:d=>{a=d,l(d)}})},getValue:function(e){let t=this.instances.get(e);return t?t.getValue():0},setValue:function(e,t){let n=this.instances.get(e);n&&n.setValue(t)},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("rating",m),window.VanduoRating=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("[data-vd-transfer]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[];e.classList.add("vd-transfer");let n,s;try{n=JSON.parse(e.getAttribute("data-vd-transfer")||"[]").map((u,p)=>({id:u.id||"item-"+p,label:u.label||u.text||String(u),selected:!1}))}catch{n=[]}s=[];let i=new Set,a=new Set,o=()=>{e.innerHTML="";let h=r("Source",n,i,"source"),u=document.createElement("div");u.className="vd-transfer-actions";let p=document.createElement("button");p.type="button",p.className="vd-transfer-btn",p.innerHTML="›",p.setAttribute("aria-label","Move to target"),p.disabled=i.size===0,p.addEventListener("click",()=>l());let v=document.createElement("button");v.type="button",v.className="vd-transfer-btn",v.innerHTML="‹",v.setAttribute("aria-label","Move to source"),v.disabled=a.size===0,v.addEventListener("click",()=>d()),u.appendChild(p),u.appendChild(v);let y=r("Target",s,a,"target");e.appendChild(h),e.appendChild(u),e.appendChild(y)},r=(h,u,p,v)=>{let y=document.createElement("div");y.className="vd-transfer-panel";let C=document.createElement("div");C.className="vd-transfer-header";let L=document.createElement("span");L.textContent=h;let P=document.createElement("span");P.className="vd-transfer-count",P.textContent=p.size+"/"+u.length,C.appendChild(L),C.appendChild(P),y.appendChild(C);let x=document.createElement("div");x.className="vd-transfer-search";let _=document.createElement("input");_.type="text",_.placeholder="Search...",_.setAttribute("aria-label","Search "+h.toLowerCase()),x.appendChild(_),y.appendChild(x);let V=document.createElement("ul");V.className="vd-transfer-list",V.setAttribute("role","listbox");let g=k=>{V.innerHTML="",(k?u.filter(M=>(M.label||M.text||String(M)).toLowerCase().includes(k.toLowerCase())):u).forEach(M=>{let f=document.createElement("li");f.className="vd-transfer-item",f.setAttribute("role","option"),p.has(M.id)&&f.classList.add("is-selected");let w=document.createElement("input");w.type="checkbox",w.checked=p.has(M.id),w.setAttribute("aria-label",M.label);let E=document.createElement("span");E.textContent=M.label,f.addEventListener("click",()=>{p.has(M.id)?p.delete(M.id):p.add(M.id),o()}),f.appendChild(w),f.appendChild(E),V.appendChild(f)})};return _.addEventListener("input",()=>g(_.value)),g(""),y.appendChild(V),y},l=()=>{let h=n.filter(u=>i.has(u.id));n=n.filter(u=>!i.has(u.id)),s=s.concat(h),i.clear(),o(),c()},d=()=>{let h=s.filter(u=>a.has(u.id));s=s.filter(u=>!a.has(u.id)),n=n.concat(h),a.clear(),o(),c()},c=()=>{e.dispatchEvent(new CustomEvent("transfer:change",{detail:{source:n.map(h=>h.id),target:s.map(h=>h.id)},bubbles:!0}))};o(),this.instances.set(e,{cleanup:t,getTarget:()=>s.map(h=>h.id),getSource:()=>n.map(h=>h.id)})},getSelected:function(e){let t=this.instances.get(e);return t?t.getTarget():[]},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),e.innerHTML="",this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("transfer",m),window.VanduoTransfer=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("[data-vd-tree]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-tree-cascade")!=="false",s;try{s=JSON.parse(e.getAttribute("data-vd-tree")||"[]")}catch{s=[]}e.classList.add("vd-tree"),e.setAttribute("role","tree");let i=(r,l)=>{l.innerHTML="",r.forEach(d=>{let c=document.createElement("li");c.className="vd-tree-node",c.setAttribute("role","treeitem"),c.setAttribute("aria-expanded",d.open?"true":"false"),d.open&&c.classList.add("is-open");let h=document.createElement("div");if(h.className="vd-tree-node-content",d.children&&d.children.length>0){let p=document.createElement("button");p.type="button",p.className="vd-tree-toggle",p.setAttribute("aria-label","Toggle"),p.addEventListener("click",v=>{v.stopPropagation(),d.open=!d.open,c.classList.toggle("is-open"),c.setAttribute("aria-expanded",d.open?"true":"false")}),h.appendChild(p)}else{let p=document.createElement("span");p.className="vd-tree-toggle-placeholder",h.appendChild(p)}if(e.hasAttribute("data-vd-tree-checkbox")){let p=document.createElement("input");p.type="checkbox",p.className="vd-tree-checkbox",p.checked=!!d.checked,p.setAttribute("aria-label",d.label),p.addEventListener("change",v=>{v.stopPropagation(),d.checked=p.checked,n&&d.children&&(a(d.children,p.checked),i(s,e)),e.dispatchEvent(new CustomEvent("tree:check",{detail:{id:d.id,checked:p.checked,label:d.label},bubbles:!0}))}),h.appendChild(p)}if(d.icon){let p=document.createElement("span");p.className="vd-tree-icon "+d.icon,h.appendChild(p)}let u=document.createElement("span");if(u.className="vd-tree-label",u.textContent=d.label||"",h.appendChild(u),c.appendChild(h),d.children&&d.children.length>0){let p=document.createElement("ul");p.className="vd-tree-children",p.setAttribute("role","group"),i(d.children,p),c.appendChild(p)}l.appendChild(c)})},a=(r,l)=>{r.forEach(d=>{d.checked=l,d.children&&a(d.children,l)})},o=r=>{let l=document.activeElement;if(!e.contains(l))return;let d=Array.from(e.querySelectorAll(".vd-tree-node-content")),c=d.indexOf(l.closest(".vd-tree-node-content"));if(c!==-1)switch(r.key){case"ArrowDown":if(r.preventDefault(),c0){let h=d[c-1].querySelector(".vd-tree-toggle, .vd-tree-label");h&&h.focus()}break}};e.addEventListener("keydown",o),t.push(()=>e.removeEventListener("keydown",o)),i(s,e),this.instances.set(e,{cleanup:t,getData:()=>s,getChecked:()=>{let r=[],l=d=>{d.forEach(c=>{c.checked&&r.push(c.id||c.label),c.children&&l(c.children)})};return l(s),r}})},getChecked:function(e){let t=this.instances.get(e);return t?t.getChecked():[]},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),e.innerHTML="",this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("tree",m),window.VanduoTree=m})();(function(){"use strict";let m={_active:!1,_steps:[],_currentStep:0,_elements:{},_cleanup:[],_boundTriggers:new WeakMap,_triggerElement:null,init:function(){document.querySelectorAll("[data-vd-spotlight]").forEach(t=>{if(this._boundTriggers.has(t))return;let n=s=>{s.preventDefault();let i=this._parseSteps(t.getAttribute("data-vd-spotlight"));i.length!==0&&this.start(i,{trigger:t})};t.addEventListener("click",n),this._boundTriggers.set(t,n)})},_parseSteps:function(e){if(typeof e!="string"||e.trim()==="")return[];try{let t=JSON.parse(e);return this._normalizeSteps(t)}catch(t){return console.error("VanduoSpotlight: invalid data-vd-spotlight payload.",t),[]}},_normalizeStep:function(e){if(!e||typeof e!="object")return null;let t=e.target,n=typeof t=="string"&&t.trim()!=="",s=typeof Element<"u"&&t instanceof Element;if(!n&&!s)return null;let i=typeof e.title=="string"?e.title:"",a=typeof e.description=="string"?e.description:typeof e.content=="string"?e.content:"";return{target:t,title:i,description:a}},_normalizeSteps:function(e){return Array.isArray(e)?e.map(t=>this._normalizeStep(t)).filter(Boolean):[]},start:function(e,t){this._active&&this.stop();let n=this._normalizeSteps(e);if(n.length===0)return;let s=t||{};this._steps=n,this._currentStep=0,this._active=!0,this._triggerElement=s.trigger||(document.activeElement instanceof HTMLElement?document.activeElement:null);let i=document.createElement("div");i.className="vd-spotlight-overlay",i.setAttribute("aria-hidden","true"),document.body.appendChild(i);let a=document.createElement("div");a.className="vd-spotlight-tooltip",a.setAttribute("role","dialog"),a.setAttribute("aria-modal","true"),a.tabIndex=-1,document.body.appendChild(a),this._elements={overlay:i,tooltip:a};let o=r=>{r.key==="Escape"&&this.stop()};document.addEventListener("keydown",o),this._cleanup.push(()=>document.removeEventListener("keydown",o)),i.addEventListener("click",()=>this.stop()),this._showStep(this._currentStep)},_showStep:function(e){let t=this._steps[e];if(!t)return;let n=typeof t.target=="string"?document.querySelector(t.target):t.target,{tooltip:s}=this._elements;document.querySelectorAll(".vd-spotlight-target").forEach(d=>{d.classList.remove("vd-spotlight-target")}),n&&(n.classList.add("vd-spotlight-target"),n.scrollIntoView({behavior:"smooth",block:"center"}));let i=this._steps.length;if(s.innerHTML="",s.removeAttribute("aria-labelledby"),s.removeAttribute("aria-describedby"),t.title){let d=document.createElement("h4");d.className="vd-spotlight-title",d.id="vd-spotlight-title-"+e+"-"+Date.now(),d.textContent=t.title,s.appendChild(d),s.setAttribute("aria-labelledby",d.id)}if(t.description){let d=document.createElement("p");d.className="vd-spotlight-description",d.id="vd-spotlight-description-"+e+"-"+Date.now(),d.textContent=t.description,s.appendChild(d),s.setAttribute("aria-describedby",d.id)}let a=document.createElement("div");a.className="vd-spotlight-footer",a.setAttribute("aria-label","Step "+(e+1)+" of "+i);let o=document.createElement("span");o.className="vd-spotlight-counter",o.textContent=e+1+" / "+i;let r=document.createElement("div");if(r.className="vd-spotlight-actions",e>0){let d=document.createElement("button");d.type="button",d.className="vd-spotlight-btn",d.textContent="Back",d.addEventListener("click",()=>this.prev()),r.appendChild(d)}let l=document.createElement("button");if(l.type="button",l.className="vd-spotlight-btn",l.textContent="Skip",l.addEventListener("click",()=>this.stop()),r.appendChild(l),ethis.next()),r.appendChild(d)}else{let d=document.createElement("button");d.type="button",d.className="vd-spotlight-btn vd-spotlight-btn-primary",d.textContent="Done",d.addEventListener("click",()=>this.stop()),r.appendChild(d)}a.appendChild(o),a.appendChild(r),s.appendChild(a),n&&requestAnimationFrame(()=>{let d=n.getBoundingClientRect(),c=s.getBoundingClientRect(),h=d.bottom+12+window.scrollY,u=d.left+(d.width-c.width)/2+window.scrollX;u=Math.max(8,Math.min(u,window.innerWidth-c.width-8)),h+c.height>window.innerHeight+window.scrollY&&(h=d.top-c.height-12+window.scrollY),s.style.top=h+"px",s.style.left=u+"px"}),document.dispatchEvent(new CustomEvent("spotlight:step",{detail:{index:e,step:e,total:i,data:t}}))},next:function(){this._currentStep0&&(this._currentStep--,this._showStep(this._currentStep))},stop:function(){if(!this._active)return;let e=this._steps.length,t={completedSteps:e===0?0:Math.min(this._currentStep+1,e),total:e,completed:e>0&&this._currentStep>=e-1};this._active=!1,document.querySelectorAll(".vd-spotlight-target").forEach(n=>{n.classList.remove("vd-spotlight-target")}),this._elements.overlay&&this._elements.overlay.parentNode&&this._elements.overlay.parentNode.removeChild(this._elements.overlay),this._elements.tooltip&&this._elements.tooltip.parentNode&&this._elements.tooltip.parentNode.removeChild(this._elements.tooltip),this._cleanup.forEach(n=>n()),this._cleanup=[],this._elements={},this._steps=[],this._currentStep=0,this._triggerElement&&this._triggerElement.isConnected&&typeof this._triggerElement.focus=="function"&&this._triggerElement.focus(),this._triggerElement=null,document.dispatchEvent(new CustomEvent("spotlight:end",{detail:t}))},destroyAll:function(){this.stop()}};typeof window.Vanduo<"u"&&window.Vanduo.register("spotlight",m),window.VanduoSpotlight=m})();(function(){"use strict";function m(i){let a=i.slice();for(let o=a.length-1;o>0;o--){let r=Math.floor(Math.random()*(o+1)),l=a[o];a[o]=a[r],a[r]=l}return a}function e(i){if(!isFinite(i)||i<0)return"0:00";let a=Math.floor(i/60),o=Math.floor(i%60);return a+":"+(o<10?"0":"")+o}function t(i){let a=parseFloat(i.min)||0,o=parseFloat(i.max)||1,l=((parseFloat(i.value)||0)-a)/(o-a)*100;i.style.setProperty("--fill",l+"%"),i.style.backgroundImage="linear-gradient(to right, var(--music-player-track-fill, currentColor) 0%, var(--music-player-track-fill, currentColor) "+l+"%, var(--music-player-track-bg, #ccc) "+l+"%, var(--music-player-track-bg, #ccc) 100%)"}function n(i){let a=document.createElement("i");return a.className="ph ph-"+i,a.setAttribute("aria-hidden","true"),a}let s={instances:new Map,defaults:{tracks:[],volume:.5,shuffle:!1,showProgress:!1,showPlaylist:!1,autoAdvance:!0},init:function(){document.querySelectorAll(".vd-music-player, [data-music-player]").forEach(i=>{if(this.instances.has(i))return;let a={},o=i.getAttribute("data-music-player-options");if(o)try{a=JSON.parse(o)}catch{}this.initPlayer(i,a)})},initPlayer:function(i,a){let o=Object.assign({},this.defaults,a||{}),l=(Array.isArray(o.tracks)?o.tracks:[]).filter(f=>f&&typeof f.url=="string"&&f.url.trim()),c={tracks:o.shuffle?m(l):l.slice(),originalTracks:l.slice(),currentIndex:0,isPlaying:!1,volume:Math.max(0,Math.min(1,o.volume)),shuffle:o.shuffle,showProgress:o.showProgress,showPlaylist:o.showPlaylist,autoAdvance:o.autoAdvance,audio:null},h=new Audio;h.volume=c.volume,h.preload="metadata",c.audio=h,this._buildDOM(i,c);let u={btnPlay:i.querySelector(".vd-music-player-btn-play"),btnPrev:i.querySelector(".vd-music-player-btn-prev"),btnNext:i.querySelector(".vd-music-player-btn-next"),btnShuffle:i.querySelector(".vd-music-player-btn-shuffle"),btnPlaylist:i.querySelector(".vd-music-player-btn-playlist"),trackName:i.querySelector(".vd-music-player-track-name"),volumeSlider:i.querySelector(".vd-music-player-volume-slider"),volumeIcon:i.querySelector(".vd-music-player-volume-icon"),progressBar:i.querySelector(".vd-music-player-progress-bar"),timeElapsed:i.querySelector(".vd-music-player-time-elapsed"),timeDuration:i.querySelector(".vd-music-player-time-duration"),playlistPanel:i.querySelector(".vd-music-player-playlist")},p=()=>{let f=u.btnPlay;f&&(f.innerHTML="",f.appendChild(n(c.isPlaying?"pause":"play")),f.setAttribute("aria-label",c.isPlaying?"Pause":"Play"),f.classList.toggle("is-active",c.isPlaying))},v=()=>{let f=u.trackName;if(!f)return;let w=c.tracks[c.currentIndex];w?(f.textContent=w.name||"Unknown Track",f.classList.remove("is-idle")):(f.textContent="No tracks loaded",f.classList.add("is-idle"))},y=()=>{let f=u.volumeIcon;if(!f)return;f.innerHTML="";let w=c.volume,E=w===0?"speaker-none":w<.5?"speaker-low":"speaker-high";f.appendChild(n(E))},C=()=>{let f=u.btnShuffle;f&&(f.classList.toggle("is-active",c.shuffle),f.setAttribute("aria-pressed",c.shuffle?"true":"false"))},L=()=>{let f=u.playlistPanel;f&&(f.innerHTML="",c.tracks.forEach((w,E)=>{let I=document.createElement("button");I.className="vd-music-player-playlist-item"+(E===c.currentIndex?" is-active":""),I.type="button",I.setAttribute("data-index",String(E)),I.setAttribute("aria-current",E===c.currentIndex?"true":"false");let O=document.createElement("span");O.className="vd-music-player-playlist-num",O.textContent=String(E+1);let H=document.createElement("span");H.className="vd-music-player-playlist-name",H.textContent=w.name||"Track "+(E+1),I.appendChild(O),I.appendChild(H),f.appendChild(I)}))},P=()=>{let f=u.progressBar;if(!f||!h.duration)return;let w=h.currentTime/h.duration*100;f.value=String(w),t(f),u.timeElapsed&&(u.timeElapsed.textContent=e(h.currentTime)),u.timeDuration&&(u.timeDuration.textContent=e(h.duration))},x=(f,w)=>{let E=c.tracks[f];E&&(c.currentIndex=f,h.src=E.url,v(),L(),u.progressBar&&(u.progressBar.value="0",t(u.progressBar)),u.timeElapsed&&(u.timeElapsed.textContent="0:00"),u.timeDuration&&(u.timeDuration.textContent="0:00"),i.dispatchEvent(new CustomEvent("musicplayer:trackchange",{bubbles:!0,detail:{index:f,name:E.name,url:E.url}})),w&&h.play().catch(()=>{}))},_=[],V=()=>{c.isPlaying=!0,p(),i.dispatchEvent(new CustomEvent("musicplayer:play",{bubbles:!0}))},g=()=>{c.isPlaying=!1,p(),i.dispatchEvent(new CustomEvent("musicplayer:pause",{bubbles:!0}))},k=()=>{if(c.autoAdvance&&c.tracks.length>1){let f=(c.currentIndex+1)%c.tracks.length;x(f,!0)}else c.isPlaying=!1,p(),i.dispatchEvent(new CustomEvent("musicplayer:ended",{bubbles:!0}))},T=()=>{c.showProgress&&P()},M=()=>{u.timeDuration&&(u.timeDuration.textContent=e(h.duration)),u.progressBar&&(u.progressBar.max="100",t(u.progressBar))};if(h.addEventListener("play",V),h.addEventListener("pause",g),h.addEventListener("ended",k),h.addEventListener("timeupdate",T),h.addEventListener("loadedmetadata",M),_.push(()=>{h.removeEventListener("play",V),h.removeEventListener("pause",g),h.removeEventListener("ended",k),h.removeEventListener("timeupdate",T),h.removeEventListener("loadedmetadata",M),h.pause(),h.src=""}),u.btnPlay){let f=()=>{!h.src&&c.tracks.length&&x(c.currentIndex,!1),c.isPlaying?h.pause():h.play().catch(()=>{})};u.btnPlay.addEventListener("click",f),_.push(()=>u.btnPlay.removeEventListener("click",f));let w=E=>{(E.key===" "||E.key==="Enter")&&(E.preventDefault(),f())};u.btnPlay.addEventListener("keydown",w),_.push(()=>u.btnPlay.removeEventListener("keydown",w))}if(u.btnPrev){let f=()=>{if(c.tracks.length)if(h.currentTime>3)h.currentTime=0;else{let w=c.currentIndex===0?c.tracks.length-1:c.currentIndex-1;x(w,c.isPlaying)}};u.btnPrev.addEventListener("click",f),_.push(()=>u.btnPrev.removeEventListener("click",f))}if(u.btnNext){let f=()=>{if(!c.tracks.length)return;let w=(c.currentIndex+1)%c.tracks.length;x(w,c.isPlaying)};u.btnNext.addEventListener("click",f),_.push(()=>u.btnNext.removeEventListener("click",f))}if(u.btnShuffle){let f=()=>{if(c.shuffle=!c.shuffle,c.shuffle){let w=c.tracks[c.currentIndex];c.tracks=m(c.tracks);let E=c.tracks.findIndex(I=>I===w);E>0&&(c.tracks.splice(E,1),c.tracks.unshift(w)),c.currentIndex=0}else{let w=c.tracks[c.currentIndex];c.tracks=c.originalTracks.slice(),c.currentIndex=c.tracks.findIndex(E=>E===w),c.currentIndex<0&&(c.currentIndex=0)}C(),L()};u.btnShuffle.addEventListener("click",f),_.push(()=>u.btnShuffle.removeEventListener("click",f))}if(u.btnPlaylist){let f=()=>{let w=u.playlistPanel;if(!w)return;let E=w.classList.toggle("is-open");u.btnPlaylist.classList.toggle("is-active",E),u.btnPlaylist.setAttribute("aria-expanded",E?"true":"false")};u.btnPlaylist.addEventListener("click",f),_.push(()=>u.btnPlaylist.removeEventListener("click",f))}if(u.volumeSlider){let f=w=>{let E=parseFloat(w.target.value);c.volume=E,h.volume=E,y(),t(u.volumeSlider),i.dispatchEvent(new CustomEvent("musicplayer:volumechange",{bubbles:!0,detail:{volume:E}}))};u.volumeSlider.addEventListener("input",f),_.push(()=>u.volumeSlider.removeEventListener("input",f)),t(u.volumeSlider)}if(u.progressBar){let f=w=>{if(!h.duration)return;let E=parseFloat(w.target.value);h.currentTime=E/100*h.duration,t(u.progressBar)};u.progressBar.addEventListener("input",f),_.push(()=>u.progressBar.removeEventListener("input",f))}if(u.playlistPanel){let f=w=>{let E=w.target.closest(".vd-music-player-playlist-item");if(!E)return;let I=parseInt(E.getAttribute("data-index"),10);isNaN(I)||x(I,!0)};u.playlistPanel.addEventListener("click",f),_.push(()=>u.playlistPanel.removeEventListener("click",f))}p(),v(),y(),o.showPlaylist&&L(),this.instances.set(i,{state:c,audio:h,refs:u,cleanup:_}),i.setAttribute("data-music-player-initialized","true")},_buildDOM:function(i,a){if(i.querySelector(".vd-music-player-controls"))return;i.setAttribute("role","region"),i.setAttribute("aria-label","Music Player"),a.showProgress&&i.classList.add("has-progress"),a.showPlaylist&&i.classList.add("has-playlist");let o=document.createElement("div");o.className="vd-music-player-info";let r=document.createElement("span");r.className="vd-music-player-icon",r.setAttribute("aria-hidden","true"),r.appendChild(n("music-note"));let l=document.createElement("span");l.className="vd-music-player-track-name",l.setAttribute("aria-live","polite"),l.setAttribute("aria-atomic","true"),o.appendChild(r),o.appendChild(l),i.appendChild(o);let d=document.createElement("div");d.className="vd-music-player-controls",d.setAttribute("role","group"),d.setAttribute("aria-label","Playback controls");let c=document.createElement("button");c.type="button",c.className="vd-music-player-btn vd-music-player-btn-prev",c.setAttribute("aria-label","Previous track"),c.appendChild(n("skip-back"));let h=document.createElement("button");h.type="button",h.className="vd-music-player-btn vd-music-player-btn-play",h.setAttribute("aria-label","Play"),h.appendChild(n("play"));let u=document.createElement("button");if(u.type="button",u.className="vd-music-player-btn vd-music-player-btn-next",u.setAttribute("aria-label","Next track"),u.appendChild(n("skip-forward")),d.appendChild(c),d.appendChild(h),d.appendChild(u),a.showPlaylist||a.shuffle!==void 0){let L=document.createElement("button");L.type="button",L.className="vd-music-player-btn vd-music-player-btn-shuffle",L.setAttribute("aria-label","Shuffle"),L.setAttribute("aria-pressed",a.shuffle?"true":"false"),L.appendChild(n("shuffle")),d.appendChild(L)}let p=document.createElement("span");p.className="vd-music-player-spacer",p.setAttribute("aria-hidden","true"),d.appendChild(p);let v=document.createElement("div");v.className="vd-music-player-volume";let y=document.createElement("span");y.className="vd-music-player-volume-icon",y.setAttribute("aria-hidden","true");let C=document.createElement("input");if(C.type="range",C.className="vd-music-player-volume-slider",C.min="0",C.max="1",C.step="0.01",C.value=String(a.volume),C.setAttribute("aria-label","Volume"),v.appendChild(y),v.appendChild(C),d.appendChild(v),a.showPlaylist){let L=document.createElement("button");L.type="button",L.className="vd-music-player-btn vd-music-player-btn-playlist",L.setAttribute("aria-label","Show playlist"),L.setAttribute("aria-expanded","false"),L.appendChild(n("playlist")),d.appendChild(L)}if(i.appendChild(d),a.showProgress){let L=document.createElement("div");L.className="vd-music-player-progress";let P=document.createElement("span");P.className="vd-music-player-time vd-music-player-time-elapsed",P.textContent="0:00",P.setAttribute("aria-hidden","true");let x=document.createElement("input");x.type="range",x.className="vd-music-player-progress-bar",x.min="0",x.max="100",x.step="0.1",x.value="0",x.setAttribute("aria-label","Seek");let _=document.createElement("span");_.className="vd-music-player-time vd-music-player-time-duration",_.textContent="0:00",_.setAttribute("aria-hidden","true"),L.appendChild(P),L.appendChild(x),L.appendChild(_),i.appendChild(L)}if(a.showPlaylist){let L=document.createElement("div");L.className="vd-music-player-playlist",L.setAttribute("aria-label","Playlist"),i.appendChild(L)}},play:function(i){let a=this.instances.get(i);a&&(!a.audio.src&&a.state.tracks.length&&(a.audio.src=a.state.tracks[a.state.currentIndex].url),a.audio.play().catch(()=>{}))},pause:function(i){let a=this.instances.get(i);a&&a.audio.pause()},toggle:function(i){let a=this.instances.get(i);a&&(a.state.isPlaying?this.pause(i):this.play(i))},next:function(i){let a=this.instances.get(i);if(!a||!a.state.tracks.length)return;let o=(a.state.currentIndex+1)%a.state.tracks.length;this._loadTrack(a,o,a.state.isPlaying)},previous:function(i){let a=this.instances.get(i);if(!a||!a.state.tracks.length)return;let o=a.state.tracks.length,r=(a.state.currentIndex-1+o)%o;this._loadTrack(a,r,a.state.isPlaying)},setVolume:function(i,a){let o=this.instances.get(i);if(!o)return;let r=Math.max(0,Math.min(1,a));o.state.volume=r,o.audio.volume=r,o.refs.volumeSlider&&(o.refs.volumeSlider.value=String(r),t(o.refs.volumeSlider)),i.dispatchEvent(new CustomEvent("musicplayer:volumechange",{bubbles:!0,detail:{volume:r}}))},setTrack:function(i,a){let o=this.instances.get(i);o&&this._loadTrack(o,a,o.state.isPlaying)},shuffle:function(i){let a=this.instances.get(i);!a||!a.refs.btnShuffle||a.refs.btnShuffle.click()},getState:function(i){let a=this.instances.get(i);if(!a)return null;let o=a.state;return{isPlaying:o.isPlaying,currentIndex:o.currentIndex,currentTrack:o.tracks[o.currentIndex]||null,volume:o.volume,shuffle:o.shuffle,tracks:o.tracks.slice()}},destroy:function(i){let a=this.instances.get(i);a&&(a.cleanup.forEach(o=>o()),this.instances.delete(i),i.removeAttribute("data-music-player-initialized"))},destroyAll:function(){this.instances.forEach((i,a)=>this.destroy(a))},_loadTrack:function(i,a,o){let r=i.state.tracks[a];if(!r)return;let l=this._containerOf(i);i.state.currentIndex=a,i.audio.src=r.url,i.refs.trackName&&(i.refs.trackName.textContent=r.name||"Unknown Track",i.refs.trackName.classList.remove("is-idle")),i.refs.playlistPanel&&i.refs.playlistPanel.querySelectorAll(".vd-music-player-playlist-item").forEach((d,c)=>{let h=c===a;d.classList.toggle("is-active",h),d.setAttribute("aria-current",h?"true":"false")}),i.refs.progressBar&&(i.refs.progressBar.value="0",t(i.refs.progressBar)),i.refs.timeElapsed&&(i.refs.timeElapsed.textContent="0:00"),i.refs.timeDuration&&(i.refs.timeDuration.textContent="0:00"),l&&l.dispatchEvent(new CustomEvent("musicplayer:trackchange",{bubbles:!0,detail:{index:a,name:r.name,url:r.url}})),o&&i.audio.play().catch(()=>{})},_containerOf:function(i){for(let[a,o]of this.instances)if(o===i)return a;return null}};typeof window.Vanduo<"u"&&window.Vanduo.register("musicPlayer",s),window.VanduoMusicPlayer=s})();var J=window.Vanduo;var ze=J;export{J as Vanduo,ze as default}; + `},isUsingDefaultPrimary:function(){return this.state.primary===this.DEFAULTS.PRIMARY_LIGHT||this.state.primary===this.DEFAULTS.PRIMARY_DARK},_normalizeDefaultPrimaryIfStaleWithStoredTheme:function(){if(!this.isUsingDefaultPrimary())return;let e=this.getDefaultPrimary(this.state.theme);this.state.primary!==e&&(this.state.primary=e)},bindEvents:function(){if(this.elements.trigger&&this.addListener(this.elements.trigger,"click",e=>{e.preventDefault(),e.stopPropagation(),this.toggle()}),this.bindPanelEvents(),window.matchMedia){let e=window.matchMedia("(prefers-color-scheme: dark)"),t=()=>{if(this.state.theme==="system"&&this.isUsingDefaultPrimary()){let n=this.getDefaultPrimary("system");n!==this.state.primary&&(this.applyPrimary(n),this.updateUI())}};e.addEventListener("change",t),this._cleanup.push(()=>e.removeEventListener("change",t))}this.addListener(document,"click",e=>{this.state.isOpen&&this.elements.customizer&&!this.elements.customizer.contains(e.target)&&this.close()}),this.addListener(document,"keydown",e=>{e.key==="Escape"&&this.state.isOpen&&this.close()})},toggle:function(){this.state.isOpen?this.close():this.open()},open:function(){this.state.isOpen=!0,this.positionPanel(),this.elements.panel&&this.elements.panel.classList.add("is-open"),this.elements.trigger&&this.elements.trigger.setAttribute("aria-expanded","true"),this.elements.overlay&&this.elements.overlay.classList.add("is-active"),this.dispatchEvent("panel-open",{isOpen:!0})},close:function(){this.state.isOpen=!1,this.elements.panel&&this.elements.panel.classList.remove("is-open"),this.elements.trigger&&this.elements.trigger.setAttribute("aria-expanded","false"),this.elements.overlay&&this.elements.overlay.classList.remove("is-active"),this.dispatchEvent("panel-close",{isOpen:!1})},updateUI:function(){if(!this.elements.panel)return;this.elements.panel.querySelectorAll("[data-color]").forEach(t=>{t.classList.toggle("is-active",t.dataset.color===this.state.primary)}),this.elements.panel.querySelectorAll("[data-neutral]").forEach(t=>{t.classList.toggle("is-active",t.dataset.neutral===this.state.neutral)}),this.elements.panel.querySelectorAll("[data-radius]").forEach(t=>{t.classList.toggle("is-active",t.dataset.radius===this.state.radius)});let e=this.elements.panel.querySelector("[data-customizer-font]");e&&(e.value=this.state.font)},reset:function(){this.applyTheme(this.DEFAULTS.THEME),this.applyPrimary(this.getDefaultPrimary(this.DEFAULTS.THEME)),this.applyNeutral(this.DEFAULTS.NEUTRAL),this.applyRadius(this.DEFAULTS.RADIUS),this.applyFont(this.DEFAULTS.FONT),this.updateUI(),this.dispatchEvent("reset",{state:{...this.state}})},getState:function(){return{...this.state}},setPreferences:function(e){e.primary&&this.applyPrimary(e.primary),e.neutral&&this.applyNeutral(e.neutral),e.radius&&this.applyRadius(e.radius),e.font&&this.applyFont(e.font),e.theme&&this.applyTheme(e.theme),this.updateUI()},getStorageValue:function(e,t){if(typeof window.safeStorageGet=="function")return window.safeStorageGet(e,t);try{let n=localStorage.getItem(e);return n!==null?n:t}catch{return t}},setStorageValue:function(e,t){if(typeof window.safeStorageSet=="function")return window.safeStorageSet(e,t);try{return localStorage.setItem(e,t),!0}catch{return!1}},destroyAll:function(){this._cleanup.forEach(e=>e()),this._cleanup=[],this.elements.panel&&this.elements.panel.removeAttribute("data-customizer-initialized"),this.close(),this.isInitialized=!1}};window.Vanduo&&window.Vanduo.register("themeCustomizer",m),window.ThemeCustomizer=m})();(function(){"use strict";let m={isInitialized:!1,_mediaQuery:null,_onMediaChange:null,init:function(){if(this.STORAGE_KEY="vanduo-theme-preference",this.state={preference:this.getPreference()},this.isInitialized){this.applyTheme(),this.renderUI(),this.updateUI();return}this.isInitialized=!0,this.applyTheme(),this.listenForSystemChanges(),this.renderUI(),console.log("Vanduo Theme Switcher initialized")},getPreference:function(){return this.getStorageValue(this.STORAGE_KEY,"system")},setPreference:function(e){this.state.preference=e,this.setStorageValue(this.STORAGE_KEY,e),this.applyTheme(),window.ThemeCustomizer&&window.ThemeCustomizer.applyTheme&&!window.ThemeCustomizer._isApplying&&window.ThemeCustomizer.applyTheme(e),this.updateUI()},getStorageValue:function(e,t){if(typeof window.safeStorageGet=="function")return window.safeStorageGet(e,t);try{let n=localStorage.getItem(e);return n!==null?n:t}catch{return t}},setStorageValue:function(e,t){if(typeof window.safeStorageSet=="function")return window.safeStorageSet(e,t);try{return localStorage.setItem(e,t),!0}catch{return!1}},applyTheme:function(){let e=this.state.preference;e==="system"?document.documentElement.removeAttribute("data-theme"):document.documentElement.setAttribute("data-theme",e)},listenForSystemChanges:function(){this._mediaQuery&&this._onMediaChange||(this._mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this._onMediaChange=e=>{this.state.preference==="system"&&(this.applyTheme(),window.ThemeCustomizer&&typeof window.ThemeCustomizer.applyTheme=="function"&&!window.ThemeCustomizer._isApplying&&window.ThemeCustomizer.applyTheme("system"))},this._mediaQuery.addEventListener("change",this._onMediaChange))},renderUI:function(){document.querySelectorAll('[data-toggle="theme"]').forEach(t=>{if(t.getAttribute("data-theme-initialized")==="true"){t.tagName==="SELECT"&&(t.value=this.state.preference);return}if(t.tagName==="SELECT"){t.value=this.state.preference;let n=s=>{this.setPreference(s.target.value)};t.addEventListener("change",n),t._themeToggleHandler=n}else{let n=()=>{let s=["system","light","dark"],i=(s.indexOf(this.state.preference)+1)%s.length;this.setPreference(s[i])};t.addEventListener("click",n),t._themeToggleHandler=n}t.setAttribute("data-theme-initialized","true")})},updateUI:function(){document.querySelectorAll('[data-toggle="theme"]').forEach(t=>{if(t.tagName==="SELECT")t.value=this.state.preference;else{let n=t.querySelector(".theme-current-label");n&&(n.textContent=this.state.preference.charAt(0).toUpperCase()+this.state.preference.slice(1))}})},destroyAll:function(){document.querySelectorAll('[data-toggle="theme"][data-theme-initialized="true"]').forEach(t=>{if(t._themeToggleHandler){let n=t.tagName==="SELECT"?"change":"click";t.removeEventListener(n,t._themeToggleHandler),delete t._themeToggleHandler}t.removeAttribute("data-theme-initialized")}),this._mediaQuery&&this._onMediaChange&&this._mediaQuery.removeEventListener("change",this._onMediaChange),this._mediaQuery=null,this._onMediaChange=null,this.isInitialized=!1}};window.Vanduo&&window.Vanduo.register("themeSwitcher",m)})();(function(){"use strict";let m={defaults:{position:"top-right",duration:5e3,dismissible:!0,showProgress:!0,pauseOnHover:!0},containers:{},getContainer:function(e){if(this.containers[e])return this.containers[e];let t=document.createElement("div");return t.className=`vd-toast-container vd-toast-container-${e}`,t.setAttribute("role","status"),t.setAttribute("aria-live","polite"),t.setAttribute("aria-atomic","false"),document.body.appendChild(t),this.containers[e]=t,t},show:function(e,t,n){typeof e=="string"&&(e={message:e,type:t,duration:n});let s=Object.assign({},this.defaults,e),i=this.getContainer(s.position),a=document.createElement("div");a.className="vd-toast",s.type&&a.classList.add(`vd-toast-${s.type}`),s.solid&&a.classList.add("vd-toast-solid"),s.showProgress&&s.duration>0&&a.classList.add("vd-toast-with-progress");let o="";if(s.icon){let v=typeof sanitizeHtml=="function"?sanitizeHtml(s.icon):escapeHtml(s.icon);o+=`${v}`}else s.type&&(o+=`${this.getDefaultIcon(s.type)}`);let r=typeof escapeHtml=="function"?escapeHtml:function(v){let y=document.createElement("div");return y.appendChild(document.createTextNode(v)),y.innerHTML};if(o+='
    ',s.title&&(o+=`
    ${r(String(s.title))}
    `),s.message&&(o+=`
    ${r(String(s.message))}
    `),o+="
    ",s.dismissible&&(o+=''),s.showProgress&&s.duration>0){let v=parseInt(s.duration,10)||0;o+=`
    `}if(a.innerHTML=o,i.appendChild(a),a._toastCleanup=[],s.dismissible){let v=a.querySelector(".vd-toast-close"),y=()=>{this.dismiss(a)};v.addEventListener("click",y),a._toastCleanup.push(()=>v.removeEventListener("click",y))}let l=null,d=s.duration,c=null,u=()=>{if(s.duration>0){c=Date.now(),l=setTimeout(()=>{this.dismiss(a)},d),a._toastTimeoutId=l;let v=a.querySelector(".vd-toast-progress");v&&(v.style.animationPlayState="running")}},h=()=>{if(l){clearTimeout(l),l=null,a._toastTimeoutId=null,d-=Date.now()-c;let v=a.querySelector(".vd-toast-progress");v&&(v.style.animationPlayState="paused")}};s.pauseOnHover&&(a.addEventListener("mouseenter",h),a.addEventListener("mouseleave",u),a._toastCleanup.push(()=>a.removeEventListener("mouseenter",h),()=>a.removeEventListener("mouseleave",u))),requestAnimationFrame(()=>{a.classList.add("is-visible"),u()}),a._toastConfig=s;let p=new CustomEvent("toast:show",{bubbles:!0,detail:{toast:a,config:s}});return a.dispatchEvent(p),a},dismiss:function(e){if(!e||e.classList.contains("is-exiting"))return;e._toastTimeoutId&&(clearTimeout(e._toastTimeoutId),e._toastTimeoutId=null),e.classList.remove("is-visible"),e.classList.add("is-exiting");let t=new CustomEvent("toast:dismiss",{bubbles:!0,detail:{toast:e}});e.dispatchEvent(t);let n=()=>{e.removeEventListener("transitionend",n),e._toastCleanup&&(e._toastCleanup.forEach(s=>s()),delete e._toastCleanup),e.parentElement&&e.parentElement.removeChild(e)};e.addEventListener("transitionend",n),setTimeout(()=>{e._toastCleanup&&(e._toastCleanup.forEach(s=>s()),delete e._toastCleanup),e.parentElement&&e.parentElement.removeChild(e)},400)},destroyAll:function(){Object.keys(this.containers).forEach(e=>{let t=this.containers[e];if(!t)return;t.querySelectorAll(".vd-toast").forEach(s=>{s._toastTimeoutId&&clearTimeout(s._toastTimeoutId),s._toastCleanup&&(s._toastCleanup.forEach(i=>i()),delete s._toastCleanup),s.parentElement&&s.parentElement.removeChild(s)}),t.parentElement&&t.parentElement.removeChild(t)}),this.containers={}},dismissAll:function(e){e&&this.containers[e]?this.containers[e].querySelectorAll(".vd-toast").forEach(n=>this.dismiss(n)):Object.values(this.containers).forEach(t=>{t.querySelectorAll(".vd-toast").forEach(s=>this.dismiss(s))})},getDefaultIcon:function(e){return{success:'',error:'',warning:'',info:''}[e]||""},success:function(e,t){return this.show(Object.assign({message:e,type:"success"},t))},error:function(e,t){return this.show(Object.assign({message:e,type:"error"},t))},warning:function(e,t){return this.show(Object.assign({message:e,type:"warning"},t))},info:function(e,t){return this.show(Object.assign({message:e,type:"info"},t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("toast",m),window.Toast=m})();(function(){"use strict";let m={tooltips:new Map,delayTimers:new Map,sanitizeHtml:function(e){if(typeof sanitizeHtml=="function")return sanitizeHtml(e);let t=document.createElement("div");return t.textContent=e||"",t.innerHTML},init:function(){document.querySelectorAll("[data-tooltip], [data-tooltip-html]").forEach(t=>{this.tooltips.has(t)||this.initTooltip(t)})},initTooltip:function(e){let t=this.createTooltip(e),n=[],s=()=>{this.showTooltip(e,t)},i=()=>{this.hideTooltip(e,t)},a=()=>{this.showTooltip(e,t)},o=()=>{this.hideTooltip(e,t)};e.addEventListener("mouseenter",s),e.addEventListener("mouseleave",i),e.addEventListener("focus",a),e.addEventListener("blur",o),n.push(()=>e.removeEventListener("mouseenter",s),()=>e.removeEventListener("mouseleave",i),()=>e.removeEventListener("focus",a),()=>e.removeEventListener("blur",o)),this.tooltips.set(e,{tooltip:t,cleanup:n})},createTooltip:function(e){let t=document.createElement("div");t.className="vd-tooltip",t.setAttribute("role","tooltip"),t.setAttribute("aria-hidden","true");let n="tooltip-"+Math.random().toString(36).substr(2,9);t.id=n,e.setAttribute("aria-describedby",n);let s=e.dataset.tooltipHtml,i=e.dataset.tooltip;s?(t.innerHTML=this.sanitizeHtml(s),t.classList.add("vd-tooltip-html")):i&&(t.textContent=i);let a=e.dataset.tooltipPlacement||e.dataset.placement||"top";t.setAttribute("data-placement",a),t.classList.add(`vd-tooltip-${a}`),e.dataset.tooltipVariant&&t.classList.add(`vd-tooltip-${e.dataset.tooltipVariant}`),e.dataset.tooltipSize&&t.classList.add(`vd-tooltip-${e.dataset.tooltipSize}`);let o=parseInt(e.dataset.tooltipDelay)||0;return t.dataset.delay=o,document.body.appendChild(t),t},showTooltip:function(e,t){let n=parseInt(t.dataset.delay)||0;if(n>0){let s=setTimeout(()=>{this.positionTooltip(e,t),t.classList.add("is-visible"),t.setAttribute("aria-hidden","false")},n);this.delayTimers.set(e,s)}else this.positionTooltip(e,t),t.classList.add("is-visible"),t.setAttribute("aria-hidden","false")},hideTooltip:function(e,t){let n=this.delayTimers.get(e);n&&(clearTimeout(n),this.delayTimers.delete(e)),t.classList.remove("is-visible"),t.setAttribute("aria-hidden","true")},positionTooltip:function(e,t){let n=t.dataset.placement||"top",s=e.getBoundingClientRect(),i=t.getBoundingClientRect(),a=window.pageYOffset||document.documentElement.scrollTop,o=window.pageXOffset||document.documentElement.scrollLeft,r=0,l=0;switch(n){case"top":r=s.top+a-i.height-8,l=s.left+o+s.width/2-i.width/2;break;case"bottom":r=s.bottom+a+8,l=s.left+o+s.width/2-i.width/2;break;case"left":r=s.top+a+s.height/2-i.height/2,l=s.left+o-i.width-8;break;case"right":r=s.top+a+s.height/2-i.height/2,l=s.right+o+8;break}let d=window.innerWidth,c=window.innerHeight,u=8;ld-u&&(l=d-i.width-u),ra+c-u&&(r=a+c-i.height-u),t.style.cssText=`position: absolute; top: 0; left: 0; transform: translate(${l}px, ${r}px);`},show:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t&&this.tooltips.has(t)){let{tooltip:n}=this.tooltips.get(t);this.showTooltip(t,n)}},hide:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t&&this.tooltips.has(t)){let{tooltip:n}=this.tooltips.get(t);this.hideTooltip(t,n)}},update:function(e,t,n=!1){let s=typeof e=="string"?document.querySelector(e):e;if(s&&this.tooltips.has(s)){let{tooltip:i}=this.tooltips.get(s);n?(i.innerHTML=this.sanitizeHtml(t),i.classList.add("vd-tooltip-html")):(i.textContent=t,i.classList.remove("vd-tooltip-html"))}},destroy:function(e){let t=this.tooltips.get(e);if(!t)return;let n=this.delayTimers.get(e);n&&(clearTimeout(n),this.delayTimers.delete(e)),t.cleanup.forEach(s=>s()),t.tooltip&&t.tooltip.parentNode&&t.tooltip.parentNode.removeChild(t.tooltip),this.tooltips.delete(e)},destroyAll:function(){this.tooltips.forEach((e,t)=>{this.destroy(t)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("tooltips",m),window.VanduoTooltips=m})();(function(){"use strict";let m={minQueryLength:2,maxResults:10,debounceMs:150,highlightTag:"mark",keyboardShortcut:!0,containerSelector:".vd-doc-search",inputSelector:".vd-doc-search-input",resultsSelector:".vd-doc-search-results",contentSelector:".doc-content section[id]",titleSelector:".demo-title, h2, h3",navSelector:".doc-nav-link",sectionSelector:".doc-nav-section",excludeFromContent:"pre, code, script, style",maxContentLength:500,data:null,categoryIcons:{"getting-started":"ph-rocket-launch",core:"ph-cube",components:"ph-puzzle-piece",interactive:"ph-cursor-click","data-display":"ph-table",feedback:"ph-bell",meta:"ph-info",default:"ph-file-text"},onSelect:null,onSearch:null,onOpen:null,onClose:null,emptyTitle:"No results found",emptyText:"Try different keywords or check spelling",placeholder:"Search..."};function e(n){let s=Object.assign({},m,n||{}),i={initialized:!1,index:[],results:[],activeIndex:-1,isOpen:!1,query:"",container:null,input:null,resultsContainer:null,debounceTimer:null,boundHandlers:{}};function a(b,S,...A){try{S(...A)}catch(_){console.warn('[Vanduo Search] Callback error in "'+b+'":',_)}}function o(b){if(i.resultsContainer)try{i.resultsContainer.innerHTML=b}catch(S){console.warn("[Vanduo Search] Failed to render results:",S)}}function r(){return i.initialized?U:(i.container=document.querySelector(s.containerSelector),!i.container||(i.input=i.container.querySelector(s.inputSelector),i.resultsContainer=i.container.querySelector(s.resultsSelector),!i.input||!i.resultsContainer)?(i.initialized=!1,null):(s.placeholder&&i.input.setAttribute("placeholder",s.placeholder),l(),v(),C(),i.initialized=!0,U))}function l(){if(i.index=[],s.data&&Array.isArray(s.data)){s.data.forEach(function(A){i.index.push({id:A.id||p(A.title),title:A.title||"",category:A.category||"",categorySlug:p(A.category||""),content:A.content||"",keywords:A.keywords||h(A.title+" "+A.content),url:A.url||"#"+(A.id||p(A.title)),icon:A.icon||""})});return}let b=document.querySelectorAll(s.contentSelector),S=d();b.forEach(function(A){let _=A.id;if(!_)return;let N=A.querySelector(s.titleSelector),q=N?N.textContent.replace(/v[\d.]+/g,"").trim():_,X=S[_]||"Documentation",$=c(A),B=u(A,q),Y=N?N.querySelector("i.ph"):null,W="";if(Y&&Y.classList){for(let K=0;K2&&A.push(q)}),b.querySelectorAll("code").forEach(function(q){let $=(q.textContent||"").match(/\.([\w-]+)/g);$&&$.forEach(function(B){A.push(B.substring(1).toLowerCase())})}),b.querySelectorAll("[data-tooltip], [data-modal]").forEach(function(q){q.getAttributeNames().filter(function($){return $.startsWith("data-")}).forEach(function($){A.push($.replace("data-",""))})}),Array.from(new Set(A))}function h(b){return b.toLowerCase().split(/\s+/).filter(function(A){return A.length>2})}function p(b){return b.toLowerCase().replace(/\s+/g,"-").replace(/[^a-z0-9-]/g,"")}function v(){i.boundHandlers.handleInput=function(b){L(b)},i.boundHandlers.handleFocus=function(){i.query.length>=s.minQueryLength&&H()},i.boundHandlers.handleKeydown=function(b){P(b)},i.boundHandlers.handleOutsideClick=function(b){i.container.contains(b.target)||z()},i.boundHandlers.handleGlobalKeydown=function(b){s.keyboardShortcut&&(b.metaKey||b.ctrlKey)&&b.key==="k"&&(b.preventDefault(),i.input.focus(),i.input.select())},i.boundHandlers.handleResultClick=function(b){let S=b.target.closest(".vd-doc-search-result");if(S){let A=parseInt(S.dataset.index,10);I(A)}},i.input.addEventListener("input",i.boundHandlers.handleInput),i.input.addEventListener("focus",i.boundHandlers.handleFocus),i.input.addEventListener("keydown",i.boundHandlers.handleKeydown),document.addEventListener("click",i.boundHandlers.handleOutsideClick),document.addEventListener("keydown",i.boundHandlers.handleGlobalKeydown),i.resultsContainer.addEventListener("click",i.boundHandlers.handleResultClick)}function y(){i.input&&(i.input.removeEventListener("input",i.boundHandlers.handleInput),i.input.removeEventListener("focus",i.boundHandlers.handleFocus),i.input.removeEventListener("keydown",i.boundHandlers.handleKeydown)),document.removeEventListener("click",i.boundHandlers.handleOutsideClick),document.removeEventListener("keydown",i.boundHandlers.handleGlobalKeydown),i.resultsContainer&&i.resultsContainer.removeEventListener("click",i.boundHandlers.handleResultClick)}function C(){let b=i.resultsContainer.id||"search-results-"+Math.random().toString(36).substr(2,9);i.resultsContainer.id=b,i.input.setAttribute("role","combobox"),i.input.setAttribute("aria-autocomplete","list"),i.input.setAttribute("aria-controls",b),i.input.setAttribute("aria-expanded","false"),i.resultsContainer.setAttribute("role","listbox"),i.resultsContainer.setAttribute("aria-label","Search results")}function L(b){let S=b.target.value.trim();i.debounceTimer&&clearTimeout(i.debounceTimer),i.debounceTimer=setTimeout(function(){if(i.query=S,S.length=s.minQueryLength&&(b.preventDefault(),i.results=x(i.query),D(),H());return}switch(b.key){case"ArrowDown":b.preventDefault(),w(1);break;case"ArrowUp":b.preventDefault(),w(-1);break;case"Enter":b.preventDefault(),i.activeIndex>=0?I(i.activeIndex):i.results.length>0&&I(0);break;case"Escape":b.preventDefault(),z();break;case"Tab":z();break}}function x(b){let S=b.toLowerCase().split(/\s+/).filter(function(_){return _.length>0}),A=[];return i.index.forEach(function(_){let N=0,q=_.title.toLowerCase(),X=_.category.toLowerCase(),$=_.content.toLowerCase();S.forEach(function(B){q.includes(B)&&(N+=100,q===B?N+=50:q.startsWith(B)&&(N+=25)),X.includes(B)&&(N+=50),_.keywords.some(function(W){return W.includes(B)})&&(N+=30),$.includes(B)&&(N+=10)}),N>0&&A.push({id:_.id,title:_.title,category:_.category,categorySlug:_.categorySlug,content:_.content,url:_.url,icon:_.icon,score:N})}),A.sort(function(_,N){return N.score-_.score}),A.slice(0,s.maxResults)}function D(){if(i.results.length===0){o(V());return}let b='
      ';i.results.forEach(function(S,A){let _=A===i.activeIndex,N=S.icon||k(S.categorySlug),q=T(S.content,i.query);b+='
    • '+M(S.title,i.query)+'
      '+f(S.category)+'
      '+M(q,i.query)+"
      • "}),b+="
    ",b+=g(),o(b)}function V(){return'
    '+f(s.emptyTitle)+'
    '+f(s.emptyText)+"
    "}function g(){return'
    \u2191\u2193 to navigate\u21B5 to selectesc to close
    '}function k(b){return s.categoryIcons[b]||s.categoryIcons.default||"ph-file-text"}function T(b,S){let A=S.toLowerCase().split(/\s+/),_=b.toLowerCase(),N=100,q=-1;for(let Y=0;Y0&&(B="..."+B),$0}),_=f(b);return A.forEach(function(N){if(N.length>50)return;let q=new RegExp("("+N.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")+")","gi");_=_.replace(q,"<"+s.highlightTag+">$1")}),_}function f(b){let S=document.createElement("div");return S.textContent=b,S.innerHTML}function w(b){let S=i.activeIndex+b;S<0?S=i.results.length-1:S>=i.results.length&&(S=0),E(S)}function E(b){let S=i.resultsContainer.querySelector(".vd-doc-search-result.is-active");S&&(S.classList.remove("is-active"),S.setAttribute("aria-selected","false")),i.activeIndex=b;let A=i.resultsContainer.querySelector('[data-index="'+b+'"]');A&&(A.classList.add("is-active"),A.setAttribute("aria-selected","true"),i.input.setAttribute("aria-activedescendant","vd-doc-search-result-"+b),A.scrollIntoView({block:"nearest"}))}function I(b){let S=i.results[b];if(!S)return;if(z(),i.input.value="",i.query="",typeof s.onSelect=="function"){a("onSelect",s.onSelect,S);return}let A=document.querySelector(S.url);A&&(A.scrollIntoView({behavior:"smooth",block:"start"}),window.history.pushState(null,"",S.url),O(S.id))}function O(b){document.querySelectorAll(s.navSelector).forEach(function(A){A.classList.remove("active"),A.getAttribute("href")==="#"+b&&A.classList.add("active")})}function H(){i.isOpen||(i.isOpen=!0,i.resultsContainer.classList.add("is-open"),i.input.setAttribute("aria-expanded","true"),typeof s.onOpen=="function"&&a("onOpen",s.onOpen))}function z(){i.isOpen&&(i.isOpen=!1,i.activeIndex=-1,i.resultsContainer.classList.remove("is-open"),i.input.setAttribute("aria-expanded","false"),i.input.removeAttribute("aria-activedescendant"),typeof s.onClose=="function"&&a("onClose",s.onClose))}function R(){y(),i.initialized=!1,i.index=[],i.results=[],i.isOpen=!1,i.query="",i.debounceTimer&&clearTimeout(i.debounceTimer),i.resultsContainer&&o("")}function j(){l()}function G(b){Object.assign(s,b)}function Z(){return Object.assign({},s)}function F(){return i.index.slice()}let U={init:r,destroy:R,rebuild:j,search:x,open:H,close:z,setConfig:G,getConfig:Z,getIndex:F};return U}let t={create:function(n){let s=e(n);return s&&s.init(),s||null},_instance:null,config:Object.assign({},m),init:function(n){return this._instance&&this._instance.destroy(),n&&Object.assign(this.config,n),this._instance=e(this.config),this._instance?this._instance.init():null},destroy:function(){this._instance&&(this._instance.destroy(),this._instance=null)},destroyAll:function(){this.destroy()},rebuild:function(){this._instance&&this._instance.rebuild()},search:function(n){return this._instance?this._instance.search(n):[]},open:function(){this._instance&&this._instance.open()},close:function(){this._instance&&this._instance.close()}};typeof window.Vanduo<"u"&&window.Vanduo.register("docSearch",t),window.Search=t,window.DocSearch=t,window.VanduoDocSearch=t})();(function(){"use strict";let m={instances:new Map,currentDrag:null,touchState:null,feedbackElement:null,containerSelector:".vd-draggable-container, .vd-draggable-container-vertical",init:function(){document.querySelectorAll(".vd-draggable, [data-draggable]").forEach(s=>{this.instances.has(s)||this.initDraggable(s)}),document.querySelectorAll(this.containerSelector).forEach(s=>{this.instances.has(s)||this.initContainer(s)}),document.querySelectorAll(".vd-drop-zone").forEach(s=>{this.instances.has(s)||this.initDropZone(s)}),this.createFeedbackElement()},initDraggable:function(e){let t=[];e.hasAttribute("draggable")||e.setAttribute("draggable","true"),e.hasAttribute("tabindex")||e.setAttribute("tabindex","0"),e.setAttribute("role","option"),e.setAttribute("aria-roledescription","draggable item"),e.setAttribute("aria-grabbed","false");let n=c=>{this.handleDragStart(c,e)};e.addEventListener("dragstart",n),t.push(()=>e.removeEventListener("dragstart",n));let s=c=>{this.handleDrag(c,e)};e.addEventListener("drag",s),t.push(()=>e.removeEventListener("drag",s));let i=c=>{this.handleDragEnd(c,e)};e.addEventListener("dragend",i),t.push(()=>e.removeEventListener("dragend",i));let a=c=>{this.handleTouchStart(c,e)};e.addEventListener("touchstart",a),t.push(()=>e.removeEventListener("touchstart",a));let o=c=>{this.handleTouchMove(c,e)};e.addEventListener("touchmove",o,{passive:!1}),t.push(()=>e.removeEventListener("touchmove",o));let r=c=>{this.handleTouchEnd(c,e)};e.addEventListener("touchend",r,{passive:!1}),t.push(()=>e.removeEventListener("touchend",r));let l=c=>{this.handleTouchEnd(c,e)};e.addEventListener("touchcancel",l),t.push(()=>e.removeEventListener("touchcancel",l));let d=c=>{this.handleKeydown(c,e)};e.addEventListener("keydown",d),t.push(()=>e.removeEventListener("keydown",d)),this.instances.set(e,{cleanup:t})},initContainer:function(e){e.setAttribute("role","listbox"),e.setAttribute("aria-label",e.getAttribute("aria-label")||"Draggable items"),e.querySelectorAll(".vd-draggable-item").forEach(o=>{this.instances.has(o)||this.initDraggable(o)});let n=[],s=o=>{o.preventDefault(),o.dataTransfer.dropEffect="move"},i=o=>{if(o.preventDefault(),o.dataTransfer.dropEffect="move",!this.currentDrag)return;let r=this.currentDrag.element;e.contains(r)&&(o.clientX===0&&o.clientY===0||this.handleReorder(e,r,o.clientX,o.clientY))},a=o=>{o.preventDefault()};e.addEventListener("dragenter",s),e.addEventListener("dragover",i),e.addEventListener("drop",a),n.push(()=>{e.removeEventListener("dragenter",s),e.removeEventListener("dragover",i),e.removeEventListener("drop",a)}),this.instances.set(e,{cleanup:n})},initDropZone:function(e){let t=[];e.setAttribute("role","region"),e.setAttribute("aria-dropeffect","move"),e.hasAttribute("aria-label")||e.setAttribute("aria-label","Drop zone");let n=o=>{o.preventDefault(),this.handleDragOver(o,e)};e.addEventListener("dragover",n),t.push(()=>e.removeEventListener("dragover",n));let s=o=>{o.preventDefault(),this.handleDragEnter(o,e)};e.addEventListener("dragenter",s),t.push(()=>e.removeEventListener("dragenter",s));let i=o=>{this.handleDragLeave(o,e)};e.addEventListener("dragleave",i),t.push(()=>e.removeEventListener("dragleave",i));let a=o=>{o.preventDefault(),this.handleDrop(o,e)};e.addEventListener("drop",a),t.push(()=>e.removeEventListener("drop",a)),this.instances.set(e,{cleanup:t})},createFeedbackElement:function(){if(!this.feedbackElement){let e=document.querySelector(".vd-drag-feedback");if(e){this.feedbackElement=e;return}this.feedbackElement=document.createElement("div"),this.feedbackElement.className="vd-drag-feedback hidden",this.feedbackElement.setAttribute("role","presentation"),document.body.appendChild(this.feedbackElement)}},handleDragStart:function(e,t){t.classList.add("is-dragging"),t.setAttribute("aria-grabbed","true"),this.currentDrag={element:t,initialPosition:{x:e.clientX,y:e.clientY},initialBounds:t.getBoundingClientRect(),data:this.getData(t)},e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",this.currentDrag.data),t.dispatchEvent(new CustomEvent("draggable:start",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:e.clientX,y:e.clientY}}}))},handleDrag:function(e,t){this.currentDrag&&t.dispatchEvent(new CustomEvent("draggable:drag",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:e.clientX,y:e.clientY},delta:{x:e.clientX-this.currentDrag.initialPosition.x,y:e.clientY-this.currentDrag.initialPosition.y}}}))},handleDragEnd:function(e,t){t.classList.remove("is-dragging"),t.classList.add("is-dropped"),setTimeout(()=>t.classList.remove("is-dropped"),300),t.setAttribute("aria-grabbed","false"),this.feedbackElement&&this.feedbackElement.classList.add("hidden");let n=this.currentDrag?.data||this.getData(t),s=this.currentDrag?.initialPosition||{x:0,y:0};t.dispatchEvent(new CustomEvent("draggable:end",{bubbles:!0,detail:{element:t,data:n,position:{x:e.clientX,y:e.clientY},delta:{x:e.clientX-s.x,y:e.clientY-s.y}}})),this.currentDrag=null},handleTouchStart:function(e,t){let n=e.touches[0],s=t.getBoundingClientRect();this.touchState={element:t,startX:n.clientX,startY:n.clientY,lastX:n.clientX,lastY:n.clientY,offsetX:n.clientX-s.left,offsetY:n.clientY-s.top,startTime:Date.now(),isDragging:!1}},handleTouchMove:function(e,t){if(!this.touchState)return;let n=e.touches[0];this.touchState.lastX=n.clientX,this.touchState.lastY=n.clientY;let s=n.clientX-this.touchState.startX,i=n.clientY-this.touchState.startY;if((Math.abs(s)>10||Math.abs(i)>10)&&(e.cancelable&&e.preventDefault(),this.touchState.isDragging||(this.touchState.isDragging=!0,t.classList.add("is-dragging"),t.setAttribute("aria-grabbed","true"),this.currentDrag={element:t,initialPosition:{x:this.touchState.startX,y:this.touchState.startY},initialBounds:t.getBoundingClientRect(),data:this.getData(t),offsetX:this.touchState.offsetX,offsetY:this.touchState.offsetY},t.dispatchEvent(new CustomEvent("draggable:start",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:n.clientX,y:n.clientY}}}))),this.updateFeedback(n.clientX,n.clientY),this.currentDrag)){t.dispatchEvent(new CustomEvent("draggable:drag",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:n.clientX,y:n.clientY},delta:{x:s,y:i}}})),this.updateTouchDropZone(n.clientX,n.clientY);let a=t.closest(this.containerSelector);a&&a.contains(t)&&this.handleReorder(a,t,n.clientX,n.clientY)}},handleTouchEnd:function(e,t){if(this.touchState&&this.touchState.isDragging){e.cancelable&&e.preventDefault();let n=e.changedTouches?.[0],s={x:n?.clientX??this.touchState.lastX??this.touchState.startX,y:n?.clientY??this.touchState.lastY??this.touchState.startY},i=this.resolveDropZoneAtPoint(s.x,s.y)||this.touchState.overZone;i?this.dispatchDrop(i,s):this.touchState.overZone&&this.touchState.overZone.classList.remove("is-drag-over"),t.classList.remove("is-dragging"),t.classList.add("is-dropped"),t.setAttribute("aria-grabbed","false"),setTimeout(()=>t.classList.remove("is-dropped"),300),this.feedbackElement&&this.feedbackElement.classList.add("hidden");let a=this.currentDrag?.data||this.getData(t),o=this.touchState?.startX||0,r=this.touchState?.startY||0;t.dispatchEvent(new CustomEvent("draggable:end",{bubbles:!0,detail:{element:t,data:a,position:s,delta:{x:s.x-o,y:s.y-r}}}))}this.touchState=null,this.currentDrag=null},handleDragOver:function(e,t){e.preventDefault(),e.dataTransfer.dropEffect="move"},handleDragEnter:function(e,t){e.preventDefault(),t.classList.add("is-drag-over")},handleDragLeave:function(e,t){t.classList.remove("is-drag-over")},handleDrop:function(e,t){e.preventDefault(),this.dispatchDrop(t,{x:e.clientX,y:e.clientY})},resolveDropZoneAtPoint:function(e,t){if(!Number.isFinite(e)||!Number.isFinite(t))return null;if(typeof document.elementsFromPoint=="function"){let a=document.elementsFromPoint(e,t);for(let o of a){let r=o.closest(".vd-drop-zone");if(r)return r}}let n=document.elementFromPoint(e,t),s=n?n.closest(".vd-drop-zone"):null;if(s)return s;let i=document.querySelectorAll(".vd-drop-zone");for(let a of i){let o=a.getBoundingClientRect();if(e>=o.left&&e<=o.right&&t>=o.top&&t<=o.bottom)return a}return null},updateTouchDropZone:function(e,t){if(!this.touchState)return;let n=this.resolveDropZoneAtPoint(e,t),s=this.touchState.overZone||null;s&&s!==n&&s.classList.remove("is-drag-over"),n&&n!==s&&n.classList.add("is-drag-over"),this.touchState.overZone=n||null},dispatchDrop:function(e,t){e.classList.remove("is-drag-over"),e.dispatchEvent(new CustomEvent("draggable:drop",{bubbles:!0,detail:{zone:e,element:this.currentDrag?.element,data:this.currentDrag?.data,position:t}}))},handleReorder:function(e,t,n,s){let i=e.classList.contains("vd-draggable-container-vertical"),o=[...e.querySelectorAll(".vd-draggable-item:not(.is-dragging), .vd-draggable:not(.is-dragging)")].reduce((r,l)=>{let d=l.getBoundingClientRect(),c=i?s-d.top-d.height/2:n-d.left-d.width/2;return c<0&&c>r.offset?{offset:c,element:l}:r},{offset:Number.NEGATIVE_INFINITY}).element;o==null?e.appendChild(t):e.insertBefore(t,o)},handleKeydown:function(e,t){switch(e.key){case"Enter":case" ":e.preventDefault(),t.click();break;case"Escape":t.classList.contains("is-dragging")&&(t.classList.remove("is-dragging"),t.setAttribute("aria-grabbed","false"),this.feedbackElement&&this.feedbackElement.classList.add("hidden"),this.currentDrag=null);break;case"ArrowUp":case"ArrowLeft":{e.preventDefault();let n=t.previousElementSibling;n&&(n.classList.contains("vd-draggable")||n.classList.contains("vd-draggable-item"))&&(t.parentNode.insertBefore(t,n),t.focus(),t.dispatchEvent(new CustomEvent("draggable:reorder",{bubbles:!0,detail:{element:t,direction:"up"}})));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();let n=t.nextElementSibling;n&&(n.classList.contains("vd-draggable")||n.classList.contains("vd-draggable-item"))&&(t.parentNode.insertBefore(n,t),t.focus(),t.dispatchEvent(new CustomEvent("draggable:reorder",{bubbles:!0,detail:{element:t,direction:"down"}})));break}}},getData:function(e){return e.dataset.draggable||e.textContent.trim()},updateFeedback:function(e,t){if(!this.currentDrag)return;this.feedbackElement.classList.remove("hidden");let n=this.currentDrag.initialBounds;this.feedbackElement.innerHTML="";let s=this.currentDrag.element.cloneNode(!0);this.feedbackElement.appendChild(s);let i=this.currentDrag.offsetX??20,a=this.currentDrag.offsetY??20;Object.assign(this.feedbackElement.style,{left:e-i+"px",top:t-a+"px",width:n.width+"px",height:n.height+"px"})},makeDraggable:function(e,t={}){let n=typeof e=="string"?document.querySelector(e):e;n&&!this.instances.has(n)&&(n.classList.add("vd-draggable"),n.setAttribute("draggable","true"),t.data&&(n.dataset.draggable=t.data),this.initDraggable(n))},removeDraggable:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&this.instances.has(t)&&(this.instances.get(t).cleanup.forEach(s=>s()),this.instances.delete(t),t.classList.remove("vd-draggable"),t.removeAttribute("draggable"),t.removeAttribute("data-draggable"))},destroy:function(e){this.removeDraggable(e)},destroyAll:function(){Array.from(this.instances.keys()).forEach(t=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("draggable",m),window.VanduoDraggable=m})();(function(){"use strict";let m=new Map;function e(r){try{return new URL(r,window.location.href).origin===window.location.origin}catch{return!1}}function t(r,l){let c=new DOMParser().parseFromString(l.trim(),"text/html"),u=["SCRIPT","IFRAME","OBJECT","EMBED","FORM","BASE","LINK","META","STYLE"];for(let v of u){let y=c.querySelectorAll(v);for(let C=y.length-1;C>=0;C--)y[C].parentNode.removeChild(y[C])}function h(v){if(v.nodeType===Node.ELEMENT_NODE){let y=v.attributes;for(let L=y.length-1;L>=0;L--){let P=y[L].name.toLowerCase(),D=y[L].value.toLowerCase().trim();(P.startsWith("on")||D.startsWith("javascript:")||D.startsWith("data:")||D.startsWith("vbscript:"))&&v.removeAttribute(y[L].name)}let C=v.childNodes;for(let L=0;L
    Loading\u2026
    '}function s(){return'
    Loading\u2026
    '}function i(r){return!r||r==="skeleton"?n():r==="spinner"?s():r}function a(r,l,d){r.dispatchEvent(new CustomEvent(l,{bubbles:!0,detail:d||{}}))}let o={observe:function(r,l,d){if(!(r instanceof Element)){console.warn("[VanduoLazyLoad] observe() requires a DOM Element.");return}if(typeof l!="function"){console.warn("[VanduoLazyLoad] observe() requires a callback function.");return}if(m.has(r))return;let c=d&&d.threshold!=null?d.threshold:0,u=d&&d.rootMargin?d.rootMargin:"0px",h=new IntersectionObserver(function(p,v){p.forEach(function(y){if(y.isIntersecting){v.unobserve(y.target),m.delete(y.target);try{l(y.target)}catch(C){console.error("[VanduoLazyLoad] Callback threw:",C)}}})},{threshold:c,rootMargin:u});m.set(r,h),h.observe(r)},unobserve:function(r){let l=m.get(r);l&&(l.unobserve(r),m.delete(r))},unobserveAll:function(){m.forEach(function(r,l){r.unobserve(l)}),m.clear()},loadSection:function(r,l,d){if(typeof r!="string"||!r){console.warn("[VanduoLazyLoad] loadSection() requires a non-empty URL string.");return}if(!(l instanceof Element)){console.warn("[VanduoLazyLoad] loadSection() requires a DOM Element as containerEl.");return}if(!e(r)){console.error("[VanduoLazyLoad] loadSection() blocked cross-origin URL:",r);return}let c=d||{},u=i(c.placeholder);t(l,u),a(l,"lazysection:loading",{url:r}),this.observe(l,function(){let h=new window.AbortController,p=setTimeout(function(){h.abort()},1e4);window.fetch(r,{signal:h.signal}).then(function(v){if(clearTimeout(p),!v.ok)throw new Error("HTTP "+v.status);return v.text()}).then(function(v){t(l,v),a(l,"lazysection:loaded",{url:r}),typeof window.Vanduo<"u"&&window.Vanduo.init(),typeof c.onLoaded=="function"&&c.onLoaded(l)}).catch(function(v){let y=document.createElement("div");y.className="vd-alert vd-alert-error",y.setAttribute("role","alert");let C=document.createElement("span");C.textContent="Failed to load content. ";let L=document.createElement("small");for(L.style.opacity="0.7",L.textContent=v.message,y.appendChild(C),y.appendChild(L);l.firstChild;)l.removeChild(l.firstChild);l.appendChild(y),a(l,"lazysection:error",{url:r,error:v}),console.error("[VanduoLazyLoad] loadSection failed:",v),typeof c.onError=="function"&&c.onError(v)})},{threshold:c.threshold,rootMargin:c.rootMargin})},init:function(){let r=this;document.querySelectorAll("[data-vd-lazy]").forEach(function(d){if(m.has(d)||d.dataset.vdLazyState==="loading"||d.dataset.vdLazyState==="loaded")return;let c=d.getAttribute("data-vd-lazy");if(!c)return;d.dataset.vdLazyState="loading";let u=d.getAttribute("data-vd-lazy-placeholder")||"skeleton";r.loadSection(c,d,{placeholder:u,onLoaded:function(){d.dataset.vdLazyState="loaded"},onError:function(){d.dataset.vdLazyState="error"}})})}};typeof window.Vanduo<"u"&&window.Vanduo.register("LazyLoad",o),window.VanduoLazyLoad=o})();(function(){"use strict";let m={observers:new Map,init:function(){document.querySelectorAll("[data-glass-scroll]").forEach(e=>{this.observers.has(e)||this.initElement(e)})},initElement:function(e){let t=e.dataset.glassSentinel,n;if(t&&(n=document.querySelector(t)),n||(n=e.previousElementSibling),!n){e.classList.add("is-glass-active");return}let s=new IntersectionObserver(i=>{i.forEach(a=>{e.classList.toggle("is-glass-active",!a.isIntersecting)})},{threshold:0,rootMargin:"0px"});s.observe(n),this.observers.set(e,s)},destroy:function(e){let t=this.observers.get(e);t&&(t.disconnect(),this.observers.delete(e))},destroyAll:function(){this.observers.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("glassScroll",m),window.VanduoGlassScroll=m})();(function(){"use strict";let e={instances:new Map,init:function(){document.querySelectorAll(".vd-morph, [data-vd-morph]").forEach(function(n){e.instances.has(n)||n.getAttribute("data-vd-morph")!=="manual"&&e.initInstance(n)})},initInstance:function(t){e._ensureLayers(t);let n=[],s=!1,i=function(a){s||(e._runMorph(t,a,function(){s=!1}),s=!0)};t.addEventListener("click",i),n.push(function(){t.removeEventListener("click",i)}),this.instances.set(t,{cleanup:n})},morph:function(t){t&&(this.instances.has(t)||this.initInstance(t),this._runMorph(t,null,null))},destroy:function(t){let n=this.instances.get(t);n&&(n.cleanup.forEach(function(s){s()}),this.instances.delete(t))},destroyAll:function(){this.instances.forEach(function(t,n){e.destroy(n)})},_ensureLayers:function(t){if(!t.querySelector(".vd-morph-wave")){let n=document.createElement("span");n.className="vd-morph-wave",n.setAttribute("aria-hidden","true"),t.insertBefore(n,t.firstChild)}if(!t.querySelector(".vd-morph-shine")){let n=document.createElement("span");n.className="vd-morph-shine",n.setAttribute("aria-hidden","true");let s=t.querySelector(".vd-morph-wave");s&&s.nextSibling?t.insertBefore(n,s.nextSibling):t.insertBefore(n,t.firstChild)}},_runMorph:function(t,n,s){let i=t.querySelector(".vd-morph-wave");if(i){let r=t.getBoundingClientRect(),l=r.left+r.width/2,d=r.top+r.height/2,c=n&&n.clientX||l,u=n&&n.clientY||d;i.style.left=c-r.left+"px",i.style.top=u-r.top+"px"}t.classList.add("is-morphing");let a=750,o=getComputedStyle(t).getPropertyValue("--morph-duration");if(o){let r=parseFloat(o);isNaN(r)||(a=r*(o.indexOf("ms")!==-1?1:1e3))}setTimeout(function(){t.classList.remove("is-morphing");let r=t.querySelector(".vd-morph-current"),l=t.querySelector(".vd-morph-next");r&&l&&(r.classList.remove("vd-morph-current"),r.classList.add("vd-morph-next"),l.classList.remove("vd-morph-next"),l.classList.add("vd-morph-current")),t.classList.add("morph-done"),setTimeout(function(){t.classList.remove("morph-done")},350),typeof s=="function"&&s()},a)}};typeof window.Vanduo<"u"&&window.Vanduo.register("morph",e),window.VanduoMorph=e})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll(".vd-flow, .vd-carousel").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=e.querySelector(".vd-flow-track");if(!t)return;let n=Array.from(t.querySelectorAll(".vd-flow-slide"));if(n.length===0)return;let s=e.classList.contains("vd-flow-fade"),i=e.hasAttribute("data-vd-autoplay"),a=parseInt(e.getAttribute("data-vd-interval"),10)||5e3,o=e.getAttribute("data-vd-loop")!=="false",r={current:0,total:n.length,autoplayTimer:null,isFade:s,loop:o,isDragging:!1,startX:0,currentX:0,threshold:50},l=[];n.forEach((g,k)=>{g.setAttribute("role","group"),g.setAttribute("aria-roledescription","slide"),g.setAttribute("aria-label","Slide "+(k+1)+" of "+n.length),k===0&&g.classList.add("is-active")}),e.setAttribute("role","region"),e.setAttribute("aria-roledescription","carousel"),e.getAttribute("aria-label")||e.setAttribute("aria-label","Carousel");let d=document.createElement("div");d.setAttribute("aria-live","polite"),d.setAttribute("aria-atomic","true"),d.className="sr-only",d.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);",e.appendChild(d);let c=(g,k)=>{k===void 0&&(k=!0);let T=g;r.loop?T=(g%r.total+r.total)%r.total:T=Math.max(0,Math.min(g,r.total-1));let M=r.current;r.current=T,r.isFade?n.forEach((w,E)=>{w.classList.toggle("is-active",E===T)}):t.style.transform="translateX(-"+T*100+"%)",e.querySelectorAll(".vd-flow-indicator").forEach((w,E)=>{w.classList.toggle("is-active",E===T),w.setAttribute("aria-selected",E===T?"true":"false")}),n.forEach((w,E)=>{w.setAttribute("aria-hidden",E!==T?"true":"false")}),k&&(d.textContent="Slide "+(T+1)+" of "+r.total),e.dispatchEvent(new CustomEvent("flow:change",{detail:{current:T,previous:M,total:r.total}}))},u=()=>c(r.current+1),h=()=>c(r.current-1),p=e.querySelector(".vd-flow-prev"),v=e.querySelector(".vd-flow-next");if(p){let g=()=>h();p.addEventListener("click",g),l.push(()=>p.removeEventListener("click",g))}if(v){let g=()=>u();v.addEventListener("click",g),l.push(()=>v.removeEventListener("click",g))}e.querySelectorAll(".vd-flow-indicator").forEach((g,k)=>{g.setAttribute("role","tab"),g.setAttribute("aria-selected",k===0?"true":"false"),g.setAttribute("aria-label","Go to slide "+(k+1));let T=()=>c(k);g.addEventListener("click",T),l.push(()=>g.removeEventListener("click",T))});let C=g=>{g.key==="ArrowLeft"&&(h(),g.preventDefault()),g.key==="ArrowRight"&&(u(),g.preventDefault())};e.setAttribute("tabindex","0"),e.addEventListener("keydown",C),l.push(()=>e.removeEventListener("keydown",C));let L=g=>{r.isDragging=!0,r.startX=g.clientX||g.touches&&g.touches[0].clientX||0,r.currentX=r.startX,e.classList.add("is-dragging")},P=g=>{r.isDragging&&(r.currentX=g.clientX||g.touches&&g.touches[0].clientX||0)},x=()=>{if(!r.isDragging)return;r.isDragging=!1,e.classList.remove("is-dragging");let g=r.startX-r.currentX;Math.abs(g)>r.threshold&&(g>0?u():h())};e.addEventListener("mousedown",L),e.addEventListener("mousemove",P),e.addEventListener("mouseup",x),e.addEventListener("mouseleave",x),e.addEventListener("touchstart",L,{passive:!0}),e.addEventListener("touchmove",P,{passive:!0}),e.addEventListener("touchend",x),l.push(()=>e.removeEventListener("mousedown",L),()=>e.removeEventListener("mousemove",P),()=>e.removeEventListener("mouseup",x),()=>e.removeEventListener("mouseleave",x),()=>e.removeEventListener("touchstart",L),()=>e.removeEventListener("touchmove",P),()=>e.removeEventListener("touchend",x));let D=()=>{V(),r.autoplayTimer=setInterval(u,a)},V=()=>{r.autoplayTimer&&(clearInterval(r.autoplayTimer),r.autoplayTimer=null)};if(i){D();let g=()=>V(),k=()=>D();e.addEventListener("mouseenter",g),e.addEventListener("mouseleave",k),e.addEventListener("focusin",g),e.addEventListener("focusout",k),l.push(()=>e.removeEventListener("mouseenter",g),()=>e.removeEventListener("mouseleave",k),()=>e.removeEventListener("focusin",g),()=>e.removeEventListener("focusout",k),()=>V())}c(0,!1),this.instances.set(e,{cleanup:l,goTo:c,next:u,prev:h,getState:()=>({...r})})},goTo:function(e,t){let n=this.instances.get(e);n&&n.goTo(t)},next:function(e){let t=this.instances.get(e);t&&t.next()},prev:function(e){let t=this.instances.get(e);t&&t.prev()},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("flow",m),window.VanduoFlow=m})();(function(){"use strict";let m={instances:new Map,_globalCleanups:[],init:function(){if(document.querySelectorAll("[data-vd-bubble], [data-vd-popover]").forEach(t=>{this.instances.has(t)||this.initInstance(t)}),this._globalCleanups.length===0){let t=s=>{this.instances.forEach((i,a)=>{!i.popover.contains(s.target)&&!a.contains(s.target)&&this.hide(a)})},n=s=>{s.key==="Escape"&&this.instances.forEach((i,a)=>this.hide(a))};document.addEventListener("click",t,!0),document.addEventListener("keydown",n),this._globalCleanups.push(()=>document.removeEventListener("click",t,!0),()=>document.removeEventListener("keydown",n))}},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-bubble-placement")||e.getAttribute("data-vd-popover-placement")||"bottom",s=document.createElement("div");s.className="vd-bubble-content",s.setAttribute("role","dialog"),s.setAttribute("aria-modal","false"),s.setAttribute("data-placement",n);let i=e.getAttribute("data-vd-bubble-title")||e.getAttribute("data-vd-popover-title"),a=e.getAttribute("data-vd-bubble")||e.getAttribute("data-vd-popover")||"",o=e.getAttribute("data-vd-bubble-html")||e.getAttribute("data-vd-popover-html");if(i){let c=document.createElement("div");c.className="vd-bubble-header";let u=document.createElement("span");u.textContent=i;let h=document.createElement("button");h.className="vd-bubble-close",h.setAttribute("aria-label","Close"),h.innerHTML="×",c.appendChild(u),c.appendChild(h),s.appendChild(c);let p=v=>{v.stopPropagation(),this.hide(e)};h.addEventListener("click",p),t.push(()=>h.removeEventListener("click",p))}let r=document.createElement("div");r.className="vd-bubble-body",o?typeof sanitizeHtml=="function"?r.innerHTML=sanitizeHtml(o):r.textContent=o:r.textContent=a,s.appendChild(r),document.body.appendChild(s);let l="vd-bubble-"+Math.random().toString(36).slice(2,9);s.id=l,e.setAttribute("aria-haspopup","dialog"),e.setAttribute("aria-expanded","false"),e.setAttribute("aria-controls",l);let d=c=>{c.stopPropagation(),s.classList.contains("is-visible")?this.hide(e):(this.hideAll(),this.show(e))};e.addEventListener("click",d),t.push(()=>e.removeEventListener("click",d)),this.instances.set(e,{popover:s,cleanup:t,placement:n})},position:function(e,t,n){let s=e.getBoundingClientRect(),i=t.getBoundingClientRect(),a=10,o,r;switch(n){case"top":o=s.top-i.height-a+window.scrollY,r=s.left+(s.width-i.width)/2+window.scrollX;break;case"left":o=s.top+(s.height-i.height)/2+window.scrollY,r=s.left-i.width-a+window.scrollX;break;case"right":o=s.top+(s.height-i.height)/2+window.scrollY,r=s.right+a+window.scrollX;break;default:o=s.bottom+a+window.scrollY,r=s.left+(s.width-i.width)/2+window.scrollX}r=Math.max(8,Math.min(r,window.innerWidth-i.width-8)),o=Math.max(8,o),t.style.top=o+"px",t.style.left=r+"px"},show:function(e){let t=this.instances.get(e);if(!t)return;let{popover:n,placement:s}=t;n.style.display="block",n.classList.add("is-visible"),e.setAttribute("aria-expanded","true"),requestAnimationFrame(()=>{this.position(e,n,s)}),e.dispatchEvent(new CustomEvent("bubble:show",{bubbles:!0}))},hide:function(e){let t=this.instances.get(e);t&&(t.popover.classList.remove("is-visible"),e.setAttribute("aria-expanded","false"),e.dispatchEvent(new CustomEvent("bubble:hide",{bubbles:!0})))},hideAll:function(){this.instances.forEach((e,t)=>this.hide(t))},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),t.popover.parentNode&&t.popover.parentNode.removeChild(t.popover),e.removeAttribute("aria-haspopup"),e.removeAttribute("aria-expanded"),e.removeAttribute("aria-controls"),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t)),this._globalCleanups.forEach(e=>e()),this._globalCleanups=[]}};typeof window.Vanduo<"u"&&window.Vanduo.register("bubble",m),window.VanduoBubble=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("[data-vd-waypoint-nav], [data-vd-scrollspy-nav]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=Array.from(e.querySelectorAll('a[href^="#"]'));if(t.length===0)return;let n=[],s=parseInt(e.getAttribute("data-vd-waypoint-offset")||"80",10),i=[];if(t.forEach(d=>{let c=d.getAttribute("href").slice(1),u=document.getElementById(c);u&&(u.setAttribute("data-vd-waypoint-section",""),i.push({id:c,link:d,section:u}))}),i.length===0)return;let a=new Set,o=d=>{t.forEach(u=>u.classList.remove("is-active"));let c=t.find(u=>u.getAttribute("href")==="#"+d);c&&(c.classList.add("is-active"),e.dispatchEvent(new CustomEvent("waypoint:change",{detail:{activeId:d,link:c}})))},r="-"+s+"px 0px -40% 0px",l=new IntersectionObserver(d=>{d.forEach(c=>{c.isIntersecting?a.add(c.target.id):a.delete(c.target.id)});for(let c=0;cl.observe(d.section)),t.forEach(d=>{let c=u=>{u.preventDefault();let h=d.getAttribute("href").slice(1),p=document.getElementById(h);p&&(p.scrollIntoView({behavior:"smooth"}),o(h))};d.addEventListener("click",c),n.push(()=>d.removeEventListener("click",c))}),n.push(()=>l.disconnect()),this.instances.set(e,{observer:l,cleanup:n,sections:i,setActive:o})},refresh:function(e){this.destroy(e),this.initInstance(e)},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("waypoint",m),window.VanduoWaypoint=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll(".vd-ripple, [data-vd-ripple]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=s=>{let i=e.getBoundingClientRect(),a=Math.max(i.width,i.height),o=(s.clientX||s.touches&&s.touches[0].clientX||i.left+i.width/2)-i.left-a/2,r=(s.clientY||s.touches&&s.touches[0].clientY||i.top+i.height/2)-i.top-a/2,l=document.createElement("span");l.className="vd-ripple-wave",l.style.width=a+"px",l.style.height=a+"px",l.style.left=o+"px",l.style.top=r+"px",e.appendChild(l),l.addEventListener("animationend",()=>{l.parentNode&&l.parentNode.removeChild(l)})};e.addEventListener("mousedown",n),e.addEventListener("touchstart",n,{passive:!0}),t.push(()=>e.removeEventListener("mousedown",n),()=>e.removeEventListener("touchstart",n)),this.instances.set(e,{cleanup:t})},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),e.querySelectorAll(".vd-ripple-wave").forEach(n=>n.remove()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("ripple",m),window.VanduoRipple=m})();(function(){"use strict";function m(n){if(!n||n===document.body)return!1;let s=window.getComputedStyle(n),i=s.overflowY,a=s.overflowX,o=/(auto|scroll|overlay)/.test(i)&&n.scrollHeight>n.clientHeight,r=/(auto|scroll|overlay)/.test(a)&&n.scrollWidth>n.clientWidth;return o||r}function e(n){let s=n.parentElement;for(;s&&s!==document.body&&s!==document.documentElement;){if(m(s))return s;s=s.parentElement}return null}let t={instances:new Map,init:function(){document.querySelectorAll(".vd-affix, .vd-sticky, [data-vd-affix]").forEach(s=>{this.instances.has(s)||this.initInstance(s)})},initInstance:function(n){let s=[],i=parseInt(n.getAttribute("data-vd-affix-offset")||"0",10),a=Number.isNaN(i)?0:i,o=e(n),r=!1,l=document.createElement("div");l.style.cssText="display:block;height:1px;margin-bottom:-1px;visibility:hidden;pointer-events:none;",n.parentNode.insertBefore(l,n),n.style.setProperty("--affix-top-offset",a+"px");function d(){r||(r=!0,n.classList.add("is-stuck"),n.dispatchEvent(new CustomEvent("affix:stuck",{bubbles:!0,detail:{offset:a,root:o||window}})))}function c(){r&&(r=!1,n.classList.remove("is-stuck"),n.dispatchEvent(new CustomEvent("affix:unstuck",{bubbles:!0,detail:{offset:a,root:o||window}})))}let u=new IntersectionObserver(function(h){h.forEach(p=>{p.isIntersecting?c():d()})},{root:o,rootMargin:"-"+a+"px 0px 0px 0px",threshold:0});u.observe(l),s.push(()=>u.disconnect(),()=>{l.parentNode&&l.parentNode.removeChild(l)},()=>{n.classList.remove("is-stuck"),n.style.removeProperty("--affix-top-offset")}),this.instances.set(n,{cleanup:s,observer:u,sentinel:l,scrollParent:o})},destroy:function(n){let s=this.instances.get(n);s&&(s.cleanup.forEach(i=>i()),n.classList.remove("is-stuck"),this.instances.delete(n))},destroyAll:function(){this.instances.forEach((n,s)=>this.destroy(s))}};typeof window.Vanduo<"u"&&window.Vanduo.register("affix",t),window.VanduoAffix=t})();(function(){"use strict";function m(t){let n=document.createElement("div");return n.textContent=t,n.innerHTML}let e={instances:new Map,init:function(){document.querySelectorAll("[data-vd-suggest], [data-vd-autocomplete]").forEach(n=>{this.instances.has(n)||this.initInstance(n)})},initInstance:function(t){let n=[],s=parseInt(t.getAttribute("data-vd-suggest-min-chars")||"1",10),i=t.getAttribute("data-vd-suggest-url")||"",a=t.getAttribute("data-vd-suggest")||t.getAttribute("data-vd-autocomplete")||"",o=[];try{o=JSON.parse(a)}catch{o=a.split(",").map(k=>k.trim()).filter(Boolean)}let r=t.closest(".vd-suggest-wrapper, .vd-autocomplete-wrapper");r||(r=document.createElement("div"),r.className="vd-suggest-wrapper",t.parentNode.insertBefore(r,t),r.appendChild(t));let l=document.createElement("ul");l.className="vd-suggest-list",l.setAttribute("role","listbox");let d="vd-suggest-"+Math.random().toString(36).slice(2,9);l.id=d,r.appendChild(l),t.setAttribute("role","combobox"),t.setAttribute("aria-autocomplete","list"),t.setAttribute("aria-expanded","false"),t.setAttribute("aria-controls",d),t.setAttribute("autocomplete","off");let c=-1,u=[],h=null,p=(g,k)=>{if(l.innerHTML="",u=g,c=-1,g.length===0){let T=document.createElement("li");T.className="vd-suggest-empty",T.textContent="No results",l.appendChild(T);return}g.forEach((T,M)=>{let f=document.createElement("li");f.className="vd-suggest-item",f.setAttribute("role","option"),f.id=d+"-item-"+M;let w=typeof T=="object"&&(T.label||T.text)||String(T);if(k){let E=m(w),I=new RegExp("("+k.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")+")","gi");f.innerHTML=E.replace(I,'$1')}else f.textContent=w;f.addEventListener("click",()=>C(M)),l.appendChild(f)})},v=()=>{l.classList.add("is-open"),t.setAttribute("aria-expanded","true")},y=()=>{l.classList.remove("is-open"),t.setAttribute("aria-expanded","false"),c=-1,t.removeAttribute("aria-activedescendant")},C=g=>{let k=u[g],T=typeof k=="object"&&(k.value||k.label)||String(k);t.value=T,y(),t.dispatchEvent(new CustomEvent("suggest:select",{detail:{value:T,item:k,index:g},bubbles:!0}))},L=g=>{let k=l.querySelectorAll(".vd-suggest-item");k.forEach(T=>T.classList.remove("is-highlighted")),g>=0&&g{if(g.length0,v()},x=()=>{clearTimeout(h),h=setTimeout(()=>P(t.value),200)},D=g=>{if(!l.classList.contains("is-open")){g.key==="ArrowDown"&&(P(t.value),g.preventDefault());return}let k=u.length;switch(g.key){case"ArrowDown":g.preventDefault(),L(c0?c-1:k-1);break;case"Enter":g.preventDefault(),c>=0&&C(c);break;case"Escape":y();break}},V=()=>{setTimeout(y,200)};t.addEventListener("input",x),t.addEventListener("keydown",D),t.addEventListener("blur",V),t.addEventListener("focus",()=>{t.value.length>=s&&P(t.value)}),n.push(()=>t.removeEventListener("input",x),()=>t.removeEventListener("keydown",D),()=>t.removeEventListener("blur",V),()=>clearTimeout(h),()=>{l.parentNode&&l.parentNode.removeChild(l)}),this.instances.set(t,{cleanup:n,list:l,close:y})},destroy:function(t){let n=this.instances.get(t);n&&(n.cleanup.forEach(s=>s()),this.instances.delete(t))},destroyAll:function(){this.instances.forEach((t,n)=>this.destroy(n))}};typeof window.Vanduo<"u"&&window.Vanduo.register("suggest",e),window.VanduoSuggest=e})();(function(){"use strict";let m={instances:new Map,rules:{required:e=>e.trim().length>0,email:e=>/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e),url:e=>{try{return new URL(e),!0}catch{return!1}},number:e=>!isNaN(parseFloat(e))&&isFinite(e),min:(e,t)=>e.length>=parseInt(t,10),max:(e,t)=>e.length<=parseInt(t,10),minVal:(e,t)=>parseFloat(e)>=parseFloat(t),maxVal:(e,t)=>parseFloat(e)<=parseFloat(t),pattern:(e,t)=>{try{return t.length>100?!1:new RegExp(t).test(e)}catch{return!1}},match:(e,t)=>{try{let n=typeof CSS<"u"&&CSS.escape?CSS.escape(t):t,s=document.querySelector('[name="'+n+'"]');return s?e===s.value:!1}catch{return!1}}},messages:{required:"This field is required",email:"Please enter a valid email address",url:"Please enter a valid URL",number:"Please enter a valid number",min:"Minimum {0} characters required",max:"Maximum {0} characters allowed",minVal:"Value must be at least {0}",maxVal:"Value must be at most {0}",pattern:"Invalid format",match:"Fields do not match"},init:function(){document.querySelectorAll("[data-vd-validate], .vd-validate").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-validate-mode")||"blur",s=e.querySelectorAll("[data-vd-rules]"),i=r=>{let d=(r.getAttribute("data-vd-rules")||"").split("|").map(h=>h.trim()).filter(Boolean),c=r.value,u=[];for(let h of d){let[p,...v]=h.split(":"),y=v.join(":"),C=this.rules[p];if(C&&!C(c,y)){let P=r.getAttribute("data-vd-msg-"+p)||this.messages[p]||"Invalid";y&&(P=P.replace("{0}",y)),u.push(P);break}}return this.setFieldState(r,u),u.length===0},a=()=>{let r=!0;return s.forEach(l=>{i(l)||(r=!1)}),r};s.forEach(r=>{if(n==="input"||n==="blur"){let l=n==="input"?"input":"blur",d=()=>i(r);if(r.addEventListener(l,d),t.push(()=>r.removeEventListener(l,d)),n==="blur"){let c=()=>{(r.classList.contains("is-invalid")||r.classList.contains("is-valid"))&&i(r)};r.addEventListener("input",c),t.push(()=>r.removeEventListener("input",c))}}});let o=r=>{let l=a();if(!l){r.preventDefault(),r.stopPropagation();let d=e.querySelector(".is-invalid");d&&d.focus()}e.dispatchEvent(new CustomEvent("validate:submit",{detail:{valid:l},bubbles:!0}))};e.addEventListener("submit",o),t.push(()=>e.removeEventListener("submit",o)),this.instances.set(e,{cleanup:t,validateAll:a,validateField:i})},setFieldState:function(e,t){let n=e.closest(".vd-form-group")||e.parentElement,s=n.querySelector(".vd-validate-error");e.classList.remove("is-valid","is-invalid"),t.length>0?(e.classList.add("is-invalid"),e.setAttribute("aria-invalid","true"),s||(s=document.createElement("div"),s.className="vd-validate-error",s.id="vd-err-"+Math.random().toString(36).slice(2,9),s.setAttribute("role","alert"),n.appendChild(s)),s.textContent=t[0],s.style.display="",e.setAttribute("aria-describedby",s.id)):e.value.trim()?(e.classList.add("is-valid"),e.removeAttribute("aria-invalid"),s&&(s.style.display="none")):(e.removeAttribute("aria-invalid"),s&&(s.style.display="none"))},validateForm:function(e){let t=this.instances.get(e);return t?t.validateAll():!1},addRule:function(e,t,n){this.rules[e]=t,n&&(this.messages[e]=n)},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("validate",m),window.VanduoValidate=m})();(function(){"use strict";let m=["Su","Mo","Tu","We","Th","Fr","Sa"],e=["January","February","March","April","May","June","July","August","September","October","November","December"],t={instances:new Map,init:function(){document.querySelectorAll("[data-vd-datepicker]").forEach(s=>{this.instances.has(s)||this.initInstance(s)})},initInstance:function(n){let s=[],i=n.getAttribute("data-vd-datepicker-format")||"yyyy-mm-dd",a=n.getAttribute("data-vd-datepicker-min"),o=n.getAttribute("data-vd-datepicker-max"),r=a?new Date(a):null,l=o?new Date(o):null,d=new Date,c=d.getFullYear(),u=d.getMonth(),h=null,p="days";if(n.value){let f=new Date(n.value);isNaN(f.getTime())||(h=f,c=f.getFullYear(),u=f.getMonth())}let v=document.createElement("div");v.className="vd-datepicker-popup",v.setAttribute("role","dialog"),v.setAttribute("aria-label","Choose date");let y=document.createElement("div");y.className="vd-suggest-wrapper",y.style.position="relative",y.style.display="inline-block",n.parentNode.insertBefore(y,n),y.appendChild(n),y.appendChild(v);let C=f=>{let w=f.getFullYear(),E=String(f.getMonth()+1).padStart(2,"0"),I=String(f.getDate()).padStart(2,"0");return i.replace("yyyy",w).replace("mm",E).replace("dd",I)},L=f=>!!(r&&fl),P=(f,w)=>f&&w&&f.getFullYear()===w.getFullYear()&&f.getMonth()===w.getMonth()&&f.getDate()===w.getDate(),x=()=>{v.innerHTML="";let f=document.createElement("div");f.className="vd-datepicker-header";let w=document.createElement("button");w.type="button",w.className="vd-datepicker-prev",w.innerHTML="‹",w.setAttribute("aria-label","Previous");let E=document.createElement("button");E.type="button",E.className="vd-datepicker-next",E.innerHTML="›",E.setAttribute("aria-label","Next");let I=document.createElement("span");if(I.className="vd-datepicker-title",p==="days")I.textContent=e[u]+" "+c,I.addEventListener("click",()=>{p="months",x()}),w.addEventListener("click",()=>{u--,u<0&&(u=11,c--),x()}),E.addEventListener("click",()=>{u++,u>11&&(u=0,c++),x()});else if(p==="months")I.textContent=String(c),I.addEventListener("click",()=>{p="years",x()}),w.addEventListener("click",()=>{c--,x()}),E.addEventListener("click",()=>{c++,x()});else{let O=Math.floor(c/10)*10;I.textContent=O+" - "+(O+9),w.addEventListener("click",()=>{c-=10,x()}),E.addEventListener("click",()=>{c+=10,x()})}if(f.appendChild(w),f.appendChild(I),f.appendChild(E),v.appendChild(f),p==="days"){let O=document.createElement("div");O.className="vd-datepicker-weekdays",m.forEach(F=>{let U=document.createElement("span");U.textContent=F,O.appendChild(U)}),v.appendChild(O);let H=document.createElement("div");H.className="vd-datepicker-days";let z=new Date(c,u,1).getDay(),R=new Date(c,u+1,0).getDate(),j=new Date(c,u,0).getDate();for(let F=z-1;F>=0;F--){let U=D(j-F,!0);H.appendChild(U)}for(let F=1;F<=R;F++){let U=new Date(c,u,F),b=D(F,!1,U);H.appendChild(b)}let G=z+R,Z=G%7===0?0:7-G%7;for(let F=1;F<=Z;F++){let U=D(F,!0);H.appendChild(U)}v.appendChild(H)}else if(p==="months"){let O=document.createElement("div");O.className="vd-datepicker-months",e.forEach((H,z)=>{let R=document.createElement("button");R.type="button",R.className="vd-datepicker-month-btn",R.textContent=H.slice(0,3),h&&h.getFullYear()===c&&h.getMonth()===z&&R.classList.add("is-selected"),R.addEventListener("click",()=>{u=z,p="days",x()}),O.appendChild(R)}),v.appendChild(O)}else{let O=document.createElement("div");O.className="vd-datepicker-years";let H=Math.floor(c/10)*10;for(let z=H-1;z<=H+10;z++){let R=document.createElement("button");R.type="button",R.className="vd-datepicker-year-btn",R.textContent=z,h&&h.getFullYear()===z&&R.classList.add("is-selected"),(zH+9)&&(R.style.opacity="0.4"),R.addEventListener("click",()=>{c=z,p="months",x()}),O.appendChild(R)}v.appendChild(O)}},D=(f,w,E)=>{let I=document.createElement("button");return I.type="button",I.className="vd-datepicker-day",I.textContent=f,w?(I.classList.add("is-outside"),I.tabIndex=-1,I):(E&&P(E,d)&&I.classList.add("is-today"),E&&P(E,h)&&I.classList.add("is-selected"),E&&L(E)?(I.classList.add("is-disabled"),I):(E&&I.addEventListener("click",()=>{h=E,c=E.getFullYear(),u=E.getMonth(),n.value=C(E),g(),n.dispatchEvent(new CustomEvent("datepicker:select",{detail:{date:E,formatted:n.value},bubbles:!0})),n.dispatchEvent(new Event("change",{bubbles:!0}))}),I))},V=()=>{x(),v.classList.add("is-open"),n.setAttribute("aria-expanded","true")},g=()=>{v.classList.remove("is-open"),n.setAttribute("aria-expanded","false"),p="days"},k=()=>V(),T=f=>{y.contains(f.target)||g()},M=f=>{f.key==="Escape"&&g()};n.addEventListener("focus",k),document.addEventListener("click",T,!0),document.addEventListener("keydown",M),n.setAttribute("aria-haspopup","dialog"),n.setAttribute("aria-expanded","false"),n.setAttribute("autocomplete","off"),s.push(()=>n.removeEventListener("focus",k),()=>document.removeEventListener("click",T,!0),()=>document.removeEventListener("keydown",M)),this.instances.set(n,{cleanup:s,open:V,close:g,popup:v})},destroy:function(n){let s=this.instances.get(n);s&&(s.cleanup.forEach(i=>i()),this.instances.delete(n))},destroyAll:function(){this.instances.forEach((n,s)=>this.destroy(s))}};typeof window.Vanduo<"u"&&window.Vanduo.register("datepicker",t),window.VanduoDatepicker=t})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("[data-vd-timepicker]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-timepicker-format")==="24h",s=parseInt(e.getAttribute("data-vd-timepicker-step")||"30",10),i=e.closest(".vd-suggest-wrapper");i||(i=document.createElement("div"),i.style.position="relative",i.style.display="inline-block",e.parentNode.insertBefore(i,e),i.appendChild(e));let a=document.createElement("div");a.className="vd-timepicker-popup",a.setAttribute("role","listbox"),i.appendChild(a);let o=[];for(let p=0;p<24;p++)for(let v=0;v<60;v+=s){let y=String(p).padStart(2,"0"),C=String(v).padStart(2,"0");if(n)o.push({display:y+":"+C,value:y+":"+C});else{let L=p<12?"AM":"PM",x=(p===0?12:p>12?p-12:p)+":"+C+" "+L;o.push({display:x,value:y+":"+C})}}let r=()=>{a.innerHTML="",o.forEach(p=>{let v=document.createElement("div");v.className="vd-timepicker-item",v.setAttribute("role","option"),v.textContent=p.display,(e.value===p.value||e.value===p.display)&&v.classList.add("is-selected"),v.addEventListener("click",()=>{e.value=p.display,a.querySelectorAll(".vd-timepicker-item").forEach(y=>y.classList.remove("is-selected")),v.classList.add("is-selected"),d(),e.dispatchEvent(new CustomEvent("timepicker:select",{detail:{display:p.display,value:p.value},bubbles:!0})),e.dispatchEvent(new Event("change",{bubbles:!0}))}),a.appendChild(v)})},l=()=>{r(),a.classList.add("is-open"),e.setAttribute("aria-expanded","true");let p=a.querySelector(".is-selected");p&&p.scrollIntoView({block:"center"})},d=()=>{a.classList.remove("is-open"),e.setAttribute("aria-expanded","false")},c=()=>l(),u=p=>{i.contains(p.target)||d()},h=p=>{p.key==="Escape"&&d()};e.addEventListener("focus",c),document.addEventListener("click",u,!0),document.addEventListener("keydown",h),e.setAttribute("aria-haspopup","listbox"),e.setAttribute("aria-expanded","false"),e.setAttribute("autocomplete","off"),e.readOnly=!0,t.push(()=>e.removeEventListener("focus",c),()=>document.removeEventListener("click",u,!0),()=>document.removeEventListener("keydown",h)),this.instances.set(e,{cleanup:t,open:l,close:d})},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("timepicker",m),window.VanduoTimepicker=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll(".vd-stepper").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=Array.from(e.querySelectorAll(".vd-stepper-item")),s=e.classList.contains("vd-stepper-clickable"),i=n.findIndex(o=>o.classList.contains("is-active"));i===-1&&(i=0);let a=o=>{if(o<0||o>=n.length)return;let r=i;i=o,n.forEach((l,d)=>{l.classList.remove("is-active","is-completed"),d{let l=()=>a(r);o.addEventListener("click",l),t.push(()=>o.removeEventListener("click",l))}),a(i),this.instances.set(e,{cleanup:t,setStep:a,next:()=>a(i+1),prev:()=>a(i-1),getCurrent:()=>i})},setStep:function(e,t){let n=this.instances.get(e);n&&n.setStep(t)},next:function(e){let t=this.instances.get(e);t&&t.next()},prev:function(e){let t=this.instances.get(e);t&&t.prev()},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("stepper",m),window.VanduoStepper=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("[data-vd-rating]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=parseInt(e.getAttribute("data-vd-rating-max")||"5",10),s=parseFloat(e.getAttribute("data-vd-rating-value")||"0"),i=e.classList.contains("vd-rating-readonly")||e.hasAttribute("data-vd-rating-readonly"),a=s;e.classList.add("vd-rating"),e.setAttribute("role","radiogroup"),e.setAttribute("aria-label",e.getAttribute("aria-label")||"Rating"),e.innerHTML="";let o=[];for(let d=1;d<=n;d++){let c=document.createElement("button");c.type="button",c.className="vd-rating-star",c.setAttribute("role","radio"),c.setAttribute("aria-label",d+" star"+(d>1?"s":"")),c.setAttribute("aria-checked",d<=a?"true":"false"),i&&(c.tabIndex=-1),o.push(c),e.appendChild(c)}let r=document.createElement("span");r.className="vd-rating-value",r.textContent=a>0?a.toString():"",e.appendChild(r);let l=d=>{o.forEach((c,u)=>{c.classList.remove("is-active","is-half");let h=u+1;h<=Math.floor(d)?c.classList.add("is-active"):h-.5<=d&&c.classList.add("is-half"),c.setAttribute("aria-checked",h<=d?"true":"false")}),r.textContent=d>0?d.toString():""};if(l(a),!i){o.forEach((c,u)=>{let h=()=>{o.forEach((y,C)=>{y.classList.toggle("is-hovered",C<=u)})},p=()=>{o.forEach(y=>y.classList.remove("is-hovered"))},v=()=>{a=u+1,e.setAttribute("data-vd-rating-value",a),l(a),e.dispatchEvent(new CustomEvent("rating:change",{detail:{value:a,max:n},bubbles:!0}))};c.addEventListener("mouseenter",h),c.addEventListener("mouseleave",p),c.addEventListener("click",v),t.push(()=>c.removeEventListener("mouseenter",h),()=>c.removeEventListener("mouseleave",p),()=>c.removeEventListener("click",v))});let d=c=>{c.key==="ArrowRight"||c.key==="ArrowUp"?(c.preventDefault(),a1&&(a--,l(a),o[a-1].focus(),e.dispatchEvent(new CustomEvent("rating:change",{detail:{value:a,max:n},bubbles:!0}))))};e.addEventListener("keydown",d),t.push(()=>e.removeEventListener("keydown",d))}this.instances.set(e,{cleanup:t,getValue:()=>a,setValue:d=>{a=d,l(d)}})},getValue:function(e){let t=this.instances.get(e);return t?t.getValue():0},setValue:function(e,t){let n=this.instances.get(e);n&&n.setValue(t)},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("rating",m),window.VanduoRating=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("[data-vd-transfer]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[];e.classList.add("vd-transfer");let n,s;try{n=JSON.parse(e.getAttribute("data-vd-transfer")||"[]").map((h,p)=>({id:h.id||"item-"+p,label:h.label||h.text||String(h),selected:!1}))}catch{n=[]}s=[];let i=new Set,a=new Set,o=()=>{e.innerHTML="";let u=r("Source",n,i,"source"),h=document.createElement("div");h.className="vd-transfer-actions";let p=document.createElement("button");p.type="button",p.className="vd-transfer-btn",p.innerHTML="›",p.setAttribute("aria-label","Move to target"),p.disabled=i.size===0,p.addEventListener("click",()=>l());let v=document.createElement("button");v.type="button",v.className="vd-transfer-btn",v.innerHTML="‹",v.setAttribute("aria-label","Move to source"),v.disabled=a.size===0,v.addEventListener("click",()=>d()),h.appendChild(p),h.appendChild(v);let y=r("Target",s,a,"target");e.appendChild(u),e.appendChild(h),e.appendChild(y)},r=(u,h,p,v)=>{let y=document.createElement("div");y.className="vd-transfer-panel";let C=document.createElement("div");C.className="vd-transfer-header";let L=document.createElement("span");L.textContent=u;let P=document.createElement("span");P.className="vd-transfer-count",P.textContent=p.size+"/"+h.length,C.appendChild(L),C.appendChild(P),y.appendChild(C);let x=document.createElement("div");x.className="vd-transfer-search";let D=document.createElement("input");D.type="text",D.placeholder="Search...",D.setAttribute("aria-label","Search "+u.toLowerCase()),x.appendChild(D),y.appendChild(x);let V=document.createElement("ul");V.className="vd-transfer-list",V.setAttribute("role","listbox");let g=k=>{V.innerHTML="",(k?h.filter(M=>(M.label||M.text||String(M)).toLowerCase().includes(k.toLowerCase())):h).forEach(M=>{let f=document.createElement("li");f.className="vd-transfer-item",f.setAttribute("role","option"),p.has(M.id)&&f.classList.add("is-selected");let w=document.createElement("input");w.type="checkbox",w.checked=p.has(M.id),w.setAttribute("aria-label",M.label);let E=document.createElement("span");E.textContent=M.label,f.addEventListener("click",()=>{p.has(M.id)?p.delete(M.id):p.add(M.id),o()}),f.appendChild(w),f.appendChild(E),V.appendChild(f)})};return D.addEventListener("input",()=>g(D.value)),g(""),y.appendChild(V),y},l=()=>{let u=n.filter(h=>i.has(h.id));n=n.filter(h=>!i.has(h.id)),s=s.concat(u),i.clear(),o(),c()},d=()=>{let u=s.filter(h=>a.has(h.id));s=s.filter(h=>!a.has(h.id)),n=n.concat(u),a.clear(),o(),c()},c=()=>{e.dispatchEvent(new CustomEvent("transfer:change",{detail:{source:n.map(u=>u.id),target:s.map(u=>u.id)},bubbles:!0}))};o(),this.instances.set(e,{cleanup:t,getTarget:()=>s.map(u=>u.id),getSource:()=>n.map(u=>u.id)})},getSelected:function(e){let t=this.instances.get(e);return t?t.getTarget():[]},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),e.innerHTML="",this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("transfer",m),window.VanduoTransfer=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("[data-vd-tree]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-tree-cascade")!=="false",s;try{s=JSON.parse(e.getAttribute("data-vd-tree")||"[]")}catch{s=[]}e.classList.add("vd-tree"),e.setAttribute("role","tree");let i=(r,l)=>{l.innerHTML="",r.forEach(d=>{let c=document.createElement("li");c.className="vd-tree-node",c.setAttribute("role","treeitem"),c.setAttribute("aria-expanded",d.open?"true":"false"),d.open&&c.classList.add("is-open");let u=document.createElement("div");if(u.className="vd-tree-node-content",d.children&&d.children.length>0){let p=document.createElement("button");p.type="button",p.className="vd-tree-toggle",p.setAttribute("aria-label","Toggle"),p.addEventListener("click",v=>{v.stopPropagation(),d.open=!d.open,c.classList.toggle("is-open"),c.setAttribute("aria-expanded",d.open?"true":"false")}),u.appendChild(p)}else{let p=document.createElement("span");p.className="vd-tree-toggle-placeholder",u.appendChild(p)}if(e.hasAttribute("data-vd-tree-checkbox")){let p=document.createElement("input");p.type="checkbox",p.className="vd-tree-checkbox",p.checked=!!d.checked,p.setAttribute("aria-label",d.label),p.addEventListener("change",v=>{v.stopPropagation(),d.checked=p.checked,n&&d.children&&(a(d.children,p.checked),i(s,e)),e.dispatchEvent(new CustomEvent("tree:check",{detail:{id:d.id,checked:p.checked,label:d.label},bubbles:!0}))}),u.appendChild(p)}if(d.icon){let p=document.createElement("span");p.className="vd-tree-icon "+d.icon,u.appendChild(p)}let h=document.createElement("span");if(h.className="vd-tree-label",h.textContent=d.label||"",u.appendChild(h),c.appendChild(u),d.children&&d.children.length>0){let p=document.createElement("ul");p.className="vd-tree-children",p.setAttribute("role","group"),i(d.children,p),c.appendChild(p)}l.appendChild(c)})},a=(r,l)=>{r.forEach(d=>{d.checked=l,d.children&&a(d.children,l)})},o=r=>{let l=document.activeElement;if(!e.contains(l))return;let d=Array.from(e.querySelectorAll(".vd-tree-node-content")),c=d.indexOf(l.closest(".vd-tree-node-content"));if(c!==-1)switch(r.key){case"ArrowDown":if(r.preventDefault(),c0){let u=d[c-1].querySelector(".vd-tree-toggle, .vd-tree-label");u&&u.focus()}break}};e.addEventListener("keydown",o),t.push(()=>e.removeEventListener("keydown",o)),i(s,e),this.instances.set(e,{cleanup:t,getData:()=>s,getChecked:()=>{let r=[],l=d=>{d.forEach(c=>{c.checked&&r.push(c.id||c.label),c.children&&l(c.children)})};return l(s),r}})},getChecked:function(e){let t=this.instances.get(e);return t?t.getChecked():[]},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),e.innerHTML="",this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("tree",m),window.VanduoTree=m})();(function(){"use strict";let m={_active:!1,_steps:[],_currentStep:0,_elements:{},_cleanup:[],_boundTriggers:new WeakMap,_triggerElement:null,init:function(){document.querySelectorAll("[data-vd-spotlight]").forEach(t=>{if(this._boundTriggers.has(t))return;let n=s=>{s.preventDefault();let i=this._parseSteps(t.getAttribute("data-vd-spotlight"));i.length!==0&&this.start(i,{trigger:t})};t.addEventListener("click",n),this._boundTriggers.set(t,n)})},_parseSteps:function(e){if(typeof e!="string"||e.trim()==="")return[];try{let t=JSON.parse(e);return this._normalizeSteps(t)}catch(t){return console.error("VanduoSpotlight: invalid data-vd-spotlight payload.",t),[]}},_normalizeStep:function(e){if(!e||typeof e!="object")return null;let t=e.target,n=typeof t=="string"&&t.trim()!=="",s=typeof Element<"u"&&t instanceof Element;if(!n&&!s)return null;let i=typeof e.title=="string"?e.title:"",a=typeof e.description=="string"?e.description:typeof e.content=="string"?e.content:"";return{target:t,title:i,description:a}},_normalizeSteps:function(e){return Array.isArray(e)?e.map(t=>this._normalizeStep(t)).filter(Boolean):[]},start:function(e,t){this._active&&this.stop();let n=this._normalizeSteps(e);if(n.length===0)return;let s=t||{};this._steps=n,this._currentStep=0,this._active=!0,this._triggerElement=s.trigger||(document.activeElement instanceof HTMLElement?document.activeElement:null);let i=document.createElement("div");i.className="vd-spotlight-overlay",i.setAttribute("aria-hidden","true"),document.body.appendChild(i);let a=document.createElement("div");a.className="vd-spotlight-tooltip",a.setAttribute("role","dialog"),a.setAttribute("aria-modal","true"),a.tabIndex=-1,document.body.appendChild(a),this._elements={overlay:i,tooltip:a};let o=r=>{r.key==="Escape"&&this.stop()};document.addEventListener("keydown",o),this._cleanup.push(()=>document.removeEventListener("keydown",o)),i.addEventListener("click",()=>this.stop()),this._showStep(this._currentStep)},_showStep:function(e){let t=this._steps[e];if(!t)return;let n=typeof t.target=="string"?document.querySelector(t.target):t.target,{tooltip:s}=this._elements;document.querySelectorAll(".vd-spotlight-target").forEach(d=>{d.classList.remove("vd-spotlight-target")}),n&&(n.classList.add("vd-spotlight-target"),n.scrollIntoView({behavior:"smooth",block:"center"}));let i=this._steps.length;if(s.innerHTML="",s.removeAttribute("aria-labelledby"),s.removeAttribute("aria-describedby"),t.title){let d=document.createElement("h4");d.className="vd-spotlight-title",d.id="vd-spotlight-title-"+e+"-"+Date.now(),d.textContent=t.title,s.appendChild(d),s.setAttribute("aria-labelledby",d.id)}if(t.description){let d=document.createElement("p");d.className="vd-spotlight-description",d.id="vd-spotlight-description-"+e+"-"+Date.now(),d.textContent=t.description,s.appendChild(d),s.setAttribute("aria-describedby",d.id)}let a=document.createElement("div");a.className="vd-spotlight-footer",a.setAttribute("aria-label","Step "+(e+1)+" of "+i);let o=document.createElement("span");o.className="vd-spotlight-counter",o.textContent=e+1+" / "+i;let r=document.createElement("div");if(r.className="vd-spotlight-actions",e>0){let d=document.createElement("button");d.type="button",d.className="vd-spotlight-btn",d.textContent="Back",d.addEventListener("click",()=>this.prev()),r.appendChild(d)}let l=document.createElement("button");if(l.type="button",l.className="vd-spotlight-btn",l.textContent="Skip",l.addEventListener("click",()=>this.stop()),r.appendChild(l),ethis.next()),r.appendChild(d)}else{let d=document.createElement("button");d.type="button",d.className="vd-spotlight-btn vd-spotlight-btn-primary",d.textContent="Done",d.addEventListener("click",()=>this.stop()),r.appendChild(d)}a.appendChild(o),a.appendChild(r),s.appendChild(a),n&&requestAnimationFrame(()=>{let d=n.getBoundingClientRect(),c=s.getBoundingClientRect(),u=d.bottom+12+window.scrollY,h=d.left+(d.width-c.width)/2+window.scrollX;h=Math.max(8,Math.min(h,window.innerWidth-c.width-8)),u+c.height>window.innerHeight+window.scrollY&&(u=d.top-c.height-12+window.scrollY),s.style.top=u+"px",s.style.left=h+"px"}),document.dispatchEvent(new CustomEvent("spotlight:step",{detail:{index:e,step:e,total:i,data:t}}))},next:function(){this._currentStep0&&(this._currentStep--,this._showStep(this._currentStep))},stop:function(){if(!this._active)return;let e=this._steps.length,t={completedSteps:e===0?0:Math.min(this._currentStep+1,e),total:e,completed:e>0&&this._currentStep>=e-1};this._active=!1,document.querySelectorAll(".vd-spotlight-target").forEach(n=>{n.classList.remove("vd-spotlight-target")}),this._elements.overlay&&this._elements.overlay.parentNode&&this._elements.overlay.parentNode.removeChild(this._elements.overlay),this._elements.tooltip&&this._elements.tooltip.parentNode&&this._elements.tooltip.parentNode.removeChild(this._elements.tooltip),this._cleanup.forEach(n=>n()),this._cleanup=[],this._elements={},this._steps=[],this._currentStep=0,this._triggerElement&&this._triggerElement.isConnected&&typeof this._triggerElement.focus=="function"&&this._triggerElement.focus(),this._triggerElement=null,document.dispatchEvent(new CustomEvent("spotlight:end",{detail:t}))},destroyAll:function(){this.stop()}};typeof window.Vanduo<"u"&&window.Vanduo.register("spotlight",m),window.VanduoSpotlight=m})();(function(){"use strict";function m(i){let a=i.slice();for(let o=a.length-1;o>0;o--){let r=Math.floor(Math.random()*(o+1)),l=a[o];a[o]=a[r],a[r]=l}return a}function e(i){if(!isFinite(i)||i<0)return"0:00";let a=Math.floor(i/60),o=Math.floor(i%60);return a+":"+(o<10?"0":"")+o}function t(i){let a=parseFloat(i.min)||0,o=parseFloat(i.max)||1,l=((parseFloat(i.value)||0)-a)/(o-a)*100;i.style.setProperty("--fill",l+"%"),i.style.backgroundImage="linear-gradient(to right, var(--music-player-track-fill, currentColor) 0%, var(--music-player-track-fill, currentColor) "+l+"%, var(--music-player-track-bg, #ccc) "+l+"%, var(--music-player-track-bg, #ccc) 100%)"}function n(i){let a=document.createElement("i");return a.className="ph ph-"+i,a.setAttribute("aria-hidden","true"),a}let s={instances:new Map,defaults:{tracks:[],volume:.5,shuffle:!1,showProgress:!1,showPlaylist:!1,autoAdvance:!0},init:function(){document.querySelectorAll(".vd-music-player, [data-music-player]").forEach(i=>{if(this.instances.has(i))return;let a={},o=i.getAttribute("data-music-player-options");if(o)try{a=JSON.parse(o)}catch{}this.initPlayer(i,a)})},initPlayer:function(i,a){let o=Object.assign({},this.defaults,a||{}),l=(Array.isArray(o.tracks)?o.tracks:[]).filter(f=>f&&typeof f.url=="string"&&f.url.trim()),c={tracks:o.shuffle?m(l):l.slice(),originalTracks:l.slice(),currentIndex:0,isPlaying:!1,volume:Math.max(0,Math.min(1,o.volume)),shuffle:o.shuffle,showProgress:o.showProgress,showPlaylist:o.showPlaylist,autoAdvance:o.autoAdvance,audio:null},u=new Audio;u.volume=c.volume,u.preload="metadata",c.audio=u,this._buildDOM(i,c);let h={btnPlay:i.querySelector(".vd-music-player-btn-play"),btnPrev:i.querySelector(".vd-music-player-btn-prev"),btnNext:i.querySelector(".vd-music-player-btn-next"),btnShuffle:i.querySelector(".vd-music-player-btn-shuffle"),btnPlaylist:i.querySelector(".vd-music-player-btn-playlist"),trackName:i.querySelector(".vd-music-player-track-name"),volumeSlider:i.querySelector(".vd-music-player-volume-slider"),volumeIcon:i.querySelector(".vd-music-player-volume-icon"),progressBar:i.querySelector(".vd-music-player-progress-bar"),timeElapsed:i.querySelector(".vd-music-player-time-elapsed"),timeDuration:i.querySelector(".vd-music-player-time-duration"),playlistPanel:i.querySelector(".vd-music-player-playlist")},p=()=>{let f=h.btnPlay;f&&(f.innerHTML="",f.appendChild(n(c.isPlaying?"pause":"play")),f.setAttribute("aria-label",c.isPlaying?"Pause":"Play"),f.classList.toggle("is-active",c.isPlaying))},v=()=>{let f=h.trackName;if(!f)return;let w=c.tracks[c.currentIndex];w?(f.textContent=w.name||"Unknown Track",f.classList.remove("is-idle")):(f.textContent="No tracks loaded",f.classList.add("is-idle"))},y=()=>{let f=h.volumeIcon;if(!f)return;f.innerHTML="";let w=c.volume,E=w===0?"speaker-none":w<.5?"speaker-low":"speaker-high";f.appendChild(n(E))},C=()=>{let f=h.btnShuffle;f&&(f.classList.toggle("is-active",c.shuffle),f.setAttribute("aria-pressed",c.shuffle?"true":"false"))},L=()=>{let f=h.playlistPanel;f&&(f.innerHTML="",c.tracks.forEach((w,E)=>{let I=document.createElement("button");I.className="vd-music-player-playlist-item"+(E===c.currentIndex?" is-active":""),I.type="button",I.setAttribute("data-index",String(E)),I.setAttribute("aria-current",E===c.currentIndex?"true":"false");let O=document.createElement("span");O.className="vd-music-player-playlist-num",O.textContent=String(E+1);let H=document.createElement("span");H.className="vd-music-player-playlist-name",H.textContent=w.name||"Track "+(E+1),I.appendChild(O),I.appendChild(H),f.appendChild(I)}))},P=()=>{let f=h.progressBar;if(!f||!u.duration)return;let w=u.currentTime/u.duration*100;f.value=String(w),t(f),h.timeElapsed&&(h.timeElapsed.textContent=e(u.currentTime)),h.timeDuration&&(h.timeDuration.textContent=e(u.duration))},x=(f,w)=>{let E=c.tracks[f];E&&(c.currentIndex=f,u.src=E.url,v(),L(),h.progressBar&&(h.progressBar.value="0",t(h.progressBar)),h.timeElapsed&&(h.timeElapsed.textContent="0:00"),h.timeDuration&&(h.timeDuration.textContent="0:00"),i.dispatchEvent(new CustomEvent("musicplayer:trackchange",{bubbles:!0,detail:{index:f,name:E.name,url:E.url}})),w&&u.play().catch(()=>{}))},D=[],V=()=>{c.isPlaying=!0,p(),i.dispatchEvent(new CustomEvent("musicplayer:play",{bubbles:!0}))},g=()=>{c.isPlaying=!1,p(),i.dispatchEvent(new CustomEvent("musicplayer:pause",{bubbles:!0}))},k=()=>{if(c.autoAdvance&&c.tracks.length>1){let f=(c.currentIndex+1)%c.tracks.length;x(f,!0)}else c.isPlaying=!1,p(),i.dispatchEvent(new CustomEvent("musicplayer:ended",{bubbles:!0}))},T=()=>{c.showProgress&&P()},M=()=>{h.timeDuration&&(h.timeDuration.textContent=e(u.duration)),h.progressBar&&(h.progressBar.max="100",t(h.progressBar))};if(u.addEventListener("play",V),u.addEventListener("pause",g),u.addEventListener("ended",k),u.addEventListener("timeupdate",T),u.addEventListener("loadedmetadata",M),D.push(()=>{u.removeEventListener("play",V),u.removeEventListener("pause",g),u.removeEventListener("ended",k),u.removeEventListener("timeupdate",T),u.removeEventListener("loadedmetadata",M),u.pause(),u.src=""}),h.btnPlay){let f=()=>{!u.src&&c.tracks.length&&x(c.currentIndex,!1),c.isPlaying?u.pause():u.play().catch(()=>{})};h.btnPlay.addEventListener("click",f),D.push(()=>h.btnPlay.removeEventListener("click",f));let w=E=>{(E.key===" "||E.key==="Enter")&&(E.preventDefault(),f())};h.btnPlay.addEventListener("keydown",w),D.push(()=>h.btnPlay.removeEventListener("keydown",w))}if(h.btnPrev){let f=()=>{if(c.tracks.length)if(u.currentTime>3)u.currentTime=0;else{let w=c.currentIndex===0?c.tracks.length-1:c.currentIndex-1;x(w,c.isPlaying)}};h.btnPrev.addEventListener("click",f),D.push(()=>h.btnPrev.removeEventListener("click",f))}if(h.btnNext){let f=()=>{if(!c.tracks.length)return;let w=(c.currentIndex+1)%c.tracks.length;x(w,c.isPlaying)};h.btnNext.addEventListener("click",f),D.push(()=>h.btnNext.removeEventListener("click",f))}if(h.btnShuffle){let f=()=>{if(c.shuffle=!c.shuffle,c.shuffle){let w=c.tracks[c.currentIndex];c.tracks=m(c.tracks);let E=c.tracks.findIndex(I=>I===w);E>0&&(c.tracks.splice(E,1),c.tracks.unshift(w)),c.currentIndex=0}else{let w=c.tracks[c.currentIndex];c.tracks=c.originalTracks.slice(),c.currentIndex=c.tracks.findIndex(E=>E===w),c.currentIndex<0&&(c.currentIndex=0)}C(),L()};h.btnShuffle.addEventListener("click",f),D.push(()=>h.btnShuffle.removeEventListener("click",f))}if(h.btnPlaylist){let f=()=>{let w=h.playlistPanel;if(!w)return;let E=w.classList.toggle("is-open");h.btnPlaylist.classList.toggle("is-active",E),h.btnPlaylist.setAttribute("aria-expanded",E?"true":"false")};h.btnPlaylist.addEventListener("click",f),D.push(()=>h.btnPlaylist.removeEventListener("click",f))}if(h.volumeSlider){let f=w=>{let E=parseFloat(w.target.value);c.volume=E,u.volume=E,y(),t(h.volumeSlider),i.dispatchEvent(new CustomEvent("musicplayer:volumechange",{bubbles:!0,detail:{volume:E}}))};h.volumeSlider.addEventListener("input",f),D.push(()=>h.volumeSlider.removeEventListener("input",f)),t(h.volumeSlider)}if(h.progressBar){let f=w=>{if(!u.duration)return;let E=parseFloat(w.target.value);u.currentTime=E/100*u.duration,t(h.progressBar)};h.progressBar.addEventListener("input",f),D.push(()=>h.progressBar.removeEventListener("input",f))}if(h.playlistPanel){let f=w=>{let E=w.target.closest(".vd-music-player-playlist-item");if(!E)return;let I=parseInt(E.getAttribute("data-index"),10);isNaN(I)||x(I,!0)};h.playlistPanel.addEventListener("click",f),D.push(()=>h.playlistPanel.removeEventListener("click",f))}p(),v(),y(),o.showPlaylist&&L(),this.instances.set(i,{state:c,audio:u,refs:h,cleanup:D}),i.setAttribute("data-music-player-initialized","true")},_buildDOM:function(i,a){if(i.querySelector(".vd-music-player-controls"))return;i.setAttribute("role","region"),i.setAttribute("aria-label","Music Player"),a.showProgress&&i.classList.add("has-progress"),a.showPlaylist&&i.classList.add("has-playlist");let o=document.createElement("div");o.className="vd-music-player-info";let r=document.createElement("span");r.className="vd-music-player-icon",r.setAttribute("aria-hidden","true"),r.appendChild(n("music-note"));let l=document.createElement("span");l.className="vd-music-player-track-name",l.setAttribute("aria-live","polite"),l.setAttribute("aria-atomic","true"),o.appendChild(r),o.appendChild(l),i.appendChild(o);let d=document.createElement("div");d.className="vd-music-player-controls",d.setAttribute("role","group"),d.setAttribute("aria-label","Playback controls");let c=document.createElement("button");c.type="button",c.className="vd-music-player-btn vd-music-player-btn-prev",c.setAttribute("aria-label","Previous track"),c.appendChild(n("skip-back"));let u=document.createElement("button");u.type="button",u.className="vd-music-player-btn vd-music-player-btn-play",u.setAttribute("aria-label","Play"),u.appendChild(n("play"));let h=document.createElement("button");if(h.type="button",h.className="vd-music-player-btn vd-music-player-btn-next",h.setAttribute("aria-label","Next track"),h.appendChild(n("skip-forward")),d.appendChild(c),d.appendChild(u),d.appendChild(h),a.showPlaylist||a.shuffle!==void 0){let L=document.createElement("button");L.type="button",L.className="vd-music-player-btn vd-music-player-btn-shuffle",L.setAttribute("aria-label","Shuffle"),L.setAttribute("aria-pressed",a.shuffle?"true":"false"),L.appendChild(n("shuffle")),d.appendChild(L)}let p=document.createElement("span");p.className="vd-music-player-spacer",p.setAttribute("aria-hidden","true"),d.appendChild(p);let v=document.createElement("div");v.className="vd-music-player-volume";let y=document.createElement("span");y.className="vd-music-player-volume-icon",y.setAttribute("aria-hidden","true");let C=document.createElement("input");if(C.type="range",C.className="vd-music-player-volume-slider",C.min="0",C.max="1",C.step="0.01",C.value=String(a.volume),C.setAttribute("aria-label","Volume"),v.appendChild(y),v.appendChild(C),d.appendChild(v),a.showPlaylist){let L=document.createElement("button");L.type="button",L.className="vd-music-player-btn vd-music-player-btn-playlist",L.setAttribute("aria-label","Show playlist"),L.setAttribute("aria-expanded","false"),L.appendChild(n("playlist")),d.appendChild(L)}if(i.appendChild(d),a.showProgress){let L=document.createElement("div");L.className="vd-music-player-progress";let P=document.createElement("span");P.className="vd-music-player-time vd-music-player-time-elapsed",P.textContent="0:00",P.setAttribute("aria-hidden","true");let x=document.createElement("input");x.type="range",x.className="vd-music-player-progress-bar",x.min="0",x.max="100",x.step="0.1",x.value="0",x.setAttribute("aria-label","Seek");let D=document.createElement("span");D.className="vd-music-player-time vd-music-player-time-duration",D.textContent="0:00",D.setAttribute("aria-hidden","true"),L.appendChild(P),L.appendChild(x),L.appendChild(D),i.appendChild(L)}if(a.showPlaylist){let L=document.createElement("div");L.className="vd-music-player-playlist",L.setAttribute("aria-label","Playlist"),i.appendChild(L)}},play:function(i){let a=this.instances.get(i);a&&(!a.audio.src&&a.state.tracks.length&&(a.audio.src=a.state.tracks[a.state.currentIndex].url),a.audio.play().catch(()=>{}))},pause:function(i){let a=this.instances.get(i);a&&a.audio.pause()},toggle:function(i){let a=this.instances.get(i);a&&(a.state.isPlaying?this.pause(i):this.play(i))},next:function(i){let a=this.instances.get(i);if(!a||!a.state.tracks.length)return;let o=(a.state.currentIndex+1)%a.state.tracks.length;this._loadTrack(a,o,a.state.isPlaying)},previous:function(i){let a=this.instances.get(i);if(!a||!a.state.tracks.length)return;let o=a.state.tracks.length,r=(a.state.currentIndex-1+o)%o;this._loadTrack(a,r,a.state.isPlaying)},setVolume:function(i,a){let o=this.instances.get(i);if(!o)return;let r=Math.max(0,Math.min(1,a));o.state.volume=r,o.audio.volume=r,o.refs.volumeSlider&&(o.refs.volumeSlider.value=String(r),t(o.refs.volumeSlider)),i.dispatchEvent(new CustomEvent("musicplayer:volumechange",{bubbles:!0,detail:{volume:r}}))},setTrack:function(i,a){let o=this.instances.get(i);o&&this._loadTrack(o,a,o.state.isPlaying)},shuffle:function(i){let a=this.instances.get(i);!a||!a.refs.btnShuffle||a.refs.btnShuffle.click()},getState:function(i){let a=this.instances.get(i);if(!a)return null;let o=a.state;return{isPlaying:o.isPlaying,currentIndex:o.currentIndex,currentTrack:o.tracks[o.currentIndex]||null,volume:o.volume,shuffle:o.shuffle,tracks:o.tracks.slice()}},destroy:function(i){let a=this.instances.get(i);a&&(a.cleanup.forEach(o=>o()),this.instances.delete(i),i.removeAttribute("data-music-player-initialized"))},destroyAll:function(){this.instances.forEach((i,a)=>this.destroy(a))},_loadTrack:function(i,a,o){let r=i.state.tracks[a];if(!r)return;let l=this._containerOf(i);i.state.currentIndex=a,i.audio.src=r.url,i.refs.trackName&&(i.refs.trackName.textContent=r.name||"Unknown Track",i.refs.trackName.classList.remove("is-idle")),i.refs.playlistPanel&&i.refs.playlistPanel.querySelectorAll(".vd-music-player-playlist-item").forEach((d,c)=>{let u=c===a;d.classList.toggle("is-active",u),d.setAttribute("aria-current",u?"true":"false")}),i.refs.progressBar&&(i.refs.progressBar.value="0",t(i.refs.progressBar)),i.refs.timeElapsed&&(i.refs.timeElapsed.textContent="0:00"),i.refs.timeDuration&&(i.refs.timeDuration.textContent="0:00"),l&&l.dispatchEvent(new CustomEvent("musicplayer:trackchange",{bubbles:!0,detail:{index:a,name:r.name,url:r.url}})),o&&i.audio.play().catch(()=>{})},_containerOf:function(i){for(let[a,o]of this.instances)if(o===i)return a;return null}};typeof window.Vanduo<"u"&&window.Vanduo.register("musicPlayer",s),window.VanduoMusicPlayer=s})();var J=window.Vanduo;var Re=J;export{J as Vanduo,Re as default}; //# sourceMappingURL=vanduo.esm.min.js.map diff --git a/dist/vanduo.esm.min.js.map b/dist/vanduo.esm.min.js.map index 3dc0c3f..11cf8d5 100644 --- a/dist/vanduo.esm.min.js.map +++ b/dist/vanduo.esm.min.js.map @@ -1,7 +1,7 @@ { "version": 3, - "sources": ["../js/utils/lifecycle.js", "../js/vanduo.js", "../js/components/code-snippet.js", "../js/components/collapsible.js", "../js/components/dropdown.js", "../js/components/font-switcher.js", "../js/components/grid.js", "../js/components/image-box.js", "../js/components/modals.js", "../js/components/navbar.js", "../js/components/pagination.js", "../js/components/parallax.js", "../js/components/preloader.js", "../js/components/select.js", "../js/components/sidenav.js", "../js/components/tabs.js", "../js/components/theme-customizer.js", "../js/components/theme-switcher.js", "../js/components/toast.js", "../js/components/tooltips.js", "../js/components/doc-search.js", "../js/components/draggable.js", "../js/components/lazy-load.js", "../js/components/glass.js", "../js/components/flow.js", "../js/components/bubble.js", "../js/components/waypoint.js", "../js/components/ripple.js", "../js/components/affix.js", "../js/components/suggest.js", "../js/components/validate.js", "../js/components/datepicker.js", "../js/components/timepicker.js", "../js/components/stepper.js", "../js/components/rating.js", "../js/components/transfer.js", "../js/components/tree.js", "../js/components/spotlight.js", "../js/components/music-player.js", "../js/index.js"], - "sourcesContent": ["/**\n * Vanduo Framework - Lifecycle Manager\n * Central registry for component instances and cleanup\n * Prevents memory leaks in SPAs by tracking event listeners\n */\n\n(function() {\n 'use strict';\n\n /**\n * Lifecycle Manager\n * Simple registry that tracks component instances and their cleanup functions\n */\n const Lifecycle = {\n // Map of element -> { componentName, cleanupFunctions }\n instances: new Map(),\n\n /**\n * Register a component instance\n * @param {HTMLElement} element - The DOM element\n * @param {string} componentName - Name of the component\n * @param {Array} cleanupFns - Functions to call on destroy\n */\n register: function(element, componentName, cleanupFns = []) {\n if (this.instances.has(element)) {\n // Already registered, merge cleanup functions\n const existing = this.instances.get(element);\n existing.cleanup = existing.cleanup.concat(cleanupFns);\n return;\n }\n\n this.instances.set(element, {\n component: componentName,\n cleanup: cleanupFns,\n registeredAt: Date.now()\n });\n },\n\n /**\n * Unregister a single element and run its cleanup\n * @param {HTMLElement} element - The element to unregister\n */\n unregister: function(element) {\n const instance = this.instances.get(element);\n if (!instance) return;\n\n // Run all cleanup functions\n instance.cleanup.forEach(function(fn) {\n try {\n fn();\n } catch (e) {\n console.warn('[Vanduo Lifecycle] Cleanup error:', e);\n }\n });\n\n this.instances.delete(element);\n },\n\n /**\n * Destroy all instances of a specific component\n * @param {string} componentName - Optional component name filter\n */\n destroyAll: function(componentName) {\n const toRemove = [];\n\n this.instances.forEach(function(instance, element) {\n if (!componentName || instance.component === componentName) {\n toRemove.push(element);\n }\n });\n\n toRemove.forEach(function(element) {\n Lifecycle.unregister(element);\n });\n },\n\n /**\n * Destroy all instances within a specific container\n * Useful for SPAs when navigating between pages\n * @param {HTMLElement} container - Container element\n */\n destroyAllInContainer: function(container) {\n const toRemove = [];\n\n this.instances.forEach(function(instance, element) {\n if (container.contains(element)) {\n toRemove.push(element);\n }\n });\n\n toRemove.forEach(function(element) {\n Lifecycle.unregister(element);\n });\n },\n\n /**\n * Get all registered instances (for debugging)\n * @returns {Array} Array of instance info objects\n */\n getAll: function() {\n const result = [];\n this.instances.forEach(function(instance, element) {\n result.push({\n element: element,\n component: instance.component,\n registeredAt: instance.registeredAt\n });\n });\n return result;\n },\n\n /**\n * Check if an element is registered\n * @param {HTMLElement} element - The element to check\n * @returns {boolean}\n */\n has: function(element) {\n return this.instances.has(element);\n }\n };\n\n // Auto-cleanup on page unload\n window.addEventListener('beforeunload', function() {\n Lifecycle.destroyAll();\n });\n\n // Expose globally\n window.VanduoLifecycle = Lifecycle;\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('lifecycle', Lifecycle);\n }\n\n})();\n", "/**\n * Vanduo Framework - Main JavaScript File\n */\n\n(function () {\n 'use strict';\n\n const VANDUO_VERSION = typeof __VANDUO_VERSION__ !== 'undefined' ? __VANDUO_VERSION__ : '0.0.0-dev';\n\n /**\n * Vanduo Framework Object\n */\n const Vanduo = {\n version: VANDUO_VERSION,\n components: {},\n\n /**\n * Initialize framework\n * Call this after DOM is ready and all components are loaded\n */\n init: function () {\n // Initialize components when DOM is ready\n if (typeof ready !== 'undefined') {\n ready(() => {\n this.initComponents();\n });\n } else {\n // Fallback if helpers.js is not loaded\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => {\n this.initComponents();\n });\n } else {\n this.initComponents();\n }\n }\n },\n\n /**\n * Initialize all components\n */\n initComponents: function () {\n // Initialize all registered components\n Object.keys(this.components).forEach((name) => {\n const component = this.components[name];\n if (component.init && typeof component.init === 'function') {\n try {\n component.init();\n } catch (e) {\n console.warn('[Vanduo] Failed to initialize component \"' + name + '\":', e);\n }\n }\n });\n\n console.log('Vanduo Framework v' + this.version + ' initialized');\n },\n\n /**\n * Register a component\n * @param {string} name - Component name\n * @param {Object} component - Component object with init method\n */\n register: function (name, component) {\n this.components[name] = component;\n // Note: Components are NOT auto-initialized on registration\n // Call Vanduo.init() explicitly after all components are registered\n },\n\n /**\n * Re-initialize a component (useful after dynamic DOM changes)\n * @param {string} name - Component name\n */\n reinit: function (name) {\n const component = this.components[name];\n if (component && component.init && typeof component.init === 'function') {\n try {\n component.init();\n } catch (e) {\n console.warn('[Vanduo] Failed to reinitialize component \"' + name + '\":', e);\n }\n }\n },\n\n /**\n * Destroy all component instances and clean up event listeners\n * Uses lifecycle manager for memory leak prevention\n */\n destroyAll: function () {\n // First, destroy components that have their own destroyAll\n const names = Object.keys(this.components);\n for (let i = 0; i < names.length; i++) {\n const component = this.components[names[i]];\n if (component && component.destroyAll && typeof component.destroyAll === 'function') {\n try {\n component.destroyAll();\n } catch (e) {\n console.warn('[Vanduo] Failed to destroy component \"' + names[i] + '\":', e);\n }\n }\n }\n\n // Then, cleanup any remaining registered elements via lifecycle manager\n if (typeof window.VanduoLifecycle !== 'undefined') {\n window.VanduoLifecycle.destroyAll();\n }\n },\n\n /**\n * Get component instance\n * @param {string} name - Component name\n * @returns {Object|null}\n */\n getComponent: function (name) {\n return this.components[name] || null;\n }\n };\n\n // Expose to global scope\n window.Vanduo = Vanduo;\n\n})();\n", "/**\n * Vanduo Framework - Code Snippet Component\n * Copyable code blocks with tabs, syntax highlighting, and HTML extraction\n */\n\n(function () {\n 'use strict';\n\n /**\n * Code Snippet Component\n */\n const CodeSnippet = {\n _snippetIdCounter: 0,\n\n getSnippetInstanceId: function (snippet) {\n if (snippet.dataset.codeSnippetId) {\n return snippet.dataset.codeSnippetId;\n }\n\n const baseId = (snippet.id || '').trim();\n if (baseId) {\n snippet.dataset.codeSnippetId = `snippet-${baseId}`;\n return snippet.dataset.codeSnippetId;\n }\n\n this._snippetIdCounter += 1;\n snippet.dataset.codeSnippetId = `snippet-auto-${this._snippetIdCounter}`;\n return snippet.dataset.codeSnippetId;\n },\n\n addListener: function (snippet, target, event, handler) {\n if (!target) return;\n target.addEventListener(event, handler);\n if (!snippet._codeSnippetCleanup) {\n snippet._codeSnippetCleanup = [];\n }\n snippet._codeSnippetCleanup.push(() => target.removeEventListener(event, handler));\n },\n\n /**\n * Initialize all code snippet components\n */\n init: function () {\n const snippets = document.querySelectorAll('.vd-code-snippet');\n\n snippets.forEach(snippet => {\n if (!snippet.dataset.initialized) {\n this.initSnippet(snippet);\n }\n });\n },\n\n /**\n * Initialize a single code snippet\n * @param {HTMLElement} snippet - Code snippet container element\n */\n initSnippet: function (snippet) {\n snippet.dataset.initialized = 'true';\n snippet._codeSnippetCleanup = [];\n\n // Handle collapsible toggle\n const toggle = snippet.querySelector('.vd-code-snippet-toggle');\n const content = snippet.querySelector('.vd-code-snippet-content');\n\n if (toggle && content) {\n this.initCollapsible(snippet, toggle, content);\n }\n\n // Handle tabs\n const tabs = snippet.querySelectorAll('.vd-code-snippet-tab');\n const panes = snippet.querySelectorAll('.vd-code-snippet-pane');\n\n if (tabs.length > 0) {\n this.initTabs(snippet, tabs, panes);\n }\n\n // Handle copy button\n const copyBtn = snippet.querySelector('.vd-code-snippet-copy');\n if (copyBtn) {\n this.initCopyButton(snippet, copyBtn);\n }\n\n // Handle HTML extraction\n const extractPanes = snippet.querySelectorAll('[data-extract]');\n extractPanes.forEach(pane => {\n this.extractHtml(pane);\n });\n\n // Handle line numbers\n const lineNumberPanes = snippet.querySelectorAll('.has-line-numbers');\n lineNumberPanes.forEach(pane => {\n this.addLineNumbers(pane);\n });\n },\n\n /**\n * Initialize collapsible functionality\n * @param {HTMLElement} snippet - Code snippet container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} content - Collapsible content\n */\n initCollapsible: function (snippet, toggle, content) {\n // Set initial state\n const isExpanded = snippet.dataset.expanded === 'true';\n toggle.setAttribute('aria-expanded', isExpanded);\n content.dataset.visible = isExpanded;\n\n this.addListener(snippet, toggle, 'click', () => {\n const expanded = snippet.dataset.expanded === 'true';\n snippet.dataset.expanded = !expanded;\n toggle.setAttribute('aria-expanded', !expanded);\n content.dataset.visible = !expanded;\n\n // Extract HTML on first expand if needed\n if (!expanded) {\n const extractPanes = content.querySelectorAll('[data-extract]:not([data-extracted])');\n extractPanes.forEach(pane => {\n this.extractHtml(pane);\n });\n }\n\n // Dispatch event\n const event = new CustomEvent('codesnippet:toggle', {\n bubbles: true,\n detail: { snippet, expanded: !expanded }\n });\n snippet.dispatchEvent(event);\n });\n },\n\n /**\n * Initialize tab functionality\n * @param {HTMLElement} snippet - Code snippet container\n * @param {NodeList} tabs - Tab buttons\n * @param {NodeList} panes - Code panes\n */\n initTabs: function (snippet, tabs, panes) {\n const snippetId = this.getSnippetInstanceId(snippet);\n\n // Set up ARIA attributes\n const tabList = snippet.querySelector('.vd-code-snippet-tabs');\n if (tabList) {\n tabList.setAttribute('role', 'tablist');\n }\n\n tabs.forEach((tab, index) => {\n const lang = tab.dataset.lang;\n const isActive = tab.classList.contains('is-active');\n\n // Set ARIA attributes\n tab.setAttribute('role', 'tab');\n tab.setAttribute('aria-selected', isActive);\n tab.setAttribute('tabindex', isActive ? '0' : '-1');\n tab.id = tab.id || `code-tab-${snippetId}-${lang || 'tab'}-${index}`;\n\n // Find corresponding pane\n const pane = snippet.querySelector(`.vd-code-snippet-pane[data-lang=\"${lang}\"]`);\n if (pane) {\n pane.id = pane.id || `code-pane-${snippetId}-${lang || 'pane'}-${index}`;\n pane.setAttribute('role', 'tabpanel');\n tab.setAttribute('aria-controls', pane.id);\n pane.setAttribute('aria-labelledby', tab.id);\n }\n\n // Click handler\n this.addListener(snippet, tab, 'click', () => {\n this.switchTab(snippet, tab, tabs, panes);\n });\n\n // Keyboard navigation\n this.addListener(snippet, tab, 'keydown', (e) => {\n this.handleTabKeydown(e, snippet, tabs, panes);\n });\n });\n },\n\n /**\n * Switch to a specific tab\n * @param {HTMLElement} snippet - Code snippet container\n * @param {HTMLElement} activeTab - Tab to activate\n * @param {NodeList} tabs - All tab buttons\n * @param {NodeList} panes - All code panes\n */\n switchTab: function (snippet, activeTab, tabs, panes) {\n const lang = activeTab.dataset.lang;\n\n // Deactivate all tabs\n tabs.forEach(tab => {\n tab.classList.remove('is-active');\n tab.setAttribute('aria-selected', 'false');\n tab.setAttribute('tabindex', '-1');\n });\n\n // Hide all panes\n panes.forEach(pane => {\n pane.classList.remove('is-active');\n });\n\n // Activate selected tab\n activeTab.classList.add('is-active');\n activeTab.setAttribute('aria-selected', 'true');\n activeTab.setAttribute('tabindex', '0');\n\n // Show corresponding pane\n const activePane = snippet.querySelector(`.vd-code-snippet-pane[data-lang=\"${lang}\"]`);\n if (activePane) {\n activePane.classList.add('is-active');\n }\n\n // Dispatch event\n const event = new CustomEvent('codesnippet:tabchange', {\n bubbles: true,\n detail: { snippet, tab: activeTab, lang }\n });\n snippet.dispatchEvent(event);\n },\n\n /**\n * Handle keyboard navigation for tabs\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} snippet - Code snippet container\n * @param {NodeList} tabs - All tab buttons\n * @param {NodeList} panes - All code panes\n */\n handleTabKeydown: function (e, snippet, tabs, panes) {\n const tabArray = Array.from(tabs);\n const currentIndex = tabArray.indexOf(e.target);\n let newIndex;\n\n switch (e.key) {\n case 'ArrowLeft':\n e.preventDefault();\n newIndex = currentIndex > 0 ? currentIndex - 1 : tabArray.length - 1;\n break;\n case 'ArrowRight':\n e.preventDefault();\n newIndex = currentIndex < tabArray.length - 1 ? currentIndex + 1 : 0;\n break;\n case 'Home':\n e.preventDefault();\n newIndex = 0;\n break;\n case 'End':\n e.preventDefault();\n newIndex = tabArray.length - 1;\n break;\n default:\n return;\n }\n\n if (newIndex !== currentIndex) {\n tabArray[newIndex].focus();\n this.switchTab(snippet, tabArray[newIndex], tabs, panes);\n }\n },\n\n /**\n * Initialize copy button\n * @param {HTMLElement} snippet - Code snippet container\n * @param {HTMLElement} copyBtn - Copy button element\n */\n initCopyButton: function (snippet, copyBtn) {\n this.addListener(snippet, copyBtn, 'click', async () => {\n await this.copyCode(snippet, copyBtn);\n });\n },\n\n /**\n * Copy code to clipboard\n * @param {HTMLElement} snippet - Code snippet container\n * @param {HTMLElement} copyBtn - Copy button element\n */\n copyCode: async function (snippet, copyBtn) {\n const activePane = snippet.querySelector('.vd-code-snippet-pane.is-active') ||\n snippet.querySelector('.vd-code-snippet-pane');\n\n if (!activePane) {\n console.warn('CodeSnippet: No code pane found');\n return;\n }\n\n const codeElement = activePane.querySelector('code') || activePane;\n const code = codeElement.textContent;\n\n let copySuccess;\n try {\n await navigator.clipboard.writeText(code);\n copySuccess = true;\n } catch (_err) {\n // Fallback for older browsers\n copySuccess = this.fallbackCopy(code);\n }\n this.showCopyFeedback(copyBtn, copySuccess);\n\n // Dispatch event\n const event = new CustomEvent('codesnippet:copy', {\n bubbles: true,\n detail: { snippet, code, success: copySuccess }\n });\n snippet.dispatchEvent(event);\n },\n\n /**\n * Fallback copy method for older browsers\n * @param {string} text - Text to copy\n * @returns {boolean} Success status\n */\n fallbackCopy: function (text) {\n const textarea = document.createElement('textarea');\n textarea.value = text;\n textarea.style.position = 'fixed';\n textarea.style.left = '-9999px';\n textarea.style.top = '-9999px';\n document.body.appendChild(textarea);\n textarea.focus();\n textarea.select();\n\n let success = false;\n try {\n success = document.execCommand('copy');\n } catch (err) {\n console.warn('CodeSnippet: Fallback copy failed', err);\n }\n\n document.body.removeChild(textarea);\n return success;\n },\n\n /**\n * Show copy feedback\n * @param {HTMLElement} copyBtn - Copy button element\n * @param {boolean} success - Whether copy was successful\n */\n showCopyFeedback: function (copyBtn, success) {\n if (success) {\n copyBtn.classList.add('is-copied');\n\n // Announce to screen readers\n const announcement = document.createElement('span');\n announcement.setAttribute('role', 'status');\n announcement.setAttribute('aria-live', 'polite');\n announcement.className = 'sr-only';\n announcement.textContent = 'Code copied to clipboard';\n copyBtn.appendChild(announcement);\n\n setTimeout(() => {\n copyBtn.classList.remove('is-copied');\n if (announcement.parentNode) {\n announcement.parentNode.removeChild(announcement);\n }\n }, 2000);\n }\n },\n\n /**\n * Extract HTML from a demo element\n * @param {HTMLElement} pane - Code pane with data-extract attribute\n */\n extractHtml: function (pane) {\n const selector = pane.dataset.extract;\n if (!selector) return;\n\n const source = document.querySelector(selector);\n if (!source) {\n console.warn(`CodeSnippet: Source element not found: ${selector}`);\n return;\n }\n\n // Get inner HTML\n let html = source.innerHTML;\n\n // Format the HTML\n html = this.formatHtml(html);\n\n // Escape for display\n html = this.escapeHtml(html);\n\n // Apply syntax highlighting\n html = this.highlightHtml(html);\n\n // Set content via DOM API to avoid string-based HTML insertion\n const codeEl = document.createElement('code');\n codeEl.innerHTML = html;\n pane.replaceChildren(codeEl);\n pane.dataset.extracted = 'true';\n },\n\n /**\n * Format HTML with proper indentation\n * @param {string} html - Raw HTML string\n * @returns {string} Formatted HTML\n */\n formatHtml: function (html) {\n // Remove leading/trailing whitespace\n html = html.trim();\n\n // Simple formatting: normalize whitespace\n // Split by tags, then rejoin with proper indentation\n const lines = html.split('\\n');\n let indent = 0;\n const indentSize = 2;\n const formattedLines = [];\n\n lines.forEach(line => {\n line = line.trim();\n if (!line) return;\n\n // Check for closing tags at start\n if (line.match(/^<\\/\\w/)) {\n indent = Math.max(0, indent - indentSize);\n }\n\n formattedLines.push(' '.repeat(indent) + line);\n\n // Check for opening tags (not self-closing)\n // Use short fixed-length regex + indexOf to prevent ReDoS\n const hasOpenTag = /<[a-zA-Z]/.test(line);\n const isSelfClosing = line.includes('/>');\n if (hasOpenTag && !isSelfClosing) {\n // Don't indent for void elements\n if (!line.match(/<(br|hr|img|input|meta|link|area|base|col|embed|param|source|track|wbr)/i)) {\n // Only indent if not also closing on same line\n if (!line.match(/<\\/\\w+>$/)) {\n indent += indentSize;\n }\n }\n }\n });\n\n return formattedLines.join('\\n');\n },\n\n /**\n * Escape HTML entities for display\n * @param {string} html - HTML string\n * @returns {string} Escaped HTML\n */\n escapeHtml: function (html) {\n const div = document.createElement('div');\n div.textContent = html;\n return div.innerHTML;\n },\n\n /**\n * Apply syntax highlighting to HTML\n * @param {string} html - Escaped HTML string\n * @returns {string} HTML with syntax highlighting spans\n */\n highlightHtml: function (html) {\n // Highlight HTML tags\n html = html.replace(/(<\\/?)([\\w-]+)/g, '$1$2');\n\n // Highlight attributes\n html = html.replace(/([\\w-]+)(=)("|')/g, '$1$2$3');\n\n // Highlight attribute values (strings)\n html = html.replace(/("|')([^&]*)("|')/g, '$1$2$3');\n\n // Highlight comments\n html = html.replace(/(<!--)(.*?)(-->)/g, '$1$2$3');\n\n return html;\n },\n\n /**\n * Apply syntax highlighting to CSS\n * @param {string} css - CSS string\n * @returns {string} CSS with syntax highlighting spans\n */\n highlightCss: function (css) {\n // Highlight selectors \u2014 use non-backtracking bounded pattern\n css = css.replace(/([.#]?[a-zA-Z][a-zA-Z0-9_-]{0,200})(\\s*\\{)/g, '$1$2');\n\n // Highlight properties \u2014 use non-backtracking bounded pattern\n css = css.replace(/([a-zA-Z][a-zA-Z0-9_-]{0,200})(\\s*:)/g, '$1$2');\n\n // Highlight values\n css = css.replace(/:\\s*([^;{}]+)(;)/g, ': $1$2');\n\n // Highlight units\n css = css.replace(/(\\d+)(px|rem|em|%|vh|vw|deg|s|ms)/g, '$1$2');\n\n // Highlight comments\n css = css.replace(/(\\/\\*[\\s\\S]*?\\*\\/)/g, '$1');\n\n return css;\n },\n\n /**\n * Apply syntax highlighting to JavaScript\n * @param {string} js - JavaScript string\n * @returns {string} JS with syntax highlighting spans\n */\n highlightJs: function (js) {\n // Highlight keywords\n const keywords = ['const', 'let', 'var', 'function', 'return', 'if', 'else', 'for', 'while', 'switch', 'case', 'break', 'continue', 'new', 'this', 'class', 'extends', 'import', 'export', 'default', 'async', 'await', 'try', 'catch', 'throw', 'typeof', 'instanceof'];\n keywords.forEach(kw => {\n const regex = new RegExp(`\\\\b(${kw})\\\\b`, 'g');\n js = js.replace(regex, '$1');\n });\n\n // Highlight strings (limit to 10 000 chars to prevent polynomial backtracking)\n js = js.replace(/('(?:[^'\\\\]|\\\\.){0,10000}'|\"(?:[^\"\\\\]|\\\\.){0,10000}\"|`(?:[^`\\\\]|\\\\.){0,10000}`)/g, '$1');\n\n // Highlight numbers\n js = js.replace(/\\b(\\d+\\.?\\d*)\\b/g, '$1');\n\n // Highlight function calls\n js = js.replace(/\\b([\\w]+)(\\s*\\()/g, '$1$2');\n\n // Highlight comments\n js = js.replace(/(\\/\\/.*$)/gm, '$1');\n js = js.replace(/(\\/\\*[\\s\\S]*?\\*\\/)/g, '$1');\n\n return js;\n },\n\n /**\n * Add line numbers to a code pane\n * @param {HTMLElement} pane - Code pane element\n */\n addLineNumbers: function (pane) {\n const code = pane.querySelector('code');\n if (!code) return;\n\n const lines = code.innerHTML.split('\\n');\n const lineCount = lines.length;\n\n // Create line numbers container\n const lineNumbers = document.createElement('div');\n lineNumbers.className = 'vd-code-snippet-line-numbers';\n lineNumbers.setAttribute('aria-hidden', 'true');\n\n for (let i = 1; i <= lineCount; i++) {\n const lineNum = document.createElement('span');\n lineNum.textContent = i;\n lineNumbers.appendChild(lineNum);\n }\n\n // Wrap code content\n const codeWrapper = document.createElement('div');\n codeWrapper.className = 'vd-code-snippet-code';\n codeWrapper.appendChild(code.cloneNode(true));\n\n // Replace code with new structure\n code.parentNode.removeChild(code);\n pane.appendChild(lineNumbers);\n pane.appendChild(codeWrapper);\n },\n\n /**\n * Programmatically expand a code snippet\n * @param {string|HTMLElement} snippet - Snippet selector or element\n */\n expand: function (snippet) {\n if (typeof snippet === 'string') {\n snippet = document.querySelector(snippet);\n }\n if (!snippet) return;\n\n snippet.dataset.expanded = 'true';\n const toggle = snippet.querySelector('.vd-code-snippet-toggle');\n const content = snippet.querySelector('.vd-code-snippet-content');\n\n if (toggle) toggle.setAttribute('aria-expanded', 'true');\n if (content) content.dataset.visible = 'true';\n },\n\n /**\n * Programmatically collapse a code snippet\n * @param {string|HTMLElement} snippet - Snippet selector or element\n */\n collapse: function (snippet) {\n if (typeof snippet === 'string') {\n snippet = document.querySelector(snippet);\n }\n if (!snippet) return;\n\n snippet.dataset.expanded = 'false';\n const toggle = snippet.querySelector('.vd-code-snippet-toggle');\n const content = snippet.querySelector('.vd-code-snippet-content');\n\n if (toggle) toggle.setAttribute('aria-expanded', 'false');\n if (content) content.dataset.visible = 'false';\n },\n\n /**\n * Programmatically switch to a specific language tab\n * @param {string|HTMLElement} snippet - Snippet selector or element\n * @param {string} lang - Language to switch to (html, css, js)\n */\n showLang: function (snippet, lang) {\n if (typeof snippet === 'string') {\n snippet = document.querySelector(snippet);\n }\n if (!snippet) return;\n\n const tab = snippet.querySelector(`.vd-code-snippet-tab[data-lang=\"${lang}\"]`);\n const tabs = snippet.querySelectorAll('.vd-code-snippet-tab');\n const panes = snippet.querySelectorAll('.vd-code-snippet-pane');\n\n if (tab) {\n this.switchTab(snippet, tab, tabs, panes);\n }\n },\n\n /**\n * Destroy a code snippet instance and clean up listeners\n * @param {string|HTMLElement} snippet - Snippet selector or element\n */\n destroy: function (snippet) {\n if (typeof snippet === 'string') {\n snippet = document.querySelector(snippet);\n }\n if (!snippet) return;\n\n if (snippet._codeSnippetCleanup) {\n snippet._codeSnippetCleanup.forEach(fn => fn());\n delete snippet._codeSnippetCleanup;\n }\n\n delete snippet.dataset.initialized;\n },\n\n /**\n * Destroy all code snippet instances\n */\n destroyAll: function () {\n const snippets = document.querySelectorAll('.vd-code-snippet[data-initialized=\"true\"]');\n snippets.forEach(snippet => this.destroy(snippet));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('codeSnippet', CodeSnippet);\n }\n\n // Also expose globally for convenience\n window.CodeSnippet = CodeSnippet;\n\n})();\n", "/**\n * Vanduo Framework - Collapsible Component\n * JavaScript functionality for collapsible/accordion components\n */\n\n(function() {\n 'use strict';\n\n /**\n * Collapsible Component\n */\n const Collapsible = {\n // Store initialized containers and their cleanup functions\n instances: new Map(),\n\n /**\n * Initialize collapsible components\n */\n init: function() {\n const collapsibles = document.querySelectorAll('.vd-collapsible, .accordion');\n\n collapsibles.forEach(container => {\n if (this.instances.has(container)) {\n return;\n }\n this.initCollapsible(container);\n });\n },\n\n /**\n * Initialize a collapsible container\n * @param {HTMLElement} container - Collapsible container\n */\n initCollapsible: function(container) {\n const isAccordion = container.classList.contains('accordion');\n const items = container.querySelectorAll('.vd-collapsible-item, .accordion-item');\n const cleanupFunctions = [];\n\n items.forEach(item => {\n const header = item.querySelector('.vd-collapsible-header, .accordion-header');\n const body = item.querySelector('.vd-collapsible-body, .accordion-body');\n const trigger = item.querySelector('.vd-collapsible-trigger, .accordion-trigger') || header;\n\n if (!header || !body) {\n return;\n }\n\n // Set initial state\n if (item.classList.contains('is-open')) {\n this.openItem(item, body, false);\n } else {\n this.closeItem(item, body, false);\n }\n\n // Add click handler\n const clickHandler = (e) => {\n e.preventDefault();\n this.toggleItem(item, body, container, isAccordion);\n };\n trigger.addEventListener('click', clickHandler);\n cleanupFunctions.push(() => trigger.removeEventListener('click', clickHandler));\n });\n\n this.instances.set(container, { cleanup: cleanupFunctions });\n },\n \n /**\n * Toggle collapsible item\n * @param {HTMLElement} item - Collapsible item\n * @param {HTMLElement} body - Collapsible body\n * @param {HTMLElement} container - Collapsible container\n * @param {boolean} isAccordion - Whether in accordion mode\n */\n toggleItem: function(item, body, container, isAccordion) {\n const isOpen = item.classList.contains('is-open');\n \n if (isOpen) {\n this.closeItem(item, body);\n } else {\n // If accordion mode, close other open items\n if (isAccordion) {\n const otherOpenItems = container.querySelectorAll('.vd-collapsible-item.is-open, .accordion-item.is-open');\n otherOpenItems.forEach(otherItem => {\n if (otherItem !== item) {\n const otherBody = otherItem.querySelector('.vd-collapsible-body, .accordion-body');\n this.closeItem(otherItem, otherBody);\n }\n });\n }\n \n this.openItem(item, body);\n }\n },\n \n /**\n * Open collapsible item\n * @param {HTMLElement} item - Collapsible item\n * @param {HTMLElement} body - Collapsible body\n * @param {boolean} animate - Whether to animate\n */\n openItem: function(item, body, animate = true) {\n if (!animate) {\n body.style.transition = 'none';\n }\n \n item.classList.add('is-open');\n item.setAttribute('aria-expanded', 'true');\n \n // Set max-height to actual height\n const height = body.scrollHeight;\n body.style.maxHeight = `${height}px`;\n \n // Reset transition after a brief delay\n if (!animate) {\n setTimeout(() => {\n body.style.transition = '';\n }, 0);\n }\n \n // Dispatch event\n item.dispatchEvent(new CustomEvent('collapsible:open', { bubbles: true }));\n },\n \n /**\n * Close collapsible item\n * @param {HTMLElement} item - Collapsible item\n * @param {HTMLElement} body - Collapsible body\n * @param {boolean} animate - Whether to animate\n */\n closeItem: function(item, body, animate = true) {\n if (!animate) {\n body.style.transition = 'none';\n }\n \n item.classList.remove('is-open');\n item.setAttribute('aria-expanded', 'false');\n body.style.maxHeight = '0';\n \n // Reset transition after a brief delay\n if (!animate) {\n setTimeout(() => {\n body.style.transition = '';\n }, 0);\n }\n \n // Dispatch event\n item.dispatchEvent(new CustomEvent('collapsible:close', { bubbles: true }));\n },\n \n /**\n * Open item programmatically\n * @param {HTMLElement|string} item - Collapsible item or selector\n */\n open: function(item) {\n const el = typeof item === 'string' ? document.querySelector(item) : item;\n if (el) {\n const body = el.querySelector('.vd-collapsible-body, .accordion-body');\n if (body) {\n this.openItem(el, body);\n }\n }\n },\n \n /**\n * Close item programmatically\n * @param {HTMLElement|string} item - Collapsible item or selector\n */\n close: function(item) {\n const el = typeof item === 'string' ? document.querySelector(item) : item;\n if (el) {\n const body = el.querySelector('.vd-collapsible-body, .accordion-body');\n if (body) {\n this.closeItem(el, body);\n }\n }\n },\n \n /**\n * Toggle item programmatically\n * @param {HTMLElement|string} item - Collapsible item or selector\n */\n toggle: function(item) {\n const el = typeof item === 'string' ? document.querySelector(item) : item;\n if (el) {\n const body = el.querySelector('.vd-collapsible-body, .accordion-body');\n const container = el.closest('.vd-collapsible, .accordion');\n const isAccordion = container && container.classList.contains('accordion');\n\n if (body) {\n this.toggleItem(el, body, container, isAccordion);\n }\n }\n },\n\n /**\n * Destroy a collapsible instance and clean up event listeners\n * @param {HTMLElement} container - Collapsible container\n */\n destroy: function(container) {\n const instance = this.instances.get(container);\n if (!instance) return;\n\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(container);\n },\n\n /**\n * Destroy all collapsible instances\n */\n destroyAll: function() {\n this.instances.forEach((instance, container) => {\n this.destroy(container);\n });\n }\n };\n \n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('collapsible', Collapsible);\n }\n \n // Expose globally\n window.VanduoCollapsible = Collapsible;\n \n})();\n\n", "/**\n * Vanduo Framework - Dropdown Component\n * JavaScript functionality for dropdown menus\n */\n\n(function() {\n 'use strict';\n\n /**\n * Dropdown Component\n */\n const Dropdown = {\n // Store initialized dropdowns and their cleanup functions\n instances: new Map(),\n\n /**\n * Initialize dropdown components\n */\n init: function() {\n const dropdowns = document.querySelectorAll('.vd-dropdown');\n\n dropdowns.forEach(dropdown => {\n if (this.instances.has(dropdown)) {\n return;\n }\n this.initDropdown(dropdown);\n });\n },\n\n /**\n * Initialize a single dropdown\n * @param {HTMLElement} dropdown - Dropdown container\n */\n initDropdown: function(dropdown) {\n const toggle = dropdown.querySelector('.vd-dropdown-toggle');\n const menu = dropdown.querySelector('.vd-dropdown-menu');\n\n if (!toggle || !menu) {\n return;\n }\n\n const cleanupFunctions = [];\n\n // Set ARIA attributes\n toggle.setAttribute('aria-haspopup', 'true');\n toggle.setAttribute('aria-expanded', 'false');\n menu.setAttribute('role', 'menu');\n menu.setAttribute('aria-hidden', 'true');\n\n // Toggle on click\n const toggleClickHandler = (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggleDropdown(dropdown, toggle, menu);\n };\n toggle.addEventListener('click', toggleClickHandler);\n cleanupFunctions.push(() => toggle.removeEventListener('click', toggleClickHandler));\n\n // Close on outside click\n const documentClickHandler = (e) => {\n if (!dropdown.contains(e.target) && menu.classList.contains('is-open')) {\n this.closeDropdown(dropdown, toggle, menu);\n }\n };\n document.addEventListener('click', documentClickHandler);\n cleanupFunctions.push(() => document.removeEventListener('click', documentClickHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, dropdown, toggle, menu);\n };\n toggle.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => toggle.removeEventListener('keydown', keydownHandler));\n\n // Handle item clicks\n const items = menu.querySelectorAll('.vd-dropdown-item:not(.disabled):not(.is-disabled)');\n items.forEach(item => {\n const itemClickHandler = (e) => {\n e.preventDefault();\n this.selectItem(item, dropdown, toggle, menu);\n };\n item.addEventListener('click', itemClickHandler);\n cleanupFunctions.push(() => item.removeEventListener('click', itemClickHandler));\n\n const itemKeydownHandler = (e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.selectItem(item, dropdown, toggle, menu);\n }\n };\n item.addEventListener('keydown', itemKeydownHandler);\n cleanupFunctions.push(() => item.removeEventListener('keydown', itemKeydownHandler));\n });\n\n this.instances.set(dropdown, { toggle, menu, cleanup: cleanupFunctions, typeaheadBuffer: '', typeaheadTimer: null });\n },\n \n /**\n * Toggle dropdown\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Dropdown menu\n */\n toggleDropdown: function(dropdown, toggle, menu) {\n const isOpen = menu.classList.contains('is-open');\n \n if (isOpen) {\n this.closeDropdown(dropdown, toggle, menu);\n } else {\n this.openDropdown(dropdown, toggle, menu);\n }\n },\n \n /**\n * Open dropdown\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Dropdown menu\n */\n openDropdown: function(dropdown, toggle, menu) {\n // Close other open dropdowns\n const otherOpen = document.querySelectorAll('.vd-dropdown-menu.is-open');\n otherOpen.forEach(otherMenu => {\n if (otherMenu !== menu) {\n const otherDropdown = otherMenu.closest('.vd-dropdown');\n const otherToggle = otherDropdown.querySelector('.vd-dropdown-toggle');\n this.closeDropdown(otherDropdown, otherToggle, otherMenu);\n }\n });\n \n dropdown.classList.add('is-open');\n menu.classList.add('is-open');\n toggle.setAttribute('aria-expanded', 'true');\n menu.setAttribute('aria-hidden', 'false');\n \n // Position menu\n this.positionMenu(dropdown, menu);\n \n // Focus first item\n const firstItem = menu.querySelector('.vd-dropdown-item:not(.disabled):not(.is-disabled)');\n if (firstItem) {\n setTimeout(() => firstItem.focus(), 0);\n }\n },\n \n /**\n * Close dropdown\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Dropdown menu\n */\n closeDropdown: function(dropdown, toggle, menu) {\n dropdown.classList.remove('is-open');\n menu.classList.remove('is-open');\n toggle.setAttribute('aria-expanded', 'false');\n menu.setAttribute('aria-hidden', 'true');\n \n // Return focus to toggle\n toggle.focus();\n },\n \n /**\n * Position dropdown menu\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} menu - Dropdown menu\n */\n positionMenu: function(dropdown, menu) {\n const rect = dropdown.getBoundingClientRect();\n const menuRect = menu.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const padding = 8;\n \n // Check if menu overflows right\n if (rect.left + menuRect.width > viewportWidth - padding) {\n menu.classList.add('vd-dropdown-menu-end');\n menu.classList.remove('vd-dropdown-menu-start');\n }\n \n // Check if menu overflows bottom (for top positioning)\n if (menu.classList.contains('dropdown-menu-top')) {\n if (rect.top - menuRect.height < padding) {\n menu.classList.remove('vd-dropdown-menu-top');\n }\n } else {\n if (rect.bottom + menuRect.height > viewportHeight - padding) {\n menu.classList.add('vd-dropdown-menu-top');\n }\n }\n },\n \n /**\n * Handle keyboard navigation\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Dropdown menu\n */\n handleKeydown: function(e, dropdown, toggle, menu) {\n const isOpen = menu.classList.contains('is-open');\n const items = Array.from(menu.querySelectorAll('.vd-dropdown-item:not(.disabled):not(.is-disabled)'));\n const currentIndex = items.findIndex(item => item === document.activeElement);\n \n switch (e.key) {\n case 'Enter':\n case ' ':\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen) {\n this.openDropdown(dropdown, toggle, menu);\n } else if (e.key === 'ArrowDown') {\n const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n items[nextIndex].focus();\n }\n break;\n \n case 'ArrowUp':\n if (isOpen) {\n e.preventDefault();\n const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n items[prevIndex].focus();\n }\n break;\n \n case 'Escape':\n if (isOpen) {\n e.preventDefault();\n this.closeDropdown(dropdown, toggle, menu);\n }\n break;\n \n case 'Home':\n if (isOpen) {\n e.preventDefault();\n items[0].focus();\n }\n break;\n \n case 'End':\n if (isOpen) {\n e.preventDefault();\n items[items.length - 1].focus();\n }\n break;\n\n default:\n // Typeahead: jump to matching item when typing printable characters\n if (isOpen && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\n // Per-instance typeahead state to avoid cross-instance corruption\n const instance = this.instances.get(dropdown);\n if (!instance) break;\n clearTimeout(instance.typeaheadTimer);\n instance.typeaheadBuffer += e.key.toLowerCase();\n\n const match = items.find(item =>\n item.textContent.trim().toLowerCase().startsWith(instance.typeaheadBuffer)\n );\n if (match) {\n match.focus();\n }\n\n instance.typeaheadTimer = setTimeout(() => {\n instance.typeaheadBuffer = '';\n }, 500);\n }\n break;\n }\n },\n \n /**\n * Select dropdown item\n * @param {HTMLElement} item - Dropdown item\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Dropdown menu\n */\n selectItem: function(item, dropdown, toggle, menu) {\n // Remove active from all items\n menu.querySelectorAll('.vd-dropdown-item').forEach(i => {\n i.classList.remove('active', 'is-active');\n });\n \n // Add active to selected item\n item.classList.add('active', 'is-active');\n \n // Update toggle text if it's a button\n if (toggle.tagName === 'BUTTON' || toggle.classList.contains('btn')) {\n toggle.textContent = item.textContent.trim();\n }\n \n // Close dropdown\n this.closeDropdown(dropdown, toggle, menu);\n \n // Dispatch event\n item.dispatchEvent(new CustomEvent('dropdown:select', { \n bubbles: true,\n detail: { item, value: item.dataset.value || item.textContent }\n }));\n },\n \n /**\n * Open dropdown programmatically\n * @param {HTMLElement|string} dropdown - Dropdown container or selector\n */\n open: function(dropdown) {\n const el = typeof dropdown === 'string' ? document.querySelector(dropdown) : dropdown;\n if (el) {\n const toggle = el.querySelector('.vd-dropdown-toggle');\n const menu = el.querySelector('.vd-dropdown-menu');\n if (toggle && menu) {\n this.openDropdown(el, toggle, menu);\n }\n }\n },\n \n /**\n * Close dropdown programmatically\n * @param {HTMLElement|string} dropdown - Dropdown container or selector\n */\n close: function(dropdown) {\n const el = typeof dropdown === 'string' ? document.querySelector(dropdown) : dropdown;\n if (el) {\n const toggle = el.querySelector('.vd-dropdown-toggle');\n const menu = el.querySelector('.vd-dropdown-menu');\n if (toggle && menu) {\n this.closeDropdown(el, toggle, menu);\n }\n }\n },\n\n /**\n * Destroy a dropdown instance and clean up event listeners\n * @param {HTMLElement} dropdown - Dropdown element\n */\n destroy: function(dropdown) {\n const instance = this.instances.get(dropdown);\n if (!instance) return;\n\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(dropdown);\n },\n\n /**\n * Destroy all dropdown instances\n */\n destroyAll: function() {\n this.instances.forEach((instance, dropdown) => {\n this.destroy(dropdown);\n });\n }\n };\n \n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('dropdown', Dropdown);\n }\n \n // Expose globally\n window.VanduoDropdown = Dropdown;\n \n})();\n\n", "/**\n * Vanduo Framework - Font Switcher\n * Handles font selection and persistence for previewing different typefaces\n */\n\n(function() {\n 'use strict';\n\n const FontSwitcher = {\n STORAGE_KEY: 'vanduo-font-preference',\n isInitialized: false,\n\n // Available fonts configuration\n fonts: {\n 'system': {\n name: 'System Default',\n family: null // Uses CSS default\n },\n 'inter': {\n name: 'Inter',\n family: \"'Inter', sans-serif\"\n },\n 'source-sans': {\n name: 'Source Sans 3',\n family: \"'Source Sans 3', sans-serif\"\n },\n 'fira-sans': {\n name: 'Fira Sans',\n family: \"'Fira Sans', sans-serif\"\n },\n 'ibm-plex': {\n name: 'IBM Plex Sans',\n family: \"'IBM Plex Sans', sans-serif\"\n },\n 'jetbrains-mono': {\n name: 'JetBrains Mono',\n family: \"'JetBrains Mono', monospace\"\n },\n 'ubuntu': {\n name: 'Ubuntu',\n family: \"'Ubuntu', sans-serif\",\n category: 'sans-serif',\n description: 'Friendly, humanist sans-serif'\n },\n 'open-sans': {\n name: 'Open Sans',\n family: \"'Open Sans', sans-serif\",\n category: 'sans-serif',\n description: 'Neutral, highly readable'\n },\n 'rubik': {\n name: 'Rubik',\n family: \"'Rubik', sans-serif\",\n category: 'sans-serif',\n description: 'Modern, geometric'\n },\n 'titillium-web': {\n name: 'Titillium Web',\n family: \"'Titillium Web', sans-serif\",\n category: 'sans-serif',\n description: 'Technical, elegant'\n }\n },\n\n init: function() {\n this.state = {\n preference: this.getPreference()\n };\n\n if (this.isInitialized) {\n this.applyFont();\n this.renderUI();\n this.updateUI();\n return;\n }\n\n this.isInitialized = true;\n\n this.applyFont();\n this.renderUI();\n\n console.log('Vanduo Font Switcher initialized');\n },\n\n /**\n * Get saved font preference from localStorage\n * @returns {string} Font key or 'ubuntu' (default)\n */\n getPreference: function() {\n return this.getStorageValue(this.STORAGE_KEY, 'ubuntu');\n },\n\n /**\n * Set font preference and apply it\n * @param {string} fontKey - The font key to apply\n */\n setPreference: function(fontKey) {\n if (!this.fonts[fontKey]) {\n console.warn('Unknown font:', fontKey);\n return;\n }\n\n this.state.preference = fontKey;\n this.setStorageValue(this.STORAGE_KEY, fontKey);\n this.applyFont();\n this.updateUI();\n\n // Dispatch custom event for other components to listen to\n const event = new CustomEvent('font:change', {\n bubbles: true,\n detail: { font: fontKey, fontData: this.fonts[fontKey] }\n });\n document.dispatchEvent(event);\n },\n\n /**\n * Apply the current font preference to the document\n */\n applyFont: function() {\n const fontKey = this.state.preference;\n\n if (fontKey === 'system') {\n // Remove data-font attribute to use system default\n document.documentElement.removeAttribute('data-font');\n } else {\n // Set data-font attribute which triggers CSS variable override\n document.documentElement.setAttribute('data-font', fontKey);\n }\n },\n\n /**\n * Initialize UI elements with data-toggle=\"font\"\n */\n renderUI: function() {\n const toggles = document.querySelectorAll('[data-toggle=\"font\"]');\n\n toggles.forEach(toggle => {\n if (toggle.getAttribute('data-font-initialized') === 'true') {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n }\n return;\n }\n\n if (toggle.tagName === 'SELECT') {\n // Set initial value\n toggle.value = this.state.preference;\n\n // Listen for changes\n const onChange = (e) => {\n this.setPreference(e.target.value);\n };\n toggle.addEventListener('change', onChange);\n toggle._fontToggleHandler = onChange;\n } else {\n // Button implementation - cycle through fonts\n const onClick = () => {\n const fontKeys = Object.keys(this.fonts);\n const currentIndex = fontKeys.indexOf(this.state.preference);\n const nextIndex = (currentIndex + 1) % fontKeys.length;\n this.setPreference(fontKeys[nextIndex]);\n };\n toggle.addEventListener('click', onClick);\n toggle._fontToggleHandler = onClick;\n }\n\n toggle.setAttribute('data-font-initialized', 'true');\n });\n },\n\n /**\n * Update all UI elements to reflect current state\n */\n updateUI: function() {\n const toggles = document.querySelectorAll('[data-toggle=\"font\"]');\n\n toggles.forEach(toggle => {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n } else {\n // Update button text if it has a label span\n const label = toggle.querySelector('.font-current-label');\n if (label) {\n label.textContent = this.fonts[this.state.preference].name;\n }\n }\n });\n },\n\n /**\n * Get the current font preference\n * @returns {string} Current font key\n */\n getCurrentFont: function() {\n return this.state.preference;\n },\n\n /**\n * Get font data for a given key\n * @param {string} fontKey - The font key\n * @returns {Object|null} Font data or null\n */\n getFontData: function(fontKey) {\n return this.fonts[fontKey] || null;\n },\n\n destroyAll: function() {\n const toggles = document.querySelectorAll('[data-toggle=\"font\"][data-font-initialized=\"true\"]');\n toggles.forEach(toggle => {\n if (toggle._fontToggleHandler) {\n const eventName = toggle.tagName === 'SELECT' ? 'change' : 'click';\n toggle.removeEventListener(eventName, toggle._fontToggleHandler);\n delete toggle._fontToggleHandler;\n }\n toggle.removeAttribute('data-font-initialized');\n });\n\n this.isInitialized = false;\n },\n\n getStorageValue: function(key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function(key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('fontSwitcher', FontSwitcher);\n }\n\n // Expose globally for convenience\n window.FontSwitcher = FontSwitcher;\n})();\n", "/**\n * Vanduo Framework - Grid Layout Component\n * Toggle between standard 12-column and Fibonacci grid modes\n * via data-layout-mode attribute and toggle buttons\n */\n\n(function () {\n 'use strict';\n\n const supportsHas = (function () {\n try {\n return CSS.supports('selector(:has(*))');\n } catch (_e) {\n return false;\n }\n })();\n\n /**\n * Grid Layout Component\n */\n const GridLayout = {\n instances: new Map(),\n\n /**\n * Initialize all grid layout containers\n */\n init: function () {\n const containers = document.querySelectorAll('[data-layout-mode]');\n\n containers.forEach(function (container) {\n if (this.instances.has(container)) {\n return;\n }\n this.initContainer(container);\n }.bind(this));\n\n this.initToggleButtons();\n },\n\n /**\n * Initialize a single grid container\n * @param {HTMLElement} container - Element with data-layout-mode\n */\n initContainer: function (container) {\n const mode = container.getAttribute('data-layout-mode') || 'standard';\n const cleanupFunctions = [];\n\n this.applyMode(container, mode);\n\n container.setAttribute('role', 'region');\n container.setAttribute('aria-label', 'Grid layout: ' + mode + ' mode');\n\n this.instances.set(container, {\n cleanup: cleanupFunctions,\n mode: mode\n });\n },\n\n /**\n * Initialize toggle buttons that target grid containers\n */\n initToggleButtons: function () {\n const toggleButtons = document.querySelectorAll('[data-grid-toggle]');\n\n toggleButtons.forEach(function (button) {\n if (button.getAttribute('data-grid-initialized') === 'true') {\n return;\n }\n\n const clickHandler = function (e) {\n e.preventDefault();\n const targetSelector = button.getAttribute('data-grid-toggle');\n let target;\n\n if (targetSelector) {\n target = document.querySelector(targetSelector);\n } else {\n target = button.closest('[data-layout-mode]');\n }\n\n if (target) {\n this.toggle(target);\n }\n }.bind(this);\n\n button.addEventListener('click', clickHandler);\n button.setAttribute('data-grid-initialized', 'true');\n button.setAttribute('aria-pressed', 'false');\n\n button._gridCleanup = function () {\n button.removeEventListener('click', clickHandler);\n button.removeAttribute('data-grid-initialized');\n button.removeAttribute('aria-pressed');\n };\n }.bind(this));\n },\n\n /**\n * Apply Fibonacci grid-template-columns inline for browsers without :has()\n * @param {HTMLElement} container - Grid container\n */\n applyFibFallback: function (container) {\n if (supportsHas) return;\n\n const rows = container.querySelectorAll('.vd-row, .row');\n rows.forEach(function (row) {\n const cols = row.querySelectorAll(':scope > [class*=\"vd-col-\"], :scope > [class*=\"col-\"]');\n const count = cols.length;\n\n if (count === 1) {\n row.style.gridTemplateColumns = '1fr';\n } else if (count === 2) {\n row.style.gridTemplateColumns = '1fr 1.618fr';\n } else if (count === 3) {\n row.style.gridTemplateColumns = '2fr 3fr 5fr';\n } else if (count === 4) {\n row.style.gridTemplateColumns = '1fr 2fr 3fr 5fr';\n } else {\n row.style.gridTemplateColumns = 'repeat(' + count + ', 1fr)';\n }\n });\n },\n\n /**\n * Remove inline grid-template-columns fallback\n * @param {HTMLElement} container - Grid container\n */\n removeFibFallback: function (container) {\n const rows = container.querySelectorAll('.vd-row, .row');\n rows.forEach(function (row) {\n row.style.gridTemplateColumns = '';\n });\n },\n\n /**\n * Apply a layout mode to a container\n * @param {HTMLElement} container - Target container\n * @param {string} mode - 'fibonacci' or 'standard'\n */\n applyMode: function (container, mode) {\n container.classList.remove('vd-grid-standard', 'vd-grid-fibonacci');\n\n if (mode === 'fibonacci') {\n container.classList.add('vd-grid-fibonacci');\n this.applyFibFallback(container);\n } else {\n container.classList.add('vd-grid-standard');\n this.removeFibFallback(container);\n }\n\n container.setAttribute('data-layout-mode', mode);\n container.setAttribute('aria-label', 'Grid layout: ' + mode + ' mode');\n\n // Update associated toggle button states\n const toggleButtons = document.querySelectorAll('[data-grid-toggle]');\n toggleButtons.forEach(function (btn) {\n const targetSelector = btn.getAttribute('data-grid-toggle');\n if (targetSelector && container.matches(targetSelector)) {\n const isActive = (mode === 'fibonacci');\n if (isActive) {\n btn.classList.add('is-active');\n } else {\n btn.classList.remove('is-active');\n }\n btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');\n }\n });\n\n // Store mode in instance\n const instance = this.instances.get(container);\n if (instance) {\n instance.mode = mode;\n }\n\n // Dispatch custom event\n let event;\n try {\n event = new CustomEvent('grid:modechange', {\n bubbles: true,\n detail: {\n container: container,\n mode: mode\n }\n });\n } catch (_e) {\n event = document.createEvent('CustomEvent');\n event.initCustomEvent('grid:modechange', true, true, {\n container: container,\n mode: mode\n });\n }\n container.dispatchEvent(event);\n },\n\n /**\n * Toggle between standard and fibonacci modes\n * @param {HTMLElement|string} container - Container element or selector\n */\n toggle: function (container) {\n if (typeof container === 'string') {\n container = document.querySelector(container);\n }\n if (!container) return;\n\n const currentMode = container.getAttribute('data-layout-mode') || 'standard';\n const newMode = (currentMode === 'fibonacci') ? 'standard' : 'fibonacci';\n this.applyMode(container, newMode);\n },\n\n /**\n * Set a specific mode\n * @param {HTMLElement|string} container - Container element or selector\n * @param {string} mode - 'fibonacci' or 'standard'\n */\n setMode: function (container, mode) {\n if (typeof container === 'string') {\n container = document.querySelector(container);\n }\n if (!container) return;\n if (mode !== 'fibonacci' && mode !== 'standard') return;\n\n this.applyMode(container, mode);\n },\n\n /**\n * Get the current mode of a container\n * @param {HTMLElement|string} container - Container element or selector\n * @returns {string|null} Current mode or null\n */\n getMode: function (container) {\n if (typeof container === 'string') {\n container = document.querySelector(container);\n }\n if (!container) return null;\n return container.getAttribute('data-layout-mode') || 'standard';\n },\n\n /**\n * Destroy a single grid layout instance\n * @param {HTMLElement} container - Grid container\n */\n destroy: function (container) {\n const instance = this.instances.get(container);\n if (!instance) return;\n\n instance.cleanup.forEach(function (fn) { fn(); });\n container.classList.remove('vd-grid-standard', 'vd-grid-fibonacci');\n container.removeAttribute('aria-label');\n this.removeFibFallback(container);\n this.instances.delete(container);\n },\n\n /**\n * Destroy all grid layout instances and clean up toggle buttons\n */\n destroyAll: function () {\n this.instances.forEach(function (instance, container) {\n this.destroy(container);\n }.bind(this));\n\n const toggleButtons = document.querySelectorAll('[data-grid-initialized=\"true\"]');\n toggleButtons.forEach(function (button) {\n if (button._gridCleanup) {\n button._gridCleanup();\n delete button._gridCleanup;\n }\n });\n }\n };\n\n // Register with Vanduo framework\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('gridLayout', GridLayout);\n }\n\n // Expose globally\n window.VanduoGridLayout = GridLayout;\n\n})();\n", "/**\n * Vanduo Framework - Image Box Component\n * Lightbox-style image enlargement with smooth transitions\n * \n * Features:\n * - Click to enlarge images with data-image-box attribute\n * - Smooth scale and opacity transitions\n * - Dismiss via click, ESC key, or scroll\n * - Magnifying glass cursor on hover\n * - Accessible with ARIA attributes\n * - Reduced motion support\n */\n\n(function () {\n 'use strict';\n\n /**\n * Image Box Component\n */\n const ImageBox = {\n backdrop: null,\n container: null,\n img: null,\n closeBtn: null,\n caption: null,\n currentTrigger: null,\n scrollThreshold: 50,\n initialScrollY: 0,\n isOpen: false,\n\n // Store cleanup functions for event listeners\n _cleanupFunctions: [],\n\n /**\n * Initialize Image Box component\n */\n init: function () {\n this.createBackdrop();\n this.bindTriggers();\n },\n\n /**\n * Create backdrop elements\n */\n createBackdrop: function () {\n // Prevent duplicate backdrop creation\n if (this.backdrop || document.querySelector('.vd-image-box-backdrop')) {\n // If backdrop already exists in DOM, reuse it\n if (!this.backdrop) {\n this.backdrop = document.querySelector('.vd-image-box-backdrop');\n this.container = this.backdrop.querySelector('.vd-image-box-container');\n this.img = this.backdrop.querySelector('.vd-image-box-img');\n this.closeBtn = this.backdrop.querySelector('.vd-image-box-close');\n this.caption = this.backdrop.querySelector('.vd-image-box-caption');\n this.bindBackdropEvents();\n }\n return;\n }\n\n // Create backdrop\n this.backdrop = document.createElement('div');\n this.backdrop.className = 'vd-image-box-backdrop';\n this.backdrop.setAttribute('role', 'dialog');\n this.backdrop.setAttribute('aria-modal', 'true');\n this.backdrop.setAttribute('aria-label', 'Image viewer');\n this.backdrop.setAttribute('tabindex', '-1');\n\n // Create container\n this.container = document.createElement('div');\n this.container.className = 'vd-image-box-container';\n\n // Create image\n this.img = document.createElement('img');\n this.img.className = 'vd-image-box-img';\n this.img.alt = '';\n\n // Create close button\n this.closeBtn = document.createElement('button');\n this.closeBtn.className = 'vd-image-box-close';\n this.closeBtn.setAttribute('aria-label', 'Close image viewer');\n this.closeBtn.innerHTML = '×';\n\n // Create caption element\n this.caption = document.createElement('div');\n this.caption.className = 'vd-image-box-caption';\n\n // Assemble\n this.container.appendChild(this.img);\n this.backdrop.appendChild(this.closeBtn);\n this.backdrop.appendChild(this.container);\n this.backdrop.appendChild(this.caption);\n document.body.appendChild(this.backdrop);\n\n // Bind backdrop events\n this.bindBackdropEvents();\n },\n\n /**\n * Bind events to backdrop elements\n */\n bindBackdropEvents: function () {\n const self = this;\n\n // Close on backdrop click (but not when clicking the image)\n const backdropClickHandler = function (e) {\n if (e.target === self.backdrop || e.target === self.container) {\n self.close();\n }\n };\n this.backdrop.addEventListener('click', backdropClickHandler);\n this._cleanupFunctions.push(() => this.backdrop.removeEventListener('click', backdropClickHandler));\n\n // Close on image click\n const imgClickHandler = function () {\n self.close();\n };\n this.img.addEventListener('click', imgClickHandler);\n this._cleanupFunctions.push(() => this.img.removeEventListener('click', imgClickHandler));\n\n // Close on close button click\n const closeBtnHandler = function () {\n self.close();\n };\n this.closeBtn.addEventListener('click', closeBtnHandler);\n this._cleanupFunctions.push(() => this.closeBtn.removeEventListener('click', closeBtnHandler));\n\n // ESC key handler\n const escHandler = function (e) {\n if (e.key === 'Escape' && self.isOpen) {\n self.close();\n }\n };\n document.addEventListener('keydown', escHandler);\n this._cleanupFunctions.push(() => document.removeEventListener('keydown', escHandler));\n\n // Scroll handler for dismissal\n const scrollHandler = function () {\n if (!self.isOpen) return;\n\n const currentScrollY = window.scrollY;\n const scrollDelta = Math.abs(currentScrollY - self.initialScrollY);\n\n if (scrollDelta > self.scrollThreshold) {\n self.close();\n }\n };\n window.addEventListener('scroll', scrollHandler, { passive: true });\n this._cleanupFunctions.push(() => window.removeEventListener('scroll', scrollHandler));\n },\n\n /**\n * Bind triggers to all images with data-image-box attribute\n */\n bindTriggers: function () {\n const self = this;\n const triggers = document.querySelectorAll('[data-image-box]');\n\n triggers.forEach(function (trigger) {\n // Skip if already initialized\n if (trigger.dataset.imageBoxInitialized) return;\n trigger.dataset.imageBoxInitialized = 'true';\n\n // Add trigger class\n trigger.classList.add('vd-image-box-trigger');\n\n // Handle broken images\n if (trigger.tagName === 'IMG') {\n // Check if already in error state\n if (trigger.complete && trigger.naturalWidth === 0) {\n trigger.classList.add('is-broken');\n }\n\n // Listen for error events\n const errorHandler = function () {\n trigger.classList.add('is-broken');\n };\n trigger.addEventListener('error', errorHandler);\n\n // Listen for successful load\n const loadHandler = function () {\n trigger.classList.remove('is-broken');\n };\n trigger.addEventListener('load', loadHandler);\n }\n\n // Bind click event\n const clickHandler = function (e) {\n e.preventDefault();\n self.open(trigger);\n };\n trigger.addEventListener('click', clickHandler);\n\n // Store cleanup\n trigger._imageBoxCleanup = () => trigger.removeEventListener('click', clickHandler);\n\n // Keyboard accessibility for non-button triggers\n if (trigger.tagName !== 'BUTTON' && trigger.tagName !== 'A') {\n trigger.setAttribute('role', 'button');\n trigger.setAttribute('tabindex', '0');\n trigger.setAttribute('aria-label', 'View enlarged image');\n\n const keyHandler = function (e) {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n self.open(trigger);\n }\n };\n trigger.addEventListener('keydown', keyHandler);\n\n const originalCleanup = trigger._imageBoxCleanup;\n trigger._imageBoxCleanup = () => {\n originalCleanup();\n trigger.removeEventListener('keydown', keyHandler);\n };\n }\n });\n },\n\n /**\n * Open image box\n * @param {HTMLElement} trigger - The trigger element\n */\n open: function (trigger) {\n if (this.isOpen) return;\n\n this.currentTrigger = trigger;\n this.isOpen = true;\n this.initialScrollY = window.scrollY;\n\n // Get image source - support dual images (thumbnail + full-size)\n // data-image-box-full-src takes precedence for the lightbox\n const imgSrc = trigger.dataset.imageBoxFullSrc ||\n trigger.dataset.imageBoxSrc ||\n trigger.src ||\n trigger.href;\n\n if (!imgSrc) {\n console.warn('[Vanduo ImageBox] No image source found for trigger:', trigger);\n return;\n }\n\n // Get caption\n const captionText = trigger.dataset.imageBoxCaption || trigger.alt || '';\n\n // Set image source\n this.img.src = imgSrc;\n this.img.alt = trigger.alt || '';\n\n // Set caption\n if (captionText) {\n this.caption.textContent = captionText;\n this.caption.style.display = 'block';\n } else {\n this.caption.style.display = 'none';\n }\n\n // Calculate scrollbar width and lock body scroll\n const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n document.body.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);\n document.body.classList.add('body-image-box-open');\n\n // Show backdrop\n this.backdrop.classList.add('is-visible');\n\n // Focus management\n this.backdrop.focus();\n\n // Dispatch event\n trigger.dispatchEvent(new CustomEvent('imageBox:open', {\n bubbles: true,\n detail: { src: imgSrc }\n }));\n\n // Handle image load\n if (!this.img.complete) {\n this.img.style.opacity = '0';\n this._imgLoadHandler = () => {\n this.img.style.opacity = '';\n };\n this.img.addEventListener('load', this._imgLoadHandler, { once: true });\n }\n },\n\n /**\n * Close image box\n */\n close: function () {\n if (!this.isOpen) return;\n\n this.isOpen = false;\n\n // Hide backdrop\n this.backdrop.classList.remove('is-visible');\n\n // Unlock body scroll\n document.body.classList.remove('body-image-box-open');\n document.body.style.removeProperty('--scrollbar-width');\n\n // Return focus to trigger\n if (this.currentTrigger) {\n this.currentTrigger.focus();\n this.currentTrigger.dispatchEvent(new CustomEvent('imageBox:close', { bubbles: true }));\n this.currentTrigger = null;\n }\n\n // Clear image after transition\n setTimeout(() => {\n if (!this.isOpen) {\n // Clean up load handler if still pending\n if (this._imgLoadHandler) {\n this.img.removeEventListener('load', this._imgLoadHandler);\n this._imgLoadHandler = null;\n }\n this.img.src = '';\n this.img.alt = '';\n }\n }, 300);\n },\n\n /**\n * Reinitialize - useful after dynamic DOM changes\n */\n reinit: function () {\n this.bindTriggers();\n },\n\n /**\n * Destroy component and clean up\n */\n destroy: function () {\n // Close if open\n if (this.isOpen) {\n this.close();\n }\n\n // Remove backdrop\n if (this.backdrop && this.backdrop.parentNode) {\n this.backdrop.parentNode.removeChild(this.backdrop);\n }\n\n // Run cleanup functions\n this._cleanupFunctions.forEach(fn => fn());\n this._cleanupFunctions = [];\n\n // Remove trigger bindings\n const triggers = document.querySelectorAll('[data-image-box-initialized]');\n triggers.forEach(trigger => {\n trigger.classList.remove('vd-image-box-trigger');\n if (trigger._imageBoxCleanup) {\n trigger._imageBoxCleanup();\n delete trigger._imageBoxCleanup;\n }\n delete trigger.dataset.imageBoxInitialized;\n });\n\n this.backdrop = null;\n this.container = null;\n this.img = null;\n this.closeBtn = null;\n this.caption = null;\n this.currentTrigger = null;\n this.isOpen = false;\n },\n\n destroyAll: function () {\n this.destroy();\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('imageBox', ImageBox);\n }\n\n // Expose globally\n window.VanduoImageBox = ImageBox;\n\n})();\n", "/**\n * Vanduo Framework - Modals Component\n * JavaScript functionality for modal dialogs\n */\n\n(function () {\n 'use strict';\n\n /**\n * Modals Component\n */\n const Modals = {\n modals: new Map(),\n openModals: [],\n zIndexCounter: 1050,\n\n // Store trigger cleanup functions\n _triggerCleanups: [],\n // Shared ESC key handler (installed once)\n _sharedEscHandler: null,\n\n /**\n * Initialize modals\n */\n init: function () {\n const modals = document.querySelectorAll('.vd-modal');\n\n modals.forEach(modal => {\n if (this.modals.has(modal)) {\n return;\n }\n this.initModal(modal);\n });\n\n // Handle data-modal triggers\n const triggers = document.querySelectorAll('[data-modal]');\n triggers.forEach(trigger => {\n if (trigger.dataset.modalTriggerInitialized) return;\n trigger.dataset.modalTriggerInitialized = 'true';\n\n const triggerClickHandler = (e) => {\n e.preventDefault();\n const modalId = trigger.dataset.modal;\n const modal = document.querySelector(modalId);\n if (modal) {\n this.open(modal);\n }\n };\n trigger.addEventListener('click', triggerClickHandler);\n this._triggerCleanups.push(() => trigger.removeEventListener('click', triggerClickHandler));\n });\n },\n\n /**\n * Initialize a single modal\n * @param {HTMLElement} modal - Modal element\n */\n initModal: function (modal) {\n const backdrop = this.createBackdrop(modal);\n const closeButtons = modal.querySelectorAll('.vd-modal-close, [data-dismiss=\"modal\"]');\n const dialog = modal.querySelector('.vd-modal-dialog');\n\n if (!dialog) {\n return;\n }\n\n const cleanupFunctions = [];\n\n // Set ARIA attributes\n modal.setAttribute('role', 'dialog');\n modal.setAttribute('aria-modal', 'true');\n modal.setAttribute('aria-hidden', 'true');\n\n // Generate ID if not exists\n if (!modal.id) {\n modal.id = 'modal-' + Math.random().toString(36).substr(2, 9);\n }\n\n // Set aria-labelledby\n const title = modal.querySelector('.vd-modal-title');\n if (title && !title.id) {\n title.id = modal.id + '-title';\n modal.setAttribute('aria-labelledby', title.id);\n }\n\n // Close button handlers\n closeButtons.forEach(button => {\n const closeHandler = () => {\n this.close(modal);\n };\n button.addEventListener('click', closeHandler);\n cleanupFunctions.push(() => button.removeEventListener('click', closeHandler));\n });\n\n // Backdrop click handler\n const backdropClickHandler = (e) => {\n if (e.target === backdrop && modal.dataset.backdrop !== 'static') {\n this.close(modal);\n }\n };\n backdrop.addEventListener('click', backdropClickHandler);\n cleanupFunctions.push(() => backdrop.removeEventListener('click', backdropClickHandler));\n\n // ESC key handler \u2014 use a single shared handler instead of one-per-modal\n if (!this._sharedEscHandler) {\n this._sharedEscHandler = (e) => {\n if (e.key === 'Escape' && this.openModals.length > 0) {\n const topModal = this.openModals[this.openModals.length - 1];\n if (topModal.dataset.keyboard !== 'false') {\n this.close(topModal);\n }\n }\n };\n document.addEventListener('keydown', this._sharedEscHandler);\n }\n\n this.modals.set(modal, { backdrop, dialog, trapHandler: null, cleanup: cleanupFunctions });\n },\n\n /**\n * Create backdrop element\n * @param {HTMLElement} modal - Modal element\n * @returns {HTMLElement} Backdrop element\n */\n createBackdrop: function (modal) {\n let backdrop = modal.querySelector('.vd-modal-backdrop');\n\n if (!backdrop) {\n backdrop = document.createElement('div');\n backdrop.className = 'vd-modal-backdrop';\n document.body.appendChild(backdrop);\n }\n\n return backdrop;\n },\n\n /**\n * Open modal\n * @param {HTMLElement|string} modal - Modal element or selector\n */\n open: function (modal) {\n const el = typeof modal === 'string' ? document.querySelector(modal) : modal;\n\n if (!el) {\n console.warn('[Vanduo Modals] Modal element not found:', modal);\n return;\n }\n\n if (!this.modals.has(el)) {\n console.warn('[Vanduo Modals] Modal not initialized:', el);\n return;\n }\n\n const modalData = this.modals.get(el);\n const { backdrop, dialog: _dialog } = modalData;\n\n // Increment z-index for stacking\n this.zIndexCounter += 10;\n el.style.zIndex = this.zIndexCounter;\n backdrop.style.zIndex = this.zIndexCounter - 1;\n\n // Add to open modals stack\n this.openModals.push(el);\n\n // Show backdrop\n backdrop.classList.add('is-visible');\n\n // Show modal\n el.classList.add('is-open');\n el.setAttribute('aria-hidden', 'false');\n\n // Lock body scroll\n if (this.openModals.length === 1) {\n document.body.classList.add('body-modal-open');\n const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n if (scrollbarWidth > 0) {\n document.body.style.paddingRight = `${scrollbarWidth}px`;\n }\n }\n\n // Focus trap (store handler for cleanup)\n const trapHandler = this.trapFocus(el);\n modalData.trapHandler = trapHandler;\n\n // Auto-focus first focusable element\n setTimeout(() => {\n const firstFocusable = this.getFocusableElements(el)[0];\n if (firstFocusable) {\n firstFocusable.focus();\n }\n }, 100);\n\n // Dispatch event\n el.dispatchEvent(new CustomEvent('modal:open', { bubbles: true }));\n },\n\n /**\n * Close modal\n * @param {HTMLElement|string} modal - Modal element or selector\n */\n close: function (modal) {\n const el = typeof modal === 'string' ? document.querySelector(modal) : modal;\n\n if (!el) {\n console.warn('[Vanduo Modals] Modal element not found:', modal);\n return;\n }\n\n if (!this.modals.has(el)) {\n console.warn('[Vanduo Modals] Modal not initialized:', el);\n return;\n }\n\n const modalData = this.modals.get(el);\n const { backdrop, trapHandler } = modalData;\n\n // Remove focus trap event listener to prevent memory leak\n if (trapHandler) {\n el.removeEventListener('keydown', trapHandler);\n modalData.trapHandler = null;\n }\n\n // Remove from open modals stack\n const index = this.openModals.indexOf(el);\n if (index > -1) {\n this.openModals.splice(index, 1);\n }\n\n // Hide modal\n el.classList.remove('is-open');\n el.setAttribute('aria-hidden', 'true');\n\n // Hide backdrop if no other modals open\n if (this.openModals.length === 0) {\n backdrop.classList.remove('is-visible');\n document.body.classList.remove('body-modal-open');\n document.body.style.paddingRight = '';\n // Reset z-index counter to prevent indefinite growth\n this.zIndexCounter = 1050;\n } else {\n // Show backdrop for top modal\n const topModal = this.openModals[this.openModals.length - 1];\n const topBackdrop = this.modals.get(topModal).backdrop;\n topBackdrop.classList.add('is-visible');\n }\n\n // Return focus to trigger\n const trigger = document.querySelector(`[data-modal=\"#${el.id}\"]`);\n if (trigger) {\n trigger.focus();\n }\n\n // Dispatch event\n el.dispatchEvent(new CustomEvent('modal:close', { bubbles: true }));\n },\n\n /**\n * Trap focus within modal\n * @param {HTMLElement} modal - Modal element\n * @returns {Function} The trap handler function for cleanup\n */\n trapFocus: function (modal) {\n const self = this;\n\n const trapHandler = function (e) {\n if (e.key !== 'Tab') {\n return;\n }\n\n const focusableElements = self.getFocusableElements(modal);\n const firstElement = focusableElements[0];\n const lastElement = focusableElements[focusableElements.length - 1];\n\n if (e.shiftKey) {\n // Shift + Tab\n if (document.activeElement === firstElement) {\n e.preventDefault();\n lastElement.focus();\n }\n } else {\n // Tab\n if (document.activeElement === lastElement) {\n e.preventDefault();\n firstElement.focus();\n }\n }\n };\n\n modal.addEventListener('keydown', trapHandler);\n return trapHandler;\n },\n\n /**\n * Get focusable elements within modal\n * @param {HTMLElement} modal - Modal element\n * @returns {Array} Focusable elements\n */\n getFocusableElements: function (modal) {\n const selector = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n return Array.from(modal.querySelectorAll(selector)).filter(el => {\n return !el.hasAttribute('disabled') &&\n el.offsetWidth > 0 &&\n el.offsetHeight > 0;\n });\n },\n\n /**\n * Toggle modal\n * @param {HTMLElement|string} modal - Modal element or selector\n */\n toggle: function (modal) {\n const el = typeof modal === 'string' ? document.querySelector(modal) : modal;\n if (el) {\n if (el.classList.contains('is-open')) {\n this.close(el);\n } else {\n this.open(el);\n }\n }\n },\n\n /**\n * Destroy a modal instance and clean up event listeners\n * @param {HTMLElement} modal - Modal element\n */\n destroy: function (modal) {\n const modalData = this.modals.get(modal);\n if (!modalData) return;\n\n // Close if open\n if (modal.classList.contains('is-open')) {\n this.close(modal);\n }\n\n // Run all cleanup functions\n if (modalData.cleanup) {\n modalData.cleanup.forEach(fn => fn());\n }\n\n // Remove created backdrop\n if (modalData.backdrop && modalData.backdrop.parentNode) {\n modalData.backdrop.parentNode.removeChild(modalData.backdrop);\n }\n\n this.modals.delete(modal);\n },\n\n /**\n * Destroy all modal instances\n */\n destroyAll: function () {\n this.modals.forEach((data, modal) => {\n this.destroy(modal);\n });\n // Clean up trigger listeners\n this._triggerCleanups.forEach(fn => fn());\n this._triggerCleanups = [];\n // Remove shared ESC handler\n if (this._sharedEscHandler) {\n document.removeEventListener('keydown', this._sharedEscHandler);\n this._sharedEscHandler = null;\n }\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('modals', Modals);\n }\n\n // Expose globally\n window.VanduoModals = Modals;\n\n})();\n\n", "/**\n * Vanduo Framework - Navbar Component\n * JavaScript functionality for navbar mobile menu\n */\n\n(function () {\n 'use strict';\n\n /**\n * Navbar Component\n */\n const Navbar = {\n // Store initialized navbars and their cleanup functions\n instances: new Map(),\n\n /**\n * Get the breakpoint value from CSS variable or use fallback\n * @returns {number} Breakpoint in pixels\n */\n getBreakpoint: function () {\n const root = getComputedStyle(document.documentElement);\n const breakpointValue = root.getPropertyValue('--breakpoint-lg').trim();\n\n // Parse the value (could be \"992px\" or just \"992\")\n const parsed = parseInt(breakpointValue, 10);\n return isNaN(parsed) ? 992 : parsed;\n },\n\n /**\n * Initialize navbar component\n */\n init: function () {\n const navbars = document.querySelectorAll('.vd-navbar');\n\n navbars.forEach(navbar => {\n // Skip if already initialized\n if (this.instances.has(navbar)) {\n return;\n }\n this.initNavbar(navbar);\n });\n },\n\n /**\n * Initialize scroll-aware glass/transparent behaviour for a navbar.\n * Adds/removes `.vd-navbar-scrolled` when the page scrolls past a threshold.\n * Threshold: `data-scroll-threshold` attribute (px) or the navbar's own height.\n * @param {HTMLElement} navbar - Navbar element\n * @returns {Function|null} Cleanup function, or null if not applicable\n */\n initScrollWatcher: function (navbar) {\n const isGlass = navbar.classList.contains('vd-navbar-glass');\n const isTransparent = navbar.classList.contains('vd-navbar-transparent');\n\n if (!isGlass && !isTransparent) {\n return null;\n }\n\n const getThreshold = () => {\n const attr = parseInt(navbar.dataset.scrollThreshold, 10);\n return isNaN(attr) ? (navbar.offsetHeight || 60) : attr;\n };\n\n const onScroll = () => {\n const scrolled = window.scrollY > getThreshold();\n navbar.classList.toggle('vd-navbar-scrolled', scrolled);\n };\n\n onScroll(); // set initial state without waiting for first scroll\n window.addEventListener('scroll', onScroll, { passive: true });\n\n return () => window.removeEventListener('scroll', onScroll);\n },\n\n /**\n * Initialize a single navbar\n * @param {HTMLElement} navbar - Navbar element\n */\n initNavbar: function (navbar) {\n const toggle = navbar.querySelector('.vd-navbar-toggle, .vd-navbar-burger');\n const menu = navbar.querySelector('.vd-navbar-menu');\n const overlay = navbar.querySelector('.vd-navbar-overlay') || this.createOverlay(navbar);\n\n // Store cleanup functions for this navbar instance\n const cleanupFunctions = [];\n\n // Wire up scroll-aware glass/transparent behaviour regardless of mobile menu\n const scrollWatcherCleanup = this.initScrollWatcher(navbar);\n if (scrollWatcherCleanup) {\n cleanupFunctions.push(scrollWatcherCleanup);\n }\n\n if (!toggle || !menu) {\n // Still store the instance so scroll-watcher cleanup is tracked\n if (cleanupFunctions.length) {\n this.instances.set(navbar, { toggle: null, menu: null, overlay: null, cleanup: cleanupFunctions });\n }\n return;\n }\n\n // Toggle menu on button click\n const toggleClickHandler = (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggleMenu(navbar, toggle, menu, overlay);\n };\n toggle.addEventListener('click', toggleClickHandler);\n cleanupFunctions.push(() => toggle.removeEventListener('click', toggleClickHandler));\n\n // Close menu on overlay click\n if (overlay) {\n const overlayClickHandler = () => {\n this.closeMenu(navbar, toggle, menu, overlay);\n };\n overlay.addEventListener('click', overlayClickHandler);\n cleanupFunctions.push(() => overlay.removeEventListener('click', overlayClickHandler));\n }\n\n // Close menu on escape key\n const keydownHandler = (e) => {\n if (e.key === 'Escape' && menu.classList.contains('is-open')) {\n this.closeMenu(navbar, toggle, menu, overlay);\n }\n };\n document.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => document.removeEventListener('keydown', keydownHandler));\n\n // Close menu on window resize (if resizing to desktop)\n let resizeTimer;\n const resizeHandler = () => {\n clearTimeout(resizeTimer);\n resizeTimer = setTimeout(() => {\n const breakpoint = this.getBreakpoint();\n if (window.innerWidth >= breakpoint && menu.classList.contains('is-open')) {\n this.closeMenu(navbar, toggle, menu, overlay);\n }\n }, 250);\n };\n window.addEventListener('resize', resizeHandler);\n cleanupFunctions.push(() => {\n clearTimeout(resizeTimer);\n window.removeEventListener('resize', resizeHandler);\n });\n\n // Close menu when clicking outside\n const documentClickHandler = (e) => {\n if (menu.classList.contains('is-open') &&\n !navbar.contains(e.target) &&\n !menu.contains(e.target)) {\n this.closeMenu(navbar, toggle, menu, overlay);\n }\n };\n document.addEventListener('click', documentClickHandler);\n cleanupFunctions.push(() => document.removeEventListener('click', documentClickHandler));\n\n // Handle dropdown toggles in mobile menu\n const dropdownToggles = menu.querySelectorAll('.vd-navbar-dropdown > .vd-nav-link, .vd-navbar-dropdown > .nav-link');\n dropdownToggles.forEach(dropdownToggle => {\n const dropdownClickHandler = (e) => {\n const breakpoint = this.getBreakpoint();\n if (window.innerWidth < breakpoint) {\n e.preventDefault();\n const dropdown = dropdownToggle.parentElement;\n const dropdownMenu = dropdown.querySelector('.vd-navbar-dropdown-menu');\n\n if (dropdownMenu) {\n dropdownMenu.classList.toggle('is-open');\n }\n }\n };\n dropdownToggle.addEventListener('click', dropdownClickHandler);\n cleanupFunctions.push(() => dropdownToggle.removeEventListener('click', dropdownClickHandler));\n });\n\n // Store instance with cleanup functions\n this.instances.set(navbar, {\n toggle,\n menu,\n overlay,\n cleanup: cleanupFunctions\n });\n },\n\n /**\n * Destroy a navbar instance and clean up event listeners\n * @param {HTMLElement} navbar - Navbar element\n */\n destroy: function (navbar) {\n const instance = this.instances.get(navbar);\n if (!instance) {\n return;\n }\n\n // Run all cleanup functions\n instance.cleanup.forEach(fn => fn());\n\n // Remove created overlay if it exists\n if (instance.overlay && instance.overlay.parentNode) {\n instance.overlay.parentNode.removeChild(instance.overlay);\n }\n\n // Remove from instances map\n this.instances.delete(navbar);\n },\n\n /**\n * Destroy all navbar instances\n */\n destroyAll: function () {\n this.instances.forEach((instance, navbar) => {\n this.destroy(navbar);\n });\n },\n\n /**\n * Toggle mobile menu\n * @param {HTMLElement} navbar - Navbar element\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Menu element\n * @param {HTMLElement} overlay - Overlay element\n */\n toggleMenu: function (navbar, toggle, menu, overlay) {\n const isOpen = menu.classList.contains('is-open');\n\n if (isOpen) {\n this.closeMenu(navbar, toggle, menu, overlay);\n } else {\n this.openMenu(navbar, toggle, menu, overlay);\n }\n },\n\n /**\n * Open mobile menu\n * @param {HTMLElement} navbar - Navbar element\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Menu element\n * @param {HTMLElement} overlay - Overlay element\n */\n openMenu: function (navbar, toggle, menu, overlay) {\n menu.classList.add('is-open');\n toggle.classList.add('is-active');\n\n if (overlay) {\n overlay.classList.add('is-active');\n }\n\n // Prevent body scroll when menu is open (use class to avoid conflicts with modals)\n document.body.classList.add('body-navbar-open');\n\n // Set ARIA attributes\n toggle.setAttribute('aria-expanded', 'true');\n menu.setAttribute('aria-hidden', 'false');\n },\n\n /**\n * Close mobile menu\n * @param {HTMLElement} navbar - Navbar element\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Menu element\n * @param {HTMLElement} overlay - Overlay element\n */\n closeMenu: function (navbar, toggle, menu, overlay) {\n menu.classList.remove('is-open');\n toggle.classList.remove('is-active');\n\n if (overlay) {\n overlay.classList.remove('is-active');\n }\n\n // Restore body scroll\n document.body.classList.remove('body-navbar-open');\n\n // Close all dropdown menus\n const dropdownMenus = menu.querySelectorAll('.vd-navbar-dropdown-menu.is-open');\n dropdownMenus.forEach(dropdownMenu => {\n dropdownMenu.classList.remove('is-open');\n });\n\n // Set ARIA attributes\n toggle.setAttribute('aria-expanded', 'false');\n menu.setAttribute('aria-hidden', 'true');\n },\n\n /**\n * Create overlay element if it doesn't exist\n * @param {HTMLElement} navbar - Navbar element\n * @returns {HTMLElement} Overlay element\n */\n createOverlay: function (_navbar) {\n const overlay = document.createElement('div');\n overlay.className = 'vd-navbar-overlay';\n document.body.appendChild(overlay);\n return overlay;\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('navbar', Navbar);\n }\n\n // Expose globally\n window.VanduoNavbar = Navbar;\n\n})();\n", "/**\n * Vanduo Framework - Pagination Component\n * JavaScript functionality for dynamic pagination\n */\n\n(function() {\n 'use strict';\n\n /**\n * Pagination Component\n */\n const Pagination = {\n // Store initialized paginations and their cleanup functions\n instances: new Map(),\n\n /**\n * Initialize pagination components\n */\n init: function() {\n const paginations = document.querySelectorAll('.vd-pagination[data-pagination]');\n\n paginations.forEach(pagination => {\n if (this.instances.has(pagination)) {\n return;\n }\n this.initPagination(pagination);\n });\n },\n\n /**\n * Initialize a pagination\n * @param {HTMLElement} pagination - Pagination container\n */\n initPagination: function(pagination) {\n const totalPages = parseInt(pagination.dataset.totalPages) || 1;\n const currentPage = parseInt(pagination.dataset.currentPage) || 1;\n const maxVisible = parseInt(pagination.dataset.maxVisible) || 7;\n\n this.render(pagination, {\n totalPages: totalPages,\n currentPage: currentPage,\n maxVisible: maxVisible\n });\n\n // Handle clicks (event delegation)\n const clickHandler = (e) => {\n const link = e.target.closest('.vd-pagination-link');\n if (!link || link.closest('.vd-pagination-item.disabled') || link.closest('.vd-pagination-item.active')) {\n return;\n }\n\n e.preventDefault();\n\n const item = link.closest('.vd-pagination-item');\n const page = item.dataset.page;\n\n if (page) {\n this.goToPage(pagination, parseInt(page));\n } else if (item.classList.contains('pagination-prev')) {\n this.prevPage(pagination);\n } else if (item.classList.contains('pagination-next')) {\n this.nextPage(pagination);\n }\n };\n pagination.addEventListener('click', clickHandler);\n\n this.instances.set(pagination, {\n cleanup: [() => pagination.removeEventListener('click', clickHandler)]\n });\n },\n \n /**\n * Render pagination\n * @param {HTMLElement} pagination - Pagination container\n * @param {Object} options - Pagination options\n */\n render: function(pagination, options) {\n const { totalPages, currentPage, maxVisible } = options;\n \n if (totalPages <= 1) {\n pagination.innerHTML = '';\n return;\n }\n \n let html = '';\n \n // Previous button\n html += `
  • `;\n html += `Previous`;\n html += `
    • `;\n \n // Calculate page range\n const pages = this.calculatePages(currentPage, totalPages, maxVisible);\n \n // Page numbers\n let lastPage = 0;\n pages.forEach(page => {\n if (page === 'ellipsis') {\n html += `
  • \u2026
    • `;\n } else {\n if (page !== lastPage + 1 && lastPage > 0) {\n html += `
  • \u2026
    • `;\n }\n const safePage = Number(page);\n html += `
  • `;\n html += `${safePage}`;\n html += `
    • `;\n lastPage = page;\n }\n });\n \n // Next button\n html += `
  • `;\n html += `Next`;\n html += `
    • `;\n \n pagination.innerHTML = html;\n \n // Update data attributes\n pagination.dataset.currentPage = currentPage;\n },\n \n /**\n * Calculate which pages to show\n * @param {number} currentPage - Current page\n * @param {number} totalPages - Total pages\n * @param {number} maxVisible - Maximum visible pages\n * @returns {Array} Array of page numbers or 'ellipsis'\n */\n calculatePages: function(currentPage, totalPages, maxVisible) {\n const pages = [];\n const half = Math.floor(maxVisible / 2);\n \n if (totalPages <= maxVisible) {\n // Show all pages\n for (let i = 1; i <= totalPages; i++) {\n pages.push(i);\n }\n } else {\n // Always show first page\n pages.push(1);\n \n let start = Math.max(2, currentPage - half);\n let end = Math.min(totalPages - 1, currentPage + half);\n \n // Adjust if we're near the start\n if (currentPage <= half + 1) {\n end = Math.min(totalPages - 1, maxVisible - 1);\n }\n \n // Adjust if we're near the end\n if (currentPage >= totalPages - half) {\n start = Math.max(2, totalPages - maxVisible + 2);\n }\n \n // Add ellipsis before if needed\n if (start > 2) {\n pages.push('ellipsis');\n }\n \n // Add middle pages\n for (let i = start; i <= end; i++) {\n pages.push(i);\n }\n \n // Add ellipsis after if needed\n if (end < totalPages - 1) {\n pages.push('ellipsis');\n }\n \n // Always show last page\n if (totalPages > 1) {\n pages.push(totalPages);\n }\n }\n \n return pages;\n },\n \n /**\n * Go to specific page\n * @param {HTMLElement} pagination - Pagination container\n * @param {number} page - Page number\n */\n goToPage: function(pagination, page) {\n const totalPages = parseInt(pagination.dataset.totalPages) || 1;\n const maxVisible = parseInt(pagination.dataset.maxVisible) || 7;\n \n if (page < 1 || page > totalPages) {\n return;\n }\n \n this.render(pagination, {\n totalPages: totalPages,\n currentPage: page,\n maxVisible: maxVisible\n });\n \n // Dispatch event\n pagination.dispatchEvent(new CustomEvent('pagination:change', {\n bubbles: true,\n detail: { page, totalPages }\n }));\n },\n \n /**\n * Go to previous page\n * @param {HTMLElement} pagination - Pagination container\n */\n prevPage: function(pagination) {\n const currentPage = parseInt(pagination.dataset.currentPage) || 1;\n if (currentPage > 1) {\n this.goToPage(pagination, currentPage - 1);\n }\n },\n \n /**\n * Go to next page\n * @param {HTMLElement} pagination - Pagination container\n */\n nextPage: function(pagination) {\n const currentPage = parseInt(pagination.dataset.currentPage) || 1;\n const totalPages = parseInt(pagination.dataset.totalPages) || 1;\n if (currentPage < totalPages) {\n this.goToPage(pagination, currentPage + 1);\n }\n },\n \n /**\n * Update pagination\n * @param {HTMLElement|string} pagination - Pagination container or selector\n * @param {Object} options - Pagination options\n */\n update: function(pagination, options) {\n const el = typeof pagination === 'string' ? document.querySelector(pagination) : pagination;\n if (el) {\n if (options.totalPages !== undefined) {\n el.dataset.totalPages = options.totalPages;\n }\n if (options.currentPage !== undefined) {\n el.dataset.currentPage = options.currentPage;\n }\n if (options.maxVisible !== undefined) {\n el.dataset.maxVisible = options.maxVisible;\n }\n \n this.render(el, {\n totalPages: parseInt(el.dataset.totalPages) || 1,\n currentPage: parseInt(el.dataset.currentPage) || 1,\n maxVisible: parseInt(el.dataset.maxVisible) || 7\n });\n }\n },\n\n /**\n * Destroy a pagination instance and clean up event listeners\n * @param {HTMLElement} pagination - Pagination container\n */\n destroy: function(pagination) {\n const instance = this.instances.get(pagination);\n if (!instance) return;\n\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(pagination);\n },\n\n /**\n * Destroy all pagination instances\n */\n destroyAll: function() {\n this.instances.forEach((instance, pagination) => {\n this.destroy(pagination);\n });\n }\n };\n \n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('pagination', Pagination);\n }\n \n // Expose globally\n window.VanduoPagination = Pagination;\n \n})();\n\n", "/**\n * Vanduo Framework - Parallax Component\n * JavaScript functionality for parallax scroll effects\n */\n\n(function () {\n 'use strict';\n\n /**\n * Parallax Component\n */\n const Parallax = {\n parallaxElements: new Map(),\n ticking: false,\n isMobile: window.innerWidth < 768,\n reducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches,\n isInitialized: false,\n _onScroll: null,\n _onResize: null,\n\n /**\n * Initialize parallax components\n */\n init: function () {\n if (this.isInitialized) {\n this.refresh();\n return;\n }\n\n this.isInitialized = true;\n\n // Check for reduced motion preference\n if (this.reducedMotion) {\n return; // Don't initialize if user prefers reduced motion\n }\n\n const parallaxElements = document.querySelectorAll('.vd-parallax');\n\n parallaxElements.forEach(element => {\n if (!element.dataset.parallaxInitialized) {\n this.initParallax(element);\n }\n });\n\n // Handle scroll\n this.handleScroll();\n this._onScroll = () => {\n this.handleScroll();\n };\n window.addEventListener('scroll', this._onScroll, { passive: true });\n\n // Handle resize\n this._onResize = () => {\n this.isMobile = window.innerWidth < 768;\n this.updateAll();\n };\n window.addEventListener('resize', this._onResize);\n },\n\n /**\n * Initialize a parallax element\n * @param {HTMLElement} element - Parallax container\n */\n initParallax: function (element) {\n element.dataset.parallaxInitialized = 'true';\n\n // Check if disabled on mobile\n const disableMobile = element.classList.contains('parallax-disable-mobile');\n if (disableMobile && this.isMobile) {\n return;\n }\n\n const layers = element.querySelectorAll('.vd-parallax-layer, .vd-parallax-bg');\n const speed = this.getSpeed(element);\n const direction = element.classList.contains('parallax-horizontal') ? 'horizontal' : 'vertical';\n\n this.parallaxElements.set(element, {\n layers: Array.from(layers),\n speed: speed,\n direction: direction,\n disableMobile: disableMobile\n });\n\n // Initial update\n this.updateParallax(element);\n },\n\n /**\n * Get parallax speed from element\n * @param {HTMLElement} element - Parallax element\n * @returns {number} Speed multiplier\n */\n getSpeed: function (element) {\n if (element.classList.contains('parallax-slow')) {\n return 0.5;\n } else if (element.classList.contains('parallax-fast')) {\n return 1.5;\n }\n return 1; // Default medium speed\n },\n\n /**\n * Handle scroll event\n */\n handleScroll: function () {\n if (!this.ticking) {\n window.requestAnimationFrame(() => {\n this.updateAll();\n this.ticking = false;\n });\n this.ticking = true;\n }\n },\n\n /**\n * Update all parallax elements\n */\n updateAll: function () {\n this.parallaxElements.forEach((config, element) => {\n // Skip if disabled on mobile\n if (config.disableMobile && this.isMobile) {\n return;\n }\n\n this.updateParallax(element);\n });\n },\n\n /**\n * Update parallax for a single element\n * @param {HTMLElement} element - Parallax element\n */\n updateParallax: function (element) {\n const config = this.parallaxElements.get(element);\n if (!config) {\n return;\n }\n\n const rect = element.getBoundingClientRect();\n const windowHeight = window.innerHeight;\n const elementTop = rect.top;\n const elementHeight = rect.height;\n\n // Calculate scroll progress (0 to 1)\n const scrollProgress = Math.max(0, Math.min(1,\n (windowHeight - elementTop) / (windowHeight + elementHeight)\n ));\n\n // Calculate offset based on speed and direction\n const offset = (scrollProgress - 0.5) * config.speed * 100;\n\n config.layers.forEach((layer, _index) => {\n // Different layers can have different speeds\n const layerSpeed = layer.dataset.parallaxSpeed ? parseFloat(layer.dataset.parallaxSpeed) : 1;\n const layerOffset = offset * layerSpeed;\n\n if (config.direction === 'horizontal') {\n layer.style.transform = `translateX(${layerOffset}px)`;\n } else {\n layer.style.transform = `translateY(${layerOffset}px)`;\n }\n });\n },\n\n /**\n * Destroy parallax element\n * @param {HTMLElement|string} element - Parallax element or selector\n */\n destroy: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.parallaxElements.has(el)) {\n const config = this.parallaxElements.get(el);\n config.layers.forEach(layer => {\n layer.style.transform = '';\n });\n this.parallaxElements.delete(el);\n }\n },\n\n /**\n * Refresh parallax (recalculate positions)\n */\n refresh: function () {\n this.updateAll();\n },\n\n destroyAll: function () {\n this.parallaxElements.forEach((_config, element) => {\n this.destroy(element);\n });\n this.parallaxElements.clear();\n\n if (this._onScroll) {\n window.removeEventListener('scroll', this._onScroll);\n this._onScroll = null;\n }\n\n if (this._onResize) {\n window.removeEventListener('resize', this._onResize);\n this._onResize = null;\n }\n\n this.isInitialized = false;\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('parallax', Parallax);\n }\n\n // Expose globally\n window.VanduoParallax = Parallax;\n\n})();\n\n", "/**\n * Vanduo Framework - Preloader Component\n * JavaScript functionality for progress bars and loaders\n */\n\n(function() {\n 'use strict';\n\n /**\n * Preloader Component\n */\n const Preloader = {\n /**\n * Initialize preloader components\n */\n init: function() {\n const progressBars = document.querySelectorAll('.progress-bar[data-progress]');\n \n progressBars.forEach(bar => {\n if (!bar.dataset.progressInitialized) {\n this.initProgressBar(bar);\n }\n });\n },\n \n /**\n * Initialize a progress bar\n * @param {HTMLElement} bar - Progress bar element\n */\n initProgressBar: function(bar) {\n bar.dataset.progressInitialized = 'true';\n \n const initialValue = parseInt(bar.dataset.progress) || 0;\n this.setProgress(bar, initialValue, false);\n },\n \n /**\n * Set progress value\n * @param {HTMLElement|string} bar - Progress bar element or selector\n * @param {number} value - Progress value (0-100)\n * @param {boolean} animate - Whether to animate\n */\n setProgress: function(bar, value, animate = true) {\n const el = typeof bar === 'string' ? document.querySelector(bar) : bar;\n \n if (!el) {\n return;\n }\n \n // Clamp value between 0 and 100\n value = Math.max(0, Math.min(100, value));\n \n // Update width\n if (animate) {\n el.style.transition = 'width var(--transition-duration-slow) var(--transition-ease)';\n } else {\n el.style.transition = 'none';\n setTimeout(() => {\n el.style.transition = '';\n }, 0);\n }\n \n el.style.width = value + '%';\n el.setAttribute('aria-valuenow', value);\n el.setAttribute('aria-valuemin', 0);\n el.setAttribute('aria-valuemax', 100);\n \n // Update text if exists\n const text = el.querySelector('.progress-text');\n if (text) {\n text.textContent = value + '%';\n }\n \n // Dispatch event\n el.dispatchEvent(new CustomEvent('progress:update', {\n bubbles: true,\n detail: { value, max: 100 }\n }));\n \n // Complete event\n if (value >= 100) {\n el.dispatchEvent(new CustomEvent('progress:complete', {\n bubbles: true,\n detail: { value, max: 100 }\n }));\n }\n },\n \n /**\n * Animate progress from current to target\n * @param {HTMLElement|string} bar - Progress bar element or selector\n * @param {number} targetValue - Target progress value (0-100)\n * @param {number} duration - Animation duration in ms\n */\n animateProgress: function(bar, targetValue, duration = 1000) {\n const el = typeof bar === 'string' ? document.querySelector(bar) : bar;\n \n if (!el) {\n return;\n }\n \n const startValue = parseInt(el.style.width) || 0;\n const difference = targetValue - startValue;\n const startTime = performance.now();\n \n const animate = (currentTime) => {\n const elapsed = currentTime - startTime;\n const progress = Math.min(elapsed / duration, 1);\n \n // Easing function (ease-out)\n const easeOut = 1 - Math.pow(1 - progress, 3);\n const currentValue = startValue + (difference * easeOut);\n \n this.setProgress(el, currentValue, false);\n \n if (progress < 1) {\n requestAnimationFrame(animate);\n }\n };\n \n requestAnimationFrame(animate);\n },\n \n /**\n * Show preloader\n * @param {HTMLElement|string} preloader - Preloader element or selector\n */\n show: function(preloader) {\n const el = typeof preloader === 'string' ? document.querySelector(preloader) : preloader;\n if (el) {\n el.style.display = 'inline-block';\n el.setAttribute('aria-hidden', 'false');\n }\n },\n \n /**\n * Hide preloader\n * @param {HTMLElement|string} preloader - Preloader element or selector\n */\n hide: function(preloader) {\n const el = typeof preloader === 'string' ? document.querySelector(preloader) : preloader;\n if (el) {\n el.style.display = 'none';\n el.setAttribute('aria-hidden', 'true');\n }\n },\n \n /**\n * Toggle preloader\n * @param {HTMLElement|string} preloader - Preloader element or selector\n */\n toggle: function(preloader) {\n const el = typeof preloader === 'string' ? document.querySelector(preloader) : preloader;\n if (el) {\n if (el.style.display === 'none' || el.getAttribute('aria-hidden') === 'true') {\n this.show(el);\n } else {\n this.hide(el);\n }\n }\n },\n\n /**\n * Destroy all progress bar instances\n */\n destroyAll: function() {\n const progressBars = document.querySelectorAll('.progress-bar[data-progress-initialized=\"true\"]');\n progressBars.forEach(bar => {\n delete bar.dataset.progressInitialized;\n });\n }\n };\n \n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('preloader', Preloader);\n }\n \n // Expose globally\n window.VanduoPreloader = Preloader;\n \n})();\n\n", "/**\n * Vanduo Framework - Select Component\n * Custom select dropdown with enhanced functionality\n */\n\n(function () {\n 'use strict';\n\n /**\n * Select Component\n */\n const Select = {\n // Store initialized selects and their cleanup functions\n instances: new Map(),\n\n /**\n * Initialize select components\n */\n init: function () {\n const selects = document.querySelectorAll('select.vd-custom-select-input, select[data-custom-select]');\n\n selects.forEach(select => {\n if (this.instances.has(select)) {\n return;\n }\n this.initSelect(select);\n });\n },\n\n /**\n * Initialize a single select\n * @param {HTMLSelectElement} select - Select element\n */\n initSelect: function (select) {\n // Skip if already has custom wrapper\n if (select.closest('.vd-custom-select-wrapper')) {\n return;\n }\n\n const cleanupFunctions = [];\n\n // Create wrapper\n const wrapper = document.createElement('div');\n wrapper.className = 'custom-select-wrapper';\n select.parentNode.insertBefore(wrapper, select);\n wrapper.appendChild(select);\n\n // Create custom button\n const button = document.createElement('button');\n button.type = 'button';\n button.className = 'custom-select-button';\n button.setAttribute('aria-haspopup', 'listbox');\n button.setAttribute('aria-expanded', 'false');\n button.setAttribute('aria-labelledby', select.id || this.generateId(select));\n\n // Create dropdown\n const dropdown = document.createElement('div');\n dropdown.className = 'custom-select-dropdown';\n dropdown.setAttribute('role', 'listbox');\n\n // Create search input if searchable\n if (select.dataset.searchable === 'true') {\n const searchWrapper = document.createElement('div');\n searchWrapper.className = 'custom-select-search';\n const searchInput = document.createElement('input');\n searchInput.type = 'text';\n searchInput.className = 'input input-sm';\n searchInput.placeholder = 'Search...';\n searchInput.setAttribute('aria-label', 'Search options');\n searchWrapper.appendChild(searchInput);\n dropdown.appendChild(searchWrapper);\n\n const filterFn = (e) => {\n this.filterOptions(dropdown, e.target.value);\n };\n const searchHandler = typeof debounce === 'function' ? debounce(filterFn, 150) : filterFn;\n searchInput.addEventListener('input', searchHandler);\n cleanupFunctions.push(() => searchInput.removeEventListener('input', searchHandler));\n }\n\n // Build options\n this.buildOptions(select, dropdown, button);\n\n wrapper.appendChild(button);\n wrapper.appendChild(dropdown);\n\n // Update button text\n this.updateButtonText(select, button);\n\n // Event listeners\n const buttonClickHandler = (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggleDropdown(button, dropdown);\n };\n button.addEventListener('click', buttonClickHandler);\n cleanupFunctions.push(() => button.removeEventListener('click', buttonClickHandler));\n\n // Close on outside click\n const documentClickHandler = (e) => {\n if (!wrapper.contains(e.target) && dropdown.classList.contains('is-open')) {\n this.closeDropdown(button, dropdown);\n }\n };\n document.addEventListener('click', documentClickHandler);\n cleanupFunctions.push(() => document.removeEventListener('click', documentClickHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, select, button, dropdown);\n };\n button.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => button.removeEventListener('keydown', keydownHandler));\n\n // Update on select change\n const changeHandler = () => {\n this.updateButtonText(select, button);\n this.updateSelectedOptions(select, dropdown);\n };\n select.addEventListener('change', changeHandler);\n cleanupFunctions.push(() => select.removeEventListener('change', changeHandler));\n\n this.instances.set(select, { wrapper, button, dropdown, cleanup: cleanupFunctions, typeaheadBuffer: '', typeaheadTimer: null });\n },\n\n /**\n * Build options in dropdown\n * @param {HTMLSelectElement} select - Select element\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} button - Button element\n */\n buildOptions: function (select, dropdown, button) {\n const options = select.querySelectorAll('option');\n const fragment = document.createDocumentFragment();\n\n options.forEach((option, index) => {\n if (option.parentElement.tagName === 'OPTGROUP') {\n // Handle option groups\n const group = option.parentElement;\n if (!dropdown.querySelector(`[data-group=\"${group.label}\"]`)) {\n const groupElement = document.createElement('div');\n groupElement.className = 'custom-select-option-group';\n groupElement.textContent = group.label;\n groupElement.dataset.group = group.label;\n fragment.appendChild(groupElement);\n }\n }\n\n if (option.value === '' && !option.textContent.trim()) {\n return; // Skip empty options\n }\n\n const optionElement = document.createElement('div');\n optionElement.className = 'custom-select-option';\n optionElement.textContent = option.textContent;\n optionElement.setAttribute('role', 'option');\n optionElement.setAttribute('data-value', option.value);\n optionElement.setAttribute('data-index', index);\n\n if (option.selected) {\n optionElement.classList.add('is-selected');\n optionElement.setAttribute('aria-selected', 'true');\n }\n\n if (option.disabled) {\n optionElement.classList.add('is-disabled');\n optionElement.setAttribute('aria-disabled', 'true');\n }\n\n optionElement.addEventListener('click', (_e) => {\n if (!option.disabled) {\n this.selectOption(select, option, optionElement, button, dropdown);\n }\n });\n\n fragment.appendChild(optionElement);\n });\n\n dropdown.appendChild(fragment);\n },\n\n /**\n * Select an option\n * @param {HTMLSelectElement} select - Select element\n * @param {HTMLOptionElement} option - Option element\n * @param {HTMLElement} optionElement - Custom option element\n * @param {HTMLElement} button - Button element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n selectOption: function (select, option, optionElement, button, dropdown) {\n if (select.multiple) {\n // Multi-select\n option.selected = !option.selected;\n optionElement.classList.toggle('is-selected');\n optionElement.setAttribute('aria-selected', option.selected);\n } else {\n // Single select\n select.value = option.value;\n select.dispatchEvent(new Event('change', { bubbles: true }));\n this.closeDropdown(button, dropdown);\n }\n\n this.updateButtonText(select, button);\n },\n\n /**\n * Update button text\n * @param {HTMLSelectElement} select - Select element\n * @param {HTMLElement} button - Button element\n */\n updateButtonText: function (select, button) {\n if (select.multiple) {\n const selected = Array.from(select.selectedOptions);\n if (selected.length === 0) {\n button.textContent = select.dataset.placeholder || 'Select options...';\n } else if (selected.length === 1) {\n button.textContent = selected[0].textContent;\n } else {\n button.textContent = `${selected.length} selected`;\n }\n } else {\n const selectedOption = select.options[select.selectedIndex];\n button.textContent = selectedOption ? selectedOption.textContent : (select.dataset.placeholder || 'Select...');\n }\n },\n\n /**\n * Update selected options in dropdown\n * @param {HTMLSelectElement} select - Select element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n updateSelectedOptions: function (select, dropdown) {\n const options = dropdown.querySelectorAll('.custom-select-option');\n const selectedValues = Array.from(select.selectedOptions).map(opt => opt.value);\n\n options.forEach(optionEl => {\n const value = optionEl.dataset.value;\n if (selectedValues.includes(value)) {\n optionEl.classList.add('is-selected');\n optionEl.setAttribute('aria-selected', 'true');\n } else {\n optionEl.classList.remove('is-selected');\n optionEl.setAttribute('aria-selected', 'false');\n }\n });\n },\n\n /**\n * Toggle dropdown\n * @param {HTMLElement} button - Button element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n toggleDropdown: function (button, dropdown) {\n const isOpen = dropdown.classList.contains('is-open');\n\n if (isOpen) {\n this.closeDropdown(button, dropdown);\n } else {\n this.openDropdown(button, dropdown);\n }\n },\n\n /**\n * Open dropdown\n * @param {HTMLElement} button - Button element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n openDropdown: function (button, dropdown) {\n dropdown.classList.add('is-open');\n button.setAttribute('aria-expanded', 'true');\n\n // Focus first option\n const firstOption = dropdown.querySelector('.custom-select-option:not(.is-disabled)');\n if (firstOption) {\n firstOption.focus();\n }\n },\n\n /**\n * Close dropdown\n * @param {HTMLElement} button - Button element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n closeDropdown: function (button, dropdown) {\n dropdown.classList.remove('is-open');\n button.setAttribute('aria-expanded', 'false');\n },\n\n /**\n * Handle keyboard navigation\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLSelectElement} select - Select element\n * @param {HTMLElement} button - Button element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n handleKeydown: function (e, select, button, dropdown) {\n const isOpen = dropdown.classList.contains('is-open');\n const options = Array.from(dropdown.querySelectorAll('.custom-select-option:not(.is-disabled)'));\n const currentIndex = options.findIndex(opt => opt === document.activeElement);\n\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n if (isOpen && currentIndex >= 0) {\n const optionEl = options[currentIndex];\n const option = select.options[parseInt(optionEl.dataset.index)];\n this.selectOption(select, option, optionEl, button, dropdown);\n } else {\n this.openDropdown(button, dropdown);\n }\n break;\n\n case 'Escape':\n if (isOpen) {\n e.preventDefault();\n this.closeDropdown(button, dropdown);\n button.focus();\n }\n break;\n\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen) {\n this.openDropdown(button, dropdown);\n } else {\n const nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0;\n options[nextIndex].focus();\n }\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n if (isOpen) {\n const prevIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1;\n options[prevIndex].focus();\n }\n break;\n\n case 'Home':\n if (isOpen) {\n e.preventDefault();\n options[0].focus();\n }\n break;\n\n case 'End':\n if (isOpen) {\n e.preventDefault();\n options[options.length - 1].focus();\n }\n break;\n\n default:\n // Typeahead: jump to matching option when typing printable characters\n if (isOpen && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\n // Per-instance typeahead state to avoid cross-instance corruption\n const instance = this.instances.get(select);\n if (!instance) break;\n clearTimeout(instance.typeaheadTimer);\n instance.typeaheadBuffer += e.key.toLowerCase();\n\n const match = options.find(opt =>\n opt.textContent.trim().toLowerCase().startsWith(instance.typeaheadBuffer)\n );\n if (match) {\n match.focus();\n }\n\n instance.typeaheadTimer = setTimeout(() => {\n instance.typeaheadBuffer = '';\n }, 500);\n }\n break;\n }\n },\n\n /**\n * Filter options by search term\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {string} searchTerm - Search term\n */\n filterOptions: function (dropdown, searchTerm) {\n const options = dropdown.querySelectorAll('.vd-custom-select-option');\n const term = searchTerm.toLowerCase();\n\n options.forEach(option => {\n const text = option.textContent.toLowerCase();\n if (text.includes(term)) {\n option.style.display = 'block';\n } else {\n option.style.display = 'none';\n }\n });\n },\n\n /**\n * Generate unique ID\n * @param {HTMLElement} element - Element\n * @returns {string} Generated ID\n */\n generateId: function (element) {\n if (element.id) {\n return element.id;\n }\n const id = 'select-' + Math.random().toString(36).substr(2, 9);\n element.id = id;\n return id;\n },\n\n /**\n * Destroy a select instance and clean up event listeners\n * @param {HTMLSelectElement} select - Select element\n */\n destroy: function (select) {\n const instance = this.instances.get(select);\n if (!instance) return;\n\n instance.cleanup.forEach(fn => fn());\n\n // Unwrap the select element back to its original parent\n if (instance.wrapper && instance.wrapper.parentNode) {\n instance.wrapper.parentNode.insertBefore(select, instance.wrapper);\n instance.wrapper.parentNode.removeChild(instance.wrapper);\n }\n\n this.instances.delete(select);\n },\n\n /**\n * Destroy all select instances\n */\n destroyAll: function () {\n this.instances.forEach((instance, select) => {\n this.destroy(select);\n });\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('select', Select);\n }\n\n})();\n\n", "/**\n * Vanduo Framework - Sidenav Component\n * JavaScript functionality for side navigation drawer\n */\n\n(function() {\n 'use strict';\n\n /**\n * Sidenav Component\n */\n const Sidenav = {\n sidenavs: new Map(),\n breakpoint: 992, // Desktop breakpoint\n \n // Global cleanup functions (toggles, resize)\n _globalCleanups: [],\n\n isFixedVariant: function(sidenav) {\n return sidenav.classList.contains('vd-sidenav-fixed') || sidenav.classList.contains('sidenav-fixed');\n },\n\n isPushVariant: function(sidenav) {\n return sidenav.classList.contains('vd-sidenav-push') || sidenav.classList.contains('sidenav-push');\n },\n\n isRightVariant: function(sidenav) {\n return sidenav.classList.contains('vd-sidenav-right') || sidenav.classList.contains('sidenav-right');\n },\n\n /**\n * Initialize sidenav components\n */\n init: function() {\n const sidenavs = document.querySelectorAll('.vd-sidenav, .vd-offcanvas');\n\n sidenavs.forEach(sidenav => {\n if (this.sidenavs.has(sidenav)) {\n return;\n }\n this.initSidenav(sidenav);\n });\n\n // Handle toggle buttons\n const toggles = document.querySelectorAll('[data-sidenav-toggle]');\n toggles.forEach(toggle => {\n if (toggle.dataset.sidenavToggleInitialized) return;\n toggle.dataset.sidenavToggleInitialized = 'true';\n\n const toggleClickHandler = (e) => {\n e.preventDefault();\n const targetId = toggle.dataset.sidenavToggle;\n const sidenav = document.querySelector(targetId);\n if (sidenav) {\n this.toggle(sidenav);\n }\n };\n toggle.addEventListener('click', toggleClickHandler);\n this._globalCleanups.push(() => toggle.removeEventListener('click', toggleClickHandler));\n });\n\n // Handle responsive behavior\n this.handleResize();\n const resizeHandler = () => {\n this.handleResize();\n };\n window.addEventListener('resize', resizeHandler);\n this._globalCleanups.push(() => window.removeEventListener('resize', resizeHandler));\n },\n\n /**\n * Initialize a single sidenav\n * @param {HTMLElement} sidenav - Sidenav element\n */\n initSidenav: function(sidenav) {\n // Apply data-vd-position direction class if specified\n const position = sidenav.getAttribute('data-vd-position');\n if (position) {\n const prefix = sidenav.classList.contains('vd-offcanvas') ? 'vd-offcanvas' : 'vd-sidenav';\n sidenav.classList.add(prefix + '-' + position);\n }\n\n const overlay = this.createOverlay(sidenav);\n const closeButton = sidenav.querySelector('.vd-sidenav-close, .vd-offcanvas-close');\n const cleanupFunctions = [];\n\n // Set ARIA attributes\n sidenav.setAttribute('role', 'navigation');\n sidenav.setAttribute('aria-hidden', 'true');\n\n // Close button handler\n if (closeButton) {\n const closeHandler = () => {\n this.close(sidenav);\n };\n closeButton.addEventListener('click', closeHandler);\n cleanupFunctions.push(() => closeButton.removeEventListener('click', closeHandler));\n }\n\n // Overlay click handler\n const overlayClickHandler = () => {\n if (sidenav.dataset.backdrop !== 'static') {\n this.close(sidenav);\n }\n };\n overlay.addEventListener('click', overlayClickHandler);\n cleanupFunctions.push(() => overlay.removeEventListener('click', overlayClickHandler));\n\n // ESC key handler\n const escKeyHandler = (e) => {\n if (e.key === 'Escape' && sidenav.classList.contains('is-open')) {\n if (sidenav.dataset.keyboard !== 'false') {\n this.close(sidenav);\n }\n }\n };\n document.addEventListener('keydown', escKeyHandler);\n cleanupFunctions.push(() => document.removeEventListener('keydown', escKeyHandler));\n\n this.sidenavs.set(sidenav, { overlay, cleanup: cleanupFunctions });\n },\n \n /**\n * Create overlay element\n * @param {HTMLElement} sidenav - Sidenav element\n * @returns {HTMLElement} Overlay element\n */\n createOverlay: function(sidenav) {\n let overlay = sidenav.querySelector('.vd-sidenav-overlay');\n \n if (!overlay) {\n overlay = document.createElement('div');\n overlay.className = 'vd-sidenav-overlay';\n document.body.appendChild(overlay);\n }\n \n return overlay;\n },\n \n /**\n * Open sidenav\n * @param {HTMLElement|string} sidenav - Sidenav element or selector\n */\n open: function(sidenav) {\n const el = typeof sidenav === 'string' ? document.querySelector(sidenav) : sidenav;\n \n if (!el || !this.sidenavs.has(el)) {\n return;\n }\n \n const { overlay } = this.sidenavs.get(el);\n \n // Show overlay (if not fixed)\n if (!this.isFixedVariant(el)) {\n overlay.classList.add('is-visible');\n }\n \n // Open sidenav\n el.classList.add('is-open');\n el.setAttribute('aria-hidden', 'false');\n \n // Lock body scroll\n document.body.classList.add('body-sidenav-open');\n \n // Handle push variant\n if (this.isPushVariant(el)) {\n this.handlePushVariant(el, true);\n }\n \n // Dispatch event\n el.dispatchEvent(new CustomEvent('sidenav:open', { bubbles: true }));\n },\n \n /**\n * Close sidenav\n * @param {HTMLElement|string} sidenav - Sidenav element or selector\n */\n close: function(sidenav) {\n const el = typeof sidenav === 'string' ? document.querySelector(sidenav) : sidenav;\n \n if (!el || !this.sidenavs.has(el)) {\n return;\n }\n \n const { overlay } = this.sidenavs.get(el);\n \n // Hide overlay\n overlay.classList.remove('is-visible');\n \n // Close sidenav\n el.classList.remove('is-open');\n el.setAttribute('aria-hidden', 'true');\n \n // Unlock body scroll\n document.body.classList.remove('body-sidenav-open');\n \n // Handle push variant\n if (this.isPushVariant(el)) {\n this.handlePushVariant(el, false);\n }\n \n // Dispatch event\n el.dispatchEvent(new CustomEvent('sidenav:close', { bubbles: true }));\n },\n \n /**\n * Toggle sidenav\n * @param {HTMLElement|string} sidenav - Sidenav element or selector\n */\n toggle: function(sidenav) {\n const el = typeof sidenav === 'string' ? document.querySelector(sidenav) : sidenav;\n if (el) {\n if (el.classList.contains('is-open')) {\n this.close(el);\n } else {\n this.open(el);\n }\n }\n },\n \n /**\n * Handle push variant\n * @param {HTMLElement} sidenav - Sidenav element\n * @param {boolean} isOpen - Whether sidenav is open\n */\n handlePushVariant: function(sidenav, isOpen) {\n // Find the main content wrapper\n const content = document.querySelector('main, .main-content, .content, [role=\"main\"]') || document.body;\n \n if (isOpen) {\n if (window.innerWidth >= this.breakpoint) {\n if (this.isRightVariant(sidenav)) {\n content.style.marginRight = sidenav.offsetWidth + 'px';\n } else {\n content.style.marginLeft = sidenav.offsetWidth + 'px';\n }\n }\n } else {\n content.style.marginLeft = '';\n content.style.marginRight = '';\n }\n },\n \n /**\n * Handle window resize\n */\n handleResize: function() {\n this.sidenavs.forEach(({ overlay }, sidenav) => {\n // Close overlay sidenavs on resize to desktop if they're open\n if (window.innerWidth >= this.breakpoint) {\n if (this.isFixedVariant(sidenav) && !sidenav.classList.contains('is-open')) {\n // Fixed sidenavs should be visible on desktop\n sidenav.classList.add('is-open');\n sidenav.setAttribute('aria-hidden', 'false');\n overlay.classList.remove('is-visible');\n }\n } else {\n // On mobile, fixed sidenavs become overlay\n if (this.isFixedVariant(sidenav) && sidenav.classList.contains('is-open')) {\n this.close(sidenav);\n }\n }\n });\n },\n\n /**\n * Destroy a sidenav instance and clean up event listeners\n * @param {HTMLElement} sidenav - Sidenav element\n */\n destroy: function(sidenav) {\n const data = this.sidenavs.get(sidenav);\n if (!data) return;\n\n // Close if open\n if (sidenav.classList.contains('is-open')) {\n this.close(sidenav);\n }\n\n data.cleanup.forEach(fn => fn());\n\n // Remove created overlay\n if (data.overlay && data.overlay.parentNode) {\n data.overlay.parentNode.removeChild(data.overlay);\n }\n\n this.sidenavs.delete(sidenav);\n },\n\n /**\n * Destroy all sidenav instances\n */\n destroyAll: function() {\n this.sidenavs.forEach((data, sidenav) => {\n this.destroy(sidenav);\n });\n this._globalCleanups.forEach(fn => fn());\n this._globalCleanups = [];\n }\n };\n \n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('sidenav', Sidenav);\n }\n \n // Expose globally\n window.VanduoSidenav = Sidenav;\n \n})();\n\n", "/**\n * Vanduo Framework - Tabs Component\n * Tabbed content navigation with keyboard support\n */\n\n(function() {\n 'use strict';\n\n /**\n * Tabs Component\n */\n const Tabs = {\n // Store initialized tab containers and their cleanup functions\n instances: new Map(),\n\n /**\n * Initialize all tab components\n */\n init: function() {\n const tabContainers = document.querySelectorAll('.vd-tabs, [data-tabs]');\n\n tabContainers.forEach(container => {\n if (this.instances.has(container)) {\n return;\n }\n this.initTabs(container);\n });\n },\n\n /**\n * Initialize a single tab container\n * @param {HTMLElement} container - Tabs container element\n */\n initTabs: function(container) {\n const tabList = container.querySelector('.vd-tab-list, [role=\"tablist\"]');\n const tabLinks = container.querySelectorAll('.vd-tab-link, [data-tab]');\n const tabPanes = container.querySelectorAll('.vd-tab-pane, [data-tab-pane]');\n\n if (!tabList || tabLinks.length === 0) return;\n\n const cleanupFunctions = [];\n\n // Set up ARIA attributes\n tabList.setAttribute('role', 'tablist');\n\n tabLinks.forEach((link, index) => {\n const tabId = link.dataset.tab || link.getAttribute('href')?.replace('#', '') || `tab-${index}`;\n const pane = this.findPane(container, tabId, tabPanes);\n\n // Set up tab attributes\n link.setAttribute('role', 'tab');\n link.setAttribute('aria-selected', link.classList.contains('is-active') ? 'true' : 'false');\n link.setAttribute('tabindex', link.classList.contains('is-active') ? '0' : '-1');\n\n if (!link.id) {\n link.id = `tab-btn-${tabId}`;\n }\n\n // Set up pane attributes\n if (pane) {\n pane.setAttribute('role', 'tabpanel');\n pane.setAttribute('aria-labelledby', link.id);\n if (!pane.id) {\n pane.id = `tab-pane-${tabId}`;\n }\n link.setAttribute('aria-controls', pane.id);\n }\n\n // Click handler\n const clickHandler = (e) => {\n e.preventDefault();\n if (!link.classList.contains('disabled') && !link.disabled) {\n this.activateTab(container, link, tabLinks, tabPanes);\n }\n };\n link.addEventListener('click', clickHandler);\n cleanupFunctions.push(() => link.removeEventListener('click', clickHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, container, link, tabLinks, tabPanes);\n };\n link.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => link.removeEventListener('keydown', keydownHandler));\n });\n\n // Ensure one tab is active\n const activeTab = container.querySelector('.vd-tab-link.is-active, [data-tab].is-active');\n if (!activeTab && tabLinks.length > 0) {\n this.activateTab(container, tabLinks[0], tabLinks, tabPanes);\n }\n\n this.instances.set(container, { cleanup: cleanupFunctions });\n },\n\n /**\n * Find the pane associated with a tab\n * @param {HTMLElement} container - Tabs container\n * @param {string} tabId - Tab identifier\n * @param {NodeList} tabPanes - All tab panes\n * @returns {HTMLElement|null} The matching pane\n */\n findPane: function(container, tabId, tabPanes) {\n // Try data attribute first\n let pane = container.querySelector(`[data-tab-pane=\"${tabId}\"]`);\n\n // Try ID\n if (!pane) {\n pane = container.querySelector(`#${tabId}`);\n }\n\n // Try matching by index\n if (!pane) {\n const tabLinks = container.querySelectorAll('.vd-tab-link, [data-tab]');\n tabLinks.forEach((link, index) => {\n const linkTabId = link.dataset.tab || link.getAttribute('href')?.replace('#', '');\n if (linkTabId === tabId && tabPanes[index]) {\n pane = tabPanes[index];\n }\n });\n }\n\n return pane;\n },\n\n /**\n * Activate a tab\n * @param {HTMLElement} container - Tabs container\n * @param {HTMLElement} tab - Tab to activate\n * @param {NodeList} allTabs - All tab links\n * @param {NodeList} allPanes - All tab panes\n */\n activateTab: function(container, tab, allTabs, allPanes) {\n const tabId = tab.dataset.tab || tab.getAttribute('href')?.replace('#', '') || tab.id;\n\n // Deactivate all tabs\n allTabs.forEach(t => {\n t.classList.remove('is-active');\n t.setAttribute('aria-selected', 'false');\n t.setAttribute('tabindex', '-1');\n\n // Also handle parent li if exists\n if (t.parentElement && t.parentElement.classList.contains('tab-item')) {\n t.parentElement.classList.remove('is-active');\n }\n });\n\n // Hide all panes\n allPanes.forEach(p => {\n p.classList.remove('is-active');\n });\n\n // Activate selected tab\n tab.classList.add('is-active');\n tab.setAttribute('aria-selected', 'true');\n tab.setAttribute('tabindex', '0');\n\n // Also handle parent li if exists\n if (tab.parentElement && tab.parentElement.classList.contains('tab-item')) {\n tab.parentElement.classList.add('is-active');\n }\n\n // Show corresponding pane\n const pane = this.findPane(container, tabId, allPanes);\n if (pane) {\n pane.classList.add('is-active');\n }\n\n // Dispatch custom event\n const event = new CustomEvent('tab:change', {\n bubbles: true,\n detail: {\n tab: tab,\n pane: pane,\n tabId: tabId\n }\n });\n container.dispatchEvent(event);\n },\n\n /**\n * Handle keyboard navigation\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} container - Tabs container\n * @param {HTMLElement} currentTab - Currently focused tab\n * @param {NodeList} allTabs - All tab links\n * @param {NodeList} allPanes - All tab panes\n */\n handleKeydown: function(e, container, currentTab, allTabs, allPanes) {\n const isVertical = container.classList.contains('tabs-vertical');\n const tabs = Array.from(allTabs).filter(t => !t.classList.contains('disabled') && !t.disabled);\n const currentIndex = tabs.indexOf(currentTab);\n\n let newIndex = currentIndex;\n\n switch (e.key) {\n case 'ArrowLeft':\n if (!isVertical) {\n e.preventDefault();\n newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;\n }\n break;\n\n case 'ArrowRight':\n if (!isVertical) {\n e.preventDefault();\n newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;\n }\n break;\n\n case 'ArrowUp':\n if (isVertical) {\n e.preventDefault();\n newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;\n }\n break;\n\n case 'ArrowDown':\n if (isVertical) {\n e.preventDefault();\n newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;\n }\n break;\n\n case 'Home':\n e.preventDefault();\n newIndex = 0;\n break;\n\n case 'End':\n e.preventDefault();\n newIndex = tabs.length - 1;\n break;\n\n case 'Enter':\n case ' ':\n e.preventDefault();\n this.activateTab(container, currentTab, allTabs, allPanes);\n return;\n\n default:\n return;\n }\n\n // Focus and activate new tab\n if (newIndex !== currentIndex) {\n tabs[newIndex].focus();\n this.activateTab(container, tabs[newIndex], allTabs, allPanes);\n }\n },\n\n /**\n * Programmatically show a tab\n * @param {string|HTMLElement} tab - Tab identifier or element\n */\n show: function(tab) {\n let tabElement;\n\n if (typeof tab === 'string') {\n tabElement = document.querySelector(`[data-tab=\"${tab}\"], [href=\"#${tab}\"]`);\n } else {\n tabElement = tab;\n }\n\n if (!tabElement) return;\n\n const container = tabElement.closest('.vd-tabs, [data-tabs]');\n if (!container) return;\n\n const allTabs = container.querySelectorAll('.vd-tab-link, [data-tab]');\n const allPanes = container.querySelectorAll('.vd-tab-pane, [data-tab-pane]');\n\n this.activateTab(container, tabElement, allTabs, allPanes);\n },\n\n /**\n * Destroy a tabs instance and clean up event listeners\n * @param {HTMLElement} container - Tabs container\n */\n destroy: function(container) {\n const instance = this.instances.get(container);\n if (!instance) return;\n\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(container);\n },\n\n /**\n * Destroy all tabs instances\n */\n destroyAll: function() {\n this.instances.forEach((instance, container) => {\n this.destroy(container);\n });\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tabs', Tabs);\n }\n\n})();\n", "/**\n * Vanduo Framework - Theme Customizer\n * A comprehensive theme customization component for the navbar\n * Handles primary color, neutral color, radius, font, and color mode\n */\n\n(function () {\n 'use strict';\n\n const ThemeCustomizer = {\n // Storage keys\n STORAGE_KEYS: {\n PRIMARY: 'vanduo-primary-color',\n NEUTRAL: 'vanduo-neutral-color',\n RADIUS: 'vanduo-radius',\n FONT: 'vanduo-font-preference',\n THEME: 'vanduo-theme-preference'\n },\n\n // Default values\n DEFAULTS: {\n PRIMARY_LIGHT: 'black',\n PRIMARY_DARK: 'amber',\n NEUTRAL: 'neutral',\n RADIUS: '0.5',\n FONT: 'ubuntu',\n THEME: 'system'\n },\n\n // Primary color definitions (Open Color based)\n PRIMARY_COLORS: {\n 'black': { name: 'Black', color: '#000000' },\n 'red': { name: 'Red', color: '#fa5252' },\n 'orange': { name: 'Orange', color: '#fd7e14' },\n 'amber': { name: 'Amber', color: '#f59f00' },\n 'yellow': { name: 'Yellow', color: '#fcc419' },\n 'lime': { name: 'Lime', color: '#82c91e' },\n 'green': { name: 'Green', color: '#40c057' },\n 'emerald': { name: 'Emerald', color: '#20c997' },\n 'teal': { name: 'Teal', color: '#12b886' },\n 'cyan': { name: 'Cyan', color: '#22b8cf' },\n 'sky': { name: 'Sky', color: '#3bc9db' },\n 'blue': { name: 'Blue', color: '#228be6' },\n 'indigo': { name: 'Indigo', color: '#4c6ef5' },\n 'violet': { name: 'Violet', color: '#7950f2' },\n 'purple': { name: 'Purple', color: '#be4bdb' },\n 'fuchsia': { name: 'Fuchsia', color: '#f06595' },\n 'pink': { name: 'Pink', color: '#e64980' },\n 'rose': { name: 'Rose', color: '#ff8787' }\n },\n\n // Neutral color definitions\n NEUTRAL_COLORS: {\n 'slate': { name: 'Slate', color: '#64748b' },\n 'gray': { name: 'Gray', color: '#6b7280' },\n 'zinc': { name: 'Zinc', color: '#71717a' },\n 'neutral': { name: 'Neutral', color: '#737373' },\n 'stone': { name: 'Stone', color: '#78716c' }\n },\n\n // Radius options\n RADIUS_OPTIONS: ['0', '0.125', '0.25', '0.375', '0.5'],\n\n // Font options\n FONT_OPTIONS: {\n 'jetbrains-mono': { name: 'JetBrains Mono', family: \"'JetBrains Mono', monospace\" },\n 'inter': { name: 'Inter', family: \"'Inter', sans-serif\" },\n 'source-sans': { name: 'Source Sans 3', family: \"'Source Sans 3', sans-serif\" },\n 'fira-sans': { name: 'Fira Sans', family: \"'Fira Sans', sans-serif\" },\n 'ibm-plex': { name: 'IBM Plex Sans', family: \"'IBM Plex Sans', sans-serif\" },\n 'system': { name: 'System Default', family: null },\n // Google Fonts Collection\n 'ubuntu': { name: 'Ubuntu', family: \"'Ubuntu', sans-serif\" },\n 'open-sans': { name: 'Open Sans', family: \"'Open Sans', sans-serif\" },\n 'rubik': { name: 'Rubik', family: \"'Rubik', sans-serif\" },\n 'titillium-web': { name: 'Titillium Web', family: \"'Titillium Web', sans-serif\" }\n },\n\n // Theme mode options\n THEME_MODES: ['system', 'dark', 'light'],\n\n // State\n state: {\n primary: null,\n neutral: null,\n radius: null,\n font: null,\n theme: null,\n isOpen: false\n },\n\n isInitialized: false,\n _cleanup: [],\n\n // DOM references\n elements: {\n customizer: null,\n trigger: null,\n panel: null,\n overlay: null\n },\n\n /**\n * Initialize the Theme Customizer\n */\n init: function () {\n if (this.isInitialized) {\n this.bindExistingElements();\n this.bindPanelEvents();\n this.updateUI();\n return;\n }\n\n this.isInitialized = true;\n this._cleanup = [];\n\n this.loadPreferences();\n this.applyAllPreferences();\n this.bindExistingElements();\n this.bindEvents();\n\n console.log('Vanduo Theme Customizer initialized');\n },\n\n addListener: function (target, event, handler, options) {\n if (!target) return;\n target.addEventListener(event, handler, options);\n this._cleanup.push(() => target.removeEventListener(event, handler, options));\n },\n\n /**\n * Get default primary color based on theme\n */\n getDefaultPrimary: function (theme) {\n if (theme === 'system') {\n if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {\n return this.DEFAULTS.PRIMARY_DARK;\n }\n return this.DEFAULTS.PRIMARY_LIGHT;\n }\n return theme === 'dark' ? this.DEFAULTS.PRIMARY_DARK : this.DEFAULTS.PRIMARY_LIGHT;\n },\n\n /**\n * Load preferences from localStorage\n */\n loadPreferences: function () {\n this.state.theme = this.getStorageValue(this.STORAGE_KEYS.THEME, this.DEFAULTS.THEME);\n this.state.primary = this.getStorageValue(this.STORAGE_KEYS.PRIMARY, this.getDefaultPrimary(this.state.theme));\n this._normalizeDefaultPrimaryIfStaleWithStoredTheme();\n this.state.neutral = this.getStorageValue(this.STORAGE_KEYS.NEUTRAL, this.DEFAULTS.NEUTRAL);\n this.state.radius = this.getStorageValue(this.STORAGE_KEYS.RADIUS, this.DEFAULTS.RADIUS);\n this.state.font = this.getStorageValue(this.STORAGE_KEYS.FONT, this.DEFAULTS.FONT);\n },\n\n /**\n * Save a preference to localStorage\n */\n savePreference: function (key, value) {\n this.setStorageValue(key, value);\n },\n\n /**\n * Apply all preferences\n */\n applyAllPreferences: function () {\n this.applyPrimary(this.state.primary);\n this.applyNeutral(this.state.neutral);\n this.applyRadius(this.state.radius);\n this.applyFont(this.state.font);\n this.applyTheme(this.state.theme);\n },\n\n /**\n * Apply primary color\n */\n applyPrimary: function (colorKey) {\n if (!this.PRIMARY_COLORS[colorKey]) {\n colorKey = this.getDefaultPrimary(this.state.theme);\n }\n\n this.state.primary = colorKey;\n document.documentElement.setAttribute('data-primary', colorKey);\n this.savePreference(this.STORAGE_KEYS.PRIMARY, colorKey);\n\n this.dispatchEvent('primary-change', { color: colorKey });\n },\n\n /**\n * Apply neutral color\n */\n applyNeutral: function (neutralKey) {\n if (!this.NEUTRAL_COLORS[neutralKey]) {\n neutralKey = this.DEFAULTS.NEUTRAL;\n }\n\n this.state.neutral = neutralKey;\n document.documentElement.setAttribute('data-neutral', neutralKey);\n this.savePreference(this.STORAGE_KEYS.NEUTRAL, neutralKey);\n\n this.dispatchEvent('neutral-change', { neutral: neutralKey });\n },\n\n /**\n * Apply border radius\n */\n applyRadius: function (radius) {\n if (!this.RADIUS_OPTIONS.includes(radius)) {\n radius = this.DEFAULTS.RADIUS;\n }\n\n this.state.radius = radius;\n document.documentElement.setAttribute('data-radius', radius);\n document.documentElement.style.setProperty('--radius-scale', radius);\n this.savePreference(this.STORAGE_KEYS.RADIUS, radius);\n\n this.dispatchEvent('radius-change', { radius: radius });\n },\n\n /**\n * Apply font family\n */\n applyFont: function (fontKey) {\n if (!this.FONT_OPTIONS[fontKey]) {\n fontKey = this.DEFAULTS.FONT;\n }\n\n this.state.font = fontKey;\n\n if (fontKey === 'system') {\n document.documentElement.removeAttribute('data-font');\n } else {\n document.documentElement.setAttribute('data-font', fontKey);\n }\n\n this.savePreference(this.STORAGE_KEYS.FONT, fontKey);\n\n // Also update the existing FontSwitcher if available\n if (window.FontSwitcher && window.FontSwitcher.setPreference) {\n window.FontSwitcher.state.preference = fontKey;\n window.FontSwitcher.applyFont();\n }\n\n this.dispatchEvent('font-change', { font: fontKey });\n },\n\n /**\n * Apply theme mode\n */\n applyTheme: function (mode) {\n if (!this.THEME_MODES.includes(mode)) {\n mode = this.DEFAULTS.THEME;\n }\n\n // Prevent circular updates\n this._isApplying = true;\n\n // Re-align black/amber when they don't match the effective primary for the target mode.\n // Covers theme toggles and stale localStorage (e.g. amber saved while theme is light).\n if (this.isUsingDefaultPrimary()) {\n const expected = this.getDefaultPrimary(mode);\n if (this.state.primary !== expected) {\n this.applyPrimary(expected);\n }\n }\n\n this.state.theme = mode;\n\n if (mode === 'system') {\n document.documentElement.removeAttribute('data-theme');\n } else {\n document.documentElement.setAttribute('data-theme', mode);\n }\n\n this.savePreference(this.STORAGE_KEYS.THEME, mode);\n\n // Also update the existing ThemeSwitcher if available\n // Only update state, don't call setPreference to avoid circular calls\n if (window.Vanduo && window.Vanduo.components.themeSwitcher) {\n const themeSwitcher = window.Vanduo.components.themeSwitcher;\n if (themeSwitcher.state && themeSwitcher.state.preference !== mode) {\n themeSwitcher.state.preference = mode;\n if (typeof themeSwitcher.setStorageValue === 'function') {\n themeSwitcher.setStorageValue(themeSwitcher.STORAGE_KEY, mode);\n }\n if (typeof themeSwitcher.updateUI === 'function') {\n themeSwitcher.updateUI();\n }\n }\n }\n\n this._isApplying = false;\n this.dispatchEvent('mode-change', { mode: mode });\n },\n\n /**\n * Dispatch custom event\n */\n dispatchEvent: function (type, detail) {\n const event = new CustomEvent('theme:' + type, {\n bubbles: true,\n detail: detail\n });\n document.dispatchEvent(event);\n\n // Also dispatch a general change event\n const changeEvent = new CustomEvent('theme:change', {\n bubbles: true,\n detail: {\n type: type,\n value: detail[Object.keys(detail)[0]],\n state: { ...this.state }\n }\n });\n document.dispatchEvent(changeEvent);\n },\n\n /**\n * Bind to existing DOM elements or create them dynamically\n */\n bindExistingElements: function () {\n // First check for existing full structure\n this.elements.customizer = document.querySelector('.vd-theme-customizer');\n\n if (this.elements.customizer) {\n this.elements.trigger = this.elements.customizer.querySelector('.vd-theme-customizer-trigger');\n this.elements.panel = this.elements.customizer.querySelector('.vd-theme-customizer-panel');\n this.elements.overlay = this.elements.customizer.querySelector('.vd-theme-customizer-overlay');\n } else {\n // Look for standalone trigger button with data attribute\n const standaloneTrigger = document.querySelector('[data-theme-customizer-trigger]');\n if (standaloneTrigger) {\n this.createDynamicPanel(standaloneTrigger);\n }\n }\n\n // Update UI to reflect current state\n this.updateUI();\n },\n\n /**\n * Create the panel dynamically when only a trigger button exists\n */\n createDynamicPanel: function (triggerButton) {\n // Create wrapper\n const wrapper = document.createElement('div');\n wrapper.className = 'vd-theme-customizer';\n\n // Move trigger into wrapper or create reference\n this.elements.trigger = triggerButton;\n\n // Create overlay\n const overlay = document.createElement('div');\n overlay.className = 'vd-theme-customizer-overlay';\n\n // Create panel\n const panel = document.createElement('div');\n panel.className = 'vd-theme-customizer-panel';\n panel.innerHTML = this.getPanelHTML();\n\n // Append to body\n document.body.appendChild(overlay);\n document.body.appendChild(panel);\n\n // Store references\n this.elements.panel = panel;\n this.elements.overlay = overlay;\n this.elements.customizer = { contains: (el) => panel.contains(el) || triggerButton.contains(el) };\n\n // Position panel below trigger on desktop\n this.positionPanel();\n\n // Bind panel events after creation\n this.bindPanelEvents();\n\n // Reposition on resize\n this.addListener(window, 'resize', () => this.positionPanel());\n },\n\n /**\n * Position the panel below the trigger button on desktop\n */\n positionPanel: function () {\n if (!this.elements.panel || !this.elements.trigger) return;\n\n const isMobile = window.innerWidth < 768;\n\n if (isMobile) {\n // Mobile: full height slide-in from right - let CSS handle it\n this.elements.panel.style.top = '';\n this.elements.panel.style.right = '';\n this.elements.panel.style.left = '';\n this.elements.panel.style.height = '';\n this.elements.panel.style.maxHeight = '';\n } else {\n // Desktop: position directly below the trigger button, aligned to its right edge\n const triggerRect = this.elements.trigger.getBoundingClientRect();\n const panelWidth = 320; // --customizer-width\n const panelTop = triggerRect.bottom + 8;\n\n // Calculate right position: align panel's right edge with trigger's right edge\n // But ensure it doesn't overflow the viewport\n const viewportWidth = window.innerWidth;\n let panelRight = viewportWidth - triggerRect.right;\n\n // Ensure panel doesn't overflow left side of viewport\n const panelLeft = viewportWidth - panelRight - panelWidth;\n if (panelLeft < 8) {\n panelRight = viewportWidth - panelWidth - 8;\n }\n\n this.elements.panel.style.top = panelTop + 'px';\n this.elements.panel.style.right = panelRight + 'px';\n this.elements.panel.style.left = '';\n this.elements.panel.style.height = 'auto';\n this.elements.panel.style.maxHeight = 'calc(100vh - ' + panelTop + 'px)';\n }\n },\n\n /**\n * Bind events specifically for the panel (called after dynamic creation)\n */\n bindPanelEvents: function () {\n if (!this.elements.panel) return;\n if (this.elements.panel.getAttribute('data-customizer-initialized') === 'true') return;\n\n this.elements.panel.setAttribute('data-customizer-initialized', 'true');\n\n // Primary color swatches\n this.elements.panel.querySelectorAll('[data-color]').forEach(swatch => {\n this.addListener(swatch, 'click', () => {\n this.applyPrimary(swatch.dataset.color);\n this.updateUI();\n });\n });\n\n // Neutral color swatches\n this.elements.panel.querySelectorAll('[data-neutral]').forEach(swatch => {\n this.addListener(swatch, 'click', () => {\n this.applyNeutral(swatch.dataset.neutral);\n this.updateUI();\n });\n });\n\n // Radius buttons\n this.elements.panel.querySelectorAll('[data-radius]').forEach(btn => {\n this.addListener(btn, 'click', () => {\n this.applyRadius(btn.dataset.radius);\n this.updateUI();\n });\n });\n\n // Font selector\n const fontSelect = this.elements.panel.querySelector('[data-customizer-font]');\n if (fontSelect) {\n this.addListener(fontSelect, 'change', (e) => {\n this.applyFont(e.target.value);\n this.updateUI();\n });\n }\n\n // Reset button\n const resetBtn = this.elements.panel.querySelector('.customizer-reset');\n if (resetBtn) {\n this.addListener(resetBtn, 'click', () => {\n this.reset();\n });\n }\n\n // Mobile close button\n const closeBtn = this.elements.panel.querySelector('.customizer-mobile-close');\n if (closeBtn) {\n this.addListener(closeBtn, 'click', () => {\n this.close();\n });\n }\n\n // Overlay click\n if (this.elements.overlay) {\n this.addListener(this.elements.overlay, 'click', () => {\n this.close();\n });\n }\n },\n\n /**\n * Generate panel HTML\n */\n getPanelHTML: function () {\n const esc = typeof escapeHtml === 'function'\n ? escapeHtml\n : function (text) {\n const div = document.createElement('div');\n div.textContent = String(text ?? '');\n return div.innerHTML;\n };\n const safeColor = function (value) {\n const normalized = String(value ?? '').trim();\n // Allow common color formats used by palette values.\n if (/^(#[0-9a-fA-F]{3,8}|rgb[a]?\\([^)]{1,60}\\)|hsl[a]?\\([^)]{1,60}\\)|var\\(--[a-zA-Z0-9_-]{1,40}\\))$/.test(normalized)) {\n return normalized;\n }\n return '#000000';\n };\n\n // Generate primary color swatches\n let primarySwatches = '';\n for (const [key, value] of Object.entries(this.PRIMARY_COLORS)) {\n primarySwatches += ``;\n }\n\n // Generate neutral color swatches\n let neutralSwatches = '';\n for (const [key, value] of Object.entries(this.NEUTRAL_COLORS)) {\n neutralSwatches += ``;\n }\n\n // Generate radius buttons\n let radiusButtons = '';\n this.RADIUS_OPTIONS.forEach(r => {\n radiusButtons += ``;\n });\n\n // Generate font options\n let fontOptions = '';\n for (const [key, value] of Object.entries(this.FONT_OPTIONS)) {\n fontOptions += ``;\n }\n\n return `\n
    \n

    Customize Theme

    \n \n
    \n
    \n\n
    \n \n
    \n ${primarySwatches}\n
    \n
    \n
    \n \n
    \n ${neutralSwatches}\n
    \n
    \n
    \n \n
    \n ${radiusButtons}\n
    \n
    \n
    \n \n \n
    \n
    \n
    \n \n
    \n `;\n },\n\n /**\n * Bind event listeners\n */\n /**\n * Check whether the current primary color is one of the auto-defaults\n * (i.e. the user hasn't explicitly picked a non-default color).\n */\n isUsingDefaultPrimary: function () {\n return this.state.primary === this.DEFAULTS.PRIMARY_LIGHT ||\n this.state.primary === this.DEFAULTS.PRIMARY_DARK;\n },\n\n /**\n * When primary is still one of the auto-default palette keys (black/amber) but\n * localStorage was written under a different theme (or OS changed in system mode),\n * align in-memory state before applyAllPreferences runs \u2014 avoids amber+light / black+dark drift.\n */\n _normalizeDefaultPrimaryIfStaleWithStoredTheme: function () {\n if (!this.isUsingDefaultPrimary()) {\n return;\n }\n const expected = this.getDefaultPrimary(this.state.theme);\n if (this.state.primary !== expected) {\n this.state.primary = expected;\n }\n },\n\n bindEvents: function () {\n // Trigger click - bind to any trigger button\n if (this.elements.trigger) {\n this.addListener(this.elements.trigger, 'click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggle();\n });\n }\n\n this.bindPanelEvents();\n\n // Listen for OS dark/light changes so we can swap the default primary\n if (window.matchMedia) {\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const handler = () => {\n if (this.state.theme === 'system' && this.isUsingDefaultPrimary()) {\n const newDefault = this.getDefaultPrimary('system');\n if (newDefault !== this.state.primary) {\n this.applyPrimary(newDefault);\n this.updateUI();\n }\n }\n };\n mq.addEventListener('change', handler);\n this._cleanup.push(() => mq.removeEventListener('change', handler));\n }\n\n // Close on outside click\n this.addListener(document, 'click', (e) => {\n if (this.state.isOpen && this.elements.customizer && !this.elements.customizer.contains(e.target)) {\n this.close();\n }\n });\n\n // Close on Escape key\n this.addListener(document, 'keydown', (e) => {\n if (e.key === 'Escape' && this.state.isOpen) {\n this.close();\n }\n });\n },\n\n /**\n * Toggle panel open/close\n */\n toggle: function () {\n if (this.state.isOpen) {\n this.close();\n } else {\n this.open();\n }\n },\n\n /**\n * Open the panel\n */\n open: function () {\n this.state.isOpen = true;\n\n // Ensure panel is positioned correctly before opening\n this.positionPanel();\n\n if (this.elements.panel) {\n this.elements.panel.classList.add('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'true');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.add('is-active');\n }\n\n this.dispatchEvent('panel-open', { isOpen: true });\n },\n\n /**\n * Close the panel\n */\n close: function () {\n this.state.isOpen = false;\n\n if (this.elements.panel) {\n this.elements.panel.classList.remove('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'false');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.remove('is-active');\n }\n\n this.dispatchEvent('panel-close', { isOpen: false });\n },\n\n /**\n * Update UI to reflect current state\n */\n updateUI: function () {\n if (!this.elements.panel) return;\n\n // Update primary color swatches\n this.elements.panel.querySelectorAll('[data-color]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.color === this.state.primary);\n });\n\n // Update neutral color swatches\n this.elements.panel.querySelectorAll('[data-neutral]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.neutral === this.state.neutral);\n });\n\n // Update radius buttons\n this.elements.panel.querySelectorAll('[data-radius]').forEach(btn => {\n btn.classList.toggle('is-active', btn.dataset.radius === this.state.radius);\n });\n\n // Update font selector\n const fontSelect = this.elements.panel.querySelector('[data-customizer-font]');\n if (fontSelect) {\n fontSelect.value = this.state.font;\n }\n\n },\n\n /**\n * Reset all preferences to defaults\n */\n reset: function () {\n this.applyTheme(this.DEFAULTS.THEME);\n this.applyPrimary(this.getDefaultPrimary(this.DEFAULTS.THEME));\n this.applyNeutral(this.DEFAULTS.NEUTRAL);\n this.applyRadius(this.DEFAULTS.RADIUS);\n this.applyFont(this.DEFAULTS.FONT);\n this.updateUI();\n\n this.dispatchEvent('reset', { state: { ...this.state } });\n },\n\n /**\n * Get current state\n */\n getState: function () {\n return { ...this.state };\n },\n\n /**\n * Programmatically set preferences\n */\n setPreferences: function (prefs) {\n if (prefs.primary) this.applyPrimary(prefs.primary);\n if (prefs.neutral) this.applyNeutral(prefs.neutral);\n if (prefs.radius) this.applyRadius(prefs.radius);\n if (prefs.font) this.applyFont(prefs.font);\n if (prefs.theme) this.applyTheme(prefs.theme);\n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n destroyAll: function () {\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n\n if (this.elements.panel) {\n this.elements.panel.removeAttribute('data-customizer-initialized');\n }\n\n this.close();\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeCustomizer', ThemeCustomizer);\n }\n\n // Expose globally for convenience\n window.ThemeCustomizer = ThemeCustomizer;\n})();\n", "/**\n * Vanduo Framework - Theme Switcher\n * Handles light/dark/system theme toggling and persistence\n */\n\n(function () {\n 'use strict';\n\n const ThemeSwitcher = {\n isInitialized: false,\n _mediaQuery: null,\n _onMediaChange: null,\n\n init: function () {\n this.STORAGE_KEY = 'vanduo-theme-preference';\n this.state = {\n preference: this.getPreference() // 'light', 'dark', or 'system'\n };\n\n if (this.isInitialized) {\n this.applyTheme();\n this.renderUI();\n this.updateUI();\n return;\n }\n\n this.isInitialized = true;\n\n this.applyTheme();\n this.listenForSystemChanges();\n this.renderUI();\n\n console.log('Vanduo Theme Switcher initialized');\n },\n\n getPreference: function () {\n return this.getStorageValue(this.STORAGE_KEY, 'system');\n },\n\n setPreference: function (pref) {\n this.state.preference = pref;\n this.setStorageValue(this.STORAGE_KEY, pref);\n this.applyTheme();\n \n // Coordinate with ThemeCustomizer for primary color swap if available\n // Check _isApplying flag to prevent circular updates\n if (window.ThemeCustomizer && window.ThemeCustomizer.applyTheme && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme(pref);\n }\n \n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n applyTheme: function () {\n const pref = this.state.preference;\n\n if (pref === 'system') {\n // When in system mode, we remove the data attribute to let the media query take over\n // or we can explicitly set it. Explicitly setting it ensures consistency if we rely on [data-theme]\n // But if we rely on @media in CSS, we might want to remove attributes.\n // However, our CSS strategy uses :root:not([data-theme=\"light\"]) inside media query for system dark fallback\n // which is a bit complex.\n\n // Simpler approach: \n // If preference is system, REMOVE data-theme attribute. Let CSS media queries handle it.\n document.documentElement.removeAttribute('data-theme');\n } else {\n document.documentElement.setAttribute('data-theme', pref);\n }\n },\n\n listenForSystemChanges: function () {\n if (this._mediaQuery && this._onMediaChange) {\n return;\n }\n\n this._mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n this._onMediaChange = _e => {\n if (this.state.preference === 'system') {\n // Re-apply (effectively just to ensure consistency, though removing attribute usually suffices)\n this.applyTheme();\n // Keep default primary (black/amber) aligned when OS scheme changes while in system mode\n if (window.ThemeCustomizer && typeof window.ThemeCustomizer.applyTheme === 'function' && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme('system');\n }\n }\n };\n this._mediaQuery.addEventListener('change', this._onMediaChange);\n },\n\n // Helper to facilitate UI creation if needed, though often UI is in HTML\n renderUI: function () {\n // Look for any uninitialized theme toggles\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.getAttribute('data-theme-initialized') === 'true') {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n }\n return;\n }\n\n // Simplified UI Binding - assumes a select or a button cycle\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n const onChange = (e) => {\n this.setPreference(e.target.value);\n };\n toggle.addEventListener('change', onChange);\n toggle._themeToggleHandler = onChange;\n } else {\n // Button implementation (cycle)\n const onClick = () => {\n const modes = ['system', 'light', 'dark'];\n const nextIndex = (modes.indexOf(this.state.preference) + 1) % modes.length;\n this.setPreference(modes[nextIndex]);\n };\n toggle.addEventListener('click', onClick);\n toggle._themeToggleHandler = onClick;\n }\n // Mark as initialized\n toggle.setAttribute('data-theme-initialized', 'true');\n });\n },\n\n updateUI: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n } else {\n // Update button text/icon if needed\n // e.g. toggle.textContent = this.state.preference;\n // For now, assume the user handles visual state or generic text\n\n // If there is an icon or text span inside, update it\n const span = toggle.querySelector('.theme-current-label');\n if (span) {\n span.textContent = this.state.preference.charAt(0).toUpperCase() + this.state.preference.slice(1);\n }\n }\n });\n },\n\n destroyAll: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"][data-theme-initialized=\"true\"]');\n toggles.forEach(toggle => {\n if (toggle._themeToggleHandler) {\n const eventName = toggle.tagName === 'SELECT' ? 'change' : 'click';\n toggle.removeEventListener(eventName, toggle._themeToggleHandler);\n delete toggle._themeToggleHandler;\n }\n toggle.removeAttribute('data-theme-initialized');\n });\n\n if (this._mediaQuery && this._onMediaChange) {\n this._mediaQuery.removeEventListener('change', this._onMediaChange);\n }\n\n this._mediaQuery = null;\n this._onMediaChange = null;\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeSwitcher', ThemeSwitcher);\n }\n})();\n", "/**\n * Vanduo Framework - Toast Component\n * Popup notifications for user feedback\n */\n\n(function() {\n 'use strict';\n\n /**\n * Toast Component\n */\n const Toast = {\n // Default options\n defaults: {\n position: 'top-right',\n duration: 5000,\n dismissible: true,\n showProgress: true,\n pauseOnHover: true\n },\n\n // Container cache\n containers: {},\n\n /**\n * Get or create a toast container for a position\n * @param {string} position - Container position\n * @returns {HTMLElement} Toast container element\n */\n getContainer: function(position) {\n if (this.containers[position]) {\n return this.containers[position];\n }\n\n const container = document.createElement('div');\n container.className = `vd-toast-container vd-toast-container-${position}`;\n container.setAttribute('role', 'status');\n container.setAttribute('aria-live', 'polite');\n container.setAttribute('aria-atomic', 'false');\n document.body.appendChild(container);\n this.containers[position] = container;\n\n return container;\n },\n\n /**\n * Show a toast notification\n * @param {Object|string} options - Toast options or message string\n * @param {string} [type] - Toast type (success, error, warning, info)\n * @param {number} [duration] - Auto-dismiss duration in ms\n * @returns {HTMLElement} Toast element\n */\n show: function(options, type, duration) {\n // Support simple API: Toast.show('Message', 'success', 3000)\n if (typeof options === 'string') {\n options = {\n message: options,\n type: type,\n duration: duration\n };\n }\n\n const config = Object.assign({}, this.defaults, options);\n const container = this.getContainer(config.position);\n\n // Create toast element\n const toast = document.createElement('div');\n toast.className = 'vd-toast';\n\n if (config.type) {\n toast.classList.add(`vd-toast-${config.type}`);\n }\n\n if (config.solid) {\n toast.classList.add('vd-toast-solid');\n }\n\n if (config.showProgress && config.duration > 0) {\n toast.classList.add('vd-toast-with-progress');\n }\n\n // Build toast content\n let html = '';\n\n // Icon (sanitize custom icons, default icons are trusted SVG)\n if (config.icon) {\n const safeIcon = typeof sanitizeHtml === 'function' ? sanitizeHtml(config.icon) : escapeHtml(config.icon);\n html += `${safeIcon}`;\n } else if (config.type) {\n html += `${this.getDefaultIcon(config.type)}`;\n }\n\n // Local escape helper \u2014 guarantees HTML-safe output even if the\n // global escapeHtml utility is not loaded in the current bundle.\n const _esc = typeof escapeHtml === 'function'\n ? escapeHtml\n : function (s) {\n const d = document.createElement('div');\n d.appendChild(document.createTextNode(s));\n return d.innerHTML;\n };\n\n // Content (escape text to prevent injection)\n html += '
    ';\n if (config.title) {\n html += `
    ${_esc(String(config.title))}
    `;\n }\n if (config.message) {\n html += `
    ${_esc(String(config.message))}
    `;\n }\n html += '
    ';\n\n // Close button\n if (config.dismissible) {\n html += '';\n }\n\n // Progress bar\n if (config.showProgress && config.duration > 0) {\n const safeDuration = parseInt(config.duration, 10) || 0;\n html += `
    `;\n }\n\n toast.innerHTML = html;\n\n // Add to container\n container.appendChild(toast);\n\n toast._toastCleanup = [];\n\n // Set up close button handler\n if (config.dismissible) {\n const closeBtn = toast.querySelector('.vd-toast-close');\n const onClose = () => {\n this.dismiss(toast);\n };\n closeBtn.addEventListener('click', onClose);\n toast._toastCleanup.push(() => closeBtn.removeEventListener('click', onClose));\n }\n\n // Pause on hover\n let timeoutId = null;\n let remainingTime = config.duration;\n let startTime = null;\n\n const startTimer = () => {\n if (config.duration > 0) {\n startTime = Date.now();\n timeoutId = setTimeout(() => {\n this.dismiss(toast);\n }, remainingTime);\n toast._toastTimeoutId = timeoutId;\n\n // Resume progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'running';\n }\n }\n };\n\n const pauseTimer = () => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n timeoutId = null;\n toast._toastTimeoutId = null;\n remainingTime -= Date.now() - startTime;\n\n // Pause progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'paused';\n }\n }\n };\n\n if (config.pauseOnHover) {\n toast.addEventListener('mouseenter', pauseTimer);\n toast.addEventListener('mouseleave', startTimer);\n toast._toastCleanup.push(\n () => toast.removeEventListener('mouseenter', pauseTimer),\n () => toast.removeEventListener('mouseleave', startTimer)\n );\n }\n\n // Trigger enter animation\n requestAnimationFrame(() => {\n toast.classList.add('is-visible');\n startTimer();\n });\n\n // Store config on element for later access\n toast._toastConfig = config;\n\n // Dispatch show event\n const showEvent = new CustomEvent('toast:show', {\n bubbles: true,\n detail: { toast, config }\n });\n toast.dispatchEvent(showEvent);\n\n return toast;\n },\n\n /**\n * Dismiss a toast\n * @param {HTMLElement} toast - Toast element to dismiss\n */\n dismiss: function(toast) {\n if (!toast || toast.classList.contains('is-exiting')) return;\n\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n toast._toastTimeoutId = null;\n }\n\n toast.classList.remove('is-visible');\n toast.classList.add('is-exiting');\n\n // Dispatch dismiss event\n const dismissEvent = new CustomEvent('toast:dismiss', {\n bubbles: true,\n detail: { toast }\n });\n toast.dispatchEvent(dismissEvent);\n\n // Remove after animation\n const handleTransitionEnd = () => {\n toast.removeEventListener('transitionend', handleTransitionEnd);\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n };\n\n toast.addEventListener('transitionend', handleTransitionEnd);\n\n // Fallback removal if transition doesn't fire\n setTimeout(() => {\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n }, 400);\n },\n\n /**\n * Destroy all toasts and containers\n */\n destroyAll: function() {\n Object.keys(this.containers).forEach(position => {\n const container = this.containers[position];\n if (!container) return;\n\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => {\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n }\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n });\n\n if (container.parentElement) {\n container.parentElement.removeChild(container);\n }\n });\n\n this.containers = {};\n },\n\n /**\n * Dismiss all toasts\n * @param {string} [position] - Optional position to clear (clears all if not specified)\n */\n dismissAll: function(position) {\n if (position && this.containers[position]) {\n const toasts = this.containers[position].querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n } else {\n Object.values(this.containers).forEach(container => {\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n });\n }\n },\n\n /**\n * Get default icon SVG for a type\n * @param {string} type - Toast type\n * @returns {string} SVG icon markup\n */\n getDefaultIcon: function(type) {\n const icons = {\n success: '',\n error: '',\n warning: '',\n info: ''\n };\n\n return icons[type] || '';\n },\n\n /**\n * Convenience methods for common toast types\n */\n success: function(message, options) {\n return this.show(Object.assign({ message, type: 'success' }, options));\n },\n\n error: function(message, options) {\n return this.show(Object.assign({ message, type: 'error' }, options));\n },\n\n warning: function(message, options) {\n return this.show(Object.assign({ message, type: 'warning' }, options));\n },\n\n info: function(message, options) {\n return this.show(Object.assign({ message, type: 'info' }, options));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('toast', Toast);\n }\n\n // Also expose globally for convenience\n window.Toast = Toast;\n\n})();\n", "/**\n * Vanduo Framework - Tooltips Component\n * JavaScript functionality for tooltips\n */\n\n(function () {\n 'use strict';\n\n /**\n * Tooltips Component\n */\n const Tooltips = {\n tooltips: new Map(),\n delayTimers: new Map(),\n\n /**\n * Sanitize HTML \u2014 delegates to shared sanitizeHtml from helpers.js\n * @param {string} input\n * @returns {string} sanitized HTML\n */\n sanitizeHtml: function (input) {\n if (typeof sanitizeHtml === 'function') {\n return sanitizeHtml(input);\n }\n // Fallback: strip all HTML\n const div = document.createElement('div');\n div.textContent = input || '';\n return div.innerHTML;\n },\n\n /**\n * Initialize tooltips\n */\n init: function () {\n const elements = document.querySelectorAll('[data-tooltip], [data-tooltip-html]');\n\n elements.forEach(element => {\n if (this.tooltips.has(element)) {\n return;\n }\n this.initTooltip(element);\n });\n },\n\n /**\n * Initialize a single tooltip\n * @param {HTMLElement} element - Element with tooltip\n */\n initTooltip: function (element) {\n const tooltip = this.createTooltip(element);\n const cleanupFunctions = [];\n\n // Show on hover/focus\n const enterHandler = () => { this.showTooltip(element, tooltip); };\n const leaveHandler = () => { this.hideTooltip(element, tooltip); };\n const focusHandler = () => { this.showTooltip(element, tooltip); };\n const blurHandler = () => { this.hideTooltip(element, tooltip); };\n\n element.addEventListener('mouseenter', enterHandler);\n element.addEventListener('mouseleave', leaveHandler);\n element.addEventListener('focus', focusHandler);\n element.addEventListener('blur', blurHandler);\n\n cleanupFunctions.push(\n () => element.removeEventListener('mouseenter', enterHandler),\n () => element.removeEventListener('mouseleave', leaveHandler),\n () => element.removeEventListener('focus', focusHandler),\n () => element.removeEventListener('blur', blurHandler)\n );\n\n this.tooltips.set(element, { tooltip, cleanup: cleanupFunctions });\n },\n\n /**\n * Create tooltip element\n * @param {HTMLElement} element - Target element\n * @returns {HTMLElement} Tooltip element\n */\n createTooltip: function (element) {\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-tooltip';\n tooltip.setAttribute('role', 'tooltip');\n tooltip.setAttribute('aria-hidden', 'true');\n\n // Generate unique ID and link via aria-describedby\n const tooltipId = 'tooltip-' + Math.random().toString(36).substr(2, 9);\n tooltip.id = tooltipId;\n element.setAttribute('aria-describedby', tooltipId);\n\n // Get content\n const htmlContent = element.dataset.tooltipHtml;\n const textContent = element.dataset.tooltip;\n\n if (htmlContent) {\n tooltip.innerHTML = this.sanitizeHtml(htmlContent);\n tooltip.classList.add('vd-tooltip-html');\n } else if (textContent) {\n tooltip.textContent = textContent;\n }\n\n // Get placement\n const placement = element.dataset.tooltipPlacement || element.dataset.placement || 'top';\n tooltip.setAttribute('data-placement', placement);\n tooltip.classList.add(`vd-tooltip-${placement}`);\n\n // Get variant\n if (element.dataset.tooltipVariant) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipVariant}`);\n }\n\n // Get size\n if (element.dataset.tooltipSize) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipSize}`);\n }\n\n // Get delay\n const delay = parseInt(element.dataset.tooltipDelay) || 0;\n tooltip.dataset.delay = delay;\n\n document.body.appendChild(tooltip);\n\n return tooltip;\n },\n\n /**\n * Show tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n showTooltip: function (element, tooltip) {\n const delay = parseInt(tooltip.dataset.delay) || 0;\n\n if (delay > 0) {\n const timer = setTimeout(() => {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }, delay);\n this.delayTimers.set(element, timer);\n } else {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }\n },\n\n /**\n * Hide tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n hideTooltip: function (element, tooltip) {\n // Clear delay timer if exists\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n tooltip.classList.remove('is-visible');\n tooltip.setAttribute('aria-hidden', 'true');\n },\n\n /**\n * Position tooltip relative to element\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n positionTooltip: function (element, tooltip) {\n const placement = tooltip.dataset.placement || 'top';\n const rect = element.getBoundingClientRect();\n const tooltipRect = tooltip.getBoundingClientRect();\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;\n\n let top = 0;\n let left = 0;\n\n switch (placement) {\n case 'top':\n top = rect.top + scrollTop - tooltipRect.height - 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'bottom':\n top = rect.bottom + scrollTop + 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'left':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.left + scrollLeft - tooltipRect.width - 8;\n break;\n case 'right':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.right + scrollLeft + 8;\n break;\n }\n\n // Prevent overflow\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const padding = 8;\n\n if (left < padding) {\n left = padding;\n } else if (left + tooltipRect.width > viewportWidth - padding) {\n left = viewportWidth - tooltipRect.width - padding;\n }\n\n if (top < scrollTop + padding) {\n top = scrollTop + padding;\n } else if (top + tooltipRect.height > scrollTop + viewportHeight - padding) {\n top = scrollTop + viewportHeight - tooltipRect.height - padding;\n }\n\n // Use single style assignment with transform for better performance\n tooltip.style.cssText = `position: absolute; top: 0; left: 0; transform: translate(${left}px, ${top}px);`;\n },\n\n /**\n * Show tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n show: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.showTooltip(el, tooltip);\n }\n },\n\n /**\n * Hide tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n hide: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.hideTooltip(el, tooltip);\n }\n },\n\n /**\n * Update tooltip content\n * @param {HTMLElement|string} element - Target element or selector\n * @param {string} content - New content\n * @param {boolean} isHtml - Whether content is HTML\n */\n update: function (element, content, isHtml = false) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n if (isHtml) {\n tooltip.innerHTML = this.sanitizeHtml(content);\n tooltip.classList.add('vd-tooltip-html');\n } else {\n tooltip.textContent = content;\n tooltip.classList.remove('vd-tooltip-html');\n }\n }\n },\n\n /**\n * Destroy a tooltip instance and clean up\n * @param {HTMLElement} element - Element with tooltip\n */\n destroy: function (element) {\n const data = this.tooltips.get(element);\n if (!data) return;\n\n // Clear any pending timer\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n data.cleanup.forEach(fn => fn());\n\n // Remove tooltip element from DOM\n if (data.tooltip && data.tooltip.parentNode) {\n data.tooltip.parentNode.removeChild(data.tooltip);\n }\n\n this.tooltips.delete(element);\n },\n\n /**\n * Destroy all tooltip instances\n */\n destroyAll: function () {\n this.tooltips.forEach((data, element) => {\n this.destroy(element);\n });\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tooltips', Tooltips);\n }\n\n // Expose globally\n window.VanduoTooltips = Tooltips;\n\n})();\n", "/**\n * Vanduo Framework - Search Component\n * Client-side search functionality for content pages\n * \n * @example Basic usage (initialize with defaults)\n * // HTML:\n * //
    \n * // \n * //
    \n * //
    \n * \n * @example Custom configuration\n * var search = Search.create({\n * containerSelector: '.my-search',\n * contentSelector: 'article[id]',\n * titleSelector: 'h2, h3',\n * maxResults: 5,\n * onSelect: function(result) {\n * console.log('Selected:', result.title);\n * }\n * });\n * \n * @example With custom data source\n * var search = Search.create({\n * containerSelector: '.my-search',\n * data: [\n * { id: 'item1', title: 'First Item', content: 'Description...', category: 'Category A' },\n * { id: 'item2', title: 'Second Item', content: 'Description...', category: 'Category B' }\n * ]\n * });\n */\n\n(function() {\n 'use strict';\n\n /**\n * Default configuration\n */\n const DEFAULTS = {\n // Behavior\n minQueryLength: 2,\n maxResults: 10,\n debounceMs: 150,\n highlightTag: 'mark',\n keyboardShortcut: true, // Enable Cmd/Ctrl+K shortcut\n \n // Selectors (for DOM-based indexing)\n containerSelector: '.vd-doc-search',\n inputSelector: '.vd-doc-search-input',\n resultsSelector: '.vd-doc-search-results',\n contentSelector: '.doc-content section[id]',\n titleSelector: '.demo-title, h2, h3',\n navSelector: '.doc-nav-link',\n sectionSelector: '.doc-nav-section',\n \n // Content extraction\n excludeFromContent: 'pre, code, script, style',\n maxContentLength: 500,\n \n // Custom data source (alternative to DOM indexing)\n data: null,\n \n // Category icons mapping\n categoryIcons: {\n 'getting-started': 'ph-rocket-launch',\n 'core': 'ph-cube',\n 'components': 'ph-puzzle-piece',\n 'interactive': 'ph-cursor-click',\n 'data-display': 'ph-table',\n 'feedback': 'ph-bell',\n 'meta': 'ph-info',\n 'default': 'ph-file-text'\n },\n \n // Callbacks\n onSelect: null, // function(result) - called when result is selected\n onSearch: null, // function(query, results) - called after search\n onOpen: null, // function() - called when results open\n onClose: null, // function() - called when results close\n \n // Text customization\n emptyTitle: 'No results found',\n emptyText: 'Try different keywords or check spelling',\n placeholder: 'Search...'\n };\n\n /**\n * Search Component Factory\n * Creates a new search instance with the given configuration\n * \n * @param {Object} options - Configuration options\n * @returns {Object} Search instance\n */\n function createSearch(options) {\n const config = Object.assign({}, DEFAULTS, options || {});\n \n // Instance state\n const state = {\n initialized: false,\n index: [],\n results: [],\n activeIndex: -1,\n isOpen: false,\n query: '',\n container: null,\n input: null,\n resultsContainer: null,\n debounceTimer: null,\n boundHandlers: {}\n };\n\n function safeInvokeCallback(name, fn, ...args) {\n try {\n fn(...args);\n } catch (error) {\n console.warn('[Vanduo Search] Callback error in \"' + name + '\":', error);\n }\n }\n\n function setResultsHtml(html) {\n if (!state.resultsContainer) return;\n try {\n state.resultsContainer.innerHTML = html;\n } catch (error) {\n console.warn('[Vanduo Search] Failed to render results:', error);\n }\n }\n\n /**\n * Initialize the search component\n * Idempotent \u2014 safe to call more than once on the same instance.\n * Returns the instance on success, null if required DOM elements are missing.\n */\n function init() {\n if (state.initialized) {\n return instance;\n }\n\n state.container = document.querySelector(config.containerSelector);\n if (!state.container) {\n state.initialized = false;\n return null;\n }\n\n state.input = state.container.querySelector(config.inputSelector);\n state.resultsContainer = state.container.querySelector(config.resultsSelector);\n\n if (!state.input || !state.resultsContainer) {\n state.initialized = false;\n return null;\n }\n\n // Set placeholder if configured\n if (config.placeholder) {\n state.input.setAttribute('placeholder', config.placeholder);\n }\n\n // Build search index\n buildIndex();\n\n // Bind events\n bindEvents();\n\n // Set up ARIA attributes\n setupAria();\n\n state.initialized = true;\n return instance;\n }\n\n /**\n * Build search index from DOM or custom data\n */\n function buildIndex() {\n state.index = [];\n \n // Use custom data if provided\n if (config.data && Array.isArray(config.data)) {\n config.data.forEach(function(item) {\n state.index.push({\n id: item.id || slugify(item.title),\n title: item.title || '',\n category: item.category || '',\n categorySlug: slugify(item.category || ''),\n content: item.content || '',\n keywords: item.keywords || extractKeywordsFromText(item.title + ' ' + item.content),\n url: item.url || '#' + (item.id || slugify(item.title)),\n icon: item.icon || ''\n });\n });\n return;\n }\n\n // Build from DOM\n const sections = document.querySelectorAll(config.contentSelector);\n const categoryMap = buildCategoryMap();\n\n sections.forEach(function(section) {\n const id = section.id;\n if (!id) return;\n\n const titleEl = section.querySelector(config.titleSelector);\n const title = titleEl ? titleEl.textContent.replace(/v[\\d.]+/g, '').trim() : id;\n const category = categoryMap[id] || 'Documentation';\n const content = extractContent(section);\n const keywords = extractKeywords(section, title);\n const iconEl = titleEl ? titleEl.querySelector('i.ph') : null;\n let icon = '';\n if (iconEl && iconEl.classList) {\n for (let ci = 0; ci < iconEl.classList.length; ci++) {\n if (iconEl.classList[ci].indexOf('ph-') === 0) {\n icon = iconEl.classList[ci];\n break;\n }\n }\n }\n\n state.index.push({\n id: id,\n title: title,\n category: category,\n categorySlug: slugify(category),\n content: content,\n keywords: keywords,\n url: '#' + id,\n icon: icon\n });\n });\n }\n\n /**\n * Build a map of section IDs to their categories\n */\n function buildCategoryMap() {\n const map = {};\n let currentCategory = 'Documentation';\n const navItems = document.querySelectorAll(config.navSelector + ', ' + config.sectionSelector);\n\n navItems.forEach(function(item) {\n if (item.classList.contains('doc-nav-section')) {\n currentCategory = item.textContent.trim();\n } else {\n const href = item.getAttribute('href');\n if (href && href.startsWith('#')) {\n const id = href.substring(1);\n map[id] = currentCategory;\n }\n }\n });\n\n return map;\n }\n\n /**\n * Extract searchable content from a section\n */\n function extractContent(section) {\n const clone = section.cloneNode(true);\n \n const toRemove = clone.querySelectorAll(config.excludeFromContent);\n toRemove.forEach(function(el) {\n el.remove();\n });\n\n let text = clone.textContent || '';\n text = text.replace(/\\s+/g, ' ').trim();\n \n return text.substring(0, config.maxContentLength);\n }\n\n /**\n * Extract keywords from a section\n */\n function extractKeywords(section, title) {\n const keywords = [];\n \n // Add title words\n title.toLowerCase().split(/\\s+/).forEach(function(word) {\n if (word.length > 2) {\n keywords.push(word);\n }\n });\n\n // Add class names from code examples\n const codeBlocks = section.querySelectorAll('code');\n codeBlocks.forEach(function(code) {\n const text = code.textContent || '';\n const classMatches = text.match(/\\.([\\w-]+)/g);\n if (classMatches) {\n classMatches.forEach(function(match) {\n keywords.push(match.substring(1).toLowerCase());\n });\n }\n });\n\n // Add data attributes\n const dataAttrs = section.querySelectorAll('[data-tooltip], [data-modal]');\n dataAttrs.forEach(function(el) {\n const attrs = el.getAttributeNames().filter(function(name) {\n return name.startsWith('data-');\n });\n attrs.forEach(function(attr) {\n keywords.push(attr.replace('data-', ''));\n });\n });\n\n return Array.from(new Set(keywords));\n }\n\n /**\n * Extract keywords from text string\n */\n function extractKeywordsFromText(text) {\n const words = text.toLowerCase().split(/\\s+/);\n return words.filter(function(word) {\n return word.length > 2;\n });\n }\n\n /**\n * Convert string to slug\n */\n function slugify(str) {\n return str.toLowerCase().replace(/\\s+/g, '-').replace(/[^a-z0-9-]/g, '');\n }\n\n /**\n * Bind event listeners\n */\n function bindEvents() {\n // Store bound handlers for cleanup\n state.boundHandlers.handleInput = function(e) {\n handleInput(e);\n };\n state.boundHandlers.handleFocus = function() {\n if (state.query.length >= config.minQueryLength) {\n open();\n }\n };\n state.boundHandlers.handleKeydown = function(e) {\n handleKeydown(e);\n };\n state.boundHandlers.handleOutsideClick = function(e) {\n if (!state.container.contains(e.target)) {\n close();\n }\n };\n state.boundHandlers.handleGlobalKeydown = function(e) {\n if (config.keyboardShortcut && (e.metaKey || e.ctrlKey) && e.key === 'k') {\n e.preventDefault();\n state.input.focus();\n state.input.select();\n }\n };\n state.boundHandlers.handleResultClick = function(e) {\n const result = e.target.closest('.vd-doc-search-result');\n if (result) {\n const index = parseInt(result.dataset.index, 10);\n select(index);\n }\n };\n\n // Input events\n state.input.addEventListener('input', state.boundHandlers.handleInput);\n state.input.addEventListener('focus', state.boundHandlers.handleFocus);\n state.input.addEventListener('keydown', state.boundHandlers.handleKeydown);\n\n // Close on outside click\n document.addEventListener('click', state.boundHandlers.handleOutsideClick);\n\n // Global keyboard shortcut\n document.addEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n\n // Result click handling\n state.resultsContainer.addEventListener('click', state.boundHandlers.handleResultClick);\n }\n\n /**\n * Unbind event listeners\n */\n function unbindEvents() {\n if (state.input) {\n state.input.removeEventListener('input', state.boundHandlers.handleInput);\n state.input.removeEventListener('focus', state.boundHandlers.handleFocus);\n state.input.removeEventListener('keydown', state.boundHandlers.handleKeydown);\n }\n document.removeEventListener('click', state.boundHandlers.handleOutsideClick);\n document.removeEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n if (state.resultsContainer) {\n state.resultsContainer.removeEventListener('click', state.boundHandlers.handleResultClick);\n }\n }\n\n /**\n * Set up ARIA attributes\n */\n function setupAria() {\n const resultsId = state.resultsContainer.id || 'search-results-' + Math.random().toString(36).substr(2, 9);\n state.resultsContainer.id = resultsId;\n \n state.input.setAttribute('role', 'combobox');\n state.input.setAttribute('aria-autocomplete', 'list');\n state.input.setAttribute('aria-controls', resultsId);\n state.input.setAttribute('aria-expanded', 'false');\n \n state.resultsContainer.setAttribute('role', 'listbox');\n state.resultsContainer.setAttribute('aria-label', 'Search results');\n }\n\n /**\n * Handle input changes\n */\n function handleInput(e) {\n const query = e.target.value.trim();\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n state.debounceTimer = setTimeout(function() {\n state.query = query;\n\n if (query.length < config.minQueryLength) {\n close();\n return;\n }\n\n state.results = search(query);\n state.activeIndex = -1;\n render();\n open();\n\n // Callback\n if (typeof config.onSearch === 'function') {\n safeInvokeCallback('onSearch', config.onSearch, query, state.results);\n }\n }, config.debounceMs);\n }\n\n /**\n * Handle keyboard navigation\n */\n function handleKeydown(e) {\n if (!state.isOpen) {\n if (e.key === 'ArrowDown' && state.query.length >= config.minQueryLength) {\n e.preventDefault();\n state.results = search(state.query);\n render();\n open();\n }\n return;\n }\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n navigate(1);\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n navigate(-1);\n break;\n\n case 'Enter':\n e.preventDefault();\n if (state.activeIndex >= 0) {\n select(state.activeIndex);\n } else if (state.results.length > 0) {\n select(0);\n }\n break;\n\n case 'Escape':\n e.preventDefault();\n close();\n break;\n\n case 'Tab':\n close();\n break;\n }\n }\n\n /**\n * Perform search\n */\n function search(query) {\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n const scored = [];\n\n state.index.forEach(function(entry) {\n let score = 0;\n const titleLower = entry.title.toLowerCase();\n const categoryLower = entry.category.toLowerCase();\n const contentLower = entry.content.toLowerCase();\n\n terms.forEach(function(term) {\n // Title match - highest priority\n if (titleLower.includes(term)) {\n score += 100;\n if (titleLower === term) {\n score += 50;\n } else if (titleLower.startsWith(term)) {\n score += 25;\n }\n }\n\n // Category match\n if (categoryLower.includes(term)) {\n score += 50;\n }\n\n // Keyword match\n const keywordMatch = entry.keywords.some(function(k) {\n return k.includes(term);\n });\n if (keywordMatch) {\n score += 30;\n }\n\n // Content match\n if (contentLower.includes(term)) {\n score += 10;\n }\n });\n\n if (score > 0) {\n scored.push({\n id: entry.id,\n title: entry.title,\n category: entry.category,\n categorySlug: entry.categorySlug,\n content: entry.content,\n url: entry.url,\n icon: entry.icon,\n score: score\n });\n }\n });\n\n scored.sort(function(a, b) {\n return b.score - a.score;\n });\n\n return scored.slice(0, config.maxResults);\n }\n\n /**\n * Render search results\n */\n function render() {\n if (state.results.length === 0) {\n setResultsHtml(renderEmpty());\n return;\n }\n\n let html = '
      ';\n\n state.results.forEach(function(result, index) {\n const isActive = index === state.activeIndex;\n const icon = result.icon || getCategoryIcon(result.categorySlug);\n const excerpt = getExcerpt(result.content, state.query);\n\n html += '
    • ' +\n '
      ' +\n '' +\n '
      ' +\n '
      ' +\n '
      ' + highlight(result.title, state.query) + '
      ' +\n '
      ' + escapeHtml(result.category) + '
      ' +\n '
      ' + highlight(excerpt, state.query) + '
      ' +\n '
      ' +\n '
      • ';\n });\n\n html += '
    ';\n html += renderFooter();\n\n setResultsHtml(html);\n }\n\n /**\n * Render empty state\n */\n function renderEmpty() {\n return '
    ' +\n '
    ' +\n '
    ' + escapeHtml(config.emptyTitle) + '
    ' +\n '
    ' + escapeHtml(config.emptyText) + '
    ' +\n '
    ';\n }\n\n /**\n * Render footer with keyboard hints\n */\n function renderFooter() {\n return '
    ' +\n '\u2191\u2193 to navigate' +\n '\u21B5 to select' +\n 'esc to close' +\n '
    ';\n }\n\n /**\n * Get icon for category\n */\n function getCategoryIcon(categorySlug) {\n return config.categoryIcons[categorySlug] || config.categoryIcons['default'] || 'ph-file-text';\n }\n\n /**\n * Get excerpt from content\n */\n function getExcerpt(content, query) {\n const terms = query.toLowerCase().split(/\\s+/);\n const contentLower = content.toLowerCase();\n const excerptLength = 100;\n\n let matchPos = -1;\n for (let i = 0; i < terms.length; i++) {\n const pos = contentLower.indexOf(terms[i]);\n if (pos !== -1 && (matchPos === -1 || pos < matchPos)) {\n matchPos = pos;\n }\n }\n\n if (matchPos === -1) {\n return content.substring(0, excerptLength) + '...';\n }\n\n const start = Math.max(0, matchPos - 30);\n const end = Math.min(content.length, matchPos + excerptLength);\n let excerpt = content.substring(start, end);\n\n if (start > 0) {\n excerpt = '...' + excerpt;\n }\n if (end < content.length) {\n excerpt = excerpt + '...';\n }\n\n return excerpt;\n }\n\n /**\n * Highlight matched terms in text\n */\n function highlight(text, query) {\n if (!query) return escapeHtml(text);\n\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n let escaped = escapeHtml(text);\n\n terms.forEach(function(term) {\n // Skip overly long terms to prevent ReDoS\n if (term.length > 50) return;\n const regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n escaped = escaped.replace(regex, '<' + config.highlightTag + '>$1');\n });\n\n return escaped;\n }\n\n /**\n * Escape HTML entities\n */\n function escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n /**\n * Navigate results with keyboard\n */\n function navigate(direction) {\n let newIndex = state.activeIndex + direction;\n\n if (newIndex < 0) {\n newIndex = state.results.length - 1;\n } else if (newIndex >= state.results.length) {\n newIndex = 0;\n }\n\n setActiveIndex(newIndex);\n }\n\n /**\n * Set active result index\n */\n function setActiveIndex(index) {\n const prevActive = state.resultsContainer.querySelector('.vd-doc-search-result.is-active');\n if (prevActive) {\n prevActive.classList.remove('is-active');\n prevActive.setAttribute('aria-selected', 'false');\n }\n\n state.activeIndex = index;\n\n const newActive = state.resultsContainer.querySelector('[data-index=\"' + index + '\"]');\n if (newActive) {\n newActive.classList.add('is-active');\n newActive.setAttribute('aria-selected', 'true');\n state.input.setAttribute('aria-activedescendant', 'vd-doc-search-result-' + index);\n newActive.scrollIntoView({ block: 'nearest' });\n }\n }\n\n /**\n * Select a result\n */\n function select(index) {\n const result = state.results[index];\n if (!result) return;\n\n // Close search\n close();\n state.input.value = '';\n state.query = '';\n\n // Custom callback\n if (typeof config.onSelect === 'function') {\n safeInvokeCallback('onSelect', config.onSelect, result);\n return;\n }\n\n // Default behavior: navigate to section\n const section = document.querySelector(result.url);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth', block: 'start' });\n window.history.pushState(null, '', result.url);\n updateSidebarActive(result.id);\n }\n }\n\n /**\n * Update sidebar navigation active state\n */\n function updateSidebarActive(sectionId) {\n const navLinks = document.querySelectorAll(config.navSelector);\n navLinks.forEach(function(link) {\n link.classList.remove('active');\n if (link.getAttribute('href') === '#' + sectionId) {\n link.classList.add('active');\n }\n });\n }\n\n /**\n * Open results dropdown\n */\n function open() {\n if (state.isOpen) return;\n\n state.isOpen = true;\n state.resultsContainer.classList.add('is-open');\n state.input.setAttribute('aria-expanded', 'true');\n\n if (typeof config.onOpen === 'function') {\n safeInvokeCallback('onOpen', config.onOpen);\n }\n }\n\n /**\n * Close results dropdown\n */\n function close() {\n if (!state.isOpen) return;\n\n state.isOpen = false;\n state.activeIndex = -1;\n state.resultsContainer.classList.remove('is-open');\n state.input.setAttribute('aria-expanded', 'false');\n state.input.removeAttribute('aria-activedescendant');\n\n if (typeof config.onClose === 'function') {\n safeInvokeCallback('onClose', config.onClose);\n }\n }\n\n /**\n * Destroy the component\n */\n function destroy() {\n unbindEvents();\n \n state.initialized = false;\n state.index = [];\n state.results = [];\n state.isOpen = false;\n state.query = '';\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n if (state.resultsContainer) {\n setResultsHtml('');\n }\n }\n\n /**\n * Rebuild the search index\n */\n function rebuild() {\n buildIndex();\n }\n\n /**\n * Update configuration\n */\n function setConfig(newConfig) {\n Object.assign(config, newConfig);\n }\n\n /**\n * Get current configuration\n */\n function getConfig() {\n return Object.assign({}, config);\n }\n\n /**\n * Get search index\n */\n function getIndex() {\n return state.index.slice();\n }\n\n // Public instance API\n const instance = {\n init: init,\n destroy: destroy,\n rebuild: rebuild,\n search: search,\n open: open,\n close: close,\n setConfig: setConfig,\n getConfig: getConfig,\n getIndex: getIndex\n };\n\n return instance;\n }\n\n /**\n * Search Component (singleton for backward compatibility)\n */\n const Search = {\n // Factory method \u2014 creates and auto-initializes a new independent instance.\n // Always returns the instance so callers retain a reference even if the\n // DOM container is not yet available (they can retry init() later).\n create: function(options) {\n const instance = createSearch(options);\n if (instance) {\n instance.init();\n }\n return instance || null;\n },\n \n // Default instance\n _instance: null,\n \n // Configuration (for default instance)\n config: Object.assign({}, DEFAULTS),\n\n /**\n * Initialize the default search instance\n */\n init: function(options) {\n if (this._instance) {\n this._instance.destroy();\n }\n \n if (options) {\n Object.assign(this.config, options);\n }\n \n this._instance = createSearch(this.config);\n return this._instance ? this._instance.init() : null;\n },\n\n /**\n * Destroy the default instance\n */\n destroy: function() {\n if (this._instance) {\n this._instance.destroy();\n this._instance = null;\n }\n },\n\n destroyAll: function() {\n this.destroy();\n },\n\n /**\n * Rebuild the default instance index\n */\n rebuild: function() {\n if (this._instance) {\n this._instance.rebuild();\n }\n },\n\n /**\n * Search using the default instance\n */\n search: function(query) {\n return this._instance ? this._instance.search(query) : [];\n },\n\n /**\n * Open the default instance\n */\n open: function() {\n if (this._instance) {\n this._instance.open();\n }\n },\n\n /**\n * Close the default instance\n */\n close: function() {\n if (this._instance) {\n this._instance.close();\n }\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('docSearch', Search);\n }\n\n // Expose globally (both names for compatibility)\n window.Search = Search;\n window.DocSearch = Search; // Backward compatibility\n window.VanduoDocSearch = Search; // New name compatibility\n\n})();\n", "/**\n * Vanduo Framework - Draggable Component\n * JavaScript functionality for draggable elements and drop zones\n */\n\n(function () {\n 'use strict';\n\n /**\n * Draggable Component\n */\n const Draggable = {\n // Store initialized draggables and their cleanup functions\n instances: new Map(),\n // Store current drag state\n currentDrag: null,\n // Store touch state\n touchState: null,\n // Feedback element\n feedbackElement: null,\n // Shared selector used by init and touch reorder\n containerSelector: '.vd-draggable-container, .vd-draggable-container-vertical',\n\n /**\n * Initialize draggable components\n */\n init: function () {\n const draggables = document.querySelectorAll('.vd-draggable, [data-draggable]');\n\n draggables.forEach(element => {\n if (this.instances.has(element)) {\n return;\n }\n this.initDraggable(element);\n });\n\n const containers = document.querySelectorAll(this.containerSelector);\n containers.forEach(container => {\n if (!this.instances.has(container)) {\n this.initContainer(container);\n }\n });\n\n const dropZones = document.querySelectorAll('.vd-drop-zone');\n dropZones.forEach(zone => {\n if (!this.instances.has(zone)) {\n this.initDropZone(zone);\n }\n });\n\n this.createFeedbackElement();\n },\n\n /**\n * Initialize a single draggable element\n * @param {HTMLElement} element - Draggable element\n */\n initDraggable: function (element) {\n const cleanupFunctions = [];\n\n // Make element draggable if not already\n if (!element.hasAttribute('draggable')) {\n element.setAttribute('draggable', 'true');\n }\n\n // Accessibility: add ARIA attributes\n if (!element.hasAttribute('tabindex')) {\n element.setAttribute('tabindex', '0');\n }\n element.setAttribute('role', 'option');\n element.setAttribute('aria-roledescription', 'draggable item');\n element.setAttribute('aria-grabbed', 'false');\n\n // Handle drag start\n const dragStartHandler = (e) => {\n this.handleDragStart(e, element);\n };\n element.addEventListener('dragstart', dragStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragstart', dragStartHandler));\n\n // Handle drag\n const dragHandler = (e) => {\n this.handleDrag(e, element);\n };\n element.addEventListener('drag', dragHandler);\n cleanupFunctions.push(() => element.removeEventListener('drag', dragHandler));\n\n // Handle drag end\n const dragEndHandler = (e) => {\n this.handleDragEnd(e, element);\n };\n element.addEventListener('dragend', dragEndHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragend', dragEndHandler));\n\n // Handle touch start (for mobile)\n const touchStartHandler = (e) => {\n this.handleTouchStart(e, element);\n };\n element.addEventListener('touchstart', touchStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchstart', touchStartHandler));\n\n // Handle touch move (for mobile)\n // { passive: false } is required so that e.preventDefault() works\n // once the drag threshold is reached \u2014 without it, modern browsers\n // treat the listener as passive and silently ignore preventDefault().\n const touchMoveHandler = (e) => {\n this.handleTouchMove(e, element);\n };\n element.addEventListener('touchmove', touchMoveHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchmove', touchMoveHandler));\n\n // Handle touch end (for mobile)\n const touchEndHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchend', touchEndHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchend', touchEndHandler));\n\n // Handle touch cancel (for mobile)\n const touchCancelHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchcancel', touchCancelHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchcancel', touchCancelHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, element);\n };\n element.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => element.removeEventListener('keydown', keydownHandler));\n\n this.instances.set(element, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a draggable container\n * @param {HTMLElement} container - Draggable container\n */\n initContainer: function (container) {\n // Accessibility: add ARIA role to container\n container.setAttribute('role', 'listbox');\n container.setAttribute('aria-label', container.getAttribute('aria-label') || 'Draggable items');\n\n const items = container.querySelectorAll('.vd-draggable-item');\n items.forEach(item => {\n if (!this.instances.has(item)) {\n this.initDraggable(item);\n }\n });\n\n const cleanupFunctions = [];\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n };\n\n // Handle drag over for auto-sorting\n const dragOverHandler = (e) => {\n e.preventDefault(); // Necessary to allow drop\n e.dataTransfer.dropEffect = 'move';\n\n if (!this.currentDrag) return;\n const draggingEl = this.currentDrag.element;\n\n // Only reorder if dragging an item that belongs to this container (or if we support cross-container drag, but keep simple)\n if (!container.contains(draggingEl)) return;\n\n // Prevent jumps when the dragging finalizes with 0,0 coordinates near the end\n if (e.clientX === 0 && e.clientY === 0) return;\n\n this.handleReorder(container, draggingEl, e.clientX, e.clientY);\n };\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault(); // crucial to prevent the browser's default handling and snapping back\n };\n\n container.addEventListener('dragenter', dragEnterHandler);\n container.addEventListener('dragover', dragOverHandler);\n container.addEventListener('drop', dropHandler);\n\n cleanupFunctions.push(() => {\n container.removeEventListener('dragenter', dragEnterHandler);\n container.removeEventListener('dragover', dragOverHandler);\n container.removeEventListener('drop', dropHandler);\n });\n\n this.instances.set(container, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a drop zone\n * @param {HTMLElement} zone - Drop zone element\n */\n initDropZone: function (zone) {\n const cleanupFunctions = [];\n\n // Accessibility: add ARIA role to drop zone\n zone.setAttribute('role', 'region');\n zone.setAttribute('aria-dropeffect', 'move');\n if (!zone.hasAttribute('aria-label')) {\n zone.setAttribute('aria-label', 'Drop zone');\n }\n\n // Handle drag over\n const dragOverHandler = (e) => {\n e.preventDefault();\n this.handleDragOver(e, zone);\n };\n zone.addEventListener('dragover', dragOverHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragover', dragOverHandler));\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n this.handleDragEnter(e, zone);\n };\n zone.addEventListener('dragenter', dragEnterHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragenter', dragEnterHandler));\n\n // Handle drag leave\n const dragLeaveHandler = (e) => {\n this.handleDragLeave(e, zone);\n };\n zone.addEventListener('dragleave', dragLeaveHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragleave', dragLeaveHandler));\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault();\n this.handleDrop(e, zone);\n };\n zone.addEventListener('drop', dropHandler);\n cleanupFunctions.push(() => zone.removeEventListener('drop', dropHandler));\n\n this.instances.set(zone, { cleanup: cleanupFunctions });\n },\n\n /**\n * Create feedback element for drag operations\n */\n createFeedbackElement: function () {\n if (!this.feedbackElement) {\n // Reuse existing element if present\n const existing = document.querySelector('.vd-drag-feedback');\n if (existing) {\n this.feedbackElement = existing;\n return;\n }\n\n this.feedbackElement = document.createElement('div');\n this.feedbackElement.className = 'vd-drag-feedback hidden';\n this.feedbackElement.setAttribute('role', 'presentation');\n document.body.appendChild(this.feedbackElement);\n }\n },\n\n /**\n * Handle drag start event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragStart: function (e, element) {\n // Add dragging class\n element.classList.add('is-dragging');\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: e.clientX, y: e.clientY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element)\n };\n\n // Set drag data\n e.dataTransfer.effectAllowed = 'move';\n e.dataTransfer.setData('text/plain', this.currentDrag.data);\n\n // We no longer suppress the native ghost image or manually update feedback\n // for mouse drags, relying on the browser's native rendering instead.\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY }\n }\n }));\n },\n\n /**\n * Handle drag event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDrag: function (e, element) {\n // Guard against null state (race condition on fast interactions)\n if (!this.currentDrag) return;\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - this.currentDrag.initialPosition.x,\n y: e.clientY - this.currentDrag.initialPosition.y\n }\n }\n }));\n },\n\n /**\n * Handle drag end event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragEnd: function (e, element) {\n // Remove dragging class\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'false');\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Guard against null state\n const data = this.currentDrag?.data || this.getData(element);\n const initialPos = this.currentDrag?.initialPosition || { x: 0, y: 0 };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - initialPos.x,\n y: e.clientY - initialPos.y\n }\n }\n }));\n\n // Reset drag state\n this.currentDrag = null;\n },\n\n /**\n * Handle touch start event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchStart: function (e, element) {\n // Don't prevent default here \u2014 it blocks scrolling.\n // We only prevent default in touchmove once drag threshold is reached.\n const touch = e.touches[0];\n const rect = element.getBoundingClientRect();\n this.touchState = {\n element: element,\n startX: touch.clientX,\n startY: touch.clientY,\n lastX: touch.clientX,\n lastY: touch.clientY,\n // Keep preview anchored to the original grab point.\n offsetX: touch.clientX - rect.left,\n offsetY: touch.clientY - rect.top,\n startTime: Date.now(),\n isDragging: false\n };\n },\n\n /**\n * Handle touch move event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchMove: function (e, element) {\n if (!this.touchState) return;\n\n const touch = e.touches[0];\n this.touchState.lastX = touch.clientX;\n this.touchState.lastY = touch.clientY;\n const deltaX = touch.clientX - this.touchState.startX;\n const deltaY = touch.clientY - this.touchState.startY;\n\n // Only start dragging if moved a minimum distance\n if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {\n // Now we know it's a drag, not a scroll \u2014 prevent default\n if (e.cancelable) e.preventDefault();\n\n if (!this.touchState.isDragging) {\n this.touchState.isDragging = true;\n element.classList.add('is-dragging');\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: this.touchState.startX, y: this.touchState.startY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element),\n // Preserve where inside the element the drag started for accurate ghost positioning.\n offsetX: this.touchState.offsetX,\n offsetY: this.touchState.offsetY\n };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY }\n }\n }));\n }\n\n // Update feedback\n this.updateFeedback(touch.clientX, touch.clientY);\n\n // Dispatch event\n if (this.currentDrag) {\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY },\n delta: { x: deltaX, y: deltaY }\n }\n }));\n\n this.updateTouchDropZone(touch.clientX, touch.clientY);\n\n // Reorder for touch\n const container = element.closest(this.containerSelector);\n if (container && container.contains(element)) {\n this.handleReorder(container, element, touch.clientX, touch.clientY);\n }\n }\n }\n },\n\n /**\n * Handle touch end event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchEnd: function (e, element) {\n if (this.touchState && this.touchState.isDragging) {\n if (e.cancelable) e.preventDefault();\n const endTouch = e.changedTouches?.[0];\n const endPosition = {\n x: endTouch?.clientX ?? this.touchState.lastX ?? this.touchState.startX,\n y: endTouch?.clientY ?? this.touchState.lastY ?? this.touchState.startY\n };\n\n const dropZone = this.resolveDropZoneAtPoint(endPosition.x, endPosition.y) || this.touchState.overZone;\n if (dropZone) {\n this.dispatchDrop(dropZone, endPosition);\n } else if (this.touchState.overZone) {\n this.touchState.overZone.classList.remove('is-drag-over');\n }\n\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n element.setAttribute('aria-grabbed', 'false');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Dispatch event\n const data = this.currentDrag?.data || this.getData(element);\n const startX = this.touchState?.startX || 0;\n const startY = this.touchState?.startY || 0;\n\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: endPosition,\n delta: {\n x: endPosition.x - startX,\n y: endPosition.y - startY\n }\n }\n }));\n }\n\n // Reset states\n this.touchState = null;\n this.currentDrag = null;\n },\n\n /**\n * Handle drag over event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} _zone - Drop zone element\n */\n handleDragOver: function (e, _zone) {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n },\n\n /**\n * Handle drag enter event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragEnter: function (e, zone) {\n e.preventDefault();\n zone.classList.add('is-drag-over');\n },\n\n /**\n * Handle drag leave event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragLeave: function (e, zone) {\n zone.classList.remove('is-drag-over');\n },\n\n /**\n * Handle drop event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDrop: function (e, zone) {\n e.preventDefault();\n this.dispatchDrop(zone, { x: e.clientX, y: e.clientY });\n },\n\n /**\n * Resolve a drop zone from viewport coordinates\n * @param {number} x\n * @param {number} y\n * @returns {HTMLElement|null}\n */\n resolveDropZoneAtPoint: function (x, y) {\n if (!Number.isFinite(x) || !Number.isFinite(y)) return null;\n\n // Prefer the full stacking list so overlays/top elements don't hide real drop targets.\n if (typeof document.elementsFromPoint === 'function') {\n const stacked = document.elementsFromPoint(x, y);\n for (const element of stacked) {\n const zone = element.closest('.vd-drop-zone');\n if (zone) return zone;\n }\n }\n\n const target = document.elementFromPoint(x, y);\n const targetZone = target ? target.closest('.vd-drop-zone') : null;\n if (targetZone) return targetZone;\n\n // Last-resort fallback for mobile emulation edge cases.\n const zones = document.querySelectorAll('.vd-drop-zone');\n for (const zone of zones) {\n const rect = zone.getBoundingClientRect();\n if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {\n return zone;\n }\n }\n\n return null;\n },\n\n /**\n * Track and update active drop-zone hover state on touch devices\n * @param {number} x\n * @param {number} y\n */\n updateTouchDropZone: function (x, y) {\n if (!this.touchState) return;\n\n const nextZone = this.resolveDropZoneAtPoint(x, y);\n const prevZone = this.touchState.overZone || null;\n\n if (prevZone && prevZone !== nextZone) {\n prevZone.classList.remove('is-drag-over');\n }\n\n if (nextZone && nextZone !== prevZone) {\n nextZone.classList.add('is-drag-over');\n }\n\n this.touchState.overZone = nextZone || null;\n },\n\n /**\n * Dispatch a normalized drop event for mouse and touch flows\n * @param {HTMLElement} zone\n * @param {{x:number, y:number}} position\n */\n dispatchDrop: function (zone, position) {\n zone.classList.remove('is-drag-over');\n zone.dispatchEvent(new CustomEvent('draggable:drop', {\n bubbles: true,\n detail: {\n zone: zone,\n element: this.currentDrag?.element,\n data: this.currentDrag?.data,\n position: position\n }\n }));\n },\n\n /**\n * Reorder elements in container based on cursor position\n * @param {HTMLElement} container \n * @param {HTMLElement} element \n * @param {number} clientX \n * @param {number} clientY \n */\n handleReorder: function (container, element, clientX, clientY) {\n const isVertical = container.classList.contains('vd-draggable-container-vertical');\n const siblings = [...container.querySelectorAll('.vd-draggable-item:not(.is-dragging), .vd-draggable:not(.is-dragging)')];\n\n const nextSibling = siblings.reduce((closest, child) => {\n const box = child.getBoundingClientRect();\n const offset = isVertical\n ? clientY - box.top - box.height / 2\n : clientX - box.left - box.width / 2;\n\n if (offset < 0 && offset > closest.offset) {\n return { offset: offset, element: child };\n } else {\n return closest;\n }\n }, { offset: Number.NEGATIVE_INFINITY }).element;\n\n if (nextSibling == null) {\n container.appendChild(element);\n } else {\n container.insertBefore(element, nextSibling);\n }\n },\n\n /**\n * Handle keyboard events\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} element - Draggable element\n */\n handleKeydown: function (e, element) {\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n // Trigger click or custom action\n element.click();\n break;\n case 'Escape':\n // Cancel drag if in progress\n if (element.classList.contains('is-dragging')) {\n element.classList.remove('is-dragging');\n element.setAttribute('aria-grabbed', 'false');\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n this.currentDrag = null;\n }\n break;\n case 'ArrowUp':\n case 'ArrowLeft': {\n e.preventDefault();\n const prev = element.previousElementSibling;\n if (prev && (prev.classList.contains('vd-draggable') || prev.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(element, prev);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'up' }\n }));\n }\n break;\n }\n case 'ArrowDown':\n case 'ArrowRight': {\n e.preventDefault();\n const next = element.nextElementSibling;\n if (next && (next.classList.contains('vd-draggable') || next.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(next, element);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'down' }\n }));\n }\n break;\n }\n }\n },\n\n /**\n * Get data from draggable element\n * @param {HTMLElement} element - Draggable element\n * @returns {string} Data associated with the element\n */\n getData: function (element) {\n return element.dataset.draggable || element.textContent.trim();\n },\n\n /**\n * Update drag feedback element\n * @param {number} x - Current X coordinate\n * @param {number} y - Current Y coordinate\n */\n updateFeedback: function (x, y) {\n if (!this.currentDrag) return;\n\n // Show feedback\n this.feedbackElement.classList.remove('hidden');\n\n // Update feedback content\n const rect = this.currentDrag.initialBounds;\n this.feedbackElement.innerHTML = '';\n const clone = this.currentDrag.element.cloneNode(true);\n this.feedbackElement.appendChild(clone);\n\n // Set styles\n const offsetX = this.currentDrag.offsetX ?? 20;\n const offsetY = this.currentDrag.offsetY ?? 20;\n Object.assign(this.feedbackElement.style, {\n left: (x - offsetX) + 'px',\n top: (y - offsetY) + 'px',\n width: rect.width + 'px',\n height: rect.height + 'px'\n });\n },\n\n /**\n * Make an element draggable programmatically\n * @param {HTMLElement|string} element - Element or selector\n * @param {Object} options - Configuration options\n */\n makeDraggable: function (element, options = {}) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && !this.instances.has(el)) {\n // Add classes and attributes\n el.classList.add('vd-draggable');\n el.setAttribute('draggable', 'true');\n\n // Set options\n if (options.data) {\n el.dataset.draggable = options.data;\n }\n\n // Initialize\n this.initDraggable(el);\n }\n },\n\n /**\n * Remove draggable functionality from an element\n * @param {HTMLElement|string} element - Element or selector\n */\n removeDraggable: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && this.instances.has(el)) {\n // Clean up\n const instance = this.instances.get(el);\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n\n // Remove classes and attributes\n el.classList.remove('vd-draggable');\n el.removeAttribute('draggable');\n el.removeAttribute('data-draggable');\n }\n },\n\n /**\n * Destroy a draggable instance and clean up event listeners\n * @param {HTMLElement} element - Draggable element\n */\n destroy: function (element) {\n this.removeDraggable(element);\n },\n\n /**\n * Destroy all draggable instances\n */\n destroyAll: function () {\n const instances = Array.from(this.instances.keys());\n instances.forEach(element => this.destroy(element));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('draggable', Draggable);\n }\n\n // Expose globally\n window.VanduoDraggable = Draggable;\n})();\n", "/**\n * Vanduo Framework \u2013 LazyLoad Component\n * v1.2.1\n *\n * Provides two levels of API:\n *\n * LOW-LEVEL (generic IntersectionObserver wrapper)\n * VanduoLazyLoad.observe(element, callback, options?)\n * VanduoLazyLoad.unobserve(element)\n * VanduoLazyLoad.unobserveAll()\n *\n * HIGH-LEVEL (HTML-section fetcher, mirrors vanduo-docs SPA behaviour)\n * VanduoLazyLoad.loadSection(url, containerEl, options?)\n * options: { placeholder, threshold, rootMargin, onLoaded, onError }\n * placeholder: 'skeleton' | 'spinner' | HTMLString (default: 'skeleton')\n *\n * ATTRIBUTE-DRIVEN (zero-JS usage, wired by init())\n *
    \u2026
    \n *\n * EVENTS dispatched on the host element:\n * lazysection:loading \u2014 fetch started\n * lazysection:loaded \u2014 content injected\n * lazysection:error \u2014 fetch failed\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500 Private state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /** @type {Map} */\n const _observerMap = new Map();\n\n /* \u2500\u2500 Security helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Returns true only if `url` resolves to the same origin as the page\n * (relative paths and same-origin absolute URLs are allowed).\n * Cross-origin URLs are rejected to prevent SSRF-style fetch abuse.\n * @param {string} url\n * @returns {boolean}\n */\n function _isSafeUrl(url) {\n try {\n // Relative URLs (no origin) are always safe\n const resolved = new URL(url, window.location.href);\n return resolved.origin === window.location.origin;\n } catch (_) {\n return false;\n }\n }\n\n /**\n * Safely inject fetched HTML into a container by parsing it with\n * DOMParser (avoids script execution) and replacing children via\n * standard DOM APIs instead of raw innerHTML assignment.\n * @param {Element} containerEl\n * @param {string} html\n */\n function _safeInjectHtml(containerEl, html) {\n const parser = new DOMParser();\n const doc = parser.parseFromString(html.trim(), 'text/html'); // CodeQL [js/xss-through-dom] Intentional: parsed nodes are sanitized below before adoption into live DOM\n\n const DANGEROUS_TAGS = ['SCRIPT', 'IFRAME', 'OBJECT', 'EMBED', 'FORM', 'BASE', 'LINK', 'META', 'STYLE'];\n for (const tag of DANGEROUS_TAGS) {\n const els = doc.querySelectorAll(tag);\n for (let i = els.length - 1; i >= 0; i--) {\n els[i].parentNode.removeChild(els[i]);\n }\n }\n\n // Strip dangerous attributes (e.g. onerror, javascript: urls) from all elements\n function _sanitizeNode(node) {\n if (node.nodeType === Node.ELEMENT_NODE) {\n const attrs = node.attributes;\n for (let i = attrs.length - 1; i >= 0; i--) {\n const attrName = attrs[i].name.toLowerCase();\n const attrValue = attrs[i].value.toLowerCase();\n const trimmedValue = attrValue.trim();\n if (\n attrName.startsWith('on') ||\n trimmedValue.startsWith('javascript:') ||\n trimmedValue.startsWith('data:') ||\n trimmedValue.startsWith('vbscript:')\n ) {\n node.removeAttribute(attrs[i].name);\n }\n }\n const children = node.childNodes;\n for (let i = 0; i < children.length; i++) {\n _sanitizeNode(children[i]);\n }\n }\n }\n _sanitizeNode(doc.body);\n\n // Collect all top-level body children\n const nodes = Array.from(doc.body.childNodes);\n // Clear container and append parsed nodes\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n nodes.forEach(function (node) {\n containerEl.appendChild(document.adoptNode(node));\n });\n }\n\n /* \u2500\u2500 Placeholder HTML \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _skeletonHtml() {\n return '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _spinnerHtml() {\n return '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _resolvePlaceholder(placeholder) {\n if (!placeholder || placeholder === 'skeleton') return _skeletonHtml();\n if (placeholder === 'spinner') return _spinnerHtml();\n // Caller-supplied HTML string\n return placeholder;\n }\n\n /* \u2500\u2500 Dispatch helper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _dispatch(el, eventName, detail) {\n el.dispatchEvent(new CustomEvent(eventName, { bubbles: true, detail: detail || {} }));\n }\n\n /* \u2500\u2500 VanduoLazyLoad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const VanduoLazyLoad = {\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * LOW-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Observe an element. `callback` is invoked once when the element\n * enters the viewport, then the element is automatically unobserved.\n *\n * @param {Element} element\n * @param {function(Element): void} callback\n * @param {{ threshold?: number, rootMargin?: string }} [options]\n */\n observe: function (element, callback, options) {\n if (!(element instanceof Element)) {\n console.warn('[VanduoLazyLoad] observe() requires a DOM Element.');\n return;\n }\n if (typeof callback !== 'function') {\n console.warn('[VanduoLazyLoad] observe() requires a callback function.');\n return;\n }\n // Already observed \u2014 ignore\n if (_observerMap.has(element)) return;\n\n const threshold = (options && options.threshold != null) ? options.threshold : 0;\n const rootMargin = (options && options.rootMargin) ? options.rootMargin : '0px';\n\n const observer = new IntersectionObserver(function (entries, obs) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n obs.unobserve(entry.target);\n _observerMap.delete(entry.target);\n try {\n callback(entry.target);\n } catch (e) {\n console.error('[VanduoLazyLoad] Callback threw:', e);\n }\n }\n });\n }, { threshold: threshold, rootMargin: rootMargin });\n\n _observerMap.set(element, observer);\n observer.observe(element);\n },\n\n /**\n * Stop observing an element that was previously passed to observe().\n * @param {Element} element\n */\n unobserve: function (element) {\n const observer = _observerMap.get(element);\n if (observer) {\n observer.unobserve(element);\n _observerMap.delete(element);\n }\n },\n\n /**\n * Stop observing ALL currently observed elements.\n */\n unobserveAll: function () {\n _observerMap.forEach(function (observer, element) {\n observer.unobserve(element);\n });\n _observerMap.clear();\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * HIGH-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fetch an HTML partial and inject it into `containerEl` when the\n * container enters the viewport. A placeholder is shown immediately.\n *\n * @param {string} url URL of the HTML partial to fetch\n * @param {Element} containerEl Target element whose content will be replaced\n * @param {{\n * placeholder?: 'skeleton'|'spinner'|string,\n * threshold?: number,\n * rootMargin?: string,\n * onLoaded?: function(Element): void,\n * onError?: function(Error): void\n * }} [options]\n */\n loadSection: function (url, containerEl, options) {\n if (typeof url !== 'string' || !url) {\n console.warn('[VanduoLazyLoad] loadSection() requires a non-empty URL string.');\n return;\n }\n if (!(containerEl instanceof Element)) {\n console.warn('[VanduoLazyLoad] loadSection() requires a DOM Element as containerEl.');\n return;\n }\n // Reject cross-origin URLs to prevent SSRF-style fetch abuse\n if (!_isSafeUrl(url)) {\n console.error('[VanduoLazyLoad] loadSection() blocked cross-origin URL:', url);\n return;\n }\n\n const opts = options || {};\n // Placeholders are known-safe static HTML strings built internally\n const placeholderHtml = _resolvePlaceholder(opts.placeholder);\n\n // Use _safeInjectHtml instead of innerHTML to prevent XSS from caller-supplied placeholders\n _safeInjectHtml(containerEl, placeholderHtml);\n _dispatch(containerEl, 'lazysection:loading', { url: url });\n\n // Fetch when visible\n this.observe(containerEl, function () {\n const controller = new window.AbortController();\n const timeoutId = setTimeout(function () { controller.abort(); }, 10000);\n\n window.fetch(url, { signal: controller.signal })\n .then(function (res) {\n clearTimeout(timeoutId);\n if (!res.ok) throw new Error('HTTP ' + res.status);\n return res.text();\n })\n .then(function (html) {\n // Use DOMParser to parse fetched content safely, avoiding\n // raw innerHTML assignment of externally-sourced strings\n _safeInjectHtml(containerEl, html);\n _dispatch(containerEl, 'lazysection:loaded', { url: url });\n // Re-init Vanduo components inside the new content\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.init();\n }\n if (typeof opts.onLoaded === 'function') {\n opts.onLoaded(containerEl);\n }\n })\n .catch(function (err) {\n // Build error node via DOM APIs \u2014 no dynamic HTML strings\n const alertEl = document.createElement('div');\n alertEl.className = 'vd-alert vd-alert-error';\n alertEl.setAttribute('role', 'alert');\n const msgEl = document.createElement('span');\n msgEl.textContent = 'Failed to load content. ';\n const detailEl = document.createElement('small');\n detailEl.style.opacity = '0.7';\n detailEl.textContent = err.message;\n alertEl.appendChild(msgEl);\n alertEl.appendChild(detailEl);\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n containerEl.appendChild(alertEl);\n _dispatch(containerEl, 'lazysection:error', { url: url, error: err });\n console.error('[VanduoLazyLoad] loadSection failed:', err);\n if (typeof opts.onError === 'function') {\n opts.onError(err);\n }\n });\n }, { threshold: opts.threshold, rootMargin: opts.rootMargin });\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * ATTRIBUTE-DRIVEN INIT\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Scan the DOM for [data-vd-lazy] elements and wire them up.\n * Safe to call multiple times \u2014 already-observed elements are skipped.\n */\n init: function () {\n const self = this;\n const elements = document.querySelectorAll('[data-vd-lazy]');\n elements.forEach(function (el) {\n // Skip already-observed or already-loaded elements\n if (_observerMap.has(el) || el.dataset.vdLazyState === 'loading' || el.dataset.vdLazyState === 'loaded') return;\n\n const url = el.getAttribute('data-vd-lazy');\n if (!url) return;\n\n el.dataset.vdLazyState = 'loading';\n const placeholder = el.getAttribute('data-vd-lazy-placeholder') || 'skeleton';\n\n self.loadSection(url, el, {\n placeholder: placeholder,\n onLoaded: function () {\n el.dataset.vdLazyState = 'loaded';\n },\n onError: function () {\n el.dataset.vdLazyState = 'error';\n }\n });\n });\n }\n };\n\n /* \u2500\u2500 Register with Vanduo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('LazyLoad', VanduoLazyLoad);\n }\n\n /* \u2500\u2500 Global convenience alias \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n window.VanduoLazyLoad = VanduoLazyLoad;\n\n})();\n", "/**\n * Vanduo Framework - Glass Scroll Activation\n * Generic scroll-aware glass activation via IntersectionObserver.\n *\n * Usage:\n * Add `data-glass-scroll` to any element carrying a `.vd-glass*` class.\n * By default the previous sibling is used as the sentinel.\n * Point to a custom sentinel via `data-glass-sentinel=\"\"`.\n *\n * Behaviour:\n * - Adds `.is-glass-active` when the sentinel leaves the viewport (scrolled past).\n * - Removes `.is-glass-active` when the sentinel re-enters the viewport.\n */\n(function () {\n 'use strict';\n\n const GlassScroll = {\n /** @type {Map} */\n observers: new Map(),\n\n init: function () {\n document.querySelectorAll('[data-glass-scroll]').forEach(el => {\n if (this.observers.has(el)) return;\n this.initElement(el);\n });\n },\n\n /**\n * Wire up a single scroll-activated glass element.\n * @param {HTMLElement} el\n */\n initElement: function (el) {\n const sentinelSelector = el.dataset.glassSentinel;\n let sentinel;\n\n if (sentinelSelector) {\n sentinel = document.querySelector(sentinelSelector);\n }\n\n if (!sentinel) {\n // Fall back to the previous sibling element\n sentinel = el.previousElementSibling;\n }\n\n if (!sentinel) {\n // No sentinel available \u2014 activate immediately so glass is always shown\n el.classList.add('is-glass-active');\n return;\n }\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n // Active when sentinel is NOT intersecting (scrolled past it)\n el.classList.toggle('is-glass-active', !entry.isIntersecting);\n });\n },\n { threshold: 0, rootMargin: '0px' }\n );\n\n observer.observe(sentinel);\n this.observers.set(el, observer);\n },\n\n /**\n * Disconnect and remove a single element's observer.\n * @param {HTMLElement} el\n */\n destroy: function (el) {\n const observer = this.observers.get(el);\n if (observer) {\n observer.disconnect();\n this.observers.delete(el);\n }\n },\n\n destroyAll: function () {\n this.observers.forEach((observer, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('glassScroll', GlassScroll);\n }\n\n window.VanduoGlassScroll = GlassScroll;\n})();\n", "/**\n * Vanduo Framework - Flow (Carousel/Slider) Component\n * Touch-enabled carousel with slide/fade transitions, autoplay, indicators\n */\n\n(function () {\n 'use strict';\n\n const Flow = {\n instances: new Map(),\n\n init: function () {\n const carousels = document.querySelectorAll('.vd-flow, .vd-carousel');\n carousels.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const track = el.querySelector('.vd-flow-track');\n if (!track) return;\n\n const slides = Array.from(track.querySelectorAll('.vd-flow-slide'));\n if (slides.length === 0) return;\n\n const isFade = el.classList.contains('vd-flow-fade');\n const autoplay = el.hasAttribute('data-vd-autoplay');\n const interval = parseInt(el.getAttribute('data-vd-interval'), 10) || 5000;\n const loop = el.getAttribute('data-vd-loop') !== 'false';\n\n const state = {\n current: 0,\n total: slides.length,\n autoplayTimer: null,\n isFade: isFade,\n loop: loop,\n isDragging: false,\n startX: 0,\n currentX: 0,\n threshold: 50\n };\n\n const cleanup = [];\n\n // Set initial active slide\n slides.forEach((slide, i) => {\n slide.setAttribute('role', 'group');\n slide.setAttribute('aria-roledescription', 'slide');\n slide.setAttribute('aria-label', 'Slide ' + (i + 1) + ' of ' + slides.length);\n if (i === 0) slide.classList.add('is-active');\n });\n\n el.setAttribute('role', 'region');\n el.setAttribute('aria-roledescription', 'carousel');\n if (!el.getAttribute('aria-label')) {\n el.setAttribute('aria-label', 'Carousel');\n }\n\n // Live region for announcements\n const liveRegion = document.createElement('div');\n liveRegion.setAttribute('aria-live', 'polite');\n liveRegion.setAttribute('aria-atomic', 'true');\n liveRegion.className = 'sr-only';\n liveRegion.style.cssText = 'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);';\n el.appendChild(liveRegion);\n\n const goTo = (index, announce) => {\n if (announce === undefined) announce = true;\n let target = index;\n if (state.loop) {\n target = ((index % state.total) + state.total) % state.total;\n } else {\n target = Math.max(0, Math.min(index, state.total - 1));\n }\n\n const prev = state.current;\n state.current = target;\n\n if (state.isFade) {\n slides.forEach((s, i) => {\n s.classList.toggle('is-active', i === target);\n });\n } else {\n track.style.transform = 'translateX(-' + (target * 100) + '%)';\n }\n\n // Update indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.classList.toggle('is-active', i === target);\n ind.setAttribute('aria-selected', i === target ? 'true' : 'false');\n });\n\n // Update slide ARIA\n slides.forEach((s, i) => {\n s.setAttribute('aria-hidden', i !== target ? 'true' : 'false');\n });\n\n if (announce) {\n liveRegion.textContent = 'Slide ' + (target + 1) + ' of ' + state.total;\n }\n\n el.dispatchEvent(new CustomEvent('flow:change', {\n detail: { current: target, previous: prev, total: state.total }\n }));\n };\n\n const next = () => goTo(state.current + 1);\n const prev = () => goTo(state.current - 1);\n\n // Controls\n const prevBtn = el.querySelector('.vd-flow-prev');\n const nextBtn = el.querySelector('.vd-flow-next');\n\n if (prevBtn) {\n const h = () => prev();\n prevBtn.addEventListener('click', h);\n cleanup.push(() => prevBtn.removeEventListener('click', h));\n }\n if (nextBtn) {\n const h = () => next();\n nextBtn.addEventListener('click', h);\n cleanup.push(() => nextBtn.removeEventListener('click', h));\n }\n\n // Indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.setAttribute('role', 'tab');\n ind.setAttribute('aria-selected', i === 0 ? 'true' : 'false');\n ind.setAttribute('aria-label', 'Go to slide ' + (i + 1));\n const h = () => goTo(i);\n ind.addEventListener('click', h);\n cleanup.push(() => ind.removeEventListener('click', h));\n });\n\n // Keyboard navigation\n const keyHandler = (e) => {\n if (e.key === 'ArrowLeft') { prev(); e.preventDefault(); }\n if (e.key === 'ArrowRight') { next(); e.preventDefault(); }\n };\n el.setAttribute('tabindex', '0');\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n // Touch / pointer support\n const pointerDown = (e) => {\n state.isDragging = true;\n state.startX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n state.currentX = state.startX;\n el.classList.add('is-dragging');\n };\n\n const pointerMove = (e) => {\n if (!state.isDragging) return;\n state.currentX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n };\n\n const pointerUp = () => {\n if (!state.isDragging) return;\n state.isDragging = false;\n el.classList.remove('is-dragging');\n const diff = state.startX - state.currentX;\n if (Math.abs(diff) > state.threshold) {\n if (diff > 0) next();\n else prev();\n }\n };\n\n el.addEventListener('mousedown', pointerDown);\n el.addEventListener('mousemove', pointerMove);\n el.addEventListener('mouseup', pointerUp);\n el.addEventListener('mouseleave', pointerUp);\n el.addEventListener('touchstart', pointerDown, { passive: true });\n el.addEventListener('touchmove', pointerMove, { passive: true });\n el.addEventListener('touchend', pointerUp);\n\n cleanup.push(\n () => el.removeEventListener('mousedown', pointerDown),\n () => el.removeEventListener('mousemove', pointerMove),\n () => el.removeEventListener('mouseup', pointerUp),\n () => el.removeEventListener('mouseleave', pointerUp),\n () => el.removeEventListener('touchstart', pointerDown),\n () => el.removeEventListener('touchmove', pointerMove),\n () => el.removeEventListener('touchend', pointerUp)\n );\n\n // Autoplay\n const startAutoplay = () => {\n stopAutoplay();\n state.autoplayTimer = setInterval(next, interval);\n };\n\n const stopAutoplay = () => {\n if (state.autoplayTimer) {\n clearInterval(state.autoplayTimer);\n state.autoplayTimer = null;\n }\n };\n\n if (autoplay) {\n startAutoplay();\n const pauseHandler = () => stopAutoplay();\n const resumeHandler = () => startAutoplay();\n el.addEventListener('mouseenter', pauseHandler);\n el.addEventListener('mouseleave', resumeHandler);\n el.addEventListener('focusin', pauseHandler);\n el.addEventListener('focusout', resumeHandler);\n cleanup.push(\n () => el.removeEventListener('mouseenter', pauseHandler),\n () => el.removeEventListener('mouseleave', resumeHandler),\n () => el.removeEventListener('focusin', pauseHandler),\n () => el.removeEventListener('focusout', resumeHandler),\n () => stopAutoplay()\n );\n }\n\n // Initial ARIA state\n goTo(0, false);\n\n this.instances.set(el, {\n cleanup: cleanup,\n goTo: goTo,\n next: next,\n prev: prev,\n getState: () => ({ ...state })\n });\n },\n\n goTo: function (el, index) {\n const instance = this.instances.get(el);\n if (instance) instance.goTo(index);\n },\n\n next: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.next();\n },\n\n prev: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.prev();\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('flow', Flow);\n }\n\n window.VanduoFlow = Flow;\n\n})();\n", "/**\n * Vanduo Framework - Bubble (Popover) Component\n * Click-triggered rich HTML popover, reuses tooltip positioning concepts\n */\n\n(function () {\n 'use strict';\n\n const Bubble = {\n instances: new Map(),\n _globalCleanups: [],\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-bubble], [data-vd-popover]');\n triggers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n\n if (this._globalCleanups.length === 0) {\n const outsideClick = (e) => {\n this.instances.forEach((inst, trigger) => {\n if (!inst.popover.contains(e.target) && !trigger.contains(e.target)) {\n this.hide(trigger);\n }\n });\n };\n const escHandler = (e) => {\n if (e.key === 'Escape') {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n }\n };\n document.addEventListener('click', outsideClick, true);\n document.addEventListener('keydown', escHandler);\n this._globalCleanups.push(\n () => document.removeEventListener('click', outsideClick, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n }\n },\n\n initInstance: function (trigger) {\n const cleanup = [];\n const placement = trigger.getAttribute('data-vd-bubble-placement') ||\n trigger.getAttribute('data-vd-popover-placement') || 'bottom';\n\n // Build popover element\n const popover = document.createElement('div');\n popover.className = 'vd-bubble-content';\n popover.setAttribute('role', 'dialog');\n popover.setAttribute('aria-modal', 'false');\n popover.setAttribute('data-placement', placement);\n\n const title = trigger.getAttribute('data-vd-bubble-title') ||\n trigger.getAttribute('data-vd-popover-title');\n const content = trigger.getAttribute('data-vd-bubble') ||\n trigger.getAttribute('data-vd-popover') || '';\n const htmlContent = trigger.getAttribute('data-vd-bubble-html') ||\n trigger.getAttribute('data-vd-popover-html');\n\n if (title) {\n const header = document.createElement('div');\n header.className = 'vd-bubble-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const closeBtn = document.createElement('button');\n closeBtn.className = 'vd-bubble-close';\n closeBtn.setAttribute('aria-label', 'Close');\n closeBtn.innerHTML = '×';\n header.appendChild(titleSpan);\n header.appendChild(closeBtn);\n popover.appendChild(header);\n\n const closeHandler = (e) => { e.stopPropagation(); this.hide(trigger); };\n closeBtn.addEventListener('click', closeHandler);\n cleanup.push(() => closeBtn.removeEventListener('click', closeHandler));\n }\n\n const body = document.createElement('div');\n body.className = 'vd-bubble-body';\n if (htmlContent) {\n if (typeof sanitizeHtml === 'function') {\n body.innerHTML = sanitizeHtml(htmlContent);\n } else {\n body.textContent = htmlContent;\n }\n } else {\n body.textContent = content;\n }\n popover.appendChild(body);\n\n document.body.appendChild(popover);\n\n // ARIA on trigger\n const popId = 'vd-bubble-' + Math.random().toString(36).slice(2, 9);\n popover.id = popId;\n trigger.setAttribute('aria-haspopup', 'dialog');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.setAttribute('aria-controls', popId);\n\n // Toggle on click\n const toggleHandler = (e) => {\n e.stopPropagation();\n if (popover.classList.contains('is-visible')) {\n this.hide(trigger);\n } else {\n this.hideAll();\n this.show(trigger);\n }\n };\n trigger.addEventListener('click', toggleHandler);\n cleanup.push(() => trigger.removeEventListener('click', toggleHandler));\n\n this.instances.set(trigger, { popover, cleanup, placement });\n },\n\n position: function (trigger, popover, placement) {\n const rect = trigger.getBoundingClientRect();\n const popRect = popover.getBoundingClientRect();\n const gap = 10;\n let top, left;\n\n switch (placement) {\n case 'top':\n top = rect.top - popRect.height - gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n break;\n case 'left':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.left - popRect.width - gap + window.scrollX;\n break;\n case 'right':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.right + gap + window.scrollX;\n break;\n default: // bottom\n top = rect.bottom + gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n }\n\n // Clamp to viewport\n left = Math.max(8, Math.min(left, window.innerWidth - popRect.width - 8));\n top = Math.max(8, top);\n\n popover.style.top = top + 'px';\n popover.style.left = left + 'px';\n },\n\n show: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n const { popover, placement } = instance;\n\n popover.style.display = 'block';\n popover.classList.add('is-visible');\n trigger.setAttribute('aria-expanded', 'true');\n\n requestAnimationFrame(() => {\n this.position(trigger, popover, placement);\n });\n\n trigger.dispatchEvent(new CustomEvent('bubble:show', { bubbles: true }));\n },\n\n hide: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.popover.classList.remove('is-visible');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.dispatchEvent(new CustomEvent('bubble:hide', { bubbles: true }));\n },\n\n hideAll: function () {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n },\n\n destroy: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n if (instance.popover.parentNode) {\n instance.popover.parentNode.removeChild(instance.popover);\n }\n trigger.removeAttribute('aria-haspopup');\n trigger.removeAttribute('aria-expanded');\n trigger.removeAttribute('aria-controls');\n this.instances.delete(trigger);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, trigger) => this.destroy(trigger));\n this._globalCleanups.forEach(fn => fn());\n this._globalCleanups = [];\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('bubble', Bubble);\n }\n\n window.VanduoBubble = Bubble;\n\n})();\n", "/**\n * Vanduo Framework - Waypoint (Scrollspy) Component\n * Highlights navigation links based on scroll position using IntersectionObserver\n */\n\n(function () {\n 'use strict';\n\n const Waypoint = {\n instances: new Map(),\n\n init: function () {\n const navs = document.querySelectorAll('[data-vd-waypoint-nav], [data-vd-scrollspy-nav]');\n navs.forEach(nav => {\n if (this.instances.has(nav)) return;\n this.initInstance(nav);\n });\n },\n\n initInstance: function (nav) {\n const links = Array.from(nav.querySelectorAll('a[href^=\"#\"]'));\n if (links.length === 0) return;\n\n const cleanup = [];\n const offset = parseInt(nav.getAttribute('data-vd-waypoint-offset') || '80', 10);\n const sections = [];\n\n links.forEach(link => {\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.setAttribute('data-vd-waypoint-section', '');\n sections.push({ id, link, section });\n }\n });\n\n if (sections.length === 0) return;\n\n const activeSections = new Set();\n\n const setActive = (id) => {\n links.forEach(l => l.classList.remove('is-active'));\n const target = links.find(l => l.getAttribute('href') === '#' + id);\n if (target) {\n target.classList.add('is-active');\n nav.dispatchEvent(new CustomEvent('waypoint:change', {\n detail: { activeId: id, link: target }\n }));\n }\n };\n\n const rootMargin = '-' + offset + 'px 0px -40% 0px';\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n activeSections.add(entry.target.id);\n } else {\n activeSections.delete(entry.target.id);\n }\n });\n\n // Pick the topmost visible section\n for (let i = 0; i < sections.length; i++) {\n if (activeSections.has(sections[i].id)) {\n setActive(sections[i].id);\n return;\n }\n }\n }, {\n rootMargin: rootMargin,\n threshold: 0\n });\n\n sections.forEach(s => observer.observe(s.section));\n\n // Smooth scroll on click\n links.forEach(link => {\n const clickHandler = (e) => {\n e.preventDefault();\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth' });\n setActive(id);\n }\n };\n link.addEventListener('click', clickHandler);\n cleanup.push(() => link.removeEventListener('click', clickHandler));\n });\n\n cleanup.push(() => observer.disconnect());\n\n this.instances.set(nav, { observer, cleanup, sections, setActive });\n },\n\n refresh: function (nav) {\n this.destroy(nav);\n this.initInstance(nav);\n },\n\n destroy: function (nav) {\n const instance = this.instances.get(nav);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(nav);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, nav) => this.destroy(nav));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('waypoint', Waypoint);\n }\n\n window.VanduoWaypoint = Waypoint;\n\n})();\n", "/**\n * Vanduo Framework - Ripple (Waves Effect) Component\n * Adds expanding circle animation on click at pointer position\n */\n\n(function () {\n 'use strict';\n\n const Ripple = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-ripple, [data-vd-ripple]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n\n const createWave = (e) => {\n const rect = el.getBoundingClientRect();\n const size = Math.max(rect.width, rect.height);\n const x = (e.clientX || (e.touches && e.touches[0].clientX) || rect.left + rect.width / 2) - rect.left - size / 2;\n const y = (e.clientY || (e.touches && e.touches[0].clientY) || rect.top + rect.height / 2) - rect.top - size / 2;\n\n const wave = document.createElement('span');\n wave.className = 'vd-ripple-wave';\n wave.style.width = size + 'px';\n wave.style.height = size + 'px';\n wave.style.left = x + 'px';\n wave.style.top = y + 'px';\n\n el.appendChild(wave);\n\n wave.addEventListener('animationend', () => {\n if (wave.parentNode) wave.parentNode.removeChild(wave);\n });\n };\n\n el.addEventListener('mousedown', createWave);\n el.addEventListener('touchstart', createWave, { passive: true });\n\n cleanup.push(\n () => el.removeEventListener('mousedown', createWave),\n () => el.removeEventListener('touchstart', createWave)\n );\n\n this.instances.set(el, { cleanup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n // Remove any lingering wave elements\n el.querySelectorAll('.vd-ripple-wave').forEach(w => w.remove());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('ripple', Ripple);\n }\n\n window.VanduoRipple = Ripple;\n\n})();\n", "/**\n * Vanduo Framework - Affix (Sticky) Component\n * Uses IntersectionObserver to toggle .is-stuck within the nearest scrollable parent\n */\n\n(function () {\n 'use strict';\n\n function isScrollable(element) {\n if (!element || element === document.body) return false;\n\n const style = window.getComputedStyle(element);\n const overflowY = style.overflowY;\n const overflowX = style.overflowX;\n const canScrollY = /(auto|scroll|overlay)/.test(overflowY) && element.scrollHeight > element.clientHeight;\n const canScrollX = /(auto|scroll|overlay)/.test(overflowX) && element.scrollWidth > element.clientWidth;\n\n return canScrollY || canScrollX;\n }\n\n function getScrollParent(element) {\n let parent = element.parentElement;\n\n while (parent && parent !== document.body && parent !== document.documentElement) {\n if (isScrollable(parent)) return parent;\n parent = parent.parentElement;\n }\n\n return null;\n }\n\n const Affix = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-affix, .vd-sticky, [data-vd-affix]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const parsedOffset = parseInt(el.getAttribute('data-vd-affix-offset') || '0', 10);\n const offset = Number.isNaN(parsedOffset) ? 0 : parsedOffset;\n const scrollParent = getScrollParent(el);\n let isStuck = false;\n\n const sentinel = document.createElement('div');\n sentinel.style.cssText = 'display:block;height:1px;margin-bottom:-1px;visibility:hidden;pointer-events:none;';\n el.parentNode.insertBefore(sentinel, el);\n\n el.style.setProperty('--affix-top-offset', offset + 'px');\n\n function stick() {\n if (isStuck) return;\n isStuck = true;\n el.classList.add('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:stuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n function unstick() {\n if (!isStuck) return;\n isStuck = false;\n el.classList.remove('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:unstuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n const observer = new IntersectionObserver(function (entries) {\n entries.forEach(entry => {\n if (!entry.isIntersecting) {\n stick();\n } else {\n unstick();\n }\n });\n }, {\n root: scrollParent,\n rootMargin: '-' + offset + 'px 0px 0px 0px',\n threshold: 0\n });\n\n observer.observe(sentinel);\n\n cleanup.push(\n () => observer.disconnect(),\n () => { if (sentinel.parentNode) sentinel.parentNode.removeChild(sentinel); },\n () => {\n el.classList.remove('is-stuck');\n el.style.removeProperty('--affix-top-offset');\n }\n );\n\n this.instances.set(el, { cleanup, observer, sentinel, scrollParent });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n el.classList.remove('is-stuck');\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('affix', Affix);\n }\n\n window.VanduoAffix = Affix;\n\n})();\n", "/**\n * Vanduo Framework - Suggest (Autocomplete) Component\n * Dropdown suggestion list with keyboard navigation, static/async data sources\n */\n\n(function () {\n 'use strict';\n\n /**\n * Escape HTML entities to prevent XSS when inserting into innerHTML\n * @param {string} text\n * @returns {string}\n */\n function _escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n const Suggest = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-suggest], [data-vd-autocomplete]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const minChars = parseInt(input.getAttribute('data-vd-suggest-min-chars') || '1', 10);\n const url = input.getAttribute('data-vd-suggest-url') || '';\n const staticData = input.getAttribute('data-vd-suggest') || input.getAttribute('data-vd-autocomplete') || '';\n let items = [];\n\n try { items = JSON.parse(staticData); } catch (_e) {\n items = staticData.split(',').map(s => s.trim()).filter(Boolean);\n }\n\n // Wrap input if not already wrapped\n let wrapper = input.closest('.vd-suggest-wrapper, .vd-autocomplete-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create dropdown list\n const list = document.createElement('ul');\n list.className = 'vd-suggest-list';\n list.setAttribute('role', 'listbox');\n const listId = 'vd-suggest-' + Math.random().toString(36).slice(2, 9);\n list.id = listId;\n wrapper.appendChild(list);\n\n // ARIA\n input.setAttribute('role', 'combobox');\n input.setAttribute('aria-autocomplete', 'list');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('aria-controls', listId);\n input.setAttribute('autocomplete', 'off');\n\n let highlighted = -1;\n let currentItems = [];\n let debounceTimer = null;\n\n const renderItems = (filtered, query) => {\n list.innerHTML = '';\n currentItems = filtered;\n highlighted = -1;\n\n if (filtered.length === 0) {\n const empty = document.createElement('li');\n empty.className = 'vd-suggest-empty';\n empty.textContent = 'No results';\n list.appendChild(empty);\n return;\n }\n\n filtered.forEach((item, i) => {\n const li = document.createElement('li');\n li.className = 'vd-suggest-item';\n li.setAttribute('role', 'option');\n li.id = listId + '-item-' + i;\n\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n if (query) {\n // Escape HTML first to prevent XSS, then highlight matches in the safe string\n const escaped = _escapeHtml(text);\n const re = new RegExp('(' + query.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n li.innerHTML = escaped.replace(re, '$1');\n } else {\n li.textContent = text;\n }\n\n li.addEventListener('click', () => selectItem(i));\n list.appendChild(li);\n });\n };\n\n const open = () => {\n list.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n list.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n highlighted = -1;\n input.removeAttribute('aria-activedescendant');\n };\n\n const selectItem = (index) => {\n const item = currentItems[index];\n const value = typeof item === 'object' ? (item.value || item.label || String(item)) : String(item);\n input.value = value;\n close();\n input.dispatchEvent(new CustomEvent('suggest:select', {\n detail: { value, item, index },\n bubbles: true\n }));\n };\n\n const highlight = (index) => {\n const listItems = list.querySelectorAll('.vd-suggest-item');\n listItems.forEach(li => li.classList.remove('is-highlighted'));\n if (index >= 0 && index < listItems.length) {\n highlighted = index;\n listItems[index].classList.add('is-highlighted');\n input.setAttribute('aria-activedescendant', listItems[index].id);\n listItems[index].scrollIntoView({ block: 'nearest' });\n }\n };\n\n const doSearch = async (query) => {\n if (query.length < minChars) { close(); return; }\n\n let filtered;\n if (url) {\n try {\n const separator = url.includes('?') ? '&' : '?';\n const res = await window.fetch(url + separator + 'q=' + encodeURIComponent(query));\n filtered = await res.json();\n } catch (_e) {\n filtered = [];\n }\n } else {\n const lower = query.toLowerCase();\n filtered = items.filter(item => {\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n return text.toLowerCase().includes(lower);\n });\n }\n\n renderItems(filtered, query);\n if (filtered.length > 0) open();\n else open(); // show \"no results\"\n };\n\n const inputHandler = () => {\n clearTimeout(debounceTimer);\n debounceTimer = setTimeout(() => doSearch(input.value), 200);\n };\n\n const keyHandler = (e) => {\n if (!list.classList.contains('is-open')) {\n if (e.key === 'ArrowDown') { doSearch(input.value); e.preventDefault(); }\n return;\n }\n\n const total = currentItems.length;\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n highlight(highlighted < total - 1 ? highlighted + 1 : 0);\n break;\n case 'ArrowUp':\n e.preventDefault();\n highlight(highlighted > 0 ? highlighted - 1 : total - 1);\n break;\n case 'Enter':\n e.preventDefault();\n if (highlighted >= 0) selectItem(highlighted);\n break;\n case 'Escape':\n close();\n break;\n }\n };\n\n const blurHandler = () => {\n setTimeout(close, 200);\n };\n\n input.addEventListener('input', inputHandler);\n input.addEventListener('keydown', keyHandler);\n input.addEventListener('blur', blurHandler);\n input.addEventListener('focus', () => { if (input.value.length >= minChars) doSearch(input.value); });\n\n cleanup.push(\n () => input.removeEventListener('input', inputHandler),\n () => input.removeEventListener('keydown', keyHandler),\n () => input.removeEventListener('blur', blurHandler),\n () => clearTimeout(debounceTimer),\n () => { if (list.parentNode) list.parentNode.removeChild(list); }\n );\n\n this.instances.set(input, { cleanup, list, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('suggest', Suggest);\n }\n\n window.VanduoSuggest = Suggest;\n\n})();\n", "/**\n * Vanduo Framework - Validate (Form Validation) Component\n * Declarative validation via data attributes with real-time and on-submit modes\n */\n\n(function () {\n 'use strict';\n\n const Validate = {\n instances: new Map(),\n\n rules: {\n required: (value) => value.trim().length > 0,\n email: (value) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value),\n url: (value) => { try { new URL(value); return true; } catch (_e) { return false; } },\n number: (value) => !isNaN(parseFloat(value)) && isFinite(value),\n min: (value, param) => value.length >= parseInt(param, 10),\n max: (value, param) => value.length <= parseInt(param, 10),\n minVal: (value, param) => parseFloat(value) >= parseFloat(param),\n maxVal: (value, param) => parseFloat(value) <= parseFloat(param),\n pattern: (value, param) => {\n try {\n // Cap regex length to prevent ReDoS from excessively complex patterns\n if (param.length > 100) return false;\n return new RegExp(param).test(value);\n } catch (_e) { return false; }\n },\n match: (value, param) => {\n try {\n const escaped = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(param) : param;\n const other = document.querySelector('[name=\"' + escaped + '\"]');\n return other ? value === other.value : false;\n } catch (_e) {\n return false;\n }\n }\n },\n\n messages: {\n required: 'This field is required',\n email: 'Please enter a valid email address',\n url: 'Please enter a valid URL',\n number: 'Please enter a valid number',\n min: 'Minimum {0} characters required',\n max: 'Maximum {0} characters allowed',\n minVal: 'Value must be at least {0}',\n maxVal: 'Value must be at most {0}',\n pattern: 'Invalid format',\n match: 'Fields do not match'\n },\n\n init: function () {\n const forms = document.querySelectorAll('[data-vd-validate], .vd-validate');\n forms.forEach(form => {\n if (this.instances.has(form)) return;\n this.initInstance(form);\n });\n },\n\n initInstance: function (form) {\n const cleanup = [];\n const mode = form.getAttribute('data-vd-validate-mode') || 'blur'; // blur | input | submit\n const fields = form.querySelectorAll('[data-vd-rules]');\n\n const validateField = (field) => {\n const rulesStr = field.getAttribute('data-vd-rules') || '';\n const rules = rulesStr.split('|').map(r => r.trim()).filter(Boolean);\n const value = field.value;\n const errors = [];\n\n for (const rule of rules) {\n const [name, ...params] = rule.split(':');\n const param = params.join(':');\n const validator = this.rules[name];\n\n if (validator && !validator(value, param)) {\n const customMsg = field.getAttribute('data-vd-msg-' + name);\n let msg = customMsg || this.messages[name] || 'Invalid';\n if (param) msg = msg.replace('{0}', param);\n errors.push(msg);\n break; // one error at a time\n }\n }\n\n this.setFieldState(field, errors);\n return errors.length === 0;\n };\n\n const validateAll = () => {\n let valid = true;\n fields.forEach(field => {\n if (!validateField(field)) valid = false;\n });\n return valid;\n };\n\n // Per-field listeners\n fields.forEach(field => {\n if (mode === 'input' || mode === 'blur') {\n const eventType = mode === 'input' ? 'input' : 'blur';\n const handler = () => validateField(field);\n field.addEventListener(eventType, handler);\n cleanup.push(() => field.removeEventListener(eventType, handler));\n\n if (mode === 'blur') {\n const inputClear = () => {\n if (field.classList.contains('is-invalid') || field.classList.contains('is-valid')) {\n validateField(field);\n }\n };\n field.addEventListener('input', inputClear);\n cleanup.push(() => field.removeEventListener('input', inputClear));\n }\n }\n });\n\n // Form submit\n const submitHandler = (e) => {\n const valid = validateAll();\n if (!valid) {\n e.preventDefault();\n e.stopPropagation();\n // Focus first invalid field\n const firstInvalid = form.querySelector('.is-invalid');\n if (firstInvalid) firstInvalid.focus();\n }\n form.dispatchEvent(new CustomEvent('validate:submit', {\n detail: { valid },\n bubbles: true\n }));\n };\n\n form.addEventListener('submit', submitHandler);\n cleanup.push(() => form.removeEventListener('submit', submitHandler));\n\n this.instances.set(form, { cleanup, validateAll, validateField });\n },\n\n setFieldState: function (field, errors) {\n const wrapper = field.closest('.vd-form-group') || field.parentElement;\n let errorEl = wrapper.querySelector('.vd-validate-error');\n\n field.classList.remove('is-valid', 'is-invalid');\n\n if (errors.length > 0) {\n field.classList.add('is-invalid');\n field.setAttribute('aria-invalid', 'true');\n if (!errorEl) {\n errorEl = document.createElement('div');\n errorEl.className = 'vd-validate-error';\n errorEl.id = 'vd-err-' + Math.random().toString(36).slice(2, 9);\n errorEl.setAttribute('role', 'alert');\n wrapper.appendChild(errorEl);\n }\n errorEl.textContent = errors[0];\n errorEl.style.display = '';\n field.setAttribute('aria-describedby', errorEl.id);\n } else if (field.value.trim()) {\n field.classList.add('is-valid');\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n } else {\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n }\n },\n\n validateForm: function (form) {\n const instance = this.instances.get(form);\n return instance ? instance.validateAll() : false;\n },\n\n addRule: function (name, validator, message) {\n this.rules[name] = validator;\n if (message) this.messages[name] = message;\n },\n\n destroy: function (form) {\n const instance = this.instances.get(form);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(form);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, form) => this.destroy(form));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('validate', Validate);\n }\n\n window.VanduoValidate = Validate;\n\n})();\n", "/**\n * Vanduo Framework - Datepicker Component\n * Calendar popup attached to input field with month/year navigation\n */\n\n(function () {\n 'use strict';\n\n const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\n const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];\n\n const Datepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-datepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const format = input.getAttribute('data-vd-datepicker-format') || 'yyyy-mm-dd';\n const minStr = input.getAttribute('data-vd-datepicker-min');\n const maxStr = input.getAttribute('data-vd-datepicker-max');\n const minDate = minStr ? new Date(minStr) : null;\n const maxDate = maxStr ? new Date(maxStr) : null;\n\n const today = new Date();\n let viewYear = today.getFullYear();\n let viewMonth = today.getMonth();\n let selectedDate = null;\n let viewMode = 'days'; // days | months | years\n\n // Parse existing value\n if (input.value) {\n const parsed = new Date(input.value);\n if (!isNaN(parsed.getTime())) {\n selectedDate = parsed;\n viewYear = parsed.getFullYear();\n viewMonth = parsed.getMonth();\n }\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-datepicker-popup';\n popup.setAttribute('role', 'dialog');\n popup.setAttribute('aria-label', 'Choose date');\n\n const wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n wrapper.appendChild(popup);\n\n const formatDate = (d) => {\n const yyyy = d.getFullYear();\n const mm = String(d.getMonth() + 1).padStart(2, '0');\n const dd = String(d.getDate()).padStart(2, '0');\n return format.replace('yyyy', yyyy).replace('mm', mm).replace('dd', dd);\n };\n\n const isDisabled = (d) => {\n if (minDate && d < minDate) return true;\n if (maxDate && d > maxDate) return true;\n return false;\n };\n\n const isSameDay = (a, b) => a && b &&\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate();\n\n const render = () => {\n popup.innerHTML = '';\n\n // Header\n const header = document.createElement('div');\n header.className = 'vd-datepicker-header';\n\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-datepicker-prev';\n prevBtn.innerHTML = '‹';\n prevBtn.setAttribute('aria-label', 'Previous');\n\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-datepicker-next';\n nextBtn.innerHTML = '›';\n nextBtn.setAttribute('aria-label', 'Next');\n\n const title = document.createElement('span');\n title.className = 'vd-datepicker-title';\n\n if (viewMode === 'days') {\n title.textContent = MONTHS[viewMonth] + ' ' + viewYear;\n title.addEventListener('click', () => { viewMode = 'months'; render(); });\n prevBtn.addEventListener('click', () => { viewMonth--; if (viewMonth < 0) { viewMonth = 11; viewYear--; } render(); });\n nextBtn.addEventListener('click', () => { viewMonth++; if (viewMonth > 11) { viewMonth = 0; viewYear++; } render(); });\n } else if (viewMode === 'months') {\n title.textContent = String(viewYear);\n title.addEventListener('click', () => { viewMode = 'years'; render(); });\n prevBtn.addEventListener('click', () => { viewYear--; render(); });\n nextBtn.addEventListener('click', () => { viewYear++; render(); });\n } else {\n const decadeStart = Math.floor(viewYear / 10) * 10;\n title.textContent = decadeStart + ' - ' + (decadeStart + 9);\n prevBtn.addEventListener('click', () => { viewYear -= 10; render(); });\n nextBtn.addEventListener('click', () => { viewYear += 10; render(); });\n }\n\n header.appendChild(prevBtn);\n header.appendChild(title);\n header.appendChild(nextBtn);\n popup.appendChild(header);\n\n if (viewMode === 'days') {\n // Weekday headers\n const weekdays = document.createElement('div');\n weekdays.className = 'vd-datepicker-weekdays';\n DAYS.forEach(d => {\n const span = document.createElement('span');\n span.textContent = d;\n weekdays.appendChild(span);\n });\n popup.appendChild(weekdays);\n\n // Days grid\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-days';\n\n const firstDay = new Date(viewYear, viewMonth, 1).getDay();\n const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();\n const daysInPrev = new Date(viewYear, viewMonth, 0).getDate();\n\n // Previous month padding\n for (let i = firstDay - 1; i >= 0; i--) {\n const btn = createDayBtn(daysInPrev - i, true);\n grid.appendChild(btn);\n }\n\n // Current month\n for (let d = 1; d <= daysInMonth; d++) {\n const date = new Date(viewYear, viewMonth, d);\n const btn = createDayBtn(d, false, date);\n grid.appendChild(btn);\n }\n\n // Next month padding\n const totalCells = firstDay + daysInMonth;\n const remaining = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7);\n for (let i = 1; i <= remaining; i++) {\n const btn = createDayBtn(i, true);\n grid.appendChild(btn);\n }\n\n popup.appendChild(grid);\n } else if (viewMode === 'months') {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-months';\n MONTHS.forEach((name, i) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-month-btn';\n btn.textContent = name.slice(0, 3);\n if (selectedDate && selectedDate.getFullYear() === viewYear && selectedDate.getMonth() === i) {\n btn.classList.add('is-selected');\n }\n btn.addEventListener('click', () => { viewMonth = i; viewMode = 'days'; render(); });\n grid.appendChild(btn);\n });\n popup.appendChild(grid);\n } else {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-years';\n const decadeStart = Math.floor(viewYear / 10) * 10;\n for (let y = decadeStart - 1; y <= decadeStart + 10; y++) {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-year-btn';\n btn.textContent = y;\n if (selectedDate && selectedDate.getFullYear() === y) btn.classList.add('is-selected');\n if (y < decadeStart || y > decadeStart + 9) btn.style.opacity = '0.4';\n btn.addEventListener('click', () => { viewYear = y; viewMode = 'months'; render(); });\n grid.appendChild(btn);\n }\n popup.appendChild(grid);\n }\n };\n\n const createDayBtn = (day, outside, date) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-day';\n btn.textContent = day;\n\n if (outside) {\n btn.classList.add('is-outside');\n btn.tabIndex = -1;\n return btn;\n }\n\n if (date && isSameDay(date, today)) btn.classList.add('is-today');\n if (date && isSameDay(date, selectedDate)) btn.classList.add('is-selected');\n if (date && isDisabled(date)) {\n btn.classList.add('is-disabled');\n return btn;\n }\n\n if (date) {\n btn.addEventListener('click', () => {\n selectedDate = date;\n viewYear = date.getFullYear();\n viewMonth = date.getMonth();\n input.value = formatDate(date);\n close();\n input.dispatchEvent(new CustomEvent('datepicker:select', {\n detail: { date, formatted: input.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n }\n\n return btn;\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n viewMode = 'days';\n };\n\n // Events\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'dialog');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close, popup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('datepicker', Datepicker);\n }\n\n window.VanduoDatepicker = Datepicker;\n\n})();\n", "/**\n * Vanduo Framework - Timepicker Component\n * Dropdown time selection with 12h/24h format and configurable step intervals\n */\n\n(function () {\n 'use strict';\n\n const Timepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-timepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const is24h = input.getAttribute('data-vd-timepicker-format') === '24h';\n const step = parseInt(input.getAttribute('data-vd-timepicker-step') || '30', 10);\n\n // Create wrapper\n let wrapper = input.closest('.vd-suggest-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-timepicker-popup';\n popup.setAttribute('role', 'listbox');\n wrapper.appendChild(popup);\n\n // Generate time slots\n const times = [];\n for (let h = 0; h < 24; h++) {\n for (let m = 0; m < 60; m += step) {\n const hh24 = String(h).padStart(2, '0');\n const mm = String(m).padStart(2, '0');\n\n if (is24h) {\n times.push({ display: hh24 + ':' + mm, value: hh24 + ':' + mm });\n } else {\n const period = h < 12 ? 'AM' : 'PM';\n const h12 = h === 0 ? 12 : (h > 12 ? h - 12 : h);\n const display = h12 + ':' + mm + ' ' + period;\n times.push({ display, value: hh24 + ':' + mm });\n }\n }\n }\n\n const render = () => {\n popup.innerHTML = '';\n times.forEach(t => {\n const item = document.createElement('div');\n item.className = 'vd-timepicker-item';\n item.setAttribute('role', 'option');\n item.textContent = t.display;\n\n if (input.value === t.value || input.value === t.display) {\n item.classList.add('is-selected');\n }\n\n item.addEventListener('click', () => {\n input.value = t.display;\n popup.querySelectorAll('.vd-timepicker-item').forEach(i => i.classList.remove('is-selected'));\n item.classList.add('is-selected');\n close();\n input.dispatchEvent(new CustomEvent('timepicker:select', {\n detail: { display: t.display, value: t.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n\n popup.appendChild(item);\n });\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n // Scroll to selected\n const selected = popup.querySelector('.is-selected');\n if (selected) selected.scrollIntoView({ block: 'center' });\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n };\n\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'listbox');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n input.readOnly = true;\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('timepicker', Timepicker);\n }\n\n window.VanduoTimepicker = Timepicker;\n\n})();\n", "/**\n * Vanduo Framework - Stepper Component\n * Multi-step progress indicator with state management\n */\n\n(function () {\n 'use strict';\n\n const Stepper = {\n instances: new Map(),\n\n init: function () {\n const steppers = document.querySelectorAll('.vd-stepper');\n steppers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const items = Array.from(el.querySelectorAll('.vd-stepper-item'));\n const isClickable = el.classList.contains('vd-stepper-clickable');\n let currentIndex = items.findIndex(i => i.classList.contains('is-active'));\n if (currentIndex === -1) currentIndex = 0;\n\n const setStep = (index) => {\n if (index < 0 || index >= items.length) return;\n const prev = currentIndex;\n currentIndex = index;\n\n items.forEach((item, i) => {\n item.classList.remove('is-active', 'is-completed');\n if (i < index) item.classList.add('is-completed');\n else if (i === index) item.classList.add('is-active');\n });\n\n el.dispatchEvent(new CustomEvent('stepper:change', {\n detail: { current: index, previous: prev, total: items.length },\n bubbles: true\n }));\n };\n\n if (isClickable) {\n items.forEach((item, i) => {\n const handler = () => setStep(i);\n item.addEventListener('click', handler);\n cleanup.push(() => item.removeEventListener('click', handler));\n });\n }\n\n // Initialize current state\n setStep(currentIndex);\n\n this.instances.set(el, {\n cleanup,\n setStep,\n next: () => setStep(currentIndex + 1),\n prev: () => setStep(currentIndex - 1),\n getCurrent: () => currentIndex\n });\n },\n\n setStep: function (el, index) {\n const inst = this.instances.get(el);\n if (inst) inst.setStep(index);\n },\n\n next: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.next();\n },\n\n prev: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.prev();\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('stepper', Stepper);\n }\n\n window.VanduoStepper = Stepper;\n\n})();\n", "/**\n * Vanduo Framework - Rating Component\n * Star-based rating input with hover preview and read-only mode\n */\n\n(function () {\n 'use strict';\n\n const Rating = {\n instances: new Map(),\n\n init: function () {\n const ratings = document.querySelectorAll('[data-vd-rating]');\n ratings.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const max = parseInt(el.getAttribute('data-vd-rating-max') || '5', 10);\n const initialValue = parseFloat(el.getAttribute('data-vd-rating-value') || '0');\n const readonly = el.classList.contains('vd-rating-readonly') || el.hasAttribute('data-vd-rating-readonly');\n let currentValue = initialValue;\n\n el.classList.add('vd-rating');\n el.setAttribute('role', 'radiogroup');\n el.setAttribute('aria-label', el.getAttribute('aria-label') || 'Rating');\n\n // Clear existing stars\n el.innerHTML = '';\n\n // Create stars\n const stars = [];\n for (let i = 1; i <= max; i++) {\n const star = document.createElement('button');\n star.type = 'button';\n star.className = 'vd-rating-star';\n star.setAttribute('role', 'radio');\n star.setAttribute('aria-label', i + ' star' + (i > 1 ? 's' : ''));\n star.setAttribute('aria-checked', i <= currentValue ? 'true' : 'false');\n if (readonly) star.tabIndex = -1;\n stars.push(star);\n el.appendChild(star);\n }\n\n // Value display\n const valueDisplay = document.createElement('span');\n valueDisplay.className = 'vd-rating-value';\n valueDisplay.textContent = currentValue > 0 ? currentValue.toString() : '';\n el.appendChild(valueDisplay);\n\n const updateStars = (value) => {\n stars.forEach((star, i) => {\n star.classList.remove('is-active', 'is-half');\n const starNum = i + 1;\n if (starNum <= Math.floor(value)) {\n star.classList.add('is-active');\n } else if (starNum - 0.5 <= value) {\n star.classList.add('is-half');\n }\n star.setAttribute('aria-checked', starNum <= value ? 'true' : 'false');\n });\n valueDisplay.textContent = value > 0 ? value.toString() : '';\n };\n\n updateStars(currentValue);\n\n if (!readonly) {\n stars.forEach((star, i) => {\n const enterHandler = () => {\n stars.forEach((s, j) => {\n s.classList.toggle('is-hovered', j <= i);\n });\n };\n const leaveHandler = () => {\n stars.forEach(s => s.classList.remove('is-hovered'));\n };\n const clickHandler = () => {\n currentValue = i + 1;\n el.setAttribute('data-vd-rating-value', currentValue);\n updateStars(currentValue);\n el.dispatchEvent(new CustomEvent('rating:change', {\n detail: { value: currentValue, max },\n bubbles: true\n }));\n };\n\n star.addEventListener('mouseenter', enterHandler);\n star.addEventListener('mouseleave', leaveHandler);\n star.addEventListener('click', clickHandler);\n\n cleanup.push(\n () => star.removeEventListener('mouseenter', enterHandler),\n () => star.removeEventListener('mouseleave', leaveHandler),\n () => star.removeEventListener('click', clickHandler)\n );\n });\n\n // Keyboard\n const keyHandler = (e) => {\n if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n e.preventDefault();\n if (currentValue < max) {\n currentValue++;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n e.preventDefault();\n if (currentValue > 1) {\n currentValue--;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n }\n };\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n }\n\n this.instances.set(el, {\n cleanup,\n getValue: () => currentValue,\n setValue: (v) => { currentValue = v; updateStars(v); }\n });\n },\n\n getValue: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getValue() : 0;\n },\n\n setValue: function (el, value) {\n const inst = this.instances.get(el);\n if (inst) inst.setValue(value);\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('rating', Rating);\n }\n\n window.VanduoRating = Rating;\n\n})();\n", "/**\n * Vanduo Framework - Transfer (Dual-list) Component\n * Source-to-target list transfer with search, select-all, and move actions\n */\n\n(function () {\n 'use strict';\n\n const Transfer = {\n instances: new Map(),\n\n init: function () {\n const transfers = document.querySelectorAll('[data-vd-transfer]');\n transfers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n el.classList.add('vd-transfer');\n\n let sourceData, targetData;\n try {\n const raw = JSON.parse(el.getAttribute('data-vd-transfer') || '[]');\n sourceData = raw.map((item, i) => ({\n id: item.id || 'item-' + i,\n label: item.label || item.text || String(item),\n selected: false\n }));\n } catch (_e) {\n sourceData = [];\n }\n targetData = [];\n\n const sourceSelected = new Set();\n const targetSelected = new Set();\n\n const render = () => {\n el.innerHTML = '';\n\n // Source panel\n const sourcePanel = createPanel('Source', sourceData, sourceSelected, 'source');\n // Actions\n const actions = document.createElement('div');\n actions.className = 'vd-transfer-actions';\n\n const moveRightBtn = document.createElement('button');\n moveRightBtn.type = 'button';\n moveRightBtn.className = 'vd-transfer-btn';\n moveRightBtn.innerHTML = '›';\n moveRightBtn.setAttribute('aria-label', 'Move to target');\n moveRightBtn.disabled = sourceSelected.size === 0;\n moveRightBtn.addEventListener('click', () => moveRight());\n\n const moveLeftBtn = document.createElement('button');\n moveLeftBtn.type = 'button';\n moveLeftBtn.className = 'vd-transfer-btn';\n moveLeftBtn.innerHTML = '‹';\n moveLeftBtn.setAttribute('aria-label', 'Move to source');\n moveLeftBtn.disabled = targetSelected.size === 0;\n moveLeftBtn.addEventListener('click', () => moveLeft());\n\n actions.appendChild(moveRightBtn);\n actions.appendChild(moveLeftBtn);\n\n // Target panel\n const targetPanel = createPanel('Target', targetData, targetSelected, 'target');\n\n el.appendChild(sourcePanel);\n el.appendChild(actions);\n el.appendChild(targetPanel);\n };\n\n const createPanel = (title, data, selected, _side) => {\n const panel = document.createElement('div');\n panel.className = 'vd-transfer-panel';\n\n const header = document.createElement('div');\n header.className = 'vd-transfer-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const count = document.createElement('span');\n count.className = 'vd-transfer-count';\n count.textContent = selected.size + '/' + data.length;\n header.appendChild(titleSpan);\n header.appendChild(count);\n panel.appendChild(header);\n\n // Search\n const searchDiv = document.createElement('div');\n searchDiv.className = 'vd-transfer-search';\n const searchInput = document.createElement('input');\n searchInput.type = 'text';\n searchInput.placeholder = 'Search...';\n searchInput.setAttribute('aria-label', 'Search ' + title.toLowerCase());\n searchDiv.appendChild(searchInput);\n panel.appendChild(searchDiv);\n\n // List\n const list = document.createElement('ul');\n list.className = 'vd-transfer-list';\n list.setAttribute('role', 'listbox');\n\n const renderList = (filter) => {\n list.innerHTML = '';\n const filtered = filter ? data.filter(d => {\n const label = (d.label || d.text || String(d)).toLowerCase();\n return label.includes(filter.toLowerCase());\n }) : data;\n filtered.forEach(item => {\n const li = document.createElement('li');\n li.className = 'vd-transfer-item';\n li.setAttribute('role', 'option');\n if (selected.has(item.id)) li.classList.add('is-selected');\n\n const checkbox = document.createElement('input');\n checkbox.type = 'checkbox';\n checkbox.checked = selected.has(item.id);\n checkbox.setAttribute('aria-label', item.label);\n\n const label = document.createElement('span');\n label.textContent = item.label;\n\n li.addEventListener('click', () => {\n if (selected.has(item.id)) selected.delete(item.id);\n else selected.add(item.id);\n render();\n });\n\n li.appendChild(checkbox);\n li.appendChild(label);\n list.appendChild(li);\n });\n };\n\n searchInput.addEventListener('input', () => renderList(searchInput.value));\n renderList('');\n\n panel.appendChild(list);\n return panel;\n };\n\n const moveRight = () => {\n const toMove = sourceData.filter(d => sourceSelected.has(d.id));\n sourceData = sourceData.filter(d => !sourceSelected.has(d.id));\n targetData = targetData.concat(toMove);\n sourceSelected.clear();\n render();\n fireChange();\n };\n\n const moveLeft = () => {\n const toMove = targetData.filter(d => targetSelected.has(d.id));\n targetData = targetData.filter(d => !targetSelected.has(d.id));\n sourceData = sourceData.concat(toMove);\n targetSelected.clear();\n render();\n fireChange();\n };\n\n const fireChange = () => {\n el.dispatchEvent(new CustomEvent('transfer:change', {\n detail: {\n source: sourceData.map(d => d.id),\n target: targetData.map(d => d.id)\n },\n bubbles: true\n }));\n };\n\n render();\n\n this.instances.set(el, {\n cleanup,\n getTarget: () => targetData.map(d => d.id),\n getSource: () => sourceData.map(d => d.id)\n });\n },\n\n getSelected: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getTarget() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('transfer', Transfer);\n }\n\n window.VanduoTransfer = Transfer;\n\n})();\n", "/**\n * Vanduo Framework - Tree View Component\n * Hierarchical collapsible tree with checkbox selection and keyboard navigation\n */\n\n(function () {\n 'use strict';\n\n const Tree = {\n instances: new Map(),\n\n init: function () {\n const trees = document.querySelectorAll('[data-vd-tree]');\n trees.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const cascade = el.getAttribute('data-vd-tree-cascade') !== 'false';\n\n let data;\n try { data = JSON.parse(el.getAttribute('data-vd-tree') || '[]'); } catch (_e) { data = []; }\n\n el.classList.add('vd-tree');\n el.setAttribute('role', 'tree');\n\n const render = (items, parent) => {\n parent.innerHTML = '';\n items.forEach(item => {\n const node = document.createElement('li');\n node.className = 'vd-tree-node';\n node.setAttribute('role', 'treeitem');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n if (item.open) node.classList.add('is-open');\n\n const content = document.createElement('div');\n content.className = 'vd-tree-node-content';\n\n // Toggle\n if (item.children && item.children.length > 0) {\n const toggle = document.createElement('button');\n toggle.type = 'button';\n toggle.className = 'vd-tree-toggle';\n toggle.setAttribute('aria-label', 'Toggle');\n toggle.addEventListener('click', (e) => {\n e.stopPropagation();\n item.open = !item.open;\n node.classList.toggle('is-open');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n });\n content.appendChild(toggle);\n } else {\n const ph = document.createElement('span');\n ph.className = 'vd-tree-toggle-placeholder';\n content.appendChild(ph);\n }\n\n // Checkbox\n if (el.hasAttribute('data-vd-tree-checkbox')) {\n const cb = document.createElement('input');\n cb.type = 'checkbox';\n cb.className = 'vd-tree-checkbox';\n cb.checked = !!item.checked;\n cb.setAttribute('aria-label', item.label);\n cb.addEventListener('change', (e) => {\n e.stopPropagation();\n item.checked = cb.checked;\n if (cascade && item.children) {\n setChildChecked(item.children, cb.checked);\n render(data, el);\n }\n el.dispatchEvent(new CustomEvent('tree:check', {\n detail: { id: item.id, checked: cb.checked, label: item.label },\n bubbles: true\n }));\n });\n content.appendChild(cb);\n }\n\n // Icon\n if (item.icon) {\n const icon = document.createElement('span');\n icon.className = 'vd-tree-icon ' + item.icon;\n content.appendChild(icon);\n }\n\n // Label\n const label = document.createElement('span');\n label.className = 'vd-tree-label';\n label.textContent = item.label || '';\n content.appendChild(label);\n\n node.appendChild(content);\n\n // Children\n if (item.children && item.children.length > 0) {\n const childList = document.createElement('ul');\n childList.className = 'vd-tree-children';\n childList.setAttribute('role', 'group');\n render(item.children, childList);\n node.appendChild(childList);\n }\n\n parent.appendChild(node);\n });\n };\n\n const setChildChecked = (items, checked) => {\n items.forEach(item => {\n item.checked = checked;\n if (item.children) setChildChecked(item.children, checked);\n });\n };\n\n // Keyboard\n const keyHandler = (e) => {\n const focused = document.activeElement;\n if (!el.contains(focused)) return;\n\n const nodes = Array.from(el.querySelectorAll('.vd-tree-node-content'));\n const idx = nodes.indexOf(focused.closest('.vd-tree-node-content'));\n if (idx === -1) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (idx < nodes.length - 1) {\n const next = nodes[idx + 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (next) next.focus();\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (idx > 0) {\n const prev = nodes[idx - 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (prev) prev.focus();\n }\n break;\n }\n };\n\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n render(data, el);\n\n this.instances.set(el, {\n cleanup,\n getData: () => data,\n getChecked: () => {\n const checked = [];\n const collect = (items) => {\n items.forEach(i => {\n if (i.checked) checked.push(i.id || i.label);\n if (i.children) collect(i.children);\n });\n };\n collect(data);\n return checked;\n }\n });\n },\n\n getChecked: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getChecked() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tree', Tree);\n }\n\n window.VanduoTree = Tree;\n\n})();\n", "/**\n * Vanduo Framework - Spotlight (Feature Discovery) Component\n * Guided tour with overlay highlight and step-through tooltip\n */\n\n(function () {\n 'use strict';\n\n const Spotlight = {\n _active: false,\n _steps: [],\n _currentStep: 0,\n _elements: {},\n _cleanup: [],\n _boundTriggers: new WeakMap(),\n _triggerElement: null,\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-spotlight]');\n\n triggers.forEach(trigger => {\n if (this._boundTriggers.has(trigger)) return;\n\n const clickHandler = (event) => {\n event.preventDefault();\n\n const steps = this._parseSteps(trigger.getAttribute('data-vd-spotlight'));\n if (steps.length === 0) return;\n\n this.start(steps, { trigger });\n };\n\n trigger.addEventListener('click', clickHandler);\n this._boundTriggers.set(trigger, clickHandler);\n });\n },\n\n _parseSteps: function (raw) {\n if (typeof raw !== 'string' || raw.trim() === '') return [];\n\n try {\n const parsed = JSON.parse(raw);\n return this._normalizeSteps(parsed);\n } catch (error) {\n console.error('VanduoSpotlight: invalid data-vd-spotlight payload.', error);\n return [];\n }\n },\n\n _normalizeStep: function (step) {\n if (!step || typeof step !== 'object') return null;\n\n const target = step.target;\n const hasSelectorTarget = typeof target === 'string' && target.trim() !== '';\n const hasElementTarget = typeof Element !== 'undefined' && target instanceof Element;\n\n if (!hasSelectorTarget && !hasElementTarget) return null;\n\n const title = typeof step.title === 'string' ? step.title : '';\n const description = typeof step.description === 'string'\n ? step.description\n : (typeof step.content === 'string' ? step.content : '');\n\n return {\n target,\n title,\n description\n };\n },\n\n _normalizeSteps: function (steps) {\n if (!Array.isArray(steps)) return [];\n\n return steps\n .map(step => this._normalizeStep(step))\n .filter(Boolean);\n },\n\n start: function (steps, options) {\n if (this._active) this.stop();\n\n const normalizedSteps = this._normalizeSteps(steps);\n if (normalizedSteps.length === 0) return;\n\n const startOptions = options || {};\n\n this._steps = normalizedSteps;\n this._currentStep = 0;\n this._active = true;\n this._triggerElement = startOptions.trigger || (document.activeElement instanceof HTMLElement ? document.activeElement : null);\n\n // Create overlay\n const overlay = document.createElement('div');\n overlay.className = 'vd-spotlight-overlay';\n overlay.setAttribute('aria-hidden', 'true');\n document.body.appendChild(overlay);\n\n // Create tooltip\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-spotlight-tooltip';\n tooltip.setAttribute('role', 'dialog');\n tooltip.setAttribute('aria-modal', 'true');\n tooltip.tabIndex = -1;\n document.body.appendChild(tooltip);\n\n this._elements = { overlay, tooltip };\n\n // ESC to close\n const escHandler = (e) => { if (e.key === 'Escape') this.stop(); };\n document.addEventListener('keydown', escHandler);\n this._cleanup.push(() => document.removeEventListener('keydown', escHandler));\n\n // Overlay click to close\n overlay.addEventListener('click', () => this.stop());\n\n this._showStep(this._currentStep);\n },\n\n _showStep: function (index) {\n const step = this._steps[index];\n if (!step) return;\n\n const target = typeof step.target === 'string' ? document.querySelector(step.target) : step.target;\n const { tooltip } = this._elements;\n\n // Remove previous highlight\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n // Highlight target\n if (target) {\n target.classList.add('vd-spotlight-target');\n target.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n\n // Build tooltip content\n const total = this._steps.length;\n tooltip.innerHTML = '';\n tooltip.removeAttribute('aria-labelledby');\n tooltip.removeAttribute('aria-describedby');\n\n if (step.title) {\n const title = document.createElement('h4');\n title.className = 'vd-spotlight-title';\n title.id = 'vd-spotlight-title-' + index + '-' + Date.now();\n title.textContent = step.title;\n tooltip.appendChild(title);\n tooltip.setAttribute('aria-labelledby', title.id);\n }\n\n if (step.description) {\n const desc = document.createElement('p');\n desc.className = 'vd-spotlight-description';\n desc.id = 'vd-spotlight-description-' + index + '-' + Date.now();\n desc.textContent = step.description;\n tooltip.appendChild(desc);\n tooltip.setAttribute('aria-describedby', desc.id);\n }\n\n // Footer\n const footer = document.createElement('div');\n footer.className = 'vd-spotlight-footer';\n footer.setAttribute('aria-label', 'Step ' + (index + 1) + ' of ' + total);\n\n const counter = document.createElement('span');\n counter.className = 'vd-spotlight-counter';\n counter.textContent = (index + 1) + ' / ' + total;\n\n const actions = document.createElement('div');\n actions.className = 'vd-spotlight-actions';\n\n if (index > 0) {\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-spotlight-btn';\n prevBtn.textContent = 'Back';\n prevBtn.addEventListener('click', () => this.prev());\n actions.appendChild(prevBtn);\n }\n\n const skipBtn = document.createElement('button');\n skipBtn.type = 'button';\n skipBtn.className = 'vd-spotlight-btn';\n skipBtn.textContent = 'Skip';\n skipBtn.addEventListener('click', () => this.stop());\n actions.appendChild(skipBtn);\n\n if (index < total - 1) {\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n nextBtn.textContent = 'Next';\n nextBtn.addEventListener('click', () => this.next());\n actions.appendChild(nextBtn);\n } else {\n const doneBtn = document.createElement('button');\n doneBtn.type = 'button';\n doneBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n doneBtn.textContent = 'Done';\n doneBtn.addEventListener('click', () => this.stop());\n actions.appendChild(doneBtn);\n }\n\n footer.appendChild(counter);\n footer.appendChild(actions);\n tooltip.appendChild(footer);\n\n // Position tooltip near target\n if (target) {\n requestAnimationFrame(() => {\n const rect = target.getBoundingClientRect();\n const tRect = tooltip.getBoundingClientRect();\n let top = rect.bottom + 12 + window.scrollY;\n let left = rect.left + (rect.width - tRect.width) / 2 + window.scrollX;\n\n // Keep in viewport\n left = Math.max(8, Math.min(left, window.innerWidth - tRect.width - 8));\n if (top + tRect.height > window.innerHeight + window.scrollY) {\n top = rect.top - tRect.height - 12 + window.scrollY;\n }\n\n tooltip.style.top = top + 'px';\n tooltip.style.left = left + 'px';\n });\n }\n\n document.dispatchEvent(new CustomEvent('spotlight:step', {\n detail: { index, step: index, total, data: step }\n }));\n },\n\n next: function () {\n if (this._currentStep < this._steps.length - 1) {\n this._currentStep++;\n this._showStep(this._currentStep);\n }\n },\n\n prev: function () {\n if (this._currentStep > 0) {\n this._currentStep--;\n this._showStep(this._currentStep);\n }\n },\n\n stop: function () {\n if (!this._active) return;\n\n const total = this._steps.length;\n const detail = {\n completedSteps: total === 0 ? 0 : Math.min(this._currentStep + 1, total),\n total,\n completed: total > 0 && this._currentStep >= total - 1\n };\n\n this._active = false;\n\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n if (this._elements.overlay && this._elements.overlay.parentNode) {\n this._elements.overlay.parentNode.removeChild(this._elements.overlay);\n }\n if (this._elements.tooltip && this._elements.tooltip.parentNode) {\n this._elements.tooltip.parentNode.removeChild(this._elements.tooltip);\n }\n\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n this._elements = {};\n this._steps = [];\n this._currentStep = 0;\n\n if (this._triggerElement && this._triggerElement.isConnected && typeof this._triggerElement.focus === 'function') {\n this._triggerElement.focus();\n }\n this._triggerElement = null;\n\n document.dispatchEvent(new CustomEvent('spotlight:end', { detail }));\n },\n\n destroyAll: function () {\n this.stop();\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('spotlight', Spotlight);\n }\n\n window.VanduoSpotlight = Spotlight;\n\n})();\n", "/**\n * Vanduo Framework - Music Player Component\n * HTML5 Audio-based music player with transport controls, volume,\n * and optional shuffle, seek bar, and playlist features.\n *\n * Options (passed to MusicPlayer.init or data-music-player-options):\n * tracks {Array} - [{name, url}] \u2014 required\n * volume {number} - Initial volume 0\u20131 (default 0.5)\n * shuffle {boolean} - Shuffle on init (default false)\n * showProgress {boolean} - Show seek/progress bar (default false)\n * showPlaylist {boolean} - Show expandable playlist panel (default false)\n * autoAdvance {boolean} - Auto-play next track on end (default true)\n *\n * Custom events (all bubble, dispatched on container):\n * musicplayer:play \u2014 playback started\n * musicplayer:pause \u2014 playback paused\n * musicplayer:trackchange \u2014 detail: { index, name, url }\n * musicplayer:volumechange \u2014 detail: { volume }\n * musicplayer:ended \u2014 last track ended (autoAdvance=false only)\n *\n * Programmatic API:\n * MusicPlayer.init(container?, options?)\n * MusicPlayer.play(container)\n * MusicPlayer.pause(container)\n * MusicPlayer.toggle(container)\n * MusicPlayer.next(container)\n * MusicPlayer.previous(container)\n * MusicPlayer.setVolume(container, value)\n * MusicPlayer.setTrack(container, index)\n * MusicPlayer.shuffle(container)\n * MusicPlayer.getState(container)\n * MusicPlayer.destroy(container)\n * MusicPlayer.destroyAll()\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fisher-Yates shuffle (returns new array).\n * @param {Array} arr\n * @returns {Array}\n */\n function shuffleArray(arr) {\n const shuffled = arr.slice();\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n const tmp = shuffled[i];\n shuffled[i] = shuffled[j];\n shuffled[j] = tmp;\n }\n return shuffled;\n }\n\n /**\n * Format seconds as m:ss.\n * @param {number} seconds\n * @returns {string}\n */\n function formatTime(seconds) {\n if (!isFinite(seconds) || seconds < 0) return '0:00';\n const m = Math.floor(seconds / 60);\n const s = Math.floor(seconds % 60);\n return m + ':' + (s < 10 ? '0' : '') + s;\n }\n\n /**\n * Set CSS background-size on a range input to visually fill the track.\n * @param {HTMLInputElement} input\n */\n function updateRangeFill(input) {\n const min = parseFloat(input.min) || 0;\n const max = parseFloat(input.max) || 1;\n const val = parseFloat(input.value) || 0;\n const pct = ((val - min) / (max - min)) * 100;\n input.style.setProperty('--fill', pct + '%');\n // Fallback inline gradient for browsers without ::-moz-range-progress\n input.style.backgroundImage =\n 'linear-gradient(to right, var(--music-player-track-fill, currentColor) 0%, ' +\n 'var(--music-player-track-fill, currentColor) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) 100%)';\n }\n\n /* \u2500\u2500\u2500 Phosphor icon helper (matches framework icon style) \u2500 */\n\n /**\n * Return an element (Phosphor icon).\n * @param {string} name\n * @returns {HTMLElement}\n */\n function icon(name) {\n const el = document.createElement('i');\n el.className = 'ph ph-' + name;\n el.setAttribute('aria-hidden', 'true');\n return el;\n }\n\n /* \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const MusicPlayer = {\n /** @type {Map} */\n instances: new Map(),\n\n /**\n * Default options.\n */\n defaults: {\n tracks: [],\n volume: 0.5,\n shuffle: false,\n showProgress: false,\n showPlaylist: false,\n autoAdvance: true,\n },\n\n /**\n * Auto-initialize all .vd-music-player / [data-music-player] elements.\n * Options can be provided via data-music-player-options (JSON string).\n */\n init: function () {\n document.querySelectorAll('.vd-music-player, [data-music-player]').forEach((el) => {\n if (this.instances.has(el)) return;\n\n let opts = {};\n const attr = el.getAttribute('data-music-player-options');\n if (attr) {\n try { opts = JSON.parse(attr); } catch (_) { /* ignore malformed JSON */ }\n }\n this.initPlayer(el, opts);\n });\n },\n\n /**\n * Initialize a single player element.\n * @param {HTMLElement} container\n * @param {Object} [options]\n */\n initPlayer: function (container, options) {\n const opts = Object.assign({}, this.defaults, options || {});\n\n // Validate and normalise tracks\n const rawTracks = Array.isArray(opts.tracks) ? opts.tracks : [];\n const tracks = rawTracks.filter((t) => t && typeof t.url === 'string' && t.url.trim());\n\n // Build shuffled working copy without mutating opts\n const trackList = opts.shuffle ? shuffleArray(tracks) : tracks.slice();\n\n /* \u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const state = {\n tracks: trackList,\n originalTracks: tracks.slice(),\n currentIndex: 0,\n isPlaying: false,\n volume: Math.max(0, Math.min(1, opts.volume)),\n shuffle: opts.shuffle,\n showProgress: opts.showProgress,\n showPlaylist: opts.showPlaylist,\n autoAdvance: opts.autoAdvance,\n audio: null,\n };\n\n /* \u2500\u2500 Audio element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const audio = new Audio();\n audio.volume = state.volume;\n audio.preload = 'metadata';\n state.audio = audio;\n\n /* \u2500\u2500 Build DOM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n this._buildDOM(container, state);\n\n // Grab references after DOM build\n const refs = {\n btnPlay: container.querySelector('.vd-music-player-btn-play'),\n btnPrev: container.querySelector('.vd-music-player-btn-prev'),\n btnNext: container.querySelector('.vd-music-player-btn-next'),\n btnShuffle: container.querySelector('.vd-music-player-btn-shuffle'),\n btnPlaylist: container.querySelector('.vd-music-player-btn-playlist'),\n trackName: container.querySelector('.vd-music-player-track-name'),\n volumeSlider: container.querySelector('.vd-music-player-volume-slider'),\n volumeIcon: container.querySelector('.vd-music-player-volume-icon'),\n progressBar: container.querySelector('.vd-music-player-progress-bar'),\n timeElapsed: container.querySelector('.vd-music-player-time-elapsed'),\n timeDuration: container.querySelector('.vd-music-player-time-duration'),\n playlistPanel: container.querySelector('.vd-music-player-playlist'),\n };\n\n /* \u2500\u2500 Internal render helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const renderPlayIcon = () => {\n const btn = refs.btnPlay;\n if (!btn) return;\n btn.innerHTML = '';\n btn.appendChild(icon(state.isPlaying ? 'pause' : 'play'));\n btn.setAttribute('aria-label', state.isPlaying ? 'Pause' : 'Play');\n btn.classList.toggle('is-active', state.isPlaying);\n };\n\n const renderTrackName = () => {\n const el = refs.trackName;\n if (!el) return;\n const track = state.tracks[state.currentIndex];\n if (track) {\n el.textContent = track.name || 'Unknown Track';\n el.classList.remove('is-idle');\n } else {\n el.textContent = 'No tracks loaded';\n el.classList.add('is-idle');\n }\n };\n\n const renderVolumeIcon = () => {\n const el = refs.volumeIcon;\n if (!el) return;\n el.innerHTML = '';\n const v = state.volume;\n const name = v === 0 ? 'speaker-none' : v < 0.5 ? 'speaker-low' : 'speaker-high';\n el.appendChild(icon(name));\n };\n\n const renderShuffleBtn = () => {\n const btn = refs.btnShuffle;\n if (!btn) return;\n btn.classList.toggle('is-active', state.shuffle);\n btn.setAttribute('aria-pressed', state.shuffle ? 'true' : 'false');\n };\n\n const renderPlaylistItems = () => {\n const panel = refs.playlistPanel;\n if (!panel) return;\n panel.innerHTML = '';\n state.tracks.forEach((track, i) => {\n const item = document.createElement('button');\n item.className =\n 'vd-music-player-playlist-item' + (i === state.currentIndex ? ' is-active' : '');\n item.type = 'button';\n item.setAttribute('data-index', String(i));\n item.setAttribute('aria-current', i === state.currentIndex ? 'true' : 'false');\n\n const num = document.createElement('span');\n num.className = 'vd-music-player-playlist-num';\n num.textContent = String(i + 1);\n\n const name = document.createElement('span');\n name.className = 'vd-music-player-playlist-name';\n name.textContent = track.name || 'Track ' + (i + 1);\n\n item.appendChild(num);\n item.appendChild(name);\n panel.appendChild(item);\n });\n };\n\n const renderProgress = () => {\n const bar = refs.progressBar;\n if (!bar || !audio.duration) return;\n const pct = (audio.currentTime / audio.duration) * 100;\n bar.value = String(pct);\n updateRangeFill(bar);\n if (refs.timeElapsed) refs.timeElapsed.textContent = formatTime(audio.currentTime);\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n };\n\n /* \u2500\u2500 Load track \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const loadTrack = (index, autoPlay) => {\n const track = state.tracks[index];\n if (!track) return;\n state.currentIndex = index;\n audio.src = track.url;\n renderTrackName();\n renderPlaylistItems();\n\n // Reset progress\n if (refs.progressBar) {\n refs.progressBar.value = '0';\n updateRangeFill(refs.progressBar);\n }\n if (refs.timeElapsed) refs.timeElapsed.textContent = '0:00';\n if (refs.timeDuration) refs.timeDuration.textContent = '0:00';\n\n container.dispatchEvent(\n new CustomEvent('musicplayer:trackchange', {\n bubbles: true,\n detail: { index, name: track.name, url: track.url },\n })\n );\n\n if (autoPlay) {\n audio.play().catch(() => { /* browser may block autoplay */ });\n }\n };\n\n /* \u2500\u2500 Audio event listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const cleanupFunctions = [];\n\n const onPlay = () => {\n state.isPlaying = true;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:play', { bubbles: true }));\n };\n\n const onPause = () => {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:pause', { bubbles: true }));\n };\n\n const onEnded = () => {\n if (state.autoAdvance && state.tracks.length > 1) {\n const next = (state.currentIndex + 1) % state.tracks.length;\n loadTrack(next, true);\n } else {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:ended', { bubbles: true }));\n }\n };\n\n const onTimeUpdate = () => {\n if (state.showProgress) renderProgress();\n };\n\n const onLoadedMetadata = () => {\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n if (refs.progressBar) {\n refs.progressBar.max = '100';\n updateRangeFill(refs.progressBar);\n }\n };\n\n audio.addEventListener('play', onPlay);\n audio.addEventListener('pause', onPause);\n audio.addEventListener('ended', onEnded);\n audio.addEventListener('timeupdate', onTimeUpdate);\n audio.addEventListener('loadedmetadata', onLoadedMetadata);\n cleanupFunctions.push(() => {\n audio.removeEventListener('play', onPlay);\n audio.removeEventListener('pause', onPause);\n audio.removeEventListener('ended', onEnded);\n audio.removeEventListener('timeupdate', onTimeUpdate);\n audio.removeEventListener('loadedmetadata', onLoadedMetadata);\n audio.pause();\n audio.src = '';\n });\n\n /* \u2500\u2500 Control button listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n if (refs.btnPlay) {\n const handler = () => {\n if (!audio.src && state.tracks.length) loadTrack(state.currentIndex, false);\n if (state.isPlaying) {\n audio.pause();\n } else {\n audio.play().catch(() => {});\n }\n };\n refs.btnPlay.addEventListener('click', handler);\n cleanupFunctions.push(() => refs.btnPlay.removeEventListener('click', handler));\n\n // Keyboard: Space / Enter (already native for `;\n }\n\n // Generate neutral color swatches\n let neutralSwatches = '';\n for (const [key, value] of Object.entries(this.NEUTRAL_COLORS)) {\n neutralSwatches += ``;\n }\n\n // Generate radius buttons\n let radiusButtons = '';\n this.RADIUS_OPTIONS.forEach(r => {\n radiusButtons += ``;\n });\n\n // Generate font options\n let fontOptions = '';\n for (const [key, value] of Object.entries(this.FONT_OPTIONS)) {\n fontOptions += ``;\n }\n\n return `\n
    \n

    Customize Theme

    \n \n
    \n
    \n\n
    \n \n
    \n ${primarySwatches}\n
    \n
    \n
    \n \n
    \n ${neutralSwatches}\n
    \n
    \n
    \n \n
    \n ${radiusButtons}\n
    \n
    \n
    \n \n \n
    \n
    \n
    \n \n
    \n `;\n },\n\n /**\n * Bind event listeners\n */\n /**\n * Check whether the current primary color is one of the auto-defaults\n * (i.e. the user hasn't explicitly picked a non-default color).\n */\n isUsingDefaultPrimary: function () {\n return this.state.primary === this.DEFAULTS.PRIMARY_LIGHT ||\n this.state.primary === this.DEFAULTS.PRIMARY_DARK;\n },\n\n /**\n * When primary is still one of the auto-default palette keys (black/amber) but\n * localStorage was written under a different theme (or OS changed in system mode),\n * align in-memory state before applyAllPreferences runs \u2014 avoids amber+light / black+dark drift.\n */\n _normalizeDefaultPrimaryIfStaleWithStoredTheme: function () {\n if (!this.isUsingDefaultPrimary()) {\n return;\n }\n const expected = this.getDefaultPrimary(this.state.theme);\n if (this.state.primary !== expected) {\n this.state.primary = expected;\n }\n },\n\n bindEvents: function () {\n // Trigger click - bind to any trigger button\n if (this.elements.trigger) {\n this.addListener(this.elements.trigger, 'click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggle();\n });\n }\n\n this.bindPanelEvents();\n\n // Listen for OS dark/light changes so we can swap the default primary\n if (window.matchMedia) {\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const handler = () => {\n if (this.state.theme === 'system' && this.isUsingDefaultPrimary()) {\n const newDefault = this.getDefaultPrimary('system');\n if (newDefault !== this.state.primary) {\n this.applyPrimary(newDefault);\n this.updateUI();\n }\n }\n };\n mq.addEventListener('change', handler);\n this._cleanup.push(() => mq.removeEventListener('change', handler));\n }\n\n // Close on outside click\n this.addListener(document, 'click', (e) => {\n if (this.state.isOpen && this.elements.customizer && !this.elements.customizer.contains(e.target)) {\n this.close();\n }\n });\n\n // Close on Escape key\n this.addListener(document, 'keydown', (e) => {\n if (e.key === 'Escape' && this.state.isOpen) {\n this.close();\n }\n });\n },\n\n /**\n * Toggle panel open/close\n */\n toggle: function () {\n if (this.state.isOpen) {\n this.close();\n } else {\n this.open();\n }\n },\n\n /**\n * Open the panel\n */\n open: function () {\n this.state.isOpen = true;\n\n // Ensure panel is positioned correctly before opening\n this.positionPanel();\n\n if (this.elements.panel) {\n this.elements.panel.classList.add('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'true');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.add('is-active');\n }\n\n this.dispatchEvent('panel-open', { isOpen: true });\n },\n\n /**\n * Close the panel\n */\n close: function () {\n this.state.isOpen = false;\n\n if (this.elements.panel) {\n this.elements.panel.classList.remove('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'false');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.remove('is-active');\n }\n\n this.dispatchEvent('panel-close', { isOpen: false });\n },\n\n /**\n * Update UI to reflect current state\n */\n updateUI: function () {\n if (!this.elements.panel) return;\n\n // Update primary color swatches\n this.elements.panel.querySelectorAll('[data-color]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.color === this.state.primary);\n });\n\n // Update neutral color swatches\n this.elements.panel.querySelectorAll('[data-neutral]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.neutral === this.state.neutral);\n });\n\n // Update radius buttons\n this.elements.panel.querySelectorAll('[data-radius]').forEach(btn => {\n btn.classList.toggle('is-active', btn.dataset.radius === this.state.radius);\n });\n\n // Update font selector\n const fontSelect = this.elements.panel.querySelector('[data-customizer-font]');\n if (fontSelect) {\n fontSelect.value = this.state.font;\n }\n\n },\n\n /**\n * Reset all preferences to defaults\n */\n reset: function () {\n this.applyTheme(this.DEFAULTS.THEME);\n this.applyPrimary(this.getDefaultPrimary(this.DEFAULTS.THEME));\n this.applyNeutral(this.DEFAULTS.NEUTRAL);\n this.applyRadius(this.DEFAULTS.RADIUS);\n this.applyFont(this.DEFAULTS.FONT);\n this.updateUI();\n\n this.dispatchEvent('reset', { state: { ...this.state } });\n },\n\n /**\n * Get current state\n */\n getState: function () {\n return { ...this.state };\n },\n\n /**\n * Programmatically set preferences\n */\n setPreferences: function (prefs) {\n if (prefs.primary) this.applyPrimary(prefs.primary);\n if (prefs.neutral) this.applyNeutral(prefs.neutral);\n if (prefs.radius) this.applyRadius(prefs.radius);\n if (prefs.font) this.applyFont(prefs.font);\n if (prefs.theme) this.applyTheme(prefs.theme);\n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n destroyAll: function () {\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n\n if (this.elements.panel) {\n this.elements.panel.removeAttribute('data-customizer-initialized');\n }\n\n this.close();\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeCustomizer', ThemeCustomizer);\n }\n\n // Expose globally for convenience\n window.ThemeCustomizer = ThemeCustomizer;\n})();\n", "/**\n * Vanduo Framework - Theme Switcher\n * Handles light/dark/system theme toggling and persistence\n */\n\n(function () {\n 'use strict';\n\n const ThemeSwitcher = {\n isInitialized: false,\n _mediaQuery: null,\n _onMediaChange: null,\n\n init: function () {\n this.STORAGE_KEY = 'vanduo-theme-preference';\n this.state = {\n preference: this.getPreference() // 'light', 'dark', or 'system'\n };\n\n if (this.isInitialized) {\n this.applyTheme();\n this.renderUI();\n this.updateUI();\n return;\n }\n\n this.isInitialized = true;\n\n this.applyTheme();\n this.listenForSystemChanges();\n this.renderUI();\n\n console.log('Vanduo Theme Switcher initialized');\n },\n\n getPreference: function () {\n return this.getStorageValue(this.STORAGE_KEY, 'system');\n },\n\n setPreference: function (pref) {\n this.state.preference = pref;\n this.setStorageValue(this.STORAGE_KEY, pref);\n this.applyTheme();\n \n // Coordinate with ThemeCustomizer for primary color swap if available\n // Check _isApplying flag to prevent circular updates\n if (window.ThemeCustomizer && window.ThemeCustomizer.applyTheme && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme(pref);\n }\n \n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n applyTheme: function () {\n const pref = this.state.preference;\n\n if (pref === 'system') {\n // When in system mode, we remove the data attribute to let the media query take over\n // or we can explicitly set it. Explicitly setting it ensures consistency if we rely on [data-theme]\n // But if we rely on @media in CSS, we might want to remove attributes.\n // However, our CSS strategy uses :root:not([data-theme=\"light\"]) inside media query for system dark fallback\n // which is a bit complex.\n\n // Simpler approach: \n // If preference is system, REMOVE data-theme attribute. Let CSS media queries handle it.\n document.documentElement.removeAttribute('data-theme');\n } else {\n document.documentElement.setAttribute('data-theme', pref);\n }\n },\n\n listenForSystemChanges: function () {\n if (this._mediaQuery && this._onMediaChange) {\n return;\n }\n\n this._mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n this._onMediaChange = _e => {\n if (this.state.preference === 'system') {\n // Re-apply (effectively just to ensure consistency, though removing attribute usually suffices)\n this.applyTheme();\n // Keep default primary (black/amber) aligned when OS scheme changes while in system mode\n if (window.ThemeCustomizer && typeof window.ThemeCustomizer.applyTheme === 'function' && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme('system');\n }\n }\n };\n this._mediaQuery.addEventListener('change', this._onMediaChange);\n },\n\n // Helper to facilitate UI creation if needed, though often UI is in HTML\n renderUI: function () {\n // Look for any uninitialized theme toggles\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.getAttribute('data-theme-initialized') === 'true') {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n }\n return;\n }\n\n // Simplified UI Binding - assumes a select or a button cycle\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n const onChange = (e) => {\n this.setPreference(e.target.value);\n };\n toggle.addEventListener('change', onChange);\n toggle._themeToggleHandler = onChange;\n } else {\n // Button implementation (cycle)\n const onClick = () => {\n const modes = ['system', 'light', 'dark'];\n const nextIndex = (modes.indexOf(this.state.preference) + 1) % modes.length;\n this.setPreference(modes[nextIndex]);\n };\n toggle.addEventListener('click', onClick);\n toggle._themeToggleHandler = onClick;\n }\n // Mark as initialized\n toggle.setAttribute('data-theme-initialized', 'true');\n });\n },\n\n updateUI: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n } else {\n // Update button text/icon if needed\n // e.g. toggle.textContent = this.state.preference;\n // For now, assume the user handles visual state or generic text\n\n // If there is an icon or text span inside, update it\n const span = toggle.querySelector('.theme-current-label');\n if (span) {\n span.textContent = this.state.preference.charAt(0).toUpperCase() + this.state.preference.slice(1);\n }\n }\n });\n },\n\n destroyAll: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"][data-theme-initialized=\"true\"]');\n toggles.forEach(toggle => {\n if (toggle._themeToggleHandler) {\n const eventName = toggle.tagName === 'SELECT' ? 'change' : 'click';\n toggle.removeEventListener(eventName, toggle._themeToggleHandler);\n delete toggle._themeToggleHandler;\n }\n toggle.removeAttribute('data-theme-initialized');\n });\n\n if (this._mediaQuery && this._onMediaChange) {\n this._mediaQuery.removeEventListener('change', this._onMediaChange);\n }\n\n this._mediaQuery = null;\n this._onMediaChange = null;\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeSwitcher', ThemeSwitcher);\n }\n})();\n", "/**\n * Vanduo Framework - Toast Component\n * Popup notifications for user feedback\n */\n\n(function() {\n 'use strict';\n\n /**\n * Toast Component\n */\n const Toast = {\n // Default options\n defaults: {\n position: 'top-right',\n duration: 5000,\n dismissible: true,\n showProgress: true,\n pauseOnHover: true\n },\n\n // Container cache\n containers: {},\n\n /**\n * Get or create a toast container for a position\n * @param {string} position - Container position\n * @returns {HTMLElement} Toast container element\n */\n getContainer: function(position) {\n if (this.containers[position]) {\n return this.containers[position];\n }\n\n const container = document.createElement('div');\n container.className = `vd-toast-container vd-toast-container-${position}`;\n container.setAttribute('role', 'status');\n container.setAttribute('aria-live', 'polite');\n container.setAttribute('aria-atomic', 'false');\n document.body.appendChild(container);\n this.containers[position] = container;\n\n return container;\n },\n\n /**\n * Show a toast notification\n * @param {Object|string} options - Toast options or message string\n * @param {string} [type] - Toast type (success, error, warning, info)\n * @param {number} [duration] - Auto-dismiss duration in ms\n * @returns {HTMLElement} Toast element\n */\n show: function(options, type, duration) {\n // Support simple API: Toast.show('Message', 'success', 3000)\n if (typeof options === 'string') {\n options = {\n message: options,\n type: type,\n duration: duration\n };\n }\n\n const config = Object.assign({}, this.defaults, options);\n const container = this.getContainer(config.position);\n\n // Create toast element\n const toast = document.createElement('div');\n toast.className = 'vd-toast';\n\n if (config.type) {\n toast.classList.add(`vd-toast-${config.type}`);\n }\n\n if (config.solid) {\n toast.classList.add('vd-toast-solid');\n }\n\n if (config.showProgress && config.duration > 0) {\n toast.classList.add('vd-toast-with-progress');\n }\n\n // Build toast content\n let html = '';\n\n // Icon (sanitize custom icons, default icons are trusted SVG)\n if (config.icon) {\n const safeIcon = typeof sanitizeHtml === 'function' ? sanitizeHtml(config.icon) : escapeHtml(config.icon);\n html += `${safeIcon}`;\n } else if (config.type) {\n html += `${this.getDefaultIcon(config.type)}`;\n }\n\n // Local escape helper \u2014 guarantees HTML-safe output even if the\n // global escapeHtml utility is not loaded in the current bundle.\n const _esc = typeof escapeHtml === 'function'\n ? escapeHtml\n : function (s) {\n const d = document.createElement('div');\n d.appendChild(document.createTextNode(s));\n return d.innerHTML;\n };\n\n // Content (escape text to prevent injection)\n html += '
    ';\n if (config.title) {\n html += `
    ${_esc(String(config.title))}
    `;\n }\n if (config.message) {\n html += `
    ${_esc(String(config.message))}
    `;\n }\n html += '
    ';\n\n // Close button\n if (config.dismissible) {\n html += '';\n }\n\n // Progress bar\n if (config.showProgress && config.duration > 0) {\n const safeDuration = parseInt(config.duration, 10) || 0;\n html += `
    `;\n }\n\n toast.innerHTML = html;\n\n // Add to container\n container.appendChild(toast);\n\n toast._toastCleanup = [];\n\n // Set up close button handler\n if (config.dismissible) {\n const closeBtn = toast.querySelector('.vd-toast-close');\n const onClose = () => {\n this.dismiss(toast);\n };\n closeBtn.addEventListener('click', onClose);\n toast._toastCleanup.push(() => closeBtn.removeEventListener('click', onClose));\n }\n\n // Pause on hover\n let timeoutId = null;\n let remainingTime = config.duration;\n let startTime = null;\n\n const startTimer = () => {\n if (config.duration > 0) {\n startTime = Date.now();\n timeoutId = setTimeout(() => {\n this.dismiss(toast);\n }, remainingTime);\n toast._toastTimeoutId = timeoutId;\n\n // Resume progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'running';\n }\n }\n };\n\n const pauseTimer = () => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n timeoutId = null;\n toast._toastTimeoutId = null;\n remainingTime -= Date.now() - startTime;\n\n // Pause progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'paused';\n }\n }\n };\n\n if (config.pauseOnHover) {\n toast.addEventListener('mouseenter', pauseTimer);\n toast.addEventListener('mouseleave', startTimer);\n toast._toastCleanup.push(\n () => toast.removeEventListener('mouseenter', pauseTimer),\n () => toast.removeEventListener('mouseleave', startTimer)\n );\n }\n\n // Trigger enter animation\n requestAnimationFrame(() => {\n toast.classList.add('is-visible');\n startTimer();\n });\n\n // Store config on element for later access\n toast._toastConfig = config;\n\n // Dispatch show event\n const showEvent = new CustomEvent('toast:show', {\n bubbles: true,\n detail: { toast, config }\n });\n toast.dispatchEvent(showEvent);\n\n return toast;\n },\n\n /**\n * Dismiss a toast\n * @param {HTMLElement} toast - Toast element to dismiss\n */\n dismiss: function(toast) {\n if (!toast || toast.classList.contains('is-exiting')) return;\n\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n toast._toastTimeoutId = null;\n }\n\n toast.classList.remove('is-visible');\n toast.classList.add('is-exiting');\n\n // Dispatch dismiss event\n const dismissEvent = new CustomEvent('toast:dismiss', {\n bubbles: true,\n detail: { toast }\n });\n toast.dispatchEvent(dismissEvent);\n\n // Remove after animation\n const handleTransitionEnd = () => {\n toast.removeEventListener('transitionend', handleTransitionEnd);\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n };\n\n toast.addEventListener('transitionend', handleTransitionEnd);\n\n // Fallback removal if transition doesn't fire\n setTimeout(() => {\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n }, 400);\n },\n\n /**\n * Destroy all toasts and containers\n */\n destroyAll: function() {\n Object.keys(this.containers).forEach(position => {\n const container = this.containers[position];\n if (!container) return;\n\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => {\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n }\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n });\n\n if (container.parentElement) {\n container.parentElement.removeChild(container);\n }\n });\n\n this.containers = {};\n },\n\n /**\n * Dismiss all toasts\n * @param {string} [position] - Optional position to clear (clears all if not specified)\n */\n dismissAll: function(position) {\n if (position && this.containers[position]) {\n const toasts = this.containers[position].querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n } else {\n Object.values(this.containers).forEach(container => {\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n });\n }\n },\n\n /**\n * Get default icon SVG for a type\n * @param {string} type - Toast type\n * @returns {string} SVG icon markup\n */\n getDefaultIcon: function(type) {\n const icons = {\n success: '',\n error: '',\n warning: '',\n info: ''\n };\n\n return icons[type] || '';\n },\n\n /**\n * Convenience methods for common toast types\n */\n success: function(message, options) {\n return this.show(Object.assign({ message, type: 'success' }, options));\n },\n\n error: function(message, options) {\n return this.show(Object.assign({ message, type: 'error' }, options));\n },\n\n warning: function(message, options) {\n return this.show(Object.assign({ message, type: 'warning' }, options));\n },\n\n info: function(message, options) {\n return this.show(Object.assign({ message, type: 'info' }, options));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('toast', Toast);\n }\n\n // Also expose globally for convenience\n window.Toast = Toast;\n\n})();\n", "/**\n * Vanduo Framework - Tooltips Component\n * JavaScript functionality for tooltips\n */\n\n(function () {\n 'use strict';\n\n /**\n * Tooltips Component\n */\n const Tooltips = {\n tooltips: new Map(),\n delayTimers: new Map(),\n\n /**\n * Sanitize HTML \u2014 delegates to shared sanitizeHtml from helpers.js\n * @param {string} input\n * @returns {string} sanitized HTML\n */\n sanitizeHtml: function (input) {\n if (typeof sanitizeHtml === 'function') {\n return sanitizeHtml(input);\n }\n // Fallback: strip all HTML\n const div = document.createElement('div');\n div.textContent = input || '';\n return div.innerHTML;\n },\n\n /**\n * Initialize tooltips\n */\n init: function () {\n const elements = document.querySelectorAll('[data-tooltip], [data-tooltip-html]');\n\n elements.forEach(element => {\n if (this.tooltips.has(element)) {\n return;\n }\n this.initTooltip(element);\n });\n },\n\n /**\n * Initialize a single tooltip\n * @param {HTMLElement} element - Element with tooltip\n */\n initTooltip: function (element) {\n const tooltip = this.createTooltip(element);\n const cleanupFunctions = [];\n\n // Show on hover/focus\n const enterHandler = () => { this.showTooltip(element, tooltip); };\n const leaveHandler = () => { this.hideTooltip(element, tooltip); };\n const focusHandler = () => { this.showTooltip(element, tooltip); };\n const blurHandler = () => { this.hideTooltip(element, tooltip); };\n\n element.addEventListener('mouseenter', enterHandler);\n element.addEventListener('mouseleave', leaveHandler);\n element.addEventListener('focus', focusHandler);\n element.addEventListener('blur', blurHandler);\n\n cleanupFunctions.push(\n () => element.removeEventListener('mouseenter', enterHandler),\n () => element.removeEventListener('mouseleave', leaveHandler),\n () => element.removeEventListener('focus', focusHandler),\n () => element.removeEventListener('blur', blurHandler)\n );\n\n this.tooltips.set(element, { tooltip, cleanup: cleanupFunctions });\n },\n\n /**\n * Create tooltip element\n * @param {HTMLElement} element - Target element\n * @returns {HTMLElement} Tooltip element\n */\n createTooltip: function (element) {\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-tooltip';\n tooltip.setAttribute('role', 'tooltip');\n tooltip.setAttribute('aria-hidden', 'true');\n\n // Generate unique ID and link via aria-describedby\n const tooltipId = 'tooltip-' + Math.random().toString(36).substr(2, 9);\n tooltip.id = tooltipId;\n element.setAttribute('aria-describedby', tooltipId);\n\n // Get content\n const htmlContent = element.dataset.tooltipHtml;\n const textContent = element.dataset.tooltip;\n\n if (htmlContent) {\n tooltip.innerHTML = this.sanitizeHtml(htmlContent);\n tooltip.classList.add('vd-tooltip-html');\n } else if (textContent) {\n tooltip.textContent = textContent;\n }\n\n // Get placement\n const placement = element.dataset.tooltipPlacement || element.dataset.placement || 'top';\n tooltip.setAttribute('data-placement', placement);\n tooltip.classList.add(`vd-tooltip-${placement}`);\n\n // Get variant\n if (element.dataset.tooltipVariant) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipVariant}`);\n }\n\n // Get size\n if (element.dataset.tooltipSize) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipSize}`);\n }\n\n // Get delay\n const delay = parseInt(element.dataset.tooltipDelay) || 0;\n tooltip.dataset.delay = delay;\n\n document.body.appendChild(tooltip);\n\n return tooltip;\n },\n\n /**\n * Show tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n showTooltip: function (element, tooltip) {\n const delay = parseInt(tooltip.dataset.delay) || 0;\n\n if (delay > 0) {\n const timer = setTimeout(() => {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }, delay);\n this.delayTimers.set(element, timer);\n } else {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }\n },\n\n /**\n * Hide tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n hideTooltip: function (element, tooltip) {\n // Clear delay timer if exists\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n tooltip.classList.remove('is-visible');\n tooltip.setAttribute('aria-hidden', 'true');\n },\n\n /**\n * Position tooltip relative to element\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n positionTooltip: function (element, tooltip) {\n const placement = tooltip.dataset.placement || 'top';\n const rect = element.getBoundingClientRect();\n const tooltipRect = tooltip.getBoundingClientRect();\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;\n\n let top = 0;\n let left = 0;\n\n switch (placement) {\n case 'top':\n top = rect.top + scrollTop - tooltipRect.height - 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'bottom':\n top = rect.bottom + scrollTop + 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'left':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.left + scrollLeft - tooltipRect.width - 8;\n break;\n case 'right':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.right + scrollLeft + 8;\n break;\n }\n\n // Prevent overflow\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const padding = 8;\n\n if (left < padding) {\n left = padding;\n } else if (left + tooltipRect.width > viewportWidth - padding) {\n left = viewportWidth - tooltipRect.width - padding;\n }\n\n if (top < scrollTop + padding) {\n top = scrollTop + padding;\n } else if (top + tooltipRect.height > scrollTop + viewportHeight - padding) {\n top = scrollTop + viewportHeight - tooltipRect.height - padding;\n }\n\n // Use single style assignment with transform for better performance\n tooltip.style.cssText = `position: absolute; top: 0; left: 0; transform: translate(${left}px, ${top}px);`;\n },\n\n /**\n * Show tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n show: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.showTooltip(el, tooltip);\n }\n },\n\n /**\n * Hide tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n hide: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.hideTooltip(el, tooltip);\n }\n },\n\n /**\n * Update tooltip content\n * @param {HTMLElement|string} element - Target element or selector\n * @param {string} content - New content\n * @param {boolean} isHtml - Whether content is HTML\n */\n update: function (element, content, isHtml = false) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n if (isHtml) {\n tooltip.innerHTML = this.sanitizeHtml(content);\n tooltip.classList.add('vd-tooltip-html');\n } else {\n tooltip.textContent = content;\n tooltip.classList.remove('vd-tooltip-html');\n }\n }\n },\n\n /**\n * Destroy a tooltip instance and clean up\n * @param {HTMLElement} element - Element with tooltip\n */\n destroy: function (element) {\n const data = this.tooltips.get(element);\n if (!data) return;\n\n // Clear any pending timer\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n data.cleanup.forEach(fn => fn());\n\n // Remove tooltip element from DOM\n if (data.tooltip && data.tooltip.parentNode) {\n data.tooltip.parentNode.removeChild(data.tooltip);\n }\n\n this.tooltips.delete(element);\n },\n\n /**\n * Destroy all tooltip instances\n */\n destroyAll: function () {\n this.tooltips.forEach((data, element) => {\n this.destroy(element);\n });\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tooltips', Tooltips);\n }\n\n // Expose globally\n window.VanduoTooltips = Tooltips;\n\n})();\n", "/**\n * Vanduo Framework - Search Component\n * Client-side search functionality for content pages\n * \n * @example Basic usage (initialize with defaults)\n * // HTML:\n * //
    \n * // \n * //
    \n * //
    \n * \n * @example Custom configuration\n * var search = Search.create({\n * containerSelector: '.my-search',\n * contentSelector: 'article[id]',\n * titleSelector: 'h2, h3',\n * maxResults: 5,\n * onSelect: function(result) {\n * console.log('Selected:', result.title);\n * }\n * });\n * \n * @example With custom data source\n * var search = Search.create({\n * containerSelector: '.my-search',\n * data: [\n * { id: 'item1', title: 'First Item', content: 'Description...', category: 'Category A' },\n * { id: 'item2', title: 'Second Item', content: 'Description...', category: 'Category B' }\n * ]\n * });\n */\n\n(function() {\n 'use strict';\n\n /**\n * Default configuration\n */\n const DEFAULTS = {\n // Behavior\n minQueryLength: 2,\n maxResults: 10,\n debounceMs: 150,\n highlightTag: 'mark',\n keyboardShortcut: true, // Enable Cmd/Ctrl+K shortcut\n \n // Selectors (for DOM-based indexing)\n containerSelector: '.vd-doc-search',\n inputSelector: '.vd-doc-search-input',\n resultsSelector: '.vd-doc-search-results',\n contentSelector: '.doc-content section[id]',\n titleSelector: '.demo-title, h2, h3',\n navSelector: '.doc-nav-link',\n sectionSelector: '.doc-nav-section',\n \n // Content extraction\n excludeFromContent: 'pre, code, script, style',\n maxContentLength: 500,\n \n // Custom data source (alternative to DOM indexing)\n data: null,\n \n // Category icons mapping\n categoryIcons: {\n 'getting-started': 'ph-rocket-launch',\n 'core': 'ph-cube',\n 'components': 'ph-puzzle-piece',\n 'interactive': 'ph-cursor-click',\n 'data-display': 'ph-table',\n 'feedback': 'ph-bell',\n 'meta': 'ph-info',\n 'default': 'ph-file-text'\n },\n \n // Callbacks\n onSelect: null, // function(result) - called when result is selected\n onSearch: null, // function(query, results) - called after search\n onOpen: null, // function() - called when results open\n onClose: null, // function() - called when results close\n \n // Text customization\n emptyTitle: 'No results found',\n emptyText: 'Try different keywords or check spelling',\n placeholder: 'Search...'\n };\n\n /**\n * Search Component Factory\n * Creates a new search instance with the given configuration\n * \n * @param {Object} options - Configuration options\n * @returns {Object} Search instance\n */\n function createSearch(options) {\n const config = Object.assign({}, DEFAULTS, options || {});\n \n // Instance state\n const state = {\n initialized: false,\n index: [],\n results: [],\n activeIndex: -1,\n isOpen: false,\n query: '',\n container: null,\n input: null,\n resultsContainer: null,\n debounceTimer: null,\n boundHandlers: {}\n };\n\n function safeInvokeCallback(name, fn, ...args) {\n try {\n fn(...args);\n } catch (error) {\n console.warn('[Vanduo Search] Callback error in \"' + name + '\":', error);\n }\n }\n\n function setResultsHtml(html) {\n if (!state.resultsContainer) return;\n try {\n state.resultsContainer.innerHTML = html;\n } catch (error) {\n console.warn('[Vanduo Search] Failed to render results:', error);\n }\n }\n\n /**\n * Initialize the search component\n * Idempotent \u2014 safe to call more than once on the same instance.\n * Returns the instance on success, null if required DOM elements are missing.\n */\n function init() {\n if (state.initialized) {\n return instance;\n }\n\n state.container = document.querySelector(config.containerSelector);\n if (!state.container) {\n state.initialized = false;\n return null;\n }\n\n state.input = state.container.querySelector(config.inputSelector);\n state.resultsContainer = state.container.querySelector(config.resultsSelector);\n\n if (!state.input || !state.resultsContainer) {\n state.initialized = false;\n return null;\n }\n\n // Set placeholder if configured\n if (config.placeholder) {\n state.input.setAttribute('placeholder', config.placeholder);\n }\n\n // Build search index\n buildIndex();\n\n // Bind events\n bindEvents();\n\n // Set up ARIA attributes\n setupAria();\n\n state.initialized = true;\n return instance;\n }\n\n /**\n * Build search index from DOM or custom data\n */\n function buildIndex() {\n state.index = [];\n \n // Use custom data if provided\n if (config.data && Array.isArray(config.data)) {\n config.data.forEach(function(item) {\n state.index.push({\n id: item.id || slugify(item.title),\n title: item.title || '',\n category: item.category || '',\n categorySlug: slugify(item.category || ''),\n content: item.content || '',\n keywords: item.keywords || extractKeywordsFromText(item.title + ' ' + item.content),\n url: item.url || '#' + (item.id || slugify(item.title)),\n icon: item.icon || ''\n });\n });\n return;\n }\n\n // Build from DOM\n const sections = document.querySelectorAll(config.contentSelector);\n const categoryMap = buildCategoryMap();\n\n sections.forEach(function(section) {\n const id = section.id;\n if (!id) return;\n\n const titleEl = section.querySelector(config.titleSelector);\n const title = titleEl ? titleEl.textContent.replace(/v[\\d.]+/g, '').trim() : id;\n const category = categoryMap[id] || 'Documentation';\n const content = extractContent(section);\n const keywords = extractKeywords(section, title);\n const iconEl = titleEl ? titleEl.querySelector('i.ph') : null;\n let icon = '';\n if (iconEl && iconEl.classList) {\n for (let ci = 0; ci < iconEl.classList.length; ci++) {\n if (iconEl.classList[ci].indexOf('ph-') === 0) {\n icon = iconEl.classList[ci];\n break;\n }\n }\n }\n\n state.index.push({\n id: id,\n title: title,\n category: category,\n categorySlug: slugify(category),\n content: content,\n keywords: keywords,\n url: '#' + id,\n icon: icon\n });\n });\n }\n\n /**\n * Build a map of section IDs to their categories\n */\n function buildCategoryMap() {\n const map = {};\n let currentCategory = 'Documentation';\n const navItems = document.querySelectorAll(config.navSelector + ', ' + config.sectionSelector);\n\n navItems.forEach(function(item) {\n if (item.classList.contains('doc-nav-section')) {\n currentCategory = item.textContent.trim();\n } else {\n const href = item.getAttribute('href');\n if (href && href.startsWith('#')) {\n const id = href.substring(1);\n map[id] = currentCategory;\n }\n }\n });\n\n return map;\n }\n\n /**\n * Extract searchable content from a section\n */\n function extractContent(section) {\n const clone = section.cloneNode(true);\n \n const toRemove = clone.querySelectorAll(config.excludeFromContent);\n toRemove.forEach(function(el) {\n el.remove();\n });\n\n let text = clone.textContent || '';\n text = text.replace(/\\s+/g, ' ').trim();\n \n return text.substring(0, config.maxContentLength);\n }\n\n /**\n * Extract keywords from a section\n */\n function extractKeywords(section, title) {\n const keywords = [];\n \n // Add title words\n title.toLowerCase().split(/\\s+/).forEach(function(word) {\n if (word.length > 2) {\n keywords.push(word);\n }\n });\n\n // Add class names from code examples\n const codeBlocks = section.querySelectorAll('code');\n codeBlocks.forEach(function(code) {\n const text = code.textContent || '';\n const classMatches = text.match(/\\.([\\w-]+)/g);\n if (classMatches) {\n classMatches.forEach(function(match) {\n keywords.push(match.substring(1).toLowerCase());\n });\n }\n });\n\n // Add data attributes\n const dataAttrs = section.querySelectorAll('[data-tooltip], [data-modal]');\n dataAttrs.forEach(function(el) {\n const attrs = el.getAttributeNames().filter(function(name) {\n return name.startsWith('data-');\n });\n attrs.forEach(function(attr) {\n keywords.push(attr.replace('data-', ''));\n });\n });\n\n return Array.from(new Set(keywords));\n }\n\n /**\n * Extract keywords from text string\n */\n function extractKeywordsFromText(text) {\n const words = text.toLowerCase().split(/\\s+/);\n return words.filter(function(word) {\n return word.length > 2;\n });\n }\n\n /**\n * Convert string to slug\n */\n function slugify(str) {\n return str.toLowerCase().replace(/\\s+/g, '-').replace(/[^a-z0-9-]/g, '');\n }\n\n /**\n * Bind event listeners\n */\n function bindEvents() {\n // Store bound handlers for cleanup\n state.boundHandlers.handleInput = function(e) {\n handleInput(e);\n };\n state.boundHandlers.handleFocus = function() {\n if (state.query.length >= config.minQueryLength) {\n open();\n }\n };\n state.boundHandlers.handleKeydown = function(e) {\n handleKeydown(e);\n };\n state.boundHandlers.handleOutsideClick = function(e) {\n if (!state.container.contains(e.target)) {\n close();\n }\n };\n state.boundHandlers.handleGlobalKeydown = function(e) {\n if (config.keyboardShortcut && (e.metaKey || e.ctrlKey) && e.key === 'k') {\n e.preventDefault();\n state.input.focus();\n state.input.select();\n }\n };\n state.boundHandlers.handleResultClick = function(e) {\n const result = e.target.closest('.vd-doc-search-result');\n if (result) {\n const index = parseInt(result.dataset.index, 10);\n select(index);\n }\n };\n\n // Input events\n state.input.addEventListener('input', state.boundHandlers.handleInput);\n state.input.addEventListener('focus', state.boundHandlers.handleFocus);\n state.input.addEventListener('keydown', state.boundHandlers.handleKeydown);\n\n // Close on outside click\n document.addEventListener('click', state.boundHandlers.handleOutsideClick);\n\n // Global keyboard shortcut\n document.addEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n\n // Result click handling\n state.resultsContainer.addEventListener('click', state.boundHandlers.handleResultClick);\n }\n\n /**\n * Unbind event listeners\n */\n function unbindEvents() {\n if (state.input) {\n state.input.removeEventListener('input', state.boundHandlers.handleInput);\n state.input.removeEventListener('focus', state.boundHandlers.handleFocus);\n state.input.removeEventListener('keydown', state.boundHandlers.handleKeydown);\n }\n document.removeEventListener('click', state.boundHandlers.handleOutsideClick);\n document.removeEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n if (state.resultsContainer) {\n state.resultsContainer.removeEventListener('click', state.boundHandlers.handleResultClick);\n }\n }\n\n /**\n * Set up ARIA attributes\n */\n function setupAria() {\n const resultsId = state.resultsContainer.id || 'search-results-' + Math.random().toString(36).substr(2, 9);\n state.resultsContainer.id = resultsId;\n \n state.input.setAttribute('role', 'combobox');\n state.input.setAttribute('aria-autocomplete', 'list');\n state.input.setAttribute('aria-controls', resultsId);\n state.input.setAttribute('aria-expanded', 'false');\n \n state.resultsContainer.setAttribute('role', 'listbox');\n state.resultsContainer.setAttribute('aria-label', 'Search results');\n }\n\n /**\n * Handle input changes\n */\n function handleInput(e) {\n const query = e.target.value.trim();\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n state.debounceTimer = setTimeout(function() {\n state.query = query;\n\n if (query.length < config.minQueryLength) {\n close();\n return;\n }\n\n state.results = search(query);\n state.activeIndex = -1;\n render();\n open();\n\n // Callback\n if (typeof config.onSearch === 'function') {\n safeInvokeCallback('onSearch', config.onSearch, query, state.results);\n }\n }, config.debounceMs);\n }\n\n /**\n * Handle keyboard navigation\n */\n function handleKeydown(e) {\n if (!state.isOpen) {\n if (e.key === 'ArrowDown' && state.query.length >= config.minQueryLength) {\n e.preventDefault();\n state.results = search(state.query);\n render();\n open();\n }\n return;\n }\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n navigate(1);\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n navigate(-1);\n break;\n\n case 'Enter':\n e.preventDefault();\n if (state.activeIndex >= 0) {\n select(state.activeIndex);\n } else if (state.results.length > 0) {\n select(0);\n }\n break;\n\n case 'Escape':\n e.preventDefault();\n close();\n break;\n\n case 'Tab':\n close();\n break;\n }\n }\n\n /**\n * Perform search\n */\n function search(query) {\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n const scored = [];\n\n state.index.forEach(function(entry) {\n let score = 0;\n const titleLower = entry.title.toLowerCase();\n const categoryLower = entry.category.toLowerCase();\n const contentLower = entry.content.toLowerCase();\n\n terms.forEach(function(term) {\n // Title match - highest priority\n if (titleLower.includes(term)) {\n score += 100;\n if (titleLower === term) {\n score += 50;\n } else if (titleLower.startsWith(term)) {\n score += 25;\n }\n }\n\n // Category match\n if (categoryLower.includes(term)) {\n score += 50;\n }\n\n // Keyword match\n const keywordMatch = entry.keywords.some(function(k) {\n return k.includes(term);\n });\n if (keywordMatch) {\n score += 30;\n }\n\n // Content match\n if (contentLower.includes(term)) {\n score += 10;\n }\n });\n\n if (score > 0) {\n scored.push({\n id: entry.id,\n title: entry.title,\n category: entry.category,\n categorySlug: entry.categorySlug,\n content: entry.content,\n url: entry.url,\n icon: entry.icon,\n score: score\n });\n }\n });\n\n scored.sort(function(a, b) {\n return b.score - a.score;\n });\n\n return scored.slice(0, config.maxResults);\n }\n\n /**\n * Render search results\n */\n function render() {\n if (state.results.length === 0) {\n setResultsHtml(renderEmpty());\n return;\n }\n\n let html = '
      ';\n\n state.results.forEach(function(result, index) {\n const isActive = index === state.activeIndex;\n const icon = result.icon || getCategoryIcon(result.categorySlug);\n const excerpt = getExcerpt(result.content, state.query);\n\n html += '
    • ' +\n '
      ' +\n '' +\n '
      ' +\n '
      ' +\n '
      ' + highlight(result.title, state.query) + '
      ' +\n '
      ' + escapeHtml(result.category) + '
      ' +\n '
      ' + highlight(excerpt, state.query) + '
      ' +\n '
      ' +\n '
      • ';\n });\n\n html += '
    ';\n html += renderFooter();\n\n setResultsHtml(html);\n }\n\n /**\n * Render empty state\n */\n function renderEmpty() {\n return '
    ' +\n '
    ' +\n '
    ' + escapeHtml(config.emptyTitle) + '
    ' +\n '
    ' + escapeHtml(config.emptyText) + '
    ' +\n '
    ';\n }\n\n /**\n * Render footer with keyboard hints\n */\n function renderFooter() {\n return '
    ' +\n '\u2191\u2193 to navigate' +\n '\u21B5 to select' +\n 'esc to close' +\n '
    ';\n }\n\n /**\n * Get icon for category\n */\n function getCategoryIcon(categorySlug) {\n return config.categoryIcons[categorySlug] || config.categoryIcons['default'] || 'ph-file-text';\n }\n\n /**\n * Get excerpt from content\n */\n function getExcerpt(content, query) {\n const terms = query.toLowerCase().split(/\\s+/);\n const contentLower = content.toLowerCase();\n const excerptLength = 100;\n\n let matchPos = -1;\n for (let i = 0; i < terms.length; i++) {\n const pos = contentLower.indexOf(terms[i]);\n if (pos !== -1 && (matchPos === -1 || pos < matchPos)) {\n matchPos = pos;\n }\n }\n\n if (matchPos === -1) {\n return content.substring(0, excerptLength) + '...';\n }\n\n const start = Math.max(0, matchPos - 30);\n const end = Math.min(content.length, matchPos + excerptLength);\n let excerpt = content.substring(start, end);\n\n if (start > 0) {\n excerpt = '...' + excerpt;\n }\n if (end < content.length) {\n excerpt = excerpt + '...';\n }\n\n return excerpt;\n }\n\n /**\n * Highlight matched terms in text\n */\n function highlight(text, query) {\n if (!query) return escapeHtml(text);\n\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n let escaped = escapeHtml(text);\n\n terms.forEach(function(term) {\n // Skip overly long terms to prevent ReDoS\n if (term.length > 50) return;\n const regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n escaped = escaped.replace(regex, '<' + config.highlightTag + '>$1');\n });\n\n return escaped;\n }\n\n /**\n * Escape HTML entities\n */\n function escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n /**\n * Navigate results with keyboard\n */\n function navigate(direction) {\n let newIndex = state.activeIndex + direction;\n\n if (newIndex < 0) {\n newIndex = state.results.length - 1;\n } else if (newIndex >= state.results.length) {\n newIndex = 0;\n }\n\n setActiveIndex(newIndex);\n }\n\n /**\n * Set active result index\n */\n function setActiveIndex(index) {\n const prevActive = state.resultsContainer.querySelector('.vd-doc-search-result.is-active');\n if (prevActive) {\n prevActive.classList.remove('is-active');\n prevActive.setAttribute('aria-selected', 'false');\n }\n\n state.activeIndex = index;\n\n const newActive = state.resultsContainer.querySelector('[data-index=\"' + index + '\"]');\n if (newActive) {\n newActive.classList.add('is-active');\n newActive.setAttribute('aria-selected', 'true');\n state.input.setAttribute('aria-activedescendant', 'vd-doc-search-result-' + index);\n newActive.scrollIntoView({ block: 'nearest' });\n }\n }\n\n /**\n * Select a result\n */\n function select(index) {\n const result = state.results[index];\n if (!result) return;\n\n // Close search\n close();\n state.input.value = '';\n state.query = '';\n\n // Custom callback\n if (typeof config.onSelect === 'function') {\n safeInvokeCallback('onSelect', config.onSelect, result);\n return;\n }\n\n // Default behavior: navigate to section\n const section = document.querySelector(result.url);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth', block: 'start' });\n window.history.pushState(null, '', result.url);\n updateSidebarActive(result.id);\n }\n }\n\n /**\n * Update sidebar navigation active state\n */\n function updateSidebarActive(sectionId) {\n const navLinks = document.querySelectorAll(config.navSelector);\n navLinks.forEach(function(link) {\n link.classList.remove('active');\n if (link.getAttribute('href') === '#' + sectionId) {\n link.classList.add('active');\n }\n });\n }\n\n /**\n * Open results dropdown\n */\n function open() {\n if (state.isOpen) return;\n\n state.isOpen = true;\n state.resultsContainer.classList.add('is-open');\n state.input.setAttribute('aria-expanded', 'true');\n\n if (typeof config.onOpen === 'function') {\n safeInvokeCallback('onOpen', config.onOpen);\n }\n }\n\n /**\n * Close results dropdown\n */\n function close() {\n if (!state.isOpen) return;\n\n state.isOpen = false;\n state.activeIndex = -1;\n state.resultsContainer.classList.remove('is-open');\n state.input.setAttribute('aria-expanded', 'false');\n state.input.removeAttribute('aria-activedescendant');\n\n if (typeof config.onClose === 'function') {\n safeInvokeCallback('onClose', config.onClose);\n }\n }\n\n /**\n * Destroy the component\n */\n function destroy() {\n unbindEvents();\n \n state.initialized = false;\n state.index = [];\n state.results = [];\n state.isOpen = false;\n state.query = '';\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n if (state.resultsContainer) {\n setResultsHtml('');\n }\n }\n\n /**\n * Rebuild the search index\n */\n function rebuild() {\n buildIndex();\n }\n\n /**\n * Update configuration\n */\n function setConfig(newConfig) {\n Object.assign(config, newConfig);\n }\n\n /**\n * Get current configuration\n */\n function getConfig() {\n return Object.assign({}, config);\n }\n\n /**\n * Get search index\n */\n function getIndex() {\n return state.index.slice();\n }\n\n // Public instance API\n const instance = {\n init: init,\n destroy: destroy,\n rebuild: rebuild,\n search: search,\n open: open,\n close: close,\n setConfig: setConfig,\n getConfig: getConfig,\n getIndex: getIndex\n };\n\n return instance;\n }\n\n /**\n * Search Component (singleton for backward compatibility)\n */\n const Search = {\n // Factory method \u2014 creates and auto-initializes a new independent instance.\n // Always returns the instance so callers retain a reference even if the\n // DOM container is not yet available (they can retry init() later).\n create: function(options) {\n const instance = createSearch(options);\n if (instance) {\n instance.init();\n }\n return instance || null;\n },\n \n // Default instance\n _instance: null,\n \n // Configuration (for default instance)\n config: Object.assign({}, DEFAULTS),\n\n /**\n * Initialize the default search instance\n */\n init: function(options) {\n if (this._instance) {\n this._instance.destroy();\n }\n \n if (options) {\n Object.assign(this.config, options);\n }\n \n this._instance = createSearch(this.config);\n return this._instance ? this._instance.init() : null;\n },\n\n /**\n * Destroy the default instance\n */\n destroy: function() {\n if (this._instance) {\n this._instance.destroy();\n this._instance = null;\n }\n },\n\n destroyAll: function() {\n this.destroy();\n },\n\n /**\n * Rebuild the default instance index\n */\n rebuild: function() {\n if (this._instance) {\n this._instance.rebuild();\n }\n },\n\n /**\n * Search using the default instance\n */\n search: function(query) {\n return this._instance ? this._instance.search(query) : [];\n },\n\n /**\n * Open the default instance\n */\n open: function() {\n if (this._instance) {\n this._instance.open();\n }\n },\n\n /**\n * Close the default instance\n */\n close: function() {\n if (this._instance) {\n this._instance.close();\n }\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('docSearch', Search);\n }\n\n // Expose globally (both names for compatibility)\n window.Search = Search;\n window.DocSearch = Search; // Backward compatibility\n window.VanduoDocSearch = Search; // New name compatibility\n\n})();\n", "/**\n * Vanduo Framework - Draggable Component\n * JavaScript functionality for draggable elements and drop zones\n */\n\n(function () {\n 'use strict';\n\n /**\n * Draggable Component\n */\n const Draggable = {\n // Store initialized draggables and their cleanup functions\n instances: new Map(),\n // Store current drag state\n currentDrag: null,\n // Store touch state\n touchState: null,\n // Feedback element\n feedbackElement: null,\n // Shared selector used by init and touch reorder\n containerSelector: '.vd-draggable-container, .vd-draggable-container-vertical',\n\n /**\n * Initialize draggable components\n */\n init: function () {\n const draggables = document.querySelectorAll('.vd-draggable, [data-draggable]');\n\n draggables.forEach(element => {\n if (this.instances.has(element)) {\n return;\n }\n this.initDraggable(element);\n });\n\n const containers = document.querySelectorAll(this.containerSelector);\n containers.forEach(container => {\n if (!this.instances.has(container)) {\n this.initContainer(container);\n }\n });\n\n const dropZones = document.querySelectorAll('.vd-drop-zone');\n dropZones.forEach(zone => {\n if (!this.instances.has(zone)) {\n this.initDropZone(zone);\n }\n });\n\n this.createFeedbackElement();\n },\n\n /**\n * Initialize a single draggable element\n * @param {HTMLElement} element - Draggable element\n */\n initDraggable: function (element) {\n const cleanupFunctions = [];\n\n // Make element draggable if not already\n if (!element.hasAttribute('draggable')) {\n element.setAttribute('draggable', 'true');\n }\n\n // Accessibility: add ARIA attributes\n if (!element.hasAttribute('tabindex')) {\n element.setAttribute('tabindex', '0');\n }\n element.setAttribute('role', 'option');\n element.setAttribute('aria-roledescription', 'draggable item');\n element.setAttribute('aria-grabbed', 'false');\n\n // Handle drag start\n const dragStartHandler = (e) => {\n this.handleDragStart(e, element);\n };\n element.addEventListener('dragstart', dragStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragstart', dragStartHandler));\n\n // Handle drag\n const dragHandler = (e) => {\n this.handleDrag(e, element);\n };\n element.addEventListener('drag', dragHandler);\n cleanupFunctions.push(() => element.removeEventListener('drag', dragHandler));\n\n // Handle drag end\n const dragEndHandler = (e) => {\n this.handleDragEnd(e, element);\n };\n element.addEventListener('dragend', dragEndHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragend', dragEndHandler));\n\n // Handle touch start (for mobile)\n const touchStartHandler = (e) => {\n this.handleTouchStart(e, element);\n };\n element.addEventListener('touchstart', touchStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchstart', touchStartHandler));\n\n // Handle touch move (for mobile)\n // { passive: false } is required so that e.preventDefault() works\n // once the drag threshold is reached \u2014 without it, modern browsers\n // treat the listener as passive and silently ignore preventDefault().\n const touchMoveHandler = (e) => {\n this.handleTouchMove(e, element);\n };\n element.addEventListener('touchmove', touchMoveHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchmove', touchMoveHandler));\n\n // Handle touch end (for mobile)\n const touchEndHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchend', touchEndHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchend', touchEndHandler));\n\n // Handle touch cancel (for mobile)\n const touchCancelHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchcancel', touchCancelHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchcancel', touchCancelHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, element);\n };\n element.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => element.removeEventListener('keydown', keydownHandler));\n\n this.instances.set(element, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a draggable container\n * @param {HTMLElement} container - Draggable container\n */\n initContainer: function (container) {\n // Accessibility: add ARIA role to container\n container.setAttribute('role', 'listbox');\n container.setAttribute('aria-label', container.getAttribute('aria-label') || 'Draggable items');\n\n const items = container.querySelectorAll('.vd-draggable-item');\n items.forEach(item => {\n if (!this.instances.has(item)) {\n this.initDraggable(item);\n }\n });\n\n const cleanupFunctions = [];\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n };\n\n // Handle drag over for auto-sorting\n const dragOverHandler = (e) => {\n e.preventDefault(); // Necessary to allow drop\n e.dataTransfer.dropEffect = 'move';\n\n if (!this.currentDrag) return;\n const draggingEl = this.currentDrag.element;\n\n // Only reorder if dragging an item that belongs to this container (or if we support cross-container drag, but keep simple)\n if (!container.contains(draggingEl)) return;\n\n // Prevent jumps when the dragging finalizes with 0,0 coordinates near the end\n if (e.clientX === 0 && e.clientY === 0) return;\n\n this.handleReorder(container, draggingEl, e.clientX, e.clientY);\n };\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault(); // crucial to prevent the browser's default handling and snapping back\n };\n\n container.addEventListener('dragenter', dragEnterHandler);\n container.addEventListener('dragover', dragOverHandler);\n container.addEventListener('drop', dropHandler);\n\n cleanupFunctions.push(() => {\n container.removeEventListener('dragenter', dragEnterHandler);\n container.removeEventListener('dragover', dragOverHandler);\n container.removeEventListener('drop', dropHandler);\n });\n\n this.instances.set(container, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a drop zone\n * @param {HTMLElement} zone - Drop zone element\n */\n initDropZone: function (zone) {\n const cleanupFunctions = [];\n\n // Accessibility: add ARIA role to drop zone\n zone.setAttribute('role', 'region');\n zone.setAttribute('aria-dropeffect', 'move');\n if (!zone.hasAttribute('aria-label')) {\n zone.setAttribute('aria-label', 'Drop zone');\n }\n\n // Handle drag over\n const dragOverHandler = (e) => {\n e.preventDefault();\n this.handleDragOver(e, zone);\n };\n zone.addEventListener('dragover', dragOverHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragover', dragOverHandler));\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n this.handleDragEnter(e, zone);\n };\n zone.addEventListener('dragenter', dragEnterHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragenter', dragEnterHandler));\n\n // Handle drag leave\n const dragLeaveHandler = (e) => {\n this.handleDragLeave(e, zone);\n };\n zone.addEventListener('dragleave', dragLeaveHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragleave', dragLeaveHandler));\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault();\n this.handleDrop(e, zone);\n };\n zone.addEventListener('drop', dropHandler);\n cleanupFunctions.push(() => zone.removeEventListener('drop', dropHandler));\n\n this.instances.set(zone, { cleanup: cleanupFunctions });\n },\n\n /**\n * Create feedback element for drag operations\n */\n createFeedbackElement: function () {\n if (!this.feedbackElement) {\n // Reuse existing element if present\n const existing = document.querySelector('.vd-drag-feedback');\n if (existing) {\n this.feedbackElement = existing;\n return;\n }\n\n this.feedbackElement = document.createElement('div');\n this.feedbackElement.className = 'vd-drag-feedback hidden';\n this.feedbackElement.setAttribute('role', 'presentation');\n document.body.appendChild(this.feedbackElement);\n }\n },\n\n /**\n * Handle drag start event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragStart: function (e, element) {\n // Add dragging class\n element.classList.add('is-dragging');\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: e.clientX, y: e.clientY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element)\n };\n\n // Set drag data\n e.dataTransfer.effectAllowed = 'move';\n e.dataTransfer.setData('text/plain', this.currentDrag.data);\n\n // We no longer suppress the native ghost image or manually update feedback\n // for mouse drags, relying on the browser's native rendering instead.\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY }\n }\n }));\n },\n\n /**\n * Handle drag event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDrag: function (e, element) {\n // Guard against null state (race condition on fast interactions)\n if (!this.currentDrag) return;\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - this.currentDrag.initialPosition.x,\n y: e.clientY - this.currentDrag.initialPosition.y\n }\n }\n }));\n },\n\n /**\n * Handle drag end event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragEnd: function (e, element) {\n // Remove dragging class\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'false');\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Guard against null state\n const data = this.currentDrag?.data || this.getData(element);\n const initialPos = this.currentDrag?.initialPosition || { x: 0, y: 0 };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - initialPos.x,\n y: e.clientY - initialPos.y\n }\n }\n }));\n\n // Reset drag state\n this.currentDrag = null;\n },\n\n /**\n * Handle touch start event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchStart: function (e, element) {\n // Don't prevent default here \u2014 it blocks scrolling.\n // We only prevent default in touchmove once drag threshold is reached.\n const touch = e.touches[0];\n const rect = element.getBoundingClientRect();\n this.touchState = {\n element: element,\n startX: touch.clientX,\n startY: touch.clientY,\n lastX: touch.clientX,\n lastY: touch.clientY,\n // Keep preview anchored to the original grab point.\n offsetX: touch.clientX - rect.left,\n offsetY: touch.clientY - rect.top,\n startTime: Date.now(),\n isDragging: false\n };\n },\n\n /**\n * Handle touch move event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchMove: function (e, element) {\n if (!this.touchState) return;\n\n const touch = e.touches[0];\n this.touchState.lastX = touch.clientX;\n this.touchState.lastY = touch.clientY;\n const deltaX = touch.clientX - this.touchState.startX;\n const deltaY = touch.clientY - this.touchState.startY;\n\n // Only start dragging if moved a minimum distance\n if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {\n // Now we know it's a drag, not a scroll \u2014 prevent default\n if (e.cancelable) e.preventDefault();\n\n if (!this.touchState.isDragging) {\n this.touchState.isDragging = true;\n element.classList.add('is-dragging');\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: this.touchState.startX, y: this.touchState.startY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element),\n // Preserve where inside the element the drag started for accurate ghost positioning.\n offsetX: this.touchState.offsetX,\n offsetY: this.touchState.offsetY\n };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY }\n }\n }));\n }\n\n // Update feedback\n this.updateFeedback(touch.clientX, touch.clientY);\n\n // Dispatch event\n if (this.currentDrag) {\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY },\n delta: { x: deltaX, y: deltaY }\n }\n }));\n\n this.updateTouchDropZone(touch.clientX, touch.clientY);\n\n // Reorder for touch\n const container = element.closest(this.containerSelector);\n if (container && container.contains(element)) {\n this.handleReorder(container, element, touch.clientX, touch.clientY);\n }\n }\n }\n },\n\n /**\n * Handle touch end event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchEnd: function (e, element) {\n if (this.touchState && this.touchState.isDragging) {\n if (e.cancelable) e.preventDefault();\n const endTouch = e.changedTouches?.[0];\n const endPosition = {\n x: endTouch?.clientX ?? this.touchState.lastX ?? this.touchState.startX,\n y: endTouch?.clientY ?? this.touchState.lastY ?? this.touchState.startY\n };\n\n const dropZone = this.resolveDropZoneAtPoint(endPosition.x, endPosition.y) || this.touchState.overZone;\n if (dropZone) {\n this.dispatchDrop(dropZone, endPosition);\n } else if (this.touchState.overZone) {\n this.touchState.overZone.classList.remove('is-drag-over');\n }\n\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n element.setAttribute('aria-grabbed', 'false');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Dispatch event\n const data = this.currentDrag?.data || this.getData(element);\n const startX = this.touchState?.startX || 0;\n const startY = this.touchState?.startY || 0;\n\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: endPosition,\n delta: {\n x: endPosition.x - startX,\n y: endPosition.y - startY\n }\n }\n }));\n }\n\n // Reset states\n this.touchState = null;\n this.currentDrag = null;\n },\n\n /**\n * Handle drag over event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} _zone - Drop zone element\n */\n handleDragOver: function (e, _zone) {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n },\n\n /**\n * Handle drag enter event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragEnter: function (e, zone) {\n e.preventDefault();\n zone.classList.add('is-drag-over');\n },\n\n /**\n * Handle drag leave event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragLeave: function (e, zone) {\n zone.classList.remove('is-drag-over');\n },\n\n /**\n * Handle drop event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDrop: function (e, zone) {\n e.preventDefault();\n this.dispatchDrop(zone, { x: e.clientX, y: e.clientY });\n },\n\n /**\n * Resolve a drop zone from viewport coordinates\n * @param {number} x\n * @param {number} y\n * @returns {HTMLElement|null}\n */\n resolveDropZoneAtPoint: function (x, y) {\n if (!Number.isFinite(x) || !Number.isFinite(y)) return null;\n\n // Prefer the full stacking list so overlays/top elements don't hide real drop targets.\n if (typeof document.elementsFromPoint === 'function') {\n const stacked = document.elementsFromPoint(x, y);\n for (const element of stacked) {\n const zone = element.closest('.vd-drop-zone');\n if (zone) return zone;\n }\n }\n\n const target = document.elementFromPoint(x, y);\n const targetZone = target ? target.closest('.vd-drop-zone') : null;\n if (targetZone) return targetZone;\n\n // Last-resort fallback for mobile emulation edge cases.\n const zones = document.querySelectorAll('.vd-drop-zone');\n for (const zone of zones) {\n const rect = zone.getBoundingClientRect();\n if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {\n return zone;\n }\n }\n\n return null;\n },\n\n /**\n * Track and update active drop-zone hover state on touch devices\n * @param {number} x\n * @param {number} y\n */\n updateTouchDropZone: function (x, y) {\n if (!this.touchState) return;\n\n const nextZone = this.resolveDropZoneAtPoint(x, y);\n const prevZone = this.touchState.overZone || null;\n\n if (prevZone && prevZone !== nextZone) {\n prevZone.classList.remove('is-drag-over');\n }\n\n if (nextZone && nextZone !== prevZone) {\n nextZone.classList.add('is-drag-over');\n }\n\n this.touchState.overZone = nextZone || null;\n },\n\n /**\n * Dispatch a normalized drop event for mouse and touch flows\n * @param {HTMLElement} zone\n * @param {{x:number, y:number}} position\n */\n dispatchDrop: function (zone, position) {\n zone.classList.remove('is-drag-over');\n zone.dispatchEvent(new CustomEvent('draggable:drop', {\n bubbles: true,\n detail: {\n zone: zone,\n element: this.currentDrag?.element,\n data: this.currentDrag?.data,\n position: position\n }\n }));\n },\n\n /**\n * Reorder elements in container based on cursor position\n * @param {HTMLElement} container \n * @param {HTMLElement} element \n * @param {number} clientX \n * @param {number} clientY \n */\n handleReorder: function (container, element, clientX, clientY) {\n const isVertical = container.classList.contains('vd-draggable-container-vertical');\n const siblings = [...container.querySelectorAll('.vd-draggable-item:not(.is-dragging), .vd-draggable:not(.is-dragging)')];\n\n const nextSibling = siblings.reduce((closest, child) => {\n const box = child.getBoundingClientRect();\n const offset = isVertical\n ? clientY - box.top - box.height / 2\n : clientX - box.left - box.width / 2;\n\n if (offset < 0 && offset > closest.offset) {\n return { offset: offset, element: child };\n } else {\n return closest;\n }\n }, { offset: Number.NEGATIVE_INFINITY }).element;\n\n if (nextSibling == null) {\n container.appendChild(element);\n } else {\n container.insertBefore(element, nextSibling);\n }\n },\n\n /**\n * Handle keyboard events\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} element - Draggable element\n */\n handleKeydown: function (e, element) {\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n // Trigger click or custom action\n element.click();\n break;\n case 'Escape':\n // Cancel drag if in progress\n if (element.classList.contains('is-dragging')) {\n element.classList.remove('is-dragging');\n element.setAttribute('aria-grabbed', 'false');\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n this.currentDrag = null;\n }\n break;\n case 'ArrowUp':\n case 'ArrowLeft': {\n e.preventDefault();\n const prev = element.previousElementSibling;\n if (prev && (prev.classList.contains('vd-draggable') || prev.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(element, prev);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'up' }\n }));\n }\n break;\n }\n case 'ArrowDown':\n case 'ArrowRight': {\n e.preventDefault();\n const next = element.nextElementSibling;\n if (next && (next.classList.contains('vd-draggable') || next.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(next, element);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'down' }\n }));\n }\n break;\n }\n }\n },\n\n /**\n * Get data from draggable element\n * @param {HTMLElement} element - Draggable element\n * @returns {string} Data associated with the element\n */\n getData: function (element) {\n return element.dataset.draggable || element.textContent.trim();\n },\n\n /**\n * Update drag feedback element\n * @param {number} x - Current X coordinate\n * @param {number} y - Current Y coordinate\n */\n updateFeedback: function (x, y) {\n if (!this.currentDrag) return;\n\n // Show feedback\n this.feedbackElement.classList.remove('hidden');\n\n // Update feedback content\n const rect = this.currentDrag.initialBounds;\n this.feedbackElement.innerHTML = '';\n const clone = this.currentDrag.element.cloneNode(true);\n this.feedbackElement.appendChild(clone);\n\n // Set styles\n const offsetX = this.currentDrag.offsetX ?? 20;\n const offsetY = this.currentDrag.offsetY ?? 20;\n Object.assign(this.feedbackElement.style, {\n left: (x - offsetX) + 'px',\n top: (y - offsetY) + 'px',\n width: rect.width + 'px',\n height: rect.height + 'px'\n });\n },\n\n /**\n * Make an element draggable programmatically\n * @param {HTMLElement|string} element - Element or selector\n * @param {Object} options - Configuration options\n */\n makeDraggable: function (element, options = {}) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && !this.instances.has(el)) {\n // Add classes and attributes\n el.classList.add('vd-draggable');\n el.setAttribute('draggable', 'true');\n\n // Set options\n if (options.data) {\n el.dataset.draggable = options.data;\n }\n\n // Initialize\n this.initDraggable(el);\n }\n },\n\n /**\n * Remove draggable functionality from an element\n * @param {HTMLElement|string} element - Element or selector\n */\n removeDraggable: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && this.instances.has(el)) {\n // Clean up\n const instance = this.instances.get(el);\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n\n // Remove classes and attributes\n el.classList.remove('vd-draggable');\n el.removeAttribute('draggable');\n el.removeAttribute('data-draggable');\n }\n },\n\n /**\n * Destroy a draggable instance and clean up event listeners\n * @param {HTMLElement} element - Draggable element\n */\n destroy: function (element) {\n this.removeDraggable(element);\n },\n\n /**\n * Destroy all draggable instances\n */\n destroyAll: function () {\n const instances = Array.from(this.instances.keys());\n instances.forEach(element => this.destroy(element));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('draggable', Draggable);\n }\n\n // Expose globally\n window.VanduoDraggable = Draggable;\n})();\n", "/**\n * Vanduo Framework \u2013 LazyLoad Component\n * v1.2.1\n *\n * Provides two levels of API:\n *\n * LOW-LEVEL (generic IntersectionObserver wrapper)\n * VanduoLazyLoad.observe(element, callback, options?)\n * VanduoLazyLoad.unobserve(element)\n * VanduoLazyLoad.unobserveAll()\n *\n * HIGH-LEVEL (HTML-section fetcher, mirrors vanduo-docs SPA behaviour)\n * VanduoLazyLoad.loadSection(url, containerEl, options?)\n * options: { placeholder, threshold, rootMargin, onLoaded, onError }\n * placeholder: 'skeleton' | 'spinner' | HTMLString (default: 'skeleton')\n *\n * ATTRIBUTE-DRIVEN (zero-JS usage, wired by init())\n *
    \u2026
    \n *\n * EVENTS dispatched on the host element:\n * lazysection:loading \u2014 fetch started\n * lazysection:loaded \u2014 content injected\n * lazysection:error \u2014 fetch failed\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500 Private state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /** @type {Map} */\n const _observerMap = new Map();\n\n /* \u2500\u2500 Security helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Returns true only if `url` resolves to the same origin as the page\n * (relative paths and same-origin absolute URLs are allowed).\n * Cross-origin URLs are rejected to prevent SSRF-style fetch abuse.\n * @param {string} url\n * @returns {boolean}\n */\n function _isSafeUrl(url) {\n try {\n // Relative URLs (no origin) are always safe\n const resolved = new URL(url, window.location.href);\n return resolved.origin === window.location.origin;\n } catch (_) {\n return false;\n }\n }\n\n /**\n * Safely inject fetched HTML into a container by parsing it with\n * DOMParser (avoids script execution) and replacing children via\n * standard DOM APIs instead of raw innerHTML assignment.\n * @param {Element} containerEl\n * @param {string} html\n */\n function _safeInjectHtml(containerEl, html) {\n const parser = new DOMParser();\n const doc = parser.parseFromString(html.trim(), 'text/html'); // CodeQL [js/xss-through-dom] Intentional: parsed nodes are sanitized below before adoption into live DOM\n\n const DANGEROUS_TAGS = ['SCRIPT', 'IFRAME', 'OBJECT', 'EMBED', 'FORM', 'BASE', 'LINK', 'META', 'STYLE'];\n for (const tag of DANGEROUS_TAGS) {\n const els = doc.querySelectorAll(tag);\n for (let i = els.length - 1; i >= 0; i--) {\n els[i].parentNode.removeChild(els[i]);\n }\n }\n\n // Strip dangerous attributes (e.g. onerror, javascript: urls) from all elements\n function _sanitizeNode(node) {\n if (node.nodeType === Node.ELEMENT_NODE) {\n const attrs = node.attributes;\n for (let i = attrs.length - 1; i >= 0; i--) {\n const attrName = attrs[i].name.toLowerCase();\n const attrValue = attrs[i].value.toLowerCase();\n const trimmedValue = attrValue.trim();\n if (\n attrName.startsWith('on') ||\n trimmedValue.startsWith('javascript:') ||\n trimmedValue.startsWith('data:') ||\n trimmedValue.startsWith('vbscript:')\n ) {\n node.removeAttribute(attrs[i].name);\n }\n }\n const children = node.childNodes;\n for (let i = 0; i < children.length; i++) {\n _sanitizeNode(children[i]);\n }\n }\n }\n _sanitizeNode(doc.body);\n\n // Collect all top-level body children\n const nodes = Array.from(doc.body.childNodes);\n // Clear container and append parsed nodes\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n nodes.forEach(function (node) {\n containerEl.appendChild(document.adoptNode(node));\n });\n }\n\n /* \u2500\u2500 Placeholder HTML \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _skeletonHtml() {\n return '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _spinnerHtml() {\n return '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _resolvePlaceholder(placeholder) {\n if (!placeholder || placeholder === 'skeleton') return _skeletonHtml();\n if (placeholder === 'spinner') return _spinnerHtml();\n // Caller-supplied HTML string\n return placeholder;\n }\n\n /* \u2500\u2500 Dispatch helper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _dispatch(el, eventName, detail) {\n el.dispatchEvent(new CustomEvent(eventName, { bubbles: true, detail: detail || {} }));\n }\n\n /* \u2500\u2500 VanduoLazyLoad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const VanduoLazyLoad = {\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * LOW-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Observe an element. `callback` is invoked once when the element\n * enters the viewport, then the element is automatically unobserved.\n *\n * @param {Element} element\n * @param {function(Element): void} callback\n * @param {{ threshold?: number, rootMargin?: string }} [options]\n */\n observe: function (element, callback, options) {\n if (!(element instanceof Element)) {\n console.warn('[VanduoLazyLoad] observe() requires a DOM Element.');\n return;\n }\n if (typeof callback !== 'function') {\n console.warn('[VanduoLazyLoad] observe() requires a callback function.');\n return;\n }\n // Already observed \u2014 ignore\n if (_observerMap.has(element)) return;\n\n const threshold = (options && options.threshold != null) ? options.threshold : 0;\n const rootMargin = (options && options.rootMargin) ? options.rootMargin : '0px';\n\n const observer = new IntersectionObserver(function (entries, obs) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n obs.unobserve(entry.target);\n _observerMap.delete(entry.target);\n try {\n callback(entry.target);\n } catch (e) {\n console.error('[VanduoLazyLoad] Callback threw:', e);\n }\n }\n });\n }, { threshold: threshold, rootMargin: rootMargin });\n\n _observerMap.set(element, observer);\n observer.observe(element);\n },\n\n /**\n * Stop observing an element that was previously passed to observe().\n * @param {Element} element\n */\n unobserve: function (element) {\n const observer = _observerMap.get(element);\n if (observer) {\n observer.unobserve(element);\n _observerMap.delete(element);\n }\n },\n\n /**\n * Stop observing ALL currently observed elements.\n */\n unobserveAll: function () {\n _observerMap.forEach(function (observer, element) {\n observer.unobserve(element);\n });\n _observerMap.clear();\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * HIGH-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fetch an HTML partial and inject it into `containerEl` when the\n * container enters the viewport. A placeholder is shown immediately.\n *\n * @param {string} url URL of the HTML partial to fetch\n * @param {Element} containerEl Target element whose content will be replaced\n * @param {{\n * placeholder?: 'skeleton'|'spinner'|string,\n * threshold?: number,\n * rootMargin?: string,\n * onLoaded?: function(Element): void,\n * onError?: function(Error): void\n * }} [options]\n */\n loadSection: function (url, containerEl, options) {\n if (typeof url !== 'string' || !url) {\n console.warn('[VanduoLazyLoad] loadSection() requires a non-empty URL string.');\n return;\n }\n if (!(containerEl instanceof Element)) {\n console.warn('[VanduoLazyLoad] loadSection() requires a DOM Element as containerEl.');\n return;\n }\n // Reject cross-origin URLs to prevent SSRF-style fetch abuse\n if (!_isSafeUrl(url)) {\n console.error('[VanduoLazyLoad] loadSection() blocked cross-origin URL:', url);\n return;\n }\n\n const opts = options || {};\n // Placeholders are known-safe static HTML strings built internally\n const placeholderHtml = _resolvePlaceholder(opts.placeholder);\n\n // Use _safeInjectHtml instead of innerHTML to prevent XSS from caller-supplied placeholders\n _safeInjectHtml(containerEl, placeholderHtml);\n _dispatch(containerEl, 'lazysection:loading', { url: url });\n\n // Fetch when visible\n this.observe(containerEl, function () {\n const controller = new window.AbortController();\n const timeoutId = setTimeout(function () { controller.abort(); }, 10000);\n\n window.fetch(url, { signal: controller.signal })\n .then(function (res) {\n clearTimeout(timeoutId);\n if (!res.ok) throw new Error('HTTP ' + res.status);\n return res.text();\n })\n .then(function (html) {\n // Use DOMParser to parse fetched content safely, avoiding\n // raw innerHTML assignment of externally-sourced strings\n _safeInjectHtml(containerEl, html);\n _dispatch(containerEl, 'lazysection:loaded', { url: url });\n // Re-init Vanduo components inside the new content\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.init();\n }\n if (typeof opts.onLoaded === 'function') {\n opts.onLoaded(containerEl);\n }\n })\n .catch(function (err) {\n // Build error node via DOM APIs \u2014 no dynamic HTML strings\n const alertEl = document.createElement('div');\n alertEl.className = 'vd-alert vd-alert-error';\n alertEl.setAttribute('role', 'alert');\n const msgEl = document.createElement('span');\n msgEl.textContent = 'Failed to load content. ';\n const detailEl = document.createElement('small');\n detailEl.style.opacity = '0.7';\n detailEl.textContent = err.message;\n alertEl.appendChild(msgEl);\n alertEl.appendChild(detailEl);\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n containerEl.appendChild(alertEl);\n _dispatch(containerEl, 'lazysection:error', { url: url, error: err });\n console.error('[VanduoLazyLoad] loadSection failed:', err);\n if (typeof opts.onError === 'function') {\n opts.onError(err);\n }\n });\n }, { threshold: opts.threshold, rootMargin: opts.rootMargin });\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * ATTRIBUTE-DRIVEN INIT\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Scan the DOM for [data-vd-lazy] elements and wire them up.\n * Safe to call multiple times \u2014 already-observed elements are skipped.\n */\n init: function () {\n const self = this;\n const elements = document.querySelectorAll('[data-vd-lazy]');\n elements.forEach(function (el) {\n // Skip already-observed or already-loaded elements\n if (_observerMap.has(el) || el.dataset.vdLazyState === 'loading' || el.dataset.vdLazyState === 'loaded') return;\n\n const url = el.getAttribute('data-vd-lazy');\n if (!url) return;\n\n el.dataset.vdLazyState = 'loading';\n const placeholder = el.getAttribute('data-vd-lazy-placeholder') || 'skeleton';\n\n self.loadSection(url, el, {\n placeholder: placeholder,\n onLoaded: function () {\n el.dataset.vdLazyState = 'loaded';\n },\n onError: function () {\n el.dataset.vdLazyState = 'error';\n }\n });\n });\n }\n };\n\n /* \u2500\u2500 Register with Vanduo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('LazyLoad', VanduoLazyLoad);\n }\n\n /* \u2500\u2500 Global convenience alias \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n window.VanduoLazyLoad = VanduoLazyLoad;\n\n})();\n", "/**\n * Vanduo Framework - Glass Scroll Activation\n * Generic scroll-aware glass activation via IntersectionObserver.\n *\n * Usage:\n * Add `data-glass-scroll` to any element carrying a `.vd-glass*` class.\n * By default the previous sibling is used as the sentinel.\n * Point to a custom sentinel via `data-glass-sentinel=\"\"`.\n *\n * Behaviour:\n * - Adds `.is-glass-active` when the sentinel leaves the viewport (scrolled past).\n * - Removes `.is-glass-active` when the sentinel re-enters the viewport.\n */\n(function () {\n 'use strict';\n\n const GlassScroll = {\n /** @type {Map} */\n observers: new Map(),\n\n init: function () {\n document.querySelectorAll('[data-glass-scroll]').forEach(el => {\n if (this.observers.has(el)) return;\n this.initElement(el);\n });\n },\n\n /**\n * Wire up a single scroll-activated glass element.\n * @param {HTMLElement} el\n */\n initElement: function (el) {\n const sentinelSelector = el.dataset.glassSentinel;\n let sentinel;\n\n if (sentinelSelector) {\n sentinel = document.querySelector(sentinelSelector);\n }\n\n if (!sentinel) {\n // Fall back to the previous sibling element\n sentinel = el.previousElementSibling;\n }\n\n if (!sentinel) {\n // No sentinel available \u2014 activate immediately so glass is always shown\n el.classList.add('is-glass-active');\n return;\n }\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n // Active when sentinel is NOT intersecting (scrolled past it)\n el.classList.toggle('is-glass-active', !entry.isIntersecting);\n });\n },\n { threshold: 0, rootMargin: '0px' }\n );\n\n observer.observe(sentinel);\n this.observers.set(el, observer);\n },\n\n /**\n * Disconnect and remove a single element's observer.\n * @param {HTMLElement} el\n */\n destroy: function (el) {\n const observer = this.observers.get(el);\n if (observer) {\n observer.disconnect();\n this.observers.delete(el);\n }\n },\n\n destroyAll: function () {\n this.observers.forEach((observer, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('glassScroll', GlassScroll);\n }\n\n window.VanduoGlassScroll = GlassScroll;\n})();\n", "/**\n * Vanduo Framework - Water Morph Effect Component\n * Liquid wave content-swap animation on click\n *\n * Usage:\n * Add .vd-morph or [data-vd-morph] to any element.\n * Provide .vd-morph-content.vd-morph-current and .vd-morph-content.vd-morph-next children.\n * Wave and shine layers are auto-created if absent.\n *\n * JS API:\n * VanduoMorph.morph(el) \u2014 trigger morph programmatically (from center)\n * VanduoMorph.destroy(el) \u2014 tear down listeners for one element\n * VanduoMorph.destroyAll() \u2014 tear down all instances\n */\n\n(function () {\n 'use strict';\n\n const MORPH_DURATION_MS = 750;\n\n const Morph = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-morph, [data-vd-morph]');\n elements.forEach(function (el) {\n if (Morph.instances.has(el)) return;\n if (el.getAttribute('data-vd-morph') === 'manual') return;\n Morph.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n Morph._ensureLayers(el);\n\n const cleanup = [];\n let morphing = false;\n\n const handleClick = function (e) {\n if (morphing) return;\n Morph._runMorph(el, e, function () { morphing = false; });\n morphing = true;\n };\n\n el.addEventListener('click', handleClick);\n cleanup.push(function () { el.removeEventListener('click', handleClick); });\n\n this.instances.set(el, { cleanup: cleanup });\n },\n\n morph: function (el) {\n if (!el) return;\n if (!this.instances.has(el)) this.initInstance(el);\n this._runMorph(el, null, null);\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(function (fn) { fn(); });\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach(function (_, el) { Morph.destroy(el); });\n },\n\n /* \u2500\u2500 Internal helpers \u2500\u2500 */\n\n _ensureLayers: function (el) {\n if (!el.querySelector('.vd-morph-wave')) {\n const wave = document.createElement('span');\n wave.className = 'vd-morph-wave';\n wave.setAttribute('aria-hidden', 'true');\n el.insertBefore(wave, el.firstChild);\n }\n if (!el.querySelector('.vd-morph-shine')) {\n const shine = document.createElement('span');\n shine.className = 'vd-morph-shine';\n shine.setAttribute('aria-hidden', 'true');\n const waveEl = el.querySelector('.vd-morph-wave');\n if (waveEl && waveEl.nextSibling) {\n el.insertBefore(shine, waveEl.nextSibling);\n } else {\n el.insertBefore(shine, el.firstChild);\n }\n }\n },\n\n _runMorph: function (el, pointerEvent, onComplete) {\n const wave = el.querySelector('.vd-morph-wave');\n if (wave) {\n const rect = el.getBoundingClientRect();\n const cx = rect.left + rect.width / 2;\n const cy = rect.top + rect.height / 2;\n const px = pointerEvent ? (pointerEvent.clientX || cx) : cx;\n const py = pointerEvent ? (pointerEvent.clientY || cy) : cy;\n wave.style.left = (px - rect.left) + 'px';\n wave.style.top = (py - rect.top) + 'px';\n }\n\n el.classList.add('is-morphing');\n\n let duration = MORPH_DURATION_MS;\n const custom = getComputedStyle(el).getPropertyValue('--morph-duration');\n if (custom) {\n const parsed = parseFloat(custom);\n if (!isNaN(parsed)) duration = parsed * (custom.indexOf('ms') !== -1 ? 1 : 1000);\n }\n\n setTimeout(function () {\n el.classList.remove('is-morphing');\n\n const current = el.querySelector('.vd-morph-current');\n const next = el.querySelector('.vd-morph-next');\n if (current && next) {\n current.classList.remove('vd-morph-current');\n current.classList.add('vd-morph-next');\n next.classList.remove('vd-morph-next');\n next.classList.add('vd-morph-current');\n }\n\n el.classList.add('morph-done');\n setTimeout(function () { el.classList.remove('morph-done'); }, 350);\n\n if (typeof onComplete === 'function') onComplete();\n }, duration);\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('morph', Morph);\n }\n\n window.VanduoMorph = Morph;\n\n})();\n", "/**\n * Vanduo Framework - Flow (Carousel/Slider) Component\n * Touch-enabled carousel with slide/fade transitions, autoplay, indicators\n */\n\n(function () {\n 'use strict';\n\n const Flow = {\n instances: new Map(),\n\n init: function () {\n const carousels = document.querySelectorAll('.vd-flow, .vd-carousel');\n carousels.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const track = el.querySelector('.vd-flow-track');\n if (!track) return;\n\n const slides = Array.from(track.querySelectorAll('.vd-flow-slide'));\n if (slides.length === 0) return;\n\n const isFade = el.classList.contains('vd-flow-fade');\n const autoplay = el.hasAttribute('data-vd-autoplay');\n const interval = parseInt(el.getAttribute('data-vd-interval'), 10) || 5000;\n const loop = el.getAttribute('data-vd-loop') !== 'false';\n\n const state = {\n current: 0,\n total: slides.length,\n autoplayTimer: null,\n isFade: isFade,\n loop: loop,\n isDragging: false,\n startX: 0,\n currentX: 0,\n threshold: 50\n };\n\n const cleanup = [];\n\n // Set initial active slide\n slides.forEach((slide, i) => {\n slide.setAttribute('role', 'group');\n slide.setAttribute('aria-roledescription', 'slide');\n slide.setAttribute('aria-label', 'Slide ' + (i + 1) + ' of ' + slides.length);\n if (i === 0) slide.classList.add('is-active');\n });\n\n el.setAttribute('role', 'region');\n el.setAttribute('aria-roledescription', 'carousel');\n if (!el.getAttribute('aria-label')) {\n el.setAttribute('aria-label', 'Carousel');\n }\n\n // Live region for announcements\n const liveRegion = document.createElement('div');\n liveRegion.setAttribute('aria-live', 'polite');\n liveRegion.setAttribute('aria-atomic', 'true');\n liveRegion.className = 'sr-only';\n liveRegion.style.cssText = 'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);';\n el.appendChild(liveRegion);\n\n const goTo = (index, announce) => {\n if (announce === undefined) announce = true;\n let target = index;\n if (state.loop) {\n target = ((index % state.total) + state.total) % state.total;\n } else {\n target = Math.max(0, Math.min(index, state.total - 1));\n }\n\n const prev = state.current;\n state.current = target;\n\n if (state.isFade) {\n slides.forEach((s, i) => {\n s.classList.toggle('is-active', i === target);\n });\n } else {\n track.style.transform = 'translateX(-' + (target * 100) + '%)';\n }\n\n // Update indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.classList.toggle('is-active', i === target);\n ind.setAttribute('aria-selected', i === target ? 'true' : 'false');\n });\n\n // Update slide ARIA\n slides.forEach((s, i) => {\n s.setAttribute('aria-hidden', i !== target ? 'true' : 'false');\n });\n\n if (announce) {\n liveRegion.textContent = 'Slide ' + (target + 1) + ' of ' + state.total;\n }\n\n el.dispatchEvent(new CustomEvent('flow:change', {\n detail: { current: target, previous: prev, total: state.total }\n }));\n };\n\n const next = () => goTo(state.current + 1);\n const prev = () => goTo(state.current - 1);\n\n // Controls\n const prevBtn = el.querySelector('.vd-flow-prev');\n const nextBtn = el.querySelector('.vd-flow-next');\n\n if (prevBtn) {\n const h = () => prev();\n prevBtn.addEventListener('click', h);\n cleanup.push(() => prevBtn.removeEventListener('click', h));\n }\n if (nextBtn) {\n const h = () => next();\n nextBtn.addEventListener('click', h);\n cleanup.push(() => nextBtn.removeEventListener('click', h));\n }\n\n // Indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.setAttribute('role', 'tab');\n ind.setAttribute('aria-selected', i === 0 ? 'true' : 'false');\n ind.setAttribute('aria-label', 'Go to slide ' + (i + 1));\n const h = () => goTo(i);\n ind.addEventListener('click', h);\n cleanup.push(() => ind.removeEventListener('click', h));\n });\n\n // Keyboard navigation\n const keyHandler = (e) => {\n if (e.key === 'ArrowLeft') { prev(); e.preventDefault(); }\n if (e.key === 'ArrowRight') { next(); e.preventDefault(); }\n };\n el.setAttribute('tabindex', '0');\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n // Touch / pointer support\n const pointerDown = (e) => {\n state.isDragging = true;\n state.startX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n state.currentX = state.startX;\n el.classList.add('is-dragging');\n };\n\n const pointerMove = (e) => {\n if (!state.isDragging) return;\n state.currentX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n };\n\n const pointerUp = () => {\n if (!state.isDragging) return;\n state.isDragging = false;\n el.classList.remove('is-dragging');\n const diff = state.startX - state.currentX;\n if (Math.abs(diff) > state.threshold) {\n if (diff > 0) next();\n else prev();\n }\n };\n\n el.addEventListener('mousedown', pointerDown);\n el.addEventListener('mousemove', pointerMove);\n el.addEventListener('mouseup', pointerUp);\n el.addEventListener('mouseleave', pointerUp);\n el.addEventListener('touchstart', pointerDown, { passive: true });\n el.addEventListener('touchmove', pointerMove, { passive: true });\n el.addEventListener('touchend', pointerUp);\n\n cleanup.push(\n () => el.removeEventListener('mousedown', pointerDown),\n () => el.removeEventListener('mousemove', pointerMove),\n () => el.removeEventListener('mouseup', pointerUp),\n () => el.removeEventListener('mouseleave', pointerUp),\n () => el.removeEventListener('touchstart', pointerDown),\n () => el.removeEventListener('touchmove', pointerMove),\n () => el.removeEventListener('touchend', pointerUp)\n );\n\n // Autoplay\n const startAutoplay = () => {\n stopAutoplay();\n state.autoplayTimer = setInterval(next, interval);\n };\n\n const stopAutoplay = () => {\n if (state.autoplayTimer) {\n clearInterval(state.autoplayTimer);\n state.autoplayTimer = null;\n }\n };\n\n if (autoplay) {\n startAutoplay();\n const pauseHandler = () => stopAutoplay();\n const resumeHandler = () => startAutoplay();\n el.addEventListener('mouseenter', pauseHandler);\n el.addEventListener('mouseleave', resumeHandler);\n el.addEventListener('focusin', pauseHandler);\n el.addEventListener('focusout', resumeHandler);\n cleanup.push(\n () => el.removeEventListener('mouseenter', pauseHandler),\n () => el.removeEventListener('mouseleave', resumeHandler),\n () => el.removeEventListener('focusin', pauseHandler),\n () => el.removeEventListener('focusout', resumeHandler),\n () => stopAutoplay()\n );\n }\n\n // Initial ARIA state\n goTo(0, false);\n\n this.instances.set(el, {\n cleanup: cleanup,\n goTo: goTo,\n next: next,\n prev: prev,\n getState: () => ({ ...state })\n });\n },\n\n goTo: function (el, index) {\n const instance = this.instances.get(el);\n if (instance) instance.goTo(index);\n },\n\n next: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.next();\n },\n\n prev: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.prev();\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('flow', Flow);\n }\n\n window.VanduoFlow = Flow;\n\n})();\n", "/**\n * Vanduo Framework - Bubble (Popover) Component\n * Click-triggered rich HTML popover, reuses tooltip positioning concepts\n */\n\n(function () {\n 'use strict';\n\n const Bubble = {\n instances: new Map(),\n _globalCleanups: [],\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-bubble], [data-vd-popover]');\n triggers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n\n if (this._globalCleanups.length === 0) {\n const outsideClick = (e) => {\n this.instances.forEach((inst, trigger) => {\n if (!inst.popover.contains(e.target) && !trigger.contains(e.target)) {\n this.hide(trigger);\n }\n });\n };\n const escHandler = (e) => {\n if (e.key === 'Escape') {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n }\n };\n document.addEventListener('click', outsideClick, true);\n document.addEventListener('keydown', escHandler);\n this._globalCleanups.push(\n () => document.removeEventListener('click', outsideClick, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n }\n },\n\n initInstance: function (trigger) {\n const cleanup = [];\n const placement = trigger.getAttribute('data-vd-bubble-placement') ||\n trigger.getAttribute('data-vd-popover-placement') || 'bottom';\n\n // Build popover element\n const popover = document.createElement('div');\n popover.className = 'vd-bubble-content';\n popover.setAttribute('role', 'dialog');\n popover.setAttribute('aria-modal', 'false');\n popover.setAttribute('data-placement', placement);\n\n const title = trigger.getAttribute('data-vd-bubble-title') ||\n trigger.getAttribute('data-vd-popover-title');\n const content = trigger.getAttribute('data-vd-bubble') ||\n trigger.getAttribute('data-vd-popover') || '';\n const htmlContent = trigger.getAttribute('data-vd-bubble-html') ||\n trigger.getAttribute('data-vd-popover-html');\n\n if (title) {\n const header = document.createElement('div');\n header.className = 'vd-bubble-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const closeBtn = document.createElement('button');\n closeBtn.className = 'vd-bubble-close';\n closeBtn.setAttribute('aria-label', 'Close');\n closeBtn.innerHTML = '×';\n header.appendChild(titleSpan);\n header.appendChild(closeBtn);\n popover.appendChild(header);\n\n const closeHandler = (e) => { e.stopPropagation(); this.hide(trigger); };\n closeBtn.addEventListener('click', closeHandler);\n cleanup.push(() => closeBtn.removeEventListener('click', closeHandler));\n }\n\n const body = document.createElement('div');\n body.className = 'vd-bubble-body';\n if (htmlContent) {\n if (typeof sanitizeHtml === 'function') {\n body.innerHTML = sanitizeHtml(htmlContent);\n } else {\n body.textContent = htmlContent;\n }\n } else {\n body.textContent = content;\n }\n popover.appendChild(body);\n\n document.body.appendChild(popover);\n\n // ARIA on trigger\n const popId = 'vd-bubble-' + Math.random().toString(36).slice(2, 9);\n popover.id = popId;\n trigger.setAttribute('aria-haspopup', 'dialog');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.setAttribute('aria-controls', popId);\n\n // Toggle on click\n const toggleHandler = (e) => {\n e.stopPropagation();\n if (popover.classList.contains('is-visible')) {\n this.hide(trigger);\n } else {\n this.hideAll();\n this.show(trigger);\n }\n };\n trigger.addEventListener('click', toggleHandler);\n cleanup.push(() => trigger.removeEventListener('click', toggleHandler));\n\n this.instances.set(trigger, { popover, cleanup, placement });\n },\n\n position: function (trigger, popover, placement) {\n const rect = trigger.getBoundingClientRect();\n const popRect = popover.getBoundingClientRect();\n const gap = 10;\n let top, left;\n\n switch (placement) {\n case 'top':\n top = rect.top - popRect.height - gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n break;\n case 'left':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.left - popRect.width - gap + window.scrollX;\n break;\n case 'right':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.right + gap + window.scrollX;\n break;\n default: // bottom\n top = rect.bottom + gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n }\n\n // Clamp to viewport\n left = Math.max(8, Math.min(left, window.innerWidth - popRect.width - 8));\n top = Math.max(8, top);\n\n popover.style.top = top + 'px';\n popover.style.left = left + 'px';\n },\n\n show: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n const { popover, placement } = instance;\n\n popover.style.display = 'block';\n popover.classList.add('is-visible');\n trigger.setAttribute('aria-expanded', 'true');\n\n requestAnimationFrame(() => {\n this.position(trigger, popover, placement);\n });\n\n trigger.dispatchEvent(new CustomEvent('bubble:show', { bubbles: true }));\n },\n\n hide: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.popover.classList.remove('is-visible');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.dispatchEvent(new CustomEvent('bubble:hide', { bubbles: true }));\n },\n\n hideAll: function () {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n },\n\n destroy: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n if (instance.popover.parentNode) {\n instance.popover.parentNode.removeChild(instance.popover);\n }\n trigger.removeAttribute('aria-haspopup');\n trigger.removeAttribute('aria-expanded');\n trigger.removeAttribute('aria-controls');\n this.instances.delete(trigger);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, trigger) => this.destroy(trigger));\n this._globalCleanups.forEach(fn => fn());\n this._globalCleanups = [];\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('bubble', Bubble);\n }\n\n window.VanduoBubble = Bubble;\n\n})();\n", "/**\n * Vanduo Framework - Waypoint (Scrollspy) Component\n * Highlights navigation links based on scroll position using IntersectionObserver\n */\n\n(function () {\n 'use strict';\n\n const Waypoint = {\n instances: new Map(),\n\n init: function () {\n const navs = document.querySelectorAll('[data-vd-waypoint-nav], [data-vd-scrollspy-nav]');\n navs.forEach(nav => {\n if (this.instances.has(nav)) return;\n this.initInstance(nav);\n });\n },\n\n initInstance: function (nav) {\n const links = Array.from(nav.querySelectorAll('a[href^=\"#\"]'));\n if (links.length === 0) return;\n\n const cleanup = [];\n const offset = parseInt(nav.getAttribute('data-vd-waypoint-offset') || '80', 10);\n const sections = [];\n\n links.forEach(link => {\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.setAttribute('data-vd-waypoint-section', '');\n sections.push({ id, link, section });\n }\n });\n\n if (sections.length === 0) return;\n\n const activeSections = new Set();\n\n const setActive = (id) => {\n links.forEach(l => l.classList.remove('is-active'));\n const target = links.find(l => l.getAttribute('href') === '#' + id);\n if (target) {\n target.classList.add('is-active');\n nav.dispatchEvent(new CustomEvent('waypoint:change', {\n detail: { activeId: id, link: target }\n }));\n }\n };\n\n const rootMargin = '-' + offset + 'px 0px -40% 0px';\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n activeSections.add(entry.target.id);\n } else {\n activeSections.delete(entry.target.id);\n }\n });\n\n // Pick the topmost visible section\n for (let i = 0; i < sections.length; i++) {\n if (activeSections.has(sections[i].id)) {\n setActive(sections[i].id);\n return;\n }\n }\n }, {\n rootMargin: rootMargin,\n threshold: 0\n });\n\n sections.forEach(s => observer.observe(s.section));\n\n // Smooth scroll on click\n links.forEach(link => {\n const clickHandler = (e) => {\n e.preventDefault();\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth' });\n setActive(id);\n }\n };\n link.addEventListener('click', clickHandler);\n cleanup.push(() => link.removeEventListener('click', clickHandler));\n });\n\n cleanup.push(() => observer.disconnect());\n\n this.instances.set(nav, { observer, cleanup, sections, setActive });\n },\n\n refresh: function (nav) {\n this.destroy(nav);\n this.initInstance(nav);\n },\n\n destroy: function (nav) {\n const instance = this.instances.get(nav);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(nav);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, nav) => this.destroy(nav));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('waypoint', Waypoint);\n }\n\n window.VanduoWaypoint = Waypoint;\n\n})();\n", "/**\n * Vanduo Framework - Ripple (Waves Effect) Component\n * Adds expanding circle animation on click at pointer position\n */\n\n(function () {\n 'use strict';\n\n const Ripple = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-ripple, [data-vd-ripple]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n\n const createWave = (e) => {\n const rect = el.getBoundingClientRect();\n const size = Math.max(rect.width, rect.height);\n const x = (e.clientX || (e.touches && e.touches[0].clientX) || rect.left + rect.width / 2) - rect.left - size / 2;\n const y = (e.clientY || (e.touches && e.touches[0].clientY) || rect.top + rect.height / 2) - rect.top - size / 2;\n\n const wave = document.createElement('span');\n wave.className = 'vd-ripple-wave';\n wave.style.width = size + 'px';\n wave.style.height = size + 'px';\n wave.style.left = x + 'px';\n wave.style.top = y + 'px';\n\n el.appendChild(wave);\n\n wave.addEventListener('animationend', () => {\n if (wave.parentNode) wave.parentNode.removeChild(wave);\n });\n };\n\n el.addEventListener('mousedown', createWave);\n el.addEventListener('touchstart', createWave, { passive: true });\n\n cleanup.push(\n () => el.removeEventListener('mousedown', createWave),\n () => el.removeEventListener('touchstart', createWave)\n );\n\n this.instances.set(el, { cleanup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n // Remove any lingering wave elements\n el.querySelectorAll('.vd-ripple-wave').forEach(w => w.remove());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('ripple', Ripple);\n }\n\n window.VanduoRipple = Ripple;\n\n})();\n", "/**\n * Vanduo Framework - Affix (Sticky) Component\n * Uses IntersectionObserver to toggle .is-stuck within the nearest scrollable parent\n */\n\n(function () {\n 'use strict';\n\n function isScrollable(element) {\n if (!element || element === document.body) return false;\n\n const style = window.getComputedStyle(element);\n const overflowY = style.overflowY;\n const overflowX = style.overflowX;\n const canScrollY = /(auto|scroll|overlay)/.test(overflowY) && element.scrollHeight > element.clientHeight;\n const canScrollX = /(auto|scroll|overlay)/.test(overflowX) && element.scrollWidth > element.clientWidth;\n\n return canScrollY || canScrollX;\n }\n\n function getScrollParent(element) {\n let parent = element.parentElement;\n\n while (parent && parent !== document.body && parent !== document.documentElement) {\n if (isScrollable(parent)) return parent;\n parent = parent.parentElement;\n }\n\n return null;\n }\n\n const Affix = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-affix, .vd-sticky, [data-vd-affix]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const parsedOffset = parseInt(el.getAttribute('data-vd-affix-offset') || '0', 10);\n const offset = Number.isNaN(parsedOffset) ? 0 : parsedOffset;\n const scrollParent = getScrollParent(el);\n let isStuck = false;\n\n const sentinel = document.createElement('div');\n sentinel.style.cssText = 'display:block;height:1px;margin-bottom:-1px;visibility:hidden;pointer-events:none;';\n el.parentNode.insertBefore(sentinel, el);\n\n el.style.setProperty('--affix-top-offset', offset + 'px');\n\n function stick() {\n if (isStuck) return;\n isStuck = true;\n el.classList.add('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:stuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n function unstick() {\n if (!isStuck) return;\n isStuck = false;\n el.classList.remove('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:unstuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n const observer = new IntersectionObserver(function (entries) {\n entries.forEach(entry => {\n if (!entry.isIntersecting) {\n stick();\n } else {\n unstick();\n }\n });\n }, {\n root: scrollParent,\n rootMargin: '-' + offset + 'px 0px 0px 0px',\n threshold: 0\n });\n\n observer.observe(sentinel);\n\n cleanup.push(\n () => observer.disconnect(),\n () => { if (sentinel.parentNode) sentinel.parentNode.removeChild(sentinel); },\n () => {\n el.classList.remove('is-stuck');\n el.style.removeProperty('--affix-top-offset');\n }\n );\n\n this.instances.set(el, { cleanup, observer, sentinel, scrollParent });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n el.classList.remove('is-stuck');\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('affix', Affix);\n }\n\n window.VanduoAffix = Affix;\n\n})();\n", "/**\n * Vanduo Framework - Suggest (Autocomplete) Component\n * Dropdown suggestion list with keyboard navigation, static/async data sources\n */\n\n(function () {\n 'use strict';\n\n /**\n * Escape HTML entities to prevent XSS when inserting into innerHTML\n * @param {string} text\n * @returns {string}\n */\n function _escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n const Suggest = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-suggest], [data-vd-autocomplete]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const minChars = parseInt(input.getAttribute('data-vd-suggest-min-chars') || '1', 10);\n const url = input.getAttribute('data-vd-suggest-url') || '';\n const staticData = input.getAttribute('data-vd-suggest') || input.getAttribute('data-vd-autocomplete') || '';\n let items = [];\n\n try { items = JSON.parse(staticData); } catch (_e) {\n items = staticData.split(',').map(s => s.trim()).filter(Boolean);\n }\n\n // Wrap input if not already wrapped\n let wrapper = input.closest('.vd-suggest-wrapper, .vd-autocomplete-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create dropdown list\n const list = document.createElement('ul');\n list.className = 'vd-suggest-list';\n list.setAttribute('role', 'listbox');\n const listId = 'vd-suggest-' + Math.random().toString(36).slice(2, 9);\n list.id = listId;\n wrapper.appendChild(list);\n\n // ARIA\n input.setAttribute('role', 'combobox');\n input.setAttribute('aria-autocomplete', 'list');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('aria-controls', listId);\n input.setAttribute('autocomplete', 'off');\n\n let highlighted = -1;\n let currentItems = [];\n let debounceTimer = null;\n\n const renderItems = (filtered, query) => {\n list.innerHTML = '';\n currentItems = filtered;\n highlighted = -1;\n\n if (filtered.length === 0) {\n const empty = document.createElement('li');\n empty.className = 'vd-suggest-empty';\n empty.textContent = 'No results';\n list.appendChild(empty);\n return;\n }\n\n filtered.forEach((item, i) => {\n const li = document.createElement('li');\n li.className = 'vd-suggest-item';\n li.setAttribute('role', 'option');\n li.id = listId + '-item-' + i;\n\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n if (query) {\n // Escape HTML first to prevent XSS, then highlight matches in the safe string\n const escaped = _escapeHtml(text);\n const re = new RegExp('(' + query.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n li.innerHTML = escaped.replace(re, '$1');\n } else {\n li.textContent = text;\n }\n\n li.addEventListener('click', () => selectItem(i));\n list.appendChild(li);\n });\n };\n\n const open = () => {\n list.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n list.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n highlighted = -1;\n input.removeAttribute('aria-activedescendant');\n };\n\n const selectItem = (index) => {\n const item = currentItems[index];\n const value = typeof item === 'object' ? (item.value || item.label || String(item)) : String(item);\n input.value = value;\n close();\n input.dispatchEvent(new CustomEvent('suggest:select', {\n detail: { value, item, index },\n bubbles: true\n }));\n };\n\n const highlight = (index) => {\n const listItems = list.querySelectorAll('.vd-suggest-item');\n listItems.forEach(li => li.classList.remove('is-highlighted'));\n if (index >= 0 && index < listItems.length) {\n highlighted = index;\n listItems[index].classList.add('is-highlighted');\n input.setAttribute('aria-activedescendant', listItems[index].id);\n listItems[index].scrollIntoView({ block: 'nearest' });\n }\n };\n\n const doSearch = async (query) => {\n if (query.length < minChars) { close(); return; }\n\n let filtered;\n if (url) {\n try {\n const separator = url.includes('?') ? '&' : '?';\n const res = await window.fetch(url + separator + 'q=' + encodeURIComponent(query));\n filtered = await res.json();\n } catch (_e) {\n filtered = [];\n }\n } else {\n const lower = query.toLowerCase();\n filtered = items.filter(item => {\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n return text.toLowerCase().includes(lower);\n });\n }\n\n renderItems(filtered, query);\n if (filtered.length > 0) open();\n else open(); // show \"no results\"\n };\n\n const inputHandler = () => {\n clearTimeout(debounceTimer);\n debounceTimer = setTimeout(() => doSearch(input.value), 200);\n };\n\n const keyHandler = (e) => {\n if (!list.classList.contains('is-open')) {\n if (e.key === 'ArrowDown') { doSearch(input.value); e.preventDefault(); }\n return;\n }\n\n const total = currentItems.length;\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n highlight(highlighted < total - 1 ? highlighted + 1 : 0);\n break;\n case 'ArrowUp':\n e.preventDefault();\n highlight(highlighted > 0 ? highlighted - 1 : total - 1);\n break;\n case 'Enter':\n e.preventDefault();\n if (highlighted >= 0) selectItem(highlighted);\n break;\n case 'Escape':\n close();\n break;\n }\n };\n\n const blurHandler = () => {\n setTimeout(close, 200);\n };\n\n input.addEventListener('input', inputHandler);\n input.addEventListener('keydown', keyHandler);\n input.addEventListener('blur', blurHandler);\n input.addEventListener('focus', () => { if (input.value.length >= minChars) doSearch(input.value); });\n\n cleanup.push(\n () => input.removeEventListener('input', inputHandler),\n () => input.removeEventListener('keydown', keyHandler),\n () => input.removeEventListener('blur', blurHandler),\n () => clearTimeout(debounceTimer),\n () => { if (list.parentNode) list.parentNode.removeChild(list); }\n );\n\n this.instances.set(input, { cleanup, list, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('suggest', Suggest);\n }\n\n window.VanduoSuggest = Suggest;\n\n})();\n", "/**\n * Vanduo Framework - Validate (Form Validation) Component\n * Declarative validation via data attributes with real-time and on-submit modes\n */\n\n(function () {\n 'use strict';\n\n const Validate = {\n instances: new Map(),\n\n rules: {\n required: (value) => value.trim().length > 0,\n email: (value) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value),\n url: (value) => { try { new URL(value); return true; } catch (_e) { return false; } },\n number: (value) => !isNaN(parseFloat(value)) && isFinite(value),\n min: (value, param) => value.length >= parseInt(param, 10),\n max: (value, param) => value.length <= parseInt(param, 10),\n minVal: (value, param) => parseFloat(value) >= parseFloat(param),\n maxVal: (value, param) => parseFloat(value) <= parseFloat(param),\n pattern: (value, param) => {\n try {\n // Cap regex length to prevent ReDoS from excessively complex patterns\n if (param.length > 100) return false;\n return new RegExp(param).test(value);\n } catch (_e) { return false; }\n },\n match: (value, param) => {\n try {\n const escaped = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(param) : param;\n const other = document.querySelector('[name=\"' + escaped + '\"]');\n return other ? value === other.value : false;\n } catch (_e) {\n return false;\n }\n }\n },\n\n messages: {\n required: 'This field is required',\n email: 'Please enter a valid email address',\n url: 'Please enter a valid URL',\n number: 'Please enter a valid number',\n min: 'Minimum {0} characters required',\n max: 'Maximum {0} characters allowed',\n minVal: 'Value must be at least {0}',\n maxVal: 'Value must be at most {0}',\n pattern: 'Invalid format',\n match: 'Fields do not match'\n },\n\n init: function () {\n const forms = document.querySelectorAll('[data-vd-validate], .vd-validate');\n forms.forEach(form => {\n if (this.instances.has(form)) return;\n this.initInstance(form);\n });\n },\n\n initInstance: function (form) {\n const cleanup = [];\n const mode = form.getAttribute('data-vd-validate-mode') || 'blur'; // blur | input | submit\n const fields = form.querySelectorAll('[data-vd-rules]');\n\n const validateField = (field) => {\n const rulesStr = field.getAttribute('data-vd-rules') || '';\n const rules = rulesStr.split('|').map(r => r.trim()).filter(Boolean);\n const value = field.value;\n const errors = [];\n\n for (const rule of rules) {\n const [name, ...params] = rule.split(':');\n const param = params.join(':');\n const validator = this.rules[name];\n\n if (validator && !validator(value, param)) {\n const customMsg = field.getAttribute('data-vd-msg-' + name);\n let msg = customMsg || this.messages[name] || 'Invalid';\n if (param) msg = msg.replace('{0}', param);\n errors.push(msg);\n break; // one error at a time\n }\n }\n\n this.setFieldState(field, errors);\n return errors.length === 0;\n };\n\n const validateAll = () => {\n let valid = true;\n fields.forEach(field => {\n if (!validateField(field)) valid = false;\n });\n return valid;\n };\n\n // Per-field listeners\n fields.forEach(field => {\n if (mode === 'input' || mode === 'blur') {\n const eventType = mode === 'input' ? 'input' : 'blur';\n const handler = () => validateField(field);\n field.addEventListener(eventType, handler);\n cleanup.push(() => field.removeEventListener(eventType, handler));\n\n if (mode === 'blur') {\n const inputClear = () => {\n if (field.classList.contains('is-invalid') || field.classList.contains('is-valid')) {\n validateField(field);\n }\n };\n field.addEventListener('input', inputClear);\n cleanup.push(() => field.removeEventListener('input', inputClear));\n }\n }\n });\n\n // Form submit\n const submitHandler = (e) => {\n const valid = validateAll();\n if (!valid) {\n e.preventDefault();\n e.stopPropagation();\n // Focus first invalid field\n const firstInvalid = form.querySelector('.is-invalid');\n if (firstInvalid) firstInvalid.focus();\n }\n form.dispatchEvent(new CustomEvent('validate:submit', {\n detail: { valid },\n bubbles: true\n }));\n };\n\n form.addEventListener('submit', submitHandler);\n cleanup.push(() => form.removeEventListener('submit', submitHandler));\n\n this.instances.set(form, { cleanup, validateAll, validateField });\n },\n\n setFieldState: function (field, errors) {\n const wrapper = field.closest('.vd-form-group') || field.parentElement;\n let errorEl = wrapper.querySelector('.vd-validate-error');\n\n field.classList.remove('is-valid', 'is-invalid');\n\n if (errors.length > 0) {\n field.classList.add('is-invalid');\n field.setAttribute('aria-invalid', 'true');\n if (!errorEl) {\n errorEl = document.createElement('div');\n errorEl.className = 'vd-validate-error';\n errorEl.id = 'vd-err-' + Math.random().toString(36).slice(2, 9);\n errorEl.setAttribute('role', 'alert');\n wrapper.appendChild(errorEl);\n }\n errorEl.textContent = errors[0];\n errorEl.style.display = '';\n field.setAttribute('aria-describedby', errorEl.id);\n } else if (field.value.trim()) {\n field.classList.add('is-valid');\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n } else {\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n }\n },\n\n validateForm: function (form) {\n const instance = this.instances.get(form);\n return instance ? instance.validateAll() : false;\n },\n\n addRule: function (name, validator, message) {\n this.rules[name] = validator;\n if (message) this.messages[name] = message;\n },\n\n destroy: function (form) {\n const instance = this.instances.get(form);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(form);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, form) => this.destroy(form));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('validate', Validate);\n }\n\n window.VanduoValidate = Validate;\n\n})();\n", "/**\n * Vanduo Framework - Datepicker Component\n * Calendar popup attached to input field with month/year navigation\n */\n\n(function () {\n 'use strict';\n\n const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\n const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];\n\n const Datepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-datepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const format = input.getAttribute('data-vd-datepicker-format') || 'yyyy-mm-dd';\n const minStr = input.getAttribute('data-vd-datepicker-min');\n const maxStr = input.getAttribute('data-vd-datepicker-max');\n const minDate = minStr ? new Date(minStr) : null;\n const maxDate = maxStr ? new Date(maxStr) : null;\n\n const today = new Date();\n let viewYear = today.getFullYear();\n let viewMonth = today.getMonth();\n let selectedDate = null;\n let viewMode = 'days'; // days | months | years\n\n // Parse existing value\n if (input.value) {\n const parsed = new Date(input.value);\n if (!isNaN(parsed.getTime())) {\n selectedDate = parsed;\n viewYear = parsed.getFullYear();\n viewMonth = parsed.getMonth();\n }\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-datepicker-popup';\n popup.setAttribute('role', 'dialog');\n popup.setAttribute('aria-label', 'Choose date');\n\n const wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n wrapper.appendChild(popup);\n\n const formatDate = (d) => {\n const yyyy = d.getFullYear();\n const mm = String(d.getMonth() + 1).padStart(2, '0');\n const dd = String(d.getDate()).padStart(2, '0');\n return format.replace('yyyy', yyyy).replace('mm', mm).replace('dd', dd);\n };\n\n const isDisabled = (d) => {\n if (minDate && d < minDate) return true;\n if (maxDate && d > maxDate) return true;\n return false;\n };\n\n const isSameDay = (a, b) => a && b &&\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate();\n\n const render = () => {\n popup.innerHTML = '';\n\n // Header\n const header = document.createElement('div');\n header.className = 'vd-datepicker-header';\n\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-datepicker-prev';\n prevBtn.innerHTML = '‹';\n prevBtn.setAttribute('aria-label', 'Previous');\n\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-datepicker-next';\n nextBtn.innerHTML = '›';\n nextBtn.setAttribute('aria-label', 'Next');\n\n const title = document.createElement('span');\n title.className = 'vd-datepicker-title';\n\n if (viewMode === 'days') {\n title.textContent = MONTHS[viewMonth] + ' ' + viewYear;\n title.addEventListener('click', () => { viewMode = 'months'; render(); });\n prevBtn.addEventListener('click', () => { viewMonth--; if (viewMonth < 0) { viewMonth = 11; viewYear--; } render(); });\n nextBtn.addEventListener('click', () => { viewMonth++; if (viewMonth > 11) { viewMonth = 0; viewYear++; } render(); });\n } else if (viewMode === 'months') {\n title.textContent = String(viewYear);\n title.addEventListener('click', () => { viewMode = 'years'; render(); });\n prevBtn.addEventListener('click', () => { viewYear--; render(); });\n nextBtn.addEventListener('click', () => { viewYear++; render(); });\n } else {\n const decadeStart = Math.floor(viewYear / 10) * 10;\n title.textContent = decadeStart + ' - ' + (decadeStart + 9);\n prevBtn.addEventListener('click', () => { viewYear -= 10; render(); });\n nextBtn.addEventListener('click', () => { viewYear += 10; render(); });\n }\n\n header.appendChild(prevBtn);\n header.appendChild(title);\n header.appendChild(nextBtn);\n popup.appendChild(header);\n\n if (viewMode === 'days') {\n // Weekday headers\n const weekdays = document.createElement('div');\n weekdays.className = 'vd-datepicker-weekdays';\n DAYS.forEach(d => {\n const span = document.createElement('span');\n span.textContent = d;\n weekdays.appendChild(span);\n });\n popup.appendChild(weekdays);\n\n // Days grid\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-days';\n\n const firstDay = new Date(viewYear, viewMonth, 1).getDay();\n const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();\n const daysInPrev = new Date(viewYear, viewMonth, 0).getDate();\n\n // Previous month padding\n for (let i = firstDay - 1; i >= 0; i--) {\n const btn = createDayBtn(daysInPrev - i, true);\n grid.appendChild(btn);\n }\n\n // Current month\n for (let d = 1; d <= daysInMonth; d++) {\n const date = new Date(viewYear, viewMonth, d);\n const btn = createDayBtn(d, false, date);\n grid.appendChild(btn);\n }\n\n // Next month padding\n const totalCells = firstDay + daysInMonth;\n const remaining = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7);\n for (let i = 1; i <= remaining; i++) {\n const btn = createDayBtn(i, true);\n grid.appendChild(btn);\n }\n\n popup.appendChild(grid);\n } else if (viewMode === 'months') {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-months';\n MONTHS.forEach((name, i) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-month-btn';\n btn.textContent = name.slice(0, 3);\n if (selectedDate && selectedDate.getFullYear() === viewYear && selectedDate.getMonth() === i) {\n btn.classList.add('is-selected');\n }\n btn.addEventListener('click', () => { viewMonth = i; viewMode = 'days'; render(); });\n grid.appendChild(btn);\n });\n popup.appendChild(grid);\n } else {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-years';\n const decadeStart = Math.floor(viewYear / 10) * 10;\n for (let y = decadeStart - 1; y <= decadeStart + 10; y++) {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-year-btn';\n btn.textContent = y;\n if (selectedDate && selectedDate.getFullYear() === y) btn.classList.add('is-selected');\n if (y < decadeStart || y > decadeStart + 9) btn.style.opacity = '0.4';\n btn.addEventListener('click', () => { viewYear = y; viewMode = 'months'; render(); });\n grid.appendChild(btn);\n }\n popup.appendChild(grid);\n }\n };\n\n const createDayBtn = (day, outside, date) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-day';\n btn.textContent = day;\n\n if (outside) {\n btn.classList.add('is-outside');\n btn.tabIndex = -1;\n return btn;\n }\n\n if (date && isSameDay(date, today)) btn.classList.add('is-today');\n if (date && isSameDay(date, selectedDate)) btn.classList.add('is-selected');\n if (date && isDisabled(date)) {\n btn.classList.add('is-disabled');\n return btn;\n }\n\n if (date) {\n btn.addEventListener('click', () => {\n selectedDate = date;\n viewYear = date.getFullYear();\n viewMonth = date.getMonth();\n input.value = formatDate(date);\n close();\n input.dispatchEvent(new CustomEvent('datepicker:select', {\n detail: { date, formatted: input.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n }\n\n return btn;\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n viewMode = 'days';\n };\n\n // Events\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'dialog');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close, popup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('datepicker', Datepicker);\n }\n\n window.VanduoDatepicker = Datepicker;\n\n})();\n", "/**\n * Vanduo Framework - Timepicker Component\n * Dropdown time selection with 12h/24h format and configurable step intervals\n */\n\n(function () {\n 'use strict';\n\n const Timepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-timepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const is24h = input.getAttribute('data-vd-timepicker-format') === '24h';\n const step = parseInt(input.getAttribute('data-vd-timepicker-step') || '30', 10);\n\n // Create wrapper\n let wrapper = input.closest('.vd-suggest-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-timepicker-popup';\n popup.setAttribute('role', 'listbox');\n wrapper.appendChild(popup);\n\n // Generate time slots\n const times = [];\n for (let h = 0; h < 24; h++) {\n for (let m = 0; m < 60; m += step) {\n const hh24 = String(h).padStart(2, '0');\n const mm = String(m).padStart(2, '0');\n\n if (is24h) {\n times.push({ display: hh24 + ':' + mm, value: hh24 + ':' + mm });\n } else {\n const period = h < 12 ? 'AM' : 'PM';\n const h12 = h === 0 ? 12 : (h > 12 ? h - 12 : h);\n const display = h12 + ':' + mm + ' ' + period;\n times.push({ display, value: hh24 + ':' + mm });\n }\n }\n }\n\n const render = () => {\n popup.innerHTML = '';\n times.forEach(t => {\n const item = document.createElement('div');\n item.className = 'vd-timepicker-item';\n item.setAttribute('role', 'option');\n item.textContent = t.display;\n\n if (input.value === t.value || input.value === t.display) {\n item.classList.add('is-selected');\n }\n\n item.addEventListener('click', () => {\n input.value = t.display;\n popup.querySelectorAll('.vd-timepicker-item').forEach(i => i.classList.remove('is-selected'));\n item.classList.add('is-selected');\n close();\n input.dispatchEvent(new CustomEvent('timepicker:select', {\n detail: { display: t.display, value: t.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n\n popup.appendChild(item);\n });\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n // Scroll to selected\n const selected = popup.querySelector('.is-selected');\n if (selected) selected.scrollIntoView({ block: 'center' });\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n };\n\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'listbox');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n input.readOnly = true;\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('timepicker', Timepicker);\n }\n\n window.VanduoTimepicker = Timepicker;\n\n})();\n", "/**\n * Vanduo Framework - Stepper Component\n * Multi-step progress indicator with state management\n */\n\n(function () {\n 'use strict';\n\n const Stepper = {\n instances: new Map(),\n\n init: function () {\n const steppers = document.querySelectorAll('.vd-stepper');\n steppers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const items = Array.from(el.querySelectorAll('.vd-stepper-item'));\n const isClickable = el.classList.contains('vd-stepper-clickable');\n let currentIndex = items.findIndex(i => i.classList.contains('is-active'));\n if (currentIndex === -1) currentIndex = 0;\n\n const setStep = (index) => {\n if (index < 0 || index >= items.length) return;\n const prev = currentIndex;\n currentIndex = index;\n\n items.forEach((item, i) => {\n item.classList.remove('is-active', 'is-completed');\n if (i < index) item.classList.add('is-completed');\n else if (i === index) item.classList.add('is-active');\n });\n\n el.dispatchEvent(new CustomEvent('stepper:change', {\n detail: { current: index, previous: prev, total: items.length },\n bubbles: true\n }));\n };\n\n if (isClickable) {\n items.forEach((item, i) => {\n const handler = () => setStep(i);\n item.addEventListener('click', handler);\n cleanup.push(() => item.removeEventListener('click', handler));\n });\n }\n\n // Initialize current state\n setStep(currentIndex);\n\n this.instances.set(el, {\n cleanup,\n setStep,\n next: () => setStep(currentIndex + 1),\n prev: () => setStep(currentIndex - 1),\n getCurrent: () => currentIndex\n });\n },\n\n setStep: function (el, index) {\n const inst = this.instances.get(el);\n if (inst) inst.setStep(index);\n },\n\n next: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.next();\n },\n\n prev: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.prev();\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('stepper', Stepper);\n }\n\n window.VanduoStepper = Stepper;\n\n})();\n", "/**\n * Vanduo Framework - Rating Component\n * Star-based rating input with hover preview and read-only mode\n */\n\n(function () {\n 'use strict';\n\n const Rating = {\n instances: new Map(),\n\n init: function () {\n const ratings = document.querySelectorAll('[data-vd-rating]');\n ratings.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const max = parseInt(el.getAttribute('data-vd-rating-max') || '5', 10);\n const initialValue = parseFloat(el.getAttribute('data-vd-rating-value') || '0');\n const readonly = el.classList.contains('vd-rating-readonly') || el.hasAttribute('data-vd-rating-readonly');\n let currentValue = initialValue;\n\n el.classList.add('vd-rating');\n el.setAttribute('role', 'radiogroup');\n el.setAttribute('aria-label', el.getAttribute('aria-label') || 'Rating');\n\n // Clear existing stars\n el.innerHTML = '';\n\n // Create stars\n const stars = [];\n for (let i = 1; i <= max; i++) {\n const star = document.createElement('button');\n star.type = 'button';\n star.className = 'vd-rating-star';\n star.setAttribute('role', 'radio');\n star.setAttribute('aria-label', i + ' star' + (i > 1 ? 's' : ''));\n star.setAttribute('aria-checked', i <= currentValue ? 'true' : 'false');\n if (readonly) star.tabIndex = -1;\n stars.push(star);\n el.appendChild(star);\n }\n\n // Value display\n const valueDisplay = document.createElement('span');\n valueDisplay.className = 'vd-rating-value';\n valueDisplay.textContent = currentValue > 0 ? currentValue.toString() : '';\n el.appendChild(valueDisplay);\n\n const updateStars = (value) => {\n stars.forEach((star, i) => {\n star.classList.remove('is-active', 'is-half');\n const starNum = i + 1;\n if (starNum <= Math.floor(value)) {\n star.classList.add('is-active');\n } else if (starNum - 0.5 <= value) {\n star.classList.add('is-half');\n }\n star.setAttribute('aria-checked', starNum <= value ? 'true' : 'false');\n });\n valueDisplay.textContent = value > 0 ? value.toString() : '';\n };\n\n updateStars(currentValue);\n\n if (!readonly) {\n stars.forEach((star, i) => {\n const enterHandler = () => {\n stars.forEach((s, j) => {\n s.classList.toggle('is-hovered', j <= i);\n });\n };\n const leaveHandler = () => {\n stars.forEach(s => s.classList.remove('is-hovered'));\n };\n const clickHandler = () => {\n currentValue = i + 1;\n el.setAttribute('data-vd-rating-value', currentValue);\n updateStars(currentValue);\n el.dispatchEvent(new CustomEvent('rating:change', {\n detail: { value: currentValue, max },\n bubbles: true\n }));\n };\n\n star.addEventListener('mouseenter', enterHandler);\n star.addEventListener('mouseleave', leaveHandler);\n star.addEventListener('click', clickHandler);\n\n cleanup.push(\n () => star.removeEventListener('mouseenter', enterHandler),\n () => star.removeEventListener('mouseleave', leaveHandler),\n () => star.removeEventListener('click', clickHandler)\n );\n });\n\n // Keyboard\n const keyHandler = (e) => {\n if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n e.preventDefault();\n if (currentValue < max) {\n currentValue++;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n e.preventDefault();\n if (currentValue > 1) {\n currentValue--;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n }\n };\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n }\n\n this.instances.set(el, {\n cleanup,\n getValue: () => currentValue,\n setValue: (v) => { currentValue = v; updateStars(v); }\n });\n },\n\n getValue: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getValue() : 0;\n },\n\n setValue: function (el, value) {\n const inst = this.instances.get(el);\n if (inst) inst.setValue(value);\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('rating', Rating);\n }\n\n window.VanduoRating = Rating;\n\n})();\n", "/**\n * Vanduo Framework - Transfer (Dual-list) Component\n * Source-to-target list transfer with search, select-all, and move actions\n */\n\n(function () {\n 'use strict';\n\n const Transfer = {\n instances: new Map(),\n\n init: function () {\n const transfers = document.querySelectorAll('[data-vd-transfer]');\n transfers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n el.classList.add('vd-transfer');\n\n let sourceData, targetData;\n try {\n const raw = JSON.parse(el.getAttribute('data-vd-transfer') || '[]');\n sourceData = raw.map((item, i) => ({\n id: item.id || 'item-' + i,\n label: item.label || item.text || String(item),\n selected: false\n }));\n } catch (_e) {\n sourceData = [];\n }\n targetData = [];\n\n const sourceSelected = new Set();\n const targetSelected = new Set();\n\n const render = () => {\n el.innerHTML = '';\n\n // Source panel\n const sourcePanel = createPanel('Source', sourceData, sourceSelected, 'source');\n // Actions\n const actions = document.createElement('div');\n actions.className = 'vd-transfer-actions';\n\n const moveRightBtn = document.createElement('button');\n moveRightBtn.type = 'button';\n moveRightBtn.className = 'vd-transfer-btn';\n moveRightBtn.innerHTML = '›';\n moveRightBtn.setAttribute('aria-label', 'Move to target');\n moveRightBtn.disabled = sourceSelected.size === 0;\n moveRightBtn.addEventListener('click', () => moveRight());\n\n const moveLeftBtn = document.createElement('button');\n moveLeftBtn.type = 'button';\n moveLeftBtn.className = 'vd-transfer-btn';\n moveLeftBtn.innerHTML = '‹';\n moveLeftBtn.setAttribute('aria-label', 'Move to source');\n moveLeftBtn.disabled = targetSelected.size === 0;\n moveLeftBtn.addEventListener('click', () => moveLeft());\n\n actions.appendChild(moveRightBtn);\n actions.appendChild(moveLeftBtn);\n\n // Target panel\n const targetPanel = createPanel('Target', targetData, targetSelected, 'target');\n\n el.appendChild(sourcePanel);\n el.appendChild(actions);\n el.appendChild(targetPanel);\n };\n\n const createPanel = (title, data, selected, _side) => {\n const panel = document.createElement('div');\n panel.className = 'vd-transfer-panel';\n\n const header = document.createElement('div');\n header.className = 'vd-transfer-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const count = document.createElement('span');\n count.className = 'vd-transfer-count';\n count.textContent = selected.size + '/' + data.length;\n header.appendChild(titleSpan);\n header.appendChild(count);\n panel.appendChild(header);\n\n // Search\n const searchDiv = document.createElement('div');\n searchDiv.className = 'vd-transfer-search';\n const searchInput = document.createElement('input');\n searchInput.type = 'text';\n searchInput.placeholder = 'Search...';\n searchInput.setAttribute('aria-label', 'Search ' + title.toLowerCase());\n searchDiv.appendChild(searchInput);\n panel.appendChild(searchDiv);\n\n // List\n const list = document.createElement('ul');\n list.className = 'vd-transfer-list';\n list.setAttribute('role', 'listbox');\n\n const renderList = (filter) => {\n list.innerHTML = '';\n const filtered = filter ? data.filter(d => {\n const label = (d.label || d.text || String(d)).toLowerCase();\n return label.includes(filter.toLowerCase());\n }) : data;\n filtered.forEach(item => {\n const li = document.createElement('li');\n li.className = 'vd-transfer-item';\n li.setAttribute('role', 'option');\n if (selected.has(item.id)) li.classList.add('is-selected');\n\n const checkbox = document.createElement('input');\n checkbox.type = 'checkbox';\n checkbox.checked = selected.has(item.id);\n checkbox.setAttribute('aria-label', item.label);\n\n const label = document.createElement('span');\n label.textContent = item.label;\n\n li.addEventListener('click', () => {\n if (selected.has(item.id)) selected.delete(item.id);\n else selected.add(item.id);\n render();\n });\n\n li.appendChild(checkbox);\n li.appendChild(label);\n list.appendChild(li);\n });\n };\n\n searchInput.addEventListener('input', () => renderList(searchInput.value));\n renderList('');\n\n panel.appendChild(list);\n return panel;\n };\n\n const moveRight = () => {\n const toMove = sourceData.filter(d => sourceSelected.has(d.id));\n sourceData = sourceData.filter(d => !sourceSelected.has(d.id));\n targetData = targetData.concat(toMove);\n sourceSelected.clear();\n render();\n fireChange();\n };\n\n const moveLeft = () => {\n const toMove = targetData.filter(d => targetSelected.has(d.id));\n targetData = targetData.filter(d => !targetSelected.has(d.id));\n sourceData = sourceData.concat(toMove);\n targetSelected.clear();\n render();\n fireChange();\n };\n\n const fireChange = () => {\n el.dispatchEvent(new CustomEvent('transfer:change', {\n detail: {\n source: sourceData.map(d => d.id),\n target: targetData.map(d => d.id)\n },\n bubbles: true\n }));\n };\n\n render();\n\n this.instances.set(el, {\n cleanup,\n getTarget: () => targetData.map(d => d.id),\n getSource: () => sourceData.map(d => d.id)\n });\n },\n\n getSelected: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getTarget() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('transfer', Transfer);\n }\n\n window.VanduoTransfer = Transfer;\n\n})();\n", "/**\n * Vanduo Framework - Tree View Component\n * Hierarchical collapsible tree with checkbox selection and keyboard navigation\n */\n\n(function () {\n 'use strict';\n\n const Tree = {\n instances: new Map(),\n\n init: function () {\n const trees = document.querySelectorAll('[data-vd-tree]');\n trees.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const cascade = el.getAttribute('data-vd-tree-cascade') !== 'false';\n\n let data;\n try { data = JSON.parse(el.getAttribute('data-vd-tree') || '[]'); } catch (_e) { data = []; }\n\n el.classList.add('vd-tree');\n el.setAttribute('role', 'tree');\n\n const render = (items, parent) => {\n parent.innerHTML = '';\n items.forEach(item => {\n const node = document.createElement('li');\n node.className = 'vd-tree-node';\n node.setAttribute('role', 'treeitem');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n if (item.open) node.classList.add('is-open');\n\n const content = document.createElement('div');\n content.className = 'vd-tree-node-content';\n\n // Toggle\n if (item.children && item.children.length > 0) {\n const toggle = document.createElement('button');\n toggle.type = 'button';\n toggle.className = 'vd-tree-toggle';\n toggle.setAttribute('aria-label', 'Toggle');\n toggle.addEventListener('click', (e) => {\n e.stopPropagation();\n item.open = !item.open;\n node.classList.toggle('is-open');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n });\n content.appendChild(toggle);\n } else {\n const ph = document.createElement('span');\n ph.className = 'vd-tree-toggle-placeholder';\n content.appendChild(ph);\n }\n\n // Checkbox\n if (el.hasAttribute('data-vd-tree-checkbox')) {\n const cb = document.createElement('input');\n cb.type = 'checkbox';\n cb.className = 'vd-tree-checkbox';\n cb.checked = !!item.checked;\n cb.setAttribute('aria-label', item.label);\n cb.addEventListener('change', (e) => {\n e.stopPropagation();\n item.checked = cb.checked;\n if (cascade && item.children) {\n setChildChecked(item.children, cb.checked);\n render(data, el);\n }\n el.dispatchEvent(new CustomEvent('tree:check', {\n detail: { id: item.id, checked: cb.checked, label: item.label },\n bubbles: true\n }));\n });\n content.appendChild(cb);\n }\n\n // Icon\n if (item.icon) {\n const icon = document.createElement('span');\n icon.className = 'vd-tree-icon ' + item.icon;\n content.appendChild(icon);\n }\n\n // Label\n const label = document.createElement('span');\n label.className = 'vd-tree-label';\n label.textContent = item.label || '';\n content.appendChild(label);\n\n node.appendChild(content);\n\n // Children\n if (item.children && item.children.length > 0) {\n const childList = document.createElement('ul');\n childList.className = 'vd-tree-children';\n childList.setAttribute('role', 'group');\n render(item.children, childList);\n node.appendChild(childList);\n }\n\n parent.appendChild(node);\n });\n };\n\n const setChildChecked = (items, checked) => {\n items.forEach(item => {\n item.checked = checked;\n if (item.children) setChildChecked(item.children, checked);\n });\n };\n\n // Keyboard\n const keyHandler = (e) => {\n const focused = document.activeElement;\n if (!el.contains(focused)) return;\n\n const nodes = Array.from(el.querySelectorAll('.vd-tree-node-content'));\n const idx = nodes.indexOf(focused.closest('.vd-tree-node-content'));\n if (idx === -1) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (idx < nodes.length - 1) {\n const next = nodes[idx + 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (next) next.focus();\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (idx > 0) {\n const prev = nodes[idx - 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (prev) prev.focus();\n }\n break;\n }\n };\n\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n render(data, el);\n\n this.instances.set(el, {\n cleanup,\n getData: () => data,\n getChecked: () => {\n const checked = [];\n const collect = (items) => {\n items.forEach(i => {\n if (i.checked) checked.push(i.id || i.label);\n if (i.children) collect(i.children);\n });\n };\n collect(data);\n return checked;\n }\n });\n },\n\n getChecked: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getChecked() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tree', Tree);\n }\n\n window.VanduoTree = Tree;\n\n})();\n", "/**\n * Vanduo Framework - Spotlight (Feature Discovery) Component\n * Guided tour with overlay highlight and step-through tooltip\n */\n\n(function () {\n 'use strict';\n\n const Spotlight = {\n _active: false,\n _steps: [],\n _currentStep: 0,\n _elements: {},\n _cleanup: [],\n _boundTriggers: new WeakMap(),\n _triggerElement: null,\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-spotlight]');\n\n triggers.forEach(trigger => {\n if (this._boundTriggers.has(trigger)) return;\n\n const clickHandler = (event) => {\n event.preventDefault();\n\n const steps = this._parseSteps(trigger.getAttribute('data-vd-spotlight'));\n if (steps.length === 0) return;\n\n this.start(steps, { trigger });\n };\n\n trigger.addEventListener('click', clickHandler);\n this._boundTriggers.set(trigger, clickHandler);\n });\n },\n\n _parseSteps: function (raw) {\n if (typeof raw !== 'string' || raw.trim() === '') return [];\n\n try {\n const parsed = JSON.parse(raw);\n return this._normalizeSteps(parsed);\n } catch (error) {\n console.error('VanduoSpotlight: invalid data-vd-spotlight payload.', error);\n return [];\n }\n },\n\n _normalizeStep: function (step) {\n if (!step || typeof step !== 'object') return null;\n\n const target = step.target;\n const hasSelectorTarget = typeof target === 'string' && target.trim() !== '';\n const hasElementTarget = typeof Element !== 'undefined' && target instanceof Element;\n\n if (!hasSelectorTarget && !hasElementTarget) return null;\n\n const title = typeof step.title === 'string' ? step.title : '';\n const description = typeof step.description === 'string'\n ? step.description\n : (typeof step.content === 'string' ? step.content : '');\n\n return {\n target,\n title,\n description\n };\n },\n\n _normalizeSteps: function (steps) {\n if (!Array.isArray(steps)) return [];\n\n return steps\n .map(step => this._normalizeStep(step))\n .filter(Boolean);\n },\n\n start: function (steps, options) {\n if (this._active) this.stop();\n\n const normalizedSteps = this._normalizeSteps(steps);\n if (normalizedSteps.length === 0) return;\n\n const startOptions = options || {};\n\n this._steps = normalizedSteps;\n this._currentStep = 0;\n this._active = true;\n this._triggerElement = startOptions.trigger || (document.activeElement instanceof HTMLElement ? document.activeElement : null);\n\n // Create overlay\n const overlay = document.createElement('div');\n overlay.className = 'vd-spotlight-overlay';\n overlay.setAttribute('aria-hidden', 'true');\n document.body.appendChild(overlay);\n\n // Create tooltip\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-spotlight-tooltip';\n tooltip.setAttribute('role', 'dialog');\n tooltip.setAttribute('aria-modal', 'true');\n tooltip.tabIndex = -1;\n document.body.appendChild(tooltip);\n\n this._elements = { overlay, tooltip };\n\n // ESC to close\n const escHandler = (e) => { if (e.key === 'Escape') this.stop(); };\n document.addEventListener('keydown', escHandler);\n this._cleanup.push(() => document.removeEventListener('keydown', escHandler));\n\n // Overlay click to close\n overlay.addEventListener('click', () => this.stop());\n\n this._showStep(this._currentStep);\n },\n\n _showStep: function (index) {\n const step = this._steps[index];\n if (!step) return;\n\n const target = typeof step.target === 'string' ? document.querySelector(step.target) : step.target;\n const { tooltip } = this._elements;\n\n // Remove previous highlight\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n // Highlight target\n if (target) {\n target.classList.add('vd-spotlight-target');\n target.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n\n // Build tooltip content\n const total = this._steps.length;\n tooltip.innerHTML = '';\n tooltip.removeAttribute('aria-labelledby');\n tooltip.removeAttribute('aria-describedby');\n\n if (step.title) {\n const title = document.createElement('h4');\n title.className = 'vd-spotlight-title';\n title.id = 'vd-spotlight-title-' + index + '-' + Date.now();\n title.textContent = step.title;\n tooltip.appendChild(title);\n tooltip.setAttribute('aria-labelledby', title.id);\n }\n\n if (step.description) {\n const desc = document.createElement('p');\n desc.className = 'vd-spotlight-description';\n desc.id = 'vd-spotlight-description-' + index + '-' + Date.now();\n desc.textContent = step.description;\n tooltip.appendChild(desc);\n tooltip.setAttribute('aria-describedby', desc.id);\n }\n\n // Footer\n const footer = document.createElement('div');\n footer.className = 'vd-spotlight-footer';\n footer.setAttribute('aria-label', 'Step ' + (index + 1) + ' of ' + total);\n\n const counter = document.createElement('span');\n counter.className = 'vd-spotlight-counter';\n counter.textContent = (index + 1) + ' / ' + total;\n\n const actions = document.createElement('div');\n actions.className = 'vd-spotlight-actions';\n\n if (index > 0) {\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-spotlight-btn';\n prevBtn.textContent = 'Back';\n prevBtn.addEventListener('click', () => this.prev());\n actions.appendChild(prevBtn);\n }\n\n const skipBtn = document.createElement('button');\n skipBtn.type = 'button';\n skipBtn.className = 'vd-spotlight-btn';\n skipBtn.textContent = 'Skip';\n skipBtn.addEventListener('click', () => this.stop());\n actions.appendChild(skipBtn);\n\n if (index < total - 1) {\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n nextBtn.textContent = 'Next';\n nextBtn.addEventListener('click', () => this.next());\n actions.appendChild(nextBtn);\n } else {\n const doneBtn = document.createElement('button');\n doneBtn.type = 'button';\n doneBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n doneBtn.textContent = 'Done';\n doneBtn.addEventListener('click', () => this.stop());\n actions.appendChild(doneBtn);\n }\n\n footer.appendChild(counter);\n footer.appendChild(actions);\n tooltip.appendChild(footer);\n\n // Position tooltip near target\n if (target) {\n requestAnimationFrame(() => {\n const rect = target.getBoundingClientRect();\n const tRect = tooltip.getBoundingClientRect();\n let top = rect.bottom + 12 + window.scrollY;\n let left = rect.left + (rect.width - tRect.width) / 2 + window.scrollX;\n\n // Keep in viewport\n left = Math.max(8, Math.min(left, window.innerWidth - tRect.width - 8));\n if (top + tRect.height > window.innerHeight + window.scrollY) {\n top = rect.top - tRect.height - 12 + window.scrollY;\n }\n\n tooltip.style.top = top + 'px';\n tooltip.style.left = left + 'px';\n });\n }\n\n document.dispatchEvent(new CustomEvent('spotlight:step', {\n detail: { index, step: index, total, data: step }\n }));\n },\n\n next: function () {\n if (this._currentStep < this._steps.length - 1) {\n this._currentStep++;\n this._showStep(this._currentStep);\n }\n },\n\n prev: function () {\n if (this._currentStep > 0) {\n this._currentStep--;\n this._showStep(this._currentStep);\n }\n },\n\n stop: function () {\n if (!this._active) return;\n\n const total = this._steps.length;\n const detail = {\n completedSteps: total === 0 ? 0 : Math.min(this._currentStep + 1, total),\n total,\n completed: total > 0 && this._currentStep >= total - 1\n };\n\n this._active = false;\n\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n if (this._elements.overlay && this._elements.overlay.parentNode) {\n this._elements.overlay.parentNode.removeChild(this._elements.overlay);\n }\n if (this._elements.tooltip && this._elements.tooltip.parentNode) {\n this._elements.tooltip.parentNode.removeChild(this._elements.tooltip);\n }\n\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n this._elements = {};\n this._steps = [];\n this._currentStep = 0;\n\n if (this._triggerElement && this._triggerElement.isConnected && typeof this._triggerElement.focus === 'function') {\n this._triggerElement.focus();\n }\n this._triggerElement = null;\n\n document.dispatchEvent(new CustomEvent('spotlight:end', { detail }));\n },\n\n destroyAll: function () {\n this.stop();\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('spotlight', Spotlight);\n }\n\n window.VanduoSpotlight = Spotlight;\n\n})();\n", "/**\n * Vanduo Framework - Music Player Component\n * HTML5 Audio-based music player with transport controls, volume,\n * and optional shuffle, seek bar, and playlist features.\n *\n * Options (passed to MusicPlayer.init or data-music-player-options):\n * tracks {Array} - [{name, url}] \u2014 required\n * volume {number} - Initial volume 0\u20131 (default 0.5)\n * shuffle {boolean} - Shuffle on init (default false)\n * showProgress {boolean} - Show seek/progress bar (default false)\n * showPlaylist {boolean} - Show expandable playlist panel (default false)\n * autoAdvance {boolean} - Auto-play next track on end (default true)\n *\n * Custom events (all bubble, dispatched on container):\n * musicplayer:play \u2014 playback started\n * musicplayer:pause \u2014 playback paused\n * musicplayer:trackchange \u2014 detail: { index, name, url }\n * musicplayer:volumechange \u2014 detail: { volume }\n * musicplayer:ended \u2014 last track ended (autoAdvance=false only)\n *\n * Programmatic API:\n * MusicPlayer.init(container?, options?)\n * MusicPlayer.play(container)\n * MusicPlayer.pause(container)\n * MusicPlayer.toggle(container)\n * MusicPlayer.next(container)\n * MusicPlayer.previous(container)\n * MusicPlayer.setVolume(container, value)\n * MusicPlayer.setTrack(container, index)\n * MusicPlayer.shuffle(container)\n * MusicPlayer.getState(container)\n * MusicPlayer.destroy(container)\n * MusicPlayer.destroyAll()\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fisher-Yates shuffle (returns new array).\n * @param {Array} arr\n * @returns {Array}\n */\n function shuffleArray(arr) {\n const shuffled = arr.slice();\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n const tmp = shuffled[i];\n shuffled[i] = shuffled[j];\n shuffled[j] = tmp;\n }\n return shuffled;\n }\n\n /**\n * Format seconds as m:ss.\n * @param {number} seconds\n * @returns {string}\n */\n function formatTime(seconds) {\n if (!isFinite(seconds) || seconds < 0) return '0:00';\n const m = Math.floor(seconds / 60);\n const s = Math.floor(seconds % 60);\n return m + ':' + (s < 10 ? '0' : '') + s;\n }\n\n /**\n * Set CSS background-size on a range input to visually fill the track.\n * @param {HTMLInputElement} input\n */\n function updateRangeFill(input) {\n const min = parseFloat(input.min) || 0;\n const max = parseFloat(input.max) || 1;\n const val = parseFloat(input.value) || 0;\n const pct = ((val - min) / (max - min)) * 100;\n input.style.setProperty('--fill', pct + '%');\n // Fallback inline gradient for browsers without ::-moz-range-progress\n input.style.backgroundImage =\n 'linear-gradient(to right, var(--music-player-track-fill, currentColor) 0%, ' +\n 'var(--music-player-track-fill, currentColor) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) 100%)';\n }\n\n /* \u2500\u2500\u2500 Phosphor icon helper (matches framework icon style) \u2500 */\n\n /**\n * Return an element (Phosphor icon).\n * @param {string} name\n * @returns {HTMLElement}\n */\n function icon(name) {\n const el = document.createElement('i');\n el.className = 'ph ph-' + name;\n el.setAttribute('aria-hidden', 'true');\n return el;\n }\n\n /* \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const MusicPlayer = {\n /** @type {Map} */\n instances: new Map(),\n\n /**\n * Default options.\n */\n defaults: {\n tracks: [],\n volume: 0.5,\n shuffle: false,\n showProgress: false,\n showPlaylist: false,\n autoAdvance: true,\n },\n\n /**\n * Auto-initialize all .vd-music-player / [data-music-player] elements.\n * Options can be provided via data-music-player-options (JSON string).\n */\n init: function () {\n document.querySelectorAll('.vd-music-player, [data-music-player]').forEach((el) => {\n if (this.instances.has(el)) return;\n\n let opts = {};\n const attr = el.getAttribute('data-music-player-options');\n if (attr) {\n try { opts = JSON.parse(attr); } catch (_) { /* ignore malformed JSON */ }\n }\n this.initPlayer(el, opts);\n });\n },\n\n /**\n * Initialize a single player element.\n * @param {HTMLElement} container\n * @param {Object} [options]\n */\n initPlayer: function (container, options) {\n const opts = Object.assign({}, this.defaults, options || {});\n\n // Validate and normalise tracks\n const rawTracks = Array.isArray(opts.tracks) ? opts.tracks : [];\n const tracks = rawTracks.filter((t) => t && typeof t.url === 'string' && t.url.trim());\n\n // Build shuffled working copy without mutating opts\n const trackList = opts.shuffle ? shuffleArray(tracks) : tracks.slice();\n\n /* \u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const state = {\n tracks: trackList,\n originalTracks: tracks.slice(),\n currentIndex: 0,\n isPlaying: false,\n volume: Math.max(0, Math.min(1, opts.volume)),\n shuffle: opts.shuffle,\n showProgress: opts.showProgress,\n showPlaylist: opts.showPlaylist,\n autoAdvance: opts.autoAdvance,\n audio: null,\n };\n\n /* \u2500\u2500 Audio element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const audio = new Audio();\n audio.volume = state.volume;\n audio.preload = 'metadata';\n state.audio = audio;\n\n /* \u2500\u2500 Build DOM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n this._buildDOM(container, state);\n\n // Grab references after DOM build\n const refs = {\n btnPlay: container.querySelector('.vd-music-player-btn-play'),\n btnPrev: container.querySelector('.vd-music-player-btn-prev'),\n btnNext: container.querySelector('.vd-music-player-btn-next'),\n btnShuffle: container.querySelector('.vd-music-player-btn-shuffle'),\n btnPlaylist: container.querySelector('.vd-music-player-btn-playlist'),\n trackName: container.querySelector('.vd-music-player-track-name'),\n volumeSlider: container.querySelector('.vd-music-player-volume-slider'),\n volumeIcon: container.querySelector('.vd-music-player-volume-icon'),\n progressBar: container.querySelector('.vd-music-player-progress-bar'),\n timeElapsed: container.querySelector('.vd-music-player-time-elapsed'),\n timeDuration: container.querySelector('.vd-music-player-time-duration'),\n playlistPanel: container.querySelector('.vd-music-player-playlist'),\n };\n\n /* \u2500\u2500 Internal render helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const renderPlayIcon = () => {\n const btn = refs.btnPlay;\n if (!btn) return;\n btn.innerHTML = '';\n btn.appendChild(icon(state.isPlaying ? 'pause' : 'play'));\n btn.setAttribute('aria-label', state.isPlaying ? 'Pause' : 'Play');\n btn.classList.toggle('is-active', state.isPlaying);\n };\n\n const renderTrackName = () => {\n const el = refs.trackName;\n if (!el) return;\n const track = state.tracks[state.currentIndex];\n if (track) {\n el.textContent = track.name || 'Unknown Track';\n el.classList.remove('is-idle');\n } else {\n el.textContent = 'No tracks loaded';\n el.classList.add('is-idle');\n }\n };\n\n const renderVolumeIcon = () => {\n const el = refs.volumeIcon;\n if (!el) return;\n el.innerHTML = '';\n const v = state.volume;\n const name = v === 0 ? 'speaker-none' : v < 0.5 ? 'speaker-low' : 'speaker-high';\n el.appendChild(icon(name));\n };\n\n const renderShuffleBtn = () => {\n const btn = refs.btnShuffle;\n if (!btn) return;\n btn.classList.toggle('is-active', state.shuffle);\n btn.setAttribute('aria-pressed', state.shuffle ? 'true' : 'false');\n };\n\n const renderPlaylistItems = () => {\n const panel = refs.playlistPanel;\n if (!panel) return;\n panel.innerHTML = '';\n state.tracks.forEach((track, i) => {\n const item = document.createElement('button');\n item.className =\n 'vd-music-player-playlist-item' + (i === state.currentIndex ? ' is-active' : '');\n item.type = 'button';\n item.setAttribute('data-index', String(i));\n item.setAttribute('aria-current', i === state.currentIndex ? 'true' : 'false');\n\n const num = document.createElement('span');\n num.className = 'vd-music-player-playlist-num';\n num.textContent = String(i + 1);\n\n const name = document.createElement('span');\n name.className = 'vd-music-player-playlist-name';\n name.textContent = track.name || 'Track ' + (i + 1);\n\n item.appendChild(num);\n item.appendChild(name);\n panel.appendChild(item);\n });\n };\n\n const renderProgress = () => {\n const bar = refs.progressBar;\n if (!bar || !audio.duration) return;\n const pct = (audio.currentTime / audio.duration) * 100;\n bar.value = String(pct);\n updateRangeFill(bar);\n if (refs.timeElapsed) refs.timeElapsed.textContent = formatTime(audio.currentTime);\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n };\n\n /* \u2500\u2500 Load track \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const loadTrack = (index, autoPlay) => {\n const track = state.tracks[index];\n if (!track) return;\n state.currentIndex = index;\n audio.src = track.url;\n renderTrackName();\n renderPlaylistItems();\n\n // Reset progress\n if (refs.progressBar) {\n refs.progressBar.value = '0';\n updateRangeFill(refs.progressBar);\n }\n if (refs.timeElapsed) refs.timeElapsed.textContent = '0:00';\n if (refs.timeDuration) refs.timeDuration.textContent = '0:00';\n\n container.dispatchEvent(\n new CustomEvent('musicplayer:trackchange', {\n bubbles: true,\n detail: { index, name: track.name, url: track.url },\n })\n );\n\n if (autoPlay) {\n audio.play().catch(() => { /* browser may block autoplay */ });\n }\n };\n\n /* \u2500\u2500 Audio event listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const cleanupFunctions = [];\n\n const onPlay = () => {\n state.isPlaying = true;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:play', { bubbles: true }));\n };\n\n const onPause = () => {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:pause', { bubbles: true }));\n };\n\n const onEnded = () => {\n if (state.autoAdvance && state.tracks.length > 1) {\n const next = (state.currentIndex + 1) % state.tracks.length;\n loadTrack(next, true);\n } else {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:ended', { bubbles: true }));\n }\n };\n\n const onTimeUpdate = () => {\n if (state.showProgress) renderProgress();\n };\n\n const onLoadedMetadata = () => {\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n if (refs.progressBar) {\n refs.progressBar.max = '100';\n updateRangeFill(refs.progressBar);\n }\n };\n\n audio.addEventListener('play', onPlay);\n audio.addEventListener('pause', onPause);\n audio.addEventListener('ended', onEnded);\n audio.addEventListener('timeupdate', onTimeUpdate);\n audio.addEventListener('loadedmetadata', onLoadedMetadata);\n cleanupFunctions.push(() => {\n audio.removeEventListener('play', onPlay);\n audio.removeEventListener('pause', onPause);\n audio.removeEventListener('ended', onEnded);\n audio.removeEventListener('timeupdate', onTimeUpdate);\n audio.removeEventListener('loadedmetadata', onLoadedMetadata);\n audio.pause();\n audio.src = '';\n });\n\n /* \u2500\u2500 Control button listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n if (refs.btnPlay) {\n const handler = () => {\n if (!audio.src && state.tracks.length) loadTrack(state.currentIndex, false);\n if (state.isPlaying) {\n audio.pause();\n } else {\n audio.play().catch(() => {});\n }\n };\n refs.btnPlay.addEventListener('click', handler);\n cleanupFunctions.push(() => refs.btnPlay.removeEventListener('click', handler));\n\n // Keyboard: Space / Enter (already native for `;\n }\n\n // Generate neutral color swatches\n let neutralSwatches = '';\n for (const [key, value] of Object.entries(this.NEUTRAL_COLORS)) {\n neutralSwatches += ``;\n }\n\n // Generate radius buttons\n let radiusButtons = '';\n this.RADIUS_OPTIONS.forEach(r => {\n radiusButtons += ``;\n });\n\n // Generate font options\n let fontOptions = '';\n for (const [key, value] of Object.entries(this.FONT_OPTIONS)) {\n fontOptions += ``;\n }\n\n return `\n
    \n

    Customize Theme

    \n \n
    \n
    \n\n
    \n \n
    \n ${primarySwatches}\n
    \n
    \n
    \n \n
    \n ${neutralSwatches}\n
    \n
    \n
    \n \n
    \n ${radiusButtons}\n
    \n
    \n
    \n \n \n
    \n
    \n
    \n \n
    \n `;\n },\n\n /**\n * Bind event listeners\n */\n /**\n * Check whether the current primary color is one of the auto-defaults\n * (i.e. the user hasn't explicitly picked a non-default color).\n */\n isUsingDefaultPrimary: function () {\n return this.state.primary === this.DEFAULTS.PRIMARY_LIGHT ||\n this.state.primary === this.DEFAULTS.PRIMARY_DARK;\n },\n\n /**\n * When primary is still one of the auto-default palette keys (black/amber) but\n * localStorage was written under a different theme (or OS changed in system mode),\n * align in-memory state before applyAllPreferences runs \u2014 avoids amber+light / black+dark drift.\n */\n _normalizeDefaultPrimaryIfStaleWithStoredTheme: function () {\n if (!this.isUsingDefaultPrimary()) {\n return;\n }\n const expected = this.getDefaultPrimary(this.state.theme);\n if (this.state.primary !== expected) {\n this.state.primary = expected;\n }\n },\n\n bindEvents: function () {\n // Trigger click - bind to any trigger button\n if (this.elements.trigger) {\n this.addListener(this.elements.trigger, 'click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggle();\n });\n }\n\n this.bindPanelEvents();\n\n // Listen for OS dark/light changes so we can swap the default primary\n if (window.matchMedia) {\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const handler = () => {\n if (this.state.theme === 'system' && this.isUsingDefaultPrimary()) {\n const newDefault = this.getDefaultPrimary('system');\n if (newDefault !== this.state.primary) {\n this.applyPrimary(newDefault);\n this.updateUI();\n }\n }\n };\n mq.addEventListener('change', handler);\n this._cleanup.push(() => mq.removeEventListener('change', handler));\n }\n\n // Close on outside click\n this.addListener(document, 'click', (e) => {\n if (this.state.isOpen && this.elements.customizer && !this.elements.customizer.contains(e.target)) {\n this.close();\n }\n });\n\n // Close on Escape key\n this.addListener(document, 'keydown', (e) => {\n if (e.key === 'Escape' && this.state.isOpen) {\n this.close();\n }\n });\n },\n\n /**\n * Toggle panel open/close\n */\n toggle: function () {\n if (this.state.isOpen) {\n this.close();\n } else {\n this.open();\n }\n },\n\n /**\n * Open the panel\n */\n open: function () {\n this.state.isOpen = true;\n\n // Ensure panel is positioned correctly before opening\n this.positionPanel();\n\n if (this.elements.panel) {\n this.elements.panel.classList.add('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'true');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.add('is-active');\n }\n\n this.dispatchEvent('panel-open', { isOpen: true });\n },\n\n /**\n * Close the panel\n */\n close: function () {\n this.state.isOpen = false;\n\n if (this.elements.panel) {\n this.elements.panel.classList.remove('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'false');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.remove('is-active');\n }\n\n this.dispatchEvent('panel-close', { isOpen: false });\n },\n\n /**\n * Update UI to reflect current state\n */\n updateUI: function () {\n if (!this.elements.panel) return;\n\n // Update primary color swatches\n this.elements.panel.querySelectorAll('[data-color]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.color === this.state.primary);\n });\n\n // Update neutral color swatches\n this.elements.panel.querySelectorAll('[data-neutral]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.neutral === this.state.neutral);\n });\n\n // Update radius buttons\n this.elements.panel.querySelectorAll('[data-radius]').forEach(btn => {\n btn.classList.toggle('is-active', btn.dataset.radius === this.state.radius);\n });\n\n // Update font selector\n const fontSelect = this.elements.panel.querySelector('[data-customizer-font]');\n if (fontSelect) {\n fontSelect.value = this.state.font;\n }\n\n },\n\n /**\n * Reset all preferences to defaults\n */\n reset: function () {\n this.applyTheme(this.DEFAULTS.THEME);\n this.applyPrimary(this.getDefaultPrimary(this.DEFAULTS.THEME));\n this.applyNeutral(this.DEFAULTS.NEUTRAL);\n this.applyRadius(this.DEFAULTS.RADIUS);\n this.applyFont(this.DEFAULTS.FONT);\n this.updateUI();\n\n this.dispatchEvent('reset', { state: { ...this.state } });\n },\n\n /**\n * Get current state\n */\n getState: function () {\n return { ...this.state };\n },\n\n /**\n * Programmatically set preferences\n */\n setPreferences: function (prefs) {\n if (prefs.primary) this.applyPrimary(prefs.primary);\n if (prefs.neutral) this.applyNeutral(prefs.neutral);\n if (prefs.radius) this.applyRadius(prefs.radius);\n if (prefs.font) this.applyFont(prefs.font);\n if (prefs.theme) this.applyTheme(prefs.theme);\n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n destroyAll: function () {\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n\n if (this.elements.panel) {\n this.elements.panel.removeAttribute('data-customizer-initialized');\n }\n\n this.close();\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeCustomizer', ThemeCustomizer);\n }\n\n // Expose globally for convenience\n window.ThemeCustomizer = ThemeCustomizer;\n})();\n", "/**\n * Vanduo Framework - Theme Switcher\n * Handles light/dark/system theme toggling and persistence\n */\n\n(function () {\n 'use strict';\n\n const ThemeSwitcher = {\n isInitialized: false,\n _mediaQuery: null,\n _onMediaChange: null,\n\n init: function () {\n this.STORAGE_KEY = 'vanduo-theme-preference';\n this.state = {\n preference: this.getPreference() // 'light', 'dark', or 'system'\n };\n\n if (this.isInitialized) {\n this.applyTheme();\n this.renderUI();\n this.updateUI();\n return;\n }\n\n this.isInitialized = true;\n\n this.applyTheme();\n this.listenForSystemChanges();\n this.renderUI();\n\n console.log('Vanduo Theme Switcher initialized');\n },\n\n getPreference: function () {\n return this.getStorageValue(this.STORAGE_KEY, 'system');\n },\n\n setPreference: function (pref) {\n this.state.preference = pref;\n this.setStorageValue(this.STORAGE_KEY, pref);\n this.applyTheme();\n \n // Coordinate with ThemeCustomizer for primary color swap if available\n // Check _isApplying flag to prevent circular updates\n if (window.ThemeCustomizer && window.ThemeCustomizer.applyTheme && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme(pref);\n }\n \n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n applyTheme: function () {\n const pref = this.state.preference;\n\n if (pref === 'system') {\n // When in system mode, we remove the data attribute to let the media query take over\n // or we can explicitly set it. Explicitly setting it ensures consistency if we rely on [data-theme]\n // But if we rely on @media in CSS, we might want to remove attributes.\n // However, our CSS strategy uses :root:not([data-theme=\"light\"]) inside media query for system dark fallback\n // which is a bit complex.\n\n // Simpler approach: \n // If preference is system, REMOVE data-theme attribute. Let CSS media queries handle it.\n document.documentElement.removeAttribute('data-theme');\n } else {\n document.documentElement.setAttribute('data-theme', pref);\n }\n },\n\n listenForSystemChanges: function () {\n if (this._mediaQuery && this._onMediaChange) {\n return;\n }\n\n this._mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n this._onMediaChange = _e => {\n if (this.state.preference === 'system') {\n // Re-apply (effectively just to ensure consistency, though removing attribute usually suffices)\n this.applyTheme();\n // Keep default primary (black/amber) aligned when OS scheme changes while in system mode\n if (window.ThemeCustomizer && typeof window.ThemeCustomizer.applyTheme === 'function' && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme('system');\n }\n }\n };\n this._mediaQuery.addEventListener('change', this._onMediaChange);\n },\n\n // Helper to facilitate UI creation if needed, though often UI is in HTML\n renderUI: function () {\n // Look for any uninitialized theme toggles\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.getAttribute('data-theme-initialized') === 'true') {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n }\n return;\n }\n\n // Simplified UI Binding - assumes a select or a button cycle\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n const onChange = (e) => {\n this.setPreference(e.target.value);\n };\n toggle.addEventListener('change', onChange);\n toggle._themeToggleHandler = onChange;\n } else {\n // Button implementation (cycle)\n const onClick = () => {\n const modes = ['system', 'light', 'dark'];\n const nextIndex = (modes.indexOf(this.state.preference) + 1) % modes.length;\n this.setPreference(modes[nextIndex]);\n };\n toggle.addEventListener('click', onClick);\n toggle._themeToggleHandler = onClick;\n }\n // Mark as initialized\n toggle.setAttribute('data-theme-initialized', 'true');\n });\n },\n\n updateUI: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n } else {\n // Update button text/icon if needed\n // e.g. toggle.textContent = this.state.preference;\n // For now, assume the user handles visual state or generic text\n\n // If there is an icon or text span inside, update it\n const span = toggle.querySelector('.theme-current-label');\n if (span) {\n span.textContent = this.state.preference.charAt(0).toUpperCase() + this.state.preference.slice(1);\n }\n }\n });\n },\n\n destroyAll: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"][data-theme-initialized=\"true\"]');\n toggles.forEach(toggle => {\n if (toggle._themeToggleHandler) {\n const eventName = toggle.tagName === 'SELECT' ? 'change' : 'click';\n toggle.removeEventListener(eventName, toggle._themeToggleHandler);\n delete toggle._themeToggleHandler;\n }\n toggle.removeAttribute('data-theme-initialized');\n });\n\n if (this._mediaQuery && this._onMediaChange) {\n this._mediaQuery.removeEventListener('change', this._onMediaChange);\n }\n\n this._mediaQuery = null;\n this._onMediaChange = null;\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeSwitcher', ThemeSwitcher);\n }\n})();\n", "/**\n * Vanduo Framework - Toast Component\n * Popup notifications for user feedback\n */\n\n(function() {\n 'use strict';\n\n /**\n * Toast Component\n */\n const Toast = {\n // Default options\n defaults: {\n position: 'top-right',\n duration: 5000,\n dismissible: true,\n showProgress: true,\n pauseOnHover: true\n },\n\n // Container cache\n containers: {},\n\n /**\n * Get or create a toast container for a position\n * @param {string} position - Container position\n * @returns {HTMLElement} Toast container element\n */\n getContainer: function(position) {\n if (this.containers[position]) {\n return this.containers[position];\n }\n\n const container = document.createElement('div');\n container.className = `vd-toast-container vd-toast-container-${position}`;\n container.setAttribute('role', 'status');\n container.setAttribute('aria-live', 'polite');\n container.setAttribute('aria-atomic', 'false');\n document.body.appendChild(container);\n this.containers[position] = container;\n\n return container;\n },\n\n /**\n * Show a toast notification\n * @param {Object|string} options - Toast options or message string\n * @param {string} [type] - Toast type (success, error, warning, info)\n * @param {number} [duration] - Auto-dismiss duration in ms\n * @returns {HTMLElement} Toast element\n */\n show: function(options, type, duration) {\n // Support simple API: Toast.show('Message', 'success', 3000)\n if (typeof options === 'string') {\n options = {\n message: options,\n type: type,\n duration: duration\n };\n }\n\n const config = Object.assign({}, this.defaults, options);\n const container = this.getContainer(config.position);\n\n // Create toast element\n const toast = document.createElement('div');\n toast.className = 'vd-toast';\n\n if (config.type) {\n toast.classList.add(`vd-toast-${config.type}`);\n }\n\n if (config.solid) {\n toast.classList.add('vd-toast-solid');\n }\n\n if (config.showProgress && config.duration > 0) {\n toast.classList.add('vd-toast-with-progress');\n }\n\n // Build toast content\n let html = '';\n\n // Icon (sanitize custom icons, default icons are trusted SVG)\n if (config.icon) {\n const safeIcon = typeof sanitizeHtml === 'function' ? sanitizeHtml(config.icon) : escapeHtml(config.icon);\n html += `${safeIcon}`;\n } else if (config.type) {\n html += `${this.getDefaultIcon(config.type)}`;\n }\n\n // Local escape helper \u2014 guarantees HTML-safe output even if the\n // global escapeHtml utility is not loaded in the current bundle.\n const _esc = typeof escapeHtml === 'function'\n ? escapeHtml\n : function (s) {\n const d = document.createElement('div');\n d.appendChild(document.createTextNode(s));\n return d.innerHTML;\n };\n\n // Content (escape text to prevent injection)\n html += '
    ';\n if (config.title) {\n html += `
    ${_esc(String(config.title))}
    `;\n }\n if (config.message) {\n html += `
    ${_esc(String(config.message))}
    `;\n }\n html += '
    ';\n\n // Close button\n if (config.dismissible) {\n html += '';\n }\n\n // Progress bar\n if (config.showProgress && config.duration > 0) {\n const safeDuration = parseInt(config.duration, 10) || 0;\n html += `
    `;\n }\n\n toast.innerHTML = html;\n\n // Add to container\n container.appendChild(toast);\n\n toast._toastCleanup = [];\n\n // Set up close button handler\n if (config.dismissible) {\n const closeBtn = toast.querySelector('.vd-toast-close');\n const onClose = () => {\n this.dismiss(toast);\n };\n closeBtn.addEventListener('click', onClose);\n toast._toastCleanup.push(() => closeBtn.removeEventListener('click', onClose));\n }\n\n // Pause on hover\n let timeoutId = null;\n let remainingTime = config.duration;\n let startTime = null;\n\n const startTimer = () => {\n if (config.duration > 0) {\n startTime = Date.now();\n timeoutId = setTimeout(() => {\n this.dismiss(toast);\n }, remainingTime);\n toast._toastTimeoutId = timeoutId;\n\n // Resume progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'running';\n }\n }\n };\n\n const pauseTimer = () => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n timeoutId = null;\n toast._toastTimeoutId = null;\n remainingTime -= Date.now() - startTime;\n\n // Pause progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'paused';\n }\n }\n };\n\n if (config.pauseOnHover) {\n toast.addEventListener('mouseenter', pauseTimer);\n toast.addEventListener('mouseleave', startTimer);\n toast._toastCleanup.push(\n () => toast.removeEventListener('mouseenter', pauseTimer),\n () => toast.removeEventListener('mouseleave', startTimer)\n );\n }\n\n // Trigger enter animation\n requestAnimationFrame(() => {\n toast.classList.add('is-visible');\n startTimer();\n });\n\n // Store config on element for later access\n toast._toastConfig = config;\n\n // Dispatch show event\n const showEvent = new CustomEvent('toast:show', {\n bubbles: true,\n detail: { toast, config }\n });\n toast.dispatchEvent(showEvent);\n\n return toast;\n },\n\n /**\n * Dismiss a toast\n * @param {HTMLElement} toast - Toast element to dismiss\n */\n dismiss: function(toast) {\n if (!toast || toast.classList.contains('is-exiting')) return;\n\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n toast._toastTimeoutId = null;\n }\n\n toast.classList.remove('is-visible');\n toast.classList.add('is-exiting');\n\n // Dispatch dismiss event\n const dismissEvent = new CustomEvent('toast:dismiss', {\n bubbles: true,\n detail: { toast }\n });\n toast.dispatchEvent(dismissEvent);\n\n // Remove after animation\n const handleTransitionEnd = () => {\n toast.removeEventListener('transitionend', handleTransitionEnd);\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n };\n\n toast.addEventListener('transitionend', handleTransitionEnd);\n\n // Fallback removal if transition doesn't fire\n setTimeout(() => {\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n }, 400);\n },\n\n /**\n * Destroy all toasts and containers\n */\n destroyAll: function() {\n Object.keys(this.containers).forEach(position => {\n const container = this.containers[position];\n if (!container) return;\n\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => {\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n }\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n });\n\n if (container.parentElement) {\n container.parentElement.removeChild(container);\n }\n });\n\n this.containers = {};\n },\n\n /**\n * Dismiss all toasts\n * @param {string} [position] - Optional position to clear (clears all if not specified)\n */\n dismissAll: function(position) {\n if (position && this.containers[position]) {\n const toasts = this.containers[position].querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n } else {\n Object.values(this.containers).forEach(container => {\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n });\n }\n },\n\n /**\n * Get default icon SVG for a type\n * @param {string} type - Toast type\n * @returns {string} SVG icon markup\n */\n getDefaultIcon: function(type) {\n const icons = {\n success: '',\n error: '',\n warning: '',\n info: ''\n };\n\n return icons[type] || '';\n },\n\n /**\n * Convenience methods for common toast types\n */\n success: function(message, options) {\n return this.show(Object.assign({ message, type: 'success' }, options));\n },\n\n error: function(message, options) {\n return this.show(Object.assign({ message, type: 'error' }, options));\n },\n\n warning: function(message, options) {\n return this.show(Object.assign({ message, type: 'warning' }, options));\n },\n\n info: function(message, options) {\n return this.show(Object.assign({ message, type: 'info' }, options));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('toast', Toast);\n }\n\n // Also expose globally for convenience\n window.Toast = Toast;\n\n})();\n", "/**\n * Vanduo Framework - Tooltips Component\n * JavaScript functionality for tooltips\n */\n\n(function () {\n 'use strict';\n\n /**\n * Tooltips Component\n */\n const Tooltips = {\n tooltips: new Map(),\n delayTimers: new Map(),\n\n /**\n * Sanitize HTML \u2014 delegates to shared sanitizeHtml from helpers.js\n * @param {string} input\n * @returns {string} sanitized HTML\n */\n sanitizeHtml: function (input) {\n if (typeof sanitizeHtml === 'function') {\n return sanitizeHtml(input);\n }\n // Fallback: strip all HTML\n const div = document.createElement('div');\n div.textContent = input || '';\n return div.innerHTML;\n },\n\n /**\n * Initialize tooltips\n */\n init: function () {\n const elements = document.querySelectorAll('[data-tooltip], [data-tooltip-html]');\n\n elements.forEach(element => {\n if (this.tooltips.has(element)) {\n return;\n }\n this.initTooltip(element);\n });\n },\n\n /**\n * Initialize a single tooltip\n * @param {HTMLElement} element - Element with tooltip\n */\n initTooltip: function (element) {\n const tooltip = this.createTooltip(element);\n const cleanupFunctions = [];\n\n // Show on hover/focus\n const enterHandler = () => { this.showTooltip(element, tooltip); };\n const leaveHandler = () => { this.hideTooltip(element, tooltip); };\n const focusHandler = () => { this.showTooltip(element, tooltip); };\n const blurHandler = () => { this.hideTooltip(element, tooltip); };\n\n element.addEventListener('mouseenter', enterHandler);\n element.addEventListener('mouseleave', leaveHandler);\n element.addEventListener('focus', focusHandler);\n element.addEventListener('blur', blurHandler);\n\n cleanupFunctions.push(\n () => element.removeEventListener('mouseenter', enterHandler),\n () => element.removeEventListener('mouseleave', leaveHandler),\n () => element.removeEventListener('focus', focusHandler),\n () => element.removeEventListener('blur', blurHandler)\n );\n\n this.tooltips.set(element, { tooltip, cleanup: cleanupFunctions });\n },\n\n /**\n * Create tooltip element\n * @param {HTMLElement} element - Target element\n * @returns {HTMLElement} Tooltip element\n */\n createTooltip: function (element) {\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-tooltip';\n tooltip.setAttribute('role', 'tooltip');\n tooltip.setAttribute('aria-hidden', 'true');\n\n // Generate unique ID and link via aria-describedby\n const tooltipId = 'tooltip-' + Math.random().toString(36).substr(2, 9);\n tooltip.id = tooltipId;\n element.setAttribute('aria-describedby', tooltipId);\n\n // Get content\n const htmlContent = element.dataset.tooltipHtml;\n const textContent = element.dataset.tooltip;\n\n if (htmlContent) {\n tooltip.innerHTML = this.sanitizeHtml(htmlContent);\n tooltip.classList.add('vd-tooltip-html');\n } else if (textContent) {\n tooltip.textContent = textContent;\n }\n\n // Get placement\n const placement = element.dataset.tooltipPlacement || element.dataset.placement || 'top';\n tooltip.setAttribute('data-placement', placement);\n tooltip.classList.add(`vd-tooltip-${placement}`);\n\n // Get variant\n if (element.dataset.tooltipVariant) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipVariant}`);\n }\n\n // Get size\n if (element.dataset.tooltipSize) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipSize}`);\n }\n\n // Get delay\n const delay = parseInt(element.dataset.tooltipDelay) || 0;\n tooltip.dataset.delay = delay;\n\n document.body.appendChild(tooltip);\n\n return tooltip;\n },\n\n /**\n * Show tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n showTooltip: function (element, tooltip) {\n const delay = parseInt(tooltip.dataset.delay) || 0;\n\n if (delay > 0) {\n const timer = setTimeout(() => {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }, delay);\n this.delayTimers.set(element, timer);\n } else {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }\n },\n\n /**\n * Hide tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n hideTooltip: function (element, tooltip) {\n // Clear delay timer if exists\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n tooltip.classList.remove('is-visible');\n tooltip.setAttribute('aria-hidden', 'true');\n },\n\n /**\n * Position tooltip relative to element\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n positionTooltip: function (element, tooltip) {\n const placement = tooltip.dataset.placement || 'top';\n const rect = element.getBoundingClientRect();\n const tooltipRect = tooltip.getBoundingClientRect();\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;\n\n let top = 0;\n let left = 0;\n\n switch (placement) {\n case 'top':\n top = rect.top + scrollTop - tooltipRect.height - 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'bottom':\n top = rect.bottom + scrollTop + 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'left':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.left + scrollLeft - tooltipRect.width - 8;\n break;\n case 'right':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.right + scrollLeft + 8;\n break;\n }\n\n // Prevent overflow\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const padding = 8;\n\n if (left < padding) {\n left = padding;\n } else if (left + tooltipRect.width > viewportWidth - padding) {\n left = viewportWidth - tooltipRect.width - padding;\n }\n\n if (top < scrollTop + padding) {\n top = scrollTop + padding;\n } else if (top + tooltipRect.height > scrollTop + viewportHeight - padding) {\n top = scrollTop + viewportHeight - tooltipRect.height - padding;\n }\n\n // Use single style assignment with transform for better performance\n tooltip.style.cssText = `position: absolute; top: 0; left: 0; transform: translate(${left}px, ${top}px);`;\n },\n\n /**\n * Show tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n show: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.showTooltip(el, tooltip);\n }\n },\n\n /**\n * Hide tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n hide: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.hideTooltip(el, tooltip);\n }\n },\n\n /**\n * Update tooltip content\n * @param {HTMLElement|string} element - Target element or selector\n * @param {string} content - New content\n * @param {boolean} isHtml - Whether content is HTML\n */\n update: function (element, content, isHtml = false) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n if (isHtml) {\n tooltip.innerHTML = this.sanitizeHtml(content);\n tooltip.classList.add('vd-tooltip-html');\n } else {\n tooltip.textContent = content;\n tooltip.classList.remove('vd-tooltip-html');\n }\n }\n },\n\n /**\n * Destroy a tooltip instance and clean up\n * @param {HTMLElement} element - Element with tooltip\n */\n destroy: function (element) {\n const data = this.tooltips.get(element);\n if (!data) return;\n\n // Clear any pending timer\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n data.cleanup.forEach(fn => fn());\n\n // Remove tooltip element from DOM\n if (data.tooltip && data.tooltip.parentNode) {\n data.tooltip.parentNode.removeChild(data.tooltip);\n }\n\n this.tooltips.delete(element);\n },\n\n /**\n * Destroy all tooltip instances\n */\n destroyAll: function () {\n this.tooltips.forEach((data, element) => {\n this.destroy(element);\n });\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tooltips', Tooltips);\n }\n\n // Expose globally\n window.VanduoTooltips = Tooltips;\n\n})();\n", "/**\n * Vanduo Framework - Search Component\n * Client-side search functionality for content pages\n * \n * @example Basic usage (initialize with defaults)\n * // HTML:\n * //
    \n * // \n * //
    \n * //
    \n * \n * @example Custom configuration\n * var search = Search.create({\n * containerSelector: '.my-search',\n * contentSelector: 'article[id]',\n * titleSelector: 'h2, h3',\n * maxResults: 5,\n * onSelect: function(result) {\n * console.log('Selected:', result.title);\n * }\n * });\n * \n * @example With custom data source\n * var search = Search.create({\n * containerSelector: '.my-search',\n * data: [\n * { id: 'item1', title: 'First Item', content: 'Description...', category: 'Category A' },\n * { id: 'item2', title: 'Second Item', content: 'Description...', category: 'Category B' }\n * ]\n * });\n */\n\n(function() {\n 'use strict';\n\n /**\n * Default configuration\n */\n const DEFAULTS = {\n // Behavior\n minQueryLength: 2,\n maxResults: 10,\n debounceMs: 150,\n highlightTag: 'mark',\n keyboardShortcut: true, // Enable Cmd/Ctrl+K shortcut\n \n // Selectors (for DOM-based indexing)\n containerSelector: '.vd-doc-search',\n inputSelector: '.vd-doc-search-input',\n resultsSelector: '.vd-doc-search-results',\n contentSelector: '.doc-content section[id]',\n titleSelector: '.demo-title, h2, h3',\n navSelector: '.doc-nav-link',\n sectionSelector: '.doc-nav-section',\n \n // Content extraction\n excludeFromContent: 'pre, code, script, style',\n maxContentLength: 500,\n \n // Custom data source (alternative to DOM indexing)\n data: null,\n \n // Category icons mapping\n categoryIcons: {\n 'getting-started': 'ph-rocket-launch',\n 'core': 'ph-cube',\n 'components': 'ph-puzzle-piece',\n 'interactive': 'ph-cursor-click',\n 'data-display': 'ph-table',\n 'feedback': 'ph-bell',\n 'meta': 'ph-info',\n 'default': 'ph-file-text'\n },\n \n // Callbacks\n onSelect: null, // function(result) - called when result is selected\n onSearch: null, // function(query, results) - called after search\n onOpen: null, // function() - called when results open\n onClose: null, // function() - called when results close\n \n // Text customization\n emptyTitle: 'No results found',\n emptyText: 'Try different keywords or check spelling',\n placeholder: 'Search...'\n };\n\n /**\n * Search Component Factory\n * Creates a new search instance with the given configuration\n * \n * @param {Object} options - Configuration options\n * @returns {Object} Search instance\n */\n function createSearch(options) {\n const config = Object.assign({}, DEFAULTS, options || {});\n \n // Instance state\n const state = {\n initialized: false,\n index: [],\n results: [],\n activeIndex: -1,\n isOpen: false,\n query: '',\n container: null,\n input: null,\n resultsContainer: null,\n debounceTimer: null,\n boundHandlers: {}\n };\n\n function safeInvokeCallback(name, fn, ...args) {\n try {\n fn(...args);\n } catch (error) {\n console.warn('[Vanduo Search] Callback error in \"' + name + '\":', error);\n }\n }\n\n function setResultsHtml(html) {\n if (!state.resultsContainer) return;\n try {\n state.resultsContainer.innerHTML = html;\n } catch (error) {\n console.warn('[Vanduo Search] Failed to render results:', error);\n }\n }\n\n /**\n * Initialize the search component\n * Idempotent \u2014 safe to call more than once on the same instance.\n * Returns the instance on success, null if required DOM elements are missing.\n */\n function init() {\n if (state.initialized) {\n return instance;\n }\n\n state.container = document.querySelector(config.containerSelector);\n if (!state.container) {\n state.initialized = false;\n return null;\n }\n\n state.input = state.container.querySelector(config.inputSelector);\n state.resultsContainer = state.container.querySelector(config.resultsSelector);\n\n if (!state.input || !state.resultsContainer) {\n state.initialized = false;\n return null;\n }\n\n // Set placeholder if configured\n if (config.placeholder) {\n state.input.setAttribute('placeholder', config.placeholder);\n }\n\n // Build search index\n buildIndex();\n\n // Bind events\n bindEvents();\n\n // Set up ARIA attributes\n setupAria();\n\n state.initialized = true;\n return instance;\n }\n\n /**\n * Build search index from DOM or custom data\n */\n function buildIndex() {\n state.index = [];\n \n // Use custom data if provided\n if (config.data && Array.isArray(config.data)) {\n config.data.forEach(function(item) {\n state.index.push({\n id: item.id || slugify(item.title),\n title: item.title || '',\n category: item.category || '',\n categorySlug: slugify(item.category || ''),\n content: item.content || '',\n keywords: item.keywords || extractKeywordsFromText(item.title + ' ' + item.content),\n url: item.url || '#' + (item.id || slugify(item.title)),\n icon: item.icon || ''\n });\n });\n return;\n }\n\n // Build from DOM\n const sections = document.querySelectorAll(config.contentSelector);\n const categoryMap = buildCategoryMap();\n\n sections.forEach(function(section) {\n const id = section.id;\n if (!id) return;\n\n const titleEl = section.querySelector(config.titleSelector);\n const title = titleEl ? titleEl.textContent.replace(/v[\\d.]+/g, '').trim() : id;\n const category = categoryMap[id] || 'Documentation';\n const content = extractContent(section);\n const keywords = extractKeywords(section, title);\n const iconEl = titleEl ? titleEl.querySelector('i.ph') : null;\n let icon = '';\n if (iconEl && iconEl.classList) {\n for (let ci = 0; ci < iconEl.classList.length; ci++) {\n if (iconEl.classList[ci].indexOf('ph-') === 0) {\n icon = iconEl.classList[ci];\n break;\n }\n }\n }\n\n state.index.push({\n id: id,\n title: title,\n category: category,\n categorySlug: slugify(category),\n content: content,\n keywords: keywords,\n url: '#' + id,\n icon: icon\n });\n });\n }\n\n /**\n * Build a map of section IDs to their categories\n */\n function buildCategoryMap() {\n const map = {};\n let currentCategory = 'Documentation';\n const navItems = document.querySelectorAll(config.navSelector + ', ' + config.sectionSelector);\n\n navItems.forEach(function(item) {\n if (item.classList.contains('doc-nav-section')) {\n currentCategory = item.textContent.trim();\n } else {\n const href = item.getAttribute('href');\n if (href && href.startsWith('#')) {\n const id = href.substring(1);\n map[id] = currentCategory;\n }\n }\n });\n\n return map;\n }\n\n /**\n * Extract searchable content from a section\n */\n function extractContent(section) {\n const clone = section.cloneNode(true);\n \n const toRemove = clone.querySelectorAll(config.excludeFromContent);\n toRemove.forEach(function(el) {\n el.remove();\n });\n\n let text = clone.textContent || '';\n text = text.replace(/\\s+/g, ' ').trim();\n \n return text.substring(0, config.maxContentLength);\n }\n\n /**\n * Extract keywords from a section\n */\n function extractKeywords(section, title) {\n const keywords = [];\n \n // Add title words\n title.toLowerCase().split(/\\s+/).forEach(function(word) {\n if (word.length > 2) {\n keywords.push(word);\n }\n });\n\n // Add class names from code examples\n const codeBlocks = section.querySelectorAll('code');\n codeBlocks.forEach(function(code) {\n const text = code.textContent || '';\n const classMatches = text.match(/\\.([\\w-]+)/g);\n if (classMatches) {\n classMatches.forEach(function(match) {\n keywords.push(match.substring(1).toLowerCase());\n });\n }\n });\n\n // Add data attributes\n const dataAttrs = section.querySelectorAll('[data-tooltip], [data-modal]');\n dataAttrs.forEach(function(el) {\n const attrs = el.getAttributeNames().filter(function(name) {\n return name.startsWith('data-');\n });\n attrs.forEach(function(attr) {\n keywords.push(attr.replace('data-', ''));\n });\n });\n\n return Array.from(new Set(keywords));\n }\n\n /**\n * Extract keywords from text string\n */\n function extractKeywordsFromText(text) {\n const words = text.toLowerCase().split(/\\s+/);\n return words.filter(function(word) {\n return word.length > 2;\n });\n }\n\n /**\n * Convert string to slug\n */\n function slugify(str) {\n return str.toLowerCase().replace(/\\s+/g, '-').replace(/[^a-z0-9-]/g, '');\n }\n\n /**\n * Bind event listeners\n */\n function bindEvents() {\n // Store bound handlers for cleanup\n state.boundHandlers.handleInput = function(e) {\n handleInput(e);\n };\n state.boundHandlers.handleFocus = function() {\n if (state.query.length >= config.minQueryLength) {\n open();\n }\n };\n state.boundHandlers.handleKeydown = function(e) {\n handleKeydown(e);\n };\n state.boundHandlers.handleOutsideClick = function(e) {\n if (!state.container.contains(e.target)) {\n close();\n }\n };\n state.boundHandlers.handleGlobalKeydown = function(e) {\n if (config.keyboardShortcut && (e.metaKey || e.ctrlKey) && e.key === 'k') {\n e.preventDefault();\n state.input.focus();\n state.input.select();\n }\n };\n state.boundHandlers.handleResultClick = function(e) {\n const result = e.target.closest('.vd-doc-search-result');\n if (result) {\n const index = parseInt(result.dataset.index, 10);\n select(index);\n }\n };\n\n // Input events\n state.input.addEventListener('input', state.boundHandlers.handleInput);\n state.input.addEventListener('focus', state.boundHandlers.handleFocus);\n state.input.addEventListener('keydown', state.boundHandlers.handleKeydown);\n\n // Close on outside click\n document.addEventListener('click', state.boundHandlers.handleOutsideClick);\n\n // Global keyboard shortcut\n document.addEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n\n // Result click handling\n state.resultsContainer.addEventListener('click', state.boundHandlers.handleResultClick);\n }\n\n /**\n * Unbind event listeners\n */\n function unbindEvents() {\n if (state.input) {\n state.input.removeEventListener('input', state.boundHandlers.handleInput);\n state.input.removeEventListener('focus', state.boundHandlers.handleFocus);\n state.input.removeEventListener('keydown', state.boundHandlers.handleKeydown);\n }\n document.removeEventListener('click', state.boundHandlers.handleOutsideClick);\n document.removeEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n if (state.resultsContainer) {\n state.resultsContainer.removeEventListener('click', state.boundHandlers.handleResultClick);\n }\n }\n\n /**\n * Set up ARIA attributes\n */\n function setupAria() {\n const resultsId = state.resultsContainer.id || 'search-results-' + Math.random().toString(36).substr(2, 9);\n state.resultsContainer.id = resultsId;\n \n state.input.setAttribute('role', 'combobox');\n state.input.setAttribute('aria-autocomplete', 'list');\n state.input.setAttribute('aria-controls', resultsId);\n state.input.setAttribute('aria-expanded', 'false');\n \n state.resultsContainer.setAttribute('role', 'listbox');\n state.resultsContainer.setAttribute('aria-label', 'Search results');\n }\n\n /**\n * Handle input changes\n */\n function handleInput(e) {\n const query = e.target.value.trim();\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n state.debounceTimer = setTimeout(function() {\n state.query = query;\n\n if (query.length < config.minQueryLength) {\n close();\n return;\n }\n\n state.results = search(query);\n state.activeIndex = -1;\n render();\n open();\n\n // Callback\n if (typeof config.onSearch === 'function') {\n safeInvokeCallback('onSearch', config.onSearch, query, state.results);\n }\n }, config.debounceMs);\n }\n\n /**\n * Handle keyboard navigation\n */\n function handleKeydown(e) {\n if (!state.isOpen) {\n if (e.key === 'ArrowDown' && state.query.length >= config.minQueryLength) {\n e.preventDefault();\n state.results = search(state.query);\n render();\n open();\n }\n return;\n }\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n navigate(1);\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n navigate(-1);\n break;\n\n case 'Enter':\n e.preventDefault();\n if (state.activeIndex >= 0) {\n select(state.activeIndex);\n } else if (state.results.length > 0) {\n select(0);\n }\n break;\n\n case 'Escape':\n e.preventDefault();\n close();\n break;\n\n case 'Tab':\n close();\n break;\n }\n }\n\n /**\n * Perform search\n */\n function search(query) {\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n const scored = [];\n\n state.index.forEach(function(entry) {\n let score = 0;\n const titleLower = entry.title.toLowerCase();\n const categoryLower = entry.category.toLowerCase();\n const contentLower = entry.content.toLowerCase();\n\n terms.forEach(function(term) {\n // Title match - highest priority\n if (titleLower.includes(term)) {\n score += 100;\n if (titleLower === term) {\n score += 50;\n } else if (titleLower.startsWith(term)) {\n score += 25;\n }\n }\n\n // Category match\n if (categoryLower.includes(term)) {\n score += 50;\n }\n\n // Keyword match\n const keywordMatch = entry.keywords.some(function(k) {\n return k.includes(term);\n });\n if (keywordMatch) {\n score += 30;\n }\n\n // Content match\n if (contentLower.includes(term)) {\n score += 10;\n }\n });\n\n if (score > 0) {\n scored.push({\n id: entry.id,\n title: entry.title,\n category: entry.category,\n categorySlug: entry.categorySlug,\n content: entry.content,\n url: entry.url,\n icon: entry.icon,\n score: score\n });\n }\n });\n\n scored.sort(function(a, b) {\n return b.score - a.score;\n });\n\n return scored.slice(0, config.maxResults);\n }\n\n /**\n * Render search results\n */\n function render() {\n if (state.results.length === 0) {\n setResultsHtml(renderEmpty());\n return;\n }\n\n let html = '
      ';\n\n state.results.forEach(function(result, index) {\n const isActive = index === state.activeIndex;\n const icon = result.icon || getCategoryIcon(result.categorySlug);\n const excerpt = getExcerpt(result.content, state.query);\n\n html += '
    • ' +\n '
      ' +\n '' +\n '
      ' +\n '
      ' +\n '
      ' + highlight(result.title, state.query) + '
      ' +\n '
      ' + escapeHtml(result.category) + '
      ' +\n '
      ' + highlight(excerpt, state.query) + '
      ' +\n '
      ' +\n '
      • ';\n });\n\n html += '
    ';\n html += renderFooter();\n\n setResultsHtml(html);\n }\n\n /**\n * Render empty state\n */\n function renderEmpty() {\n return '
    ' +\n '
    ' +\n '
    ' + escapeHtml(config.emptyTitle) + '
    ' +\n '
    ' + escapeHtml(config.emptyText) + '
    ' +\n '
    ';\n }\n\n /**\n * Render footer with keyboard hints\n */\n function renderFooter() {\n return '
    ' +\n '\u2191\u2193 to navigate' +\n '\u21B5 to select' +\n 'esc to close' +\n '
    ';\n }\n\n /**\n * Get icon for category\n */\n function getCategoryIcon(categorySlug) {\n return config.categoryIcons[categorySlug] || config.categoryIcons['default'] || 'ph-file-text';\n }\n\n /**\n * Get excerpt from content\n */\n function getExcerpt(content, query) {\n const terms = query.toLowerCase().split(/\\s+/);\n const contentLower = content.toLowerCase();\n const excerptLength = 100;\n\n let matchPos = -1;\n for (let i = 0; i < terms.length; i++) {\n const pos = contentLower.indexOf(terms[i]);\n if (pos !== -1 && (matchPos === -1 || pos < matchPos)) {\n matchPos = pos;\n }\n }\n\n if (matchPos === -1) {\n return content.substring(0, excerptLength) + '...';\n }\n\n const start = Math.max(0, matchPos - 30);\n const end = Math.min(content.length, matchPos + excerptLength);\n let excerpt = content.substring(start, end);\n\n if (start > 0) {\n excerpt = '...' + excerpt;\n }\n if (end < content.length) {\n excerpt = excerpt + '...';\n }\n\n return excerpt;\n }\n\n /**\n * Highlight matched terms in text\n */\n function highlight(text, query) {\n if (!query) return escapeHtml(text);\n\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n let escaped = escapeHtml(text);\n\n terms.forEach(function(term) {\n // Skip overly long terms to prevent ReDoS\n if (term.length > 50) return;\n const regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n escaped = escaped.replace(regex, '<' + config.highlightTag + '>$1');\n });\n\n return escaped;\n }\n\n /**\n * Escape HTML entities\n */\n function escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n /**\n * Navigate results with keyboard\n */\n function navigate(direction) {\n let newIndex = state.activeIndex + direction;\n\n if (newIndex < 0) {\n newIndex = state.results.length - 1;\n } else if (newIndex >= state.results.length) {\n newIndex = 0;\n }\n\n setActiveIndex(newIndex);\n }\n\n /**\n * Set active result index\n */\n function setActiveIndex(index) {\n const prevActive = state.resultsContainer.querySelector('.vd-doc-search-result.is-active');\n if (prevActive) {\n prevActive.classList.remove('is-active');\n prevActive.setAttribute('aria-selected', 'false');\n }\n\n state.activeIndex = index;\n\n const newActive = state.resultsContainer.querySelector('[data-index=\"' + index + '\"]');\n if (newActive) {\n newActive.classList.add('is-active');\n newActive.setAttribute('aria-selected', 'true');\n state.input.setAttribute('aria-activedescendant', 'vd-doc-search-result-' + index);\n newActive.scrollIntoView({ block: 'nearest' });\n }\n }\n\n /**\n * Select a result\n */\n function select(index) {\n const result = state.results[index];\n if (!result) return;\n\n // Close search\n close();\n state.input.value = '';\n state.query = '';\n\n // Custom callback\n if (typeof config.onSelect === 'function') {\n safeInvokeCallback('onSelect', config.onSelect, result);\n return;\n }\n\n // Default behavior: navigate to section\n const section = document.querySelector(result.url);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth', block: 'start' });\n window.history.pushState(null, '', result.url);\n updateSidebarActive(result.id);\n }\n }\n\n /**\n * Update sidebar navigation active state\n */\n function updateSidebarActive(sectionId) {\n const navLinks = document.querySelectorAll(config.navSelector);\n navLinks.forEach(function(link) {\n link.classList.remove('active');\n if (link.getAttribute('href') === '#' + sectionId) {\n link.classList.add('active');\n }\n });\n }\n\n /**\n * Open results dropdown\n */\n function open() {\n if (state.isOpen) return;\n\n state.isOpen = true;\n state.resultsContainer.classList.add('is-open');\n state.input.setAttribute('aria-expanded', 'true');\n\n if (typeof config.onOpen === 'function') {\n safeInvokeCallback('onOpen', config.onOpen);\n }\n }\n\n /**\n * Close results dropdown\n */\n function close() {\n if (!state.isOpen) return;\n\n state.isOpen = false;\n state.activeIndex = -1;\n state.resultsContainer.classList.remove('is-open');\n state.input.setAttribute('aria-expanded', 'false');\n state.input.removeAttribute('aria-activedescendant');\n\n if (typeof config.onClose === 'function') {\n safeInvokeCallback('onClose', config.onClose);\n }\n }\n\n /**\n * Destroy the component\n */\n function destroy() {\n unbindEvents();\n \n state.initialized = false;\n state.index = [];\n state.results = [];\n state.isOpen = false;\n state.query = '';\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n if (state.resultsContainer) {\n setResultsHtml('');\n }\n }\n\n /**\n * Rebuild the search index\n */\n function rebuild() {\n buildIndex();\n }\n\n /**\n * Update configuration\n */\n function setConfig(newConfig) {\n Object.assign(config, newConfig);\n }\n\n /**\n * Get current configuration\n */\n function getConfig() {\n return Object.assign({}, config);\n }\n\n /**\n * Get search index\n */\n function getIndex() {\n return state.index.slice();\n }\n\n // Public instance API\n const instance = {\n init: init,\n destroy: destroy,\n rebuild: rebuild,\n search: search,\n open: open,\n close: close,\n setConfig: setConfig,\n getConfig: getConfig,\n getIndex: getIndex\n };\n\n return instance;\n }\n\n /**\n * Search Component (singleton for backward compatibility)\n */\n const Search = {\n // Factory method \u2014 creates and auto-initializes a new independent instance.\n // Always returns the instance so callers retain a reference even if the\n // DOM container is not yet available (they can retry init() later).\n create: function(options) {\n const instance = createSearch(options);\n if (instance) {\n instance.init();\n }\n return instance || null;\n },\n \n // Default instance\n _instance: null,\n \n // Configuration (for default instance)\n config: Object.assign({}, DEFAULTS),\n\n /**\n * Initialize the default search instance\n */\n init: function(options) {\n if (this._instance) {\n this._instance.destroy();\n }\n \n if (options) {\n Object.assign(this.config, options);\n }\n \n this._instance = createSearch(this.config);\n return this._instance ? this._instance.init() : null;\n },\n\n /**\n * Destroy the default instance\n */\n destroy: function() {\n if (this._instance) {\n this._instance.destroy();\n this._instance = null;\n }\n },\n\n destroyAll: function() {\n this.destroy();\n },\n\n /**\n * Rebuild the default instance index\n */\n rebuild: function() {\n if (this._instance) {\n this._instance.rebuild();\n }\n },\n\n /**\n * Search using the default instance\n */\n search: function(query) {\n return this._instance ? this._instance.search(query) : [];\n },\n\n /**\n * Open the default instance\n */\n open: function() {\n if (this._instance) {\n this._instance.open();\n }\n },\n\n /**\n * Close the default instance\n */\n close: function() {\n if (this._instance) {\n this._instance.close();\n }\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('docSearch', Search);\n }\n\n // Expose globally (both names for compatibility)\n window.Search = Search;\n window.DocSearch = Search; // Backward compatibility\n window.VanduoDocSearch = Search; // New name compatibility\n\n})();\n", "/**\n * Vanduo Framework - Draggable Component\n * JavaScript functionality for draggable elements and drop zones\n */\n\n(function () {\n 'use strict';\n\n /**\n * Draggable Component\n */\n const Draggable = {\n // Store initialized draggables and their cleanup functions\n instances: new Map(),\n // Store current drag state\n currentDrag: null,\n // Store touch state\n touchState: null,\n // Feedback element\n feedbackElement: null,\n // Shared selector used by init and touch reorder\n containerSelector: '.vd-draggable-container, .vd-draggable-container-vertical',\n\n /**\n * Initialize draggable components\n */\n init: function () {\n const draggables = document.querySelectorAll('.vd-draggable, [data-draggable]');\n\n draggables.forEach(element => {\n if (this.instances.has(element)) {\n return;\n }\n this.initDraggable(element);\n });\n\n const containers = document.querySelectorAll(this.containerSelector);\n containers.forEach(container => {\n if (!this.instances.has(container)) {\n this.initContainer(container);\n }\n });\n\n const dropZones = document.querySelectorAll('.vd-drop-zone');\n dropZones.forEach(zone => {\n if (!this.instances.has(zone)) {\n this.initDropZone(zone);\n }\n });\n\n this.createFeedbackElement();\n },\n\n /**\n * Initialize a single draggable element\n * @param {HTMLElement} element - Draggable element\n */\n initDraggable: function (element) {\n const cleanupFunctions = [];\n\n // Make element draggable if not already\n if (!element.hasAttribute('draggable')) {\n element.setAttribute('draggable', 'true');\n }\n\n // Accessibility: add ARIA attributes\n if (!element.hasAttribute('tabindex')) {\n element.setAttribute('tabindex', '0');\n }\n element.setAttribute('role', 'option');\n element.setAttribute('aria-roledescription', 'draggable item');\n element.setAttribute('aria-grabbed', 'false');\n\n // Handle drag start\n const dragStartHandler = (e) => {\n this.handleDragStart(e, element);\n };\n element.addEventListener('dragstart', dragStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragstart', dragStartHandler));\n\n // Handle drag\n const dragHandler = (e) => {\n this.handleDrag(e, element);\n };\n element.addEventListener('drag', dragHandler);\n cleanupFunctions.push(() => element.removeEventListener('drag', dragHandler));\n\n // Handle drag end\n const dragEndHandler = (e) => {\n this.handleDragEnd(e, element);\n };\n element.addEventListener('dragend', dragEndHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragend', dragEndHandler));\n\n // Handle touch start (for mobile)\n const touchStartHandler = (e) => {\n this.handleTouchStart(e, element);\n };\n element.addEventListener('touchstart', touchStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchstart', touchStartHandler));\n\n // Handle touch move (for mobile)\n // { passive: false } is required so that e.preventDefault() works\n // once the drag threshold is reached \u2014 without it, modern browsers\n // treat the listener as passive and silently ignore preventDefault().\n const touchMoveHandler = (e) => {\n this.handleTouchMove(e, element);\n };\n element.addEventListener('touchmove', touchMoveHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchmove', touchMoveHandler));\n\n // Handle touch end (for mobile)\n const touchEndHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchend', touchEndHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchend', touchEndHandler));\n\n // Handle touch cancel (for mobile)\n const touchCancelHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchcancel', touchCancelHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchcancel', touchCancelHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, element);\n };\n element.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => element.removeEventListener('keydown', keydownHandler));\n\n this.instances.set(element, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a draggable container\n * @param {HTMLElement} container - Draggable container\n */\n initContainer: function (container) {\n // Accessibility: add ARIA role to container\n container.setAttribute('role', 'listbox');\n container.setAttribute('aria-label', container.getAttribute('aria-label') || 'Draggable items');\n\n const items = container.querySelectorAll('.vd-draggable-item');\n items.forEach(item => {\n if (!this.instances.has(item)) {\n this.initDraggable(item);\n }\n });\n\n const cleanupFunctions = [];\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n };\n\n // Handle drag over for auto-sorting\n const dragOverHandler = (e) => {\n e.preventDefault(); // Necessary to allow drop\n e.dataTransfer.dropEffect = 'move';\n\n if (!this.currentDrag) return;\n const draggingEl = this.currentDrag.element;\n\n // Only reorder if dragging an item that belongs to this container (or if we support cross-container drag, but keep simple)\n if (!container.contains(draggingEl)) return;\n\n // Prevent jumps when the dragging finalizes with 0,0 coordinates near the end\n if (e.clientX === 0 && e.clientY === 0) return;\n\n this.handleReorder(container, draggingEl, e.clientX, e.clientY);\n };\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault(); // crucial to prevent the browser's default handling and snapping back\n };\n\n container.addEventListener('dragenter', dragEnterHandler);\n container.addEventListener('dragover', dragOverHandler);\n container.addEventListener('drop', dropHandler);\n\n cleanupFunctions.push(() => {\n container.removeEventListener('dragenter', dragEnterHandler);\n container.removeEventListener('dragover', dragOverHandler);\n container.removeEventListener('drop', dropHandler);\n });\n\n this.instances.set(container, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a drop zone\n * @param {HTMLElement} zone - Drop zone element\n */\n initDropZone: function (zone) {\n const cleanupFunctions = [];\n\n // Accessibility: add ARIA role to drop zone\n zone.setAttribute('role', 'region');\n zone.setAttribute('aria-dropeffect', 'move');\n if (!zone.hasAttribute('aria-label')) {\n zone.setAttribute('aria-label', 'Drop zone');\n }\n\n // Handle drag over\n const dragOverHandler = (e) => {\n e.preventDefault();\n this.handleDragOver(e, zone);\n };\n zone.addEventListener('dragover', dragOverHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragover', dragOverHandler));\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n this.handleDragEnter(e, zone);\n };\n zone.addEventListener('dragenter', dragEnterHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragenter', dragEnterHandler));\n\n // Handle drag leave\n const dragLeaveHandler = (e) => {\n this.handleDragLeave(e, zone);\n };\n zone.addEventListener('dragleave', dragLeaveHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragleave', dragLeaveHandler));\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault();\n this.handleDrop(e, zone);\n };\n zone.addEventListener('drop', dropHandler);\n cleanupFunctions.push(() => zone.removeEventListener('drop', dropHandler));\n\n this.instances.set(zone, { cleanup: cleanupFunctions });\n },\n\n /**\n * Create feedback element for drag operations\n */\n createFeedbackElement: function () {\n if (!this.feedbackElement) {\n // Reuse existing element if present\n const existing = document.querySelector('.vd-drag-feedback');\n if (existing) {\n this.feedbackElement = existing;\n return;\n }\n\n this.feedbackElement = document.createElement('div');\n this.feedbackElement.className = 'vd-drag-feedback hidden';\n this.feedbackElement.setAttribute('role', 'presentation');\n document.body.appendChild(this.feedbackElement);\n }\n },\n\n /**\n * Handle drag start event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragStart: function (e, element) {\n // Add dragging class\n element.classList.add('is-dragging');\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: e.clientX, y: e.clientY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element)\n };\n\n // Set drag data\n e.dataTransfer.effectAllowed = 'move';\n e.dataTransfer.setData('text/plain', this.currentDrag.data);\n\n // We no longer suppress the native ghost image or manually update feedback\n // for mouse drags, relying on the browser's native rendering instead.\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY }\n }\n }));\n },\n\n /**\n * Handle drag event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDrag: function (e, element) {\n // Guard against null state (race condition on fast interactions)\n if (!this.currentDrag) return;\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - this.currentDrag.initialPosition.x,\n y: e.clientY - this.currentDrag.initialPosition.y\n }\n }\n }));\n },\n\n /**\n * Handle drag end event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragEnd: function (e, element) {\n // Remove dragging class\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'false');\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Guard against null state\n const data = this.currentDrag?.data || this.getData(element);\n const initialPos = this.currentDrag?.initialPosition || { x: 0, y: 0 };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - initialPos.x,\n y: e.clientY - initialPos.y\n }\n }\n }));\n\n // Reset drag state\n this.currentDrag = null;\n },\n\n /**\n * Handle touch start event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchStart: function (e, element) {\n // Don't prevent default here \u2014 it blocks scrolling.\n // We only prevent default in touchmove once drag threshold is reached.\n const touch = e.touches[0];\n const rect = element.getBoundingClientRect();\n this.touchState = {\n element: element,\n startX: touch.clientX,\n startY: touch.clientY,\n lastX: touch.clientX,\n lastY: touch.clientY,\n // Keep preview anchored to the original grab point.\n offsetX: touch.clientX - rect.left,\n offsetY: touch.clientY - rect.top,\n startTime: Date.now(),\n isDragging: false\n };\n },\n\n /**\n * Handle touch move event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchMove: function (e, element) {\n if (!this.touchState) return;\n\n const touch = e.touches[0];\n this.touchState.lastX = touch.clientX;\n this.touchState.lastY = touch.clientY;\n const deltaX = touch.clientX - this.touchState.startX;\n const deltaY = touch.clientY - this.touchState.startY;\n\n // Only start dragging if moved a minimum distance\n if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {\n // Now we know it's a drag, not a scroll \u2014 prevent default\n if (e.cancelable) e.preventDefault();\n\n if (!this.touchState.isDragging) {\n this.touchState.isDragging = true;\n element.classList.add('is-dragging');\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: this.touchState.startX, y: this.touchState.startY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element),\n // Preserve where inside the element the drag started for accurate ghost positioning.\n offsetX: this.touchState.offsetX,\n offsetY: this.touchState.offsetY\n };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY }\n }\n }));\n }\n\n // Update feedback\n this.updateFeedback(touch.clientX, touch.clientY);\n\n // Dispatch event\n if (this.currentDrag) {\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY },\n delta: { x: deltaX, y: deltaY }\n }\n }));\n\n this.updateTouchDropZone(touch.clientX, touch.clientY);\n\n // Reorder for touch\n const container = element.closest(this.containerSelector);\n if (container && container.contains(element)) {\n this.handleReorder(container, element, touch.clientX, touch.clientY);\n }\n }\n }\n },\n\n /**\n * Handle touch end event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchEnd: function (e, element) {\n if (this.touchState && this.touchState.isDragging) {\n if (e.cancelable) e.preventDefault();\n const endTouch = e.changedTouches?.[0];\n const endPosition = {\n x: endTouch?.clientX ?? this.touchState.lastX ?? this.touchState.startX,\n y: endTouch?.clientY ?? this.touchState.lastY ?? this.touchState.startY\n };\n\n const dropZone = this.resolveDropZoneAtPoint(endPosition.x, endPosition.y) || this.touchState.overZone;\n if (dropZone) {\n this.dispatchDrop(dropZone, endPosition);\n } else if (this.touchState.overZone) {\n this.touchState.overZone.classList.remove('is-drag-over');\n }\n\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n element.setAttribute('aria-grabbed', 'false');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Dispatch event\n const data = this.currentDrag?.data || this.getData(element);\n const startX = this.touchState?.startX || 0;\n const startY = this.touchState?.startY || 0;\n\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: endPosition,\n delta: {\n x: endPosition.x - startX,\n y: endPosition.y - startY\n }\n }\n }));\n }\n\n // Reset states\n this.touchState = null;\n this.currentDrag = null;\n },\n\n /**\n * Handle drag over event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} _zone - Drop zone element\n */\n handleDragOver: function (e, _zone) {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n },\n\n /**\n * Handle drag enter event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragEnter: function (e, zone) {\n e.preventDefault();\n zone.classList.add('is-drag-over');\n },\n\n /**\n * Handle drag leave event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragLeave: function (e, zone) {\n zone.classList.remove('is-drag-over');\n },\n\n /**\n * Handle drop event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDrop: function (e, zone) {\n e.preventDefault();\n this.dispatchDrop(zone, { x: e.clientX, y: e.clientY });\n },\n\n /**\n * Resolve a drop zone from viewport coordinates\n * @param {number} x\n * @param {number} y\n * @returns {HTMLElement|null}\n */\n resolveDropZoneAtPoint: function (x, y) {\n if (!Number.isFinite(x) || !Number.isFinite(y)) return null;\n\n // Prefer the full stacking list so overlays/top elements don't hide real drop targets.\n if (typeof document.elementsFromPoint === 'function') {\n const stacked = document.elementsFromPoint(x, y);\n for (const element of stacked) {\n const zone = element.closest('.vd-drop-zone');\n if (zone) return zone;\n }\n }\n\n const target = document.elementFromPoint(x, y);\n const targetZone = target ? target.closest('.vd-drop-zone') : null;\n if (targetZone) return targetZone;\n\n // Last-resort fallback for mobile emulation edge cases.\n const zones = document.querySelectorAll('.vd-drop-zone');\n for (const zone of zones) {\n const rect = zone.getBoundingClientRect();\n if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {\n return zone;\n }\n }\n\n return null;\n },\n\n /**\n * Track and update active drop-zone hover state on touch devices\n * @param {number} x\n * @param {number} y\n */\n updateTouchDropZone: function (x, y) {\n if (!this.touchState) return;\n\n const nextZone = this.resolveDropZoneAtPoint(x, y);\n const prevZone = this.touchState.overZone || null;\n\n if (prevZone && prevZone !== nextZone) {\n prevZone.classList.remove('is-drag-over');\n }\n\n if (nextZone && nextZone !== prevZone) {\n nextZone.classList.add('is-drag-over');\n }\n\n this.touchState.overZone = nextZone || null;\n },\n\n /**\n * Dispatch a normalized drop event for mouse and touch flows\n * @param {HTMLElement} zone\n * @param {{x:number, y:number}} position\n */\n dispatchDrop: function (zone, position) {\n zone.classList.remove('is-drag-over');\n zone.dispatchEvent(new CustomEvent('draggable:drop', {\n bubbles: true,\n detail: {\n zone: zone,\n element: this.currentDrag?.element,\n data: this.currentDrag?.data,\n position: position\n }\n }));\n },\n\n /**\n * Reorder elements in container based on cursor position\n * @param {HTMLElement} container \n * @param {HTMLElement} element \n * @param {number} clientX \n * @param {number} clientY \n */\n handleReorder: function (container, element, clientX, clientY) {\n const isVertical = container.classList.contains('vd-draggable-container-vertical');\n const siblings = [...container.querySelectorAll('.vd-draggable-item:not(.is-dragging), .vd-draggable:not(.is-dragging)')];\n\n const nextSibling = siblings.reduce((closest, child) => {\n const box = child.getBoundingClientRect();\n const offset = isVertical\n ? clientY - box.top - box.height / 2\n : clientX - box.left - box.width / 2;\n\n if (offset < 0 && offset > closest.offset) {\n return { offset: offset, element: child };\n } else {\n return closest;\n }\n }, { offset: Number.NEGATIVE_INFINITY }).element;\n\n if (nextSibling == null) {\n container.appendChild(element);\n } else {\n container.insertBefore(element, nextSibling);\n }\n },\n\n /**\n * Handle keyboard events\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} element - Draggable element\n */\n handleKeydown: function (e, element) {\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n // Trigger click or custom action\n element.click();\n break;\n case 'Escape':\n // Cancel drag if in progress\n if (element.classList.contains('is-dragging')) {\n element.classList.remove('is-dragging');\n element.setAttribute('aria-grabbed', 'false');\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n this.currentDrag = null;\n }\n break;\n case 'ArrowUp':\n case 'ArrowLeft': {\n e.preventDefault();\n const prev = element.previousElementSibling;\n if (prev && (prev.classList.contains('vd-draggable') || prev.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(element, prev);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'up' }\n }));\n }\n break;\n }\n case 'ArrowDown':\n case 'ArrowRight': {\n e.preventDefault();\n const next = element.nextElementSibling;\n if (next && (next.classList.contains('vd-draggable') || next.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(next, element);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'down' }\n }));\n }\n break;\n }\n }\n },\n\n /**\n * Get data from draggable element\n * @param {HTMLElement} element - Draggable element\n * @returns {string} Data associated with the element\n */\n getData: function (element) {\n return element.dataset.draggable || element.textContent.trim();\n },\n\n /**\n * Update drag feedback element\n * @param {number} x - Current X coordinate\n * @param {number} y - Current Y coordinate\n */\n updateFeedback: function (x, y) {\n if (!this.currentDrag) return;\n\n // Show feedback\n this.feedbackElement.classList.remove('hidden');\n\n // Update feedback content\n const rect = this.currentDrag.initialBounds;\n this.feedbackElement.innerHTML = '';\n const clone = this.currentDrag.element.cloneNode(true);\n this.feedbackElement.appendChild(clone);\n\n // Set styles\n const offsetX = this.currentDrag.offsetX ?? 20;\n const offsetY = this.currentDrag.offsetY ?? 20;\n Object.assign(this.feedbackElement.style, {\n left: (x - offsetX) + 'px',\n top: (y - offsetY) + 'px',\n width: rect.width + 'px',\n height: rect.height + 'px'\n });\n },\n\n /**\n * Make an element draggable programmatically\n * @param {HTMLElement|string} element - Element or selector\n * @param {Object} options - Configuration options\n */\n makeDraggable: function (element, options = {}) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && !this.instances.has(el)) {\n // Add classes and attributes\n el.classList.add('vd-draggable');\n el.setAttribute('draggable', 'true');\n\n // Set options\n if (options.data) {\n el.dataset.draggable = options.data;\n }\n\n // Initialize\n this.initDraggable(el);\n }\n },\n\n /**\n * Remove draggable functionality from an element\n * @param {HTMLElement|string} element - Element or selector\n */\n removeDraggable: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && this.instances.has(el)) {\n // Clean up\n const instance = this.instances.get(el);\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n\n // Remove classes and attributes\n el.classList.remove('vd-draggable');\n el.removeAttribute('draggable');\n el.removeAttribute('data-draggable');\n }\n },\n\n /**\n * Destroy a draggable instance and clean up event listeners\n * @param {HTMLElement} element - Draggable element\n */\n destroy: function (element) {\n this.removeDraggable(element);\n },\n\n /**\n * Destroy all draggable instances\n */\n destroyAll: function () {\n const instances = Array.from(this.instances.keys());\n instances.forEach(element => this.destroy(element));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('draggable', Draggable);\n }\n\n // Expose globally\n window.VanduoDraggable = Draggable;\n})();\n", "/**\n * Vanduo Framework \u2013 LazyLoad Component\n * v1.2.1\n *\n * Provides two levels of API:\n *\n * LOW-LEVEL (generic IntersectionObserver wrapper)\n * VanduoLazyLoad.observe(element, callback, options?)\n * VanduoLazyLoad.unobserve(element)\n * VanduoLazyLoad.unobserveAll()\n *\n * HIGH-LEVEL (HTML-section fetcher, mirrors vanduo-docs SPA behaviour)\n * VanduoLazyLoad.loadSection(url, containerEl, options?)\n * options: { placeholder, threshold, rootMargin, onLoaded, onError }\n * placeholder: 'skeleton' | 'spinner' | HTMLString (default: 'skeleton')\n *\n * ATTRIBUTE-DRIVEN (zero-JS usage, wired by init())\n *
    \u2026
    \n *\n * EVENTS dispatched on the host element:\n * lazysection:loading \u2014 fetch started\n * lazysection:loaded \u2014 content injected\n * lazysection:error \u2014 fetch failed\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500 Private state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /** @type {Map} */\n const _observerMap = new Map();\n\n /* \u2500\u2500 Security helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Returns true only if `url` resolves to the same origin as the page\n * (relative paths and same-origin absolute URLs are allowed).\n * Cross-origin URLs are rejected to prevent SSRF-style fetch abuse.\n * @param {string} url\n * @returns {boolean}\n */\n function _isSafeUrl(url) {\n try {\n // Relative URLs (no origin) are always safe\n const resolved = new URL(url, window.location.href);\n return resolved.origin === window.location.origin;\n } catch (_) {\n return false;\n }\n }\n\n /**\n * Safely inject fetched HTML into a container by parsing it with\n * DOMParser (avoids script execution) and replacing children via\n * standard DOM APIs instead of raw innerHTML assignment.\n * @param {Element} containerEl\n * @param {string} html\n */\n function _safeInjectHtml(containerEl, html) {\n const parser = new DOMParser();\n const doc = parser.parseFromString(html.trim(), 'text/html'); // CodeQL [js/xss-through-dom] Intentional: parsed nodes are sanitized below before adoption into live DOM\n\n const DANGEROUS_TAGS = ['SCRIPT', 'IFRAME', 'OBJECT', 'EMBED', 'FORM', 'BASE', 'LINK', 'META', 'STYLE'];\n for (const tag of DANGEROUS_TAGS) {\n const els = doc.querySelectorAll(tag);\n for (let i = els.length - 1; i >= 0; i--) {\n els[i].parentNode.removeChild(els[i]);\n }\n }\n\n // Strip dangerous attributes (e.g. onerror, javascript: urls) from all elements\n function _sanitizeNode(node) {\n if (node.nodeType === Node.ELEMENT_NODE) {\n const attrs = node.attributes;\n for (let i = attrs.length - 1; i >= 0; i--) {\n const attrName = attrs[i].name.toLowerCase();\n const attrValue = attrs[i].value.toLowerCase();\n const trimmedValue = attrValue.trim();\n if (\n attrName.startsWith('on') ||\n trimmedValue.startsWith('javascript:') ||\n trimmedValue.startsWith('data:') ||\n trimmedValue.startsWith('vbscript:')\n ) {\n node.removeAttribute(attrs[i].name);\n }\n }\n const children = node.childNodes;\n for (let i = 0; i < children.length; i++) {\n _sanitizeNode(children[i]);\n }\n }\n }\n _sanitizeNode(doc.body);\n\n // Collect all top-level body children\n const nodes = Array.from(doc.body.childNodes);\n // Clear container and append parsed nodes\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n nodes.forEach(function (node) {\n containerEl.appendChild(document.adoptNode(node));\n });\n }\n\n /* \u2500\u2500 Placeholder HTML \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _skeletonHtml() {\n return '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _spinnerHtml() {\n return '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _resolvePlaceholder(placeholder) {\n if (!placeholder || placeholder === 'skeleton') return _skeletonHtml();\n if (placeholder === 'spinner') return _spinnerHtml();\n // Caller-supplied HTML string\n return placeholder;\n }\n\n /* \u2500\u2500 Dispatch helper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _dispatch(el, eventName, detail) {\n el.dispatchEvent(new CustomEvent(eventName, { bubbles: true, detail: detail || {} }));\n }\n\n /* \u2500\u2500 VanduoLazyLoad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const VanduoLazyLoad = {\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * LOW-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Observe an element. `callback` is invoked once when the element\n * enters the viewport, then the element is automatically unobserved.\n *\n * @param {Element} element\n * @param {function(Element): void} callback\n * @param {{ threshold?: number, rootMargin?: string }} [options]\n */\n observe: function (element, callback, options) {\n if (!(element instanceof Element)) {\n console.warn('[VanduoLazyLoad] observe() requires a DOM Element.');\n return;\n }\n if (typeof callback !== 'function') {\n console.warn('[VanduoLazyLoad] observe() requires a callback function.');\n return;\n }\n // Already observed \u2014 ignore\n if (_observerMap.has(element)) return;\n\n const threshold = (options && options.threshold != null) ? options.threshold : 0;\n const rootMargin = (options && options.rootMargin) ? options.rootMargin : '0px';\n\n const observer = new IntersectionObserver(function (entries, obs) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n obs.unobserve(entry.target);\n _observerMap.delete(entry.target);\n try {\n callback(entry.target);\n } catch (e) {\n console.error('[VanduoLazyLoad] Callback threw:', e);\n }\n }\n });\n }, { threshold: threshold, rootMargin: rootMargin });\n\n _observerMap.set(element, observer);\n observer.observe(element);\n },\n\n /**\n * Stop observing an element that was previously passed to observe().\n * @param {Element} element\n */\n unobserve: function (element) {\n const observer = _observerMap.get(element);\n if (observer) {\n observer.unobserve(element);\n _observerMap.delete(element);\n }\n },\n\n /**\n * Stop observing ALL currently observed elements.\n */\n unobserveAll: function () {\n _observerMap.forEach(function (observer, element) {\n observer.unobserve(element);\n });\n _observerMap.clear();\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * HIGH-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fetch an HTML partial and inject it into `containerEl` when the\n * container enters the viewport. A placeholder is shown immediately.\n *\n * @param {string} url URL of the HTML partial to fetch\n * @param {Element} containerEl Target element whose content will be replaced\n * @param {{\n * placeholder?: 'skeleton'|'spinner'|string,\n * threshold?: number,\n * rootMargin?: string,\n * onLoaded?: function(Element): void,\n * onError?: function(Error): void\n * }} [options]\n */\n loadSection: function (url, containerEl, options) {\n if (typeof url !== 'string' || !url) {\n console.warn('[VanduoLazyLoad] loadSection() requires a non-empty URL string.');\n return;\n }\n if (!(containerEl instanceof Element)) {\n console.warn('[VanduoLazyLoad] loadSection() requires a DOM Element as containerEl.');\n return;\n }\n // Reject cross-origin URLs to prevent SSRF-style fetch abuse\n if (!_isSafeUrl(url)) {\n console.error('[VanduoLazyLoad] loadSection() blocked cross-origin URL:', url);\n return;\n }\n\n const opts = options || {};\n // Placeholders are known-safe static HTML strings built internally\n const placeholderHtml = _resolvePlaceholder(opts.placeholder);\n\n // Use _safeInjectHtml instead of innerHTML to prevent XSS from caller-supplied placeholders\n _safeInjectHtml(containerEl, placeholderHtml);\n _dispatch(containerEl, 'lazysection:loading', { url: url });\n\n // Fetch when visible\n this.observe(containerEl, function () {\n const controller = new window.AbortController();\n const timeoutId = setTimeout(function () { controller.abort(); }, 10000);\n\n window.fetch(url, { signal: controller.signal })\n .then(function (res) {\n clearTimeout(timeoutId);\n if (!res.ok) throw new Error('HTTP ' + res.status);\n return res.text();\n })\n .then(function (html) {\n // Use DOMParser to parse fetched content safely, avoiding\n // raw innerHTML assignment of externally-sourced strings\n _safeInjectHtml(containerEl, html);\n _dispatch(containerEl, 'lazysection:loaded', { url: url });\n // Re-init Vanduo components inside the new content\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.init();\n }\n if (typeof opts.onLoaded === 'function') {\n opts.onLoaded(containerEl);\n }\n })\n .catch(function (err) {\n // Build error node via DOM APIs \u2014 no dynamic HTML strings\n const alertEl = document.createElement('div');\n alertEl.className = 'vd-alert vd-alert-error';\n alertEl.setAttribute('role', 'alert');\n const msgEl = document.createElement('span');\n msgEl.textContent = 'Failed to load content. ';\n const detailEl = document.createElement('small');\n detailEl.style.opacity = '0.7';\n detailEl.textContent = err.message;\n alertEl.appendChild(msgEl);\n alertEl.appendChild(detailEl);\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n containerEl.appendChild(alertEl);\n _dispatch(containerEl, 'lazysection:error', { url: url, error: err });\n console.error('[VanduoLazyLoad] loadSection failed:', err);\n if (typeof opts.onError === 'function') {\n opts.onError(err);\n }\n });\n }, { threshold: opts.threshold, rootMargin: opts.rootMargin });\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * ATTRIBUTE-DRIVEN INIT\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Scan the DOM for [data-vd-lazy] elements and wire them up.\n * Safe to call multiple times \u2014 already-observed elements are skipped.\n */\n init: function () {\n const self = this;\n const elements = document.querySelectorAll('[data-vd-lazy]');\n elements.forEach(function (el) {\n // Skip already-observed or already-loaded elements\n if (_observerMap.has(el) || el.dataset.vdLazyState === 'loading' || el.dataset.vdLazyState === 'loaded') return;\n\n const url = el.getAttribute('data-vd-lazy');\n if (!url) return;\n\n el.dataset.vdLazyState = 'loading';\n const placeholder = el.getAttribute('data-vd-lazy-placeholder') || 'skeleton';\n\n self.loadSection(url, el, {\n placeholder: placeholder,\n onLoaded: function () {\n el.dataset.vdLazyState = 'loaded';\n },\n onError: function () {\n el.dataset.vdLazyState = 'error';\n }\n });\n });\n }\n };\n\n /* \u2500\u2500 Register with Vanduo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('LazyLoad', VanduoLazyLoad);\n }\n\n /* \u2500\u2500 Global convenience alias \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n window.VanduoLazyLoad = VanduoLazyLoad;\n\n})();\n", "/**\n * Vanduo Framework - Glass Scroll Activation\n * Generic scroll-aware glass activation via IntersectionObserver.\n *\n * Usage:\n * Add `data-glass-scroll` to any element carrying a `.vd-glass*` class.\n * By default the previous sibling is used as the sentinel.\n * Point to a custom sentinel via `data-glass-sentinel=\"\"`.\n *\n * Behaviour:\n * - Adds `.is-glass-active` when the sentinel leaves the viewport (scrolled past).\n * - Removes `.is-glass-active` when the sentinel re-enters the viewport.\n */\n(function () {\n 'use strict';\n\n const GlassScroll = {\n /** @type {Map} */\n observers: new Map(),\n\n init: function () {\n document.querySelectorAll('[data-glass-scroll]').forEach(el => {\n if (this.observers.has(el)) return;\n this.initElement(el);\n });\n },\n\n /**\n * Wire up a single scroll-activated glass element.\n * @param {HTMLElement} el\n */\n initElement: function (el) {\n const sentinelSelector = el.dataset.glassSentinel;\n let sentinel;\n\n if (sentinelSelector) {\n sentinel = document.querySelector(sentinelSelector);\n }\n\n if (!sentinel) {\n // Fall back to the previous sibling element\n sentinel = el.previousElementSibling;\n }\n\n if (!sentinel) {\n // No sentinel available \u2014 activate immediately so glass is always shown\n el.classList.add('is-glass-active');\n return;\n }\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n // Active when sentinel is NOT intersecting (scrolled past it)\n el.classList.toggle('is-glass-active', !entry.isIntersecting);\n });\n },\n { threshold: 0, rootMargin: '0px' }\n );\n\n observer.observe(sentinel);\n this.observers.set(el, observer);\n },\n\n /**\n * Disconnect and remove a single element's observer.\n * @param {HTMLElement} el\n */\n destroy: function (el) {\n const observer = this.observers.get(el);\n if (observer) {\n observer.disconnect();\n this.observers.delete(el);\n }\n },\n\n destroyAll: function () {\n this.observers.forEach((observer, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('glassScroll', GlassScroll);\n }\n\n window.VanduoGlassScroll = GlassScroll;\n})();\n", "/**\n * Vanduo Framework - Flow (Carousel/Slider) Component\n * Touch-enabled carousel with slide/fade transitions, autoplay, indicators\n */\n\n(function () {\n 'use strict';\n\n const Flow = {\n instances: new Map(),\n\n init: function () {\n const carousels = document.querySelectorAll('.vd-flow, .vd-carousel');\n carousels.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const track = el.querySelector('.vd-flow-track');\n if (!track) return;\n\n const slides = Array.from(track.querySelectorAll('.vd-flow-slide'));\n if (slides.length === 0) return;\n\n const isFade = el.classList.contains('vd-flow-fade');\n const autoplay = el.hasAttribute('data-vd-autoplay');\n const interval = parseInt(el.getAttribute('data-vd-interval'), 10) || 5000;\n const loop = el.getAttribute('data-vd-loop') !== 'false';\n\n const state = {\n current: 0,\n total: slides.length,\n autoplayTimer: null,\n isFade: isFade,\n loop: loop,\n isDragging: false,\n startX: 0,\n currentX: 0,\n threshold: 50\n };\n\n const cleanup = [];\n\n // Set initial active slide\n slides.forEach((slide, i) => {\n slide.setAttribute('role', 'group');\n slide.setAttribute('aria-roledescription', 'slide');\n slide.setAttribute('aria-label', 'Slide ' + (i + 1) + ' of ' + slides.length);\n if (i === 0) slide.classList.add('is-active');\n });\n\n el.setAttribute('role', 'region');\n el.setAttribute('aria-roledescription', 'carousel');\n if (!el.getAttribute('aria-label')) {\n el.setAttribute('aria-label', 'Carousel');\n }\n\n // Live region for announcements\n const liveRegion = document.createElement('div');\n liveRegion.setAttribute('aria-live', 'polite');\n liveRegion.setAttribute('aria-atomic', 'true');\n liveRegion.className = 'sr-only';\n liveRegion.style.cssText = 'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);';\n el.appendChild(liveRegion);\n\n const goTo = (index, announce) => {\n if (announce === undefined) announce = true;\n let target = index;\n if (state.loop) {\n target = ((index % state.total) + state.total) % state.total;\n } else {\n target = Math.max(0, Math.min(index, state.total - 1));\n }\n\n const prev = state.current;\n state.current = target;\n\n if (state.isFade) {\n slides.forEach((s, i) => {\n s.classList.toggle('is-active', i === target);\n });\n } else {\n track.style.transform = 'translateX(-' + (target * 100) + '%)';\n }\n\n // Update indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.classList.toggle('is-active', i === target);\n ind.setAttribute('aria-selected', i === target ? 'true' : 'false');\n });\n\n // Update slide ARIA\n slides.forEach((s, i) => {\n s.setAttribute('aria-hidden', i !== target ? 'true' : 'false');\n });\n\n if (announce) {\n liveRegion.textContent = 'Slide ' + (target + 1) + ' of ' + state.total;\n }\n\n el.dispatchEvent(new CustomEvent('flow:change', {\n detail: { current: target, previous: prev, total: state.total }\n }));\n };\n\n const next = () => goTo(state.current + 1);\n const prev = () => goTo(state.current - 1);\n\n // Controls\n const prevBtn = el.querySelector('.vd-flow-prev');\n const nextBtn = el.querySelector('.vd-flow-next');\n\n if (prevBtn) {\n const h = () => prev();\n prevBtn.addEventListener('click', h);\n cleanup.push(() => prevBtn.removeEventListener('click', h));\n }\n if (nextBtn) {\n const h = () => next();\n nextBtn.addEventListener('click', h);\n cleanup.push(() => nextBtn.removeEventListener('click', h));\n }\n\n // Indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.setAttribute('role', 'tab');\n ind.setAttribute('aria-selected', i === 0 ? 'true' : 'false');\n ind.setAttribute('aria-label', 'Go to slide ' + (i + 1));\n const h = () => goTo(i);\n ind.addEventListener('click', h);\n cleanup.push(() => ind.removeEventListener('click', h));\n });\n\n // Keyboard navigation\n const keyHandler = (e) => {\n if (e.key === 'ArrowLeft') { prev(); e.preventDefault(); }\n if (e.key === 'ArrowRight') { next(); e.preventDefault(); }\n };\n el.setAttribute('tabindex', '0');\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n // Touch / pointer support\n const pointerDown = (e) => {\n state.isDragging = true;\n state.startX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n state.currentX = state.startX;\n el.classList.add('is-dragging');\n };\n\n const pointerMove = (e) => {\n if (!state.isDragging) return;\n state.currentX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n };\n\n const pointerUp = () => {\n if (!state.isDragging) return;\n state.isDragging = false;\n el.classList.remove('is-dragging');\n const diff = state.startX - state.currentX;\n if (Math.abs(diff) > state.threshold) {\n if (diff > 0) next();\n else prev();\n }\n };\n\n el.addEventListener('mousedown', pointerDown);\n el.addEventListener('mousemove', pointerMove);\n el.addEventListener('mouseup', pointerUp);\n el.addEventListener('mouseleave', pointerUp);\n el.addEventListener('touchstart', pointerDown, { passive: true });\n el.addEventListener('touchmove', pointerMove, { passive: true });\n el.addEventListener('touchend', pointerUp);\n\n cleanup.push(\n () => el.removeEventListener('mousedown', pointerDown),\n () => el.removeEventListener('mousemove', pointerMove),\n () => el.removeEventListener('mouseup', pointerUp),\n () => el.removeEventListener('mouseleave', pointerUp),\n () => el.removeEventListener('touchstart', pointerDown),\n () => el.removeEventListener('touchmove', pointerMove),\n () => el.removeEventListener('touchend', pointerUp)\n );\n\n // Autoplay\n const startAutoplay = () => {\n stopAutoplay();\n state.autoplayTimer = setInterval(next, interval);\n };\n\n const stopAutoplay = () => {\n if (state.autoplayTimer) {\n clearInterval(state.autoplayTimer);\n state.autoplayTimer = null;\n }\n };\n\n if (autoplay) {\n startAutoplay();\n const pauseHandler = () => stopAutoplay();\n const resumeHandler = () => startAutoplay();\n el.addEventListener('mouseenter', pauseHandler);\n el.addEventListener('mouseleave', resumeHandler);\n el.addEventListener('focusin', pauseHandler);\n el.addEventListener('focusout', resumeHandler);\n cleanup.push(\n () => el.removeEventListener('mouseenter', pauseHandler),\n () => el.removeEventListener('mouseleave', resumeHandler),\n () => el.removeEventListener('focusin', pauseHandler),\n () => el.removeEventListener('focusout', resumeHandler),\n () => stopAutoplay()\n );\n }\n\n // Initial ARIA state\n goTo(0, false);\n\n this.instances.set(el, {\n cleanup: cleanup,\n goTo: goTo,\n next: next,\n prev: prev,\n getState: () => ({ ...state })\n });\n },\n\n goTo: function (el, index) {\n const instance = this.instances.get(el);\n if (instance) instance.goTo(index);\n },\n\n next: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.next();\n },\n\n prev: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.prev();\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('flow', Flow);\n }\n\n window.VanduoFlow = Flow;\n\n})();\n", "/**\n * Vanduo Framework - Bubble (Popover) Component\n * Click-triggered rich HTML popover, reuses tooltip positioning concepts\n */\n\n(function () {\n 'use strict';\n\n const Bubble = {\n instances: new Map(),\n _globalCleanups: [],\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-bubble], [data-vd-popover]');\n triggers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n\n if (this._globalCleanups.length === 0) {\n const outsideClick = (e) => {\n this.instances.forEach((inst, trigger) => {\n if (!inst.popover.contains(e.target) && !trigger.contains(e.target)) {\n this.hide(trigger);\n }\n });\n };\n const escHandler = (e) => {\n if (e.key === 'Escape') {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n }\n };\n document.addEventListener('click', outsideClick, true);\n document.addEventListener('keydown', escHandler);\n this._globalCleanups.push(\n () => document.removeEventListener('click', outsideClick, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n }\n },\n\n initInstance: function (trigger) {\n const cleanup = [];\n const placement = trigger.getAttribute('data-vd-bubble-placement') ||\n trigger.getAttribute('data-vd-popover-placement') || 'bottom';\n\n // Build popover element\n const popover = document.createElement('div');\n popover.className = 'vd-bubble-content';\n popover.setAttribute('role', 'dialog');\n popover.setAttribute('aria-modal', 'false');\n popover.setAttribute('data-placement', placement);\n\n const title = trigger.getAttribute('data-vd-bubble-title') ||\n trigger.getAttribute('data-vd-popover-title');\n const content = trigger.getAttribute('data-vd-bubble') ||\n trigger.getAttribute('data-vd-popover') || '';\n const htmlContent = trigger.getAttribute('data-vd-bubble-html') ||\n trigger.getAttribute('data-vd-popover-html');\n\n if (title) {\n const header = document.createElement('div');\n header.className = 'vd-bubble-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const closeBtn = document.createElement('button');\n closeBtn.className = 'vd-bubble-close';\n closeBtn.setAttribute('aria-label', 'Close');\n closeBtn.innerHTML = '×';\n header.appendChild(titleSpan);\n header.appendChild(closeBtn);\n popover.appendChild(header);\n\n const closeHandler = (e) => { e.stopPropagation(); this.hide(trigger); };\n closeBtn.addEventListener('click', closeHandler);\n cleanup.push(() => closeBtn.removeEventListener('click', closeHandler));\n }\n\n const body = document.createElement('div');\n body.className = 'vd-bubble-body';\n if (htmlContent) {\n if (typeof sanitizeHtml === 'function') {\n body.innerHTML = sanitizeHtml(htmlContent);\n } else {\n body.textContent = htmlContent;\n }\n } else {\n body.textContent = content;\n }\n popover.appendChild(body);\n\n document.body.appendChild(popover);\n\n // ARIA on trigger\n const popId = 'vd-bubble-' + Math.random().toString(36).slice(2, 9);\n popover.id = popId;\n trigger.setAttribute('aria-haspopup', 'dialog');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.setAttribute('aria-controls', popId);\n\n // Toggle on click\n const toggleHandler = (e) => {\n e.stopPropagation();\n if (popover.classList.contains('is-visible')) {\n this.hide(trigger);\n } else {\n this.hideAll();\n this.show(trigger);\n }\n };\n trigger.addEventListener('click', toggleHandler);\n cleanup.push(() => trigger.removeEventListener('click', toggleHandler));\n\n this.instances.set(trigger, { popover, cleanup, placement });\n },\n\n position: function (trigger, popover, placement) {\n const rect = trigger.getBoundingClientRect();\n const popRect = popover.getBoundingClientRect();\n const gap = 10;\n let top, left;\n\n switch (placement) {\n case 'top':\n top = rect.top - popRect.height - gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n break;\n case 'left':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.left - popRect.width - gap + window.scrollX;\n break;\n case 'right':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.right + gap + window.scrollX;\n break;\n default: // bottom\n top = rect.bottom + gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n }\n\n // Clamp to viewport\n left = Math.max(8, Math.min(left, window.innerWidth - popRect.width - 8));\n top = Math.max(8, top);\n\n popover.style.top = top + 'px';\n popover.style.left = left + 'px';\n },\n\n show: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n const { popover, placement } = instance;\n\n popover.style.display = 'block';\n popover.classList.add('is-visible');\n trigger.setAttribute('aria-expanded', 'true');\n\n requestAnimationFrame(() => {\n this.position(trigger, popover, placement);\n });\n\n trigger.dispatchEvent(new CustomEvent('bubble:show', { bubbles: true }));\n },\n\n hide: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.popover.classList.remove('is-visible');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.dispatchEvent(new CustomEvent('bubble:hide', { bubbles: true }));\n },\n\n hideAll: function () {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n },\n\n destroy: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n if (instance.popover.parentNode) {\n instance.popover.parentNode.removeChild(instance.popover);\n }\n trigger.removeAttribute('aria-haspopup');\n trigger.removeAttribute('aria-expanded');\n trigger.removeAttribute('aria-controls');\n this.instances.delete(trigger);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, trigger) => this.destroy(trigger));\n this._globalCleanups.forEach(fn => fn());\n this._globalCleanups = [];\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('bubble', Bubble);\n }\n\n window.VanduoBubble = Bubble;\n\n})();\n", "/**\n * Vanduo Framework - Waypoint (Scrollspy) Component\n * Highlights navigation links based on scroll position using IntersectionObserver\n */\n\n(function () {\n 'use strict';\n\n const Waypoint = {\n instances: new Map(),\n\n init: function () {\n const navs = document.querySelectorAll('[data-vd-waypoint-nav], [data-vd-scrollspy-nav]');\n navs.forEach(nav => {\n if (this.instances.has(nav)) return;\n this.initInstance(nav);\n });\n },\n\n initInstance: function (nav) {\n const links = Array.from(nav.querySelectorAll('a[href^=\"#\"]'));\n if (links.length === 0) return;\n\n const cleanup = [];\n const offset = parseInt(nav.getAttribute('data-vd-waypoint-offset') || '80', 10);\n const sections = [];\n\n links.forEach(link => {\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.setAttribute('data-vd-waypoint-section', '');\n sections.push({ id, link, section });\n }\n });\n\n if (sections.length === 0) return;\n\n const activeSections = new Set();\n\n const setActive = (id) => {\n links.forEach(l => l.classList.remove('is-active'));\n const target = links.find(l => l.getAttribute('href') === '#' + id);\n if (target) {\n target.classList.add('is-active');\n nav.dispatchEvent(new CustomEvent('waypoint:change', {\n detail: { activeId: id, link: target }\n }));\n }\n };\n\n const rootMargin = '-' + offset + 'px 0px -40% 0px';\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n activeSections.add(entry.target.id);\n } else {\n activeSections.delete(entry.target.id);\n }\n });\n\n // Pick the topmost visible section\n for (let i = 0; i < sections.length; i++) {\n if (activeSections.has(sections[i].id)) {\n setActive(sections[i].id);\n return;\n }\n }\n }, {\n rootMargin: rootMargin,\n threshold: 0\n });\n\n sections.forEach(s => observer.observe(s.section));\n\n // Smooth scroll on click\n links.forEach(link => {\n const clickHandler = (e) => {\n e.preventDefault();\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth' });\n setActive(id);\n }\n };\n link.addEventListener('click', clickHandler);\n cleanup.push(() => link.removeEventListener('click', clickHandler));\n });\n\n cleanup.push(() => observer.disconnect());\n\n this.instances.set(nav, { observer, cleanup, sections, setActive });\n },\n\n refresh: function (nav) {\n this.destroy(nav);\n this.initInstance(nav);\n },\n\n destroy: function (nav) {\n const instance = this.instances.get(nav);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(nav);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, nav) => this.destroy(nav));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('waypoint', Waypoint);\n }\n\n window.VanduoWaypoint = Waypoint;\n\n})();\n", "/**\n * Vanduo Framework - Ripple (Waves Effect) Component\n * Adds expanding circle animation on click at pointer position\n */\n\n(function () {\n 'use strict';\n\n const Ripple = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-ripple, [data-vd-ripple]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n\n const createWave = (e) => {\n const rect = el.getBoundingClientRect();\n const size = Math.max(rect.width, rect.height);\n const x = (e.clientX || (e.touches && e.touches[0].clientX) || rect.left + rect.width / 2) - rect.left - size / 2;\n const y = (e.clientY || (e.touches && e.touches[0].clientY) || rect.top + rect.height / 2) - rect.top - size / 2;\n\n const wave = document.createElement('span');\n wave.className = 'vd-ripple-wave';\n wave.style.width = size + 'px';\n wave.style.height = size + 'px';\n wave.style.left = x + 'px';\n wave.style.top = y + 'px';\n\n el.appendChild(wave);\n\n wave.addEventListener('animationend', () => {\n if (wave.parentNode) wave.parentNode.removeChild(wave);\n });\n };\n\n el.addEventListener('mousedown', createWave);\n el.addEventListener('touchstart', createWave, { passive: true });\n\n cleanup.push(\n () => el.removeEventListener('mousedown', createWave),\n () => el.removeEventListener('touchstart', createWave)\n );\n\n this.instances.set(el, { cleanup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n // Remove any lingering wave elements\n el.querySelectorAll('.vd-ripple-wave').forEach(w => w.remove());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('ripple', Ripple);\n }\n\n window.VanduoRipple = Ripple;\n\n})();\n", "/**\n * Vanduo Framework - Affix (Sticky) Component\n * Uses IntersectionObserver to toggle .is-stuck within the nearest scrollable parent\n */\n\n(function () {\n 'use strict';\n\n function isScrollable(element) {\n if (!element || element === document.body) return false;\n\n const style = window.getComputedStyle(element);\n const overflowY = style.overflowY;\n const overflowX = style.overflowX;\n const canScrollY = /(auto|scroll|overlay)/.test(overflowY) && element.scrollHeight > element.clientHeight;\n const canScrollX = /(auto|scroll|overlay)/.test(overflowX) && element.scrollWidth > element.clientWidth;\n\n return canScrollY || canScrollX;\n }\n\n function getScrollParent(element) {\n let parent = element.parentElement;\n\n while (parent && parent !== document.body && parent !== document.documentElement) {\n if (isScrollable(parent)) return parent;\n parent = parent.parentElement;\n }\n\n return null;\n }\n\n const Affix = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-affix, .vd-sticky, [data-vd-affix]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const parsedOffset = parseInt(el.getAttribute('data-vd-affix-offset') || '0', 10);\n const offset = Number.isNaN(parsedOffset) ? 0 : parsedOffset;\n const scrollParent = getScrollParent(el);\n let isStuck = false;\n\n const sentinel = document.createElement('div');\n sentinel.style.cssText = 'display:block;height:1px;margin-bottom:-1px;visibility:hidden;pointer-events:none;';\n el.parentNode.insertBefore(sentinel, el);\n\n el.style.setProperty('--affix-top-offset', offset + 'px');\n\n function stick() {\n if (isStuck) return;\n isStuck = true;\n el.classList.add('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:stuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n function unstick() {\n if (!isStuck) return;\n isStuck = false;\n el.classList.remove('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:unstuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n const observer = new IntersectionObserver(function (entries) {\n entries.forEach(entry => {\n if (!entry.isIntersecting) {\n stick();\n } else {\n unstick();\n }\n });\n }, {\n root: scrollParent,\n rootMargin: '-' + offset + 'px 0px 0px 0px',\n threshold: 0\n });\n\n observer.observe(sentinel);\n\n cleanup.push(\n () => observer.disconnect(),\n () => { if (sentinel.parentNode) sentinel.parentNode.removeChild(sentinel); },\n () => {\n el.classList.remove('is-stuck');\n el.style.removeProperty('--affix-top-offset');\n }\n );\n\n this.instances.set(el, { cleanup, observer, sentinel, scrollParent });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n el.classList.remove('is-stuck');\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('affix', Affix);\n }\n\n window.VanduoAffix = Affix;\n\n})();\n", "/**\n * Vanduo Framework - Suggest (Autocomplete) Component\n * Dropdown suggestion list with keyboard navigation, static/async data sources\n */\n\n(function () {\n 'use strict';\n\n /**\n * Escape HTML entities to prevent XSS when inserting into innerHTML\n * @param {string} text\n * @returns {string}\n */\n function _escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n const Suggest = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-suggest], [data-vd-autocomplete]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const minChars = parseInt(input.getAttribute('data-vd-suggest-min-chars') || '1', 10);\n const url = input.getAttribute('data-vd-suggest-url') || '';\n const staticData = input.getAttribute('data-vd-suggest') || input.getAttribute('data-vd-autocomplete') || '';\n let items = [];\n\n try { items = JSON.parse(staticData); } catch (_e) {\n items = staticData.split(',').map(s => s.trim()).filter(Boolean);\n }\n\n // Wrap input if not already wrapped\n let wrapper = input.closest('.vd-suggest-wrapper, .vd-autocomplete-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create dropdown list\n const list = document.createElement('ul');\n list.className = 'vd-suggest-list';\n list.setAttribute('role', 'listbox');\n const listId = 'vd-suggest-' + Math.random().toString(36).slice(2, 9);\n list.id = listId;\n wrapper.appendChild(list);\n\n // ARIA\n input.setAttribute('role', 'combobox');\n input.setAttribute('aria-autocomplete', 'list');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('aria-controls', listId);\n input.setAttribute('autocomplete', 'off');\n\n let highlighted = -1;\n let currentItems = [];\n let debounceTimer = null;\n\n const renderItems = (filtered, query) => {\n list.innerHTML = '';\n currentItems = filtered;\n highlighted = -1;\n\n if (filtered.length === 0) {\n const empty = document.createElement('li');\n empty.className = 'vd-suggest-empty';\n empty.textContent = 'No results';\n list.appendChild(empty);\n return;\n }\n\n filtered.forEach((item, i) => {\n const li = document.createElement('li');\n li.className = 'vd-suggest-item';\n li.setAttribute('role', 'option');\n li.id = listId + '-item-' + i;\n\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n if (query) {\n // Escape HTML first to prevent XSS, then highlight matches in the safe string\n const escaped = _escapeHtml(text);\n const re = new RegExp('(' + query.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n li.innerHTML = escaped.replace(re, '$1');\n } else {\n li.textContent = text;\n }\n\n li.addEventListener('click', () => selectItem(i));\n list.appendChild(li);\n });\n };\n\n const open = () => {\n list.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n list.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n highlighted = -1;\n input.removeAttribute('aria-activedescendant');\n };\n\n const selectItem = (index) => {\n const item = currentItems[index];\n const value = typeof item === 'object' ? (item.value || item.label || String(item)) : String(item);\n input.value = value;\n close();\n input.dispatchEvent(new CustomEvent('suggest:select', {\n detail: { value, item, index },\n bubbles: true\n }));\n };\n\n const highlight = (index) => {\n const listItems = list.querySelectorAll('.vd-suggest-item');\n listItems.forEach(li => li.classList.remove('is-highlighted'));\n if (index >= 0 && index < listItems.length) {\n highlighted = index;\n listItems[index].classList.add('is-highlighted');\n input.setAttribute('aria-activedescendant', listItems[index].id);\n listItems[index].scrollIntoView({ block: 'nearest' });\n }\n };\n\n const doSearch = async (query) => {\n if (query.length < minChars) { close(); return; }\n\n let filtered;\n if (url) {\n try {\n const separator = url.includes('?') ? '&' : '?';\n const res = await window.fetch(url + separator + 'q=' + encodeURIComponent(query));\n filtered = await res.json();\n } catch (_e) {\n filtered = [];\n }\n } else {\n const lower = query.toLowerCase();\n filtered = items.filter(item => {\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n return text.toLowerCase().includes(lower);\n });\n }\n\n renderItems(filtered, query);\n if (filtered.length > 0) open();\n else open(); // show \"no results\"\n };\n\n const inputHandler = () => {\n clearTimeout(debounceTimer);\n debounceTimer = setTimeout(() => doSearch(input.value), 200);\n };\n\n const keyHandler = (e) => {\n if (!list.classList.contains('is-open')) {\n if (e.key === 'ArrowDown') { doSearch(input.value); e.preventDefault(); }\n return;\n }\n\n const total = currentItems.length;\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n highlight(highlighted < total - 1 ? highlighted + 1 : 0);\n break;\n case 'ArrowUp':\n e.preventDefault();\n highlight(highlighted > 0 ? highlighted - 1 : total - 1);\n break;\n case 'Enter':\n e.preventDefault();\n if (highlighted >= 0) selectItem(highlighted);\n break;\n case 'Escape':\n close();\n break;\n }\n };\n\n const blurHandler = () => {\n setTimeout(close, 200);\n };\n\n input.addEventListener('input', inputHandler);\n input.addEventListener('keydown', keyHandler);\n input.addEventListener('blur', blurHandler);\n input.addEventListener('focus', () => { if (input.value.length >= minChars) doSearch(input.value); });\n\n cleanup.push(\n () => input.removeEventListener('input', inputHandler),\n () => input.removeEventListener('keydown', keyHandler),\n () => input.removeEventListener('blur', blurHandler),\n () => clearTimeout(debounceTimer),\n () => { if (list.parentNode) list.parentNode.removeChild(list); }\n );\n\n this.instances.set(input, { cleanup, list, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('suggest', Suggest);\n }\n\n window.VanduoSuggest = Suggest;\n\n})();\n", "/**\n * Vanduo Framework - Validate (Form Validation) Component\n * Declarative validation via data attributes with real-time and on-submit modes\n */\n\n(function () {\n 'use strict';\n\n const Validate = {\n instances: new Map(),\n\n rules: {\n required: (value) => value.trim().length > 0,\n email: (value) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value),\n url: (value) => { try { new URL(value); return true; } catch (_e) { return false; } },\n number: (value) => !isNaN(parseFloat(value)) && isFinite(value),\n min: (value, param) => value.length >= parseInt(param, 10),\n max: (value, param) => value.length <= parseInt(param, 10),\n minVal: (value, param) => parseFloat(value) >= parseFloat(param),\n maxVal: (value, param) => parseFloat(value) <= parseFloat(param),\n pattern: (value, param) => {\n try {\n // Cap regex length to prevent ReDoS from excessively complex patterns\n if (param.length > 100) return false;\n return new RegExp(param).test(value);\n } catch (_e) { return false; }\n },\n match: (value, param) => {\n try {\n const escaped = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(param) : param;\n const other = document.querySelector('[name=\"' + escaped + '\"]');\n return other ? value === other.value : false;\n } catch (_e) {\n return false;\n }\n }\n },\n\n messages: {\n required: 'This field is required',\n email: 'Please enter a valid email address',\n url: 'Please enter a valid URL',\n number: 'Please enter a valid number',\n min: 'Minimum {0} characters required',\n max: 'Maximum {0} characters allowed',\n minVal: 'Value must be at least {0}',\n maxVal: 'Value must be at most {0}',\n pattern: 'Invalid format',\n match: 'Fields do not match'\n },\n\n init: function () {\n const forms = document.querySelectorAll('[data-vd-validate], .vd-validate');\n forms.forEach(form => {\n if (this.instances.has(form)) return;\n this.initInstance(form);\n });\n },\n\n initInstance: function (form) {\n const cleanup = [];\n const mode = form.getAttribute('data-vd-validate-mode') || 'blur'; // blur | input | submit\n const fields = form.querySelectorAll('[data-vd-rules]');\n\n const validateField = (field) => {\n const rulesStr = field.getAttribute('data-vd-rules') || '';\n const rules = rulesStr.split('|').map(r => r.trim()).filter(Boolean);\n const value = field.value;\n const errors = [];\n\n for (const rule of rules) {\n const [name, ...params] = rule.split(':');\n const param = params.join(':');\n const validator = this.rules[name];\n\n if (validator && !validator(value, param)) {\n const customMsg = field.getAttribute('data-vd-msg-' + name);\n let msg = customMsg || this.messages[name] || 'Invalid';\n if (param) msg = msg.replace('{0}', param);\n errors.push(msg);\n break; // one error at a time\n }\n }\n\n this.setFieldState(field, errors);\n return errors.length === 0;\n };\n\n const validateAll = () => {\n let valid = true;\n fields.forEach(field => {\n if (!validateField(field)) valid = false;\n });\n return valid;\n };\n\n // Per-field listeners\n fields.forEach(field => {\n if (mode === 'input' || mode === 'blur') {\n const eventType = mode === 'input' ? 'input' : 'blur';\n const handler = () => validateField(field);\n field.addEventListener(eventType, handler);\n cleanup.push(() => field.removeEventListener(eventType, handler));\n\n if (mode === 'blur') {\n const inputClear = () => {\n if (field.classList.contains('is-invalid') || field.classList.contains('is-valid')) {\n validateField(field);\n }\n };\n field.addEventListener('input', inputClear);\n cleanup.push(() => field.removeEventListener('input', inputClear));\n }\n }\n });\n\n // Form submit\n const submitHandler = (e) => {\n const valid = validateAll();\n if (!valid) {\n e.preventDefault();\n e.stopPropagation();\n // Focus first invalid field\n const firstInvalid = form.querySelector('.is-invalid');\n if (firstInvalid) firstInvalid.focus();\n }\n form.dispatchEvent(new CustomEvent('validate:submit', {\n detail: { valid },\n bubbles: true\n }));\n };\n\n form.addEventListener('submit', submitHandler);\n cleanup.push(() => form.removeEventListener('submit', submitHandler));\n\n this.instances.set(form, { cleanup, validateAll, validateField });\n },\n\n setFieldState: function (field, errors) {\n const wrapper = field.closest('.vd-form-group') || field.parentElement;\n let errorEl = wrapper.querySelector('.vd-validate-error');\n\n field.classList.remove('is-valid', 'is-invalid');\n\n if (errors.length > 0) {\n field.classList.add('is-invalid');\n field.setAttribute('aria-invalid', 'true');\n if (!errorEl) {\n errorEl = document.createElement('div');\n errorEl.className = 'vd-validate-error';\n errorEl.id = 'vd-err-' + Math.random().toString(36).slice(2, 9);\n errorEl.setAttribute('role', 'alert');\n wrapper.appendChild(errorEl);\n }\n errorEl.textContent = errors[0];\n errorEl.style.display = '';\n field.setAttribute('aria-describedby', errorEl.id);\n } else if (field.value.trim()) {\n field.classList.add('is-valid');\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n } else {\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n }\n },\n\n validateForm: function (form) {\n const instance = this.instances.get(form);\n return instance ? instance.validateAll() : false;\n },\n\n addRule: function (name, validator, message) {\n this.rules[name] = validator;\n if (message) this.messages[name] = message;\n },\n\n destroy: function (form) {\n const instance = this.instances.get(form);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(form);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, form) => this.destroy(form));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('validate', Validate);\n }\n\n window.VanduoValidate = Validate;\n\n})();\n", "/**\n * Vanduo Framework - Datepicker Component\n * Calendar popup attached to input field with month/year navigation\n */\n\n(function () {\n 'use strict';\n\n const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\n const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];\n\n const Datepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-datepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const format = input.getAttribute('data-vd-datepicker-format') || 'yyyy-mm-dd';\n const minStr = input.getAttribute('data-vd-datepicker-min');\n const maxStr = input.getAttribute('data-vd-datepicker-max');\n const minDate = minStr ? new Date(minStr) : null;\n const maxDate = maxStr ? new Date(maxStr) : null;\n\n const today = new Date();\n let viewYear = today.getFullYear();\n let viewMonth = today.getMonth();\n let selectedDate = null;\n let viewMode = 'days'; // days | months | years\n\n // Parse existing value\n if (input.value) {\n const parsed = new Date(input.value);\n if (!isNaN(parsed.getTime())) {\n selectedDate = parsed;\n viewYear = parsed.getFullYear();\n viewMonth = parsed.getMonth();\n }\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-datepicker-popup';\n popup.setAttribute('role', 'dialog');\n popup.setAttribute('aria-label', 'Choose date');\n\n const wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n wrapper.appendChild(popup);\n\n const formatDate = (d) => {\n const yyyy = d.getFullYear();\n const mm = String(d.getMonth() + 1).padStart(2, '0');\n const dd = String(d.getDate()).padStart(2, '0');\n return format.replace('yyyy', yyyy).replace('mm', mm).replace('dd', dd);\n };\n\n const isDisabled = (d) => {\n if (minDate && d < minDate) return true;\n if (maxDate && d > maxDate) return true;\n return false;\n };\n\n const isSameDay = (a, b) => a && b &&\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate();\n\n const render = () => {\n popup.innerHTML = '';\n\n // Header\n const header = document.createElement('div');\n header.className = 'vd-datepicker-header';\n\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-datepicker-prev';\n prevBtn.innerHTML = '‹';\n prevBtn.setAttribute('aria-label', 'Previous');\n\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-datepicker-next';\n nextBtn.innerHTML = '›';\n nextBtn.setAttribute('aria-label', 'Next');\n\n const title = document.createElement('span');\n title.className = 'vd-datepicker-title';\n\n if (viewMode === 'days') {\n title.textContent = MONTHS[viewMonth] + ' ' + viewYear;\n title.addEventListener('click', () => { viewMode = 'months'; render(); });\n prevBtn.addEventListener('click', () => { viewMonth--; if (viewMonth < 0) { viewMonth = 11; viewYear--; } render(); });\n nextBtn.addEventListener('click', () => { viewMonth++; if (viewMonth > 11) { viewMonth = 0; viewYear++; } render(); });\n } else if (viewMode === 'months') {\n title.textContent = String(viewYear);\n title.addEventListener('click', () => { viewMode = 'years'; render(); });\n prevBtn.addEventListener('click', () => { viewYear--; render(); });\n nextBtn.addEventListener('click', () => { viewYear++; render(); });\n } else {\n const decadeStart = Math.floor(viewYear / 10) * 10;\n title.textContent = decadeStart + ' - ' + (decadeStart + 9);\n prevBtn.addEventListener('click', () => { viewYear -= 10; render(); });\n nextBtn.addEventListener('click', () => { viewYear += 10; render(); });\n }\n\n header.appendChild(prevBtn);\n header.appendChild(title);\n header.appendChild(nextBtn);\n popup.appendChild(header);\n\n if (viewMode === 'days') {\n // Weekday headers\n const weekdays = document.createElement('div');\n weekdays.className = 'vd-datepicker-weekdays';\n DAYS.forEach(d => {\n const span = document.createElement('span');\n span.textContent = d;\n weekdays.appendChild(span);\n });\n popup.appendChild(weekdays);\n\n // Days grid\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-days';\n\n const firstDay = new Date(viewYear, viewMonth, 1).getDay();\n const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();\n const daysInPrev = new Date(viewYear, viewMonth, 0).getDate();\n\n // Previous month padding\n for (let i = firstDay - 1; i >= 0; i--) {\n const btn = createDayBtn(daysInPrev - i, true);\n grid.appendChild(btn);\n }\n\n // Current month\n for (let d = 1; d <= daysInMonth; d++) {\n const date = new Date(viewYear, viewMonth, d);\n const btn = createDayBtn(d, false, date);\n grid.appendChild(btn);\n }\n\n // Next month padding\n const totalCells = firstDay + daysInMonth;\n const remaining = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7);\n for (let i = 1; i <= remaining; i++) {\n const btn = createDayBtn(i, true);\n grid.appendChild(btn);\n }\n\n popup.appendChild(grid);\n } else if (viewMode === 'months') {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-months';\n MONTHS.forEach((name, i) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-month-btn';\n btn.textContent = name.slice(0, 3);\n if (selectedDate && selectedDate.getFullYear() === viewYear && selectedDate.getMonth() === i) {\n btn.classList.add('is-selected');\n }\n btn.addEventListener('click', () => { viewMonth = i; viewMode = 'days'; render(); });\n grid.appendChild(btn);\n });\n popup.appendChild(grid);\n } else {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-years';\n const decadeStart = Math.floor(viewYear / 10) * 10;\n for (let y = decadeStart - 1; y <= decadeStart + 10; y++) {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-year-btn';\n btn.textContent = y;\n if (selectedDate && selectedDate.getFullYear() === y) btn.classList.add('is-selected');\n if (y < decadeStart || y > decadeStart + 9) btn.style.opacity = '0.4';\n btn.addEventListener('click', () => { viewYear = y; viewMode = 'months'; render(); });\n grid.appendChild(btn);\n }\n popup.appendChild(grid);\n }\n };\n\n const createDayBtn = (day, outside, date) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-day';\n btn.textContent = day;\n\n if (outside) {\n btn.classList.add('is-outside');\n btn.tabIndex = -1;\n return btn;\n }\n\n if (date && isSameDay(date, today)) btn.classList.add('is-today');\n if (date && isSameDay(date, selectedDate)) btn.classList.add('is-selected');\n if (date && isDisabled(date)) {\n btn.classList.add('is-disabled');\n return btn;\n }\n\n if (date) {\n btn.addEventListener('click', () => {\n selectedDate = date;\n viewYear = date.getFullYear();\n viewMonth = date.getMonth();\n input.value = formatDate(date);\n close();\n input.dispatchEvent(new CustomEvent('datepicker:select', {\n detail: { date, formatted: input.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n }\n\n return btn;\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n viewMode = 'days';\n };\n\n // Events\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'dialog');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close, popup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('datepicker', Datepicker);\n }\n\n window.VanduoDatepicker = Datepicker;\n\n})();\n", "/**\n * Vanduo Framework - Timepicker Component\n * Dropdown time selection with 12h/24h format and configurable step intervals\n */\n\n(function () {\n 'use strict';\n\n const Timepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-timepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const is24h = input.getAttribute('data-vd-timepicker-format') === '24h';\n const step = parseInt(input.getAttribute('data-vd-timepicker-step') || '30', 10);\n\n // Create wrapper\n let wrapper = input.closest('.vd-suggest-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-timepicker-popup';\n popup.setAttribute('role', 'listbox');\n wrapper.appendChild(popup);\n\n // Generate time slots\n const times = [];\n for (let h = 0; h < 24; h++) {\n for (let m = 0; m < 60; m += step) {\n const hh24 = String(h).padStart(2, '0');\n const mm = String(m).padStart(2, '0');\n\n if (is24h) {\n times.push({ display: hh24 + ':' + mm, value: hh24 + ':' + mm });\n } else {\n const period = h < 12 ? 'AM' : 'PM';\n const h12 = h === 0 ? 12 : (h > 12 ? h - 12 : h);\n const display = h12 + ':' + mm + ' ' + period;\n times.push({ display, value: hh24 + ':' + mm });\n }\n }\n }\n\n const render = () => {\n popup.innerHTML = '';\n times.forEach(t => {\n const item = document.createElement('div');\n item.className = 'vd-timepicker-item';\n item.setAttribute('role', 'option');\n item.textContent = t.display;\n\n if (input.value === t.value || input.value === t.display) {\n item.classList.add('is-selected');\n }\n\n item.addEventListener('click', () => {\n input.value = t.display;\n popup.querySelectorAll('.vd-timepicker-item').forEach(i => i.classList.remove('is-selected'));\n item.classList.add('is-selected');\n close();\n input.dispatchEvent(new CustomEvent('timepicker:select', {\n detail: { display: t.display, value: t.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n\n popup.appendChild(item);\n });\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n // Scroll to selected\n const selected = popup.querySelector('.is-selected');\n if (selected) selected.scrollIntoView({ block: 'center' });\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n };\n\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'listbox');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n input.readOnly = true;\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('timepicker', Timepicker);\n }\n\n window.VanduoTimepicker = Timepicker;\n\n})();\n", "/**\n * Vanduo Framework - Stepper Component\n * Multi-step progress indicator with state management\n */\n\n(function () {\n 'use strict';\n\n const Stepper = {\n instances: new Map(),\n\n init: function () {\n const steppers = document.querySelectorAll('.vd-stepper');\n steppers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const items = Array.from(el.querySelectorAll('.vd-stepper-item'));\n const isClickable = el.classList.contains('vd-stepper-clickable');\n let currentIndex = items.findIndex(i => i.classList.contains('is-active'));\n if (currentIndex === -1) currentIndex = 0;\n\n const setStep = (index) => {\n if (index < 0 || index >= items.length) return;\n const prev = currentIndex;\n currentIndex = index;\n\n items.forEach((item, i) => {\n item.classList.remove('is-active', 'is-completed');\n if (i < index) item.classList.add('is-completed');\n else if (i === index) item.classList.add('is-active');\n });\n\n el.dispatchEvent(new CustomEvent('stepper:change', {\n detail: { current: index, previous: prev, total: items.length },\n bubbles: true\n }));\n };\n\n if (isClickable) {\n items.forEach((item, i) => {\n const handler = () => setStep(i);\n item.addEventListener('click', handler);\n cleanup.push(() => item.removeEventListener('click', handler));\n });\n }\n\n // Initialize current state\n setStep(currentIndex);\n\n this.instances.set(el, {\n cleanup,\n setStep,\n next: () => setStep(currentIndex + 1),\n prev: () => setStep(currentIndex - 1),\n getCurrent: () => currentIndex\n });\n },\n\n setStep: function (el, index) {\n const inst = this.instances.get(el);\n if (inst) inst.setStep(index);\n },\n\n next: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.next();\n },\n\n prev: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.prev();\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('stepper', Stepper);\n }\n\n window.VanduoStepper = Stepper;\n\n})();\n", "/**\n * Vanduo Framework - Rating Component\n * Star-based rating input with hover preview and read-only mode\n */\n\n(function () {\n 'use strict';\n\n const Rating = {\n instances: new Map(),\n\n init: function () {\n const ratings = document.querySelectorAll('[data-vd-rating]');\n ratings.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const max = parseInt(el.getAttribute('data-vd-rating-max') || '5', 10);\n const initialValue = parseFloat(el.getAttribute('data-vd-rating-value') || '0');\n const readonly = el.classList.contains('vd-rating-readonly') || el.hasAttribute('data-vd-rating-readonly');\n let currentValue = initialValue;\n\n el.classList.add('vd-rating');\n el.setAttribute('role', 'radiogroup');\n el.setAttribute('aria-label', el.getAttribute('aria-label') || 'Rating');\n\n // Clear existing stars\n el.innerHTML = '';\n\n // Create stars\n const stars = [];\n for (let i = 1; i <= max; i++) {\n const star = document.createElement('button');\n star.type = 'button';\n star.className = 'vd-rating-star';\n star.setAttribute('role', 'radio');\n star.setAttribute('aria-label', i + ' star' + (i > 1 ? 's' : ''));\n star.setAttribute('aria-checked', i <= currentValue ? 'true' : 'false');\n if (readonly) star.tabIndex = -1;\n stars.push(star);\n el.appendChild(star);\n }\n\n // Value display\n const valueDisplay = document.createElement('span');\n valueDisplay.className = 'vd-rating-value';\n valueDisplay.textContent = currentValue > 0 ? currentValue.toString() : '';\n el.appendChild(valueDisplay);\n\n const updateStars = (value) => {\n stars.forEach((star, i) => {\n star.classList.remove('is-active', 'is-half');\n const starNum = i + 1;\n if (starNum <= Math.floor(value)) {\n star.classList.add('is-active');\n } else if (starNum - 0.5 <= value) {\n star.classList.add('is-half');\n }\n star.setAttribute('aria-checked', starNum <= value ? 'true' : 'false');\n });\n valueDisplay.textContent = value > 0 ? value.toString() : '';\n };\n\n updateStars(currentValue);\n\n if (!readonly) {\n stars.forEach((star, i) => {\n const enterHandler = () => {\n stars.forEach((s, j) => {\n s.classList.toggle('is-hovered', j <= i);\n });\n };\n const leaveHandler = () => {\n stars.forEach(s => s.classList.remove('is-hovered'));\n };\n const clickHandler = () => {\n currentValue = i + 1;\n el.setAttribute('data-vd-rating-value', currentValue);\n updateStars(currentValue);\n el.dispatchEvent(new CustomEvent('rating:change', {\n detail: { value: currentValue, max },\n bubbles: true\n }));\n };\n\n star.addEventListener('mouseenter', enterHandler);\n star.addEventListener('mouseleave', leaveHandler);\n star.addEventListener('click', clickHandler);\n\n cleanup.push(\n () => star.removeEventListener('mouseenter', enterHandler),\n () => star.removeEventListener('mouseleave', leaveHandler),\n () => star.removeEventListener('click', clickHandler)\n );\n });\n\n // Keyboard\n const keyHandler = (e) => {\n if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n e.preventDefault();\n if (currentValue < max) {\n currentValue++;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n e.preventDefault();\n if (currentValue > 1) {\n currentValue--;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n }\n };\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n }\n\n this.instances.set(el, {\n cleanup,\n getValue: () => currentValue,\n setValue: (v) => { currentValue = v; updateStars(v); }\n });\n },\n\n getValue: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getValue() : 0;\n },\n\n setValue: function (el, value) {\n const inst = this.instances.get(el);\n if (inst) inst.setValue(value);\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('rating', Rating);\n }\n\n window.VanduoRating = Rating;\n\n})();\n", "/**\n * Vanduo Framework - Transfer (Dual-list) Component\n * Source-to-target list transfer with search, select-all, and move actions\n */\n\n(function () {\n 'use strict';\n\n const Transfer = {\n instances: new Map(),\n\n init: function () {\n const transfers = document.querySelectorAll('[data-vd-transfer]');\n transfers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n el.classList.add('vd-transfer');\n\n let sourceData, targetData;\n try {\n const raw = JSON.parse(el.getAttribute('data-vd-transfer') || '[]');\n sourceData = raw.map((item, i) => ({\n id: item.id || 'item-' + i,\n label: item.label || item.text || String(item),\n selected: false\n }));\n } catch (_e) {\n sourceData = [];\n }\n targetData = [];\n\n const sourceSelected = new Set();\n const targetSelected = new Set();\n\n const render = () => {\n el.innerHTML = '';\n\n // Source panel\n const sourcePanel = createPanel('Source', sourceData, sourceSelected, 'source');\n // Actions\n const actions = document.createElement('div');\n actions.className = 'vd-transfer-actions';\n\n const moveRightBtn = document.createElement('button');\n moveRightBtn.type = 'button';\n moveRightBtn.className = 'vd-transfer-btn';\n moveRightBtn.innerHTML = '›';\n moveRightBtn.setAttribute('aria-label', 'Move to target');\n moveRightBtn.disabled = sourceSelected.size === 0;\n moveRightBtn.addEventListener('click', () => moveRight());\n\n const moveLeftBtn = document.createElement('button');\n moveLeftBtn.type = 'button';\n moveLeftBtn.className = 'vd-transfer-btn';\n moveLeftBtn.innerHTML = '‹';\n moveLeftBtn.setAttribute('aria-label', 'Move to source');\n moveLeftBtn.disabled = targetSelected.size === 0;\n moveLeftBtn.addEventListener('click', () => moveLeft());\n\n actions.appendChild(moveRightBtn);\n actions.appendChild(moveLeftBtn);\n\n // Target panel\n const targetPanel = createPanel('Target', targetData, targetSelected, 'target');\n\n el.appendChild(sourcePanel);\n el.appendChild(actions);\n el.appendChild(targetPanel);\n };\n\n const createPanel = (title, data, selected, _side) => {\n const panel = document.createElement('div');\n panel.className = 'vd-transfer-panel';\n\n const header = document.createElement('div');\n header.className = 'vd-transfer-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const count = document.createElement('span');\n count.className = 'vd-transfer-count';\n count.textContent = selected.size + '/' + data.length;\n header.appendChild(titleSpan);\n header.appendChild(count);\n panel.appendChild(header);\n\n // Search\n const searchDiv = document.createElement('div');\n searchDiv.className = 'vd-transfer-search';\n const searchInput = document.createElement('input');\n searchInput.type = 'text';\n searchInput.placeholder = 'Search...';\n searchInput.setAttribute('aria-label', 'Search ' + title.toLowerCase());\n searchDiv.appendChild(searchInput);\n panel.appendChild(searchDiv);\n\n // List\n const list = document.createElement('ul');\n list.className = 'vd-transfer-list';\n list.setAttribute('role', 'listbox');\n\n const renderList = (filter) => {\n list.innerHTML = '';\n const filtered = filter ? data.filter(d => {\n const label = (d.label || d.text || String(d)).toLowerCase();\n return label.includes(filter.toLowerCase());\n }) : data;\n filtered.forEach(item => {\n const li = document.createElement('li');\n li.className = 'vd-transfer-item';\n li.setAttribute('role', 'option');\n if (selected.has(item.id)) li.classList.add('is-selected');\n\n const checkbox = document.createElement('input');\n checkbox.type = 'checkbox';\n checkbox.checked = selected.has(item.id);\n checkbox.setAttribute('aria-label', item.label);\n\n const label = document.createElement('span');\n label.textContent = item.label;\n\n li.addEventListener('click', () => {\n if (selected.has(item.id)) selected.delete(item.id);\n else selected.add(item.id);\n render();\n });\n\n li.appendChild(checkbox);\n li.appendChild(label);\n list.appendChild(li);\n });\n };\n\n searchInput.addEventListener('input', () => renderList(searchInput.value));\n renderList('');\n\n panel.appendChild(list);\n return panel;\n };\n\n const moveRight = () => {\n const toMove = sourceData.filter(d => sourceSelected.has(d.id));\n sourceData = sourceData.filter(d => !sourceSelected.has(d.id));\n targetData = targetData.concat(toMove);\n sourceSelected.clear();\n render();\n fireChange();\n };\n\n const moveLeft = () => {\n const toMove = targetData.filter(d => targetSelected.has(d.id));\n targetData = targetData.filter(d => !targetSelected.has(d.id));\n sourceData = sourceData.concat(toMove);\n targetSelected.clear();\n render();\n fireChange();\n };\n\n const fireChange = () => {\n el.dispatchEvent(new CustomEvent('transfer:change', {\n detail: {\n source: sourceData.map(d => d.id),\n target: targetData.map(d => d.id)\n },\n bubbles: true\n }));\n };\n\n render();\n\n this.instances.set(el, {\n cleanup,\n getTarget: () => targetData.map(d => d.id),\n getSource: () => sourceData.map(d => d.id)\n });\n },\n\n getSelected: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getTarget() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('transfer', Transfer);\n }\n\n window.VanduoTransfer = Transfer;\n\n})();\n", "/**\n * Vanduo Framework - Tree View Component\n * Hierarchical collapsible tree with checkbox selection and keyboard navigation\n */\n\n(function () {\n 'use strict';\n\n const Tree = {\n instances: new Map(),\n\n init: function () {\n const trees = document.querySelectorAll('[data-vd-tree]');\n trees.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const cascade = el.getAttribute('data-vd-tree-cascade') !== 'false';\n\n let data;\n try { data = JSON.parse(el.getAttribute('data-vd-tree') || '[]'); } catch (_e) { data = []; }\n\n el.classList.add('vd-tree');\n el.setAttribute('role', 'tree');\n\n const render = (items, parent) => {\n parent.innerHTML = '';\n items.forEach(item => {\n const node = document.createElement('li');\n node.className = 'vd-tree-node';\n node.setAttribute('role', 'treeitem');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n if (item.open) node.classList.add('is-open');\n\n const content = document.createElement('div');\n content.className = 'vd-tree-node-content';\n\n // Toggle\n if (item.children && item.children.length > 0) {\n const toggle = document.createElement('button');\n toggle.type = 'button';\n toggle.className = 'vd-tree-toggle';\n toggle.setAttribute('aria-label', 'Toggle');\n toggle.addEventListener('click', (e) => {\n e.stopPropagation();\n item.open = !item.open;\n node.classList.toggle('is-open');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n });\n content.appendChild(toggle);\n } else {\n const ph = document.createElement('span');\n ph.className = 'vd-tree-toggle-placeholder';\n content.appendChild(ph);\n }\n\n // Checkbox\n if (el.hasAttribute('data-vd-tree-checkbox')) {\n const cb = document.createElement('input');\n cb.type = 'checkbox';\n cb.className = 'vd-tree-checkbox';\n cb.checked = !!item.checked;\n cb.setAttribute('aria-label', item.label);\n cb.addEventListener('change', (e) => {\n e.stopPropagation();\n item.checked = cb.checked;\n if (cascade && item.children) {\n setChildChecked(item.children, cb.checked);\n render(data, el);\n }\n el.dispatchEvent(new CustomEvent('tree:check', {\n detail: { id: item.id, checked: cb.checked, label: item.label },\n bubbles: true\n }));\n });\n content.appendChild(cb);\n }\n\n // Icon\n if (item.icon) {\n const icon = document.createElement('span');\n icon.className = 'vd-tree-icon ' + item.icon;\n content.appendChild(icon);\n }\n\n // Label\n const label = document.createElement('span');\n label.className = 'vd-tree-label';\n label.textContent = item.label || '';\n content.appendChild(label);\n\n node.appendChild(content);\n\n // Children\n if (item.children && item.children.length > 0) {\n const childList = document.createElement('ul');\n childList.className = 'vd-tree-children';\n childList.setAttribute('role', 'group');\n render(item.children, childList);\n node.appendChild(childList);\n }\n\n parent.appendChild(node);\n });\n };\n\n const setChildChecked = (items, checked) => {\n items.forEach(item => {\n item.checked = checked;\n if (item.children) setChildChecked(item.children, checked);\n });\n };\n\n // Keyboard\n const keyHandler = (e) => {\n const focused = document.activeElement;\n if (!el.contains(focused)) return;\n\n const nodes = Array.from(el.querySelectorAll('.vd-tree-node-content'));\n const idx = nodes.indexOf(focused.closest('.vd-tree-node-content'));\n if (idx === -1) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (idx < nodes.length - 1) {\n const next = nodes[idx + 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (next) next.focus();\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (idx > 0) {\n const prev = nodes[idx - 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (prev) prev.focus();\n }\n break;\n }\n };\n\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n render(data, el);\n\n this.instances.set(el, {\n cleanup,\n getData: () => data,\n getChecked: () => {\n const checked = [];\n const collect = (items) => {\n items.forEach(i => {\n if (i.checked) checked.push(i.id || i.label);\n if (i.children) collect(i.children);\n });\n };\n collect(data);\n return checked;\n }\n });\n },\n\n getChecked: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getChecked() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tree', Tree);\n }\n\n window.VanduoTree = Tree;\n\n})();\n", "/**\n * Vanduo Framework - Spotlight (Feature Discovery) Component\n * Guided tour with overlay highlight and step-through tooltip\n */\n\n(function () {\n 'use strict';\n\n const Spotlight = {\n _active: false,\n _steps: [],\n _currentStep: 0,\n _elements: {},\n _cleanup: [],\n _boundTriggers: new WeakMap(),\n _triggerElement: null,\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-spotlight]');\n\n triggers.forEach(trigger => {\n if (this._boundTriggers.has(trigger)) return;\n\n const clickHandler = (event) => {\n event.preventDefault();\n\n const steps = this._parseSteps(trigger.getAttribute('data-vd-spotlight'));\n if (steps.length === 0) return;\n\n this.start(steps, { trigger });\n };\n\n trigger.addEventListener('click', clickHandler);\n this._boundTriggers.set(trigger, clickHandler);\n });\n },\n\n _parseSteps: function (raw) {\n if (typeof raw !== 'string' || raw.trim() === '') return [];\n\n try {\n const parsed = JSON.parse(raw);\n return this._normalizeSteps(parsed);\n } catch (error) {\n console.error('VanduoSpotlight: invalid data-vd-spotlight payload.', error);\n return [];\n }\n },\n\n _normalizeStep: function (step) {\n if (!step || typeof step !== 'object') return null;\n\n const target = step.target;\n const hasSelectorTarget = typeof target === 'string' && target.trim() !== '';\n const hasElementTarget = typeof Element !== 'undefined' && target instanceof Element;\n\n if (!hasSelectorTarget && !hasElementTarget) return null;\n\n const title = typeof step.title === 'string' ? step.title : '';\n const description = typeof step.description === 'string'\n ? step.description\n : (typeof step.content === 'string' ? step.content : '');\n\n return {\n target,\n title,\n description\n };\n },\n\n _normalizeSteps: function (steps) {\n if (!Array.isArray(steps)) return [];\n\n return steps\n .map(step => this._normalizeStep(step))\n .filter(Boolean);\n },\n\n start: function (steps, options) {\n if (this._active) this.stop();\n\n const normalizedSteps = this._normalizeSteps(steps);\n if (normalizedSteps.length === 0) return;\n\n const startOptions = options || {};\n\n this._steps = normalizedSteps;\n this._currentStep = 0;\n this._active = true;\n this._triggerElement = startOptions.trigger || (document.activeElement instanceof HTMLElement ? document.activeElement : null);\n\n // Create overlay\n const overlay = document.createElement('div');\n overlay.className = 'vd-spotlight-overlay';\n overlay.setAttribute('aria-hidden', 'true');\n document.body.appendChild(overlay);\n\n // Create tooltip\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-spotlight-tooltip';\n tooltip.setAttribute('role', 'dialog');\n tooltip.setAttribute('aria-modal', 'true');\n tooltip.tabIndex = -1;\n document.body.appendChild(tooltip);\n\n this._elements = { overlay, tooltip };\n\n // ESC to close\n const escHandler = (e) => { if (e.key === 'Escape') this.stop(); };\n document.addEventListener('keydown', escHandler);\n this._cleanup.push(() => document.removeEventListener('keydown', escHandler));\n\n // Overlay click to close\n overlay.addEventListener('click', () => this.stop());\n\n this._showStep(this._currentStep);\n },\n\n _showStep: function (index) {\n const step = this._steps[index];\n if (!step) return;\n\n const target = typeof step.target === 'string' ? document.querySelector(step.target) : step.target;\n const { tooltip } = this._elements;\n\n // Remove previous highlight\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n // Highlight target\n if (target) {\n target.classList.add('vd-spotlight-target');\n target.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n\n // Build tooltip content\n const total = this._steps.length;\n tooltip.innerHTML = '';\n tooltip.removeAttribute('aria-labelledby');\n tooltip.removeAttribute('aria-describedby');\n\n if (step.title) {\n const title = document.createElement('h4');\n title.className = 'vd-spotlight-title';\n title.id = 'vd-spotlight-title-' + index + '-' + Date.now();\n title.textContent = step.title;\n tooltip.appendChild(title);\n tooltip.setAttribute('aria-labelledby', title.id);\n }\n\n if (step.description) {\n const desc = document.createElement('p');\n desc.className = 'vd-spotlight-description';\n desc.id = 'vd-spotlight-description-' + index + '-' + Date.now();\n desc.textContent = step.description;\n tooltip.appendChild(desc);\n tooltip.setAttribute('aria-describedby', desc.id);\n }\n\n // Footer\n const footer = document.createElement('div');\n footer.className = 'vd-spotlight-footer';\n footer.setAttribute('aria-label', 'Step ' + (index + 1) + ' of ' + total);\n\n const counter = document.createElement('span');\n counter.className = 'vd-spotlight-counter';\n counter.textContent = (index + 1) + ' / ' + total;\n\n const actions = document.createElement('div');\n actions.className = 'vd-spotlight-actions';\n\n if (index > 0) {\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-spotlight-btn';\n prevBtn.textContent = 'Back';\n prevBtn.addEventListener('click', () => this.prev());\n actions.appendChild(prevBtn);\n }\n\n const skipBtn = document.createElement('button');\n skipBtn.type = 'button';\n skipBtn.className = 'vd-spotlight-btn';\n skipBtn.textContent = 'Skip';\n skipBtn.addEventListener('click', () => this.stop());\n actions.appendChild(skipBtn);\n\n if (index < total - 1) {\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n nextBtn.textContent = 'Next';\n nextBtn.addEventListener('click', () => this.next());\n actions.appendChild(nextBtn);\n } else {\n const doneBtn = document.createElement('button');\n doneBtn.type = 'button';\n doneBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n doneBtn.textContent = 'Done';\n doneBtn.addEventListener('click', () => this.stop());\n actions.appendChild(doneBtn);\n }\n\n footer.appendChild(counter);\n footer.appendChild(actions);\n tooltip.appendChild(footer);\n\n // Position tooltip near target\n if (target) {\n requestAnimationFrame(() => {\n const rect = target.getBoundingClientRect();\n const tRect = tooltip.getBoundingClientRect();\n let top = rect.bottom + 12 + window.scrollY;\n let left = rect.left + (rect.width - tRect.width) / 2 + window.scrollX;\n\n // Keep in viewport\n left = Math.max(8, Math.min(left, window.innerWidth - tRect.width - 8));\n if (top + tRect.height > window.innerHeight + window.scrollY) {\n top = rect.top - tRect.height - 12 + window.scrollY;\n }\n\n tooltip.style.top = top + 'px';\n tooltip.style.left = left + 'px';\n });\n }\n\n document.dispatchEvent(new CustomEvent('spotlight:step', {\n detail: { index, step: index, total, data: step }\n }));\n },\n\n next: function () {\n if (this._currentStep < this._steps.length - 1) {\n this._currentStep++;\n this._showStep(this._currentStep);\n }\n },\n\n prev: function () {\n if (this._currentStep > 0) {\n this._currentStep--;\n this._showStep(this._currentStep);\n }\n },\n\n stop: function () {\n if (!this._active) return;\n\n const total = this._steps.length;\n const detail = {\n completedSteps: total === 0 ? 0 : Math.min(this._currentStep + 1, total),\n total,\n completed: total > 0 && this._currentStep >= total - 1\n };\n\n this._active = false;\n\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n if (this._elements.overlay && this._elements.overlay.parentNode) {\n this._elements.overlay.parentNode.removeChild(this._elements.overlay);\n }\n if (this._elements.tooltip && this._elements.tooltip.parentNode) {\n this._elements.tooltip.parentNode.removeChild(this._elements.tooltip);\n }\n\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n this._elements = {};\n this._steps = [];\n this._currentStep = 0;\n\n if (this._triggerElement && this._triggerElement.isConnected && typeof this._triggerElement.focus === 'function') {\n this._triggerElement.focus();\n }\n this._triggerElement = null;\n\n document.dispatchEvent(new CustomEvent('spotlight:end', { detail }));\n },\n\n destroyAll: function () {\n this.stop();\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('spotlight', Spotlight);\n }\n\n window.VanduoSpotlight = Spotlight;\n\n})();\n", "/**\n * Vanduo Framework - Music Player Component\n * HTML5 Audio-based music player with transport controls, volume,\n * and optional shuffle, seek bar, and playlist features.\n *\n * Options (passed to MusicPlayer.init or data-music-player-options):\n * tracks {Array} - [{name, url}] \u2014 required\n * volume {number} - Initial volume 0\u20131 (default 0.5)\n * shuffle {boolean} - Shuffle on init (default false)\n * showProgress {boolean} - Show seek/progress bar (default false)\n * showPlaylist {boolean} - Show expandable playlist panel (default false)\n * autoAdvance {boolean} - Auto-play next track on end (default true)\n *\n * Custom events (all bubble, dispatched on container):\n * musicplayer:play \u2014 playback started\n * musicplayer:pause \u2014 playback paused\n * musicplayer:trackchange \u2014 detail: { index, name, url }\n * musicplayer:volumechange \u2014 detail: { volume }\n * musicplayer:ended \u2014 last track ended (autoAdvance=false only)\n *\n * Programmatic API:\n * MusicPlayer.init(container?, options?)\n * MusicPlayer.play(container)\n * MusicPlayer.pause(container)\n * MusicPlayer.toggle(container)\n * MusicPlayer.next(container)\n * MusicPlayer.previous(container)\n * MusicPlayer.setVolume(container, value)\n * MusicPlayer.setTrack(container, index)\n * MusicPlayer.shuffle(container)\n * MusicPlayer.getState(container)\n * MusicPlayer.destroy(container)\n * MusicPlayer.destroyAll()\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fisher-Yates shuffle (returns new array).\n * @param {Array} arr\n * @returns {Array}\n */\n function shuffleArray(arr) {\n const shuffled = arr.slice();\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n const tmp = shuffled[i];\n shuffled[i] = shuffled[j];\n shuffled[j] = tmp;\n }\n return shuffled;\n }\n\n /**\n * Format seconds as m:ss.\n * @param {number} seconds\n * @returns {string}\n */\n function formatTime(seconds) {\n if (!isFinite(seconds) || seconds < 0) return '0:00';\n const m = Math.floor(seconds / 60);\n const s = Math.floor(seconds % 60);\n return m + ':' + (s < 10 ? '0' : '') + s;\n }\n\n /**\n * Set CSS background-size on a range input to visually fill the track.\n * @param {HTMLInputElement} input\n */\n function updateRangeFill(input) {\n const min = parseFloat(input.min) || 0;\n const max = parseFloat(input.max) || 1;\n const val = parseFloat(input.value) || 0;\n const pct = ((val - min) / (max - min)) * 100;\n input.style.setProperty('--fill', pct + '%');\n // Fallback inline gradient for browsers without ::-moz-range-progress\n input.style.backgroundImage =\n 'linear-gradient(to right, var(--music-player-track-fill, currentColor) 0%, ' +\n 'var(--music-player-track-fill, currentColor) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) 100%)';\n }\n\n /* \u2500\u2500\u2500 Phosphor icon helper (matches framework icon style) \u2500 */\n\n /**\n * Return an element (Phosphor icon).\n * @param {string} name\n * @returns {HTMLElement}\n */\n function icon(name) {\n const el = document.createElement('i');\n el.className = 'ph ph-' + name;\n el.setAttribute('aria-hidden', 'true');\n return el;\n }\n\n /* \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const MusicPlayer = {\n /** @type {Map} */\n instances: new Map(),\n\n /**\n * Default options.\n */\n defaults: {\n tracks: [],\n volume: 0.5,\n shuffle: false,\n showProgress: false,\n showPlaylist: false,\n autoAdvance: true,\n },\n\n /**\n * Auto-initialize all .vd-music-player / [data-music-player] elements.\n * Options can be provided via data-music-player-options (JSON string).\n */\n init: function () {\n document.querySelectorAll('.vd-music-player, [data-music-player]').forEach((el) => {\n if (this.instances.has(el)) return;\n\n let opts = {};\n const attr = el.getAttribute('data-music-player-options');\n if (attr) {\n try { opts = JSON.parse(attr); } catch (_) { /* ignore malformed JSON */ }\n }\n this.initPlayer(el, opts);\n });\n },\n\n /**\n * Initialize a single player element.\n * @param {HTMLElement} container\n * @param {Object} [options]\n */\n initPlayer: function (container, options) {\n const opts = Object.assign({}, this.defaults, options || {});\n\n // Validate and normalise tracks\n const rawTracks = Array.isArray(opts.tracks) ? opts.tracks : [];\n const tracks = rawTracks.filter((t) => t && typeof t.url === 'string' && t.url.trim());\n\n // Build shuffled working copy without mutating opts\n const trackList = opts.shuffle ? shuffleArray(tracks) : tracks.slice();\n\n /* \u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const state = {\n tracks: trackList,\n originalTracks: tracks.slice(),\n currentIndex: 0,\n isPlaying: false,\n volume: Math.max(0, Math.min(1, opts.volume)),\n shuffle: opts.shuffle,\n showProgress: opts.showProgress,\n showPlaylist: opts.showPlaylist,\n autoAdvance: opts.autoAdvance,\n audio: null,\n };\n\n /* \u2500\u2500 Audio element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const audio = new Audio();\n audio.volume = state.volume;\n audio.preload = 'metadata';\n state.audio = audio;\n\n /* \u2500\u2500 Build DOM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n this._buildDOM(container, state);\n\n // Grab references after DOM build\n const refs = {\n btnPlay: container.querySelector('.vd-music-player-btn-play'),\n btnPrev: container.querySelector('.vd-music-player-btn-prev'),\n btnNext: container.querySelector('.vd-music-player-btn-next'),\n btnShuffle: container.querySelector('.vd-music-player-btn-shuffle'),\n btnPlaylist: container.querySelector('.vd-music-player-btn-playlist'),\n trackName: container.querySelector('.vd-music-player-track-name'),\n volumeSlider: container.querySelector('.vd-music-player-volume-slider'),\n volumeIcon: container.querySelector('.vd-music-player-volume-icon'),\n progressBar: container.querySelector('.vd-music-player-progress-bar'),\n timeElapsed: container.querySelector('.vd-music-player-time-elapsed'),\n timeDuration: container.querySelector('.vd-music-player-time-duration'),\n playlistPanel: container.querySelector('.vd-music-player-playlist'),\n };\n\n /* \u2500\u2500 Internal render helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const renderPlayIcon = () => {\n const btn = refs.btnPlay;\n if (!btn) return;\n btn.innerHTML = '';\n btn.appendChild(icon(state.isPlaying ? 'pause' : 'play'));\n btn.setAttribute('aria-label', state.isPlaying ? 'Pause' : 'Play');\n btn.classList.toggle('is-active', state.isPlaying);\n };\n\n const renderTrackName = () => {\n const el = refs.trackName;\n if (!el) return;\n const track = state.tracks[state.currentIndex];\n if (track) {\n el.textContent = track.name || 'Unknown Track';\n el.classList.remove('is-idle');\n } else {\n el.textContent = 'No tracks loaded';\n el.classList.add('is-idle');\n }\n };\n\n const renderVolumeIcon = () => {\n const el = refs.volumeIcon;\n if (!el) return;\n el.innerHTML = '';\n const v = state.volume;\n const name = v === 0 ? 'speaker-none' : v < 0.5 ? 'speaker-low' : 'speaker-high';\n el.appendChild(icon(name));\n };\n\n const renderShuffleBtn = () => {\n const btn = refs.btnShuffle;\n if (!btn) return;\n btn.classList.toggle('is-active', state.shuffle);\n btn.setAttribute('aria-pressed', state.shuffle ? 'true' : 'false');\n };\n\n const renderPlaylistItems = () => {\n const panel = refs.playlistPanel;\n if (!panel) return;\n panel.innerHTML = '';\n state.tracks.forEach((track, i) => {\n const item = document.createElement('button');\n item.className =\n 'vd-music-player-playlist-item' + (i === state.currentIndex ? ' is-active' : '');\n item.type = 'button';\n item.setAttribute('data-index', String(i));\n item.setAttribute('aria-current', i === state.currentIndex ? 'true' : 'false');\n\n const num = document.createElement('span');\n num.className = 'vd-music-player-playlist-num';\n num.textContent = String(i + 1);\n\n const name = document.createElement('span');\n name.className = 'vd-music-player-playlist-name';\n name.textContent = track.name || 'Track ' + (i + 1);\n\n item.appendChild(num);\n item.appendChild(name);\n panel.appendChild(item);\n });\n };\n\n const renderProgress = () => {\n const bar = refs.progressBar;\n if (!bar || !audio.duration) return;\n const pct = (audio.currentTime / audio.duration) * 100;\n bar.value = String(pct);\n updateRangeFill(bar);\n if (refs.timeElapsed) refs.timeElapsed.textContent = formatTime(audio.currentTime);\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n };\n\n /* \u2500\u2500 Load track \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const loadTrack = (index, autoPlay) => {\n const track = state.tracks[index];\n if (!track) return;\n state.currentIndex = index;\n audio.src = track.url;\n renderTrackName();\n renderPlaylistItems();\n\n // Reset progress\n if (refs.progressBar) {\n refs.progressBar.value = '0';\n updateRangeFill(refs.progressBar);\n }\n if (refs.timeElapsed) refs.timeElapsed.textContent = '0:00';\n if (refs.timeDuration) refs.timeDuration.textContent = '0:00';\n\n container.dispatchEvent(\n new CustomEvent('musicplayer:trackchange', {\n bubbles: true,\n detail: { index, name: track.name, url: track.url },\n })\n );\n\n if (autoPlay) {\n audio.play().catch(() => { /* browser may block autoplay */ });\n }\n };\n\n /* \u2500\u2500 Audio event listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const cleanupFunctions = [];\n\n const onPlay = () => {\n state.isPlaying = true;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:play', { bubbles: true }));\n };\n\n const onPause = () => {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:pause', { bubbles: true }));\n };\n\n const onEnded = () => {\n if (state.autoAdvance && state.tracks.length > 1) {\n const next = (state.currentIndex + 1) % state.tracks.length;\n loadTrack(next, true);\n } else {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:ended', { bubbles: true }));\n }\n };\n\n const onTimeUpdate = () => {\n if (state.showProgress) renderProgress();\n };\n\n const onLoadedMetadata = () => {\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n if (refs.progressBar) {\n refs.progressBar.max = '100';\n updateRangeFill(refs.progressBar);\n }\n };\n\n audio.addEventListener('play', onPlay);\n audio.addEventListener('pause', onPause);\n audio.addEventListener('ended', onEnded);\n audio.addEventListener('timeupdate', onTimeUpdate);\n audio.addEventListener('loadedmetadata', onLoadedMetadata);\n cleanupFunctions.push(() => {\n audio.removeEventListener('play', onPlay);\n audio.removeEventListener('pause', onPause);\n audio.removeEventListener('ended', onEnded);\n audio.removeEventListener('timeupdate', onTimeUpdate);\n audio.removeEventListener('loadedmetadata', onLoadedMetadata);\n audio.pause();\n audio.src = '';\n });\n\n /* \u2500\u2500 Control button listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n if (refs.btnPlay) {\n const handler = () => {\n if (!audio.src && state.tracks.length) loadTrack(state.currentIndex, false);\n if (state.isPlaying) {\n audio.pause();\n } else {\n audio.play().catch(() => {});\n }\n };\n refs.btnPlay.addEventListener('click', handler);\n cleanupFunctions.push(() => refs.btnPlay.removeEventListener('click', handler));\n\n // Keyboard: Space / Enter (already native for `;\n }\n\n // Generate neutral color swatches\n let neutralSwatches = '';\n for (const [key, value] of Object.entries(this.NEUTRAL_COLORS)) {\n neutralSwatches += ``;\n }\n\n // Generate radius buttons\n let radiusButtons = '';\n this.RADIUS_OPTIONS.forEach(r => {\n radiusButtons += ``;\n });\n\n // Generate font options\n let fontOptions = '';\n for (const [key, value] of Object.entries(this.FONT_OPTIONS)) {\n fontOptions += ``;\n }\n\n return `\n
    \n

    Customize Theme

    \n \n
    \n
    \n\n
    \n \n
    \n ${primarySwatches}\n
    \n
    \n
    \n \n
    \n ${neutralSwatches}\n
    \n
    \n
    \n \n
    \n ${radiusButtons}\n
    \n
    \n
    \n \n \n
    \n
    \n
    \n \n
    \n `;\n },\n\n /**\n * Bind event listeners\n */\n /**\n * Check whether the current primary color is one of the auto-defaults\n * (i.e. the user hasn't explicitly picked a non-default color).\n */\n isUsingDefaultPrimary: function () {\n return this.state.primary === this.DEFAULTS.PRIMARY_LIGHT ||\n this.state.primary === this.DEFAULTS.PRIMARY_DARK;\n },\n\n /**\n * When primary is still one of the auto-default palette keys (black/amber) but\n * localStorage was written under a different theme (or OS changed in system mode),\n * align in-memory state before applyAllPreferences runs \u2014 avoids amber+light / black+dark drift.\n */\n _normalizeDefaultPrimaryIfStaleWithStoredTheme: function () {\n if (!this.isUsingDefaultPrimary()) {\n return;\n }\n const expected = this.getDefaultPrimary(this.state.theme);\n if (this.state.primary !== expected) {\n this.state.primary = expected;\n }\n },\n\n bindEvents: function () {\n // Trigger click - bind to any trigger button\n if (this.elements.trigger) {\n this.addListener(this.elements.trigger, 'click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggle();\n });\n }\n\n this.bindPanelEvents();\n\n // Listen for OS dark/light changes so we can swap the default primary\n if (window.matchMedia) {\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const handler = () => {\n if (this.state.theme === 'system' && this.isUsingDefaultPrimary()) {\n const newDefault = this.getDefaultPrimary('system');\n if (newDefault !== this.state.primary) {\n this.applyPrimary(newDefault);\n this.updateUI();\n }\n }\n };\n mq.addEventListener('change', handler);\n this._cleanup.push(() => mq.removeEventListener('change', handler));\n }\n\n // Close on outside click\n this.addListener(document, 'click', (e) => {\n if (this.state.isOpen && this.elements.customizer && !this.elements.customizer.contains(e.target)) {\n this.close();\n }\n });\n\n // Close on Escape key\n this.addListener(document, 'keydown', (e) => {\n if (e.key === 'Escape' && this.state.isOpen) {\n this.close();\n }\n });\n },\n\n /**\n * Toggle panel open/close\n */\n toggle: function () {\n if (this.state.isOpen) {\n this.close();\n } else {\n this.open();\n }\n },\n\n /**\n * Open the panel\n */\n open: function () {\n this.state.isOpen = true;\n\n // Ensure panel is positioned correctly before opening\n this.positionPanel();\n\n if (this.elements.panel) {\n this.elements.panel.classList.add('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'true');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.add('is-active');\n }\n\n this.dispatchEvent('panel-open', { isOpen: true });\n },\n\n /**\n * Close the panel\n */\n close: function () {\n this.state.isOpen = false;\n\n if (this.elements.panel) {\n this.elements.panel.classList.remove('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'false');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.remove('is-active');\n }\n\n this.dispatchEvent('panel-close', { isOpen: false });\n },\n\n /**\n * Update UI to reflect current state\n */\n updateUI: function () {\n if (!this.elements.panel) return;\n\n // Update primary color swatches\n this.elements.panel.querySelectorAll('[data-color]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.color === this.state.primary);\n });\n\n // Update neutral color swatches\n this.elements.panel.querySelectorAll('[data-neutral]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.neutral === this.state.neutral);\n });\n\n // Update radius buttons\n this.elements.panel.querySelectorAll('[data-radius]').forEach(btn => {\n btn.classList.toggle('is-active', btn.dataset.radius === this.state.radius);\n });\n\n // Update font selector\n const fontSelect = this.elements.panel.querySelector('[data-customizer-font]');\n if (fontSelect) {\n fontSelect.value = this.state.font;\n }\n\n },\n\n /**\n * Reset all preferences to defaults\n */\n reset: function () {\n this.applyTheme(this.DEFAULTS.THEME);\n this.applyPrimary(this.getDefaultPrimary(this.DEFAULTS.THEME));\n this.applyNeutral(this.DEFAULTS.NEUTRAL);\n this.applyRadius(this.DEFAULTS.RADIUS);\n this.applyFont(this.DEFAULTS.FONT);\n this.updateUI();\n\n this.dispatchEvent('reset', { state: { ...this.state } });\n },\n\n /**\n * Get current state\n */\n getState: function () {\n return { ...this.state };\n },\n\n /**\n * Programmatically set preferences\n */\n setPreferences: function (prefs) {\n if (prefs.primary) this.applyPrimary(prefs.primary);\n if (prefs.neutral) this.applyNeutral(prefs.neutral);\n if (prefs.radius) this.applyRadius(prefs.radius);\n if (prefs.font) this.applyFont(prefs.font);\n if (prefs.theme) this.applyTheme(prefs.theme);\n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n destroyAll: function () {\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n\n if (this.elements.panel) {\n this.elements.panel.removeAttribute('data-customizer-initialized');\n }\n\n this.close();\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeCustomizer', ThemeCustomizer);\n }\n\n // Expose globally for convenience\n window.ThemeCustomizer = ThemeCustomizer;\n})();\n", "/**\n * Vanduo Framework - Theme Switcher\n * Handles light/dark/system theme toggling and persistence\n */\n\n(function () {\n 'use strict';\n\n const ThemeSwitcher = {\n isInitialized: false,\n _mediaQuery: null,\n _onMediaChange: null,\n\n init: function () {\n this.STORAGE_KEY = 'vanduo-theme-preference';\n this.state = {\n preference: this.getPreference() // 'light', 'dark', or 'system'\n };\n\n if (this.isInitialized) {\n this.applyTheme();\n this.renderUI();\n this.updateUI();\n return;\n }\n\n this.isInitialized = true;\n\n this.applyTheme();\n this.listenForSystemChanges();\n this.renderUI();\n\n console.log('Vanduo Theme Switcher initialized');\n },\n\n getPreference: function () {\n return this.getStorageValue(this.STORAGE_KEY, 'system');\n },\n\n setPreference: function (pref) {\n this.state.preference = pref;\n this.setStorageValue(this.STORAGE_KEY, pref);\n this.applyTheme();\n \n // Coordinate with ThemeCustomizer for primary color swap if available\n // Check _isApplying flag to prevent circular updates\n if (window.ThemeCustomizer && window.ThemeCustomizer.applyTheme && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme(pref);\n }\n \n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n applyTheme: function () {\n const pref = this.state.preference;\n\n if (pref === 'system') {\n // When in system mode, we remove the data attribute to let the media query take over\n // or we can explicitly set it. Explicitly setting it ensures consistency if we rely on [data-theme]\n // But if we rely on @media in CSS, we might want to remove attributes.\n // However, our CSS strategy uses :root:not([data-theme=\"light\"]) inside media query for system dark fallback\n // which is a bit complex.\n\n // Simpler approach: \n // If preference is system, REMOVE data-theme attribute. Let CSS media queries handle it.\n document.documentElement.removeAttribute('data-theme');\n } else {\n document.documentElement.setAttribute('data-theme', pref);\n }\n },\n\n listenForSystemChanges: function () {\n if (this._mediaQuery && this._onMediaChange) {\n return;\n }\n\n this._mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n this._onMediaChange = _e => {\n if (this.state.preference === 'system') {\n // Re-apply (effectively just to ensure consistency, though removing attribute usually suffices)\n this.applyTheme();\n // Keep default primary (black/amber) aligned when OS scheme changes while in system mode\n if (window.ThemeCustomizer && typeof window.ThemeCustomizer.applyTheme === 'function' && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme('system');\n }\n }\n };\n this._mediaQuery.addEventListener('change', this._onMediaChange);\n },\n\n // Helper to facilitate UI creation if needed, though often UI is in HTML\n renderUI: function () {\n // Look for any uninitialized theme toggles\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.getAttribute('data-theme-initialized') === 'true') {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n }\n return;\n }\n\n // Simplified UI Binding - assumes a select or a button cycle\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n const onChange = (e) => {\n this.setPreference(e.target.value);\n };\n toggle.addEventListener('change', onChange);\n toggle._themeToggleHandler = onChange;\n } else {\n // Button implementation (cycle)\n const onClick = () => {\n const modes = ['system', 'light', 'dark'];\n const nextIndex = (modes.indexOf(this.state.preference) + 1) % modes.length;\n this.setPreference(modes[nextIndex]);\n };\n toggle.addEventListener('click', onClick);\n toggle._themeToggleHandler = onClick;\n }\n // Mark as initialized\n toggle.setAttribute('data-theme-initialized', 'true');\n });\n },\n\n updateUI: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n } else {\n // Update button text/icon if needed\n // e.g. toggle.textContent = this.state.preference;\n // For now, assume the user handles visual state or generic text\n\n // If there is an icon or text span inside, update it\n const span = toggle.querySelector('.theme-current-label');\n if (span) {\n span.textContent = this.state.preference.charAt(0).toUpperCase() + this.state.preference.slice(1);\n }\n }\n });\n },\n\n destroyAll: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"][data-theme-initialized=\"true\"]');\n toggles.forEach(toggle => {\n if (toggle._themeToggleHandler) {\n const eventName = toggle.tagName === 'SELECT' ? 'change' : 'click';\n toggle.removeEventListener(eventName, toggle._themeToggleHandler);\n delete toggle._themeToggleHandler;\n }\n toggle.removeAttribute('data-theme-initialized');\n });\n\n if (this._mediaQuery && this._onMediaChange) {\n this._mediaQuery.removeEventListener('change', this._onMediaChange);\n }\n\n this._mediaQuery = null;\n this._onMediaChange = null;\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeSwitcher', ThemeSwitcher);\n }\n})();\n", "/**\n * Vanduo Framework - Toast Component\n * Popup notifications for user feedback\n */\n\n(function() {\n 'use strict';\n\n /**\n * Toast Component\n */\n const Toast = {\n // Default options\n defaults: {\n position: 'top-right',\n duration: 5000,\n dismissible: true,\n showProgress: true,\n pauseOnHover: true\n },\n\n // Container cache\n containers: {},\n\n /**\n * Get or create a toast container for a position\n * @param {string} position - Container position\n * @returns {HTMLElement} Toast container element\n */\n getContainer: function(position) {\n if (this.containers[position]) {\n return this.containers[position];\n }\n\n const container = document.createElement('div');\n container.className = `vd-toast-container vd-toast-container-${position}`;\n container.setAttribute('role', 'status');\n container.setAttribute('aria-live', 'polite');\n container.setAttribute('aria-atomic', 'false');\n document.body.appendChild(container);\n this.containers[position] = container;\n\n return container;\n },\n\n /**\n * Show a toast notification\n * @param {Object|string} options - Toast options or message string\n * @param {string} [type] - Toast type (success, error, warning, info)\n * @param {number} [duration] - Auto-dismiss duration in ms\n * @returns {HTMLElement} Toast element\n */\n show: function(options, type, duration) {\n // Support simple API: Toast.show('Message', 'success', 3000)\n if (typeof options === 'string') {\n options = {\n message: options,\n type: type,\n duration: duration\n };\n }\n\n const config = Object.assign({}, this.defaults, options);\n const container = this.getContainer(config.position);\n\n // Create toast element\n const toast = document.createElement('div');\n toast.className = 'vd-toast';\n\n if (config.type) {\n toast.classList.add(`vd-toast-${config.type}`);\n }\n\n if (config.solid) {\n toast.classList.add('vd-toast-solid');\n }\n\n if (config.showProgress && config.duration > 0) {\n toast.classList.add('vd-toast-with-progress');\n }\n\n // Build toast content\n let html = '';\n\n // Icon (sanitize custom icons, default icons are trusted SVG)\n if (config.icon) {\n const safeIcon = typeof sanitizeHtml === 'function' ? sanitizeHtml(config.icon) : escapeHtml(config.icon);\n html += `${safeIcon}`;\n } else if (config.type) {\n html += `${this.getDefaultIcon(config.type)}`;\n }\n\n // Local escape helper \u2014 guarantees HTML-safe output even if the\n // global escapeHtml utility is not loaded in the current bundle.\n const _esc = typeof escapeHtml === 'function'\n ? escapeHtml\n : function (s) {\n const d = document.createElement('div');\n d.appendChild(document.createTextNode(s));\n return d.innerHTML;\n };\n\n // Content (escape text to prevent injection)\n html += '
    ';\n if (config.title) {\n html += `
    ${_esc(String(config.title))}
    `;\n }\n if (config.message) {\n html += `
    ${_esc(String(config.message))}
    `;\n }\n html += '
    ';\n\n // Close button\n if (config.dismissible) {\n html += '';\n }\n\n // Progress bar\n if (config.showProgress && config.duration > 0) {\n const safeDuration = parseInt(config.duration, 10) || 0;\n html += `
    `;\n }\n\n toast.innerHTML = html;\n\n // Add to container\n container.appendChild(toast);\n\n toast._toastCleanup = [];\n\n // Set up close button handler\n if (config.dismissible) {\n const closeBtn = toast.querySelector('.vd-toast-close');\n const onClose = () => {\n this.dismiss(toast);\n };\n closeBtn.addEventListener('click', onClose);\n toast._toastCleanup.push(() => closeBtn.removeEventListener('click', onClose));\n }\n\n // Pause on hover\n let timeoutId = null;\n let remainingTime = config.duration;\n let startTime = null;\n\n const startTimer = () => {\n if (config.duration > 0) {\n startTime = Date.now();\n timeoutId = setTimeout(() => {\n this.dismiss(toast);\n }, remainingTime);\n toast._toastTimeoutId = timeoutId;\n\n // Resume progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'running';\n }\n }\n };\n\n const pauseTimer = () => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n timeoutId = null;\n toast._toastTimeoutId = null;\n remainingTime -= Date.now() - startTime;\n\n // Pause progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'paused';\n }\n }\n };\n\n if (config.pauseOnHover) {\n toast.addEventListener('mouseenter', pauseTimer);\n toast.addEventListener('mouseleave', startTimer);\n toast._toastCleanup.push(\n () => toast.removeEventListener('mouseenter', pauseTimer),\n () => toast.removeEventListener('mouseleave', startTimer)\n );\n }\n\n // Trigger enter animation\n requestAnimationFrame(() => {\n toast.classList.add('is-visible');\n startTimer();\n });\n\n // Store config on element for later access\n toast._toastConfig = config;\n\n // Dispatch show event\n const showEvent = new CustomEvent('toast:show', {\n bubbles: true,\n detail: { toast, config }\n });\n toast.dispatchEvent(showEvent);\n\n return toast;\n },\n\n /**\n * Dismiss a toast\n * @param {HTMLElement} toast - Toast element to dismiss\n */\n dismiss: function(toast) {\n if (!toast || toast.classList.contains('is-exiting')) return;\n\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n toast._toastTimeoutId = null;\n }\n\n toast.classList.remove('is-visible');\n toast.classList.add('is-exiting');\n\n // Dispatch dismiss event\n const dismissEvent = new CustomEvent('toast:dismiss', {\n bubbles: true,\n detail: { toast }\n });\n toast.dispatchEvent(dismissEvent);\n\n // Remove after animation\n const handleTransitionEnd = () => {\n toast.removeEventListener('transitionend', handleTransitionEnd);\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n };\n\n toast.addEventListener('transitionend', handleTransitionEnd);\n\n // Fallback removal if transition doesn't fire\n setTimeout(() => {\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n }, 400);\n },\n\n /**\n * Destroy all toasts and containers\n */\n destroyAll: function() {\n Object.keys(this.containers).forEach(position => {\n const container = this.containers[position];\n if (!container) return;\n\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => {\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n }\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n });\n\n if (container.parentElement) {\n container.parentElement.removeChild(container);\n }\n });\n\n this.containers = {};\n },\n\n /**\n * Dismiss all toasts\n * @param {string} [position] - Optional position to clear (clears all if not specified)\n */\n dismissAll: function(position) {\n if (position && this.containers[position]) {\n const toasts = this.containers[position].querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n } else {\n Object.values(this.containers).forEach(container => {\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n });\n }\n },\n\n /**\n * Get default icon SVG for a type\n * @param {string} type - Toast type\n * @returns {string} SVG icon markup\n */\n getDefaultIcon: function(type) {\n const icons = {\n success: '',\n error: '',\n warning: '',\n info: ''\n };\n\n return icons[type] || '';\n },\n\n /**\n * Convenience methods for common toast types\n */\n success: function(message, options) {\n return this.show(Object.assign({ message, type: 'success' }, options));\n },\n\n error: function(message, options) {\n return this.show(Object.assign({ message, type: 'error' }, options));\n },\n\n warning: function(message, options) {\n return this.show(Object.assign({ message, type: 'warning' }, options));\n },\n\n info: function(message, options) {\n return this.show(Object.assign({ message, type: 'info' }, options));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('toast', Toast);\n }\n\n // Also expose globally for convenience\n window.Toast = Toast;\n\n})();\n", "/**\n * Vanduo Framework - Tooltips Component\n * JavaScript functionality for tooltips\n */\n\n(function () {\n 'use strict';\n\n /**\n * Tooltips Component\n */\n const Tooltips = {\n tooltips: new Map(),\n delayTimers: new Map(),\n\n /**\n * Sanitize HTML \u2014 delegates to shared sanitizeHtml from helpers.js\n * @param {string} input\n * @returns {string} sanitized HTML\n */\n sanitizeHtml: function (input) {\n if (typeof sanitizeHtml === 'function') {\n return sanitizeHtml(input);\n }\n // Fallback: strip all HTML\n const div = document.createElement('div');\n div.textContent = input || '';\n return div.innerHTML;\n },\n\n /**\n * Initialize tooltips\n */\n init: function () {\n const elements = document.querySelectorAll('[data-tooltip], [data-tooltip-html]');\n\n elements.forEach(element => {\n if (this.tooltips.has(element)) {\n return;\n }\n this.initTooltip(element);\n });\n },\n\n /**\n * Initialize a single tooltip\n * @param {HTMLElement} element - Element with tooltip\n */\n initTooltip: function (element) {\n const tooltip = this.createTooltip(element);\n const cleanupFunctions = [];\n\n // Show on hover/focus\n const enterHandler = () => { this.showTooltip(element, tooltip); };\n const leaveHandler = () => { this.hideTooltip(element, tooltip); };\n const focusHandler = () => { this.showTooltip(element, tooltip); };\n const blurHandler = () => { this.hideTooltip(element, tooltip); };\n\n element.addEventListener('mouseenter', enterHandler);\n element.addEventListener('mouseleave', leaveHandler);\n element.addEventListener('focus', focusHandler);\n element.addEventListener('blur', blurHandler);\n\n cleanupFunctions.push(\n () => element.removeEventListener('mouseenter', enterHandler),\n () => element.removeEventListener('mouseleave', leaveHandler),\n () => element.removeEventListener('focus', focusHandler),\n () => element.removeEventListener('blur', blurHandler)\n );\n\n this.tooltips.set(element, { tooltip, cleanup: cleanupFunctions });\n },\n\n /**\n * Create tooltip element\n * @param {HTMLElement} element - Target element\n * @returns {HTMLElement} Tooltip element\n */\n createTooltip: function (element) {\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-tooltip';\n tooltip.setAttribute('role', 'tooltip');\n tooltip.setAttribute('aria-hidden', 'true');\n\n // Generate unique ID and link via aria-describedby\n const tooltipId = 'tooltip-' + Math.random().toString(36).substr(2, 9);\n tooltip.id = tooltipId;\n element.setAttribute('aria-describedby', tooltipId);\n\n // Get content\n const htmlContent = element.dataset.tooltipHtml;\n const textContent = element.dataset.tooltip;\n\n if (htmlContent) {\n tooltip.innerHTML = this.sanitizeHtml(htmlContent);\n tooltip.classList.add('vd-tooltip-html');\n } else if (textContent) {\n tooltip.textContent = textContent;\n }\n\n // Get placement\n const placement = element.dataset.tooltipPlacement || element.dataset.placement || 'top';\n tooltip.setAttribute('data-placement', placement);\n tooltip.classList.add(`vd-tooltip-${placement}`);\n\n // Get variant\n if (element.dataset.tooltipVariant) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipVariant}`);\n }\n\n // Get size\n if (element.dataset.tooltipSize) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipSize}`);\n }\n\n // Get delay\n const delay = parseInt(element.dataset.tooltipDelay) || 0;\n tooltip.dataset.delay = delay;\n\n document.body.appendChild(tooltip);\n\n return tooltip;\n },\n\n /**\n * Show tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n showTooltip: function (element, tooltip) {\n const delay = parseInt(tooltip.dataset.delay) || 0;\n\n if (delay > 0) {\n const timer = setTimeout(() => {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }, delay);\n this.delayTimers.set(element, timer);\n } else {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }\n },\n\n /**\n * Hide tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n hideTooltip: function (element, tooltip) {\n // Clear delay timer if exists\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n tooltip.classList.remove('is-visible');\n tooltip.setAttribute('aria-hidden', 'true');\n },\n\n /**\n * Position tooltip relative to element\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n positionTooltip: function (element, tooltip) {\n const placement = tooltip.dataset.placement || 'top';\n const rect = element.getBoundingClientRect();\n const tooltipRect = tooltip.getBoundingClientRect();\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;\n\n let top = 0;\n let left = 0;\n\n switch (placement) {\n case 'top':\n top = rect.top + scrollTop - tooltipRect.height - 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'bottom':\n top = rect.bottom + scrollTop + 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'left':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.left + scrollLeft - tooltipRect.width - 8;\n break;\n case 'right':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.right + scrollLeft + 8;\n break;\n }\n\n // Prevent overflow\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const padding = 8;\n\n if (left < padding) {\n left = padding;\n } else if (left + tooltipRect.width > viewportWidth - padding) {\n left = viewportWidth - tooltipRect.width - padding;\n }\n\n if (top < scrollTop + padding) {\n top = scrollTop + padding;\n } else if (top + tooltipRect.height > scrollTop + viewportHeight - padding) {\n top = scrollTop + viewportHeight - tooltipRect.height - padding;\n }\n\n // Use single style assignment with transform for better performance\n tooltip.style.cssText = `position: absolute; top: 0; left: 0; transform: translate(${left}px, ${top}px);`;\n },\n\n /**\n * Show tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n show: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.showTooltip(el, tooltip);\n }\n },\n\n /**\n * Hide tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n hide: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.hideTooltip(el, tooltip);\n }\n },\n\n /**\n * Update tooltip content\n * @param {HTMLElement|string} element - Target element or selector\n * @param {string} content - New content\n * @param {boolean} isHtml - Whether content is HTML\n */\n update: function (element, content, isHtml = false) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n if (isHtml) {\n tooltip.innerHTML = this.sanitizeHtml(content);\n tooltip.classList.add('vd-tooltip-html');\n } else {\n tooltip.textContent = content;\n tooltip.classList.remove('vd-tooltip-html');\n }\n }\n },\n\n /**\n * Destroy a tooltip instance and clean up\n * @param {HTMLElement} element - Element with tooltip\n */\n destroy: function (element) {\n const data = this.tooltips.get(element);\n if (!data) return;\n\n // Clear any pending timer\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n data.cleanup.forEach(fn => fn());\n\n // Remove tooltip element from DOM\n if (data.tooltip && data.tooltip.parentNode) {\n data.tooltip.parentNode.removeChild(data.tooltip);\n }\n\n this.tooltips.delete(element);\n },\n\n /**\n * Destroy all tooltip instances\n */\n destroyAll: function () {\n this.tooltips.forEach((data, element) => {\n this.destroy(element);\n });\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tooltips', Tooltips);\n }\n\n // Expose globally\n window.VanduoTooltips = Tooltips;\n\n})();\n", "/**\n * Vanduo Framework - Search Component\n * Client-side search functionality for content pages\n * \n * @example Basic usage (initialize with defaults)\n * // HTML:\n * //
    \n * // \n * //
    \n * //
    \n * \n * @example Custom configuration\n * var search = Search.create({\n * containerSelector: '.my-search',\n * contentSelector: 'article[id]',\n * titleSelector: 'h2, h3',\n * maxResults: 5,\n * onSelect: function(result) {\n * console.log('Selected:', result.title);\n * }\n * });\n * \n * @example With custom data source\n * var search = Search.create({\n * containerSelector: '.my-search',\n * data: [\n * { id: 'item1', title: 'First Item', content: 'Description...', category: 'Category A' },\n * { id: 'item2', title: 'Second Item', content: 'Description...', category: 'Category B' }\n * ]\n * });\n */\n\n(function() {\n 'use strict';\n\n /**\n * Default configuration\n */\n const DEFAULTS = {\n // Behavior\n minQueryLength: 2,\n maxResults: 10,\n debounceMs: 150,\n highlightTag: 'mark',\n keyboardShortcut: true, // Enable Cmd/Ctrl+K shortcut\n \n // Selectors (for DOM-based indexing)\n containerSelector: '.vd-doc-search',\n inputSelector: '.vd-doc-search-input',\n resultsSelector: '.vd-doc-search-results',\n contentSelector: '.doc-content section[id]',\n titleSelector: '.demo-title, h2, h3',\n navSelector: '.doc-nav-link',\n sectionSelector: '.doc-nav-section',\n \n // Content extraction\n excludeFromContent: 'pre, code, script, style',\n maxContentLength: 500,\n \n // Custom data source (alternative to DOM indexing)\n data: null,\n \n // Category icons mapping\n categoryIcons: {\n 'getting-started': 'ph-rocket-launch',\n 'core': 'ph-cube',\n 'components': 'ph-puzzle-piece',\n 'interactive': 'ph-cursor-click',\n 'data-display': 'ph-table',\n 'feedback': 'ph-bell',\n 'meta': 'ph-info',\n 'default': 'ph-file-text'\n },\n \n // Callbacks\n onSelect: null, // function(result) - called when result is selected\n onSearch: null, // function(query, results) - called after search\n onOpen: null, // function() - called when results open\n onClose: null, // function() - called when results close\n \n // Text customization\n emptyTitle: 'No results found',\n emptyText: 'Try different keywords or check spelling',\n placeholder: 'Search...'\n };\n\n /**\n * Search Component Factory\n * Creates a new search instance with the given configuration\n * \n * @param {Object} options - Configuration options\n * @returns {Object} Search instance\n */\n function createSearch(options) {\n const config = Object.assign({}, DEFAULTS, options || {});\n \n // Instance state\n const state = {\n initialized: false,\n index: [],\n results: [],\n activeIndex: -1,\n isOpen: false,\n query: '',\n container: null,\n input: null,\n resultsContainer: null,\n debounceTimer: null,\n boundHandlers: {}\n };\n\n function safeInvokeCallback(name, fn, ...args) {\n try {\n fn(...args);\n } catch (error) {\n console.warn('[Vanduo Search] Callback error in \"' + name + '\":', error);\n }\n }\n\n function setResultsHtml(html) {\n if (!state.resultsContainer) return;\n try {\n state.resultsContainer.innerHTML = html;\n } catch (error) {\n console.warn('[Vanduo Search] Failed to render results:', error);\n }\n }\n\n /**\n * Initialize the search component\n * Idempotent \u2014 safe to call more than once on the same instance.\n * Returns the instance on success, null if required DOM elements are missing.\n */\n function init() {\n if (state.initialized) {\n return instance;\n }\n\n state.container = document.querySelector(config.containerSelector);\n if (!state.container) {\n state.initialized = false;\n return null;\n }\n\n state.input = state.container.querySelector(config.inputSelector);\n state.resultsContainer = state.container.querySelector(config.resultsSelector);\n\n if (!state.input || !state.resultsContainer) {\n state.initialized = false;\n return null;\n }\n\n // Set placeholder if configured\n if (config.placeholder) {\n state.input.setAttribute('placeholder', config.placeholder);\n }\n\n // Build search index\n buildIndex();\n\n // Bind events\n bindEvents();\n\n // Set up ARIA attributes\n setupAria();\n\n state.initialized = true;\n return instance;\n }\n\n /**\n * Build search index from DOM or custom data\n */\n function buildIndex() {\n state.index = [];\n \n // Use custom data if provided\n if (config.data && Array.isArray(config.data)) {\n config.data.forEach(function(item) {\n state.index.push({\n id: item.id || slugify(item.title),\n title: item.title || '',\n category: item.category || '',\n categorySlug: slugify(item.category || ''),\n content: item.content || '',\n keywords: item.keywords || extractKeywordsFromText(item.title + ' ' + item.content),\n url: item.url || '#' + (item.id || slugify(item.title)),\n icon: item.icon || ''\n });\n });\n return;\n }\n\n // Build from DOM\n const sections = document.querySelectorAll(config.contentSelector);\n const categoryMap = buildCategoryMap();\n\n sections.forEach(function(section) {\n const id = section.id;\n if (!id) return;\n\n const titleEl = section.querySelector(config.titleSelector);\n const title = titleEl ? titleEl.textContent.replace(/v[\\d.]+/g, '').trim() : id;\n const category = categoryMap[id] || 'Documentation';\n const content = extractContent(section);\n const keywords = extractKeywords(section, title);\n const iconEl = titleEl ? titleEl.querySelector('i.ph') : null;\n let icon = '';\n if (iconEl && iconEl.classList) {\n for (let ci = 0; ci < iconEl.classList.length; ci++) {\n if (iconEl.classList[ci].indexOf('ph-') === 0) {\n icon = iconEl.classList[ci];\n break;\n }\n }\n }\n\n state.index.push({\n id: id,\n title: title,\n category: category,\n categorySlug: slugify(category),\n content: content,\n keywords: keywords,\n url: '#' + id,\n icon: icon\n });\n });\n }\n\n /**\n * Build a map of section IDs to their categories\n */\n function buildCategoryMap() {\n const map = {};\n let currentCategory = 'Documentation';\n const navItems = document.querySelectorAll(config.navSelector + ', ' + config.sectionSelector);\n\n navItems.forEach(function(item) {\n if (item.classList.contains('doc-nav-section')) {\n currentCategory = item.textContent.trim();\n } else {\n const href = item.getAttribute('href');\n if (href && href.startsWith('#')) {\n const id = href.substring(1);\n map[id] = currentCategory;\n }\n }\n });\n\n return map;\n }\n\n /**\n * Extract searchable content from a section\n */\n function extractContent(section) {\n const clone = section.cloneNode(true);\n \n const toRemove = clone.querySelectorAll(config.excludeFromContent);\n toRemove.forEach(function(el) {\n el.remove();\n });\n\n let text = clone.textContent || '';\n text = text.replace(/\\s+/g, ' ').trim();\n \n return text.substring(0, config.maxContentLength);\n }\n\n /**\n * Extract keywords from a section\n */\n function extractKeywords(section, title) {\n const keywords = [];\n \n // Add title words\n title.toLowerCase().split(/\\s+/).forEach(function(word) {\n if (word.length > 2) {\n keywords.push(word);\n }\n });\n\n // Add class names from code examples\n const codeBlocks = section.querySelectorAll('code');\n codeBlocks.forEach(function(code) {\n const text = code.textContent || '';\n const classMatches = text.match(/\\.([\\w-]+)/g);\n if (classMatches) {\n classMatches.forEach(function(match) {\n keywords.push(match.substring(1).toLowerCase());\n });\n }\n });\n\n // Add data attributes\n const dataAttrs = section.querySelectorAll('[data-tooltip], [data-modal]');\n dataAttrs.forEach(function(el) {\n const attrs = el.getAttributeNames().filter(function(name) {\n return name.startsWith('data-');\n });\n attrs.forEach(function(attr) {\n keywords.push(attr.replace('data-', ''));\n });\n });\n\n return Array.from(new Set(keywords));\n }\n\n /**\n * Extract keywords from text string\n */\n function extractKeywordsFromText(text) {\n const words = text.toLowerCase().split(/\\s+/);\n return words.filter(function(word) {\n return word.length > 2;\n });\n }\n\n /**\n * Convert string to slug\n */\n function slugify(str) {\n return str.toLowerCase().replace(/\\s+/g, '-').replace(/[^a-z0-9-]/g, '');\n }\n\n /**\n * Bind event listeners\n */\n function bindEvents() {\n // Store bound handlers for cleanup\n state.boundHandlers.handleInput = function(e) {\n handleInput(e);\n };\n state.boundHandlers.handleFocus = function() {\n if (state.query.length >= config.minQueryLength) {\n open();\n }\n };\n state.boundHandlers.handleKeydown = function(e) {\n handleKeydown(e);\n };\n state.boundHandlers.handleOutsideClick = function(e) {\n if (!state.container.contains(e.target)) {\n close();\n }\n };\n state.boundHandlers.handleGlobalKeydown = function(e) {\n if (config.keyboardShortcut && (e.metaKey || e.ctrlKey) && e.key === 'k') {\n e.preventDefault();\n state.input.focus();\n state.input.select();\n }\n };\n state.boundHandlers.handleResultClick = function(e) {\n const result = e.target.closest('.vd-doc-search-result');\n if (result) {\n const index = parseInt(result.dataset.index, 10);\n select(index);\n }\n };\n\n // Input events\n state.input.addEventListener('input', state.boundHandlers.handleInput);\n state.input.addEventListener('focus', state.boundHandlers.handleFocus);\n state.input.addEventListener('keydown', state.boundHandlers.handleKeydown);\n\n // Close on outside click\n document.addEventListener('click', state.boundHandlers.handleOutsideClick);\n\n // Global keyboard shortcut\n document.addEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n\n // Result click handling\n state.resultsContainer.addEventListener('click', state.boundHandlers.handleResultClick);\n }\n\n /**\n * Unbind event listeners\n */\n function unbindEvents() {\n if (state.input) {\n state.input.removeEventListener('input', state.boundHandlers.handleInput);\n state.input.removeEventListener('focus', state.boundHandlers.handleFocus);\n state.input.removeEventListener('keydown', state.boundHandlers.handleKeydown);\n }\n document.removeEventListener('click', state.boundHandlers.handleOutsideClick);\n document.removeEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n if (state.resultsContainer) {\n state.resultsContainer.removeEventListener('click', state.boundHandlers.handleResultClick);\n }\n }\n\n /**\n * Set up ARIA attributes\n */\n function setupAria() {\n const resultsId = state.resultsContainer.id || 'search-results-' + Math.random().toString(36).substr(2, 9);\n state.resultsContainer.id = resultsId;\n \n state.input.setAttribute('role', 'combobox');\n state.input.setAttribute('aria-autocomplete', 'list');\n state.input.setAttribute('aria-controls', resultsId);\n state.input.setAttribute('aria-expanded', 'false');\n \n state.resultsContainer.setAttribute('role', 'listbox');\n state.resultsContainer.setAttribute('aria-label', 'Search results');\n }\n\n /**\n * Handle input changes\n */\n function handleInput(e) {\n const query = e.target.value.trim();\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n state.debounceTimer = setTimeout(function() {\n state.query = query;\n\n if (query.length < config.minQueryLength) {\n close();\n return;\n }\n\n state.results = search(query);\n state.activeIndex = -1;\n render();\n open();\n\n // Callback\n if (typeof config.onSearch === 'function') {\n safeInvokeCallback('onSearch', config.onSearch, query, state.results);\n }\n }, config.debounceMs);\n }\n\n /**\n * Handle keyboard navigation\n */\n function handleKeydown(e) {\n if (!state.isOpen) {\n if (e.key === 'ArrowDown' && state.query.length >= config.minQueryLength) {\n e.preventDefault();\n state.results = search(state.query);\n render();\n open();\n }\n return;\n }\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n navigate(1);\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n navigate(-1);\n break;\n\n case 'Enter':\n e.preventDefault();\n if (state.activeIndex >= 0) {\n select(state.activeIndex);\n } else if (state.results.length > 0) {\n select(0);\n }\n break;\n\n case 'Escape':\n e.preventDefault();\n close();\n break;\n\n case 'Tab':\n close();\n break;\n }\n }\n\n /**\n * Perform search\n */\n function search(query) {\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n const scored = [];\n\n state.index.forEach(function(entry) {\n let score = 0;\n const titleLower = entry.title.toLowerCase();\n const categoryLower = entry.category.toLowerCase();\n const contentLower = entry.content.toLowerCase();\n\n terms.forEach(function(term) {\n // Title match - highest priority\n if (titleLower.includes(term)) {\n score += 100;\n if (titleLower === term) {\n score += 50;\n } else if (titleLower.startsWith(term)) {\n score += 25;\n }\n }\n\n // Category match\n if (categoryLower.includes(term)) {\n score += 50;\n }\n\n // Keyword match\n const keywordMatch = entry.keywords.some(function(k) {\n return k.includes(term);\n });\n if (keywordMatch) {\n score += 30;\n }\n\n // Content match\n if (contentLower.includes(term)) {\n score += 10;\n }\n });\n\n if (score > 0) {\n scored.push({\n id: entry.id,\n title: entry.title,\n category: entry.category,\n categorySlug: entry.categorySlug,\n content: entry.content,\n url: entry.url,\n icon: entry.icon,\n score: score\n });\n }\n });\n\n scored.sort(function(a, b) {\n return b.score - a.score;\n });\n\n return scored.slice(0, config.maxResults);\n }\n\n /**\n * Render search results\n */\n function render() {\n if (state.results.length === 0) {\n setResultsHtml(renderEmpty());\n return;\n }\n\n let html = '
      ';\n\n state.results.forEach(function(result, index) {\n const isActive = index === state.activeIndex;\n const icon = result.icon || getCategoryIcon(result.categorySlug);\n const excerpt = getExcerpt(result.content, state.query);\n\n html += '
    • ' +\n '
      ' +\n '' +\n '
      ' +\n '
      ' +\n '
      ' + highlight(result.title, state.query) + '
      ' +\n '
      ' + escapeHtml(result.category) + '
      ' +\n '
      ' + highlight(excerpt, state.query) + '
      ' +\n '
      ' +\n '
      • ';\n });\n\n html += '
    ';\n html += renderFooter();\n\n setResultsHtml(html);\n }\n\n /**\n * Render empty state\n */\n function renderEmpty() {\n return '
    ' +\n '
    ' +\n '
    ' + escapeHtml(config.emptyTitle) + '
    ' +\n '
    ' + escapeHtml(config.emptyText) + '
    ' +\n '
    ';\n }\n\n /**\n * Render footer with keyboard hints\n */\n function renderFooter() {\n return '
    ' +\n '\u2191\u2193 to navigate' +\n '\u21B5 to select' +\n 'esc to close' +\n '
    ';\n }\n\n /**\n * Get icon for category\n */\n function getCategoryIcon(categorySlug) {\n return config.categoryIcons[categorySlug] || config.categoryIcons['default'] || 'ph-file-text';\n }\n\n /**\n * Get excerpt from content\n */\n function getExcerpt(content, query) {\n const terms = query.toLowerCase().split(/\\s+/);\n const contentLower = content.toLowerCase();\n const excerptLength = 100;\n\n let matchPos = -1;\n for (let i = 0; i < terms.length; i++) {\n const pos = contentLower.indexOf(terms[i]);\n if (pos !== -1 && (matchPos === -1 || pos < matchPos)) {\n matchPos = pos;\n }\n }\n\n if (matchPos === -1) {\n return content.substring(0, excerptLength) + '...';\n }\n\n const start = Math.max(0, matchPos - 30);\n const end = Math.min(content.length, matchPos + excerptLength);\n let excerpt = content.substring(start, end);\n\n if (start > 0) {\n excerpt = '...' + excerpt;\n }\n if (end < content.length) {\n excerpt = excerpt + '...';\n }\n\n return excerpt;\n }\n\n /**\n * Highlight matched terms in text\n */\n function highlight(text, query) {\n if (!query) return escapeHtml(text);\n\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n let escaped = escapeHtml(text);\n\n terms.forEach(function(term) {\n // Skip overly long terms to prevent ReDoS\n if (term.length > 50) return;\n const regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n escaped = escaped.replace(regex, '<' + config.highlightTag + '>$1');\n });\n\n return escaped;\n }\n\n /**\n * Escape HTML entities\n */\n function escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n /**\n * Navigate results with keyboard\n */\n function navigate(direction) {\n let newIndex = state.activeIndex + direction;\n\n if (newIndex < 0) {\n newIndex = state.results.length - 1;\n } else if (newIndex >= state.results.length) {\n newIndex = 0;\n }\n\n setActiveIndex(newIndex);\n }\n\n /**\n * Set active result index\n */\n function setActiveIndex(index) {\n const prevActive = state.resultsContainer.querySelector('.vd-doc-search-result.is-active');\n if (prevActive) {\n prevActive.classList.remove('is-active');\n prevActive.setAttribute('aria-selected', 'false');\n }\n\n state.activeIndex = index;\n\n const newActive = state.resultsContainer.querySelector('[data-index=\"' + index + '\"]');\n if (newActive) {\n newActive.classList.add('is-active');\n newActive.setAttribute('aria-selected', 'true');\n state.input.setAttribute('aria-activedescendant', 'vd-doc-search-result-' + index);\n newActive.scrollIntoView({ block: 'nearest' });\n }\n }\n\n /**\n * Select a result\n */\n function select(index) {\n const result = state.results[index];\n if (!result) return;\n\n // Close search\n close();\n state.input.value = '';\n state.query = '';\n\n // Custom callback\n if (typeof config.onSelect === 'function') {\n safeInvokeCallback('onSelect', config.onSelect, result);\n return;\n }\n\n // Default behavior: navigate to section\n const section = document.querySelector(result.url);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth', block: 'start' });\n window.history.pushState(null, '', result.url);\n updateSidebarActive(result.id);\n }\n }\n\n /**\n * Update sidebar navigation active state\n */\n function updateSidebarActive(sectionId) {\n const navLinks = document.querySelectorAll(config.navSelector);\n navLinks.forEach(function(link) {\n link.classList.remove('active');\n if (link.getAttribute('href') === '#' + sectionId) {\n link.classList.add('active');\n }\n });\n }\n\n /**\n * Open results dropdown\n */\n function open() {\n if (state.isOpen) return;\n\n state.isOpen = true;\n state.resultsContainer.classList.add('is-open');\n state.input.setAttribute('aria-expanded', 'true');\n\n if (typeof config.onOpen === 'function') {\n safeInvokeCallback('onOpen', config.onOpen);\n }\n }\n\n /**\n * Close results dropdown\n */\n function close() {\n if (!state.isOpen) return;\n\n state.isOpen = false;\n state.activeIndex = -1;\n state.resultsContainer.classList.remove('is-open');\n state.input.setAttribute('aria-expanded', 'false');\n state.input.removeAttribute('aria-activedescendant');\n\n if (typeof config.onClose === 'function') {\n safeInvokeCallback('onClose', config.onClose);\n }\n }\n\n /**\n * Destroy the component\n */\n function destroy() {\n unbindEvents();\n \n state.initialized = false;\n state.index = [];\n state.results = [];\n state.isOpen = false;\n state.query = '';\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n if (state.resultsContainer) {\n setResultsHtml('');\n }\n }\n\n /**\n * Rebuild the search index\n */\n function rebuild() {\n buildIndex();\n }\n\n /**\n * Update configuration\n */\n function setConfig(newConfig) {\n Object.assign(config, newConfig);\n }\n\n /**\n * Get current configuration\n */\n function getConfig() {\n return Object.assign({}, config);\n }\n\n /**\n * Get search index\n */\n function getIndex() {\n return state.index.slice();\n }\n\n // Public instance API\n const instance = {\n init: init,\n destroy: destroy,\n rebuild: rebuild,\n search: search,\n open: open,\n close: close,\n setConfig: setConfig,\n getConfig: getConfig,\n getIndex: getIndex\n };\n\n return instance;\n }\n\n /**\n * Search Component (singleton for backward compatibility)\n */\n const Search = {\n // Factory method \u2014 creates and auto-initializes a new independent instance.\n // Always returns the instance so callers retain a reference even if the\n // DOM container is not yet available (they can retry init() later).\n create: function(options) {\n const instance = createSearch(options);\n if (instance) {\n instance.init();\n }\n return instance || null;\n },\n \n // Default instance\n _instance: null,\n \n // Configuration (for default instance)\n config: Object.assign({}, DEFAULTS),\n\n /**\n * Initialize the default search instance\n */\n init: function(options) {\n if (this._instance) {\n this._instance.destroy();\n }\n \n if (options) {\n Object.assign(this.config, options);\n }\n \n this._instance = createSearch(this.config);\n return this._instance ? this._instance.init() : null;\n },\n\n /**\n * Destroy the default instance\n */\n destroy: function() {\n if (this._instance) {\n this._instance.destroy();\n this._instance = null;\n }\n },\n\n destroyAll: function() {\n this.destroy();\n },\n\n /**\n * Rebuild the default instance index\n */\n rebuild: function() {\n if (this._instance) {\n this._instance.rebuild();\n }\n },\n\n /**\n * Search using the default instance\n */\n search: function(query) {\n return this._instance ? this._instance.search(query) : [];\n },\n\n /**\n * Open the default instance\n */\n open: function() {\n if (this._instance) {\n this._instance.open();\n }\n },\n\n /**\n * Close the default instance\n */\n close: function() {\n if (this._instance) {\n this._instance.close();\n }\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('docSearch', Search);\n }\n\n // Expose globally (both names for compatibility)\n window.Search = Search;\n window.DocSearch = Search; // Backward compatibility\n window.VanduoDocSearch = Search; // New name compatibility\n\n})();\n", "/**\n * Vanduo Framework - Draggable Component\n * JavaScript functionality for draggable elements and drop zones\n */\n\n(function () {\n 'use strict';\n\n /**\n * Draggable Component\n */\n const Draggable = {\n // Store initialized draggables and their cleanup functions\n instances: new Map(),\n // Store current drag state\n currentDrag: null,\n // Store touch state\n touchState: null,\n // Feedback element\n feedbackElement: null,\n // Shared selector used by init and touch reorder\n containerSelector: '.vd-draggable-container, .vd-draggable-container-vertical',\n\n /**\n * Initialize draggable components\n */\n init: function () {\n const draggables = document.querySelectorAll('.vd-draggable, [data-draggable]');\n\n draggables.forEach(element => {\n if (this.instances.has(element)) {\n return;\n }\n this.initDraggable(element);\n });\n\n const containers = document.querySelectorAll(this.containerSelector);\n containers.forEach(container => {\n if (!this.instances.has(container)) {\n this.initContainer(container);\n }\n });\n\n const dropZones = document.querySelectorAll('.vd-drop-zone');\n dropZones.forEach(zone => {\n if (!this.instances.has(zone)) {\n this.initDropZone(zone);\n }\n });\n\n this.createFeedbackElement();\n },\n\n /**\n * Initialize a single draggable element\n * @param {HTMLElement} element - Draggable element\n */\n initDraggable: function (element) {\n const cleanupFunctions = [];\n\n // Make element draggable if not already\n if (!element.hasAttribute('draggable')) {\n element.setAttribute('draggable', 'true');\n }\n\n // Accessibility: add ARIA attributes\n if (!element.hasAttribute('tabindex')) {\n element.setAttribute('tabindex', '0');\n }\n element.setAttribute('role', 'option');\n element.setAttribute('aria-roledescription', 'draggable item');\n element.setAttribute('aria-grabbed', 'false');\n\n // Handle drag start\n const dragStartHandler = (e) => {\n this.handleDragStart(e, element);\n };\n element.addEventListener('dragstart', dragStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragstart', dragStartHandler));\n\n // Handle drag\n const dragHandler = (e) => {\n this.handleDrag(e, element);\n };\n element.addEventListener('drag', dragHandler);\n cleanupFunctions.push(() => element.removeEventListener('drag', dragHandler));\n\n // Handle drag end\n const dragEndHandler = (e) => {\n this.handleDragEnd(e, element);\n };\n element.addEventListener('dragend', dragEndHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragend', dragEndHandler));\n\n // Handle touch start (for mobile)\n const touchStartHandler = (e) => {\n this.handleTouchStart(e, element);\n };\n element.addEventListener('touchstart', touchStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchstart', touchStartHandler));\n\n // Handle touch move (for mobile)\n // { passive: false } is required so that e.preventDefault() works\n // once the drag threshold is reached \u2014 without it, modern browsers\n // treat the listener as passive and silently ignore preventDefault().\n const touchMoveHandler = (e) => {\n this.handleTouchMove(e, element);\n };\n element.addEventListener('touchmove', touchMoveHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchmove', touchMoveHandler));\n\n // Handle touch end (for mobile)\n const touchEndHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchend', touchEndHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchend', touchEndHandler));\n\n // Handle touch cancel (for mobile)\n const touchCancelHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchcancel', touchCancelHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchcancel', touchCancelHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, element);\n };\n element.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => element.removeEventListener('keydown', keydownHandler));\n\n this.instances.set(element, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a draggable container\n * @param {HTMLElement} container - Draggable container\n */\n initContainer: function (container) {\n // Accessibility: add ARIA role to container\n container.setAttribute('role', 'listbox');\n container.setAttribute('aria-label', container.getAttribute('aria-label') || 'Draggable items');\n\n const items = container.querySelectorAll('.vd-draggable-item');\n items.forEach(item => {\n if (!this.instances.has(item)) {\n this.initDraggable(item);\n }\n });\n\n const cleanupFunctions = [];\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n };\n\n // Handle drag over for auto-sorting\n const dragOverHandler = (e) => {\n e.preventDefault(); // Necessary to allow drop\n e.dataTransfer.dropEffect = 'move';\n\n if (!this.currentDrag) return;\n const draggingEl = this.currentDrag.element;\n\n // Only reorder if dragging an item that belongs to this container (or if we support cross-container drag, but keep simple)\n if (!container.contains(draggingEl)) return;\n\n // Prevent jumps when the dragging finalizes with 0,0 coordinates near the end\n if (e.clientX === 0 && e.clientY === 0) return;\n\n this.handleReorder(container, draggingEl, e.clientX, e.clientY);\n };\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault(); // crucial to prevent the browser's default handling and snapping back\n };\n\n container.addEventListener('dragenter', dragEnterHandler);\n container.addEventListener('dragover', dragOverHandler);\n container.addEventListener('drop', dropHandler);\n\n cleanupFunctions.push(() => {\n container.removeEventListener('dragenter', dragEnterHandler);\n container.removeEventListener('dragover', dragOverHandler);\n container.removeEventListener('drop', dropHandler);\n });\n\n this.instances.set(container, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a drop zone\n * @param {HTMLElement} zone - Drop zone element\n */\n initDropZone: function (zone) {\n const cleanupFunctions = [];\n\n // Accessibility: add ARIA role to drop zone\n zone.setAttribute('role', 'region');\n zone.setAttribute('aria-dropeffect', 'move');\n if (!zone.hasAttribute('aria-label')) {\n zone.setAttribute('aria-label', 'Drop zone');\n }\n\n // Handle drag over\n const dragOverHandler = (e) => {\n e.preventDefault();\n this.handleDragOver(e, zone);\n };\n zone.addEventListener('dragover', dragOverHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragover', dragOverHandler));\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n this.handleDragEnter(e, zone);\n };\n zone.addEventListener('dragenter', dragEnterHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragenter', dragEnterHandler));\n\n // Handle drag leave\n const dragLeaveHandler = (e) => {\n this.handleDragLeave(e, zone);\n };\n zone.addEventListener('dragleave', dragLeaveHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragleave', dragLeaveHandler));\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault();\n this.handleDrop(e, zone);\n };\n zone.addEventListener('drop', dropHandler);\n cleanupFunctions.push(() => zone.removeEventListener('drop', dropHandler));\n\n this.instances.set(zone, { cleanup: cleanupFunctions });\n },\n\n /**\n * Create feedback element for drag operations\n */\n createFeedbackElement: function () {\n if (!this.feedbackElement) {\n // Reuse existing element if present\n const existing = document.querySelector('.vd-drag-feedback');\n if (existing) {\n this.feedbackElement = existing;\n return;\n }\n\n this.feedbackElement = document.createElement('div');\n this.feedbackElement.className = 'vd-drag-feedback hidden';\n this.feedbackElement.setAttribute('role', 'presentation');\n document.body.appendChild(this.feedbackElement);\n }\n },\n\n /**\n * Handle drag start event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragStart: function (e, element) {\n // Add dragging class\n element.classList.add('is-dragging');\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: e.clientX, y: e.clientY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element)\n };\n\n // Set drag data\n e.dataTransfer.effectAllowed = 'move';\n e.dataTransfer.setData('text/plain', this.currentDrag.data);\n\n // We no longer suppress the native ghost image or manually update feedback\n // for mouse drags, relying on the browser's native rendering instead.\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY }\n }\n }));\n },\n\n /**\n * Handle drag event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDrag: function (e, element) {\n // Guard against null state (race condition on fast interactions)\n if (!this.currentDrag) return;\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - this.currentDrag.initialPosition.x,\n y: e.clientY - this.currentDrag.initialPosition.y\n }\n }\n }));\n },\n\n /**\n * Handle drag end event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragEnd: function (e, element) {\n // Remove dragging class\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'false');\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Guard against null state\n const data = this.currentDrag?.data || this.getData(element);\n const initialPos = this.currentDrag?.initialPosition || { x: 0, y: 0 };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - initialPos.x,\n y: e.clientY - initialPos.y\n }\n }\n }));\n\n // Reset drag state\n this.currentDrag = null;\n },\n\n /**\n * Handle touch start event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchStart: function (e, element) {\n // Don't prevent default here \u2014 it blocks scrolling.\n // We only prevent default in touchmove once drag threshold is reached.\n const touch = e.touches[0];\n const rect = element.getBoundingClientRect();\n this.touchState = {\n element: element,\n startX: touch.clientX,\n startY: touch.clientY,\n lastX: touch.clientX,\n lastY: touch.clientY,\n // Keep preview anchored to the original grab point.\n offsetX: touch.clientX - rect.left,\n offsetY: touch.clientY - rect.top,\n startTime: Date.now(),\n isDragging: false\n };\n },\n\n /**\n * Handle touch move event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchMove: function (e, element) {\n if (!this.touchState) return;\n\n const touch = e.touches[0];\n this.touchState.lastX = touch.clientX;\n this.touchState.lastY = touch.clientY;\n const deltaX = touch.clientX - this.touchState.startX;\n const deltaY = touch.clientY - this.touchState.startY;\n\n // Only start dragging if moved a minimum distance\n if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {\n // Now we know it's a drag, not a scroll \u2014 prevent default\n if (e.cancelable) e.preventDefault();\n\n if (!this.touchState.isDragging) {\n this.touchState.isDragging = true;\n element.classList.add('is-dragging');\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: this.touchState.startX, y: this.touchState.startY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element),\n // Preserve where inside the element the drag started for accurate ghost positioning.\n offsetX: this.touchState.offsetX,\n offsetY: this.touchState.offsetY\n };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY }\n }\n }));\n }\n\n // Update feedback\n this.updateFeedback(touch.clientX, touch.clientY);\n\n // Dispatch event\n if (this.currentDrag) {\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY },\n delta: { x: deltaX, y: deltaY }\n }\n }));\n\n this.updateTouchDropZone(touch.clientX, touch.clientY);\n\n // Reorder for touch\n const container = element.closest(this.containerSelector);\n if (container && container.contains(element)) {\n this.handleReorder(container, element, touch.clientX, touch.clientY);\n }\n }\n }\n },\n\n /**\n * Handle touch end event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchEnd: function (e, element) {\n if (this.touchState && this.touchState.isDragging) {\n if (e.cancelable) e.preventDefault();\n const endTouch = e.changedTouches?.[0];\n const endPosition = {\n x: endTouch?.clientX ?? this.touchState.lastX ?? this.touchState.startX,\n y: endTouch?.clientY ?? this.touchState.lastY ?? this.touchState.startY\n };\n\n const dropZone = this.resolveDropZoneAtPoint(endPosition.x, endPosition.y) || this.touchState.overZone;\n if (dropZone) {\n this.dispatchDrop(dropZone, endPosition);\n } else if (this.touchState.overZone) {\n this.touchState.overZone.classList.remove('is-drag-over');\n }\n\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n element.setAttribute('aria-grabbed', 'false');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Dispatch event\n const data = this.currentDrag?.data || this.getData(element);\n const startX = this.touchState?.startX || 0;\n const startY = this.touchState?.startY || 0;\n\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: endPosition,\n delta: {\n x: endPosition.x - startX,\n y: endPosition.y - startY\n }\n }\n }));\n }\n\n // Reset states\n this.touchState = null;\n this.currentDrag = null;\n },\n\n /**\n * Handle drag over event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} _zone - Drop zone element\n */\n handleDragOver: function (e, _zone) {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n },\n\n /**\n * Handle drag enter event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragEnter: function (e, zone) {\n e.preventDefault();\n zone.classList.add('is-drag-over');\n },\n\n /**\n * Handle drag leave event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragLeave: function (e, zone) {\n zone.classList.remove('is-drag-over');\n },\n\n /**\n * Handle drop event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDrop: function (e, zone) {\n e.preventDefault();\n this.dispatchDrop(zone, { x: e.clientX, y: e.clientY });\n },\n\n /**\n * Resolve a drop zone from viewport coordinates\n * @param {number} x\n * @param {number} y\n * @returns {HTMLElement|null}\n */\n resolveDropZoneAtPoint: function (x, y) {\n if (!Number.isFinite(x) || !Number.isFinite(y)) return null;\n\n // Prefer the full stacking list so overlays/top elements don't hide real drop targets.\n if (typeof document.elementsFromPoint === 'function') {\n const stacked = document.elementsFromPoint(x, y);\n for (const element of stacked) {\n const zone = element.closest('.vd-drop-zone');\n if (zone) return zone;\n }\n }\n\n const target = document.elementFromPoint(x, y);\n const targetZone = target ? target.closest('.vd-drop-zone') : null;\n if (targetZone) return targetZone;\n\n // Last-resort fallback for mobile emulation edge cases.\n const zones = document.querySelectorAll('.vd-drop-zone');\n for (const zone of zones) {\n const rect = zone.getBoundingClientRect();\n if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {\n return zone;\n }\n }\n\n return null;\n },\n\n /**\n * Track and update active drop-zone hover state on touch devices\n * @param {number} x\n * @param {number} y\n */\n updateTouchDropZone: function (x, y) {\n if (!this.touchState) return;\n\n const nextZone = this.resolveDropZoneAtPoint(x, y);\n const prevZone = this.touchState.overZone || null;\n\n if (prevZone && prevZone !== nextZone) {\n prevZone.classList.remove('is-drag-over');\n }\n\n if (nextZone && nextZone !== prevZone) {\n nextZone.classList.add('is-drag-over');\n }\n\n this.touchState.overZone = nextZone || null;\n },\n\n /**\n * Dispatch a normalized drop event for mouse and touch flows\n * @param {HTMLElement} zone\n * @param {{x:number, y:number}} position\n */\n dispatchDrop: function (zone, position) {\n zone.classList.remove('is-drag-over');\n zone.dispatchEvent(new CustomEvent('draggable:drop', {\n bubbles: true,\n detail: {\n zone: zone,\n element: this.currentDrag?.element,\n data: this.currentDrag?.data,\n position: position\n }\n }));\n },\n\n /**\n * Reorder elements in container based on cursor position\n * @param {HTMLElement} container \n * @param {HTMLElement} element \n * @param {number} clientX \n * @param {number} clientY \n */\n handleReorder: function (container, element, clientX, clientY) {\n const isVertical = container.classList.contains('vd-draggable-container-vertical');\n const siblings = [...container.querySelectorAll('.vd-draggable-item:not(.is-dragging), .vd-draggable:not(.is-dragging)')];\n\n const nextSibling = siblings.reduce((closest, child) => {\n const box = child.getBoundingClientRect();\n const offset = isVertical\n ? clientY - box.top - box.height / 2\n : clientX - box.left - box.width / 2;\n\n if (offset < 0 && offset > closest.offset) {\n return { offset: offset, element: child };\n } else {\n return closest;\n }\n }, { offset: Number.NEGATIVE_INFINITY }).element;\n\n if (nextSibling == null) {\n container.appendChild(element);\n } else {\n container.insertBefore(element, nextSibling);\n }\n },\n\n /**\n * Handle keyboard events\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} element - Draggable element\n */\n handleKeydown: function (e, element) {\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n // Trigger click or custom action\n element.click();\n break;\n case 'Escape':\n // Cancel drag if in progress\n if (element.classList.contains('is-dragging')) {\n element.classList.remove('is-dragging');\n element.setAttribute('aria-grabbed', 'false');\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n this.currentDrag = null;\n }\n break;\n case 'ArrowUp':\n case 'ArrowLeft': {\n e.preventDefault();\n const prev = element.previousElementSibling;\n if (prev && (prev.classList.contains('vd-draggable') || prev.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(element, prev);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'up' }\n }));\n }\n break;\n }\n case 'ArrowDown':\n case 'ArrowRight': {\n e.preventDefault();\n const next = element.nextElementSibling;\n if (next && (next.classList.contains('vd-draggable') || next.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(next, element);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'down' }\n }));\n }\n break;\n }\n }\n },\n\n /**\n * Get data from draggable element\n * @param {HTMLElement} element - Draggable element\n * @returns {string} Data associated with the element\n */\n getData: function (element) {\n return element.dataset.draggable || element.textContent.trim();\n },\n\n /**\n * Update drag feedback element\n * @param {number} x - Current X coordinate\n * @param {number} y - Current Y coordinate\n */\n updateFeedback: function (x, y) {\n if (!this.currentDrag) return;\n\n // Show feedback\n this.feedbackElement.classList.remove('hidden');\n\n // Update feedback content\n const rect = this.currentDrag.initialBounds;\n this.feedbackElement.innerHTML = '';\n const clone = this.currentDrag.element.cloneNode(true);\n this.feedbackElement.appendChild(clone);\n\n // Set styles\n const offsetX = this.currentDrag.offsetX ?? 20;\n const offsetY = this.currentDrag.offsetY ?? 20;\n Object.assign(this.feedbackElement.style, {\n left: (x - offsetX) + 'px',\n top: (y - offsetY) + 'px',\n width: rect.width + 'px',\n height: rect.height + 'px'\n });\n },\n\n /**\n * Make an element draggable programmatically\n * @param {HTMLElement|string} element - Element or selector\n * @param {Object} options - Configuration options\n */\n makeDraggable: function (element, options = {}) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && !this.instances.has(el)) {\n // Add classes and attributes\n el.classList.add('vd-draggable');\n el.setAttribute('draggable', 'true');\n\n // Set options\n if (options.data) {\n el.dataset.draggable = options.data;\n }\n\n // Initialize\n this.initDraggable(el);\n }\n },\n\n /**\n * Remove draggable functionality from an element\n * @param {HTMLElement|string} element - Element or selector\n */\n removeDraggable: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && this.instances.has(el)) {\n // Clean up\n const instance = this.instances.get(el);\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n\n // Remove classes and attributes\n el.classList.remove('vd-draggable');\n el.removeAttribute('draggable');\n el.removeAttribute('data-draggable');\n }\n },\n\n /**\n * Destroy a draggable instance and clean up event listeners\n * @param {HTMLElement} element - Draggable element\n */\n destroy: function (element) {\n this.removeDraggable(element);\n },\n\n /**\n * Destroy all draggable instances\n */\n destroyAll: function () {\n const instances = Array.from(this.instances.keys());\n instances.forEach(element => this.destroy(element));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('draggable', Draggable);\n }\n\n // Expose globally\n window.VanduoDraggable = Draggable;\n})();\n", "/**\n * Vanduo Framework \u2013 LazyLoad Component\n * v1.2.1\n *\n * Provides two levels of API:\n *\n * LOW-LEVEL (generic IntersectionObserver wrapper)\n * VanduoLazyLoad.observe(element, callback, options?)\n * VanduoLazyLoad.unobserve(element)\n * VanduoLazyLoad.unobserveAll()\n *\n * HIGH-LEVEL (HTML-section fetcher, mirrors vanduo-docs SPA behaviour)\n * VanduoLazyLoad.loadSection(url, containerEl, options?)\n * options: { placeholder, threshold, rootMargin, onLoaded, onError }\n * placeholder: 'skeleton' | 'spinner' | HTMLString (default: 'skeleton')\n *\n * ATTRIBUTE-DRIVEN (zero-JS usage, wired by init())\n *
    \u2026
    \n *\n * EVENTS dispatched on the host element:\n * lazysection:loading \u2014 fetch started\n * lazysection:loaded \u2014 content injected\n * lazysection:error \u2014 fetch failed\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500 Private state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /** @type {Map} */\n const _observerMap = new Map();\n\n /* \u2500\u2500 Security helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Returns true only if `url` resolves to the same origin as the page\n * (relative paths and same-origin absolute URLs are allowed).\n * Cross-origin URLs are rejected to prevent SSRF-style fetch abuse.\n * @param {string} url\n * @returns {boolean}\n */\n function _isSafeUrl(url) {\n try {\n // Relative URLs (no origin) are always safe\n const resolved = new URL(url, window.location.href);\n return resolved.origin === window.location.origin;\n } catch (_) {\n return false;\n }\n }\n\n /**\n * Safely inject fetched HTML into a container by parsing it with\n * DOMParser (avoids script execution) and replacing children via\n * standard DOM APIs instead of raw innerHTML assignment.\n * @param {Element} containerEl\n * @param {string} html\n */\n function _safeInjectHtml(containerEl, html) {\n const parser = new DOMParser();\n const doc = parser.parseFromString(html.trim(), 'text/html'); // CodeQL [js/xss-through-dom] Intentional: parsed nodes are sanitized below before adoption into live DOM\n\n const DANGEROUS_TAGS = ['SCRIPT', 'IFRAME', 'OBJECT', 'EMBED', 'FORM', 'BASE', 'LINK', 'META', 'STYLE'];\n for (const tag of DANGEROUS_TAGS) {\n const els = doc.querySelectorAll(tag);\n for (let i = els.length - 1; i >= 0; i--) {\n els[i].parentNode.removeChild(els[i]);\n }\n }\n\n // Strip dangerous attributes (e.g. onerror, javascript: urls) from all elements\n function _sanitizeNode(node) {\n if (node.nodeType === Node.ELEMENT_NODE) {\n const attrs = node.attributes;\n for (let i = attrs.length - 1; i >= 0; i--) {\n const attrName = attrs[i].name.toLowerCase();\n const attrValue = attrs[i].value.toLowerCase();\n const trimmedValue = attrValue.trim();\n if (\n attrName.startsWith('on') ||\n trimmedValue.startsWith('javascript:') ||\n trimmedValue.startsWith('data:') ||\n trimmedValue.startsWith('vbscript:')\n ) {\n node.removeAttribute(attrs[i].name);\n }\n }\n const children = node.childNodes;\n for (let i = 0; i < children.length; i++) {\n _sanitizeNode(children[i]);\n }\n }\n }\n _sanitizeNode(doc.body);\n\n // Collect all top-level body children\n const nodes = Array.from(doc.body.childNodes);\n // Clear container and append parsed nodes\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n nodes.forEach(function (node) {\n containerEl.appendChild(document.adoptNode(node));\n });\n }\n\n /* \u2500\u2500 Placeholder HTML \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _skeletonHtml() {\n return '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _spinnerHtml() {\n return '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _resolvePlaceholder(placeholder) {\n if (!placeholder || placeholder === 'skeleton') return _skeletonHtml();\n if (placeholder === 'spinner') return _spinnerHtml();\n // Caller-supplied HTML string\n return placeholder;\n }\n\n /* \u2500\u2500 Dispatch helper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _dispatch(el, eventName, detail) {\n el.dispatchEvent(new CustomEvent(eventName, { bubbles: true, detail: detail || {} }));\n }\n\n /* \u2500\u2500 VanduoLazyLoad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const VanduoLazyLoad = {\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * LOW-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Observe an element. `callback` is invoked once when the element\n * enters the viewport, then the element is automatically unobserved.\n *\n * @param {Element} element\n * @param {function(Element): void} callback\n * @param {{ threshold?: number, rootMargin?: string }} [options]\n */\n observe: function (element, callback, options) {\n if (!(element instanceof Element)) {\n console.warn('[VanduoLazyLoad] observe() requires a DOM Element.');\n return;\n }\n if (typeof callback !== 'function') {\n console.warn('[VanduoLazyLoad] observe() requires a callback function.');\n return;\n }\n // Already observed \u2014 ignore\n if (_observerMap.has(element)) return;\n\n const threshold = (options && options.threshold != null) ? options.threshold : 0;\n const rootMargin = (options && options.rootMargin) ? options.rootMargin : '0px';\n\n const observer = new IntersectionObserver(function (entries, obs) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n obs.unobserve(entry.target);\n _observerMap.delete(entry.target);\n try {\n callback(entry.target);\n } catch (e) {\n console.error('[VanduoLazyLoad] Callback threw:', e);\n }\n }\n });\n }, { threshold: threshold, rootMargin: rootMargin });\n\n _observerMap.set(element, observer);\n observer.observe(element);\n },\n\n /**\n * Stop observing an element that was previously passed to observe().\n * @param {Element} element\n */\n unobserve: function (element) {\n const observer = _observerMap.get(element);\n if (observer) {\n observer.unobserve(element);\n _observerMap.delete(element);\n }\n },\n\n /**\n * Stop observing ALL currently observed elements.\n */\n unobserveAll: function () {\n _observerMap.forEach(function (observer, element) {\n observer.unobserve(element);\n });\n _observerMap.clear();\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * HIGH-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fetch an HTML partial and inject it into `containerEl` when the\n * container enters the viewport. A placeholder is shown immediately.\n *\n * @param {string} url URL of the HTML partial to fetch\n * @param {Element} containerEl Target element whose content will be replaced\n * @param {{\n * placeholder?: 'skeleton'|'spinner'|string,\n * threshold?: number,\n * rootMargin?: string,\n * onLoaded?: function(Element): void,\n * onError?: function(Error): void\n * }} [options]\n */\n loadSection: function (url, containerEl, options) {\n if (typeof url !== 'string' || !url) {\n console.warn('[VanduoLazyLoad] loadSection() requires a non-empty URL string.');\n return;\n }\n if (!(containerEl instanceof Element)) {\n console.warn('[VanduoLazyLoad] loadSection() requires a DOM Element as containerEl.');\n return;\n }\n // Reject cross-origin URLs to prevent SSRF-style fetch abuse\n if (!_isSafeUrl(url)) {\n console.error('[VanduoLazyLoad] loadSection() blocked cross-origin URL:', url);\n return;\n }\n\n const opts = options || {};\n // Placeholders are known-safe static HTML strings built internally\n const placeholderHtml = _resolvePlaceholder(opts.placeholder);\n\n // Use _safeInjectHtml instead of innerHTML to prevent XSS from caller-supplied placeholders\n _safeInjectHtml(containerEl, placeholderHtml);\n _dispatch(containerEl, 'lazysection:loading', { url: url });\n\n // Fetch when visible\n this.observe(containerEl, function () {\n const controller = new window.AbortController();\n const timeoutId = setTimeout(function () { controller.abort(); }, 10000);\n\n window.fetch(url, { signal: controller.signal })\n .then(function (res) {\n clearTimeout(timeoutId);\n if (!res.ok) throw new Error('HTTP ' + res.status);\n return res.text();\n })\n .then(function (html) {\n // Use DOMParser to parse fetched content safely, avoiding\n // raw innerHTML assignment of externally-sourced strings\n _safeInjectHtml(containerEl, html);\n _dispatch(containerEl, 'lazysection:loaded', { url: url });\n // Re-init Vanduo components inside the new content\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.init();\n }\n if (typeof opts.onLoaded === 'function') {\n opts.onLoaded(containerEl);\n }\n })\n .catch(function (err) {\n // Build error node via DOM APIs \u2014 no dynamic HTML strings\n const alertEl = document.createElement('div');\n alertEl.className = 'vd-alert vd-alert-error';\n alertEl.setAttribute('role', 'alert');\n const msgEl = document.createElement('span');\n msgEl.textContent = 'Failed to load content. ';\n const detailEl = document.createElement('small');\n detailEl.style.opacity = '0.7';\n detailEl.textContent = err.message;\n alertEl.appendChild(msgEl);\n alertEl.appendChild(detailEl);\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n containerEl.appendChild(alertEl);\n _dispatch(containerEl, 'lazysection:error', { url: url, error: err });\n console.error('[VanduoLazyLoad] loadSection failed:', err);\n if (typeof opts.onError === 'function') {\n opts.onError(err);\n }\n });\n }, { threshold: opts.threshold, rootMargin: opts.rootMargin });\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * ATTRIBUTE-DRIVEN INIT\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Scan the DOM for [data-vd-lazy] elements and wire them up.\n * Safe to call multiple times \u2014 already-observed elements are skipped.\n */\n init: function () {\n const self = this;\n const elements = document.querySelectorAll('[data-vd-lazy]');\n elements.forEach(function (el) {\n // Skip already-observed or already-loaded elements\n if (_observerMap.has(el) || el.dataset.vdLazyState === 'loading' || el.dataset.vdLazyState === 'loaded') return;\n\n const url = el.getAttribute('data-vd-lazy');\n if (!url) return;\n\n el.dataset.vdLazyState = 'loading';\n const placeholder = el.getAttribute('data-vd-lazy-placeholder') || 'skeleton';\n\n self.loadSection(url, el, {\n placeholder: placeholder,\n onLoaded: function () {\n el.dataset.vdLazyState = 'loaded';\n },\n onError: function () {\n el.dataset.vdLazyState = 'error';\n }\n });\n });\n }\n };\n\n /* \u2500\u2500 Register with Vanduo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('LazyLoad', VanduoLazyLoad);\n }\n\n /* \u2500\u2500 Global convenience alias \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n window.VanduoLazyLoad = VanduoLazyLoad;\n\n})();\n", "/**\n * Vanduo Framework - Glass Scroll Activation\n * Generic scroll-aware glass activation via IntersectionObserver.\n *\n * Usage:\n * Add `data-glass-scroll` to any element carrying a `.vd-glass*` class.\n * By default the previous sibling is used as the sentinel.\n * Point to a custom sentinel via `data-glass-sentinel=\"\"`.\n *\n * Behaviour:\n * - Adds `.is-glass-active` when the sentinel leaves the viewport (scrolled past).\n * - Removes `.is-glass-active` when the sentinel re-enters the viewport.\n */\n(function () {\n 'use strict';\n\n const GlassScroll = {\n /** @type {Map} */\n observers: new Map(),\n\n init: function () {\n document.querySelectorAll('[data-glass-scroll]').forEach(el => {\n if (this.observers.has(el)) return;\n this.initElement(el);\n });\n },\n\n /**\n * Wire up a single scroll-activated glass element.\n * @param {HTMLElement} el\n */\n initElement: function (el) {\n const sentinelSelector = el.dataset.glassSentinel;\n let sentinel;\n\n if (sentinelSelector) {\n sentinel = document.querySelector(sentinelSelector);\n }\n\n if (!sentinel) {\n // Fall back to the previous sibling element\n sentinel = el.previousElementSibling;\n }\n\n if (!sentinel) {\n // No sentinel available \u2014 activate immediately so glass is always shown\n el.classList.add('is-glass-active');\n return;\n }\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n // Active when sentinel is NOT intersecting (scrolled past it)\n el.classList.toggle('is-glass-active', !entry.isIntersecting);\n });\n },\n { threshold: 0, rootMargin: '0px' }\n );\n\n observer.observe(sentinel);\n this.observers.set(el, observer);\n },\n\n /**\n * Disconnect and remove a single element's observer.\n * @param {HTMLElement} el\n */\n destroy: function (el) {\n const observer = this.observers.get(el);\n if (observer) {\n observer.disconnect();\n this.observers.delete(el);\n }\n },\n\n destroyAll: function () {\n this.observers.forEach((observer, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('glassScroll', GlassScroll);\n }\n\n window.VanduoGlassScroll = GlassScroll;\n})();\n", "/**\n * Vanduo Framework - Water Morph Effect Component\n * Liquid wave content-swap animation on click\n *\n * Usage:\n * Add .vd-morph or [data-vd-morph] to any element.\n * Provide .vd-morph-content.vd-morph-current and .vd-morph-content.vd-morph-next children.\n * Wave and shine layers are auto-created if absent.\n *\n * JS API:\n * VanduoMorph.morph(el) \u2014 trigger morph programmatically (from center)\n * VanduoMorph.destroy(el) \u2014 tear down listeners for one element\n * VanduoMorph.destroyAll() \u2014 tear down all instances\n */\n\n(function () {\n 'use strict';\n\n const MORPH_DURATION_MS = 750;\n\n const Morph = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-morph, [data-vd-morph]');\n elements.forEach(function (el) {\n if (Morph.instances.has(el)) return;\n if (el.getAttribute('data-vd-morph') === 'manual') return;\n Morph.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n Morph._ensureLayers(el);\n\n const cleanup = [];\n let morphing = false;\n\n const handleClick = function (e) {\n if (morphing) return;\n Morph._runMorph(el, e, function () { morphing = false; });\n morphing = true;\n };\n\n el.addEventListener('click', handleClick);\n cleanup.push(function () { el.removeEventListener('click', handleClick); });\n\n this.instances.set(el, { cleanup: cleanup });\n },\n\n morph: function (el) {\n if (!el) return;\n if (!this.instances.has(el)) this.initInstance(el);\n this._runMorph(el, null, null);\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(function (fn) { fn(); });\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach(function (_, el) { Morph.destroy(el); });\n },\n\n /* \u2500\u2500 Internal helpers \u2500\u2500 */\n\n _ensureLayers: function (el) {\n if (!el.querySelector('.vd-morph-wave')) {\n const wave = document.createElement('span');\n wave.className = 'vd-morph-wave';\n wave.setAttribute('aria-hidden', 'true');\n el.insertBefore(wave, el.firstChild);\n }\n if (!el.querySelector('.vd-morph-shine')) {\n const shine = document.createElement('span');\n shine.className = 'vd-morph-shine';\n shine.setAttribute('aria-hidden', 'true');\n const waveEl = el.querySelector('.vd-morph-wave');\n if (waveEl && waveEl.nextSibling) {\n el.insertBefore(shine, waveEl.nextSibling);\n } else {\n el.insertBefore(shine, el.firstChild);\n }\n }\n },\n\n _runMorph: function (el, pointerEvent, onComplete) {\n const wave = el.querySelector('.vd-morph-wave');\n if (wave) {\n const rect = el.getBoundingClientRect();\n const cx = rect.left + rect.width / 2;\n const cy = rect.top + rect.height / 2;\n const px = pointerEvent ? (pointerEvent.clientX || cx) : cx;\n const py = pointerEvent ? (pointerEvent.clientY || cy) : cy;\n wave.style.left = (px - rect.left) + 'px';\n wave.style.top = (py - rect.top) + 'px';\n }\n\n el.classList.add('is-morphing');\n\n let duration = MORPH_DURATION_MS;\n const custom = getComputedStyle(el).getPropertyValue('--morph-duration');\n if (custom) {\n const parsed = parseFloat(custom);\n if (!isNaN(parsed)) duration = parsed * (custom.indexOf('ms') !== -1 ? 1 : 1000);\n }\n\n setTimeout(function () {\n el.classList.remove('is-morphing');\n\n const current = el.querySelector('.vd-morph-current');\n const next = el.querySelector('.vd-morph-next');\n if (current && next) {\n current.classList.remove('vd-morph-current');\n current.classList.add('vd-morph-next');\n next.classList.remove('vd-morph-next');\n next.classList.add('vd-morph-current');\n }\n\n el.classList.add('morph-done');\n setTimeout(function () { el.classList.remove('morph-done'); }, 350);\n\n if (typeof onComplete === 'function') onComplete();\n }, duration);\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('morph', Morph);\n }\n\n window.VanduoMorph = Morph;\n\n})();\n", "/**\n * Vanduo Framework - Flow (Carousel/Slider) Component\n * Touch-enabled carousel with slide/fade transitions, autoplay, indicators\n */\n\n(function () {\n 'use strict';\n\n const Flow = {\n instances: new Map(),\n\n init: function () {\n const carousels = document.querySelectorAll('.vd-flow, .vd-carousel');\n carousels.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const track = el.querySelector('.vd-flow-track');\n if (!track) return;\n\n const slides = Array.from(track.querySelectorAll('.vd-flow-slide'));\n if (slides.length === 0) return;\n\n const isFade = el.classList.contains('vd-flow-fade');\n const autoplay = el.hasAttribute('data-vd-autoplay');\n const interval = parseInt(el.getAttribute('data-vd-interval'), 10) || 5000;\n const loop = el.getAttribute('data-vd-loop') !== 'false';\n\n const state = {\n current: 0,\n total: slides.length,\n autoplayTimer: null,\n isFade: isFade,\n loop: loop,\n isDragging: false,\n startX: 0,\n currentX: 0,\n threshold: 50\n };\n\n const cleanup = [];\n\n // Set initial active slide\n slides.forEach((slide, i) => {\n slide.setAttribute('role', 'group');\n slide.setAttribute('aria-roledescription', 'slide');\n slide.setAttribute('aria-label', 'Slide ' + (i + 1) + ' of ' + slides.length);\n if (i === 0) slide.classList.add('is-active');\n });\n\n el.setAttribute('role', 'region');\n el.setAttribute('aria-roledescription', 'carousel');\n if (!el.getAttribute('aria-label')) {\n el.setAttribute('aria-label', 'Carousel');\n }\n\n // Live region for announcements\n const liveRegion = document.createElement('div');\n liveRegion.setAttribute('aria-live', 'polite');\n liveRegion.setAttribute('aria-atomic', 'true');\n liveRegion.className = 'sr-only';\n liveRegion.style.cssText = 'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);';\n el.appendChild(liveRegion);\n\n const goTo = (index, announce) => {\n if (announce === undefined) announce = true;\n let target = index;\n if (state.loop) {\n target = ((index % state.total) + state.total) % state.total;\n } else {\n target = Math.max(0, Math.min(index, state.total - 1));\n }\n\n const prev = state.current;\n state.current = target;\n\n if (state.isFade) {\n slides.forEach((s, i) => {\n s.classList.toggle('is-active', i === target);\n });\n } else {\n track.style.transform = 'translateX(-' + (target * 100) + '%)';\n }\n\n // Update indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.classList.toggle('is-active', i === target);\n ind.setAttribute('aria-selected', i === target ? 'true' : 'false');\n });\n\n // Update slide ARIA\n slides.forEach((s, i) => {\n s.setAttribute('aria-hidden', i !== target ? 'true' : 'false');\n });\n\n if (announce) {\n liveRegion.textContent = 'Slide ' + (target + 1) + ' of ' + state.total;\n }\n\n el.dispatchEvent(new CustomEvent('flow:change', {\n detail: { current: target, previous: prev, total: state.total }\n }));\n };\n\n const next = () => goTo(state.current + 1);\n const prev = () => goTo(state.current - 1);\n\n // Controls\n const prevBtn = el.querySelector('.vd-flow-prev');\n const nextBtn = el.querySelector('.vd-flow-next');\n\n if (prevBtn) {\n const h = () => prev();\n prevBtn.addEventListener('click', h);\n cleanup.push(() => prevBtn.removeEventListener('click', h));\n }\n if (nextBtn) {\n const h = () => next();\n nextBtn.addEventListener('click', h);\n cleanup.push(() => nextBtn.removeEventListener('click', h));\n }\n\n // Indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.setAttribute('role', 'tab');\n ind.setAttribute('aria-selected', i === 0 ? 'true' : 'false');\n ind.setAttribute('aria-label', 'Go to slide ' + (i + 1));\n const h = () => goTo(i);\n ind.addEventListener('click', h);\n cleanup.push(() => ind.removeEventListener('click', h));\n });\n\n // Keyboard navigation\n const keyHandler = (e) => {\n if (e.key === 'ArrowLeft') { prev(); e.preventDefault(); }\n if (e.key === 'ArrowRight') { next(); e.preventDefault(); }\n };\n el.setAttribute('tabindex', '0');\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n // Touch / pointer support\n const pointerDown = (e) => {\n state.isDragging = true;\n state.startX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n state.currentX = state.startX;\n el.classList.add('is-dragging');\n };\n\n const pointerMove = (e) => {\n if (!state.isDragging) return;\n state.currentX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n };\n\n const pointerUp = () => {\n if (!state.isDragging) return;\n state.isDragging = false;\n el.classList.remove('is-dragging');\n const diff = state.startX - state.currentX;\n if (Math.abs(diff) > state.threshold) {\n if (diff > 0) next();\n else prev();\n }\n };\n\n el.addEventListener('mousedown', pointerDown);\n el.addEventListener('mousemove', pointerMove);\n el.addEventListener('mouseup', pointerUp);\n el.addEventListener('mouseleave', pointerUp);\n el.addEventListener('touchstart', pointerDown, { passive: true });\n el.addEventListener('touchmove', pointerMove, { passive: true });\n el.addEventListener('touchend', pointerUp);\n\n cleanup.push(\n () => el.removeEventListener('mousedown', pointerDown),\n () => el.removeEventListener('mousemove', pointerMove),\n () => el.removeEventListener('mouseup', pointerUp),\n () => el.removeEventListener('mouseleave', pointerUp),\n () => el.removeEventListener('touchstart', pointerDown),\n () => el.removeEventListener('touchmove', pointerMove),\n () => el.removeEventListener('touchend', pointerUp)\n );\n\n // Autoplay\n const startAutoplay = () => {\n stopAutoplay();\n state.autoplayTimer = setInterval(next, interval);\n };\n\n const stopAutoplay = () => {\n if (state.autoplayTimer) {\n clearInterval(state.autoplayTimer);\n state.autoplayTimer = null;\n }\n };\n\n if (autoplay) {\n startAutoplay();\n const pauseHandler = () => stopAutoplay();\n const resumeHandler = () => startAutoplay();\n el.addEventListener('mouseenter', pauseHandler);\n el.addEventListener('mouseleave', resumeHandler);\n el.addEventListener('focusin', pauseHandler);\n el.addEventListener('focusout', resumeHandler);\n cleanup.push(\n () => el.removeEventListener('mouseenter', pauseHandler),\n () => el.removeEventListener('mouseleave', resumeHandler),\n () => el.removeEventListener('focusin', pauseHandler),\n () => el.removeEventListener('focusout', resumeHandler),\n () => stopAutoplay()\n );\n }\n\n // Initial ARIA state\n goTo(0, false);\n\n this.instances.set(el, {\n cleanup: cleanup,\n goTo: goTo,\n next: next,\n prev: prev,\n getState: () => ({ ...state })\n });\n },\n\n goTo: function (el, index) {\n const instance = this.instances.get(el);\n if (instance) instance.goTo(index);\n },\n\n next: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.next();\n },\n\n prev: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.prev();\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('flow', Flow);\n }\n\n window.VanduoFlow = Flow;\n\n})();\n", "/**\n * Vanduo Framework - Bubble (Popover) Component\n * Click-triggered rich HTML popover, reuses tooltip positioning concepts\n */\n\n(function () {\n 'use strict';\n\n const Bubble = {\n instances: new Map(),\n _globalCleanups: [],\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-bubble], [data-vd-popover]');\n triggers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n\n if (this._globalCleanups.length === 0) {\n const outsideClick = (e) => {\n this.instances.forEach((inst, trigger) => {\n if (!inst.popover.contains(e.target) && !trigger.contains(e.target)) {\n this.hide(trigger);\n }\n });\n };\n const escHandler = (e) => {\n if (e.key === 'Escape') {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n }\n };\n document.addEventListener('click', outsideClick, true);\n document.addEventListener('keydown', escHandler);\n this._globalCleanups.push(\n () => document.removeEventListener('click', outsideClick, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n }\n },\n\n initInstance: function (trigger) {\n const cleanup = [];\n const placement = trigger.getAttribute('data-vd-bubble-placement') ||\n trigger.getAttribute('data-vd-popover-placement') || 'bottom';\n\n // Build popover element\n const popover = document.createElement('div');\n popover.className = 'vd-bubble-content';\n popover.setAttribute('role', 'dialog');\n popover.setAttribute('aria-modal', 'false');\n popover.setAttribute('data-placement', placement);\n\n const title = trigger.getAttribute('data-vd-bubble-title') ||\n trigger.getAttribute('data-vd-popover-title');\n const content = trigger.getAttribute('data-vd-bubble') ||\n trigger.getAttribute('data-vd-popover') || '';\n const htmlContent = trigger.getAttribute('data-vd-bubble-html') ||\n trigger.getAttribute('data-vd-popover-html');\n\n if (title) {\n const header = document.createElement('div');\n header.className = 'vd-bubble-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const closeBtn = document.createElement('button');\n closeBtn.className = 'vd-bubble-close';\n closeBtn.setAttribute('aria-label', 'Close');\n closeBtn.innerHTML = '×';\n header.appendChild(titleSpan);\n header.appendChild(closeBtn);\n popover.appendChild(header);\n\n const closeHandler = (e) => { e.stopPropagation(); this.hide(trigger); };\n closeBtn.addEventListener('click', closeHandler);\n cleanup.push(() => closeBtn.removeEventListener('click', closeHandler));\n }\n\n const body = document.createElement('div');\n body.className = 'vd-bubble-body';\n if (htmlContent) {\n if (typeof sanitizeHtml === 'function') {\n body.innerHTML = sanitizeHtml(htmlContent);\n } else {\n body.textContent = htmlContent;\n }\n } else {\n body.textContent = content;\n }\n popover.appendChild(body);\n\n document.body.appendChild(popover);\n\n // ARIA on trigger\n const popId = 'vd-bubble-' + Math.random().toString(36).slice(2, 9);\n popover.id = popId;\n trigger.setAttribute('aria-haspopup', 'dialog');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.setAttribute('aria-controls', popId);\n\n // Toggle on click\n const toggleHandler = (e) => {\n e.stopPropagation();\n if (popover.classList.contains('is-visible')) {\n this.hide(trigger);\n } else {\n this.hideAll();\n this.show(trigger);\n }\n };\n trigger.addEventListener('click', toggleHandler);\n cleanup.push(() => trigger.removeEventListener('click', toggleHandler));\n\n this.instances.set(trigger, { popover, cleanup, placement });\n },\n\n position: function (trigger, popover, placement) {\n const rect = trigger.getBoundingClientRect();\n const popRect = popover.getBoundingClientRect();\n const gap = 10;\n let top, left;\n\n switch (placement) {\n case 'top':\n top = rect.top - popRect.height - gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n break;\n case 'left':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.left - popRect.width - gap + window.scrollX;\n break;\n case 'right':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.right + gap + window.scrollX;\n break;\n default: // bottom\n top = rect.bottom + gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n }\n\n // Clamp to viewport\n left = Math.max(8, Math.min(left, window.innerWidth - popRect.width - 8));\n top = Math.max(8, top);\n\n popover.style.top = top + 'px';\n popover.style.left = left + 'px';\n },\n\n show: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n const { popover, placement } = instance;\n\n popover.style.display = 'block';\n popover.classList.add('is-visible');\n trigger.setAttribute('aria-expanded', 'true');\n\n requestAnimationFrame(() => {\n this.position(trigger, popover, placement);\n });\n\n trigger.dispatchEvent(new CustomEvent('bubble:show', { bubbles: true }));\n },\n\n hide: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.popover.classList.remove('is-visible');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.dispatchEvent(new CustomEvent('bubble:hide', { bubbles: true }));\n },\n\n hideAll: function () {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n },\n\n destroy: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n if (instance.popover.parentNode) {\n instance.popover.parentNode.removeChild(instance.popover);\n }\n trigger.removeAttribute('aria-haspopup');\n trigger.removeAttribute('aria-expanded');\n trigger.removeAttribute('aria-controls');\n this.instances.delete(trigger);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, trigger) => this.destroy(trigger));\n this._globalCleanups.forEach(fn => fn());\n this._globalCleanups = [];\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('bubble', Bubble);\n }\n\n window.VanduoBubble = Bubble;\n\n})();\n", "/**\n * Vanduo Framework - Waypoint (Scrollspy) Component\n * Highlights navigation links based on scroll position using IntersectionObserver\n */\n\n(function () {\n 'use strict';\n\n const Waypoint = {\n instances: new Map(),\n\n init: function () {\n const navs = document.querySelectorAll('[data-vd-waypoint-nav], [data-vd-scrollspy-nav]');\n navs.forEach(nav => {\n if (this.instances.has(nav)) return;\n this.initInstance(nav);\n });\n },\n\n initInstance: function (nav) {\n const links = Array.from(nav.querySelectorAll('a[href^=\"#\"]'));\n if (links.length === 0) return;\n\n const cleanup = [];\n const offset = parseInt(nav.getAttribute('data-vd-waypoint-offset') || '80', 10);\n const sections = [];\n\n links.forEach(link => {\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.setAttribute('data-vd-waypoint-section', '');\n sections.push({ id, link, section });\n }\n });\n\n if (sections.length === 0) return;\n\n const activeSections = new Set();\n\n const setActive = (id) => {\n links.forEach(l => l.classList.remove('is-active'));\n const target = links.find(l => l.getAttribute('href') === '#' + id);\n if (target) {\n target.classList.add('is-active');\n nav.dispatchEvent(new CustomEvent('waypoint:change', {\n detail: { activeId: id, link: target }\n }));\n }\n };\n\n const rootMargin = '-' + offset + 'px 0px -40% 0px';\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n activeSections.add(entry.target.id);\n } else {\n activeSections.delete(entry.target.id);\n }\n });\n\n // Pick the topmost visible section\n for (let i = 0; i < sections.length; i++) {\n if (activeSections.has(sections[i].id)) {\n setActive(sections[i].id);\n return;\n }\n }\n }, {\n rootMargin: rootMargin,\n threshold: 0\n });\n\n sections.forEach(s => observer.observe(s.section));\n\n // Smooth scroll on click\n links.forEach(link => {\n const clickHandler = (e) => {\n e.preventDefault();\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth' });\n setActive(id);\n }\n };\n link.addEventListener('click', clickHandler);\n cleanup.push(() => link.removeEventListener('click', clickHandler));\n });\n\n cleanup.push(() => observer.disconnect());\n\n this.instances.set(nav, { observer, cleanup, sections, setActive });\n },\n\n refresh: function (nav) {\n this.destroy(nav);\n this.initInstance(nav);\n },\n\n destroy: function (nav) {\n const instance = this.instances.get(nav);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(nav);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, nav) => this.destroy(nav));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('waypoint', Waypoint);\n }\n\n window.VanduoWaypoint = Waypoint;\n\n})();\n", "/**\n * Vanduo Framework - Ripple (Waves Effect) Component\n * Adds expanding circle animation on click at pointer position\n */\n\n(function () {\n 'use strict';\n\n const Ripple = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-ripple, [data-vd-ripple]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n\n const createWave = (e) => {\n const rect = el.getBoundingClientRect();\n const size = Math.max(rect.width, rect.height);\n const x = (e.clientX || (e.touches && e.touches[0].clientX) || rect.left + rect.width / 2) - rect.left - size / 2;\n const y = (e.clientY || (e.touches && e.touches[0].clientY) || rect.top + rect.height / 2) - rect.top - size / 2;\n\n const wave = document.createElement('span');\n wave.className = 'vd-ripple-wave';\n wave.style.width = size + 'px';\n wave.style.height = size + 'px';\n wave.style.left = x + 'px';\n wave.style.top = y + 'px';\n\n el.appendChild(wave);\n\n wave.addEventListener('animationend', () => {\n if (wave.parentNode) wave.parentNode.removeChild(wave);\n });\n };\n\n el.addEventListener('mousedown', createWave);\n el.addEventListener('touchstart', createWave, { passive: true });\n\n cleanup.push(\n () => el.removeEventListener('mousedown', createWave),\n () => el.removeEventListener('touchstart', createWave)\n );\n\n this.instances.set(el, { cleanup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n // Remove any lingering wave elements\n el.querySelectorAll('.vd-ripple-wave').forEach(w => w.remove());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('ripple', Ripple);\n }\n\n window.VanduoRipple = Ripple;\n\n})();\n", "/**\n * Vanduo Framework - Affix (Sticky) Component\n * Uses IntersectionObserver to toggle .is-stuck within the nearest scrollable parent\n */\n\n(function () {\n 'use strict';\n\n function isScrollable(element) {\n if (!element || element === document.body) return false;\n\n const style = window.getComputedStyle(element);\n const overflowY = style.overflowY;\n const overflowX = style.overflowX;\n const canScrollY = /(auto|scroll|overlay)/.test(overflowY) && element.scrollHeight > element.clientHeight;\n const canScrollX = /(auto|scroll|overlay)/.test(overflowX) && element.scrollWidth > element.clientWidth;\n\n return canScrollY || canScrollX;\n }\n\n function getScrollParent(element) {\n let parent = element.parentElement;\n\n while (parent && parent !== document.body && parent !== document.documentElement) {\n if (isScrollable(parent)) return parent;\n parent = parent.parentElement;\n }\n\n return null;\n }\n\n const Affix = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-affix, .vd-sticky, [data-vd-affix]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const parsedOffset = parseInt(el.getAttribute('data-vd-affix-offset') || '0', 10);\n const offset = Number.isNaN(parsedOffset) ? 0 : parsedOffset;\n const scrollParent = getScrollParent(el);\n let isStuck = false;\n\n const sentinel = document.createElement('div');\n sentinel.style.cssText = 'display:block;height:1px;margin-bottom:-1px;visibility:hidden;pointer-events:none;';\n el.parentNode.insertBefore(sentinel, el);\n\n el.style.setProperty('--affix-top-offset', offset + 'px');\n\n function stick() {\n if (isStuck) return;\n isStuck = true;\n el.classList.add('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:stuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n function unstick() {\n if (!isStuck) return;\n isStuck = false;\n el.classList.remove('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:unstuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n const observer = new IntersectionObserver(function (entries) {\n entries.forEach(entry => {\n if (!entry.isIntersecting) {\n stick();\n } else {\n unstick();\n }\n });\n }, {\n root: scrollParent,\n rootMargin: '-' + offset + 'px 0px 0px 0px',\n threshold: 0\n });\n\n observer.observe(sentinel);\n\n cleanup.push(\n () => observer.disconnect(),\n () => { if (sentinel.parentNode) sentinel.parentNode.removeChild(sentinel); },\n () => {\n el.classList.remove('is-stuck');\n el.style.removeProperty('--affix-top-offset');\n }\n );\n\n this.instances.set(el, { cleanup, observer, sentinel, scrollParent });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n el.classList.remove('is-stuck');\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('affix', Affix);\n }\n\n window.VanduoAffix = Affix;\n\n})();\n", "/**\n * Vanduo Framework - Suggest (Autocomplete) Component\n * Dropdown suggestion list with keyboard navigation, static/async data sources\n */\n\n(function () {\n 'use strict';\n\n /**\n * Escape HTML entities to prevent XSS when inserting into innerHTML\n * @param {string} text\n * @returns {string}\n */\n function _escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n const Suggest = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-suggest], [data-vd-autocomplete]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const minChars = parseInt(input.getAttribute('data-vd-suggest-min-chars') || '1', 10);\n const url = input.getAttribute('data-vd-suggest-url') || '';\n const staticData = input.getAttribute('data-vd-suggest') || input.getAttribute('data-vd-autocomplete') || '';\n let items = [];\n\n try { items = JSON.parse(staticData); } catch (_e) {\n items = staticData.split(',').map(s => s.trim()).filter(Boolean);\n }\n\n // Wrap input if not already wrapped\n let wrapper = input.closest('.vd-suggest-wrapper, .vd-autocomplete-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create dropdown list\n const list = document.createElement('ul');\n list.className = 'vd-suggest-list';\n list.setAttribute('role', 'listbox');\n const listId = 'vd-suggest-' + Math.random().toString(36).slice(2, 9);\n list.id = listId;\n wrapper.appendChild(list);\n\n // ARIA\n input.setAttribute('role', 'combobox');\n input.setAttribute('aria-autocomplete', 'list');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('aria-controls', listId);\n input.setAttribute('autocomplete', 'off');\n\n let highlighted = -1;\n let currentItems = [];\n let debounceTimer = null;\n\n const renderItems = (filtered, query) => {\n list.innerHTML = '';\n currentItems = filtered;\n highlighted = -1;\n\n if (filtered.length === 0) {\n const empty = document.createElement('li');\n empty.className = 'vd-suggest-empty';\n empty.textContent = 'No results';\n list.appendChild(empty);\n return;\n }\n\n filtered.forEach((item, i) => {\n const li = document.createElement('li');\n li.className = 'vd-suggest-item';\n li.setAttribute('role', 'option');\n li.id = listId + '-item-' + i;\n\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n if (query) {\n // Escape HTML first to prevent XSS, then highlight matches in the safe string\n const escaped = _escapeHtml(text);\n const re = new RegExp('(' + query.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n li.innerHTML = escaped.replace(re, '$1');\n } else {\n li.textContent = text;\n }\n\n li.addEventListener('click', () => selectItem(i));\n list.appendChild(li);\n });\n };\n\n const open = () => {\n list.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n list.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n highlighted = -1;\n input.removeAttribute('aria-activedescendant');\n };\n\n const selectItem = (index) => {\n const item = currentItems[index];\n const value = typeof item === 'object' ? (item.value || item.label || String(item)) : String(item);\n input.value = value;\n close();\n input.dispatchEvent(new CustomEvent('suggest:select', {\n detail: { value, item, index },\n bubbles: true\n }));\n };\n\n const highlight = (index) => {\n const listItems = list.querySelectorAll('.vd-suggest-item');\n listItems.forEach(li => li.classList.remove('is-highlighted'));\n if (index >= 0 && index < listItems.length) {\n highlighted = index;\n listItems[index].classList.add('is-highlighted');\n input.setAttribute('aria-activedescendant', listItems[index].id);\n listItems[index].scrollIntoView({ block: 'nearest' });\n }\n };\n\n const doSearch = async (query) => {\n if (query.length < minChars) { close(); return; }\n\n let filtered;\n if (url) {\n try {\n const separator = url.includes('?') ? '&' : '?';\n const res = await window.fetch(url + separator + 'q=' + encodeURIComponent(query));\n filtered = await res.json();\n } catch (_e) {\n filtered = [];\n }\n } else {\n const lower = query.toLowerCase();\n filtered = items.filter(item => {\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n return text.toLowerCase().includes(lower);\n });\n }\n\n renderItems(filtered, query);\n if (filtered.length > 0) open();\n else open(); // show \"no results\"\n };\n\n const inputHandler = () => {\n clearTimeout(debounceTimer);\n debounceTimer = setTimeout(() => doSearch(input.value), 200);\n };\n\n const keyHandler = (e) => {\n if (!list.classList.contains('is-open')) {\n if (e.key === 'ArrowDown') { doSearch(input.value); e.preventDefault(); }\n return;\n }\n\n const total = currentItems.length;\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n highlight(highlighted < total - 1 ? highlighted + 1 : 0);\n break;\n case 'ArrowUp':\n e.preventDefault();\n highlight(highlighted > 0 ? highlighted - 1 : total - 1);\n break;\n case 'Enter':\n e.preventDefault();\n if (highlighted >= 0) selectItem(highlighted);\n break;\n case 'Escape':\n close();\n break;\n }\n };\n\n const blurHandler = () => {\n setTimeout(close, 200);\n };\n\n input.addEventListener('input', inputHandler);\n input.addEventListener('keydown', keyHandler);\n input.addEventListener('blur', blurHandler);\n input.addEventListener('focus', () => { if (input.value.length >= minChars) doSearch(input.value); });\n\n cleanup.push(\n () => input.removeEventListener('input', inputHandler),\n () => input.removeEventListener('keydown', keyHandler),\n () => input.removeEventListener('blur', blurHandler),\n () => clearTimeout(debounceTimer),\n () => { if (list.parentNode) list.parentNode.removeChild(list); }\n );\n\n this.instances.set(input, { cleanup, list, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('suggest', Suggest);\n }\n\n window.VanduoSuggest = Suggest;\n\n})();\n", "/**\n * Vanduo Framework - Validate (Form Validation) Component\n * Declarative validation via data attributes with real-time and on-submit modes\n */\n\n(function () {\n 'use strict';\n\n const Validate = {\n instances: new Map(),\n\n rules: {\n required: (value) => value.trim().length > 0,\n email: (value) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value),\n url: (value) => { try { new URL(value); return true; } catch (_e) { return false; } },\n number: (value) => !isNaN(parseFloat(value)) && isFinite(value),\n min: (value, param) => value.length >= parseInt(param, 10),\n max: (value, param) => value.length <= parseInt(param, 10),\n minVal: (value, param) => parseFloat(value) >= parseFloat(param),\n maxVal: (value, param) => parseFloat(value) <= parseFloat(param),\n pattern: (value, param) => {\n try {\n // Cap regex length to prevent ReDoS from excessively complex patterns\n if (param.length > 100) return false;\n return new RegExp(param).test(value);\n } catch (_e) { return false; }\n },\n match: (value, param) => {\n try {\n const escaped = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(param) : param;\n const other = document.querySelector('[name=\"' + escaped + '\"]');\n return other ? value === other.value : false;\n } catch (_e) {\n return false;\n }\n }\n },\n\n messages: {\n required: 'This field is required',\n email: 'Please enter a valid email address',\n url: 'Please enter a valid URL',\n number: 'Please enter a valid number',\n min: 'Minimum {0} characters required',\n max: 'Maximum {0} characters allowed',\n minVal: 'Value must be at least {0}',\n maxVal: 'Value must be at most {0}',\n pattern: 'Invalid format',\n match: 'Fields do not match'\n },\n\n init: function () {\n const forms = document.querySelectorAll('[data-vd-validate], .vd-validate');\n forms.forEach(form => {\n if (this.instances.has(form)) return;\n this.initInstance(form);\n });\n },\n\n initInstance: function (form) {\n const cleanup = [];\n const mode = form.getAttribute('data-vd-validate-mode') || 'blur'; // blur | input | submit\n const fields = form.querySelectorAll('[data-vd-rules]');\n\n const validateField = (field) => {\n const rulesStr = field.getAttribute('data-vd-rules') || '';\n const rules = rulesStr.split('|').map(r => r.trim()).filter(Boolean);\n const value = field.value;\n const errors = [];\n\n for (const rule of rules) {\n const [name, ...params] = rule.split(':');\n const param = params.join(':');\n const validator = this.rules[name];\n\n if (validator && !validator(value, param)) {\n const customMsg = field.getAttribute('data-vd-msg-' + name);\n let msg = customMsg || this.messages[name] || 'Invalid';\n if (param) msg = msg.replace('{0}', param);\n errors.push(msg);\n break; // one error at a time\n }\n }\n\n this.setFieldState(field, errors);\n return errors.length === 0;\n };\n\n const validateAll = () => {\n let valid = true;\n fields.forEach(field => {\n if (!validateField(field)) valid = false;\n });\n return valid;\n };\n\n // Per-field listeners\n fields.forEach(field => {\n if (mode === 'input' || mode === 'blur') {\n const eventType = mode === 'input' ? 'input' : 'blur';\n const handler = () => validateField(field);\n field.addEventListener(eventType, handler);\n cleanup.push(() => field.removeEventListener(eventType, handler));\n\n if (mode === 'blur') {\n const inputClear = () => {\n if (field.classList.contains('is-invalid') || field.classList.contains('is-valid')) {\n validateField(field);\n }\n };\n field.addEventListener('input', inputClear);\n cleanup.push(() => field.removeEventListener('input', inputClear));\n }\n }\n });\n\n // Form submit\n const submitHandler = (e) => {\n const valid = validateAll();\n if (!valid) {\n e.preventDefault();\n e.stopPropagation();\n // Focus first invalid field\n const firstInvalid = form.querySelector('.is-invalid');\n if (firstInvalid) firstInvalid.focus();\n }\n form.dispatchEvent(new CustomEvent('validate:submit', {\n detail: { valid },\n bubbles: true\n }));\n };\n\n form.addEventListener('submit', submitHandler);\n cleanup.push(() => form.removeEventListener('submit', submitHandler));\n\n this.instances.set(form, { cleanup, validateAll, validateField });\n },\n\n setFieldState: function (field, errors) {\n const wrapper = field.closest('.vd-form-group') || field.parentElement;\n let errorEl = wrapper.querySelector('.vd-validate-error');\n\n field.classList.remove('is-valid', 'is-invalid');\n\n if (errors.length > 0) {\n field.classList.add('is-invalid');\n field.setAttribute('aria-invalid', 'true');\n if (!errorEl) {\n errorEl = document.createElement('div');\n errorEl.className = 'vd-validate-error';\n errorEl.id = 'vd-err-' + Math.random().toString(36).slice(2, 9);\n errorEl.setAttribute('role', 'alert');\n wrapper.appendChild(errorEl);\n }\n errorEl.textContent = errors[0];\n errorEl.style.display = '';\n field.setAttribute('aria-describedby', errorEl.id);\n } else if (field.value.trim()) {\n field.classList.add('is-valid');\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n } else {\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n }\n },\n\n validateForm: function (form) {\n const instance = this.instances.get(form);\n return instance ? instance.validateAll() : false;\n },\n\n addRule: function (name, validator, message) {\n this.rules[name] = validator;\n if (message) this.messages[name] = message;\n },\n\n destroy: function (form) {\n const instance = this.instances.get(form);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(form);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, form) => this.destroy(form));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('validate', Validate);\n }\n\n window.VanduoValidate = Validate;\n\n})();\n", "/**\n * Vanduo Framework - Datepicker Component\n * Calendar popup attached to input field with month/year navigation\n */\n\n(function () {\n 'use strict';\n\n const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\n const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];\n\n const Datepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-datepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const format = input.getAttribute('data-vd-datepicker-format') || 'yyyy-mm-dd';\n const minStr = input.getAttribute('data-vd-datepicker-min');\n const maxStr = input.getAttribute('data-vd-datepicker-max');\n const minDate = minStr ? new Date(minStr) : null;\n const maxDate = maxStr ? new Date(maxStr) : null;\n\n const today = new Date();\n let viewYear = today.getFullYear();\n let viewMonth = today.getMonth();\n let selectedDate = null;\n let viewMode = 'days'; // days | months | years\n\n // Parse existing value\n if (input.value) {\n const parsed = new Date(input.value);\n if (!isNaN(parsed.getTime())) {\n selectedDate = parsed;\n viewYear = parsed.getFullYear();\n viewMonth = parsed.getMonth();\n }\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-datepicker-popup';\n popup.setAttribute('role', 'dialog');\n popup.setAttribute('aria-label', 'Choose date');\n\n const wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n wrapper.appendChild(popup);\n\n const formatDate = (d) => {\n const yyyy = d.getFullYear();\n const mm = String(d.getMonth() + 1).padStart(2, '0');\n const dd = String(d.getDate()).padStart(2, '0');\n return format.replace('yyyy', yyyy).replace('mm', mm).replace('dd', dd);\n };\n\n const isDisabled = (d) => {\n if (minDate && d < minDate) return true;\n if (maxDate && d > maxDate) return true;\n return false;\n };\n\n const isSameDay = (a, b) => a && b &&\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate();\n\n const render = () => {\n popup.innerHTML = '';\n\n // Header\n const header = document.createElement('div');\n header.className = 'vd-datepicker-header';\n\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-datepicker-prev';\n prevBtn.innerHTML = '‹';\n prevBtn.setAttribute('aria-label', 'Previous');\n\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-datepicker-next';\n nextBtn.innerHTML = '›';\n nextBtn.setAttribute('aria-label', 'Next');\n\n const title = document.createElement('span');\n title.className = 'vd-datepicker-title';\n\n if (viewMode === 'days') {\n title.textContent = MONTHS[viewMonth] + ' ' + viewYear;\n title.addEventListener('click', () => { viewMode = 'months'; render(); });\n prevBtn.addEventListener('click', () => { viewMonth--; if (viewMonth < 0) { viewMonth = 11; viewYear--; } render(); });\n nextBtn.addEventListener('click', () => { viewMonth++; if (viewMonth > 11) { viewMonth = 0; viewYear++; } render(); });\n } else if (viewMode === 'months') {\n title.textContent = String(viewYear);\n title.addEventListener('click', () => { viewMode = 'years'; render(); });\n prevBtn.addEventListener('click', () => { viewYear--; render(); });\n nextBtn.addEventListener('click', () => { viewYear++; render(); });\n } else {\n const decadeStart = Math.floor(viewYear / 10) * 10;\n title.textContent = decadeStart + ' - ' + (decadeStart + 9);\n prevBtn.addEventListener('click', () => { viewYear -= 10; render(); });\n nextBtn.addEventListener('click', () => { viewYear += 10; render(); });\n }\n\n header.appendChild(prevBtn);\n header.appendChild(title);\n header.appendChild(nextBtn);\n popup.appendChild(header);\n\n if (viewMode === 'days') {\n // Weekday headers\n const weekdays = document.createElement('div');\n weekdays.className = 'vd-datepicker-weekdays';\n DAYS.forEach(d => {\n const span = document.createElement('span');\n span.textContent = d;\n weekdays.appendChild(span);\n });\n popup.appendChild(weekdays);\n\n // Days grid\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-days';\n\n const firstDay = new Date(viewYear, viewMonth, 1).getDay();\n const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();\n const daysInPrev = new Date(viewYear, viewMonth, 0).getDate();\n\n // Previous month padding\n for (let i = firstDay - 1; i >= 0; i--) {\n const btn = createDayBtn(daysInPrev - i, true);\n grid.appendChild(btn);\n }\n\n // Current month\n for (let d = 1; d <= daysInMonth; d++) {\n const date = new Date(viewYear, viewMonth, d);\n const btn = createDayBtn(d, false, date);\n grid.appendChild(btn);\n }\n\n // Next month padding\n const totalCells = firstDay + daysInMonth;\n const remaining = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7);\n for (let i = 1; i <= remaining; i++) {\n const btn = createDayBtn(i, true);\n grid.appendChild(btn);\n }\n\n popup.appendChild(grid);\n } else if (viewMode === 'months') {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-months';\n MONTHS.forEach((name, i) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-month-btn';\n btn.textContent = name.slice(0, 3);\n if (selectedDate && selectedDate.getFullYear() === viewYear && selectedDate.getMonth() === i) {\n btn.classList.add('is-selected');\n }\n btn.addEventListener('click', () => { viewMonth = i; viewMode = 'days'; render(); });\n grid.appendChild(btn);\n });\n popup.appendChild(grid);\n } else {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-years';\n const decadeStart = Math.floor(viewYear / 10) * 10;\n for (let y = decadeStart - 1; y <= decadeStart + 10; y++) {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-year-btn';\n btn.textContent = y;\n if (selectedDate && selectedDate.getFullYear() === y) btn.classList.add('is-selected');\n if (y < decadeStart || y > decadeStart + 9) btn.style.opacity = '0.4';\n btn.addEventListener('click', () => { viewYear = y; viewMode = 'months'; render(); });\n grid.appendChild(btn);\n }\n popup.appendChild(grid);\n }\n };\n\n const createDayBtn = (day, outside, date) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-day';\n btn.textContent = day;\n\n if (outside) {\n btn.classList.add('is-outside');\n btn.tabIndex = -1;\n return btn;\n }\n\n if (date && isSameDay(date, today)) btn.classList.add('is-today');\n if (date && isSameDay(date, selectedDate)) btn.classList.add('is-selected');\n if (date && isDisabled(date)) {\n btn.classList.add('is-disabled');\n return btn;\n }\n\n if (date) {\n btn.addEventListener('click', () => {\n selectedDate = date;\n viewYear = date.getFullYear();\n viewMonth = date.getMonth();\n input.value = formatDate(date);\n close();\n input.dispatchEvent(new CustomEvent('datepicker:select', {\n detail: { date, formatted: input.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n }\n\n return btn;\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n viewMode = 'days';\n };\n\n // Events\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'dialog');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close, popup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('datepicker', Datepicker);\n }\n\n window.VanduoDatepicker = Datepicker;\n\n})();\n", "/**\n * Vanduo Framework - Timepicker Component\n * Dropdown time selection with 12h/24h format and configurable step intervals\n */\n\n(function () {\n 'use strict';\n\n const Timepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-timepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const is24h = input.getAttribute('data-vd-timepicker-format') === '24h';\n const step = parseInt(input.getAttribute('data-vd-timepicker-step') || '30', 10);\n\n // Create wrapper\n let wrapper = input.closest('.vd-suggest-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-timepicker-popup';\n popup.setAttribute('role', 'listbox');\n wrapper.appendChild(popup);\n\n // Generate time slots\n const times = [];\n for (let h = 0; h < 24; h++) {\n for (let m = 0; m < 60; m += step) {\n const hh24 = String(h).padStart(2, '0');\n const mm = String(m).padStart(2, '0');\n\n if (is24h) {\n times.push({ display: hh24 + ':' + mm, value: hh24 + ':' + mm });\n } else {\n const period = h < 12 ? 'AM' : 'PM';\n const h12 = h === 0 ? 12 : (h > 12 ? h - 12 : h);\n const display = h12 + ':' + mm + ' ' + period;\n times.push({ display, value: hh24 + ':' + mm });\n }\n }\n }\n\n const render = () => {\n popup.innerHTML = '';\n times.forEach(t => {\n const item = document.createElement('div');\n item.className = 'vd-timepicker-item';\n item.setAttribute('role', 'option');\n item.textContent = t.display;\n\n if (input.value === t.value || input.value === t.display) {\n item.classList.add('is-selected');\n }\n\n item.addEventListener('click', () => {\n input.value = t.display;\n popup.querySelectorAll('.vd-timepicker-item').forEach(i => i.classList.remove('is-selected'));\n item.classList.add('is-selected');\n close();\n input.dispatchEvent(new CustomEvent('timepicker:select', {\n detail: { display: t.display, value: t.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n\n popup.appendChild(item);\n });\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n // Scroll to selected\n const selected = popup.querySelector('.is-selected');\n if (selected) selected.scrollIntoView({ block: 'center' });\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n };\n\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'listbox');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n input.readOnly = true;\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('timepicker', Timepicker);\n }\n\n window.VanduoTimepicker = Timepicker;\n\n})();\n", "/**\n * Vanduo Framework - Stepper Component\n * Multi-step progress indicator with state management\n */\n\n(function () {\n 'use strict';\n\n const Stepper = {\n instances: new Map(),\n\n init: function () {\n const steppers = document.querySelectorAll('.vd-stepper');\n steppers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const items = Array.from(el.querySelectorAll('.vd-stepper-item'));\n const isClickable = el.classList.contains('vd-stepper-clickable');\n let currentIndex = items.findIndex(i => i.classList.contains('is-active'));\n if (currentIndex === -1) currentIndex = 0;\n\n const setStep = (index) => {\n if (index < 0 || index >= items.length) return;\n const prev = currentIndex;\n currentIndex = index;\n\n items.forEach((item, i) => {\n item.classList.remove('is-active', 'is-completed');\n if (i < index) item.classList.add('is-completed');\n else if (i === index) item.classList.add('is-active');\n });\n\n el.dispatchEvent(new CustomEvent('stepper:change', {\n detail: { current: index, previous: prev, total: items.length },\n bubbles: true\n }));\n };\n\n if (isClickable) {\n items.forEach((item, i) => {\n const handler = () => setStep(i);\n item.addEventListener('click', handler);\n cleanup.push(() => item.removeEventListener('click', handler));\n });\n }\n\n // Initialize current state\n setStep(currentIndex);\n\n this.instances.set(el, {\n cleanup,\n setStep,\n next: () => setStep(currentIndex + 1),\n prev: () => setStep(currentIndex - 1),\n getCurrent: () => currentIndex\n });\n },\n\n setStep: function (el, index) {\n const inst = this.instances.get(el);\n if (inst) inst.setStep(index);\n },\n\n next: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.next();\n },\n\n prev: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.prev();\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('stepper', Stepper);\n }\n\n window.VanduoStepper = Stepper;\n\n})();\n", "/**\n * Vanduo Framework - Rating Component\n * Star-based rating input with hover preview and read-only mode\n */\n\n(function () {\n 'use strict';\n\n const Rating = {\n instances: new Map(),\n\n init: function () {\n const ratings = document.querySelectorAll('[data-vd-rating]');\n ratings.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const max = parseInt(el.getAttribute('data-vd-rating-max') || '5', 10);\n const initialValue = parseFloat(el.getAttribute('data-vd-rating-value') || '0');\n const readonly = el.classList.contains('vd-rating-readonly') || el.hasAttribute('data-vd-rating-readonly');\n let currentValue = initialValue;\n\n el.classList.add('vd-rating');\n el.setAttribute('role', 'radiogroup');\n el.setAttribute('aria-label', el.getAttribute('aria-label') || 'Rating');\n\n // Clear existing stars\n el.innerHTML = '';\n\n // Create stars\n const stars = [];\n for (let i = 1; i <= max; i++) {\n const star = document.createElement('button');\n star.type = 'button';\n star.className = 'vd-rating-star';\n star.setAttribute('role', 'radio');\n star.setAttribute('aria-label', i + ' star' + (i > 1 ? 's' : ''));\n star.setAttribute('aria-checked', i <= currentValue ? 'true' : 'false');\n if (readonly) star.tabIndex = -1;\n stars.push(star);\n el.appendChild(star);\n }\n\n // Value display\n const valueDisplay = document.createElement('span');\n valueDisplay.className = 'vd-rating-value';\n valueDisplay.textContent = currentValue > 0 ? currentValue.toString() : '';\n el.appendChild(valueDisplay);\n\n const updateStars = (value) => {\n stars.forEach((star, i) => {\n star.classList.remove('is-active', 'is-half');\n const starNum = i + 1;\n if (starNum <= Math.floor(value)) {\n star.classList.add('is-active');\n } else if (starNum - 0.5 <= value) {\n star.classList.add('is-half');\n }\n star.setAttribute('aria-checked', starNum <= value ? 'true' : 'false');\n });\n valueDisplay.textContent = value > 0 ? value.toString() : '';\n };\n\n updateStars(currentValue);\n\n if (!readonly) {\n stars.forEach((star, i) => {\n const enterHandler = () => {\n stars.forEach((s, j) => {\n s.classList.toggle('is-hovered', j <= i);\n });\n };\n const leaveHandler = () => {\n stars.forEach(s => s.classList.remove('is-hovered'));\n };\n const clickHandler = () => {\n currentValue = i + 1;\n el.setAttribute('data-vd-rating-value', currentValue);\n updateStars(currentValue);\n el.dispatchEvent(new CustomEvent('rating:change', {\n detail: { value: currentValue, max },\n bubbles: true\n }));\n };\n\n star.addEventListener('mouseenter', enterHandler);\n star.addEventListener('mouseleave', leaveHandler);\n star.addEventListener('click', clickHandler);\n\n cleanup.push(\n () => star.removeEventListener('mouseenter', enterHandler),\n () => star.removeEventListener('mouseleave', leaveHandler),\n () => star.removeEventListener('click', clickHandler)\n );\n });\n\n // Keyboard\n const keyHandler = (e) => {\n if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n e.preventDefault();\n if (currentValue < max) {\n currentValue++;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n e.preventDefault();\n if (currentValue > 1) {\n currentValue--;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n }\n };\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n }\n\n this.instances.set(el, {\n cleanup,\n getValue: () => currentValue,\n setValue: (v) => { currentValue = v; updateStars(v); }\n });\n },\n\n getValue: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getValue() : 0;\n },\n\n setValue: function (el, value) {\n const inst = this.instances.get(el);\n if (inst) inst.setValue(value);\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('rating', Rating);\n }\n\n window.VanduoRating = Rating;\n\n})();\n", "/**\n * Vanduo Framework - Transfer (Dual-list) Component\n * Source-to-target list transfer with search, select-all, and move actions\n */\n\n(function () {\n 'use strict';\n\n const Transfer = {\n instances: new Map(),\n\n init: function () {\n const transfers = document.querySelectorAll('[data-vd-transfer]');\n transfers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n el.classList.add('vd-transfer');\n\n let sourceData, targetData;\n try {\n const raw = JSON.parse(el.getAttribute('data-vd-transfer') || '[]');\n sourceData = raw.map((item, i) => ({\n id: item.id || 'item-' + i,\n label: item.label || item.text || String(item),\n selected: false\n }));\n } catch (_e) {\n sourceData = [];\n }\n targetData = [];\n\n const sourceSelected = new Set();\n const targetSelected = new Set();\n\n const render = () => {\n el.innerHTML = '';\n\n // Source panel\n const sourcePanel = createPanel('Source', sourceData, sourceSelected, 'source');\n // Actions\n const actions = document.createElement('div');\n actions.className = 'vd-transfer-actions';\n\n const moveRightBtn = document.createElement('button');\n moveRightBtn.type = 'button';\n moveRightBtn.className = 'vd-transfer-btn';\n moveRightBtn.innerHTML = '›';\n moveRightBtn.setAttribute('aria-label', 'Move to target');\n moveRightBtn.disabled = sourceSelected.size === 0;\n moveRightBtn.addEventListener('click', () => moveRight());\n\n const moveLeftBtn = document.createElement('button');\n moveLeftBtn.type = 'button';\n moveLeftBtn.className = 'vd-transfer-btn';\n moveLeftBtn.innerHTML = '‹';\n moveLeftBtn.setAttribute('aria-label', 'Move to source');\n moveLeftBtn.disabled = targetSelected.size === 0;\n moveLeftBtn.addEventListener('click', () => moveLeft());\n\n actions.appendChild(moveRightBtn);\n actions.appendChild(moveLeftBtn);\n\n // Target panel\n const targetPanel = createPanel('Target', targetData, targetSelected, 'target');\n\n el.appendChild(sourcePanel);\n el.appendChild(actions);\n el.appendChild(targetPanel);\n };\n\n const createPanel = (title, data, selected, _side) => {\n const panel = document.createElement('div');\n panel.className = 'vd-transfer-panel';\n\n const header = document.createElement('div');\n header.className = 'vd-transfer-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const count = document.createElement('span');\n count.className = 'vd-transfer-count';\n count.textContent = selected.size + '/' + data.length;\n header.appendChild(titleSpan);\n header.appendChild(count);\n panel.appendChild(header);\n\n // Search\n const searchDiv = document.createElement('div');\n searchDiv.className = 'vd-transfer-search';\n const searchInput = document.createElement('input');\n searchInput.type = 'text';\n searchInput.placeholder = 'Search...';\n searchInput.setAttribute('aria-label', 'Search ' + title.toLowerCase());\n searchDiv.appendChild(searchInput);\n panel.appendChild(searchDiv);\n\n // List\n const list = document.createElement('ul');\n list.className = 'vd-transfer-list';\n list.setAttribute('role', 'listbox');\n\n const renderList = (filter) => {\n list.innerHTML = '';\n const filtered = filter ? data.filter(d => {\n const label = (d.label || d.text || String(d)).toLowerCase();\n return label.includes(filter.toLowerCase());\n }) : data;\n filtered.forEach(item => {\n const li = document.createElement('li');\n li.className = 'vd-transfer-item';\n li.setAttribute('role', 'option');\n if (selected.has(item.id)) li.classList.add('is-selected');\n\n const checkbox = document.createElement('input');\n checkbox.type = 'checkbox';\n checkbox.checked = selected.has(item.id);\n checkbox.setAttribute('aria-label', item.label);\n\n const label = document.createElement('span');\n label.textContent = item.label;\n\n li.addEventListener('click', () => {\n if (selected.has(item.id)) selected.delete(item.id);\n else selected.add(item.id);\n render();\n });\n\n li.appendChild(checkbox);\n li.appendChild(label);\n list.appendChild(li);\n });\n };\n\n searchInput.addEventListener('input', () => renderList(searchInput.value));\n renderList('');\n\n panel.appendChild(list);\n return panel;\n };\n\n const moveRight = () => {\n const toMove = sourceData.filter(d => sourceSelected.has(d.id));\n sourceData = sourceData.filter(d => !sourceSelected.has(d.id));\n targetData = targetData.concat(toMove);\n sourceSelected.clear();\n render();\n fireChange();\n };\n\n const moveLeft = () => {\n const toMove = targetData.filter(d => targetSelected.has(d.id));\n targetData = targetData.filter(d => !targetSelected.has(d.id));\n sourceData = sourceData.concat(toMove);\n targetSelected.clear();\n render();\n fireChange();\n };\n\n const fireChange = () => {\n el.dispatchEvent(new CustomEvent('transfer:change', {\n detail: {\n source: sourceData.map(d => d.id),\n target: targetData.map(d => d.id)\n },\n bubbles: true\n }));\n };\n\n render();\n\n this.instances.set(el, {\n cleanup,\n getTarget: () => targetData.map(d => d.id),\n getSource: () => sourceData.map(d => d.id)\n });\n },\n\n getSelected: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getTarget() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('transfer', Transfer);\n }\n\n window.VanduoTransfer = Transfer;\n\n})();\n", "/**\n * Vanduo Framework - Tree View Component\n * Hierarchical collapsible tree with checkbox selection and keyboard navigation\n */\n\n(function () {\n 'use strict';\n\n const Tree = {\n instances: new Map(),\n\n init: function () {\n const trees = document.querySelectorAll('[data-vd-tree]');\n trees.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const cascade = el.getAttribute('data-vd-tree-cascade') !== 'false';\n\n let data;\n try { data = JSON.parse(el.getAttribute('data-vd-tree') || '[]'); } catch (_e) { data = []; }\n\n el.classList.add('vd-tree');\n el.setAttribute('role', 'tree');\n\n const render = (items, parent) => {\n parent.innerHTML = '';\n items.forEach(item => {\n const node = document.createElement('li');\n node.className = 'vd-tree-node';\n node.setAttribute('role', 'treeitem');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n if (item.open) node.classList.add('is-open');\n\n const content = document.createElement('div');\n content.className = 'vd-tree-node-content';\n\n // Toggle\n if (item.children && item.children.length > 0) {\n const toggle = document.createElement('button');\n toggle.type = 'button';\n toggle.className = 'vd-tree-toggle';\n toggle.setAttribute('aria-label', 'Toggle');\n toggle.addEventListener('click', (e) => {\n e.stopPropagation();\n item.open = !item.open;\n node.classList.toggle('is-open');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n });\n content.appendChild(toggle);\n } else {\n const ph = document.createElement('span');\n ph.className = 'vd-tree-toggle-placeholder';\n content.appendChild(ph);\n }\n\n // Checkbox\n if (el.hasAttribute('data-vd-tree-checkbox')) {\n const cb = document.createElement('input');\n cb.type = 'checkbox';\n cb.className = 'vd-tree-checkbox';\n cb.checked = !!item.checked;\n cb.setAttribute('aria-label', item.label);\n cb.addEventListener('change', (e) => {\n e.stopPropagation();\n item.checked = cb.checked;\n if (cascade && item.children) {\n setChildChecked(item.children, cb.checked);\n render(data, el);\n }\n el.dispatchEvent(new CustomEvent('tree:check', {\n detail: { id: item.id, checked: cb.checked, label: item.label },\n bubbles: true\n }));\n });\n content.appendChild(cb);\n }\n\n // Icon\n if (item.icon) {\n const icon = document.createElement('span');\n icon.className = 'vd-tree-icon ' + item.icon;\n content.appendChild(icon);\n }\n\n // Label\n const label = document.createElement('span');\n label.className = 'vd-tree-label';\n label.textContent = item.label || '';\n content.appendChild(label);\n\n node.appendChild(content);\n\n // Children\n if (item.children && item.children.length > 0) {\n const childList = document.createElement('ul');\n childList.className = 'vd-tree-children';\n childList.setAttribute('role', 'group');\n render(item.children, childList);\n node.appendChild(childList);\n }\n\n parent.appendChild(node);\n });\n };\n\n const setChildChecked = (items, checked) => {\n items.forEach(item => {\n item.checked = checked;\n if (item.children) setChildChecked(item.children, checked);\n });\n };\n\n // Keyboard\n const keyHandler = (e) => {\n const focused = document.activeElement;\n if (!el.contains(focused)) return;\n\n const nodes = Array.from(el.querySelectorAll('.vd-tree-node-content'));\n const idx = nodes.indexOf(focused.closest('.vd-tree-node-content'));\n if (idx === -1) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (idx < nodes.length - 1) {\n const next = nodes[idx + 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (next) next.focus();\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (idx > 0) {\n const prev = nodes[idx - 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (prev) prev.focus();\n }\n break;\n }\n };\n\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n render(data, el);\n\n this.instances.set(el, {\n cleanup,\n getData: () => data,\n getChecked: () => {\n const checked = [];\n const collect = (items) => {\n items.forEach(i => {\n if (i.checked) checked.push(i.id || i.label);\n if (i.children) collect(i.children);\n });\n };\n collect(data);\n return checked;\n }\n });\n },\n\n getChecked: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getChecked() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tree', Tree);\n }\n\n window.VanduoTree = Tree;\n\n})();\n", "/**\n * Vanduo Framework - Spotlight (Feature Discovery) Component\n * Guided tour with overlay highlight and step-through tooltip\n */\n\n(function () {\n 'use strict';\n\n const Spotlight = {\n _active: false,\n _steps: [],\n _currentStep: 0,\n _elements: {},\n _cleanup: [],\n _boundTriggers: new WeakMap(),\n _triggerElement: null,\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-spotlight]');\n\n triggers.forEach(trigger => {\n if (this._boundTriggers.has(trigger)) return;\n\n const clickHandler = (event) => {\n event.preventDefault();\n\n const steps = this._parseSteps(trigger.getAttribute('data-vd-spotlight'));\n if (steps.length === 0) return;\n\n this.start(steps, { trigger });\n };\n\n trigger.addEventListener('click', clickHandler);\n this._boundTriggers.set(trigger, clickHandler);\n });\n },\n\n _parseSteps: function (raw) {\n if (typeof raw !== 'string' || raw.trim() === '') return [];\n\n try {\n const parsed = JSON.parse(raw);\n return this._normalizeSteps(parsed);\n } catch (error) {\n console.error('VanduoSpotlight: invalid data-vd-spotlight payload.', error);\n return [];\n }\n },\n\n _normalizeStep: function (step) {\n if (!step || typeof step !== 'object') return null;\n\n const target = step.target;\n const hasSelectorTarget = typeof target === 'string' && target.trim() !== '';\n const hasElementTarget = typeof Element !== 'undefined' && target instanceof Element;\n\n if (!hasSelectorTarget && !hasElementTarget) return null;\n\n const title = typeof step.title === 'string' ? step.title : '';\n const description = typeof step.description === 'string'\n ? step.description\n : (typeof step.content === 'string' ? step.content : '');\n\n return {\n target,\n title,\n description\n };\n },\n\n _normalizeSteps: function (steps) {\n if (!Array.isArray(steps)) return [];\n\n return steps\n .map(step => this._normalizeStep(step))\n .filter(Boolean);\n },\n\n start: function (steps, options) {\n if (this._active) this.stop();\n\n const normalizedSteps = this._normalizeSteps(steps);\n if (normalizedSteps.length === 0) return;\n\n const startOptions = options || {};\n\n this._steps = normalizedSteps;\n this._currentStep = 0;\n this._active = true;\n this._triggerElement = startOptions.trigger || (document.activeElement instanceof HTMLElement ? document.activeElement : null);\n\n // Create overlay\n const overlay = document.createElement('div');\n overlay.className = 'vd-spotlight-overlay';\n overlay.setAttribute('aria-hidden', 'true');\n document.body.appendChild(overlay);\n\n // Create tooltip\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-spotlight-tooltip';\n tooltip.setAttribute('role', 'dialog');\n tooltip.setAttribute('aria-modal', 'true');\n tooltip.tabIndex = -1;\n document.body.appendChild(tooltip);\n\n this._elements = { overlay, tooltip };\n\n // ESC to close\n const escHandler = (e) => { if (e.key === 'Escape') this.stop(); };\n document.addEventListener('keydown', escHandler);\n this._cleanup.push(() => document.removeEventListener('keydown', escHandler));\n\n // Overlay click to close\n overlay.addEventListener('click', () => this.stop());\n\n this._showStep(this._currentStep);\n },\n\n _showStep: function (index) {\n const step = this._steps[index];\n if (!step) return;\n\n const target = typeof step.target === 'string' ? document.querySelector(step.target) : step.target;\n const { tooltip } = this._elements;\n\n // Remove previous highlight\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n // Highlight target\n if (target) {\n target.classList.add('vd-spotlight-target');\n target.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n\n // Build tooltip content\n const total = this._steps.length;\n tooltip.innerHTML = '';\n tooltip.removeAttribute('aria-labelledby');\n tooltip.removeAttribute('aria-describedby');\n\n if (step.title) {\n const title = document.createElement('h4');\n title.className = 'vd-spotlight-title';\n title.id = 'vd-spotlight-title-' + index + '-' + Date.now();\n title.textContent = step.title;\n tooltip.appendChild(title);\n tooltip.setAttribute('aria-labelledby', title.id);\n }\n\n if (step.description) {\n const desc = document.createElement('p');\n desc.className = 'vd-spotlight-description';\n desc.id = 'vd-spotlight-description-' + index + '-' + Date.now();\n desc.textContent = step.description;\n tooltip.appendChild(desc);\n tooltip.setAttribute('aria-describedby', desc.id);\n }\n\n // Footer\n const footer = document.createElement('div');\n footer.className = 'vd-spotlight-footer';\n footer.setAttribute('aria-label', 'Step ' + (index + 1) + ' of ' + total);\n\n const counter = document.createElement('span');\n counter.className = 'vd-spotlight-counter';\n counter.textContent = (index + 1) + ' / ' + total;\n\n const actions = document.createElement('div');\n actions.className = 'vd-spotlight-actions';\n\n if (index > 0) {\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-spotlight-btn';\n prevBtn.textContent = 'Back';\n prevBtn.addEventListener('click', () => this.prev());\n actions.appendChild(prevBtn);\n }\n\n const skipBtn = document.createElement('button');\n skipBtn.type = 'button';\n skipBtn.className = 'vd-spotlight-btn';\n skipBtn.textContent = 'Skip';\n skipBtn.addEventListener('click', () => this.stop());\n actions.appendChild(skipBtn);\n\n if (index < total - 1) {\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n nextBtn.textContent = 'Next';\n nextBtn.addEventListener('click', () => this.next());\n actions.appendChild(nextBtn);\n } else {\n const doneBtn = document.createElement('button');\n doneBtn.type = 'button';\n doneBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n doneBtn.textContent = 'Done';\n doneBtn.addEventListener('click', () => this.stop());\n actions.appendChild(doneBtn);\n }\n\n footer.appendChild(counter);\n footer.appendChild(actions);\n tooltip.appendChild(footer);\n\n // Position tooltip near target\n if (target) {\n requestAnimationFrame(() => {\n const rect = target.getBoundingClientRect();\n const tRect = tooltip.getBoundingClientRect();\n let top = rect.bottom + 12 + window.scrollY;\n let left = rect.left + (rect.width - tRect.width) / 2 + window.scrollX;\n\n // Keep in viewport\n left = Math.max(8, Math.min(left, window.innerWidth - tRect.width - 8));\n if (top + tRect.height > window.innerHeight + window.scrollY) {\n top = rect.top - tRect.height - 12 + window.scrollY;\n }\n\n tooltip.style.top = top + 'px';\n tooltip.style.left = left + 'px';\n });\n }\n\n document.dispatchEvent(new CustomEvent('spotlight:step', {\n detail: { index, step: index, total, data: step }\n }));\n },\n\n next: function () {\n if (this._currentStep < this._steps.length - 1) {\n this._currentStep++;\n this._showStep(this._currentStep);\n }\n },\n\n prev: function () {\n if (this._currentStep > 0) {\n this._currentStep--;\n this._showStep(this._currentStep);\n }\n },\n\n stop: function () {\n if (!this._active) return;\n\n const total = this._steps.length;\n const detail = {\n completedSteps: total === 0 ? 0 : Math.min(this._currentStep + 1, total),\n total,\n completed: total > 0 && this._currentStep >= total - 1\n };\n\n this._active = false;\n\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n if (this._elements.overlay && this._elements.overlay.parentNode) {\n this._elements.overlay.parentNode.removeChild(this._elements.overlay);\n }\n if (this._elements.tooltip && this._elements.tooltip.parentNode) {\n this._elements.tooltip.parentNode.removeChild(this._elements.tooltip);\n }\n\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n this._elements = {};\n this._steps = [];\n this._currentStep = 0;\n\n if (this._triggerElement && this._triggerElement.isConnected && typeof this._triggerElement.focus === 'function') {\n this._triggerElement.focus();\n }\n this._triggerElement = null;\n\n document.dispatchEvent(new CustomEvent('spotlight:end', { detail }));\n },\n\n destroyAll: function () {\n this.stop();\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('spotlight', Spotlight);\n }\n\n window.VanduoSpotlight = Spotlight;\n\n})();\n", "/**\n * Vanduo Framework - Music Player Component\n * HTML5 Audio-based music player with transport controls, volume,\n * and optional shuffle, seek bar, and playlist features.\n *\n * Options (passed to MusicPlayer.init or data-music-player-options):\n * tracks {Array} - [{name, url}] \u2014 required\n * volume {number} - Initial volume 0\u20131 (default 0.5)\n * shuffle {boolean} - Shuffle on init (default false)\n * showProgress {boolean} - Show seek/progress bar (default false)\n * showPlaylist {boolean} - Show expandable playlist panel (default false)\n * autoAdvance {boolean} - Auto-play next track on end (default true)\n *\n * Custom events (all bubble, dispatched on container):\n * musicplayer:play \u2014 playback started\n * musicplayer:pause \u2014 playback paused\n * musicplayer:trackchange \u2014 detail: { index, name, url }\n * musicplayer:volumechange \u2014 detail: { volume }\n * musicplayer:ended \u2014 last track ended (autoAdvance=false only)\n *\n * Programmatic API:\n * MusicPlayer.init(container?, options?)\n * MusicPlayer.play(container)\n * MusicPlayer.pause(container)\n * MusicPlayer.toggle(container)\n * MusicPlayer.next(container)\n * MusicPlayer.previous(container)\n * MusicPlayer.setVolume(container, value)\n * MusicPlayer.setTrack(container, index)\n * MusicPlayer.shuffle(container)\n * MusicPlayer.getState(container)\n * MusicPlayer.destroy(container)\n * MusicPlayer.destroyAll()\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fisher-Yates shuffle (returns new array).\n * @param {Array} arr\n * @returns {Array}\n */\n function shuffleArray(arr) {\n const shuffled = arr.slice();\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n const tmp = shuffled[i];\n shuffled[i] = shuffled[j];\n shuffled[j] = tmp;\n }\n return shuffled;\n }\n\n /**\n * Format seconds as m:ss.\n * @param {number} seconds\n * @returns {string}\n */\n function formatTime(seconds) {\n if (!isFinite(seconds) || seconds < 0) return '0:00';\n const m = Math.floor(seconds / 60);\n const s = Math.floor(seconds % 60);\n return m + ':' + (s < 10 ? '0' : '') + s;\n }\n\n /**\n * Set CSS background-size on a range input to visually fill the track.\n * @param {HTMLInputElement} input\n */\n function updateRangeFill(input) {\n const min = parseFloat(input.min) || 0;\n const max = parseFloat(input.max) || 1;\n const val = parseFloat(input.value) || 0;\n const pct = ((val - min) / (max - min)) * 100;\n input.style.setProperty('--fill', pct + '%');\n // Fallback inline gradient for browsers without ::-moz-range-progress\n input.style.backgroundImage =\n 'linear-gradient(to right, var(--music-player-track-fill, currentColor) 0%, ' +\n 'var(--music-player-track-fill, currentColor) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) 100%)';\n }\n\n /* \u2500\u2500\u2500 Phosphor icon helper (matches framework icon style) \u2500 */\n\n /**\n * Return an element (Phosphor icon).\n * @param {string} name\n * @returns {HTMLElement}\n */\n function icon(name) {\n const el = document.createElement('i');\n el.className = 'ph ph-' + name;\n el.setAttribute('aria-hidden', 'true');\n return el;\n }\n\n /* \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const MusicPlayer = {\n /** @type {Map} */\n instances: new Map(),\n\n /**\n * Default options.\n */\n defaults: {\n tracks: [],\n volume: 0.5,\n shuffle: false,\n showProgress: false,\n showPlaylist: false,\n autoAdvance: true,\n },\n\n /**\n * Auto-initialize all .vd-music-player / [data-music-player] elements.\n * Options can be provided via data-music-player-options (JSON string).\n */\n init: function () {\n document.querySelectorAll('.vd-music-player, [data-music-player]').forEach((el) => {\n if (this.instances.has(el)) return;\n\n let opts = {};\n const attr = el.getAttribute('data-music-player-options');\n if (attr) {\n try { opts = JSON.parse(attr); } catch (_) { /* ignore malformed JSON */ }\n }\n this.initPlayer(el, opts);\n });\n },\n\n /**\n * Initialize a single player element.\n * @param {HTMLElement} container\n * @param {Object} [options]\n */\n initPlayer: function (container, options) {\n const opts = Object.assign({}, this.defaults, options || {});\n\n // Validate and normalise tracks\n const rawTracks = Array.isArray(opts.tracks) ? opts.tracks : [];\n const tracks = rawTracks.filter((t) => t && typeof t.url === 'string' && t.url.trim());\n\n // Build shuffled working copy without mutating opts\n const trackList = opts.shuffle ? shuffleArray(tracks) : tracks.slice();\n\n /* \u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const state = {\n tracks: trackList,\n originalTracks: tracks.slice(),\n currentIndex: 0,\n isPlaying: false,\n volume: Math.max(0, Math.min(1, opts.volume)),\n shuffle: opts.shuffle,\n showProgress: opts.showProgress,\n showPlaylist: opts.showPlaylist,\n autoAdvance: opts.autoAdvance,\n audio: null,\n };\n\n /* \u2500\u2500 Audio element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const audio = new Audio();\n audio.volume = state.volume;\n audio.preload = 'metadata';\n state.audio = audio;\n\n /* \u2500\u2500 Build DOM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n this._buildDOM(container, state);\n\n // Grab references after DOM build\n const refs = {\n btnPlay: container.querySelector('.vd-music-player-btn-play'),\n btnPrev: container.querySelector('.vd-music-player-btn-prev'),\n btnNext: container.querySelector('.vd-music-player-btn-next'),\n btnShuffle: container.querySelector('.vd-music-player-btn-shuffle'),\n btnPlaylist: container.querySelector('.vd-music-player-btn-playlist'),\n trackName: container.querySelector('.vd-music-player-track-name'),\n volumeSlider: container.querySelector('.vd-music-player-volume-slider'),\n volumeIcon: container.querySelector('.vd-music-player-volume-icon'),\n progressBar: container.querySelector('.vd-music-player-progress-bar'),\n timeElapsed: container.querySelector('.vd-music-player-time-elapsed'),\n timeDuration: container.querySelector('.vd-music-player-time-duration'),\n playlistPanel: container.querySelector('.vd-music-player-playlist'),\n };\n\n /* \u2500\u2500 Internal render helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const renderPlayIcon = () => {\n const btn = refs.btnPlay;\n if (!btn) return;\n btn.innerHTML = '';\n btn.appendChild(icon(state.isPlaying ? 'pause' : 'play'));\n btn.setAttribute('aria-label', state.isPlaying ? 'Pause' : 'Play');\n btn.classList.toggle('is-active', state.isPlaying);\n };\n\n const renderTrackName = () => {\n const el = refs.trackName;\n if (!el) return;\n const track = state.tracks[state.currentIndex];\n if (track) {\n el.textContent = track.name || 'Unknown Track';\n el.classList.remove('is-idle');\n } else {\n el.textContent = 'No tracks loaded';\n el.classList.add('is-idle');\n }\n };\n\n const renderVolumeIcon = () => {\n const el = refs.volumeIcon;\n if (!el) return;\n el.innerHTML = '';\n const v = state.volume;\n const name = v === 0 ? 'speaker-none' : v < 0.5 ? 'speaker-low' : 'speaker-high';\n el.appendChild(icon(name));\n };\n\n const renderShuffleBtn = () => {\n const btn = refs.btnShuffle;\n if (!btn) return;\n btn.classList.toggle('is-active', state.shuffle);\n btn.setAttribute('aria-pressed', state.shuffle ? 'true' : 'false');\n };\n\n const renderPlaylistItems = () => {\n const panel = refs.playlistPanel;\n if (!panel) return;\n panel.innerHTML = '';\n state.tracks.forEach((track, i) => {\n const item = document.createElement('button');\n item.className =\n 'vd-music-player-playlist-item' + (i === state.currentIndex ? ' is-active' : '');\n item.type = 'button';\n item.setAttribute('data-index', String(i));\n item.setAttribute('aria-current', i === state.currentIndex ? 'true' : 'false');\n\n const num = document.createElement('span');\n num.className = 'vd-music-player-playlist-num';\n num.textContent = String(i + 1);\n\n const name = document.createElement('span');\n name.className = 'vd-music-player-playlist-name';\n name.textContent = track.name || 'Track ' + (i + 1);\n\n item.appendChild(num);\n item.appendChild(name);\n panel.appendChild(item);\n });\n };\n\n const renderProgress = () => {\n const bar = refs.progressBar;\n if (!bar || !audio.duration) return;\n const pct = (audio.currentTime / audio.duration) * 100;\n bar.value = String(pct);\n updateRangeFill(bar);\n if (refs.timeElapsed) refs.timeElapsed.textContent = formatTime(audio.currentTime);\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n };\n\n /* \u2500\u2500 Load track \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const loadTrack = (index, autoPlay) => {\n const track = state.tracks[index];\n if (!track) return;\n state.currentIndex = index;\n audio.src = track.url;\n renderTrackName();\n renderPlaylistItems();\n\n // Reset progress\n if (refs.progressBar) {\n refs.progressBar.value = '0';\n updateRangeFill(refs.progressBar);\n }\n if (refs.timeElapsed) refs.timeElapsed.textContent = '0:00';\n if (refs.timeDuration) refs.timeDuration.textContent = '0:00';\n\n container.dispatchEvent(\n new CustomEvent('musicplayer:trackchange', {\n bubbles: true,\n detail: { index, name: track.name, url: track.url },\n })\n );\n\n if (autoPlay) {\n audio.play().catch(() => { /* browser may block autoplay */ });\n }\n };\n\n /* \u2500\u2500 Audio event listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const cleanupFunctions = [];\n\n const onPlay = () => {\n state.isPlaying = true;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:play', { bubbles: true }));\n };\n\n const onPause = () => {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:pause', { bubbles: true }));\n };\n\n const onEnded = () => {\n if (state.autoAdvance && state.tracks.length > 1) {\n const next = (state.currentIndex + 1) % state.tracks.length;\n loadTrack(next, true);\n } else {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:ended', { bubbles: true }));\n }\n };\n\n const onTimeUpdate = () => {\n if (state.showProgress) renderProgress();\n };\n\n const onLoadedMetadata = () => {\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n if (refs.progressBar) {\n refs.progressBar.max = '100';\n updateRangeFill(refs.progressBar);\n }\n };\n\n audio.addEventListener('play', onPlay);\n audio.addEventListener('pause', onPause);\n audio.addEventListener('ended', onEnded);\n audio.addEventListener('timeupdate', onTimeUpdate);\n audio.addEventListener('loadedmetadata', onLoadedMetadata);\n cleanupFunctions.push(() => {\n audio.removeEventListener('play', onPlay);\n audio.removeEventListener('pause', onPause);\n audio.removeEventListener('ended', onEnded);\n audio.removeEventListener('timeupdate', onTimeUpdate);\n audio.removeEventListener('loadedmetadata', onLoadedMetadata);\n audio.pause();\n audio.src = '';\n });\n\n /* \u2500\u2500 Control button listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n if (refs.btnPlay) {\n const handler = () => {\n if (!audio.src && state.tracks.length) loadTrack(state.currentIndex, false);\n if (state.isPlaying) {\n audio.pause();\n } else {\n audio.play().catch(() => {});\n }\n };\n refs.btnPlay.addEventListener('click', handler);\n cleanupFunctions.push(() => refs.btnPlay.removeEventListener('click', handler));\n\n // Keyboard: Space / Enter (already native for `;let s="";for(let[o,r]of Object.entries(this.NEUTRAL_COLORS))s+=``;let i="";this.RADIUS_OPTIONS.forEach(o=>{i+=``});let a="";for(let[o,r]of Object.entries(this.FONT_OPTIONS))a+=``;return` +`).length,i=document.createElement("div");i.className="vd-code-snippet-line-numbers",i.setAttribute("aria-hidden","true");for(let o=1;o<=s;o++){let r=document.createElement("span");r.textContent=o,i.appendChild(r)}let a=document.createElement("div");a.className="vd-code-snippet-code",a.appendChild(t.cloneNode(!0)),t.parentNode.removeChild(t),e.appendChild(i),e.appendChild(a)},expand:function(e){if(typeof e=="string"&&(e=document.querySelector(e)),!e)return;e.dataset.expanded="true";let t=e.querySelector(".vd-code-snippet-toggle"),n=e.querySelector(".vd-code-snippet-content");t&&t.setAttribute("aria-expanded","true"),n&&(n.dataset.visible="true")},collapse:function(e){if(typeof e=="string"&&(e=document.querySelector(e)),!e)return;e.dataset.expanded="false";let t=e.querySelector(".vd-code-snippet-toggle"),n=e.querySelector(".vd-code-snippet-content");t&&t.setAttribute("aria-expanded","false"),n&&(n.dataset.visible="false")},showLang:function(e,t){if(typeof e=="string"&&(e=document.querySelector(e)),!e)return;let n=e.querySelector(`.vd-code-snippet-tab[data-lang="${t}"]`),s=e.querySelectorAll(".vd-code-snippet-tab"),i=e.querySelectorAll(".vd-code-snippet-pane");n&&this.switchTab(e,n,s,i)},destroy:function(e){typeof e=="string"&&(e=document.querySelector(e)),e&&(e._codeSnippetCleanup&&(e._codeSnippetCleanup.forEach(t=>t()),delete e._codeSnippetCleanup),delete e.dataset.initialized)},destroyAll:function(){document.querySelectorAll('.vd-code-snippet[data-initialized="true"]').forEach(t=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("codeSnippet",m),window.CodeSnippet=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll(".vd-collapsible, .accordion").forEach(t=>{this.instances.has(t)||this.initCollapsible(t)})},initCollapsible:function(e){let t=e.classList.contains("accordion"),n=e.querySelectorAll(".vd-collapsible-item, .accordion-item"),s=[];n.forEach(i=>{let a=i.querySelector(".vd-collapsible-header, .accordion-header"),o=i.querySelector(".vd-collapsible-body, .accordion-body"),r=i.querySelector(".vd-collapsible-trigger, .accordion-trigger")||a;if(!a||!o)return;i.classList.contains("is-open")?this.openItem(i,o,!1):this.closeItem(i,o,!1);let l=d=>{d.preventDefault(),this.toggleItem(i,o,e,t)};r.addEventListener("click",l),s.push(()=>r.removeEventListener("click",l))}),this.instances.set(e,{cleanup:s})},toggleItem:function(e,t,n,s){e.classList.contains("is-open")?this.closeItem(e,t):(s&&n.querySelectorAll(".vd-collapsible-item.is-open, .accordion-item.is-open").forEach(o=>{if(o!==e){let r=o.querySelector(".vd-collapsible-body, .accordion-body");this.closeItem(o,r)}}),this.openItem(e,t))},openItem:function(e,t,n=!0){n||(t.style.transition="none"),e.classList.add("is-open"),e.setAttribute("aria-expanded","true");let s=t.scrollHeight;t.style.maxHeight=`${s}px`,n||setTimeout(()=>{t.style.transition=""},0),e.dispatchEvent(new CustomEvent("collapsible:open",{bubbles:!0}))},closeItem:function(e,t,n=!0){n||(t.style.transition="none"),e.classList.remove("is-open"),e.setAttribute("aria-expanded","false"),t.style.maxHeight="0",n||setTimeout(()=>{t.style.transition=""},0),e.dispatchEvent(new CustomEvent("collapsible:close",{bubbles:!0}))},open:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t){let n=t.querySelector(".vd-collapsible-body, .accordion-body");n&&this.openItem(t,n)}},close:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t){let n=t.querySelector(".vd-collapsible-body, .accordion-body");n&&this.closeItem(t,n)}},toggle:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t){let n=t.querySelector(".vd-collapsible-body, .accordion-body"),s=t.closest(".vd-collapsible, .accordion"),i=s&&s.classList.contains("accordion");n&&this.toggleItem(t,n,s,i)}},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>{this.destroy(t)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("collapsible",m),window.VanduoCollapsible=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll(".vd-dropdown").forEach(t=>{this.instances.has(t)||this.initDropdown(t)})},initDropdown:function(e){let t=e.querySelector(".vd-dropdown-toggle"),n=e.querySelector(".vd-dropdown-menu");if(!t||!n)return;let s=[];t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-expanded","false"),n.setAttribute("role","menu"),n.setAttribute("aria-hidden","true");let i=l=>{l.preventDefault(),l.stopPropagation(),this.toggleDropdown(e,t,n)};t.addEventListener("click",i),s.push(()=>t.removeEventListener("click",i));let a=l=>{!e.contains(l.target)&&n.classList.contains("is-open")&&this.closeDropdown(e,t,n)};document.addEventListener("click",a),s.push(()=>document.removeEventListener("click",a));let o=l=>{this.handleKeydown(l,e,t,n)};t.addEventListener("keydown",o),s.push(()=>t.removeEventListener("keydown",o)),n.querySelectorAll(".vd-dropdown-item:not(.disabled):not(.is-disabled)").forEach(l=>{let d=u=>{u.preventDefault(),this.selectItem(l,e,t,n)};l.addEventListener("click",d),s.push(()=>l.removeEventListener("click",d));let c=u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),this.selectItem(l,e,t,n))};l.addEventListener("keydown",c),s.push(()=>l.removeEventListener("keydown",c))}),this.instances.set(e,{toggle:t,menu:n,cleanup:s,typeaheadBuffer:"",typeaheadTimer:null})},toggleDropdown:function(e,t,n){n.classList.contains("is-open")?this.closeDropdown(e,t,n):this.openDropdown(e,t,n)},openDropdown:function(e,t,n){document.querySelectorAll(".vd-dropdown-menu.is-open").forEach(a=>{if(a!==n){let o=a.closest(".vd-dropdown"),r=o.querySelector(".vd-dropdown-toggle");this.closeDropdown(o,r,a)}}),e.classList.add("is-open"),n.classList.add("is-open"),t.setAttribute("aria-expanded","true"),n.setAttribute("aria-hidden","false"),this.positionMenu(e,n);let i=n.querySelector(".vd-dropdown-item:not(.disabled):not(.is-disabled)");i&&setTimeout(()=>i.focus(),0)},closeDropdown:function(e,t,n){e.classList.remove("is-open"),n.classList.remove("is-open"),t.setAttribute("aria-expanded","false"),n.setAttribute("aria-hidden","true"),t.focus()},positionMenu:function(e,t){let n=e.getBoundingClientRect(),s=t.getBoundingClientRect(),i=window.innerWidth,a=window.innerHeight,o=8;n.left+s.width>i-o&&(t.classList.add("vd-dropdown-menu-end"),t.classList.remove("vd-dropdown-menu-start")),t.classList.contains("dropdown-menu-top")?n.top-s.heighta-o&&t.classList.add("vd-dropdown-menu-top")},handleKeydown:function(e,t,n,s){let i=s.classList.contains("is-open"),a=Array.from(s.querySelectorAll(".vd-dropdown-item:not(.disabled):not(.is-disabled)")),o=a.findIndex(r=>r===document.activeElement);switch(e.key){case"Enter":case" ":case"ArrowDown":if(e.preventDefault(),!i)this.openDropdown(t,n,s);else if(e.key==="ArrowDown"){let r=o0?o-1:a.length-1;a[r].focus()}break;case"Escape":i&&(e.preventDefault(),this.closeDropdown(t,n,s));break;case"Home":i&&(e.preventDefault(),a[0].focus());break;case"End":i&&(e.preventDefault(),a[a.length-1].focus());break;default:if(i&&e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey){let r=this.instances.get(t);if(!r)break;clearTimeout(r.typeaheadTimer),r.typeaheadBuffer+=e.key.toLowerCase();let l=a.find(d=>d.textContent.trim().toLowerCase().startsWith(r.typeaheadBuffer));l&&l.focus(),r.typeaheadTimer=setTimeout(()=>{r.typeaheadBuffer=""},500)}break}},selectItem:function(e,t,n,s){s.querySelectorAll(".vd-dropdown-item").forEach(i=>{i.classList.remove("active","is-active")}),e.classList.add("active","is-active"),(n.tagName==="BUTTON"||n.classList.contains("btn"))&&(n.textContent=e.textContent.trim()),this.closeDropdown(t,n,s),e.dispatchEvent(new CustomEvent("dropdown:select",{bubbles:!0,detail:{item:e,value:e.dataset.value||e.textContent}}))},open:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t){let n=t.querySelector(".vd-dropdown-toggle"),s=t.querySelector(".vd-dropdown-menu");n&&s&&this.openDropdown(t,n,s)}},close:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t){let n=t.querySelector(".vd-dropdown-toggle"),s=t.querySelector(".vd-dropdown-menu");n&&s&&this.closeDropdown(t,n,s)}},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>{this.destroy(t)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("dropdown",m),window.VanduoDropdown=m})();(function(){"use strict";let m={STORAGE_KEY:"vanduo-font-preference",isInitialized:!1,fonts:{system:{name:"System Default",family:null},inter:{name:"Inter",family:"'Inter', sans-serif"},"source-sans":{name:"Source Sans 3",family:"'Source Sans 3', sans-serif"},"fira-sans":{name:"Fira Sans",family:"'Fira Sans', sans-serif"},"ibm-plex":{name:"IBM Plex Sans",family:"'IBM Plex Sans', sans-serif"},"jetbrains-mono":{name:"JetBrains Mono",family:"'JetBrains Mono', monospace"},ubuntu:{name:"Ubuntu",family:"'Ubuntu', sans-serif",category:"sans-serif",description:"Friendly, humanist sans-serif"},"open-sans":{name:"Open Sans",family:"'Open Sans', sans-serif",category:"sans-serif",description:"Neutral, highly readable"},rubik:{name:"Rubik",family:"'Rubik', sans-serif",category:"sans-serif",description:"Modern, geometric"},"titillium-web":{name:"Titillium Web",family:"'Titillium Web', sans-serif",category:"sans-serif",description:"Technical, elegant"}},init:function(){if(this.state={preference:this.getPreference()},this.isInitialized){this.applyFont(),this.renderUI(),this.updateUI();return}this.isInitialized=!0,this.applyFont(),this.renderUI(),console.log("Vanduo Font Switcher initialized")},getPreference:function(){return this.getStorageValue(this.STORAGE_KEY,"ubuntu")},setPreference:function(e){if(!this.fonts[e]){console.warn("Unknown font:",e);return}this.state.preference=e,this.setStorageValue(this.STORAGE_KEY,e),this.applyFont(),this.updateUI();let t=new CustomEvent("font:change",{bubbles:!0,detail:{font:e,fontData:this.fonts[e]}});document.dispatchEvent(t)},applyFont:function(){let e=this.state.preference;e==="system"?document.documentElement.removeAttribute("data-font"):document.documentElement.setAttribute("data-font",e)},renderUI:function(){document.querySelectorAll('[data-toggle="font"]').forEach(t=>{if(t.getAttribute("data-font-initialized")==="true"){t.tagName==="SELECT"&&(t.value=this.state.preference);return}if(t.tagName==="SELECT"){t.value=this.state.preference;let n=s=>{this.setPreference(s.target.value)};t.addEventListener("change",n),t._fontToggleHandler=n}else{let n=()=>{let s=Object.keys(this.fonts),a=(s.indexOf(this.state.preference)+1)%s.length;this.setPreference(s[a])};t.addEventListener("click",n),t._fontToggleHandler=n}t.setAttribute("data-font-initialized","true")})},updateUI:function(){document.querySelectorAll('[data-toggle="font"]').forEach(t=>{if(t.tagName==="SELECT")t.value=this.state.preference;else{let n=t.querySelector(".font-current-label");n&&(n.textContent=this.fonts[this.state.preference].name)}})},getCurrentFont:function(){return this.state.preference},getFontData:function(e){return this.fonts[e]||null},destroyAll:function(){document.querySelectorAll('[data-toggle="font"][data-font-initialized="true"]').forEach(t=>{if(t._fontToggleHandler){let n=t.tagName==="SELECT"?"change":"click";t.removeEventListener(n,t._fontToggleHandler),delete t._fontToggleHandler}t.removeAttribute("data-font-initialized")}),this.isInitialized=!1},getStorageValue:function(e,t){if(typeof window.safeStorageGet=="function")return window.safeStorageGet(e,t);try{let n=localStorage.getItem(e);return n!==null?n:t}catch{return t}},setStorageValue:function(e,t){if(typeof window.safeStorageSet=="function")return window.safeStorageSet(e,t);try{return localStorage.setItem(e,t),!0}catch{return!1}}};window.Vanduo&&window.Vanduo.register("fontSwitcher",m),window.FontSwitcher=m})();(function(){"use strict";let m=(function(){try{return CSS.supports("selector(:has(*))")}catch{return!1}})(),e={instances:new Map,init:function(){document.querySelectorAll("[data-layout-mode]").forEach(function(n){this.instances.has(n)||this.initContainer(n)}.bind(this)),this.initToggleButtons()},initContainer:function(t){let n=t.getAttribute("data-layout-mode")||"standard",s=[];this.applyMode(t,n),t.setAttribute("role","region"),t.setAttribute("aria-label","Grid layout: "+n+" mode"),this.instances.set(t,{cleanup:s,mode:n})},initToggleButtons:function(){document.querySelectorAll("[data-grid-toggle]").forEach(function(n){if(n.getAttribute("data-grid-initialized")==="true")return;let s=function(i){i.preventDefault();let a=n.getAttribute("data-grid-toggle"),o;a?o=document.querySelector(a):o=n.closest("[data-layout-mode]"),o&&this.toggle(o)}.bind(this);n.addEventListener("click",s),n.setAttribute("data-grid-initialized","true"),n.setAttribute("aria-pressed","false"),n._gridCleanup=function(){n.removeEventListener("click",s),n.removeAttribute("data-grid-initialized"),n.removeAttribute("aria-pressed")}}.bind(this))},applyFibFallback:function(t){if(m)return;t.querySelectorAll(".vd-row, .row").forEach(function(s){let a=s.querySelectorAll(':scope > [class*="vd-col-"], :scope > [class*="col-"]').length;a===1?s.style.gridTemplateColumns="1fr":a===2?s.style.gridTemplateColumns="1fr 1.618fr":a===3?s.style.gridTemplateColumns="2fr 3fr 5fr":a===4?s.style.gridTemplateColumns="1fr 2fr 3fr 5fr":s.style.gridTemplateColumns="repeat("+a+", 1fr)"})},removeFibFallback:function(t){t.querySelectorAll(".vd-row, .row").forEach(function(s){s.style.gridTemplateColumns=""})},applyMode:function(t,n){t.classList.remove("vd-grid-standard","vd-grid-fibonacci"),n==="fibonacci"?(t.classList.add("vd-grid-fibonacci"),this.applyFibFallback(t)):(t.classList.add("vd-grid-standard"),this.removeFibFallback(t)),t.setAttribute("data-layout-mode",n),t.setAttribute("aria-label","Grid layout: "+n+" mode"),document.querySelectorAll("[data-grid-toggle]").forEach(function(o){let r=o.getAttribute("data-grid-toggle");if(r&&t.matches(r)){let l=n==="fibonacci";l?o.classList.add("is-active"):o.classList.remove("is-active"),o.setAttribute("aria-pressed",l?"true":"false")}});let i=this.instances.get(t);i&&(i.mode=n);let a;try{a=new CustomEvent("grid:modechange",{bubbles:!0,detail:{container:t,mode:n}})}catch{a=document.createEvent("CustomEvent"),a.initCustomEvent("grid:modechange",!0,!0,{container:t,mode:n})}t.dispatchEvent(a)},toggle:function(t){if(typeof t=="string"&&(t=document.querySelector(t)),!t)return;let s=(t.getAttribute("data-layout-mode")||"standard")==="fibonacci"?"standard":"fibonacci";this.applyMode(t,s)},setMode:function(t,n){typeof t=="string"&&(t=document.querySelector(t)),t&&(n!=="fibonacci"&&n!=="standard"||this.applyMode(t,n))},getMode:function(t){return typeof t=="string"&&(t=document.querySelector(t)),t?t.getAttribute("data-layout-mode")||"standard":null},destroy:function(t){let n=this.instances.get(t);n&&(n.cleanup.forEach(function(s){s()}),t.classList.remove("vd-grid-standard","vd-grid-fibonacci"),t.removeAttribute("aria-label"),this.removeFibFallback(t),this.instances.delete(t))},destroyAll:function(){this.instances.forEach(function(n,s){this.destroy(s)}.bind(this)),document.querySelectorAll('[data-grid-initialized="true"]').forEach(function(n){n._gridCleanup&&(n._gridCleanup(),delete n._gridCleanup)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("gridLayout",e),window.VanduoGridLayout=e})();(function(){"use strict";let m={backdrop:null,container:null,img:null,closeBtn:null,caption:null,currentTrigger:null,scrollThreshold:50,initialScrollY:0,isOpen:!1,_cleanupFunctions:[],init:function(){this.createBackdrop(),this.bindTriggers()},createBackdrop:function(){if(this.backdrop||document.querySelector(".vd-image-box-backdrop")){this.backdrop||(this.backdrop=document.querySelector(".vd-image-box-backdrop"),this.container=this.backdrop.querySelector(".vd-image-box-container"),this.img=this.backdrop.querySelector(".vd-image-box-img"),this.closeBtn=this.backdrop.querySelector(".vd-image-box-close"),this.caption=this.backdrop.querySelector(".vd-image-box-caption"),this.bindBackdropEvents());return}this.backdrop=document.createElement("div"),this.backdrop.className="vd-image-box-backdrop",this.backdrop.setAttribute("role","dialog"),this.backdrop.setAttribute("aria-modal","true"),this.backdrop.setAttribute("aria-label","Image viewer"),this.backdrop.setAttribute("tabindex","-1"),this.container=document.createElement("div"),this.container.className="vd-image-box-container",this.img=document.createElement("img"),this.img.className="vd-image-box-img",this.img.alt="",this.closeBtn=document.createElement("button"),this.closeBtn.className="vd-image-box-close",this.closeBtn.setAttribute("aria-label","Close image viewer"),this.closeBtn.innerHTML="×",this.caption=document.createElement("div"),this.caption.className="vd-image-box-caption",this.container.appendChild(this.img),this.backdrop.appendChild(this.closeBtn),this.backdrop.appendChild(this.container),this.backdrop.appendChild(this.caption),document.body.appendChild(this.backdrop),this.bindBackdropEvents()},bindBackdropEvents:function(){let e=this,t=function(o){(o.target===e.backdrop||o.target===e.container)&&e.close()};this.backdrop.addEventListener("click",t),this._cleanupFunctions.push(()=>this.backdrop.removeEventListener("click",t));let n=function(){e.close()};this.img.addEventListener("click",n),this._cleanupFunctions.push(()=>this.img.removeEventListener("click",n));let s=function(){e.close()};this.closeBtn.addEventListener("click",s),this._cleanupFunctions.push(()=>this.closeBtn.removeEventListener("click",s));let i=function(o){o.key==="Escape"&&e.isOpen&&e.close()};document.addEventListener("keydown",i),this._cleanupFunctions.push(()=>document.removeEventListener("keydown",i));let a=function(){if(!e.isOpen)return;let o=window.scrollY;Math.abs(o-e.initialScrollY)>e.scrollThreshold&&e.close()};window.addEventListener("scroll",a,{passive:!0}),this._cleanupFunctions.push(()=>window.removeEventListener("scroll",a))},bindTriggers:function(){let e=this;document.querySelectorAll("[data-image-box]").forEach(function(n){if(n.dataset.imageBoxInitialized)return;if(n.dataset.imageBoxInitialized="true",n.classList.add("vd-image-box-trigger"),n.tagName==="IMG"){n.complete&&n.naturalWidth===0&&n.classList.add("is-broken");let i=function(){n.classList.add("is-broken")};n.addEventListener("error",i);let a=function(){n.classList.remove("is-broken")};n.addEventListener("load",a)}let s=function(i){i.preventDefault(),e.open(n)};if(n.addEventListener("click",s),n._imageBoxCleanup=()=>n.removeEventListener("click",s),n.tagName!=="BUTTON"&&n.tagName!=="A"){n.setAttribute("role","button"),n.setAttribute("tabindex","0"),n.setAttribute("aria-label","View enlarged image");let i=function(o){(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),e.open(n))};n.addEventListener("keydown",i);let a=n._imageBoxCleanup;n._imageBoxCleanup=()=>{a(),n.removeEventListener("keydown",i)}}})},open:function(e){if(this.isOpen)return;this.currentTrigger=e,this.isOpen=!0,this.initialScrollY=window.scrollY;let t=e.dataset.imageBoxFullSrc||e.dataset.imageBoxSrc||e.src||e.href;if(!t){console.warn("[Vanduo ImageBox] No image source found for trigger:",e);return}let n=e.dataset.imageBoxCaption||e.alt||"";this.img.src=t,this.img.alt=e.alt||"",n?(this.caption.textContent=n,this.caption.style.display="block"):this.caption.style.display="none";let s=window.innerWidth-document.documentElement.clientWidth;document.body.style.setProperty("--scrollbar-width",`${s}px`),document.body.classList.add("body-image-box-open"),this.backdrop.classList.add("is-visible"),this.backdrop.focus(),e.dispatchEvent(new CustomEvent("imageBox:open",{bubbles:!0,detail:{src:t}})),this.img.complete||(this.img.style.opacity="0",this._imgLoadHandler=()=>{this.img.style.opacity=""},this.img.addEventListener("load",this._imgLoadHandler,{once:!0}))},close:function(){this.isOpen&&(this.isOpen=!1,this.backdrop.classList.remove("is-visible"),document.body.classList.remove("body-image-box-open"),document.body.style.removeProperty("--scrollbar-width"),this.currentTrigger&&(this.currentTrigger.focus(),this.currentTrigger.dispatchEvent(new CustomEvent("imageBox:close",{bubbles:!0})),this.currentTrigger=null),setTimeout(()=>{this.isOpen||(this._imgLoadHandler&&(this.img.removeEventListener("load",this._imgLoadHandler),this._imgLoadHandler=null),this.img.src="",this.img.alt="")},300))},reinit:function(){this.bindTriggers()},destroy:function(){this.isOpen&&this.close(),this.backdrop&&this.backdrop.parentNode&&this.backdrop.parentNode.removeChild(this.backdrop),this._cleanupFunctions.forEach(t=>t()),this._cleanupFunctions=[],document.querySelectorAll("[data-image-box-initialized]").forEach(t=>{t.classList.remove("vd-image-box-trigger"),t._imageBoxCleanup&&(t._imageBoxCleanup(),delete t._imageBoxCleanup),delete t.dataset.imageBoxInitialized}),this.backdrop=null,this.container=null,this.img=null,this.closeBtn=null,this.caption=null,this.currentTrigger=null,this.isOpen=!1},destroyAll:function(){this.destroy()}};typeof window.Vanduo<"u"&&window.Vanduo.register("imageBox",m),window.VanduoImageBox=m})();(function(){"use strict";let m={modals:new Map,openModals:[],zIndexCounter:1050,_triggerCleanups:[],_sharedEscHandler:null,init:function(){document.querySelectorAll(".vd-modal").forEach(n=>{this.modals.has(n)||this.initModal(n)}),document.querySelectorAll("[data-modal]").forEach(n=>{if(n.dataset.modalTriggerInitialized)return;n.dataset.modalTriggerInitialized="true";let s=i=>{i.preventDefault();let a=n.dataset.modal,o=document.querySelector(a);o&&this.open(o)};n.addEventListener("click",s),this._triggerCleanups.push(()=>n.removeEventListener("click",s))})},initModal:function(e){let t=this.createBackdrop(e),n=e.querySelectorAll('.vd-modal-close, [data-dismiss="modal"]'),s=e.querySelector(".vd-modal-dialog");if(!s)return;let i=[];e.setAttribute("role","dialog"),e.setAttribute("aria-modal","true"),e.setAttribute("aria-hidden","true"),e.id||(e.id="modal-"+Math.random().toString(36).substr(2,9));let a=e.querySelector(".vd-modal-title");a&&!a.id&&(a.id=e.id+"-title",e.setAttribute("aria-labelledby",a.id)),n.forEach(r=>{let l=()=>{this.close(e)};r.addEventListener("click",l),i.push(()=>r.removeEventListener("click",l))});let o=r=>{r.target===t&&e.dataset.backdrop!=="static"&&this.close(e)};t.addEventListener("click",o),i.push(()=>t.removeEventListener("click",o)),this._sharedEscHandler||(this._sharedEscHandler=r=>{if(r.key==="Escape"&&this.openModals.length>0){let l=this.openModals[this.openModals.length-1];l.dataset.keyboard!=="false"&&this.close(l)}},document.addEventListener("keydown",this._sharedEscHandler)),this.modals.set(e,{backdrop:t,dialog:s,trapHandler:null,cleanup:i})},createBackdrop:function(e){let t=e.querySelector(".vd-modal-backdrop");return t||(t=document.createElement("div"),t.className="vd-modal-backdrop",document.body.appendChild(t)),t},open:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(!t){console.warn("[Vanduo Modals] Modal element not found:",e);return}if(!this.modals.has(t)){console.warn("[Vanduo Modals] Modal not initialized:",t);return}let n=this.modals.get(t),{backdrop:s,dialog:i}=n;if(this.zIndexCounter+=10,t.style.zIndex=this.zIndexCounter,s.style.zIndex=this.zIndexCounter-1,this.openModals.push(t),s.classList.add("is-visible"),t.classList.add("is-open"),t.setAttribute("aria-hidden","false"),this.openModals.length===1){document.body.classList.add("body-modal-open");let o=window.innerWidth-document.documentElement.clientWidth;o>0&&(document.body.style.paddingRight=`${o}px`)}let a=this.trapFocus(t);n.trapHandler=a,setTimeout(()=>{let o=this.getFocusableElements(t)[0];o&&o.focus()},100),t.dispatchEvent(new CustomEvent("modal:open",{bubbles:!0}))},close:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(!t){console.warn("[Vanduo Modals] Modal element not found:",e);return}if(!this.modals.has(t)){console.warn("[Vanduo Modals] Modal not initialized:",t);return}let n=this.modals.get(t),{backdrop:s,trapHandler:i}=n;i&&(t.removeEventListener("keydown",i),n.trapHandler=null);let a=this.openModals.indexOf(t);if(a>-1&&this.openModals.splice(a,1),t.classList.remove("is-open"),t.setAttribute("aria-hidden","true"),this.openModals.length===0)s.classList.remove("is-visible"),document.body.classList.remove("body-modal-open"),document.body.style.paddingRight="",this.zIndexCounter=1050;else{let r=this.openModals[this.openModals.length-1];this.modals.get(r).backdrop.classList.add("is-visible")}let o=document.querySelector(`[data-modal="#${t.id}"]`);o&&o.focus(),t.dispatchEvent(new CustomEvent("modal:close",{bubbles:!0}))},trapFocus:function(e){let t=this,n=function(s){if(s.key!=="Tab")return;let i=t.getFocusableElements(e),a=i[0],o=i[i.length-1];s.shiftKey?document.activeElement===a&&(s.preventDefault(),o.focus()):document.activeElement===o&&(s.preventDefault(),a.focus())};return e.addEventListener("keydown",n),n},getFocusableElements:function(e){return Array.from(e.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter(n=>!n.hasAttribute("disabled")&&n.offsetWidth>0&&n.offsetHeight>0)},toggle:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&(t.classList.contains("is-open")?this.close(t):this.open(t))},destroy:function(e){let t=this.modals.get(e);t&&(e.classList.contains("is-open")&&this.close(e),t.cleanup&&t.cleanup.forEach(n=>n()),t.backdrop&&t.backdrop.parentNode&&t.backdrop.parentNode.removeChild(t.backdrop),this.modals.delete(e))},destroyAll:function(){this.modals.forEach((e,t)=>{this.destroy(t)}),this._triggerCleanups.forEach(e=>e()),this._triggerCleanups=[],this._sharedEscHandler&&(document.removeEventListener("keydown",this._sharedEscHandler),this._sharedEscHandler=null)}};typeof window.Vanduo<"u"&&window.Vanduo.register("modals",m),window.VanduoModals=m})();(function(){"use strict";let m={instances:new Map,getBreakpoint:function(){let t=getComputedStyle(document.documentElement).getPropertyValue("--breakpoint-lg").trim(),n=parseInt(t,10);return isNaN(n)?992:n},init:function(){document.querySelectorAll(".vd-navbar").forEach(t=>{this.instances.has(t)||this.initNavbar(t)})},initScrollWatcher:function(e){let t=e.classList.contains("vd-navbar-glass"),n=e.classList.contains("vd-navbar-transparent");if(!t&&!n)return null;let s=()=>{let a=parseInt(e.dataset.scrollThreshold,10);return isNaN(a)?e.offsetHeight||60:a},i=()=>{let a=window.scrollY>s();e.classList.toggle("vd-navbar-scrolled",a)};return i(),window.addEventListener("scroll",i,{passive:!0}),()=>window.removeEventListener("scroll",i)},initNavbar:function(e){let t=e.querySelector(".vd-navbar-toggle, .vd-navbar-burger"),n=e.querySelector(".vd-navbar-menu"),s=e.querySelector(".vd-navbar-overlay")||this.createOverlay(e),i=[],a=this.initScrollWatcher(e);if(a&&i.push(a),!t||!n){i.length&&this.instances.set(e,{toggle:null,menu:null,overlay:null,cleanup:i});return}let o=h=>{h.preventDefault(),h.stopPropagation(),this.toggleMenu(e,t,n,s)};if(t.addEventListener("click",o),i.push(()=>t.removeEventListener("click",o)),s){let h=()=>{this.closeMenu(e,t,n,s)};s.addEventListener("click",h),i.push(()=>s.removeEventListener("click",h))}let r=h=>{h.key==="Escape"&&n.classList.contains("is-open")&&this.closeMenu(e,t,n,s)};document.addEventListener("keydown",r),i.push(()=>document.removeEventListener("keydown",r));let l,d=()=>{clearTimeout(l),l=setTimeout(()=>{let h=this.getBreakpoint();window.innerWidth>=h&&n.classList.contains("is-open")&&this.closeMenu(e,t,n,s)},250)};window.addEventListener("resize",d),i.push(()=>{clearTimeout(l),window.removeEventListener("resize",d)});let c=h=>{n.classList.contains("is-open")&&!e.contains(h.target)&&!n.contains(h.target)&&this.closeMenu(e,t,n,s)};document.addEventListener("click",c),i.push(()=>document.removeEventListener("click",c)),n.querySelectorAll(".vd-navbar-dropdown > .vd-nav-link, .vd-navbar-dropdown > .nav-link").forEach(h=>{let p=v=>{let y=this.getBreakpoint();if(window.innerWidthh.removeEventListener("click",p))}),this.instances.set(e,{toggle:t,menu:n,overlay:s,cleanup:i})},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),t.overlay&&t.overlay.parentNode&&t.overlay.parentNode.removeChild(t.overlay),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>{this.destroy(t)})},toggleMenu:function(e,t,n,s){n.classList.contains("is-open")?this.closeMenu(e,t,n,s):this.openMenu(e,t,n,s)},openMenu:function(e,t,n,s){n.classList.add("is-open"),t.classList.add("is-active"),s&&s.classList.add("is-active"),document.body.classList.add("body-navbar-open"),t.setAttribute("aria-expanded","true"),n.setAttribute("aria-hidden","false")},closeMenu:function(e,t,n,s){n.classList.remove("is-open"),t.classList.remove("is-active"),s&&s.classList.remove("is-active"),document.body.classList.remove("body-navbar-open"),n.querySelectorAll(".vd-navbar-dropdown-menu.is-open").forEach(a=>{a.classList.remove("is-open")}),t.setAttribute("aria-expanded","false"),n.setAttribute("aria-hidden","true")},createOverlay:function(e){let t=document.createElement("div");return t.className="vd-navbar-overlay",document.body.appendChild(t),t}};typeof window.Vanduo<"u"&&window.Vanduo.register("navbar",m),window.VanduoNavbar=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll(".vd-pagination[data-pagination]").forEach(t=>{this.instances.has(t)||this.initPagination(t)})},initPagination:function(e){let t=parseInt(e.dataset.totalPages)||1,n=parseInt(e.dataset.currentPage)||1,s=parseInt(e.dataset.maxVisible)||7;this.render(e,{totalPages:t,currentPage:n,maxVisible:s});let i=a=>{let o=a.target.closest(".vd-pagination-link");if(!o||o.closest(".vd-pagination-item.disabled")||o.closest(".vd-pagination-item.active"))return;a.preventDefault();let r=o.closest(".vd-pagination-item"),l=r.dataset.page;l?this.goToPage(e,parseInt(l)):r.classList.contains("pagination-prev")?this.prevPage(e):r.classList.contains("pagination-next")&&this.nextPage(e)};e.addEventListener("click",i),this.instances.set(e,{cleanup:[()=>e.removeEventListener("click",i)]})},render:function(e,t){let{totalPages:n,currentPage:s,maxVisible:i}=t;if(n<=1){e.innerHTML="";return}let a="";a+=`
  • `,a+='Previous',a+="
    • ";let o=this.calculatePages(s,n,i),r=0;o.forEach(l=>{if(l==="ellipsis")a+='
  • \u2026
    • ';else{l!==r+1&&r>0&&(a+='
  • \u2026
    • ');let d=Number(l);a+=`
  • `,a+=`${d}`,a+="
    • ",r=l}}),a+=`
  • `,a+='Next',a+="
    • ",e.innerHTML=a,e.dataset.currentPage=s},calculatePages:function(e,t,n){let s=[],i=Math.floor(n/2);if(t<=n)for(let a=1;a<=t;a++)s.push(a);else{s.push(1);let a=Math.max(2,e-i),o=Math.min(t-1,e+i);e<=i+1&&(o=Math.min(t-1,n-1)),e>=t-i&&(a=Math.max(2,t-n+2)),a>2&&s.push("ellipsis");for(let r=a;r<=o;r++)s.push(r);o1&&s.push(t)}return s},goToPage:function(e,t){let n=parseInt(e.dataset.totalPages)||1,s=parseInt(e.dataset.maxVisible)||7;t<1||t>n||(this.render(e,{totalPages:n,currentPage:t,maxVisible:s}),e.dispatchEvent(new CustomEvent("pagination:change",{bubbles:!0,detail:{page:t,totalPages:n}})))},prevPage:function(e){let t=parseInt(e.dataset.currentPage)||1;t>1&&this.goToPage(e,t-1)},nextPage:function(e){let t=parseInt(e.dataset.currentPage)||1,n=parseInt(e.dataset.totalPages)||1;tn()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>{this.destroy(t)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("pagination",m),window.VanduoPagination=m})();(function(){"use strict";let m={parallaxElements:new Map,ticking:!1,isMobile:window.innerWidth<768,reducedMotion:window.matchMedia("(prefers-reduced-motion: reduce)").matches,isInitialized:!1,_onScroll:null,_onResize:null,init:function(){if(this.isInitialized){this.refresh();return}if(this.isInitialized=!0,this.reducedMotion)return;document.querySelectorAll(".vd-parallax").forEach(t=>{t.dataset.parallaxInitialized||this.initParallax(t)}),this.handleScroll(),this._onScroll=()=>{this.handleScroll()},window.addEventListener("scroll",this._onScroll,{passive:!0}),this._onResize=()=>{this.isMobile=window.innerWidth<768,this.updateAll()},window.addEventListener("resize",this._onResize)},initParallax:function(e){e.dataset.parallaxInitialized="true";let t=e.classList.contains("parallax-disable-mobile");if(t&&this.isMobile)return;let n=e.querySelectorAll(".vd-parallax-layer, .vd-parallax-bg"),s=this.getSpeed(e),i=e.classList.contains("parallax-horizontal")?"horizontal":"vertical";this.parallaxElements.set(e,{layers:Array.from(n),speed:s,direction:i,disableMobile:t}),this.updateParallax(e)},getSpeed:function(e){return e.classList.contains("parallax-slow")?.5:e.classList.contains("parallax-fast")?1.5:1},handleScroll:function(){this.ticking||(window.requestAnimationFrame(()=>{this.updateAll(),this.ticking=!1}),this.ticking=!0)},updateAll:function(){this.parallaxElements.forEach((e,t)=>{e.disableMobile&&this.isMobile||this.updateParallax(t)})},updateParallax:function(e){let t=this.parallaxElements.get(e);if(!t)return;let n=e.getBoundingClientRect(),s=window.innerHeight,i=n.top,a=n.height,r=(Math.max(0,Math.min(1,(s-i)/(s+a)))-.5)*t.speed*100;t.layers.forEach((l,d)=>{let c=l.dataset.parallaxSpeed?parseFloat(l.dataset.parallaxSpeed):1,u=r*c;t.direction==="horizontal"?l.style.transform=`translateX(${u}px)`:l.style.transform=`translateY(${u}px)`})},destroy:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&this.parallaxElements.has(t)&&(this.parallaxElements.get(t).layers.forEach(s=>{s.style.transform=""}),this.parallaxElements.delete(t))},refresh:function(){this.updateAll()},destroyAll:function(){this.parallaxElements.forEach((e,t)=>{this.destroy(t)}),this.parallaxElements.clear(),this._onScroll&&(window.removeEventListener("scroll",this._onScroll),this._onScroll=null),this._onResize&&(window.removeEventListener("resize",this._onResize),this._onResize=null),this.isInitialized=!1}};typeof window.Vanduo<"u"&&window.Vanduo.register("parallax",m),window.VanduoParallax=m})();(function(){"use strict";let m={init:function(){document.querySelectorAll(".progress-bar[data-progress]").forEach(t=>{t.dataset.progressInitialized||this.initProgressBar(t)})},initProgressBar:function(e){e.dataset.progressInitialized="true";let t=parseInt(e.dataset.progress)||0;this.setProgress(e,t,!1)},setProgress:function(e,t,n=!0){let s=typeof e=="string"?document.querySelector(e):e;if(!s)return;t=Math.max(0,Math.min(100,t)),n?s.style.transition="width var(--transition-duration-slow) var(--transition-ease)":(s.style.transition="none",setTimeout(()=>{s.style.transition=""},0)),s.style.width=t+"%",s.setAttribute("aria-valuenow",t),s.setAttribute("aria-valuemin",0),s.setAttribute("aria-valuemax",100);let i=s.querySelector(".progress-text");i&&(i.textContent=t+"%"),s.dispatchEvent(new CustomEvent("progress:update",{bubbles:!0,detail:{value:t,max:100}})),t>=100&&s.dispatchEvent(new CustomEvent("progress:complete",{bubbles:!0,detail:{value:t,max:100}}))},animateProgress:function(e,t,n=1e3){let s=typeof e=="string"?document.querySelector(e):e;if(!s)return;let i=parseInt(s.style.width)||0,a=t-i,o=performance.now(),r=l=>{let d=l-o,c=Math.min(d/n,1),u=1-Math.pow(1-c,3),h=i+a*u;this.setProgress(s,h,!1),c<1&&requestAnimationFrame(r)};requestAnimationFrame(r)},show:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&(t.style.display="inline-block",t.setAttribute("aria-hidden","false"))},hide:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&(t.style.display="none",t.setAttribute("aria-hidden","true"))},toggle:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&(t.style.display==="none"||t.getAttribute("aria-hidden")==="true"?this.show(t):this.hide(t))},destroyAll:function(){document.querySelectorAll('.progress-bar[data-progress-initialized="true"]').forEach(t=>{delete t.dataset.progressInitialized})}};typeof window.Vanduo<"u"&&window.Vanduo.register("preloader",m),window.VanduoPreloader=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("select.vd-custom-select-input, select[data-custom-select]").forEach(t=>{this.instances.has(t)||this.initSelect(t)})},initSelect:function(e){if(e.closest(".vd-custom-select-wrapper"))return;let t=[],n=document.createElement("div");n.className="custom-select-wrapper",e.parentNode.insertBefore(n,e),n.appendChild(e);let s=document.createElement("button");s.type="button",s.className="custom-select-button",s.setAttribute("aria-haspopup","listbox"),s.setAttribute("aria-expanded","false"),s.setAttribute("aria-labelledby",e.id||this.generateId(e));let i=document.createElement("div");if(i.className="custom-select-dropdown",i.setAttribute("role","listbox"),e.dataset.searchable==="true"){let d=document.createElement("div");d.className="custom-select-search";let c=document.createElement("input");c.type="text",c.className="input input-sm",c.placeholder="Search...",c.setAttribute("aria-label","Search options"),d.appendChild(c),i.appendChild(d);let u=p=>{this.filterOptions(i,p.target.value)},h=typeof debounce=="function"?debounce(u,150):u;c.addEventListener("input",h),t.push(()=>c.removeEventListener("input",h))}this.buildOptions(e,i,s),n.appendChild(s),n.appendChild(i),this.updateButtonText(e,s);let a=d=>{d.preventDefault(),d.stopPropagation(),this.toggleDropdown(s,i)};s.addEventListener("click",a),t.push(()=>s.removeEventListener("click",a));let o=d=>{!n.contains(d.target)&&i.classList.contains("is-open")&&this.closeDropdown(s,i)};document.addEventListener("click",o),t.push(()=>document.removeEventListener("click",o));let r=d=>{this.handleKeydown(d,e,s,i)};s.addEventListener("keydown",r),t.push(()=>s.removeEventListener("keydown",r));let l=()=>{this.updateButtonText(e,s),this.updateSelectedOptions(e,i)};e.addEventListener("change",l),t.push(()=>e.removeEventListener("change",l)),this.instances.set(e,{wrapper:n,button:s,dropdown:i,cleanup:t,typeaheadBuffer:"",typeaheadTimer:null})},buildOptions:function(e,t,n){let s=e.querySelectorAll("option"),i=document.createDocumentFragment();s.forEach((a,o)=>{if(a.parentElement.tagName==="OPTGROUP"){let l=a.parentElement;if(!t.querySelector(`[data-group="${l.label}"]`)){let d=document.createElement("div");d.className="custom-select-option-group",d.textContent=l.label,d.dataset.group=l.label,i.appendChild(d)}}if(a.value===""&&!a.textContent.trim())return;let r=document.createElement("div");r.className="custom-select-option",r.textContent=a.textContent,r.setAttribute("role","option"),r.setAttribute("data-value",a.value),r.setAttribute("data-index",o),a.selected&&(r.classList.add("is-selected"),r.setAttribute("aria-selected","true")),a.disabled&&(r.classList.add("is-disabled"),r.setAttribute("aria-disabled","true")),r.addEventListener("click",l=>{a.disabled||this.selectOption(e,a,r,n,t)}),i.appendChild(r)}),t.appendChild(i)},selectOption:function(e,t,n,s,i){e.multiple?(t.selected=!t.selected,n.classList.toggle("is-selected"),n.setAttribute("aria-selected",t.selected)):(e.value=t.value,e.dispatchEvent(new Event("change",{bubbles:!0})),this.closeDropdown(s,i)),this.updateButtonText(e,s)},updateButtonText:function(e,t){if(e.multiple){let n=Array.from(e.selectedOptions);n.length===0?t.textContent=e.dataset.placeholder||"Select options...":n.length===1?t.textContent=n[0].textContent:t.textContent=`${n.length} selected`}else{let n=e.options[e.selectedIndex];t.textContent=n?n.textContent:e.dataset.placeholder||"Select..."}},updateSelectedOptions:function(e,t){let n=t.querySelectorAll(".custom-select-option"),s=Array.from(e.selectedOptions).map(i=>i.value);n.forEach(i=>{let a=i.dataset.value;s.includes(a)?(i.classList.add("is-selected"),i.setAttribute("aria-selected","true")):(i.classList.remove("is-selected"),i.setAttribute("aria-selected","false"))})},toggleDropdown:function(e,t){t.classList.contains("is-open")?this.closeDropdown(e,t):this.openDropdown(e,t)},openDropdown:function(e,t){t.classList.add("is-open"),e.setAttribute("aria-expanded","true");let n=t.querySelector(".custom-select-option:not(.is-disabled)");n&&n.focus()},closeDropdown:function(e,t){t.classList.remove("is-open"),e.setAttribute("aria-expanded","false")},handleKeydown:function(e,t,n,s){let i=s.classList.contains("is-open"),a=Array.from(s.querySelectorAll(".custom-select-option:not(.is-disabled)")),o=a.findIndex(r=>r===document.activeElement);switch(e.key){case"Enter":case" ":if(e.preventDefault(),i&&o>=0){let r=a[o],l=t.options[parseInt(r.dataset.index)];this.selectOption(t,l,r,n,s)}else this.openDropdown(n,s);break;case"Escape":i&&(e.preventDefault(),this.closeDropdown(n,s),n.focus());break;case"ArrowDown":if(e.preventDefault(),!i)this.openDropdown(n,s);else{let r=o0?o-1:a.length-1;a[r].focus()}break;case"Home":i&&(e.preventDefault(),a[0].focus());break;case"End":i&&(e.preventDefault(),a[a.length-1].focus());break;default:if(i&&e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey){let r=this.instances.get(t);if(!r)break;clearTimeout(r.typeaheadTimer),r.typeaheadBuffer+=e.key.toLowerCase();let l=a.find(d=>d.textContent.trim().toLowerCase().startsWith(r.typeaheadBuffer));l&&l.focus(),r.typeaheadTimer=setTimeout(()=>{r.typeaheadBuffer=""},500)}break}},filterOptions:function(e,t){let n=e.querySelectorAll(".vd-custom-select-option"),s=t.toLowerCase();n.forEach(i=>{i.textContent.toLowerCase().includes(s)?i.style.display="block":i.style.display="none"})},generateId:function(e){if(e.id)return e.id;let t="select-"+Math.random().toString(36).substr(2,9);return e.id=t,t},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),t.wrapper&&t.wrapper.parentNode&&(t.wrapper.parentNode.insertBefore(e,t.wrapper),t.wrapper.parentNode.removeChild(t.wrapper)),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>{this.destroy(t)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("select",m)})();(function(){"use strict";let m={sidenavs:new Map,breakpoint:992,_globalCleanups:[],isFixedVariant:function(e){return e.classList.contains("vd-sidenav-fixed")||e.classList.contains("sidenav-fixed")},isPushVariant:function(e){return e.classList.contains("vd-sidenav-push")||e.classList.contains("sidenav-push")},isRightVariant:function(e){return e.classList.contains("vd-sidenav-right")||e.classList.contains("sidenav-right")},init:function(){document.querySelectorAll(".vd-sidenav, .vd-offcanvas").forEach(s=>{this.sidenavs.has(s)||this.initSidenav(s)}),document.querySelectorAll("[data-sidenav-toggle]").forEach(s=>{if(s.dataset.sidenavToggleInitialized)return;s.dataset.sidenavToggleInitialized="true";let i=a=>{a.preventDefault();let o=s.dataset.sidenavToggle,r=document.querySelector(o);r&&this.toggle(r)};s.addEventListener("click",i),this._globalCleanups.push(()=>s.removeEventListener("click",i))}),this.handleResize();let n=()=>{this.handleResize()};window.addEventListener("resize",n),this._globalCleanups.push(()=>window.removeEventListener("resize",n))},initSidenav:function(e){let t=e.getAttribute("data-vd-position");if(t){let r=e.classList.contains("vd-offcanvas")?"vd-offcanvas":"vd-sidenav";e.classList.add(r+"-"+t)}let n=this.createOverlay(e),s=e.querySelector(".vd-sidenav-close, .vd-offcanvas-close"),i=[];if(e.setAttribute("role","navigation"),e.setAttribute("aria-hidden","true"),s){let r=()=>{this.close(e)};s.addEventListener("click",r),i.push(()=>s.removeEventListener("click",r))}let a=()=>{e.dataset.backdrop!=="static"&&this.close(e)};n.addEventListener("click",a),i.push(()=>n.removeEventListener("click",a));let o=r=>{r.key==="Escape"&&e.classList.contains("is-open")&&e.dataset.keyboard!=="false"&&this.close(e)};document.addEventListener("keydown",o),i.push(()=>document.removeEventListener("keydown",o)),this.sidenavs.set(e,{overlay:n,cleanup:i})},createOverlay:function(e){let t=e.querySelector(".vd-sidenav-overlay");return t||(t=document.createElement("div"),t.className="vd-sidenav-overlay",document.body.appendChild(t)),t},open:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(!t||!this.sidenavs.has(t))return;let{overlay:n}=this.sidenavs.get(t);this.isFixedVariant(t)||n.classList.add("is-visible"),t.classList.add("is-open"),t.setAttribute("aria-hidden","false"),document.body.classList.add("body-sidenav-open"),this.isPushVariant(t)&&this.handlePushVariant(t,!0),t.dispatchEvent(new CustomEvent("sidenav:open",{bubbles:!0}))},close:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(!t||!this.sidenavs.has(t))return;let{overlay:n}=this.sidenavs.get(t);n.classList.remove("is-visible"),t.classList.remove("is-open"),t.setAttribute("aria-hidden","true"),document.body.classList.remove("body-sidenav-open"),this.isPushVariant(t)&&this.handlePushVariant(t,!1),t.dispatchEvent(new CustomEvent("sidenav:close",{bubbles:!0}))},toggle:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&(t.classList.contains("is-open")?this.close(t):this.open(t))},handlePushVariant:function(e,t){let n=document.querySelector('main, .main-content, .content, [role="main"]')||document.body;t?window.innerWidth>=this.breakpoint&&(this.isRightVariant(e)?n.style.marginRight=e.offsetWidth+"px":n.style.marginLeft=e.offsetWidth+"px"):(n.style.marginLeft="",n.style.marginRight="")},handleResize:function(){this.sidenavs.forEach(({overlay:e},t)=>{window.innerWidth>=this.breakpoint?this.isFixedVariant(t)&&!t.classList.contains("is-open")&&(t.classList.add("is-open"),t.setAttribute("aria-hidden","false"),e.classList.remove("is-visible")):this.isFixedVariant(t)&&t.classList.contains("is-open")&&this.close(t)})},destroy:function(e){let t=this.sidenavs.get(e);t&&(e.classList.contains("is-open")&&this.close(e),t.cleanup.forEach(n=>n()),t.overlay&&t.overlay.parentNode&&t.overlay.parentNode.removeChild(t.overlay),this.sidenavs.delete(e))},destroyAll:function(){this.sidenavs.forEach((e,t)=>{this.destroy(t)}),this._globalCleanups.forEach(e=>e()),this._globalCleanups=[]}};typeof window.Vanduo<"u"&&window.Vanduo.register("sidenav",m),window.VanduoSidenav=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll(".vd-tabs, [data-tabs]").forEach(t=>{this.instances.has(t)||this.initTabs(t)})},initTabs:function(e){let t=e.querySelector('.vd-tab-list, [role="tablist"]'),n=e.querySelectorAll(".vd-tab-link, [data-tab]"),s=e.querySelectorAll(".vd-tab-pane, [data-tab-pane]");if(!t||n.length===0)return;let i=[];t.setAttribute("role","tablist"),n.forEach((o,r)=>{let l=o.dataset.tab||o.getAttribute("href")?.replace("#","")||`tab-${r}`,d=this.findPane(e,l,s);o.setAttribute("role","tab"),o.setAttribute("aria-selected",o.classList.contains("is-active")?"true":"false"),o.setAttribute("tabindex",o.classList.contains("is-active")?"0":"-1"),o.id||(o.id=`tab-btn-${l}`),d&&(d.setAttribute("role","tabpanel"),d.setAttribute("aria-labelledby",o.id),d.id||(d.id=`tab-pane-${l}`),o.setAttribute("aria-controls",d.id));let c=h=>{h.preventDefault(),!o.classList.contains("disabled")&&!o.disabled&&this.activateTab(e,o,n,s)};o.addEventListener("click",c),i.push(()=>o.removeEventListener("click",c));let u=h=>{this.handleKeydown(h,e,o,n,s)};o.addEventListener("keydown",u),i.push(()=>o.removeEventListener("keydown",u))}),!e.querySelector(".vd-tab-link.is-active, [data-tab].is-active")&&n.length>0&&this.activateTab(e,n[0],n,s),this.instances.set(e,{cleanup:i})},findPane:function(e,t,n){let s=e.querySelector(`[data-tab-pane="${t}"]`);return s||(s=e.querySelector(`#${t}`)),s||e.querySelectorAll(".vd-tab-link, [data-tab]").forEach((a,o)=>{(a.dataset.tab||a.getAttribute("href")?.replace("#",""))===t&&n[o]&&(s=n[o])}),s},activateTab:function(e,t,n,s){let i=t.dataset.tab||t.getAttribute("href")?.replace("#","")||t.id;n.forEach(r=>{r.classList.remove("is-active"),r.setAttribute("aria-selected","false"),r.setAttribute("tabindex","-1"),r.parentElement&&r.parentElement.classList.contains("tab-item")&&r.parentElement.classList.remove("is-active")}),s.forEach(r=>{r.classList.remove("is-active")}),t.classList.add("is-active"),t.setAttribute("aria-selected","true"),t.setAttribute("tabindex","0"),t.parentElement&&t.parentElement.classList.contains("tab-item")&&t.parentElement.classList.add("is-active");let a=this.findPane(e,i,s);a&&a.classList.add("is-active");let o=new CustomEvent("tab:change",{bubbles:!0,detail:{tab:t,pane:a,tabId:i}});e.dispatchEvent(o)},handleKeydown:function(e,t,n,s,i){let a=t.classList.contains("tabs-vertical"),o=Array.from(s).filter(d=>!d.classList.contains("disabled")&&!d.disabled),r=o.indexOf(n),l=r;switch(e.key){case"ArrowLeft":a||(e.preventDefault(),l=r>0?r-1:o.length-1);break;case"ArrowRight":a||(e.preventDefault(),l=r0?r-1:o.length-1);break;case"ArrowDown":a&&(e.preventDefault(),l=rn()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>{this.destroy(t)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("tabs",m)})();(function(){"use strict";let m={STORAGE_KEYS:{PRIMARY:"vanduo-primary-color",NEUTRAL:"vanduo-neutral-color",RADIUS:"vanduo-radius",FONT:"vanduo-font-preference",THEME:"vanduo-theme-preference"},DEFAULTS:{PRIMARY_LIGHT:"black",PRIMARY_DARK:"amber",NEUTRAL:"neutral",RADIUS:"0.5",FONT:"ubuntu",THEME:"system"},PRIMARY_COLORS:{black:{name:"Black",color:"#000000"},red:{name:"Red",color:"#fa5252"},orange:{name:"Orange",color:"#fd7e14"},amber:{name:"Amber",color:"#f59f00"},yellow:{name:"Yellow",color:"#fcc419"},lime:{name:"Lime",color:"#82c91e"},green:{name:"Green",color:"#40c057"},emerald:{name:"Emerald",color:"#20c997"},teal:{name:"Teal",color:"#12b886"},cyan:{name:"Cyan",color:"#22b8cf"},sky:{name:"Sky",color:"#3bc9db"},blue:{name:"Blue",color:"#228be6"},indigo:{name:"Indigo",color:"#4c6ef5"},violet:{name:"Violet",color:"#7950f2"},purple:{name:"Purple",color:"#be4bdb"},fuchsia:{name:"Fuchsia",color:"#f06595"},pink:{name:"Pink",color:"#e64980"},rose:{name:"Rose",color:"#ff8787"}},NEUTRAL_COLORS:{slate:{name:"Slate",color:"#64748b"},gray:{name:"Gray",color:"#6b7280"},zinc:{name:"Zinc",color:"#71717a"},neutral:{name:"Neutral",color:"#737373"},stone:{name:"Stone",color:"#78716c"}},RADIUS_OPTIONS:["0","0.125","0.25","0.375","0.5"],FONT_OPTIONS:{"jetbrains-mono":{name:"JetBrains Mono",family:"'JetBrains Mono', monospace"},inter:{name:"Inter",family:"'Inter', sans-serif"},"source-sans":{name:"Source Sans 3",family:"'Source Sans 3', sans-serif"},"fira-sans":{name:"Fira Sans",family:"'Fira Sans', sans-serif"},"ibm-plex":{name:"IBM Plex Sans",family:"'IBM Plex Sans', sans-serif"},system:{name:"System Default",family:null},ubuntu:{name:"Ubuntu",family:"'Ubuntu', sans-serif"},"open-sans":{name:"Open Sans",family:"'Open Sans', sans-serif"},rubik:{name:"Rubik",family:"'Rubik', sans-serif"},"titillium-web":{name:"Titillium Web",family:"'Titillium Web', sans-serif"}},THEME_MODES:["system","dark","light"],state:{primary:null,neutral:null,radius:null,font:null,theme:null,isOpen:!1},isInitialized:!1,_cleanup:[],elements:{customizer:null,trigger:null,panel:null,overlay:null},init:function(){if(this.isInitialized){this.bindExistingElements(),this.bindPanelEvents(),this.updateUI();return}this.isInitialized=!0,this._cleanup=[],this.loadPreferences(),this.applyAllPreferences(),this.bindExistingElements(),this.bindEvents(),console.log("Vanduo Theme Customizer initialized")},addListener:function(e,t,n,s){e&&(e.addEventListener(t,n,s),this._cleanup.push(()=>e.removeEventListener(t,n,s)))},getDefaultPrimary:function(e){return e==="system"?window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?this.DEFAULTS.PRIMARY_DARK:this.DEFAULTS.PRIMARY_LIGHT:e==="dark"?this.DEFAULTS.PRIMARY_DARK:this.DEFAULTS.PRIMARY_LIGHT},loadPreferences:function(){this.state.theme=this.getStorageValue(this.STORAGE_KEYS.THEME,this.DEFAULTS.THEME),this.state.primary=this.getStorageValue(this.STORAGE_KEYS.PRIMARY,this.getDefaultPrimary(this.state.theme)),this._normalizeDefaultPrimaryIfStaleWithStoredTheme(),this.state.neutral=this.getStorageValue(this.STORAGE_KEYS.NEUTRAL,this.DEFAULTS.NEUTRAL),this.state.radius=this.getStorageValue(this.STORAGE_KEYS.RADIUS,this.DEFAULTS.RADIUS),this.state.font=this.getStorageValue(this.STORAGE_KEYS.FONT,this.DEFAULTS.FONT)},savePreference:function(e,t){this.setStorageValue(e,t)},applyAllPreferences:function(){this.applyPrimary(this.state.primary),this.applyNeutral(this.state.neutral),this.applyRadius(this.state.radius),this.applyFont(this.state.font),this.applyTheme(this.state.theme)},applyPrimary:function(e){this.PRIMARY_COLORS[e]||(e=this.getDefaultPrimary(this.state.theme)),this.state.primary=e,document.documentElement.setAttribute("data-primary",e),this.savePreference(this.STORAGE_KEYS.PRIMARY,e),this.dispatchEvent("primary-change",{color:e})},applyNeutral:function(e){this.NEUTRAL_COLORS[e]||(e=this.DEFAULTS.NEUTRAL),this.state.neutral=e,document.documentElement.setAttribute("data-neutral",e),this.savePreference(this.STORAGE_KEYS.NEUTRAL,e),this.dispatchEvent("neutral-change",{neutral:e})},applyRadius:function(e){this.RADIUS_OPTIONS.includes(e)||(e=this.DEFAULTS.RADIUS),this.state.radius=e,document.documentElement.setAttribute("data-radius",e),document.documentElement.style.setProperty("--radius-scale",e),this.savePreference(this.STORAGE_KEYS.RADIUS,e),this.dispatchEvent("radius-change",{radius:e})},applyFont:function(e){this.FONT_OPTIONS[e]||(e=this.DEFAULTS.FONT),this.state.font=e,e==="system"?document.documentElement.removeAttribute("data-font"):document.documentElement.setAttribute("data-font",e),this.savePreference(this.STORAGE_KEYS.FONT,e),window.FontSwitcher&&window.FontSwitcher.setPreference&&(window.FontSwitcher.state.preference=e,window.FontSwitcher.applyFont()),this.dispatchEvent("font-change",{font:e})},applyTheme:function(e){if(this.THEME_MODES.includes(e)||(e=this.DEFAULTS.THEME),this._isApplying=!0,this.isUsingDefaultPrimary()){let t=this.getDefaultPrimary(e);this.state.primary!==t&&this.applyPrimary(t)}if(this.state.theme=e,e==="system"?document.documentElement.removeAttribute("data-theme"):document.documentElement.setAttribute("data-theme",e),this.savePreference(this.STORAGE_KEYS.THEME,e),window.Vanduo&&window.Vanduo.components.themeSwitcher){let t=window.Vanduo.components.themeSwitcher;t.state&&t.state.preference!==e&&(t.state.preference=e,typeof t.setStorageValue=="function"&&t.setStorageValue(t.STORAGE_KEY,e),typeof t.updateUI=="function"&&t.updateUI())}this._isApplying=!1,this.dispatchEvent("mode-change",{mode:e})},dispatchEvent:function(e,t){let n=new CustomEvent("theme:"+e,{bubbles:!0,detail:t});document.dispatchEvent(n);let s=new CustomEvent("theme:change",{bubbles:!0,detail:{type:e,value:t[Object.keys(t)[0]],state:{...this.state}}});document.dispatchEvent(s)},bindExistingElements:function(){if(this.elements.customizer=document.querySelector(".vd-theme-customizer"),this.elements.customizer)this.elements.trigger=this.elements.customizer.querySelector(".vd-theme-customizer-trigger"),this.elements.panel=this.elements.customizer.querySelector(".vd-theme-customizer-panel"),this.elements.overlay=this.elements.customizer.querySelector(".vd-theme-customizer-overlay");else{let e=document.querySelector("[data-theme-customizer-trigger]");e&&this.createDynamicPanel(e)}this.updateUI()},createDynamicPanel:function(e){let t=document.createElement("div");t.className="vd-theme-customizer",this.elements.trigger=e;let n=document.createElement("div");n.className="vd-theme-customizer-overlay";let s=document.createElement("div");s.className="vd-theme-customizer-panel",s.innerHTML=this.getPanelHTML(),document.body.appendChild(n),document.body.appendChild(s),this.elements.panel=s,this.elements.overlay=n,this.elements.customizer={contains:i=>s.contains(i)||e.contains(i)},this.positionPanel(),this.bindPanelEvents(),this.addListener(window,"resize",()=>this.positionPanel())},positionPanel:function(){if(!this.elements.panel||!this.elements.trigger)return;if(window.innerWidth<768)this.elements.panel.style.top="",this.elements.panel.style.right="",this.elements.panel.style.left="",this.elements.panel.style.height="",this.elements.panel.style.maxHeight="";else{let t=this.elements.trigger.getBoundingClientRect(),n=320,s=t.bottom+8,i=window.innerWidth,a=i-t.right;i-a-n<8&&(a=i-n-8),this.elements.panel.style.top=s+"px",this.elements.panel.style.right=a+"px",this.elements.panel.style.left="",this.elements.panel.style.height="auto",this.elements.panel.style.maxHeight="calc(100vh - "+s+"px)"}},bindPanelEvents:function(){if(!this.elements.panel||this.elements.panel.getAttribute("data-customizer-initialized")==="true")return;this.elements.panel.setAttribute("data-customizer-initialized","true"),this.elements.panel.querySelectorAll("[data-color]").forEach(s=>{this.addListener(s,"click",()=>{this.applyPrimary(s.dataset.color),this.updateUI()})}),this.elements.panel.querySelectorAll("[data-neutral]").forEach(s=>{this.addListener(s,"click",()=>{this.applyNeutral(s.dataset.neutral),this.updateUI()})}),this.elements.panel.querySelectorAll("[data-radius]").forEach(s=>{this.addListener(s,"click",()=>{this.applyRadius(s.dataset.radius),this.updateUI()})});let e=this.elements.panel.querySelector("[data-customizer-font]");e&&this.addListener(e,"change",s=>{this.applyFont(s.target.value),this.updateUI()});let t=this.elements.panel.querySelector(".customizer-reset");t&&this.addListener(t,"click",()=>{this.reset()});let n=this.elements.panel.querySelector(".customizer-mobile-close");n&&this.addListener(n,"click",()=>{this.close()}),this.elements.overlay&&this.addListener(this.elements.overlay,"click",()=>{this.close()})},getPanelHTML:function(){let e=typeof escapeHtml=="function"?escapeHtml:function(o){let r=document.createElement("div");return r.textContent=String(o??""),r.innerHTML},t=function(o){let r=String(o??"").trim();return/^(#[0-9a-fA-F]{3,8}|rgb[a]?\([^)]{1,60}\)|hsl[a]?\([^)]{1,60}\)|var\(--[a-zA-Z0-9_-]{1,40}\))$/.test(r)?r:"#000000"},n="";for(let[o,r]of Object.entries(this.PRIMARY_COLORS))n+=``;let s="";for(let[o,r]of Object.entries(this.NEUTRAL_COLORS))s+=``;let i="";this.RADIUS_OPTIONS.forEach(o=>{i+=``});let a="";for(let[o,r]of Object.entries(this.FONT_OPTIONS))a+=``;return`

    Customize Theme

    - `},isUsingDefaultPrimary:function(){return this.state.primary===this.DEFAULTS.PRIMARY_LIGHT||this.state.primary===this.DEFAULTS.PRIMARY_DARK},_normalizeDefaultPrimaryIfStaleWithStoredTheme:function(){if(!this.isUsingDefaultPrimary())return;let e=this.getDefaultPrimary(this.state.theme);this.state.primary!==e&&(this.state.primary=e)},bindEvents:function(){if(this.elements.trigger&&this.addListener(this.elements.trigger,"click",e=>{e.preventDefault(),e.stopPropagation(),this.toggle()}),this.bindPanelEvents(),window.matchMedia){let e=window.matchMedia("(prefers-color-scheme: dark)"),t=()=>{if(this.state.theme==="system"&&this.isUsingDefaultPrimary()){let n=this.getDefaultPrimary("system");n!==this.state.primary&&(this.applyPrimary(n),this.updateUI())}};e.addEventListener("change",t),this._cleanup.push(()=>e.removeEventListener("change",t))}this.addListener(document,"click",e=>{this.state.isOpen&&this.elements.customizer&&!this.elements.customizer.contains(e.target)&&this.close()}),this.addListener(document,"keydown",e=>{e.key==="Escape"&&this.state.isOpen&&this.close()})},toggle:function(){this.state.isOpen?this.close():this.open()},open:function(){this.state.isOpen=!0,this.positionPanel(),this.elements.panel&&this.elements.panel.classList.add("is-open"),this.elements.trigger&&this.elements.trigger.setAttribute("aria-expanded","true"),this.elements.overlay&&this.elements.overlay.classList.add("is-active"),this.dispatchEvent("panel-open",{isOpen:!0})},close:function(){this.state.isOpen=!1,this.elements.panel&&this.elements.panel.classList.remove("is-open"),this.elements.trigger&&this.elements.trigger.setAttribute("aria-expanded","false"),this.elements.overlay&&this.elements.overlay.classList.remove("is-active"),this.dispatchEvent("panel-close",{isOpen:!1})},updateUI:function(){if(!this.elements.panel)return;this.elements.panel.querySelectorAll("[data-color]").forEach(t=>{t.classList.toggle("is-active",t.dataset.color===this.state.primary)}),this.elements.panel.querySelectorAll("[data-neutral]").forEach(t=>{t.classList.toggle("is-active",t.dataset.neutral===this.state.neutral)}),this.elements.panel.querySelectorAll("[data-radius]").forEach(t=>{t.classList.toggle("is-active",t.dataset.radius===this.state.radius)});let e=this.elements.panel.querySelector("[data-customizer-font]");e&&(e.value=this.state.font)},reset:function(){this.applyTheme(this.DEFAULTS.THEME),this.applyPrimary(this.getDefaultPrimary(this.DEFAULTS.THEME)),this.applyNeutral(this.DEFAULTS.NEUTRAL),this.applyRadius(this.DEFAULTS.RADIUS),this.applyFont(this.DEFAULTS.FONT),this.updateUI(),this.dispatchEvent("reset",{state:{...this.state}})},getState:function(){return{...this.state}},setPreferences:function(e){e.primary&&this.applyPrimary(e.primary),e.neutral&&this.applyNeutral(e.neutral),e.radius&&this.applyRadius(e.radius),e.font&&this.applyFont(e.font),e.theme&&this.applyTheme(e.theme),this.updateUI()},getStorageValue:function(e,t){if(typeof window.safeStorageGet=="function")return window.safeStorageGet(e,t);try{let n=localStorage.getItem(e);return n!==null?n:t}catch{return t}},setStorageValue:function(e,t){if(typeof window.safeStorageSet=="function")return window.safeStorageSet(e,t);try{return localStorage.setItem(e,t),!0}catch{return!1}},destroyAll:function(){this._cleanup.forEach(e=>e()),this._cleanup=[],this.elements.panel&&this.elements.panel.removeAttribute("data-customizer-initialized"),this.close(),this.isInitialized=!1}};window.Vanduo&&window.Vanduo.register("themeCustomizer",m),window.ThemeCustomizer=m})();(function(){"use strict";let m={isInitialized:!1,_mediaQuery:null,_onMediaChange:null,init:function(){if(this.STORAGE_KEY="vanduo-theme-preference",this.state={preference:this.getPreference()},this.isInitialized){this.applyTheme(),this.renderUI(),this.updateUI();return}this.isInitialized=!0,this.applyTheme(),this.listenForSystemChanges(),this.renderUI(),console.log("Vanduo Theme Switcher initialized")},getPreference:function(){return this.getStorageValue(this.STORAGE_KEY,"system")},setPreference:function(e){this.state.preference=e,this.setStorageValue(this.STORAGE_KEY,e),this.applyTheme(),window.ThemeCustomizer&&window.ThemeCustomizer.applyTheme&&!window.ThemeCustomizer._isApplying&&window.ThemeCustomizer.applyTheme(e),this.updateUI()},getStorageValue:function(e,t){if(typeof window.safeStorageGet=="function")return window.safeStorageGet(e,t);try{let n=localStorage.getItem(e);return n!==null?n:t}catch{return t}},setStorageValue:function(e,t){if(typeof window.safeStorageSet=="function")return window.safeStorageSet(e,t);try{return localStorage.setItem(e,t),!0}catch{return!1}},applyTheme:function(){let e=this.state.preference;e==="system"?document.documentElement.removeAttribute("data-theme"):document.documentElement.setAttribute("data-theme",e)},listenForSystemChanges:function(){this._mediaQuery&&this._onMediaChange||(this._mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this._onMediaChange=e=>{this.state.preference==="system"&&(this.applyTheme(),window.ThemeCustomizer&&typeof window.ThemeCustomizer.applyTheme=="function"&&!window.ThemeCustomizer._isApplying&&window.ThemeCustomizer.applyTheme("system"))},this._mediaQuery.addEventListener("change",this._onMediaChange))},renderUI:function(){document.querySelectorAll('[data-toggle="theme"]').forEach(t=>{if(t.getAttribute("data-theme-initialized")==="true"){t.tagName==="SELECT"&&(t.value=this.state.preference);return}if(t.tagName==="SELECT"){t.value=this.state.preference;let n=s=>{this.setPreference(s.target.value)};t.addEventListener("change",n),t._themeToggleHandler=n}else{let n=()=>{let s=["system","light","dark"],i=(s.indexOf(this.state.preference)+1)%s.length;this.setPreference(s[i])};t.addEventListener("click",n),t._themeToggleHandler=n}t.setAttribute("data-theme-initialized","true")})},updateUI:function(){document.querySelectorAll('[data-toggle="theme"]').forEach(t=>{if(t.tagName==="SELECT")t.value=this.state.preference;else{let n=t.querySelector(".theme-current-label");n&&(n.textContent=this.state.preference.charAt(0).toUpperCase()+this.state.preference.slice(1))}})},destroyAll:function(){document.querySelectorAll('[data-toggle="theme"][data-theme-initialized="true"]').forEach(t=>{if(t._themeToggleHandler){let n=t.tagName==="SELECT"?"change":"click";t.removeEventListener(n,t._themeToggleHandler),delete t._themeToggleHandler}t.removeAttribute("data-theme-initialized")}),this._mediaQuery&&this._onMediaChange&&this._mediaQuery.removeEventListener("change",this._onMediaChange),this._mediaQuery=null,this._onMediaChange=null,this.isInitialized=!1}};window.Vanduo&&window.Vanduo.register("themeSwitcher",m)})();(function(){"use strict";let m={defaults:{position:"top-right",duration:5e3,dismissible:!0,showProgress:!0,pauseOnHover:!0},containers:{},getContainer:function(e){if(this.containers[e])return this.containers[e];let t=document.createElement("div");return t.className=`vd-toast-container vd-toast-container-${e}`,t.setAttribute("role","status"),t.setAttribute("aria-live","polite"),t.setAttribute("aria-atomic","false"),document.body.appendChild(t),this.containers[e]=t,t},show:function(e,t,n){typeof e=="string"&&(e={message:e,type:t,duration:n});let s=Object.assign({},this.defaults,e),i=this.getContainer(s.position),a=document.createElement("div");a.className="vd-toast",s.type&&a.classList.add(`vd-toast-${s.type}`),s.solid&&a.classList.add("vd-toast-solid"),s.showProgress&&s.duration>0&&a.classList.add("vd-toast-with-progress");let o="";if(s.icon){let v=typeof sanitizeHtml=="function"?sanitizeHtml(s.icon):escapeHtml(s.icon);o+=`${v}`}else s.type&&(o+=`${this.getDefaultIcon(s.type)}`);let r=typeof escapeHtml=="function"?escapeHtml:function(v){let y=document.createElement("div");return y.appendChild(document.createTextNode(v)),y.innerHTML};if(o+='
    ',s.title&&(o+=`
    ${r(String(s.title))}
    `),s.message&&(o+=`
    ${r(String(s.message))}
    `),o+="
    ",s.dismissible&&(o+=''),s.showProgress&&s.duration>0){let v=parseInt(s.duration,10)||0;o+=`
    `}if(a.innerHTML=o,i.appendChild(a),a._toastCleanup=[],s.dismissible){let v=a.querySelector(".vd-toast-close"),y=()=>{this.dismiss(a)};v.addEventListener("click",y),a._toastCleanup.push(()=>v.removeEventListener("click",y))}let l=null,d=s.duration,c=null,h=()=>{if(s.duration>0){c=Date.now(),l=setTimeout(()=>{this.dismiss(a)},d),a._toastTimeoutId=l;let v=a.querySelector(".vd-toast-progress");v&&(v.style.animationPlayState="running")}},u=()=>{if(l){clearTimeout(l),l=null,a._toastTimeoutId=null,d-=Date.now()-c;let v=a.querySelector(".vd-toast-progress");v&&(v.style.animationPlayState="paused")}};s.pauseOnHover&&(a.addEventListener("mouseenter",u),a.addEventListener("mouseleave",h),a._toastCleanup.push(()=>a.removeEventListener("mouseenter",u),()=>a.removeEventListener("mouseleave",h))),requestAnimationFrame(()=>{a.classList.add("is-visible"),h()}),a._toastConfig=s;let p=new CustomEvent("toast:show",{bubbles:!0,detail:{toast:a,config:s}});return a.dispatchEvent(p),a},dismiss:function(e){if(!e||e.classList.contains("is-exiting"))return;e._toastTimeoutId&&(clearTimeout(e._toastTimeoutId),e._toastTimeoutId=null),e.classList.remove("is-visible"),e.classList.add("is-exiting");let t=new CustomEvent("toast:dismiss",{bubbles:!0,detail:{toast:e}});e.dispatchEvent(t);let n=()=>{e.removeEventListener("transitionend",n),e._toastCleanup&&(e._toastCleanup.forEach(s=>s()),delete e._toastCleanup),e.parentElement&&e.parentElement.removeChild(e)};e.addEventListener("transitionend",n),setTimeout(()=>{e._toastCleanup&&(e._toastCleanup.forEach(s=>s()),delete e._toastCleanup),e.parentElement&&e.parentElement.removeChild(e)},400)},destroyAll:function(){Object.keys(this.containers).forEach(e=>{let t=this.containers[e];if(!t)return;t.querySelectorAll(".vd-toast").forEach(s=>{s._toastTimeoutId&&clearTimeout(s._toastTimeoutId),s._toastCleanup&&(s._toastCleanup.forEach(i=>i()),delete s._toastCleanup),s.parentElement&&s.parentElement.removeChild(s)}),t.parentElement&&t.parentElement.removeChild(t)}),this.containers={}},dismissAll:function(e){e&&this.containers[e]?this.containers[e].querySelectorAll(".vd-toast").forEach(n=>this.dismiss(n)):Object.values(this.containers).forEach(t=>{t.querySelectorAll(".vd-toast").forEach(s=>this.dismiss(s))})},getDefaultIcon:function(e){return{success:'',error:'',warning:'',info:''}[e]||""},success:function(e,t){return this.show(Object.assign({message:e,type:"success"},t))},error:function(e,t){return this.show(Object.assign({message:e,type:"error"},t))},warning:function(e,t){return this.show(Object.assign({message:e,type:"warning"},t))},info:function(e,t){return this.show(Object.assign({message:e,type:"info"},t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("toast",m),window.Toast=m})();(function(){"use strict";let m={tooltips:new Map,delayTimers:new Map,sanitizeHtml:function(e){if(typeof sanitizeHtml=="function")return sanitizeHtml(e);let t=document.createElement("div");return t.textContent=e||"",t.innerHTML},init:function(){document.querySelectorAll("[data-tooltip], [data-tooltip-html]").forEach(t=>{this.tooltips.has(t)||this.initTooltip(t)})},initTooltip:function(e){let t=this.createTooltip(e),n=[],s=()=>{this.showTooltip(e,t)},i=()=>{this.hideTooltip(e,t)},a=()=>{this.showTooltip(e,t)},o=()=>{this.hideTooltip(e,t)};e.addEventListener("mouseenter",s),e.addEventListener("mouseleave",i),e.addEventListener("focus",a),e.addEventListener("blur",o),n.push(()=>e.removeEventListener("mouseenter",s),()=>e.removeEventListener("mouseleave",i),()=>e.removeEventListener("focus",a),()=>e.removeEventListener("blur",o)),this.tooltips.set(e,{tooltip:t,cleanup:n})},createTooltip:function(e){let t=document.createElement("div");t.className="vd-tooltip",t.setAttribute("role","tooltip"),t.setAttribute("aria-hidden","true");let n="tooltip-"+Math.random().toString(36).substr(2,9);t.id=n,e.setAttribute("aria-describedby",n);let s=e.dataset.tooltipHtml,i=e.dataset.tooltip;s?(t.innerHTML=this.sanitizeHtml(s),t.classList.add("vd-tooltip-html")):i&&(t.textContent=i);let a=e.dataset.tooltipPlacement||e.dataset.placement||"top";t.setAttribute("data-placement",a),t.classList.add(`vd-tooltip-${a}`),e.dataset.tooltipVariant&&t.classList.add(`vd-tooltip-${e.dataset.tooltipVariant}`),e.dataset.tooltipSize&&t.classList.add(`vd-tooltip-${e.dataset.tooltipSize}`);let o=parseInt(e.dataset.tooltipDelay)||0;return t.dataset.delay=o,document.body.appendChild(t),t},showTooltip:function(e,t){let n=parseInt(t.dataset.delay)||0;if(n>0){let s=setTimeout(()=>{this.positionTooltip(e,t),t.classList.add("is-visible"),t.setAttribute("aria-hidden","false")},n);this.delayTimers.set(e,s)}else this.positionTooltip(e,t),t.classList.add("is-visible"),t.setAttribute("aria-hidden","false")},hideTooltip:function(e,t){let n=this.delayTimers.get(e);n&&(clearTimeout(n),this.delayTimers.delete(e)),t.classList.remove("is-visible"),t.setAttribute("aria-hidden","true")},positionTooltip:function(e,t){let n=t.dataset.placement||"top",s=e.getBoundingClientRect(),i=t.getBoundingClientRect(),a=window.pageYOffset||document.documentElement.scrollTop,o=window.pageXOffset||document.documentElement.scrollLeft,r=0,l=0;switch(n){case"top":r=s.top+a-i.height-8,l=s.left+o+s.width/2-i.width/2;break;case"bottom":r=s.bottom+a+8,l=s.left+o+s.width/2-i.width/2;break;case"left":r=s.top+a+s.height/2-i.height/2,l=s.left+o-i.width-8;break;case"right":r=s.top+a+s.height/2-i.height/2,l=s.right+o+8;break}let d=window.innerWidth,c=window.innerHeight,h=8;ld-h&&(l=d-i.width-h),ra+c-h&&(r=a+c-i.height-h),t.style.cssText=`position: absolute; top: 0; left: 0; transform: translate(${l}px, ${r}px);`},show:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t&&this.tooltips.has(t)){let{tooltip:n}=this.tooltips.get(t);this.showTooltip(t,n)}},hide:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t&&this.tooltips.has(t)){let{tooltip:n}=this.tooltips.get(t);this.hideTooltip(t,n)}},update:function(e,t,n=!1){let s=typeof e=="string"?document.querySelector(e):e;if(s&&this.tooltips.has(s)){let{tooltip:i}=this.tooltips.get(s);n?(i.innerHTML=this.sanitizeHtml(t),i.classList.add("vd-tooltip-html")):(i.textContent=t,i.classList.remove("vd-tooltip-html"))}},destroy:function(e){let t=this.tooltips.get(e);if(!t)return;let n=this.delayTimers.get(e);n&&(clearTimeout(n),this.delayTimers.delete(e)),t.cleanup.forEach(s=>s()),t.tooltip&&t.tooltip.parentNode&&t.tooltip.parentNode.removeChild(t.tooltip),this.tooltips.delete(e)},destroyAll:function(){this.tooltips.forEach((e,t)=>{this.destroy(t)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("tooltips",m),window.VanduoTooltips=m})();(function(){"use strict";let m={minQueryLength:2,maxResults:10,debounceMs:150,highlightTag:"mark",keyboardShortcut:!0,containerSelector:".vd-doc-search",inputSelector:".vd-doc-search-input",resultsSelector:".vd-doc-search-results",contentSelector:".doc-content section[id]",titleSelector:".demo-title, h2, h3",navSelector:".doc-nav-link",sectionSelector:".doc-nav-section",excludeFromContent:"pre, code, script, style",maxContentLength:500,data:null,categoryIcons:{"getting-started":"ph-rocket-launch",core:"ph-cube",components:"ph-puzzle-piece",interactive:"ph-cursor-click","data-display":"ph-table",feedback:"ph-bell",meta:"ph-info",default:"ph-file-text"},onSelect:null,onSearch:null,onOpen:null,onClose:null,emptyTitle:"No results found",emptyText:"Try different keywords or check spelling",placeholder:"Search..."};function e(n){let s=Object.assign({},m,n||{}),i={initialized:!1,index:[],results:[],activeIndex:-1,isOpen:!1,query:"",container:null,input:null,resultsContainer:null,debounceTimer:null,boundHandlers:{}};function a(b,S,...A){try{S(...A)}catch(D){console.warn('[Vanduo Search] Callback error in "'+b+'":',D)}}function o(b){if(i.resultsContainer)try{i.resultsContainer.innerHTML=b}catch(S){console.warn("[Vanduo Search] Failed to render results:",S)}}function r(){return i.initialized?U:(i.container=document.querySelector(s.containerSelector),!i.container||(i.input=i.container.querySelector(s.inputSelector),i.resultsContainer=i.container.querySelector(s.resultsSelector),!i.input||!i.resultsContainer)?(i.initialized=!1,null):(s.placeholder&&i.input.setAttribute("placeholder",s.placeholder),l(),v(),C(),i.initialized=!0,U))}function l(){if(i.index=[],s.data&&Array.isArray(s.data)){s.data.forEach(function(A){i.index.push({id:A.id||p(A.title),title:A.title||"",category:A.category||"",categorySlug:p(A.category||""),content:A.content||"",keywords:A.keywords||u(A.title+" "+A.content),url:A.url||"#"+(A.id||p(A.title)),icon:A.icon||""})});return}let b=document.querySelectorAll(s.contentSelector),S=d();b.forEach(function(A){let D=A.id;if(!D)return;let N=A.querySelector(s.titleSelector),q=N?N.textContent.replace(/v[\d.]+/g,"").trim():D,X=S[D]||"Documentation",$=c(A),B=h(A,q),Y=N?N.querySelector("i.ph"):null,W="";if(Y&&Y.classList){for(let K=0;K2&&A.push(q)}),b.querySelectorAll("code").forEach(function(q){let $=(q.textContent||"").match(/\.([\w-]+)/g);$&&$.forEach(function(B){A.push(B.substring(1).toLowerCase())})}),b.querySelectorAll("[data-tooltip], [data-modal]").forEach(function(q){q.getAttributeNames().filter(function($){return $.startsWith("data-")}).forEach(function($){A.push($.replace("data-",""))})}),Array.from(new Set(A))}function u(b){return b.toLowerCase().split(/\s+/).filter(function(A){return A.length>2})}function p(b){return b.toLowerCase().replace(/\s+/g,"-").replace(/[^a-z0-9-]/g,"")}function v(){i.boundHandlers.handleInput=function(b){L(b)},i.boundHandlers.handleFocus=function(){i.query.length>=s.minQueryLength&&H()},i.boundHandlers.handleKeydown=function(b){P(b)},i.boundHandlers.handleOutsideClick=function(b){i.container.contains(b.target)||z()},i.boundHandlers.handleGlobalKeydown=function(b){s.keyboardShortcut&&(b.metaKey||b.ctrlKey)&&b.key==="k"&&(b.preventDefault(),i.input.focus(),i.input.select())},i.boundHandlers.handleResultClick=function(b){let S=b.target.closest(".vd-doc-search-result");if(S){let A=parseInt(S.dataset.index,10);I(A)}},i.input.addEventListener("input",i.boundHandlers.handleInput),i.input.addEventListener("focus",i.boundHandlers.handleFocus),i.input.addEventListener("keydown",i.boundHandlers.handleKeydown),document.addEventListener("click",i.boundHandlers.handleOutsideClick),document.addEventListener("keydown",i.boundHandlers.handleGlobalKeydown),i.resultsContainer.addEventListener("click",i.boundHandlers.handleResultClick)}function y(){i.input&&(i.input.removeEventListener("input",i.boundHandlers.handleInput),i.input.removeEventListener("focus",i.boundHandlers.handleFocus),i.input.removeEventListener("keydown",i.boundHandlers.handleKeydown)),document.removeEventListener("click",i.boundHandlers.handleOutsideClick),document.removeEventListener("keydown",i.boundHandlers.handleGlobalKeydown),i.resultsContainer&&i.resultsContainer.removeEventListener("click",i.boundHandlers.handleResultClick)}function C(){let b=i.resultsContainer.id||"search-results-"+Math.random().toString(36).substr(2,9);i.resultsContainer.id=b,i.input.setAttribute("role","combobox"),i.input.setAttribute("aria-autocomplete","list"),i.input.setAttribute("aria-controls",b),i.input.setAttribute("aria-expanded","false"),i.resultsContainer.setAttribute("role","listbox"),i.resultsContainer.setAttribute("aria-label","Search results")}function L(b){let S=b.target.value.trim();i.debounceTimer&&clearTimeout(i.debounceTimer),i.debounceTimer=setTimeout(function(){if(i.query=S,S.length=s.minQueryLength&&(b.preventDefault(),i.results=x(i.query),_(),H());return}switch(b.key){case"ArrowDown":b.preventDefault(),w(1);break;case"ArrowUp":b.preventDefault(),w(-1);break;case"Enter":b.preventDefault(),i.activeIndex>=0?I(i.activeIndex):i.results.length>0&&I(0);break;case"Escape":b.preventDefault(),z();break;case"Tab":z();break}}function x(b){let S=b.toLowerCase().split(/\s+/).filter(function(D){return D.length>0}),A=[];return i.index.forEach(function(D){let N=0,q=D.title.toLowerCase(),X=D.category.toLowerCase(),$=D.content.toLowerCase();S.forEach(function(B){q.includes(B)&&(N+=100,q===B?N+=50:q.startsWith(B)&&(N+=25)),X.includes(B)&&(N+=50),D.keywords.some(function(W){return W.includes(B)})&&(N+=30),$.includes(B)&&(N+=10)}),N>0&&A.push({id:D.id,title:D.title,category:D.category,categorySlug:D.categorySlug,content:D.content,url:D.url,icon:D.icon,score:N})}),A.sort(function(D,N){return N.score-D.score}),A.slice(0,s.maxResults)}function _(){if(i.results.length===0){o(V());return}let b='
      ';i.results.forEach(function(S,A){let D=A===i.activeIndex,N=S.icon||k(S.categorySlug),q=T(S.content,i.query);b+='
    • '+M(S.title,i.query)+'
      '+f(S.category)+'
      '+M(q,i.query)+"
      • "}),b+="
    ",b+=g(),o(b)}function V(){return'
    '+f(s.emptyTitle)+'
    '+f(s.emptyText)+"
    "}function g(){return'
    \u2191\u2193 to navigate\u21B5 to selectesc to close
    '}function k(b){return s.categoryIcons[b]||s.categoryIcons.default||"ph-file-text"}function T(b,S){let A=S.toLowerCase().split(/\s+/),D=b.toLowerCase(),N=100,q=-1;for(let Y=0;Y0&&(B="..."+B),$0}),D=f(b);return A.forEach(function(N){if(N.length>50)return;let q=new RegExp("("+N.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")+")","gi");D=D.replace(q,"<"+s.highlightTag+">$1")}),D}function f(b){let S=document.createElement("div");return S.textContent=b,S.innerHTML}function w(b){let S=i.activeIndex+b;S<0?S=i.results.length-1:S>=i.results.length&&(S=0),E(S)}function E(b){let S=i.resultsContainer.querySelector(".vd-doc-search-result.is-active");S&&(S.classList.remove("is-active"),S.setAttribute("aria-selected","false")),i.activeIndex=b;let A=i.resultsContainer.querySelector('[data-index="'+b+'"]');A&&(A.classList.add("is-active"),A.setAttribute("aria-selected","true"),i.input.setAttribute("aria-activedescendant","vd-doc-search-result-"+b),A.scrollIntoView({block:"nearest"}))}function I(b){let S=i.results[b];if(!S)return;if(z(),i.input.value="",i.query="",typeof s.onSelect=="function"){a("onSelect",s.onSelect,S);return}let A=document.querySelector(S.url);A&&(A.scrollIntoView({behavior:"smooth",block:"start"}),window.history.pushState(null,"",S.url),O(S.id))}function O(b){document.querySelectorAll(s.navSelector).forEach(function(A){A.classList.remove("active"),A.getAttribute("href")==="#"+b&&A.classList.add("active")})}function H(){i.isOpen||(i.isOpen=!0,i.resultsContainer.classList.add("is-open"),i.input.setAttribute("aria-expanded","true"),typeof s.onOpen=="function"&&a("onOpen",s.onOpen))}function z(){i.isOpen&&(i.isOpen=!1,i.activeIndex=-1,i.resultsContainer.classList.remove("is-open"),i.input.setAttribute("aria-expanded","false"),i.input.removeAttribute("aria-activedescendant"),typeof s.onClose=="function"&&a("onClose",s.onClose))}function R(){y(),i.initialized=!1,i.index=[],i.results=[],i.isOpen=!1,i.query="",i.debounceTimer&&clearTimeout(i.debounceTimer),i.resultsContainer&&o("")}function j(){l()}function G(b){Object.assign(s,b)}function Z(){return Object.assign({},s)}function F(){return i.index.slice()}let U={init:r,destroy:R,rebuild:j,search:x,open:H,close:z,setConfig:G,getConfig:Z,getIndex:F};return U}let t={create:function(n){let s=e(n);return s&&s.init(),s||null},_instance:null,config:Object.assign({},m),init:function(n){return this._instance&&this._instance.destroy(),n&&Object.assign(this.config,n),this._instance=e(this.config),this._instance?this._instance.init():null},destroy:function(){this._instance&&(this._instance.destroy(),this._instance=null)},destroyAll:function(){this.destroy()},rebuild:function(){this._instance&&this._instance.rebuild()},search:function(n){return this._instance?this._instance.search(n):[]},open:function(){this._instance&&this._instance.open()},close:function(){this._instance&&this._instance.close()}};typeof window.Vanduo<"u"&&window.Vanduo.register("docSearch",t),window.Search=t,window.DocSearch=t,window.VanduoDocSearch=t})();(function(){"use strict";let m={instances:new Map,currentDrag:null,touchState:null,feedbackElement:null,containerSelector:".vd-draggable-container, .vd-draggable-container-vertical",init:function(){document.querySelectorAll(".vd-draggable, [data-draggable]").forEach(s=>{this.instances.has(s)||this.initDraggable(s)}),document.querySelectorAll(this.containerSelector).forEach(s=>{this.instances.has(s)||this.initContainer(s)}),document.querySelectorAll(".vd-drop-zone").forEach(s=>{this.instances.has(s)||this.initDropZone(s)}),this.createFeedbackElement()},initDraggable:function(e){let t=[];e.hasAttribute("draggable")||e.setAttribute("draggable","true"),e.hasAttribute("tabindex")||e.setAttribute("tabindex","0"),e.setAttribute("role","option"),e.setAttribute("aria-roledescription","draggable item"),e.setAttribute("aria-grabbed","false");let n=c=>{this.handleDragStart(c,e)};e.addEventListener("dragstart",n),t.push(()=>e.removeEventListener("dragstart",n));let s=c=>{this.handleDrag(c,e)};e.addEventListener("drag",s),t.push(()=>e.removeEventListener("drag",s));let i=c=>{this.handleDragEnd(c,e)};e.addEventListener("dragend",i),t.push(()=>e.removeEventListener("dragend",i));let a=c=>{this.handleTouchStart(c,e)};e.addEventListener("touchstart",a),t.push(()=>e.removeEventListener("touchstart",a));let o=c=>{this.handleTouchMove(c,e)};e.addEventListener("touchmove",o,{passive:!1}),t.push(()=>e.removeEventListener("touchmove",o));let r=c=>{this.handleTouchEnd(c,e)};e.addEventListener("touchend",r,{passive:!1}),t.push(()=>e.removeEventListener("touchend",r));let l=c=>{this.handleTouchEnd(c,e)};e.addEventListener("touchcancel",l),t.push(()=>e.removeEventListener("touchcancel",l));let d=c=>{this.handleKeydown(c,e)};e.addEventListener("keydown",d),t.push(()=>e.removeEventListener("keydown",d)),this.instances.set(e,{cleanup:t})},initContainer:function(e){e.setAttribute("role","listbox"),e.setAttribute("aria-label",e.getAttribute("aria-label")||"Draggable items"),e.querySelectorAll(".vd-draggable-item").forEach(o=>{this.instances.has(o)||this.initDraggable(o)});let n=[],s=o=>{o.preventDefault(),o.dataTransfer.dropEffect="move"},i=o=>{if(o.preventDefault(),o.dataTransfer.dropEffect="move",!this.currentDrag)return;let r=this.currentDrag.element;e.contains(r)&&(o.clientX===0&&o.clientY===0||this.handleReorder(e,r,o.clientX,o.clientY))},a=o=>{o.preventDefault()};e.addEventListener("dragenter",s),e.addEventListener("dragover",i),e.addEventListener("drop",a),n.push(()=>{e.removeEventListener("dragenter",s),e.removeEventListener("dragover",i),e.removeEventListener("drop",a)}),this.instances.set(e,{cleanup:n})},initDropZone:function(e){let t=[];e.setAttribute("role","region"),e.setAttribute("aria-dropeffect","move"),e.hasAttribute("aria-label")||e.setAttribute("aria-label","Drop zone");let n=o=>{o.preventDefault(),this.handleDragOver(o,e)};e.addEventListener("dragover",n),t.push(()=>e.removeEventListener("dragover",n));let s=o=>{o.preventDefault(),this.handleDragEnter(o,e)};e.addEventListener("dragenter",s),t.push(()=>e.removeEventListener("dragenter",s));let i=o=>{this.handleDragLeave(o,e)};e.addEventListener("dragleave",i),t.push(()=>e.removeEventListener("dragleave",i));let a=o=>{o.preventDefault(),this.handleDrop(o,e)};e.addEventListener("drop",a),t.push(()=>e.removeEventListener("drop",a)),this.instances.set(e,{cleanup:t})},createFeedbackElement:function(){if(!this.feedbackElement){let e=document.querySelector(".vd-drag-feedback");if(e){this.feedbackElement=e;return}this.feedbackElement=document.createElement("div"),this.feedbackElement.className="vd-drag-feedback hidden",this.feedbackElement.setAttribute("role","presentation"),document.body.appendChild(this.feedbackElement)}},handleDragStart:function(e,t){t.classList.add("is-dragging"),t.setAttribute("aria-grabbed","true"),this.currentDrag={element:t,initialPosition:{x:e.clientX,y:e.clientY},initialBounds:t.getBoundingClientRect(),data:this.getData(t)},e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",this.currentDrag.data),t.dispatchEvent(new CustomEvent("draggable:start",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:e.clientX,y:e.clientY}}}))},handleDrag:function(e,t){this.currentDrag&&t.dispatchEvent(new CustomEvent("draggable:drag",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:e.clientX,y:e.clientY},delta:{x:e.clientX-this.currentDrag.initialPosition.x,y:e.clientY-this.currentDrag.initialPosition.y}}}))},handleDragEnd:function(e,t){t.classList.remove("is-dragging"),t.classList.add("is-dropped"),setTimeout(()=>t.classList.remove("is-dropped"),300),t.setAttribute("aria-grabbed","false"),this.feedbackElement&&this.feedbackElement.classList.add("hidden");let n=this.currentDrag?.data||this.getData(t),s=this.currentDrag?.initialPosition||{x:0,y:0};t.dispatchEvent(new CustomEvent("draggable:end",{bubbles:!0,detail:{element:t,data:n,position:{x:e.clientX,y:e.clientY},delta:{x:e.clientX-s.x,y:e.clientY-s.y}}})),this.currentDrag=null},handleTouchStart:function(e,t){let n=e.touches[0],s=t.getBoundingClientRect();this.touchState={element:t,startX:n.clientX,startY:n.clientY,lastX:n.clientX,lastY:n.clientY,offsetX:n.clientX-s.left,offsetY:n.clientY-s.top,startTime:Date.now(),isDragging:!1}},handleTouchMove:function(e,t){if(!this.touchState)return;let n=e.touches[0];this.touchState.lastX=n.clientX,this.touchState.lastY=n.clientY;let s=n.clientX-this.touchState.startX,i=n.clientY-this.touchState.startY;if((Math.abs(s)>10||Math.abs(i)>10)&&(e.cancelable&&e.preventDefault(),this.touchState.isDragging||(this.touchState.isDragging=!0,t.classList.add("is-dragging"),t.setAttribute("aria-grabbed","true"),this.currentDrag={element:t,initialPosition:{x:this.touchState.startX,y:this.touchState.startY},initialBounds:t.getBoundingClientRect(),data:this.getData(t),offsetX:this.touchState.offsetX,offsetY:this.touchState.offsetY},t.dispatchEvent(new CustomEvent("draggable:start",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:n.clientX,y:n.clientY}}}))),this.updateFeedback(n.clientX,n.clientY),this.currentDrag)){t.dispatchEvent(new CustomEvent("draggable:drag",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:n.clientX,y:n.clientY},delta:{x:s,y:i}}})),this.updateTouchDropZone(n.clientX,n.clientY);let a=t.closest(this.containerSelector);a&&a.contains(t)&&this.handleReorder(a,t,n.clientX,n.clientY)}},handleTouchEnd:function(e,t){if(this.touchState&&this.touchState.isDragging){e.cancelable&&e.preventDefault();let n=e.changedTouches?.[0],s={x:n?.clientX??this.touchState.lastX??this.touchState.startX,y:n?.clientY??this.touchState.lastY??this.touchState.startY},i=this.resolveDropZoneAtPoint(s.x,s.y)||this.touchState.overZone;i?this.dispatchDrop(i,s):this.touchState.overZone&&this.touchState.overZone.classList.remove("is-drag-over"),t.classList.remove("is-dragging"),t.classList.add("is-dropped"),t.setAttribute("aria-grabbed","false"),setTimeout(()=>t.classList.remove("is-dropped"),300),this.feedbackElement&&this.feedbackElement.classList.add("hidden");let a=this.currentDrag?.data||this.getData(t),o=this.touchState?.startX||0,r=this.touchState?.startY||0;t.dispatchEvent(new CustomEvent("draggable:end",{bubbles:!0,detail:{element:t,data:a,position:s,delta:{x:s.x-o,y:s.y-r}}}))}this.touchState=null,this.currentDrag=null},handleDragOver:function(e,t){e.preventDefault(),e.dataTransfer.dropEffect="move"},handleDragEnter:function(e,t){e.preventDefault(),t.classList.add("is-drag-over")},handleDragLeave:function(e,t){t.classList.remove("is-drag-over")},handleDrop:function(e,t){e.preventDefault(),this.dispatchDrop(t,{x:e.clientX,y:e.clientY})},resolveDropZoneAtPoint:function(e,t){if(!Number.isFinite(e)||!Number.isFinite(t))return null;if(typeof document.elementsFromPoint=="function"){let a=document.elementsFromPoint(e,t);for(let o of a){let r=o.closest(".vd-drop-zone");if(r)return r}}let n=document.elementFromPoint(e,t),s=n?n.closest(".vd-drop-zone"):null;if(s)return s;let i=document.querySelectorAll(".vd-drop-zone");for(let a of i){let o=a.getBoundingClientRect();if(e>=o.left&&e<=o.right&&t>=o.top&&t<=o.bottom)return a}return null},updateTouchDropZone:function(e,t){if(!this.touchState)return;let n=this.resolveDropZoneAtPoint(e,t),s=this.touchState.overZone||null;s&&s!==n&&s.classList.remove("is-drag-over"),n&&n!==s&&n.classList.add("is-drag-over"),this.touchState.overZone=n||null},dispatchDrop:function(e,t){e.classList.remove("is-drag-over"),e.dispatchEvent(new CustomEvent("draggable:drop",{bubbles:!0,detail:{zone:e,element:this.currentDrag?.element,data:this.currentDrag?.data,position:t}}))},handleReorder:function(e,t,n,s){let i=e.classList.contains("vd-draggable-container-vertical"),o=[...e.querySelectorAll(".vd-draggable-item:not(.is-dragging), .vd-draggable:not(.is-dragging)")].reduce((r,l)=>{let d=l.getBoundingClientRect(),c=i?s-d.top-d.height/2:n-d.left-d.width/2;return c<0&&c>r.offset?{offset:c,element:l}:r},{offset:Number.NEGATIVE_INFINITY}).element;o==null?e.appendChild(t):e.insertBefore(t,o)},handleKeydown:function(e,t){switch(e.key){case"Enter":case" ":e.preventDefault(),t.click();break;case"Escape":t.classList.contains("is-dragging")&&(t.classList.remove("is-dragging"),t.setAttribute("aria-grabbed","false"),this.feedbackElement&&this.feedbackElement.classList.add("hidden"),this.currentDrag=null);break;case"ArrowUp":case"ArrowLeft":{e.preventDefault();let n=t.previousElementSibling;n&&(n.classList.contains("vd-draggable")||n.classList.contains("vd-draggable-item"))&&(t.parentNode.insertBefore(t,n),t.focus(),t.dispatchEvent(new CustomEvent("draggable:reorder",{bubbles:!0,detail:{element:t,direction:"up"}})));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();let n=t.nextElementSibling;n&&(n.classList.contains("vd-draggable")||n.classList.contains("vd-draggable-item"))&&(t.parentNode.insertBefore(n,t),t.focus(),t.dispatchEvent(new CustomEvent("draggable:reorder",{bubbles:!0,detail:{element:t,direction:"down"}})));break}}},getData:function(e){return e.dataset.draggable||e.textContent.trim()},updateFeedback:function(e,t){if(!this.currentDrag)return;this.feedbackElement.classList.remove("hidden");let n=this.currentDrag.initialBounds;this.feedbackElement.innerHTML="";let s=this.currentDrag.element.cloneNode(!0);this.feedbackElement.appendChild(s);let i=this.currentDrag.offsetX??20,a=this.currentDrag.offsetY??20;Object.assign(this.feedbackElement.style,{left:e-i+"px",top:t-a+"px",width:n.width+"px",height:n.height+"px"})},makeDraggable:function(e,t={}){let n=typeof e=="string"?document.querySelector(e):e;n&&!this.instances.has(n)&&(n.classList.add("vd-draggable"),n.setAttribute("draggable","true"),t.data&&(n.dataset.draggable=t.data),this.initDraggable(n))},removeDraggable:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&this.instances.has(t)&&(this.instances.get(t).cleanup.forEach(s=>s()),this.instances.delete(t),t.classList.remove("vd-draggable"),t.removeAttribute("draggable"),t.removeAttribute("data-draggable"))},destroy:function(e){this.removeDraggable(e)},destroyAll:function(){Array.from(this.instances.keys()).forEach(t=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("draggable",m),window.VanduoDraggable=m})();(function(){"use strict";let m=new Map;function e(r){try{return new URL(r,window.location.href).origin===window.location.origin}catch{return!1}}function t(r,l){let c=new DOMParser().parseFromString(l.trim(),"text/html"),h=["SCRIPT","IFRAME","OBJECT","EMBED","FORM","BASE","LINK","META","STYLE"];for(let v of h){let y=c.querySelectorAll(v);for(let C=y.length-1;C>=0;C--)y[C].parentNode.removeChild(y[C])}function u(v){if(v.nodeType===Node.ELEMENT_NODE){let y=v.attributes;for(let L=y.length-1;L>=0;L--){let P=y[L].name.toLowerCase(),_=y[L].value.toLowerCase().trim();(P.startsWith("on")||_.startsWith("javascript:")||_.startsWith("data:")||_.startsWith("vbscript:"))&&v.removeAttribute(y[L].name)}let C=v.childNodes;for(let L=0;L
    Loading\u2026
    '}function s(){return'
    Loading\u2026
    '}function i(r){return!r||r==="skeleton"?n():r==="spinner"?s():r}function a(r,l,d){r.dispatchEvent(new CustomEvent(l,{bubbles:!0,detail:d||{}}))}let o={observe:function(r,l,d){if(!(r instanceof Element)){console.warn("[VanduoLazyLoad] observe() requires a DOM Element.");return}if(typeof l!="function"){console.warn("[VanduoLazyLoad] observe() requires a callback function.");return}if(m.has(r))return;let c=d&&d.threshold!=null?d.threshold:0,h=d&&d.rootMargin?d.rootMargin:"0px",u=new IntersectionObserver(function(p,v){p.forEach(function(y){if(y.isIntersecting){v.unobserve(y.target),m.delete(y.target);try{l(y.target)}catch(C){console.error("[VanduoLazyLoad] Callback threw:",C)}}})},{threshold:c,rootMargin:h});m.set(r,u),u.observe(r)},unobserve:function(r){let l=m.get(r);l&&(l.unobserve(r),m.delete(r))},unobserveAll:function(){m.forEach(function(r,l){r.unobserve(l)}),m.clear()},loadSection:function(r,l,d){if(typeof r!="string"||!r){console.warn("[VanduoLazyLoad] loadSection() requires a non-empty URL string.");return}if(!(l instanceof Element)){console.warn("[VanduoLazyLoad] loadSection() requires a DOM Element as containerEl.");return}if(!e(r)){console.error("[VanduoLazyLoad] loadSection() blocked cross-origin URL:",r);return}let c=d||{},h=i(c.placeholder);t(l,h),a(l,"lazysection:loading",{url:r}),this.observe(l,function(){let u=new window.AbortController,p=setTimeout(function(){u.abort()},1e4);window.fetch(r,{signal:u.signal}).then(function(v){if(clearTimeout(p),!v.ok)throw new Error("HTTP "+v.status);return v.text()}).then(function(v){t(l,v),a(l,"lazysection:loaded",{url:r}),typeof window.Vanduo<"u"&&window.Vanduo.init(),typeof c.onLoaded=="function"&&c.onLoaded(l)}).catch(function(v){let y=document.createElement("div");y.className="vd-alert vd-alert-error",y.setAttribute("role","alert");let C=document.createElement("span");C.textContent="Failed to load content. ";let L=document.createElement("small");for(L.style.opacity="0.7",L.textContent=v.message,y.appendChild(C),y.appendChild(L);l.firstChild;)l.removeChild(l.firstChild);l.appendChild(y),a(l,"lazysection:error",{url:r,error:v}),console.error("[VanduoLazyLoad] loadSection failed:",v),typeof c.onError=="function"&&c.onError(v)})},{threshold:c.threshold,rootMargin:c.rootMargin})},init:function(){let r=this;document.querySelectorAll("[data-vd-lazy]").forEach(function(d){if(m.has(d)||d.dataset.vdLazyState==="loading"||d.dataset.vdLazyState==="loaded")return;let c=d.getAttribute("data-vd-lazy");if(!c)return;d.dataset.vdLazyState="loading";let h=d.getAttribute("data-vd-lazy-placeholder")||"skeleton";r.loadSection(c,d,{placeholder:h,onLoaded:function(){d.dataset.vdLazyState="loaded"},onError:function(){d.dataset.vdLazyState="error"}})})}};typeof window.Vanduo<"u"&&window.Vanduo.register("LazyLoad",o),window.VanduoLazyLoad=o})();(function(){"use strict";let m={observers:new Map,init:function(){document.querySelectorAll("[data-glass-scroll]").forEach(e=>{this.observers.has(e)||this.initElement(e)})},initElement:function(e){let t=e.dataset.glassSentinel,n;if(t&&(n=document.querySelector(t)),n||(n=e.previousElementSibling),!n){e.classList.add("is-glass-active");return}let s=new IntersectionObserver(i=>{i.forEach(a=>{e.classList.toggle("is-glass-active",!a.isIntersecting)})},{threshold:0,rootMargin:"0px"});s.observe(n),this.observers.set(e,s)},destroy:function(e){let t=this.observers.get(e);t&&(t.disconnect(),this.observers.delete(e))},destroyAll:function(){this.observers.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("glassScroll",m),window.VanduoGlassScroll=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll(".vd-flow, .vd-carousel").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=e.querySelector(".vd-flow-track");if(!t)return;let n=Array.from(t.querySelectorAll(".vd-flow-slide"));if(n.length===0)return;let s=e.classList.contains("vd-flow-fade"),i=e.hasAttribute("data-vd-autoplay"),a=parseInt(e.getAttribute("data-vd-interval"),10)||5e3,o=e.getAttribute("data-vd-loop")!=="false",r={current:0,total:n.length,autoplayTimer:null,isFade:s,loop:o,isDragging:!1,startX:0,currentX:0,threshold:50},l=[];n.forEach((g,k)=>{g.setAttribute("role","group"),g.setAttribute("aria-roledescription","slide"),g.setAttribute("aria-label","Slide "+(k+1)+" of "+n.length),k===0&&g.classList.add("is-active")}),e.setAttribute("role","region"),e.setAttribute("aria-roledescription","carousel"),e.getAttribute("aria-label")||e.setAttribute("aria-label","Carousel");let d=document.createElement("div");d.setAttribute("aria-live","polite"),d.setAttribute("aria-atomic","true"),d.className="sr-only",d.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);",e.appendChild(d);let c=(g,k)=>{k===void 0&&(k=!0);let T=g;r.loop?T=(g%r.total+r.total)%r.total:T=Math.max(0,Math.min(g,r.total-1));let M=r.current;r.current=T,r.isFade?n.forEach((w,E)=>{w.classList.toggle("is-active",E===T)}):t.style.transform="translateX(-"+T*100+"%)",e.querySelectorAll(".vd-flow-indicator").forEach((w,E)=>{w.classList.toggle("is-active",E===T),w.setAttribute("aria-selected",E===T?"true":"false")}),n.forEach((w,E)=>{w.setAttribute("aria-hidden",E!==T?"true":"false")}),k&&(d.textContent="Slide "+(T+1)+" of "+r.total),e.dispatchEvent(new CustomEvent("flow:change",{detail:{current:T,previous:M,total:r.total}}))},h=()=>c(r.current+1),u=()=>c(r.current-1),p=e.querySelector(".vd-flow-prev"),v=e.querySelector(".vd-flow-next");if(p){let g=()=>u();p.addEventListener("click",g),l.push(()=>p.removeEventListener("click",g))}if(v){let g=()=>h();v.addEventListener("click",g),l.push(()=>v.removeEventListener("click",g))}e.querySelectorAll(".vd-flow-indicator").forEach((g,k)=>{g.setAttribute("role","tab"),g.setAttribute("aria-selected",k===0?"true":"false"),g.setAttribute("aria-label","Go to slide "+(k+1));let T=()=>c(k);g.addEventListener("click",T),l.push(()=>g.removeEventListener("click",T))});let C=g=>{g.key==="ArrowLeft"&&(u(),g.preventDefault()),g.key==="ArrowRight"&&(h(),g.preventDefault())};e.setAttribute("tabindex","0"),e.addEventListener("keydown",C),l.push(()=>e.removeEventListener("keydown",C));let L=g=>{r.isDragging=!0,r.startX=g.clientX||g.touches&&g.touches[0].clientX||0,r.currentX=r.startX,e.classList.add("is-dragging")},P=g=>{r.isDragging&&(r.currentX=g.clientX||g.touches&&g.touches[0].clientX||0)},x=()=>{if(!r.isDragging)return;r.isDragging=!1,e.classList.remove("is-dragging");let g=r.startX-r.currentX;Math.abs(g)>r.threshold&&(g>0?h():u())};e.addEventListener("mousedown",L),e.addEventListener("mousemove",P),e.addEventListener("mouseup",x),e.addEventListener("mouseleave",x),e.addEventListener("touchstart",L,{passive:!0}),e.addEventListener("touchmove",P,{passive:!0}),e.addEventListener("touchend",x),l.push(()=>e.removeEventListener("mousedown",L),()=>e.removeEventListener("mousemove",P),()=>e.removeEventListener("mouseup",x),()=>e.removeEventListener("mouseleave",x),()=>e.removeEventListener("touchstart",L),()=>e.removeEventListener("touchmove",P),()=>e.removeEventListener("touchend",x));let _=()=>{V(),r.autoplayTimer=setInterval(h,a)},V=()=>{r.autoplayTimer&&(clearInterval(r.autoplayTimer),r.autoplayTimer=null)};if(i){_();let g=()=>V(),k=()=>_();e.addEventListener("mouseenter",g),e.addEventListener("mouseleave",k),e.addEventListener("focusin",g),e.addEventListener("focusout",k),l.push(()=>e.removeEventListener("mouseenter",g),()=>e.removeEventListener("mouseleave",k),()=>e.removeEventListener("focusin",g),()=>e.removeEventListener("focusout",k),()=>V())}c(0,!1),this.instances.set(e,{cleanup:l,goTo:c,next:h,prev:u,getState:()=>({...r})})},goTo:function(e,t){let n=this.instances.get(e);n&&n.goTo(t)},next:function(e){let t=this.instances.get(e);t&&t.next()},prev:function(e){let t=this.instances.get(e);t&&t.prev()},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("flow",m),window.VanduoFlow=m})();(function(){"use strict";let m={instances:new Map,_globalCleanups:[],init:function(){if(document.querySelectorAll("[data-vd-bubble], [data-vd-popover]").forEach(t=>{this.instances.has(t)||this.initInstance(t)}),this._globalCleanups.length===0){let t=s=>{this.instances.forEach((i,a)=>{!i.popover.contains(s.target)&&!a.contains(s.target)&&this.hide(a)})},n=s=>{s.key==="Escape"&&this.instances.forEach((i,a)=>this.hide(a))};document.addEventListener("click",t,!0),document.addEventListener("keydown",n),this._globalCleanups.push(()=>document.removeEventListener("click",t,!0),()=>document.removeEventListener("keydown",n))}},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-bubble-placement")||e.getAttribute("data-vd-popover-placement")||"bottom",s=document.createElement("div");s.className="vd-bubble-content",s.setAttribute("role","dialog"),s.setAttribute("aria-modal","false"),s.setAttribute("data-placement",n);let i=e.getAttribute("data-vd-bubble-title")||e.getAttribute("data-vd-popover-title"),a=e.getAttribute("data-vd-bubble")||e.getAttribute("data-vd-popover")||"",o=e.getAttribute("data-vd-bubble-html")||e.getAttribute("data-vd-popover-html");if(i){let c=document.createElement("div");c.className="vd-bubble-header";let h=document.createElement("span");h.textContent=i;let u=document.createElement("button");u.className="vd-bubble-close",u.setAttribute("aria-label","Close"),u.innerHTML="×",c.appendChild(h),c.appendChild(u),s.appendChild(c);let p=v=>{v.stopPropagation(),this.hide(e)};u.addEventListener("click",p),t.push(()=>u.removeEventListener("click",p))}let r=document.createElement("div");r.className="vd-bubble-body",o?typeof sanitizeHtml=="function"?r.innerHTML=sanitizeHtml(o):r.textContent=o:r.textContent=a,s.appendChild(r),document.body.appendChild(s);let l="vd-bubble-"+Math.random().toString(36).slice(2,9);s.id=l,e.setAttribute("aria-haspopup","dialog"),e.setAttribute("aria-expanded","false"),e.setAttribute("aria-controls",l);let d=c=>{c.stopPropagation(),s.classList.contains("is-visible")?this.hide(e):(this.hideAll(),this.show(e))};e.addEventListener("click",d),t.push(()=>e.removeEventListener("click",d)),this.instances.set(e,{popover:s,cleanup:t,placement:n})},position:function(e,t,n){let s=e.getBoundingClientRect(),i=t.getBoundingClientRect(),a=10,o,r;switch(n){case"top":o=s.top-i.height-a+window.scrollY,r=s.left+(s.width-i.width)/2+window.scrollX;break;case"left":o=s.top+(s.height-i.height)/2+window.scrollY,r=s.left-i.width-a+window.scrollX;break;case"right":o=s.top+(s.height-i.height)/2+window.scrollY,r=s.right+a+window.scrollX;break;default:o=s.bottom+a+window.scrollY,r=s.left+(s.width-i.width)/2+window.scrollX}r=Math.max(8,Math.min(r,window.innerWidth-i.width-8)),o=Math.max(8,o),t.style.top=o+"px",t.style.left=r+"px"},show:function(e){let t=this.instances.get(e);if(!t)return;let{popover:n,placement:s}=t;n.style.display="block",n.classList.add("is-visible"),e.setAttribute("aria-expanded","true"),requestAnimationFrame(()=>{this.position(e,n,s)}),e.dispatchEvent(new CustomEvent("bubble:show",{bubbles:!0}))},hide:function(e){let t=this.instances.get(e);t&&(t.popover.classList.remove("is-visible"),e.setAttribute("aria-expanded","false"),e.dispatchEvent(new CustomEvent("bubble:hide",{bubbles:!0})))},hideAll:function(){this.instances.forEach((e,t)=>this.hide(t))},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),t.popover.parentNode&&t.popover.parentNode.removeChild(t.popover),e.removeAttribute("aria-haspopup"),e.removeAttribute("aria-expanded"),e.removeAttribute("aria-controls"),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t)),this._globalCleanups.forEach(e=>e()),this._globalCleanups=[]}};typeof window.Vanduo<"u"&&window.Vanduo.register("bubble",m),window.VanduoBubble=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("[data-vd-waypoint-nav], [data-vd-scrollspy-nav]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=Array.from(e.querySelectorAll('a[href^="#"]'));if(t.length===0)return;let n=[],s=parseInt(e.getAttribute("data-vd-waypoint-offset")||"80",10),i=[];if(t.forEach(d=>{let c=d.getAttribute("href").slice(1),h=document.getElementById(c);h&&(h.setAttribute("data-vd-waypoint-section",""),i.push({id:c,link:d,section:h}))}),i.length===0)return;let a=new Set,o=d=>{t.forEach(h=>h.classList.remove("is-active"));let c=t.find(h=>h.getAttribute("href")==="#"+d);c&&(c.classList.add("is-active"),e.dispatchEvent(new CustomEvent("waypoint:change",{detail:{activeId:d,link:c}})))},r="-"+s+"px 0px -40% 0px",l=new IntersectionObserver(d=>{d.forEach(c=>{c.isIntersecting?a.add(c.target.id):a.delete(c.target.id)});for(let c=0;cl.observe(d.section)),t.forEach(d=>{let c=h=>{h.preventDefault();let u=d.getAttribute("href").slice(1),p=document.getElementById(u);p&&(p.scrollIntoView({behavior:"smooth"}),o(u))};d.addEventListener("click",c),n.push(()=>d.removeEventListener("click",c))}),n.push(()=>l.disconnect()),this.instances.set(e,{observer:l,cleanup:n,sections:i,setActive:o})},refresh:function(e){this.destroy(e),this.initInstance(e)},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("waypoint",m),window.VanduoWaypoint=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll(".vd-ripple, [data-vd-ripple]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=s=>{let i=e.getBoundingClientRect(),a=Math.max(i.width,i.height),o=(s.clientX||s.touches&&s.touches[0].clientX||i.left+i.width/2)-i.left-a/2,r=(s.clientY||s.touches&&s.touches[0].clientY||i.top+i.height/2)-i.top-a/2,l=document.createElement("span");l.className="vd-ripple-wave",l.style.width=a+"px",l.style.height=a+"px",l.style.left=o+"px",l.style.top=r+"px",e.appendChild(l),l.addEventListener("animationend",()=>{l.parentNode&&l.parentNode.removeChild(l)})};e.addEventListener("mousedown",n),e.addEventListener("touchstart",n,{passive:!0}),t.push(()=>e.removeEventListener("mousedown",n),()=>e.removeEventListener("touchstart",n)),this.instances.set(e,{cleanup:t})},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),e.querySelectorAll(".vd-ripple-wave").forEach(n=>n.remove()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("ripple",m),window.VanduoRipple=m})();(function(){"use strict";function m(n){if(!n||n===document.body)return!1;let s=window.getComputedStyle(n),i=s.overflowY,a=s.overflowX,o=/(auto|scroll|overlay)/.test(i)&&n.scrollHeight>n.clientHeight,r=/(auto|scroll|overlay)/.test(a)&&n.scrollWidth>n.clientWidth;return o||r}function e(n){let s=n.parentElement;for(;s&&s!==document.body&&s!==document.documentElement;){if(m(s))return s;s=s.parentElement}return null}let t={instances:new Map,init:function(){document.querySelectorAll(".vd-affix, .vd-sticky, [data-vd-affix]").forEach(s=>{this.instances.has(s)||this.initInstance(s)})},initInstance:function(n){let s=[],i=parseInt(n.getAttribute("data-vd-affix-offset")||"0",10),a=Number.isNaN(i)?0:i,o=e(n),r=!1,l=document.createElement("div");l.style.cssText="display:block;height:1px;margin-bottom:-1px;visibility:hidden;pointer-events:none;",n.parentNode.insertBefore(l,n),n.style.setProperty("--affix-top-offset",a+"px");function d(){r||(r=!0,n.classList.add("is-stuck"),n.dispatchEvent(new CustomEvent("affix:stuck",{bubbles:!0,detail:{offset:a,root:o||window}})))}function c(){r&&(r=!1,n.classList.remove("is-stuck"),n.dispatchEvent(new CustomEvent("affix:unstuck",{bubbles:!0,detail:{offset:a,root:o||window}})))}let h=new IntersectionObserver(function(u){u.forEach(p=>{p.isIntersecting?c():d()})},{root:o,rootMargin:"-"+a+"px 0px 0px 0px",threshold:0});h.observe(l),s.push(()=>h.disconnect(),()=>{l.parentNode&&l.parentNode.removeChild(l)},()=>{n.classList.remove("is-stuck"),n.style.removeProperty("--affix-top-offset")}),this.instances.set(n,{cleanup:s,observer:h,sentinel:l,scrollParent:o})},destroy:function(n){let s=this.instances.get(n);s&&(s.cleanup.forEach(i=>i()),n.classList.remove("is-stuck"),this.instances.delete(n))},destroyAll:function(){this.instances.forEach((n,s)=>this.destroy(s))}};typeof window.Vanduo<"u"&&window.Vanduo.register("affix",t),window.VanduoAffix=t})();(function(){"use strict";function m(t){let n=document.createElement("div");return n.textContent=t,n.innerHTML}let e={instances:new Map,init:function(){document.querySelectorAll("[data-vd-suggest], [data-vd-autocomplete]").forEach(n=>{this.instances.has(n)||this.initInstance(n)})},initInstance:function(t){let n=[],s=parseInt(t.getAttribute("data-vd-suggest-min-chars")||"1",10),i=t.getAttribute("data-vd-suggest-url")||"",a=t.getAttribute("data-vd-suggest")||t.getAttribute("data-vd-autocomplete")||"",o=[];try{o=JSON.parse(a)}catch{o=a.split(",").map(k=>k.trim()).filter(Boolean)}let r=t.closest(".vd-suggest-wrapper, .vd-autocomplete-wrapper");r||(r=document.createElement("div"),r.className="vd-suggest-wrapper",t.parentNode.insertBefore(r,t),r.appendChild(t));let l=document.createElement("ul");l.className="vd-suggest-list",l.setAttribute("role","listbox");let d="vd-suggest-"+Math.random().toString(36).slice(2,9);l.id=d,r.appendChild(l),t.setAttribute("role","combobox"),t.setAttribute("aria-autocomplete","list"),t.setAttribute("aria-expanded","false"),t.setAttribute("aria-controls",d),t.setAttribute("autocomplete","off");let c=-1,h=[],u=null,p=(g,k)=>{if(l.innerHTML="",h=g,c=-1,g.length===0){let T=document.createElement("li");T.className="vd-suggest-empty",T.textContent="No results",l.appendChild(T);return}g.forEach((T,M)=>{let f=document.createElement("li");f.className="vd-suggest-item",f.setAttribute("role","option"),f.id=d+"-item-"+M;let w=typeof T=="object"&&(T.label||T.text)||String(T);if(k){let E=m(w),I=new RegExp("("+k.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")+")","gi");f.innerHTML=E.replace(I,'$1')}else f.textContent=w;f.addEventListener("click",()=>C(M)),l.appendChild(f)})},v=()=>{l.classList.add("is-open"),t.setAttribute("aria-expanded","true")},y=()=>{l.classList.remove("is-open"),t.setAttribute("aria-expanded","false"),c=-1,t.removeAttribute("aria-activedescendant")},C=g=>{let k=h[g],T=typeof k=="object"&&(k.value||k.label)||String(k);t.value=T,y(),t.dispatchEvent(new CustomEvent("suggest:select",{detail:{value:T,item:k,index:g},bubbles:!0}))},L=g=>{let k=l.querySelectorAll(".vd-suggest-item");k.forEach(T=>T.classList.remove("is-highlighted")),g>=0&&g{if(g.length0,v()},x=()=>{clearTimeout(u),u=setTimeout(()=>P(t.value),200)},_=g=>{if(!l.classList.contains("is-open")){g.key==="ArrowDown"&&(P(t.value),g.preventDefault());return}let k=h.length;switch(g.key){case"ArrowDown":g.preventDefault(),L(c0?c-1:k-1);break;case"Enter":g.preventDefault(),c>=0&&C(c);break;case"Escape":y();break}},V=()=>{setTimeout(y,200)};t.addEventListener("input",x),t.addEventListener("keydown",_),t.addEventListener("blur",V),t.addEventListener("focus",()=>{t.value.length>=s&&P(t.value)}),n.push(()=>t.removeEventListener("input",x),()=>t.removeEventListener("keydown",_),()=>t.removeEventListener("blur",V),()=>clearTimeout(u),()=>{l.parentNode&&l.parentNode.removeChild(l)}),this.instances.set(t,{cleanup:n,list:l,close:y})},destroy:function(t){let n=this.instances.get(t);n&&(n.cleanup.forEach(s=>s()),this.instances.delete(t))},destroyAll:function(){this.instances.forEach((t,n)=>this.destroy(n))}};typeof window.Vanduo<"u"&&window.Vanduo.register("suggest",e),window.VanduoSuggest=e})();(function(){"use strict";let m={instances:new Map,rules:{required:e=>e.trim().length>0,email:e=>/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e),url:e=>{try{return new URL(e),!0}catch{return!1}},number:e=>!isNaN(parseFloat(e))&&isFinite(e),min:(e,t)=>e.length>=parseInt(t,10),max:(e,t)=>e.length<=parseInt(t,10),minVal:(e,t)=>parseFloat(e)>=parseFloat(t),maxVal:(e,t)=>parseFloat(e)<=parseFloat(t),pattern:(e,t)=>{try{return t.length>100?!1:new RegExp(t).test(e)}catch{return!1}},match:(e,t)=>{try{let n=typeof CSS<"u"&&CSS.escape?CSS.escape(t):t,s=document.querySelector('[name="'+n+'"]');return s?e===s.value:!1}catch{return!1}}},messages:{required:"This field is required",email:"Please enter a valid email address",url:"Please enter a valid URL",number:"Please enter a valid number",min:"Minimum {0} characters required",max:"Maximum {0} characters allowed",minVal:"Value must be at least {0}",maxVal:"Value must be at most {0}",pattern:"Invalid format",match:"Fields do not match"},init:function(){document.querySelectorAll("[data-vd-validate], .vd-validate").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-validate-mode")||"blur",s=e.querySelectorAll("[data-vd-rules]"),i=r=>{let d=(r.getAttribute("data-vd-rules")||"").split("|").map(u=>u.trim()).filter(Boolean),c=r.value,h=[];for(let u of d){let[p,...v]=u.split(":"),y=v.join(":"),C=this.rules[p];if(C&&!C(c,y)){let P=r.getAttribute("data-vd-msg-"+p)||this.messages[p]||"Invalid";y&&(P=P.replace("{0}",y)),h.push(P);break}}return this.setFieldState(r,h),h.length===0},a=()=>{let r=!0;return s.forEach(l=>{i(l)||(r=!1)}),r};s.forEach(r=>{if(n==="input"||n==="blur"){let l=n==="input"?"input":"blur",d=()=>i(r);if(r.addEventListener(l,d),t.push(()=>r.removeEventListener(l,d)),n==="blur"){let c=()=>{(r.classList.contains("is-invalid")||r.classList.contains("is-valid"))&&i(r)};r.addEventListener("input",c),t.push(()=>r.removeEventListener("input",c))}}});let o=r=>{let l=a();if(!l){r.preventDefault(),r.stopPropagation();let d=e.querySelector(".is-invalid");d&&d.focus()}e.dispatchEvent(new CustomEvent("validate:submit",{detail:{valid:l},bubbles:!0}))};e.addEventListener("submit",o),t.push(()=>e.removeEventListener("submit",o)),this.instances.set(e,{cleanup:t,validateAll:a,validateField:i})},setFieldState:function(e,t){let n=e.closest(".vd-form-group")||e.parentElement,s=n.querySelector(".vd-validate-error");e.classList.remove("is-valid","is-invalid"),t.length>0?(e.classList.add("is-invalid"),e.setAttribute("aria-invalid","true"),s||(s=document.createElement("div"),s.className="vd-validate-error",s.id="vd-err-"+Math.random().toString(36).slice(2,9),s.setAttribute("role","alert"),n.appendChild(s)),s.textContent=t[0],s.style.display="",e.setAttribute("aria-describedby",s.id)):e.value.trim()?(e.classList.add("is-valid"),e.removeAttribute("aria-invalid"),s&&(s.style.display="none")):(e.removeAttribute("aria-invalid"),s&&(s.style.display="none"))},validateForm:function(e){let t=this.instances.get(e);return t?t.validateAll():!1},addRule:function(e,t,n){this.rules[e]=t,n&&(this.messages[e]=n)},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("validate",m),window.VanduoValidate=m})();(function(){"use strict";let m=["Su","Mo","Tu","We","Th","Fr","Sa"],e=["January","February","March","April","May","June","July","August","September","October","November","December"],t={instances:new Map,init:function(){document.querySelectorAll("[data-vd-datepicker]").forEach(s=>{this.instances.has(s)||this.initInstance(s)})},initInstance:function(n){let s=[],i=n.getAttribute("data-vd-datepicker-format")||"yyyy-mm-dd",a=n.getAttribute("data-vd-datepicker-min"),o=n.getAttribute("data-vd-datepicker-max"),r=a?new Date(a):null,l=o?new Date(o):null,d=new Date,c=d.getFullYear(),h=d.getMonth(),u=null,p="days";if(n.value){let f=new Date(n.value);isNaN(f.getTime())||(u=f,c=f.getFullYear(),h=f.getMonth())}let v=document.createElement("div");v.className="vd-datepicker-popup",v.setAttribute("role","dialog"),v.setAttribute("aria-label","Choose date");let y=document.createElement("div");y.className="vd-suggest-wrapper",y.style.position="relative",y.style.display="inline-block",n.parentNode.insertBefore(y,n),y.appendChild(n),y.appendChild(v);let C=f=>{let w=f.getFullYear(),E=String(f.getMonth()+1).padStart(2,"0"),I=String(f.getDate()).padStart(2,"0");return i.replace("yyyy",w).replace("mm",E).replace("dd",I)},L=f=>!!(r&&fl),P=(f,w)=>f&&w&&f.getFullYear()===w.getFullYear()&&f.getMonth()===w.getMonth()&&f.getDate()===w.getDate(),x=()=>{v.innerHTML="";let f=document.createElement("div");f.className="vd-datepicker-header";let w=document.createElement("button");w.type="button",w.className="vd-datepicker-prev",w.innerHTML="‹",w.setAttribute("aria-label","Previous");let E=document.createElement("button");E.type="button",E.className="vd-datepicker-next",E.innerHTML="›",E.setAttribute("aria-label","Next");let I=document.createElement("span");if(I.className="vd-datepicker-title",p==="days")I.textContent=e[h]+" "+c,I.addEventListener("click",()=>{p="months",x()}),w.addEventListener("click",()=>{h--,h<0&&(h=11,c--),x()}),E.addEventListener("click",()=>{h++,h>11&&(h=0,c++),x()});else if(p==="months")I.textContent=String(c),I.addEventListener("click",()=>{p="years",x()}),w.addEventListener("click",()=>{c--,x()}),E.addEventListener("click",()=>{c++,x()});else{let O=Math.floor(c/10)*10;I.textContent=O+" - "+(O+9),w.addEventListener("click",()=>{c-=10,x()}),E.addEventListener("click",()=>{c+=10,x()})}if(f.appendChild(w),f.appendChild(I),f.appendChild(E),v.appendChild(f),p==="days"){let O=document.createElement("div");O.className="vd-datepicker-weekdays",m.forEach(F=>{let U=document.createElement("span");U.textContent=F,O.appendChild(U)}),v.appendChild(O);let H=document.createElement("div");H.className="vd-datepicker-days";let z=new Date(c,h,1).getDay(),R=new Date(c,h+1,0).getDate(),j=new Date(c,h,0).getDate();for(let F=z-1;F>=0;F--){let U=_(j-F,!0);H.appendChild(U)}for(let F=1;F<=R;F++){let U=new Date(c,h,F),b=_(F,!1,U);H.appendChild(b)}let G=z+R,Z=G%7===0?0:7-G%7;for(let F=1;F<=Z;F++){let U=_(F,!0);H.appendChild(U)}v.appendChild(H)}else if(p==="months"){let O=document.createElement("div");O.className="vd-datepicker-months",e.forEach((H,z)=>{let R=document.createElement("button");R.type="button",R.className="vd-datepicker-month-btn",R.textContent=H.slice(0,3),u&&u.getFullYear()===c&&u.getMonth()===z&&R.classList.add("is-selected"),R.addEventListener("click",()=>{h=z,p="days",x()}),O.appendChild(R)}),v.appendChild(O)}else{let O=document.createElement("div");O.className="vd-datepicker-years";let H=Math.floor(c/10)*10;for(let z=H-1;z<=H+10;z++){let R=document.createElement("button");R.type="button",R.className="vd-datepicker-year-btn",R.textContent=z,u&&u.getFullYear()===z&&R.classList.add("is-selected"),(zH+9)&&(R.style.opacity="0.4"),R.addEventListener("click",()=>{c=z,p="months",x()}),O.appendChild(R)}v.appendChild(O)}},_=(f,w,E)=>{let I=document.createElement("button");return I.type="button",I.className="vd-datepicker-day",I.textContent=f,w?(I.classList.add("is-outside"),I.tabIndex=-1,I):(E&&P(E,d)&&I.classList.add("is-today"),E&&P(E,u)&&I.classList.add("is-selected"),E&&L(E)?(I.classList.add("is-disabled"),I):(E&&I.addEventListener("click",()=>{u=E,c=E.getFullYear(),h=E.getMonth(),n.value=C(E),g(),n.dispatchEvent(new CustomEvent("datepicker:select",{detail:{date:E,formatted:n.value},bubbles:!0})),n.dispatchEvent(new Event("change",{bubbles:!0}))}),I))},V=()=>{x(),v.classList.add("is-open"),n.setAttribute("aria-expanded","true")},g=()=>{v.classList.remove("is-open"),n.setAttribute("aria-expanded","false"),p="days"},k=()=>V(),T=f=>{y.contains(f.target)||g()},M=f=>{f.key==="Escape"&&g()};n.addEventListener("focus",k),document.addEventListener("click",T,!0),document.addEventListener("keydown",M),n.setAttribute("aria-haspopup","dialog"),n.setAttribute("aria-expanded","false"),n.setAttribute("autocomplete","off"),s.push(()=>n.removeEventListener("focus",k),()=>document.removeEventListener("click",T,!0),()=>document.removeEventListener("keydown",M)),this.instances.set(n,{cleanup:s,open:V,close:g,popup:v})},destroy:function(n){let s=this.instances.get(n);s&&(s.cleanup.forEach(i=>i()),this.instances.delete(n))},destroyAll:function(){this.instances.forEach((n,s)=>this.destroy(s))}};typeof window.Vanduo<"u"&&window.Vanduo.register("datepicker",t),window.VanduoDatepicker=t})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("[data-vd-timepicker]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-timepicker-format")==="24h",s=parseInt(e.getAttribute("data-vd-timepicker-step")||"30",10),i=e.closest(".vd-suggest-wrapper");i||(i=document.createElement("div"),i.style.position="relative",i.style.display="inline-block",e.parentNode.insertBefore(i,e),i.appendChild(e));let a=document.createElement("div");a.className="vd-timepicker-popup",a.setAttribute("role","listbox"),i.appendChild(a);let o=[];for(let p=0;p<24;p++)for(let v=0;v<60;v+=s){let y=String(p).padStart(2,"0"),C=String(v).padStart(2,"0");if(n)o.push({display:y+":"+C,value:y+":"+C});else{let L=p<12?"AM":"PM",x=(p===0?12:p>12?p-12:p)+":"+C+" "+L;o.push({display:x,value:y+":"+C})}}let r=()=>{a.innerHTML="",o.forEach(p=>{let v=document.createElement("div");v.className="vd-timepicker-item",v.setAttribute("role","option"),v.textContent=p.display,(e.value===p.value||e.value===p.display)&&v.classList.add("is-selected"),v.addEventListener("click",()=>{e.value=p.display,a.querySelectorAll(".vd-timepicker-item").forEach(y=>y.classList.remove("is-selected")),v.classList.add("is-selected"),d(),e.dispatchEvent(new CustomEvent("timepicker:select",{detail:{display:p.display,value:p.value},bubbles:!0})),e.dispatchEvent(new Event("change",{bubbles:!0}))}),a.appendChild(v)})},l=()=>{r(),a.classList.add("is-open"),e.setAttribute("aria-expanded","true");let p=a.querySelector(".is-selected");p&&p.scrollIntoView({block:"center"})},d=()=>{a.classList.remove("is-open"),e.setAttribute("aria-expanded","false")},c=()=>l(),h=p=>{i.contains(p.target)||d()},u=p=>{p.key==="Escape"&&d()};e.addEventListener("focus",c),document.addEventListener("click",h,!0),document.addEventListener("keydown",u),e.setAttribute("aria-haspopup","listbox"),e.setAttribute("aria-expanded","false"),e.setAttribute("autocomplete","off"),e.readOnly=!0,t.push(()=>e.removeEventListener("focus",c),()=>document.removeEventListener("click",h,!0),()=>document.removeEventListener("keydown",u)),this.instances.set(e,{cleanup:t,open:l,close:d})},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("timepicker",m),window.VanduoTimepicker=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll(".vd-stepper").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=Array.from(e.querySelectorAll(".vd-stepper-item")),s=e.classList.contains("vd-stepper-clickable"),i=n.findIndex(o=>o.classList.contains("is-active"));i===-1&&(i=0);let a=o=>{if(o<0||o>=n.length)return;let r=i;i=o,n.forEach((l,d)=>{l.classList.remove("is-active","is-completed"),d{let l=()=>a(r);o.addEventListener("click",l),t.push(()=>o.removeEventListener("click",l))}),a(i),this.instances.set(e,{cleanup:t,setStep:a,next:()=>a(i+1),prev:()=>a(i-1),getCurrent:()=>i})},setStep:function(e,t){let n=this.instances.get(e);n&&n.setStep(t)},next:function(e){let t=this.instances.get(e);t&&t.next()},prev:function(e){let t=this.instances.get(e);t&&t.prev()},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("stepper",m),window.VanduoStepper=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("[data-vd-rating]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=parseInt(e.getAttribute("data-vd-rating-max")||"5",10),s=parseFloat(e.getAttribute("data-vd-rating-value")||"0"),i=e.classList.contains("vd-rating-readonly")||e.hasAttribute("data-vd-rating-readonly"),a=s;e.classList.add("vd-rating"),e.setAttribute("role","radiogroup"),e.setAttribute("aria-label",e.getAttribute("aria-label")||"Rating"),e.innerHTML="";let o=[];for(let d=1;d<=n;d++){let c=document.createElement("button");c.type="button",c.className="vd-rating-star",c.setAttribute("role","radio"),c.setAttribute("aria-label",d+" star"+(d>1?"s":"")),c.setAttribute("aria-checked",d<=a?"true":"false"),i&&(c.tabIndex=-1),o.push(c),e.appendChild(c)}let r=document.createElement("span");r.className="vd-rating-value",r.textContent=a>0?a.toString():"",e.appendChild(r);let l=d=>{o.forEach((c,h)=>{c.classList.remove("is-active","is-half");let u=h+1;u<=Math.floor(d)?c.classList.add("is-active"):u-.5<=d&&c.classList.add("is-half"),c.setAttribute("aria-checked",u<=d?"true":"false")}),r.textContent=d>0?d.toString():""};if(l(a),!i){o.forEach((c,h)=>{let u=()=>{o.forEach((y,C)=>{y.classList.toggle("is-hovered",C<=h)})},p=()=>{o.forEach(y=>y.classList.remove("is-hovered"))},v=()=>{a=h+1,e.setAttribute("data-vd-rating-value",a),l(a),e.dispatchEvent(new CustomEvent("rating:change",{detail:{value:a,max:n},bubbles:!0}))};c.addEventListener("mouseenter",u),c.addEventListener("mouseleave",p),c.addEventListener("click",v),t.push(()=>c.removeEventListener("mouseenter",u),()=>c.removeEventListener("mouseleave",p),()=>c.removeEventListener("click",v))});let d=c=>{c.key==="ArrowRight"||c.key==="ArrowUp"?(c.preventDefault(),a1&&(a--,l(a),o[a-1].focus(),e.dispatchEvent(new CustomEvent("rating:change",{detail:{value:a,max:n},bubbles:!0}))))};e.addEventListener("keydown",d),t.push(()=>e.removeEventListener("keydown",d))}this.instances.set(e,{cleanup:t,getValue:()=>a,setValue:d=>{a=d,l(d)}})},getValue:function(e){let t=this.instances.get(e);return t?t.getValue():0},setValue:function(e,t){let n=this.instances.get(e);n&&n.setValue(t)},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("rating",m),window.VanduoRating=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("[data-vd-transfer]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[];e.classList.add("vd-transfer");let n,s;try{n=JSON.parse(e.getAttribute("data-vd-transfer")||"[]").map((u,p)=>({id:u.id||"item-"+p,label:u.label||u.text||String(u),selected:!1}))}catch{n=[]}s=[];let i=new Set,a=new Set,o=()=>{e.innerHTML="";let h=r("Source",n,i,"source"),u=document.createElement("div");u.className="vd-transfer-actions";let p=document.createElement("button");p.type="button",p.className="vd-transfer-btn",p.innerHTML="›",p.setAttribute("aria-label","Move to target"),p.disabled=i.size===0,p.addEventListener("click",()=>l());let v=document.createElement("button");v.type="button",v.className="vd-transfer-btn",v.innerHTML="‹",v.setAttribute("aria-label","Move to source"),v.disabled=a.size===0,v.addEventListener("click",()=>d()),u.appendChild(p),u.appendChild(v);let y=r("Target",s,a,"target");e.appendChild(h),e.appendChild(u),e.appendChild(y)},r=(h,u,p,v)=>{let y=document.createElement("div");y.className="vd-transfer-panel";let C=document.createElement("div");C.className="vd-transfer-header";let L=document.createElement("span");L.textContent=h;let P=document.createElement("span");P.className="vd-transfer-count",P.textContent=p.size+"/"+u.length,C.appendChild(L),C.appendChild(P),y.appendChild(C);let x=document.createElement("div");x.className="vd-transfer-search";let _=document.createElement("input");_.type="text",_.placeholder="Search...",_.setAttribute("aria-label","Search "+h.toLowerCase()),x.appendChild(_),y.appendChild(x);let V=document.createElement("ul");V.className="vd-transfer-list",V.setAttribute("role","listbox");let g=k=>{V.innerHTML="",(k?u.filter(M=>(M.label||M.text||String(M)).toLowerCase().includes(k.toLowerCase())):u).forEach(M=>{let f=document.createElement("li");f.className="vd-transfer-item",f.setAttribute("role","option"),p.has(M.id)&&f.classList.add("is-selected");let w=document.createElement("input");w.type="checkbox",w.checked=p.has(M.id),w.setAttribute("aria-label",M.label);let E=document.createElement("span");E.textContent=M.label,f.addEventListener("click",()=>{p.has(M.id)?p.delete(M.id):p.add(M.id),o()}),f.appendChild(w),f.appendChild(E),V.appendChild(f)})};return _.addEventListener("input",()=>g(_.value)),g(""),y.appendChild(V),y},l=()=>{let h=n.filter(u=>i.has(u.id));n=n.filter(u=>!i.has(u.id)),s=s.concat(h),i.clear(),o(),c()},d=()=>{let h=s.filter(u=>a.has(u.id));s=s.filter(u=>!a.has(u.id)),n=n.concat(h),a.clear(),o(),c()},c=()=>{e.dispatchEvent(new CustomEvent("transfer:change",{detail:{source:n.map(h=>h.id),target:s.map(h=>h.id)},bubbles:!0}))};o(),this.instances.set(e,{cleanup:t,getTarget:()=>s.map(h=>h.id),getSource:()=>n.map(h=>h.id)})},getSelected:function(e){let t=this.instances.get(e);return t?t.getTarget():[]},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),e.innerHTML="",this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("transfer",m),window.VanduoTransfer=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("[data-vd-tree]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-tree-cascade")!=="false",s;try{s=JSON.parse(e.getAttribute("data-vd-tree")||"[]")}catch{s=[]}e.classList.add("vd-tree"),e.setAttribute("role","tree");let i=(r,l)=>{l.innerHTML="",r.forEach(d=>{let c=document.createElement("li");c.className="vd-tree-node",c.setAttribute("role","treeitem"),c.setAttribute("aria-expanded",d.open?"true":"false"),d.open&&c.classList.add("is-open");let h=document.createElement("div");if(h.className="vd-tree-node-content",d.children&&d.children.length>0){let p=document.createElement("button");p.type="button",p.className="vd-tree-toggle",p.setAttribute("aria-label","Toggle"),p.addEventListener("click",v=>{v.stopPropagation(),d.open=!d.open,c.classList.toggle("is-open"),c.setAttribute("aria-expanded",d.open?"true":"false")}),h.appendChild(p)}else{let p=document.createElement("span");p.className="vd-tree-toggle-placeholder",h.appendChild(p)}if(e.hasAttribute("data-vd-tree-checkbox")){let p=document.createElement("input");p.type="checkbox",p.className="vd-tree-checkbox",p.checked=!!d.checked,p.setAttribute("aria-label",d.label),p.addEventListener("change",v=>{v.stopPropagation(),d.checked=p.checked,n&&d.children&&(a(d.children,p.checked),i(s,e)),e.dispatchEvent(new CustomEvent("tree:check",{detail:{id:d.id,checked:p.checked,label:d.label},bubbles:!0}))}),h.appendChild(p)}if(d.icon){let p=document.createElement("span");p.className="vd-tree-icon "+d.icon,h.appendChild(p)}let u=document.createElement("span");if(u.className="vd-tree-label",u.textContent=d.label||"",h.appendChild(u),c.appendChild(h),d.children&&d.children.length>0){let p=document.createElement("ul");p.className="vd-tree-children",p.setAttribute("role","group"),i(d.children,p),c.appendChild(p)}l.appendChild(c)})},a=(r,l)=>{r.forEach(d=>{d.checked=l,d.children&&a(d.children,l)})},o=r=>{let l=document.activeElement;if(!e.contains(l))return;let d=Array.from(e.querySelectorAll(".vd-tree-node-content")),c=d.indexOf(l.closest(".vd-tree-node-content"));if(c!==-1)switch(r.key){case"ArrowDown":if(r.preventDefault(),c0){let h=d[c-1].querySelector(".vd-tree-toggle, .vd-tree-label");h&&h.focus()}break}};e.addEventListener("keydown",o),t.push(()=>e.removeEventListener("keydown",o)),i(s,e),this.instances.set(e,{cleanup:t,getData:()=>s,getChecked:()=>{let r=[],l=d=>{d.forEach(c=>{c.checked&&r.push(c.id||c.label),c.children&&l(c.children)})};return l(s),r}})},getChecked:function(e){let t=this.instances.get(e);return t?t.getChecked():[]},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),e.innerHTML="",this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("tree",m),window.VanduoTree=m})();(function(){"use strict";let m={_active:!1,_steps:[],_currentStep:0,_elements:{},_cleanup:[],_boundTriggers:new WeakMap,_triggerElement:null,init:function(){document.querySelectorAll("[data-vd-spotlight]").forEach(t=>{if(this._boundTriggers.has(t))return;let n=s=>{s.preventDefault();let i=this._parseSteps(t.getAttribute("data-vd-spotlight"));i.length!==0&&this.start(i,{trigger:t})};t.addEventListener("click",n),this._boundTriggers.set(t,n)})},_parseSteps:function(e){if(typeof e!="string"||e.trim()==="")return[];try{let t=JSON.parse(e);return this._normalizeSteps(t)}catch(t){return console.error("VanduoSpotlight: invalid data-vd-spotlight payload.",t),[]}},_normalizeStep:function(e){if(!e||typeof e!="object")return null;let t=e.target,n=typeof t=="string"&&t.trim()!=="",s=typeof Element<"u"&&t instanceof Element;if(!n&&!s)return null;let i=typeof e.title=="string"?e.title:"",a=typeof e.description=="string"?e.description:typeof e.content=="string"?e.content:"";return{target:t,title:i,description:a}},_normalizeSteps:function(e){return Array.isArray(e)?e.map(t=>this._normalizeStep(t)).filter(Boolean):[]},start:function(e,t){this._active&&this.stop();let n=this._normalizeSteps(e);if(n.length===0)return;let s=t||{};this._steps=n,this._currentStep=0,this._active=!0,this._triggerElement=s.trigger||(document.activeElement instanceof HTMLElement?document.activeElement:null);let i=document.createElement("div");i.className="vd-spotlight-overlay",i.setAttribute("aria-hidden","true"),document.body.appendChild(i);let a=document.createElement("div");a.className="vd-spotlight-tooltip",a.setAttribute("role","dialog"),a.setAttribute("aria-modal","true"),a.tabIndex=-1,document.body.appendChild(a),this._elements={overlay:i,tooltip:a};let o=r=>{r.key==="Escape"&&this.stop()};document.addEventListener("keydown",o),this._cleanup.push(()=>document.removeEventListener("keydown",o)),i.addEventListener("click",()=>this.stop()),this._showStep(this._currentStep)},_showStep:function(e){let t=this._steps[e];if(!t)return;let n=typeof t.target=="string"?document.querySelector(t.target):t.target,{tooltip:s}=this._elements;document.querySelectorAll(".vd-spotlight-target").forEach(d=>{d.classList.remove("vd-spotlight-target")}),n&&(n.classList.add("vd-spotlight-target"),n.scrollIntoView({behavior:"smooth",block:"center"}));let i=this._steps.length;if(s.innerHTML="",s.removeAttribute("aria-labelledby"),s.removeAttribute("aria-describedby"),t.title){let d=document.createElement("h4");d.className="vd-spotlight-title",d.id="vd-spotlight-title-"+e+"-"+Date.now(),d.textContent=t.title,s.appendChild(d),s.setAttribute("aria-labelledby",d.id)}if(t.description){let d=document.createElement("p");d.className="vd-spotlight-description",d.id="vd-spotlight-description-"+e+"-"+Date.now(),d.textContent=t.description,s.appendChild(d),s.setAttribute("aria-describedby",d.id)}let a=document.createElement("div");a.className="vd-spotlight-footer",a.setAttribute("aria-label","Step "+(e+1)+" of "+i);let o=document.createElement("span");o.className="vd-spotlight-counter",o.textContent=e+1+" / "+i;let r=document.createElement("div");if(r.className="vd-spotlight-actions",e>0){let d=document.createElement("button");d.type="button",d.className="vd-spotlight-btn",d.textContent="Back",d.addEventListener("click",()=>this.prev()),r.appendChild(d)}let l=document.createElement("button");if(l.type="button",l.className="vd-spotlight-btn",l.textContent="Skip",l.addEventListener("click",()=>this.stop()),r.appendChild(l),ethis.next()),r.appendChild(d)}else{let d=document.createElement("button");d.type="button",d.className="vd-spotlight-btn vd-spotlight-btn-primary",d.textContent="Done",d.addEventListener("click",()=>this.stop()),r.appendChild(d)}a.appendChild(o),a.appendChild(r),s.appendChild(a),n&&requestAnimationFrame(()=>{let d=n.getBoundingClientRect(),c=s.getBoundingClientRect(),h=d.bottom+12+window.scrollY,u=d.left+(d.width-c.width)/2+window.scrollX;u=Math.max(8,Math.min(u,window.innerWidth-c.width-8)),h+c.height>window.innerHeight+window.scrollY&&(h=d.top-c.height-12+window.scrollY),s.style.top=h+"px",s.style.left=u+"px"}),document.dispatchEvent(new CustomEvent("spotlight:step",{detail:{index:e,step:e,total:i,data:t}}))},next:function(){this._currentStep0&&(this._currentStep--,this._showStep(this._currentStep))},stop:function(){if(!this._active)return;let e=this._steps.length,t={completedSteps:e===0?0:Math.min(this._currentStep+1,e),total:e,completed:e>0&&this._currentStep>=e-1};this._active=!1,document.querySelectorAll(".vd-spotlight-target").forEach(n=>{n.classList.remove("vd-spotlight-target")}),this._elements.overlay&&this._elements.overlay.parentNode&&this._elements.overlay.parentNode.removeChild(this._elements.overlay),this._elements.tooltip&&this._elements.tooltip.parentNode&&this._elements.tooltip.parentNode.removeChild(this._elements.tooltip),this._cleanup.forEach(n=>n()),this._cleanup=[],this._elements={},this._steps=[],this._currentStep=0,this._triggerElement&&this._triggerElement.isConnected&&typeof this._triggerElement.focus=="function"&&this._triggerElement.focus(),this._triggerElement=null,document.dispatchEvent(new CustomEvent("spotlight:end",{detail:t}))},destroyAll:function(){this.stop()}};typeof window.Vanduo<"u"&&window.Vanduo.register("spotlight",m),window.VanduoSpotlight=m})();(function(){"use strict";function m(i){let a=i.slice();for(let o=a.length-1;o>0;o--){let r=Math.floor(Math.random()*(o+1)),l=a[o];a[o]=a[r],a[r]=l}return a}function e(i){if(!isFinite(i)||i<0)return"0:00";let a=Math.floor(i/60),o=Math.floor(i%60);return a+":"+(o<10?"0":"")+o}function t(i){let a=parseFloat(i.min)||0,o=parseFloat(i.max)||1,l=((parseFloat(i.value)||0)-a)/(o-a)*100;i.style.setProperty("--fill",l+"%"),i.style.backgroundImage="linear-gradient(to right, var(--music-player-track-fill, currentColor) 0%, var(--music-player-track-fill, currentColor) "+l+"%, var(--music-player-track-bg, #ccc) "+l+"%, var(--music-player-track-bg, #ccc) 100%)"}function n(i){let a=document.createElement("i");return a.className="ph ph-"+i,a.setAttribute("aria-hidden","true"),a}let s={instances:new Map,defaults:{tracks:[],volume:.5,shuffle:!1,showProgress:!1,showPlaylist:!1,autoAdvance:!0},init:function(){document.querySelectorAll(".vd-music-player, [data-music-player]").forEach(i=>{if(this.instances.has(i))return;let a={},o=i.getAttribute("data-music-player-options");if(o)try{a=JSON.parse(o)}catch{}this.initPlayer(i,a)})},initPlayer:function(i,a){let o=Object.assign({},this.defaults,a||{}),l=(Array.isArray(o.tracks)?o.tracks:[]).filter(f=>f&&typeof f.url=="string"&&f.url.trim()),c={tracks:o.shuffle?m(l):l.slice(),originalTracks:l.slice(),currentIndex:0,isPlaying:!1,volume:Math.max(0,Math.min(1,o.volume)),shuffle:o.shuffle,showProgress:o.showProgress,showPlaylist:o.showPlaylist,autoAdvance:o.autoAdvance,audio:null},h=new Audio;h.volume=c.volume,h.preload="metadata",c.audio=h,this._buildDOM(i,c);let u={btnPlay:i.querySelector(".vd-music-player-btn-play"),btnPrev:i.querySelector(".vd-music-player-btn-prev"),btnNext:i.querySelector(".vd-music-player-btn-next"),btnShuffle:i.querySelector(".vd-music-player-btn-shuffle"),btnPlaylist:i.querySelector(".vd-music-player-btn-playlist"),trackName:i.querySelector(".vd-music-player-track-name"),volumeSlider:i.querySelector(".vd-music-player-volume-slider"),volumeIcon:i.querySelector(".vd-music-player-volume-icon"),progressBar:i.querySelector(".vd-music-player-progress-bar"),timeElapsed:i.querySelector(".vd-music-player-time-elapsed"),timeDuration:i.querySelector(".vd-music-player-time-duration"),playlistPanel:i.querySelector(".vd-music-player-playlist")},p=()=>{let f=u.btnPlay;f&&(f.innerHTML="",f.appendChild(n(c.isPlaying?"pause":"play")),f.setAttribute("aria-label",c.isPlaying?"Pause":"Play"),f.classList.toggle("is-active",c.isPlaying))},v=()=>{let f=u.trackName;if(!f)return;let w=c.tracks[c.currentIndex];w?(f.textContent=w.name||"Unknown Track",f.classList.remove("is-idle")):(f.textContent="No tracks loaded",f.classList.add("is-idle"))},y=()=>{let f=u.volumeIcon;if(!f)return;f.innerHTML="";let w=c.volume,E=w===0?"speaker-none":w<.5?"speaker-low":"speaker-high";f.appendChild(n(E))},C=()=>{let f=u.btnShuffle;f&&(f.classList.toggle("is-active",c.shuffle),f.setAttribute("aria-pressed",c.shuffle?"true":"false"))},L=()=>{let f=u.playlistPanel;f&&(f.innerHTML="",c.tracks.forEach((w,E)=>{let I=document.createElement("button");I.className="vd-music-player-playlist-item"+(E===c.currentIndex?" is-active":""),I.type="button",I.setAttribute("data-index",String(E)),I.setAttribute("aria-current",E===c.currentIndex?"true":"false");let O=document.createElement("span");O.className="vd-music-player-playlist-num",O.textContent=String(E+1);let H=document.createElement("span");H.className="vd-music-player-playlist-name",H.textContent=w.name||"Track "+(E+1),I.appendChild(O),I.appendChild(H),f.appendChild(I)}))},P=()=>{let f=u.progressBar;if(!f||!h.duration)return;let w=h.currentTime/h.duration*100;f.value=String(w),t(f),u.timeElapsed&&(u.timeElapsed.textContent=e(h.currentTime)),u.timeDuration&&(u.timeDuration.textContent=e(h.duration))},x=(f,w)=>{let E=c.tracks[f];E&&(c.currentIndex=f,h.src=E.url,v(),L(),u.progressBar&&(u.progressBar.value="0",t(u.progressBar)),u.timeElapsed&&(u.timeElapsed.textContent="0:00"),u.timeDuration&&(u.timeDuration.textContent="0:00"),i.dispatchEvent(new CustomEvent("musicplayer:trackchange",{bubbles:!0,detail:{index:f,name:E.name,url:E.url}})),w&&h.play().catch(()=>{}))},_=[],V=()=>{c.isPlaying=!0,p(),i.dispatchEvent(new CustomEvent("musicplayer:play",{bubbles:!0}))},g=()=>{c.isPlaying=!1,p(),i.dispatchEvent(new CustomEvent("musicplayer:pause",{bubbles:!0}))},k=()=>{if(c.autoAdvance&&c.tracks.length>1){let f=(c.currentIndex+1)%c.tracks.length;x(f,!0)}else c.isPlaying=!1,p(),i.dispatchEvent(new CustomEvent("musicplayer:ended",{bubbles:!0}))},T=()=>{c.showProgress&&P()},M=()=>{u.timeDuration&&(u.timeDuration.textContent=e(h.duration)),u.progressBar&&(u.progressBar.max="100",t(u.progressBar))};if(h.addEventListener("play",V),h.addEventListener("pause",g),h.addEventListener("ended",k),h.addEventListener("timeupdate",T),h.addEventListener("loadedmetadata",M),_.push(()=>{h.removeEventListener("play",V),h.removeEventListener("pause",g),h.removeEventListener("ended",k),h.removeEventListener("timeupdate",T),h.removeEventListener("loadedmetadata",M),h.pause(),h.src=""}),u.btnPlay){let f=()=>{!h.src&&c.tracks.length&&x(c.currentIndex,!1),c.isPlaying?h.pause():h.play().catch(()=>{})};u.btnPlay.addEventListener("click",f),_.push(()=>u.btnPlay.removeEventListener("click",f));let w=E=>{(E.key===" "||E.key==="Enter")&&(E.preventDefault(),f())};u.btnPlay.addEventListener("keydown",w),_.push(()=>u.btnPlay.removeEventListener("keydown",w))}if(u.btnPrev){let f=()=>{if(c.tracks.length)if(h.currentTime>3)h.currentTime=0;else{let w=c.currentIndex===0?c.tracks.length-1:c.currentIndex-1;x(w,c.isPlaying)}};u.btnPrev.addEventListener("click",f),_.push(()=>u.btnPrev.removeEventListener("click",f))}if(u.btnNext){let f=()=>{if(!c.tracks.length)return;let w=(c.currentIndex+1)%c.tracks.length;x(w,c.isPlaying)};u.btnNext.addEventListener("click",f),_.push(()=>u.btnNext.removeEventListener("click",f))}if(u.btnShuffle){let f=()=>{if(c.shuffle=!c.shuffle,c.shuffle){let w=c.tracks[c.currentIndex];c.tracks=m(c.tracks);let E=c.tracks.findIndex(I=>I===w);E>0&&(c.tracks.splice(E,1),c.tracks.unshift(w)),c.currentIndex=0}else{let w=c.tracks[c.currentIndex];c.tracks=c.originalTracks.slice(),c.currentIndex=c.tracks.findIndex(E=>E===w),c.currentIndex<0&&(c.currentIndex=0)}C(),L()};u.btnShuffle.addEventListener("click",f),_.push(()=>u.btnShuffle.removeEventListener("click",f))}if(u.btnPlaylist){let f=()=>{let w=u.playlistPanel;if(!w)return;let E=w.classList.toggle("is-open");u.btnPlaylist.classList.toggle("is-active",E),u.btnPlaylist.setAttribute("aria-expanded",E?"true":"false")};u.btnPlaylist.addEventListener("click",f),_.push(()=>u.btnPlaylist.removeEventListener("click",f))}if(u.volumeSlider){let f=w=>{let E=parseFloat(w.target.value);c.volume=E,h.volume=E,y(),t(u.volumeSlider),i.dispatchEvent(new CustomEvent("musicplayer:volumechange",{bubbles:!0,detail:{volume:E}}))};u.volumeSlider.addEventListener("input",f),_.push(()=>u.volumeSlider.removeEventListener("input",f)),t(u.volumeSlider)}if(u.progressBar){let f=w=>{if(!h.duration)return;let E=parseFloat(w.target.value);h.currentTime=E/100*h.duration,t(u.progressBar)};u.progressBar.addEventListener("input",f),_.push(()=>u.progressBar.removeEventListener("input",f))}if(u.playlistPanel){let f=w=>{let E=w.target.closest(".vd-music-player-playlist-item");if(!E)return;let I=parseInt(E.getAttribute("data-index"),10);isNaN(I)||x(I,!0)};u.playlistPanel.addEventListener("click",f),_.push(()=>u.playlistPanel.removeEventListener("click",f))}p(),v(),y(),o.showPlaylist&&L(),this.instances.set(i,{state:c,audio:h,refs:u,cleanup:_}),i.setAttribute("data-music-player-initialized","true")},_buildDOM:function(i,a){if(i.querySelector(".vd-music-player-controls"))return;i.setAttribute("role","region"),i.setAttribute("aria-label","Music Player"),a.showProgress&&i.classList.add("has-progress"),a.showPlaylist&&i.classList.add("has-playlist");let o=document.createElement("div");o.className="vd-music-player-info";let r=document.createElement("span");r.className="vd-music-player-icon",r.setAttribute("aria-hidden","true"),r.appendChild(n("music-note"));let l=document.createElement("span");l.className="vd-music-player-track-name",l.setAttribute("aria-live","polite"),l.setAttribute("aria-atomic","true"),o.appendChild(r),o.appendChild(l),i.appendChild(o);let d=document.createElement("div");d.className="vd-music-player-controls",d.setAttribute("role","group"),d.setAttribute("aria-label","Playback controls");let c=document.createElement("button");c.type="button",c.className="vd-music-player-btn vd-music-player-btn-prev",c.setAttribute("aria-label","Previous track"),c.appendChild(n("skip-back"));let h=document.createElement("button");h.type="button",h.className="vd-music-player-btn vd-music-player-btn-play",h.setAttribute("aria-label","Play"),h.appendChild(n("play"));let u=document.createElement("button");if(u.type="button",u.className="vd-music-player-btn vd-music-player-btn-next",u.setAttribute("aria-label","Next track"),u.appendChild(n("skip-forward")),d.appendChild(c),d.appendChild(h),d.appendChild(u),a.showPlaylist||a.shuffle!==void 0){let L=document.createElement("button");L.type="button",L.className="vd-music-player-btn vd-music-player-btn-shuffle",L.setAttribute("aria-label","Shuffle"),L.setAttribute("aria-pressed",a.shuffle?"true":"false"),L.appendChild(n("shuffle")),d.appendChild(L)}let p=document.createElement("span");p.className="vd-music-player-spacer",p.setAttribute("aria-hidden","true"),d.appendChild(p);let v=document.createElement("div");v.className="vd-music-player-volume";let y=document.createElement("span");y.className="vd-music-player-volume-icon",y.setAttribute("aria-hidden","true");let C=document.createElement("input");if(C.type="range",C.className="vd-music-player-volume-slider",C.min="0",C.max="1",C.step="0.01",C.value=String(a.volume),C.setAttribute("aria-label","Volume"),v.appendChild(y),v.appendChild(C),d.appendChild(v),a.showPlaylist){let L=document.createElement("button");L.type="button",L.className="vd-music-player-btn vd-music-player-btn-playlist",L.setAttribute("aria-label","Show playlist"),L.setAttribute("aria-expanded","false"),L.appendChild(n("playlist")),d.appendChild(L)}if(i.appendChild(d),a.showProgress){let L=document.createElement("div");L.className="vd-music-player-progress";let P=document.createElement("span");P.className="vd-music-player-time vd-music-player-time-elapsed",P.textContent="0:00",P.setAttribute("aria-hidden","true");let x=document.createElement("input");x.type="range",x.className="vd-music-player-progress-bar",x.min="0",x.max="100",x.step="0.1",x.value="0",x.setAttribute("aria-label","Seek");let _=document.createElement("span");_.className="vd-music-player-time vd-music-player-time-duration",_.textContent="0:00",_.setAttribute("aria-hidden","true"),L.appendChild(P),L.appendChild(x),L.appendChild(_),i.appendChild(L)}if(a.showPlaylist){let L=document.createElement("div");L.className="vd-music-player-playlist",L.setAttribute("aria-label","Playlist"),i.appendChild(L)}},play:function(i){let a=this.instances.get(i);a&&(!a.audio.src&&a.state.tracks.length&&(a.audio.src=a.state.tracks[a.state.currentIndex].url),a.audio.play().catch(()=>{}))},pause:function(i){let a=this.instances.get(i);a&&a.audio.pause()},toggle:function(i){let a=this.instances.get(i);a&&(a.state.isPlaying?this.pause(i):this.play(i))},next:function(i){let a=this.instances.get(i);if(!a||!a.state.tracks.length)return;let o=(a.state.currentIndex+1)%a.state.tracks.length;this._loadTrack(a,o,a.state.isPlaying)},previous:function(i){let a=this.instances.get(i);if(!a||!a.state.tracks.length)return;let o=a.state.tracks.length,r=(a.state.currentIndex-1+o)%o;this._loadTrack(a,r,a.state.isPlaying)},setVolume:function(i,a){let o=this.instances.get(i);if(!o)return;let r=Math.max(0,Math.min(1,a));o.state.volume=r,o.audio.volume=r,o.refs.volumeSlider&&(o.refs.volumeSlider.value=String(r),t(o.refs.volumeSlider)),i.dispatchEvent(new CustomEvent("musicplayer:volumechange",{bubbles:!0,detail:{volume:r}}))},setTrack:function(i,a){let o=this.instances.get(i);o&&this._loadTrack(o,a,o.state.isPlaying)},shuffle:function(i){let a=this.instances.get(i);!a||!a.refs.btnShuffle||a.refs.btnShuffle.click()},getState:function(i){let a=this.instances.get(i);if(!a)return null;let o=a.state;return{isPlaying:o.isPlaying,currentIndex:o.currentIndex,currentTrack:o.tracks[o.currentIndex]||null,volume:o.volume,shuffle:o.shuffle,tracks:o.tracks.slice()}},destroy:function(i){let a=this.instances.get(i);a&&(a.cleanup.forEach(o=>o()),this.instances.delete(i),i.removeAttribute("data-music-player-initialized"))},destroyAll:function(){this.instances.forEach((i,a)=>this.destroy(a))},_loadTrack:function(i,a,o){let r=i.state.tracks[a];if(!r)return;let l=this._containerOf(i);i.state.currentIndex=a,i.audio.src=r.url,i.refs.trackName&&(i.refs.trackName.textContent=r.name||"Unknown Track",i.refs.trackName.classList.remove("is-idle")),i.refs.playlistPanel&&i.refs.playlistPanel.querySelectorAll(".vd-music-player-playlist-item").forEach((d,c)=>{let h=c===a;d.classList.toggle("is-active",h),d.setAttribute("aria-current",h?"true":"false")}),i.refs.progressBar&&(i.refs.progressBar.value="0",t(i.refs.progressBar)),i.refs.timeElapsed&&(i.refs.timeElapsed.textContent="0:00"),i.refs.timeDuration&&(i.refs.timeDuration.textContent="0:00"),l&&l.dispatchEvent(new CustomEvent("musicplayer:trackchange",{bubbles:!0,detail:{index:a,name:r.name,url:r.url}})),o&&i.audio.play().catch(()=>{})},_containerOf:function(i){for(let[a,o]of this.instances)if(o===i)return a;return null}};typeof window.Vanduo<"u"&&window.Vanduo.register("musicPlayer",s),window.VanduoMusicPlayer=s})();var J=window.Vanduo;var ze=J;})(); + `},isUsingDefaultPrimary:function(){return this.state.primary===this.DEFAULTS.PRIMARY_LIGHT||this.state.primary===this.DEFAULTS.PRIMARY_DARK},_normalizeDefaultPrimaryIfStaleWithStoredTheme:function(){if(!this.isUsingDefaultPrimary())return;let e=this.getDefaultPrimary(this.state.theme);this.state.primary!==e&&(this.state.primary=e)},bindEvents:function(){if(this.elements.trigger&&this.addListener(this.elements.trigger,"click",e=>{e.preventDefault(),e.stopPropagation(),this.toggle()}),this.bindPanelEvents(),window.matchMedia){let e=window.matchMedia("(prefers-color-scheme: dark)"),t=()=>{if(this.state.theme==="system"&&this.isUsingDefaultPrimary()){let n=this.getDefaultPrimary("system");n!==this.state.primary&&(this.applyPrimary(n),this.updateUI())}};e.addEventListener("change",t),this._cleanup.push(()=>e.removeEventListener("change",t))}this.addListener(document,"click",e=>{this.state.isOpen&&this.elements.customizer&&!this.elements.customizer.contains(e.target)&&this.close()}),this.addListener(document,"keydown",e=>{e.key==="Escape"&&this.state.isOpen&&this.close()})},toggle:function(){this.state.isOpen?this.close():this.open()},open:function(){this.state.isOpen=!0,this.positionPanel(),this.elements.panel&&this.elements.panel.classList.add("is-open"),this.elements.trigger&&this.elements.trigger.setAttribute("aria-expanded","true"),this.elements.overlay&&this.elements.overlay.classList.add("is-active"),this.dispatchEvent("panel-open",{isOpen:!0})},close:function(){this.state.isOpen=!1,this.elements.panel&&this.elements.panel.classList.remove("is-open"),this.elements.trigger&&this.elements.trigger.setAttribute("aria-expanded","false"),this.elements.overlay&&this.elements.overlay.classList.remove("is-active"),this.dispatchEvent("panel-close",{isOpen:!1})},updateUI:function(){if(!this.elements.panel)return;this.elements.panel.querySelectorAll("[data-color]").forEach(t=>{t.classList.toggle("is-active",t.dataset.color===this.state.primary)}),this.elements.panel.querySelectorAll("[data-neutral]").forEach(t=>{t.classList.toggle("is-active",t.dataset.neutral===this.state.neutral)}),this.elements.panel.querySelectorAll("[data-radius]").forEach(t=>{t.classList.toggle("is-active",t.dataset.radius===this.state.radius)});let e=this.elements.panel.querySelector("[data-customizer-font]");e&&(e.value=this.state.font)},reset:function(){this.applyTheme(this.DEFAULTS.THEME),this.applyPrimary(this.getDefaultPrimary(this.DEFAULTS.THEME)),this.applyNeutral(this.DEFAULTS.NEUTRAL),this.applyRadius(this.DEFAULTS.RADIUS),this.applyFont(this.DEFAULTS.FONT),this.updateUI(),this.dispatchEvent("reset",{state:{...this.state}})},getState:function(){return{...this.state}},setPreferences:function(e){e.primary&&this.applyPrimary(e.primary),e.neutral&&this.applyNeutral(e.neutral),e.radius&&this.applyRadius(e.radius),e.font&&this.applyFont(e.font),e.theme&&this.applyTheme(e.theme),this.updateUI()},getStorageValue:function(e,t){if(typeof window.safeStorageGet=="function")return window.safeStorageGet(e,t);try{let n=localStorage.getItem(e);return n!==null?n:t}catch{return t}},setStorageValue:function(e,t){if(typeof window.safeStorageSet=="function")return window.safeStorageSet(e,t);try{return localStorage.setItem(e,t),!0}catch{return!1}},destroyAll:function(){this._cleanup.forEach(e=>e()),this._cleanup=[],this.elements.panel&&this.elements.panel.removeAttribute("data-customizer-initialized"),this.close(),this.isInitialized=!1}};window.Vanduo&&window.Vanduo.register("themeCustomizer",m),window.ThemeCustomizer=m})();(function(){"use strict";let m={isInitialized:!1,_mediaQuery:null,_onMediaChange:null,init:function(){if(this.STORAGE_KEY="vanduo-theme-preference",this.state={preference:this.getPreference()},this.isInitialized){this.applyTheme(),this.renderUI(),this.updateUI();return}this.isInitialized=!0,this.applyTheme(),this.listenForSystemChanges(),this.renderUI(),console.log("Vanduo Theme Switcher initialized")},getPreference:function(){return this.getStorageValue(this.STORAGE_KEY,"system")},setPreference:function(e){this.state.preference=e,this.setStorageValue(this.STORAGE_KEY,e),this.applyTheme(),window.ThemeCustomizer&&window.ThemeCustomizer.applyTheme&&!window.ThemeCustomizer._isApplying&&window.ThemeCustomizer.applyTheme(e),this.updateUI()},getStorageValue:function(e,t){if(typeof window.safeStorageGet=="function")return window.safeStorageGet(e,t);try{let n=localStorage.getItem(e);return n!==null?n:t}catch{return t}},setStorageValue:function(e,t){if(typeof window.safeStorageSet=="function")return window.safeStorageSet(e,t);try{return localStorage.setItem(e,t),!0}catch{return!1}},applyTheme:function(){let e=this.state.preference;e==="system"?document.documentElement.removeAttribute("data-theme"):document.documentElement.setAttribute("data-theme",e)},listenForSystemChanges:function(){this._mediaQuery&&this._onMediaChange||(this._mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this._onMediaChange=e=>{this.state.preference==="system"&&(this.applyTheme(),window.ThemeCustomizer&&typeof window.ThemeCustomizer.applyTheme=="function"&&!window.ThemeCustomizer._isApplying&&window.ThemeCustomizer.applyTheme("system"))},this._mediaQuery.addEventListener("change",this._onMediaChange))},renderUI:function(){document.querySelectorAll('[data-toggle="theme"]').forEach(t=>{if(t.getAttribute("data-theme-initialized")==="true"){t.tagName==="SELECT"&&(t.value=this.state.preference);return}if(t.tagName==="SELECT"){t.value=this.state.preference;let n=s=>{this.setPreference(s.target.value)};t.addEventListener("change",n),t._themeToggleHandler=n}else{let n=()=>{let s=["system","light","dark"],i=(s.indexOf(this.state.preference)+1)%s.length;this.setPreference(s[i])};t.addEventListener("click",n),t._themeToggleHandler=n}t.setAttribute("data-theme-initialized","true")})},updateUI:function(){document.querySelectorAll('[data-toggle="theme"]').forEach(t=>{if(t.tagName==="SELECT")t.value=this.state.preference;else{let n=t.querySelector(".theme-current-label");n&&(n.textContent=this.state.preference.charAt(0).toUpperCase()+this.state.preference.slice(1))}})},destroyAll:function(){document.querySelectorAll('[data-toggle="theme"][data-theme-initialized="true"]').forEach(t=>{if(t._themeToggleHandler){let n=t.tagName==="SELECT"?"change":"click";t.removeEventListener(n,t._themeToggleHandler),delete t._themeToggleHandler}t.removeAttribute("data-theme-initialized")}),this._mediaQuery&&this._onMediaChange&&this._mediaQuery.removeEventListener("change",this._onMediaChange),this._mediaQuery=null,this._onMediaChange=null,this.isInitialized=!1}};window.Vanduo&&window.Vanduo.register("themeSwitcher",m)})();(function(){"use strict";let m={defaults:{position:"top-right",duration:5e3,dismissible:!0,showProgress:!0,pauseOnHover:!0},containers:{},getContainer:function(e){if(this.containers[e])return this.containers[e];let t=document.createElement("div");return t.className=`vd-toast-container vd-toast-container-${e}`,t.setAttribute("role","status"),t.setAttribute("aria-live","polite"),t.setAttribute("aria-atomic","false"),document.body.appendChild(t),this.containers[e]=t,t},show:function(e,t,n){typeof e=="string"&&(e={message:e,type:t,duration:n});let s=Object.assign({},this.defaults,e),i=this.getContainer(s.position),a=document.createElement("div");a.className="vd-toast",s.type&&a.classList.add(`vd-toast-${s.type}`),s.solid&&a.classList.add("vd-toast-solid"),s.showProgress&&s.duration>0&&a.classList.add("vd-toast-with-progress");let o="";if(s.icon){let v=typeof sanitizeHtml=="function"?sanitizeHtml(s.icon):escapeHtml(s.icon);o+=`${v}`}else s.type&&(o+=`${this.getDefaultIcon(s.type)}`);let r=typeof escapeHtml=="function"?escapeHtml:function(v){let y=document.createElement("div");return y.appendChild(document.createTextNode(v)),y.innerHTML};if(o+='
    ',s.title&&(o+=`
    ${r(String(s.title))}
    `),s.message&&(o+=`
    ${r(String(s.message))}
    `),o+="
    ",s.dismissible&&(o+=''),s.showProgress&&s.duration>0){let v=parseInt(s.duration,10)||0;o+=`
    `}if(a.innerHTML=o,i.appendChild(a),a._toastCleanup=[],s.dismissible){let v=a.querySelector(".vd-toast-close"),y=()=>{this.dismiss(a)};v.addEventListener("click",y),a._toastCleanup.push(()=>v.removeEventListener("click",y))}let l=null,d=s.duration,c=null,u=()=>{if(s.duration>0){c=Date.now(),l=setTimeout(()=>{this.dismiss(a)},d),a._toastTimeoutId=l;let v=a.querySelector(".vd-toast-progress");v&&(v.style.animationPlayState="running")}},h=()=>{if(l){clearTimeout(l),l=null,a._toastTimeoutId=null,d-=Date.now()-c;let v=a.querySelector(".vd-toast-progress");v&&(v.style.animationPlayState="paused")}};s.pauseOnHover&&(a.addEventListener("mouseenter",h),a.addEventListener("mouseleave",u),a._toastCleanup.push(()=>a.removeEventListener("mouseenter",h),()=>a.removeEventListener("mouseleave",u))),requestAnimationFrame(()=>{a.classList.add("is-visible"),u()}),a._toastConfig=s;let p=new CustomEvent("toast:show",{bubbles:!0,detail:{toast:a,config:s}});return a.dispatchEvent(p),a},dismiss:function(e){if(!e||e.classList.contains("is-exiting"))return;e._toastTimeoutId&&(clearTimeout(e._toastTimeoutId),e._toastTimeoutId=null),e.classList.remove("is-visible"),e.classList.add("is-exiting");let t=new CustomEvent("toast:dismiss",{bubbles:!0,detail:{toast:e}});e.dispatchEvent(t);let n=()=>{e.removeEventListener("transitionend",n),e._toastCleanup&&(e._toastCleanup.forEach(s=>s()),delete e._toastCleanup),e.parentElement&&e.parentElement.removeChild(e)};e.addEventListener("transitionend",n),setTimeout(()=>{e._toastCleanup&&(e._toastCleanup.forEach(s=>s()),delete e._toastCleanup),e.parentElement&&e.parentElement.removeChild(e)},400)},destroyAll:function(){Object.keys(this.containers).forEach(e=>{let t=this.containers[e];if(!t)return;t.querySelectorAll(".vd-toast").forEach(s=>{s._toastTimeoutId&&clearTimeout(s._toastTimeoutId),s._toastCleanup&&(s._toastCleanup.forEach(i=>i()),delete s._toastCleanup),s.parentElement&&s.parentElement.removeChild(s)}),t.parentElement&&t.parentElement.removeChild(t)}),this.containers={}},dismissAll:function(e){e&&this.containers[e]?this.containers[e].querySelectorAll(".vd-toast").forEach(n=>this.dismiss(n)):Object.values(this.containers).forEach(t=>{t.querySelectorAll(".vd-toast").forEach(s=>this.dismiss(s))})},getDefaultIcon:function(e){return{success:'',error:'',warning:'',info:''}[e]||""},success:function(e,t){return this.show(Object.assign({message:e,type:"success"},t))},error:function(e,t){return this.show(Object.assign({message:e,type:"error"},t))},warning:function(e,t){return this.show(Object.assign({message:e,type:"warning"},t))},info:function(e,t){return this.show(Object.assign({message:e,type:"info"},t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("toast",m),window.Toast=m})();(function(){"use strict";let m={tooltips:new Map,delayTimers:new Map,sanitizeHtml:function(e){if(typeof sanitizeHtml=="function")return sanitizeHtml(e);let t=document.createElement("div");return t.textContent=e||"",t.innerHTML},init:function(){document.querySelectorAll("[data-tooltip], [data-tooltip-html]").forEach(t=>{this.tooltips.has(t)||this.initTooltip(t)})},initTooltip:function(e){let t=this.createTooltip(e),n=[],s=()=>{this.showTooltip(e,t)},i=()=>{this.hideTooltip(e,t)},a=()=>{this.showTooltip(e,t)},o=()=>{this.hideTooltip(e,t)};e.addEventListener("mouseenter",s),e.addEventListener("mouseleave",i),e.addEventListener("focus",a),e.addEventListener("blur",o),n.push(()=>e.removeEventListener("mouseenter",s),()=>e.removeEventListener("mouseleave",i),()=>e.removeEventListener("focus",a),()=>e.removeEventListener("blur",o)),this.tooltips.set(e,{tooltip:t,cleanup:n})},createTooltip:function(e){let t=document.createElement("div");t.className="vd-tooltip",t.setAttribute("role","tooltip"),t.setAttribute("aria-hidden","true");let n="tooltip-"+Math.random().toString(36).substr(2,9);t.id=n,e.setAttribute("aria-describedby",n);let s=e.dataset.tooltipHtml,i=e.dataset.tooltip;s?(t.innerHTML=this.sanitizeHtml(s),t.classList.add("vd-tooltip-html")):i&&(t.textContent=i);let a=e.dataset.tooltipPlacement||e.dataset.placement||"top";t.setAttribute("data-placement",a),t.classList.add(`vd-tooltip-${a}`),e.dataset.tooltipVariant&&t.classList.add(`vd-tooltip-${e.dataset.tooltipVariant}`),e.dataset.tooltipSize&&t.classList.add(`vd-tooltip-${e.dataset.tooltipSize}`);let o=parseInt(e.dataset.tooltipDelay)||0;return t.dataset.delay=o,document.body.appendChild(t),t},showTooltip:function(e,t){let n=parseInt(t.dataset.delay)||0;if(n>0){let s=setTimeout(()=>{this.positionTooltip(e,t),t.classList.add("is-visible"),t.setAttribute("aria-hidden","false")},n);this.delayTimers.set(e,s)}else this.positionTooltip(e,t),t.classList.add("is-visible"),t.setAttribute("aria-hidden","false")},hideTooltip:function(e,t){let n=this.delayTimers.get(e);n&&(clearTimeout(n),this.delayTimers.delete(e)),t.classList.remove("is-visible"),t.setAttribute("aria-hidden","true")},positionTooltip:function(e,t){let n=t.dataset.placement||"top",s=e.getBoundingClientRect(),i=t.getBoundingClientRect(),a=window.pageYOffset||document.documentElement.scrollTop,o=window.pageXOffset||document.documentElement.scrollLeft,r=0,l=0;switch(n){case"top":r=s.top+a-i.height-8,l=s.left+o+s.width/2-i.width/2;break;case"bottom":r=s.bottom+a+8,l=s.left+o+s.width/2-i.width/2;break;case"left":r=s.top+a+s.height/2-i.height/2,l=s.left+o-i.width-8;break;case"right":r=s.top+a+s.height/2-i.height/2,l=s.right+o+8;break}let d=window.innerWidth,c=window.innerHeight,u=8;ld-u&&(l=d-i.width-u),ra+c-u&&(r=a+c-i.height-u),t.style.cssText=`position: absolute; top: 0; left: 0; transform: translate(${l}px, ${r}px);`},show:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t&&this.tooltips.has(t)){let{tooltip:n}=this.tooltips.get(t);this.showTooltip(t,n)}},hide:function(e){let t=typeof e=="string"?document.querySelector(e):e;if(t&&this.tooltips.has(t)){let{tooltip:n}=this.tooltips.get(t);this.hideTooltip(t,n)}},update:function(e,t,n=!1){let s=typeof e=="string"?document.querySelector(e):e;if(s&&this.tooltips.has(s)){let{tooltip:i}=this.tooltips.get(s);n?(i.innerHTML=this.sanitizeHtml(t),i.classList.add("vd-tooltip-html")):(i.textContent=t,i.classList.remove("vd-tooltip-html"))}},destroy:function(e){let t=this.tooltips.get(e);if(!t)return;let n=this.delayTimers.get(e);n&&(clearTimeout(n),this.delayTimers.delete(e)),t.cleanup.forEach(s=>s()),t.tooltip&&t.tooltip.parentNode&&t.tooltip.parentNode.removeChild(t.tooltip),this.tooltips.delete(e)},destroyAll:function(){this.tooltips.forEach((e,t)=>{this.destroy(t)})}};typeof window.Vanduo<"u"&&window.Vanduo.register("tooltips",m),window.VanduoTooltips=m})();(function(){"use strict";let m={minQueryLength:2,maxResults:10,debounceMs:150,highlightTag:"mark",keyboardShortcut:!0,containerSelector:".vd-doc-search",inputSelector:".vd-doc-search-input",resultsSelector:".vd-doc-search-results",contentSelector:".doc-content section[id]",titleSelector:".demo-title, h2, h3",navSelector:".doc-nav-link",sectionSelector:".doc-nav-section",excludeFromContent:"pre, code, script, style",maxContentLength:500,data:null,categoryIcons:{"getting-started":"ph-rocket-launch",core:"ph-cube",components:"ph-puzzle-piece",interactive:"ph-cursor-click","data-display":"ph-table",feedback:"ph-bell",meta:"ph-info",default:"ph-file-text"},onSelect:null,onSearch:null,onOpen:null,onClose:null,emptyTitle:"No results found",emptyText:"Try different keywords or check spelling",placeholder:"Search..."};function e(n){let s=Object.assign({},m,n||{}),i={initialized:!1,index:[],results:[],activeIndex:-1,isOpen:!1,query:"",container:null,input:null,resultsContainer:null,debounceTimer:null,boundHandlers:{}};function a(b,S,...A){try{S(...A)}catch(_){console.warn('[Vanduo Search] Callback error in "'+b+'":',_)}}function o(b){if(i.resultsContainer)try{i.resultsContainer.innerHTML=b}catch(S){console.warn("[Vanduo Search] Failed to render results:",S)}}function r(){return i.initialized?U:(i.container=document.querySelector(s.containerSelector),!i.container||(i.input=i.container.querySelector(s.inputSelector),i.resultsContainer=i.container.querySelector(s.resultsSelector),!i.input||!i.resultsContainer)?(i.initialized=!1,null):(s.placeholder&&i.input.setAttribute("placeholder",s.placeholder),l(),v(),C(),i.initialized=!0,U))}function l(){if(i.index=[],s.data&&Array.isArray(s.data)){s.data.forEach(function(A){i.index.push({id:A.id||p(A.title),title:A.title||"",category:A.category||"",categorySlug:p(A.category||""),content:A.content||"",keywords:A.keywords||h(A.title+" "+A.content),url:A.url||"#"+(A.id||p(A.title)),icon:A.icon||""})});return}let b=document.querySelectorAll(s.contentSelector),S=d();b.forEach(function(A){let _=A.id;if(!_)return;let N=A.querySelector(s.titleSelector),q=N?N.textContent.replace(/v[\d.]+/g,"").trim():_,X=S[_]||"Documentation",$=c(A),B=u(A,q),Y=N?N.querySelector("i.ph"):null,W="";if(Y&&Y.classList){for(let K=0;K2&&A.push(q)}),b.querySelectorAll("code").forEach(function(q){let $=(q.textContent||"").match(/\.([\w-]+)/g);$&&$.forEach(function(B){A.push(B.substring(1).toLowerCase())})}),b.querySelectorAll("[data-tooltip], [data-modal]").forEach(function(q){q.getAttributeNames().filter(function($){return $.startsWith("data-")}).forEach(function($){A.push($.replace("data-",""))})}),Array.from(new Set(A))}function h(b){return b.toLowerCase().split(/\s+/).filter(function(A){return A.length>2})}function p(b){return b.toLowerCase().replace(/\s+/g,"-").replace(/[^a-z0-9-]/g,"")}function v(){i.boundHandlers.handleInput=function(b){L(b)},i.boundHandlers.handleFocus=function(){i.query.length>=s.minQueryLength&&H()},i.boundHandlers.handleKeydown=function(b){P(b)},i.boundHandlers.handleOutsideClick=function(b){i.container.contains(b.target)||z()},i.boundHandlers.handleGlobalKeydown=function(b){s.keyboardShortcut&&(b.metaKey||b.ctrlKey)&&b.key==="k"&&(b.preventDefault(),i.input.focus(),i.input.select())},i.boundHandlers.handleResultClick=function(b){let S=b.target.closest(".vd-doc-search-result");if(S){let A=parseInt(S.dataset.index,10);I(A)}},i.input.addEventListener("input",i.boundHandlers.handleInput),i.input.addEventListener("focus",i.boundHandlers.handleFocus),i.input.addEventListener("keydown",i.boundHandlers.handleKeydown),document.addEventListener("click",i.boundHandlers.handleOutsideClick),document.addEventListener("keydown",i.boundHandlers.handleGlobalKeydown),i.resultsContainer.addEventListener("click",i.boundHandlers.handleResultClick)}function y(){i.input&&(i.input.removeEventListener("input",i.boundHandlers.handleInput),i.input.removeEventListener("focus",i.boundHandlers.handleFocus),i.input.removeEventListener("keydown",i.boundHandlers.handleKeydown)),document.removeEventListener("click",i.boundHandlers.handleOutsideClick),document.removeEventListener("keydown",i.boundHandlers.handleGlobalKeydown),i.resultsContainer&&i.resultsContainer.removeEventListener("click",i.boundHandlers.handleResultClick)}function C(){let b=i.resultsContainer.id||"search-results-"+Math.random().toString(36).substr(2,9);i.resultsContainer.id=b,i.input.setAttribute("role","combobox"),i.input.setAttribute("aria-autocomplete","list"),i.input.setAttribute("aria-controls",b),i.input.setAttribute("aria-expanded","false"),i.resultsContainer.setAttribute("role","listbox"),i.resultsContainer.setAttribute("aria-label","Search results")}function L(b){let S=b.target.value.trim();i.debounceTimer&&clearTimeout(i.debounceTimer),i.debounceTimer=setTimeout(function(){if(i.query=S,S.length=s.minQueryLength&&(b.preventDefault(),i.results=x(i.query),D(),H());return}switch(b.key){case"ArrowDown":b.preventDefault(),w(1);break;case"ArrowUp":b.preventDefault(),w(-1);break;case"Enter":b.preventDefault(),i.activeIndex>=0?I(i.activeIndex):i.results.length>0&&I(0);break;case"Escape":b.preventDefault(),z();break;case"Tab":z();break}}function x(b){let S=b.toLowerCase().split(/\s+/).filter(function(_){return _.length>0}),A=[];return i.index.forEach(function(_){let N=0,q=_.title.toLowerCase(),X=_.category.toLowerCase(),$=_.content.toLowerCase();S.forEach(function(B){q.includes(B)&&(N+=100,q===B?N+=50:q.startsWith(B)&&(N+=25)),X.includes(B)&&(N+=50),_.keywords.some(function(W){return W.includes(B)})&&(N+=30),$.includes(B)&&(N+=10)}),N>0&&A.push({id:_.id,title:_.title,category:_.category,categorySlug:_.categorySlug,content:_.content,url:_.url,icon:_.icon,score:N})}),A.sort(function(_,N){return N.score-_.score}),A.slice(0,s.maxResults)}function D(){if(i.results.length===0){o(V());return}let b='
      ';i.results.forEach(function(S,A){let _=A===i.activeIndex,N=S.icon||k(S.categorySlug),q=T(S.content,i.query);b+='
    • '+M(S.title,i.query)+'
      '+f(S.category)+'
      '+M(q,i.query)+"
      • "}),b+="
    ",b+=g(),o(b)}function V(){return'
    '+f(s.emptyTitle)+'
    '+f(s.emptyText)+"
    "}function g(){return'
    \u2191\u2193 to navigate\u21B5 to selectesc to close
    '}function k(b){return s.categoryIcons[b]||s.categoryIcons.default||"ph-file-text"}function T(b,S){let A=S.toLowerCase().split(/\s+/),_=b.toLowerCase(),N=100,q=-1;for(let Y=0;Y0&&(B="..."+B),$0}),_=f(b);return A.forEach(function(N){if(N.length>50)return;let q=new RegExp("("+N.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")+")","gi");_=_.replace(q,"<"+s.highlightTag+">$1")}),_}function f(b){let S=document.createElement("div");return S.textContent=b,S.innerHTML}function w(b){let S=i.activeIndex+b;S<0?S=i.results.length-1:S>=i.results.length&&(S=0),E(S)}function E(b){let S=i.resultsContainer.querySelector(".vd-doc-search-result.is-active");S&&(S.classList.remove("is-active"),S.setAttribute("aria-selected","false")),i.activeIndex=b;let A=i.resultsContainer.querySelector('[data-index="'+b+'"]');A&&(A.classList.add("is-active"),A.setAttribute("aria-selected","true"),i.input.setAttribute("aria-activedescendant","vd-doc-search-result-"+b),A.scrollIntoView({block:"nearest"}))}function I(b){let S=i.results[b];if(!S)return;if(z(),i.input.value="",i.query="",typeof s.onSelect=="function"){a("onSelect",s.onSelect,S);return}let A=document.querySelector(S.url);A&&(A.scrollIntoView({behavior:"smooth",block:"start"}),window.history.pushState(null,"",S.url),O(S.id))}function O(b){document.querySelectorAll(s.navSelector).forEach(function(A){A.classList.remove("active"),A.getAttribute("href")==="#"+b&&A.classList.add("active")})}function H(){i.isOpen||(i.isOpen=!0,i.resultsContainer.classList.add("is-open"),i.input.setAttribute("aria-expanded","true"),typeof s.onOpen=="function"&&a("onOpen",s.onOpen))}function z(){i.isOpen&&(i.isOpen=!1,i.activeIndex=-1,i.resultsContainer.classList.remove("is-open"),i.input.setAttribute("aria-expanded","false"),i.input.removeAttribute("aria-activedescendant"),typeof s.onClose=="function"&&a("onClose",s.onClose))}function R(){y(),i.initialized=!1,i.index=[],i.results=[],i.isOpen=!1,i.query="",i.debounceTimer&&clearTimeout(i.debounceTimer),i.resultsContainer&&o("")}function j(){l()}function G(b){Object.assign(s,b)}function Z(){return Object.assign({},s)}function F(){return i.index.slice()}let U={init:r,destroy:R,rebuild:j,search:x,open:H,close:z,setConfig:G,getConfig:Z,getIndex:F};return U}let t={create:function(n){let s=e(n);return s&&s.init(),s||null},_instance:null,config:Object.assign({},m),init:function(n){return this._instance&&this._instance.destroy(),n&&Object.assign(this.config,n),this._instance=e(this.config),this._instance?this._instance.init():null},destroy:function(){this._instance&&(this._instance.destroy(),this._instance=null)},destroyAll:function(){this.destroy()},rebuild:function(){this._instance&&this._instance.rebuild()},search:function(n){return this._instance?this._instance.search(n):[]},open:function(){this._instance&&this._instance.open()},close:function(){this._instance&&this._instance.close()}};typeof window.Vanduo<"u"&&window.Vanduo.register("docSearch",t),window.Search=t,window.DocSearch=t,window.VanduoDocSearch=t})();(function(){"use strict";let m={instances:new Map,currentDrag:null,touchState:null,feedbackElement:null,containerSelector:".vd-draggable-container, .vd-draggable-container-vertical",init:function(){document.querySelectorAll(".vd-draggable, [data-draggable]").forEach(s=>{this.instances.has(s)||this.initDraggable(s)}),document.querySelectorAll(this.containerSelector).forEach(s=>{this.instances.has(s)||this.initContainer(s)}),document.querySelectorAll(".vd-drop-zone").forEach(s=>{this.instances.has(s)||this.initDropZone(s)}),this.createFeedbackElement()},initDraggable:function(e){let t=[];e.hasAttribute("draggable")||e.setAttribute("draggable","true"),e.hasAttribute("tabindex")||e.setAttribute("tabindex","0"),e.setAttribute("role","option"),e.setAttribute("aria-roledescription","draggable item"),e.setAttribute("aria-grabbed","false");let n=c=>{this.handleDragStart(c,e)};e.addEventListener("dragstart",n),t.push(()=>e.removeEventListener("dragstart",n));let s=c=>{this.handleDrag(c,e)};e.addEventListener("drag",s),t.push(()=>e.removeEventListener("drag",s));let i=c=>{this.handleDragEnd(c,e)};e.addEventListener("dragend",i),t.push(()=>e.removeEventListener("dragend",i));let a=c=>{this.handleTouchStart(c,e)};e.addEventListener("touchstart",a),t.push(()=>e.removeEventListener("touchstart",a));let o=c=>{this.handleTouchMove(c,e)};e.addEventListener("touchmove",o,{passive:!1}),t.push(()=>e.removeEventListener("touchmove",o));let r=c=>{this.handleTouchEnd(c,e)};e.addEventListener("touchend",r,{passive:!1}),t.push(()=>e.removeEventListener("touchend",r));let l=c=>{this.handleTouchEnd(c,e)};e.addEventListener("touchcancel",l),t.push(()=>e.removeEventListener("touchcancel",l));let d=c=>{this.handleKeydown(c,e)};e.addEventListener("keydown",d),t.push(()=>e.removeEventListener("keydown",d)),this.instances.set(e,{cleanup:t})},initContainer:function(e){e.setAttribute("role","listbox"),e.setAttribute("aria-label",e.getAttribute("aria-label")||"Draggable items"),e.querySelectorAll(".vd-draggable-item").forEach(o=>{this.instances.has(o)||this.initDraggable(o)});let n=[],s=o=>{o.preventDefault(),o.dataTransfer.dropEffect="move"},i=o=>{if(o.preventDefault(),o.dataTransfer.dropEffect="move",!this.currentDrag)return;let r=this.currentDrag.element;e.contains(r)&&(o.clientX===0&&o.clientY===0||this.handleReorder(e,r,o.clientX,o.clientY))},a=o=>{o.preventDefault()};e.addEventListener("dragenter",s),e.addEventListener("dragover",i),e.addEventListener("drop",a),n.push(()=>{e.removeEventListener("dragenter",s),e.removeEventListener("dragover",i),e.removeEventListener("drop",a)}),this.instances.set(e,{cleanup:n})},initDropZone:function(e){let t=[];e.setAttribute("role","region"),e.setAttribute("aria-dropeffect","move"),e.hasAttribute("aria-label")||e.setAttribute("aria-label","Drop zone");let n=o=>{o.preventDefault(),this.handleDragOver(o,e)};e.addEventListener("dragover",n),t.push(()=>e.removeEventListener("dragover",n));let s=o=>{o.preventDefault(),this.handleDragEnter(o,e)};e.addEventListener("dragenter",s),t.push(()=>e.removeEventListener("dragenter",s));let i=o=>{this.handleDragLeave(o,e)};e.addEventListener("dragleave",i),t.push(()=>e.removeEventListener("dragleave",i));let a=o=>{o.preventDefault(),this.handleDrop(o,e)};e.addEventListener("drop",a),t.push(()=>e.removeEventListener("drop",a)),this.instances.set(e,{cleanup:t})},createFeedbackElement:function(){if(!this.feedbackElement){let e=document.querySelector(".vd-drag-feedback");if(e){this.feedbackElement=e;return}this.feedbackElement=document.createElement("div"),this.feedbackElement.className="vd-drag-feedback hidden",this.feedbackElement.setAttribute("role","presentation"),document.body.appendChild(this.feedbackElement)}},handleDragStart:function(e,t){t.classList.add("is-dragging"),t.setAttribute("aria-grabbed","true"),this.currentDrag={element:t,initialPosition:{x:e.clientX,y:e.clientY},initialBounds:t.getBoundingClientRect(),data:this.getData(t)},e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",this.currentDrag.data),t.dispatchEvent(new CustomEvent("draggable:start",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:e.clientX,y:e.clientY}}}))},handleDrag:function(e,t){this.currentDrag&&t.dispatchEvent(new CustomEvent("draggable:drag",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:e.clientX,y:e.clientY},delta:{x:e.clientX-this.currentDrag.initialPosition.x,y:e.clientY-this.currentDrag.initialPosition.y}}}))},handleDragEnd:function(e,t){t.classList.remove("is-dragging"),t.classList.add("is-dropped"),setTimeout(()=>t.classList.remove("is-dropped"),300),t.setAttribute("aria-grabbed","false"),this.feedbackElement&&this.feedbackElement.classList.add("hidden");let n=this.currentDrag?.data||this.getData(t),s=this.currentDrag?.initialPosition||{x:0,y:0};t.dispatchEvent(new CustomEvent("draggable:end",{bubbles:!0,detail:{element:t,data:n,position:{x:e.clientX,y:e.clientY},delta:{x:e.clientX-s.x,y:e.clientY-s.y}}})),this.currentDrag=null},handleTouchStart:function(e,t){let n=e.touches[0],s=t.getBoundingClientRect();this.touchState={element:t,startX:n.clientX,startY:n.clientY,lastX:n.clientX,lastY:n.clientY,offsetX:n.clientX-s.left,offsetY:n.clientY-s.top,startTime:Date.now(),isDragging:!1}},handleTouchMove:function(e,t){if(!this.touchState)return;let n=e.touches[0];this.touchState.lastX=n.clientX,this.touchState.lastY=n.clientY;let s=n.clientX-this.touchState.startX,i=n.clientY-this.touchState.startY;if((Math.abs(s)>10||Math.abs(i)>10)&&(e.cancelable&&e.preventDefault(),this.touchState.isDragging||(this.touchState.isDragging=!0,t.classList.add("is-dragging"),t.setAttribute("aria-grabbed","true"),this.currentDrag={element:t,initialPosition:{x:this.touchState.startX,y:this.touchState.startY},initialBounds:t.getBoundingClientRect(),data:this.getData(t),offsetX:this.touchState.offsetX,offsetY:this.touchState.offsetY},t.dispatchEvent(new CustomEvent("draggable:start",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:n.clientX,y:n.clientY}}}))),this.updateFeedback(n.clientX,n.clientY),this.currentDrag)){t.dispatchEvent(new CustomEvent("draggable:drag",{bubbles:!0,detail:{element:t,data:this.currentDrag.data,position:{x:n.clientX,y:n.clientY},delta:{x:s,y:i}}})),this.updateTouchDropZone(n.clientX,n.clientY);let a=t.closest(this.containerSelector);a&&a.contains(t)&&this.handleReorder(a,t,n.clientX,n.clientY)}},handleTouchEnd:function(e,t){if(this.touchState&&this.touchState.isDragging){e.cancelable&&e.preventDefault();let n=e.changedTouches?.[0],s={x:n?.clientX??this.touchState.lastX??this.touchState.startX,y:n?.clientY??this.touchState.lastY??this.touchState.startY},i=this.resolveDropZoneAtPoint(s.x,s.y)||this.touchState.overZone;i?this.dispatchDrop(i,s):this.touchState.overZone&&this.touchState.overZone.classList.remove("is-drag-over"),t.classList.remove("is-dragging"),t.classList.add("is-dropped"),t.setAttribute("aria-grabbed","false"),setTimeout(()=>t.classList.remove("is-dropped"),300),this.feedbackElement&&this.feedbackElement.classList.add("hidden");let a=this.currentDrag?.data||this.getData(t),o=this.touchState?.startX||0,r=this.touchState?.startY||0;t.dispatchEvent(new CustomEvent("draggable:end",{bubbles:!0,detail:{element:t,data:a,position:s,delta:{x:s.x-o,y:s.y-r}}}))}this.touchState=null,this.currentDrag=null},handleDragOver:function(e,t){e.preventDefault(),e.dataTransfer.dropEffect="move"},handleDragEnter:function(e,t){e.preventDefault(),t.classList.add("is-drag-over")},handleDragLeave:function(e,t){t.classList.remove("is-drag-over")},handleDrop:function(e,t){e.preventDefault(),this.dispatchDrop(t,{x:e.clientX,y:e.clientY})},resolveDropZoneAtPoint:function(e,t){if(!Number.isFinite(e)||!Number.isFinite(t))return null;if(typeof document.elementsFromPoint=="function"){let a=document.elementsFromPoint(e,t);for(let o of a){let r=o.closest(".vd-drop-zone");if(r)return r}}let n=document.elementFromPoint(e,t),s=n?n.closest(".vd-drop-zone"):null;if(s)return s;let i=document.querySelectorAll(".vd-drop-zone");for(let a of i){let o=a.getBoundingClientRect();if(e>=o.left&&e<=o.right&&t>=o.top&&t<=o.bottom)return a}return null},updateTouchDropZone:function(e,t){if(!this.touchState)return;let n=this.resolveDropZoneAtPoint(e,t),s=this.touchState.overZone||null;s&&s!==n&&s.classList.remove("is-drag-over"),n&&n!==s&&n.classList.add("is-drag-over"),this.touchState.overZone=n||null},dispatchDrop:function(e,t){e.classList.remove("is-drag-over"),e.dispatchEvent(new CustomEvent("draggable:drop",{bubbles:!0,detail:{zone:e,element:this.currentDrag?.element,data:this.currentDrag?.data,position:t}}))},handleReorder:function(e,t,n,s){let i=e.classList.contains("vd-draggable-container-vertical"),o=[...e.querySelectorAll(".vd-draggable-item:not(.is-dragging), .vd-draggable:not(.is-dragging)")].reduce((r,l)=>{let d=l.getBoundingClientRect(),c=i?s-d.top-d.height/2:n-d.left-d.width/2;return c<0&&c>r.offset?{offset:c,element:l}:r},{offset:Number.NEGATIVE_INFINITY}).element;o==null?e.appendChild(t):e.insertBefore(t,o)},handleKeydown:function(e,t){switch(e.key){case"Enter":case" ":e.preventDefault(),t.click();break;case"Escape":t.classList.contains("is-dragging")&&(t.classList.remove("is-dragging"),t.setAttribute("aria-grabbed","false"),this.feedbackElement&&this.feedbackElement.classList.add("hidden"),this.currentDrag=null);break;case"ArrowUp":case"ArrowLeft":{e.preventDefault();let n=t.previousElementSibling;n&&(n.classList.contains("vd-draggable")||n.classList.contains("vd-draggable-item"))&&(t.parentNode.insertBefore(t,n),t.focus(),t.dispatchEvent(new CustomEvent("draggable:reorder",{bubbles:!0,detail:{element:t,direction:"up"}})));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();let n=t.nextElementSibling;n&&(n.classList.contains("vd-draggable")||n.classList.contains("vd-draggable-item"))&&(t.parentNode.insertBefore(n,t),t.focus(),t.dispatchEvent(new CustomEvent("draggable:reorder",{bubbles:!0,detail:{element:t,direction:"down"}})));break}}},getData:function(e){return e.dataset.draggable||e.textContent.trim()},updateFeedback:function(e,t){if(!this.currentDrag)return;this.feedbackElement.classList.remove("hidden");let n=this.currentDrag.initialBounds;this.feedbackElement.innerHTML="";let s=this.currentDrag.element.cloneNode(!0);this.feedbackElement.appendChild(s);let i=this.currentDrag.offsetX??20,a=this.currentDrag.offsetY??20;Object.assign(this.feedbackElement.style,{left:e-i+"px",top:t-a+"px",width:n.width+"px",height:n.height+"px"})},makeDraggable:function(e,t={}){let n=typeof e=="string"?document.querySelector(e):e;n&&!this.instances.has(n)&&(n.classList.add("vd-draggable"),n.setAttribute("draggable","true"),t.data&&(n.dataset.draggable=t.data),this.initDraggable(n))},removeDraggable:function(e){let t=typeof e=="string"?document.querySelector(e):e;t&&this.instances.has(t)&&(this.instances.get(t).cleanup.forEach(s=>s()),this.instances.delete(t),t.classList.remove("vd-draggable"),t.removeAttribute("draggable"),t.removeAttribute("data-draggable"))},destroy:function(e){this.removeDraggable(e)},destroyAll:function(){Array.from(this.instances.keys()).forEach(t=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("draggable",m),window.VanduoDraggable=m})();(function(){"use strict";let m=new Map;function e(r){try{return new URL(r,window.location.href).origin===window.location.origin}catch{return!1}}function t(r,l){let c=new DOMParser().parseFromString(l.trim(),"text/html"),u=["SCRIPT","IFRAME","OBJECT","EMBED","FORM","BASE","LINK","META","STYLE"];for(let v of u){let y=c.querySelectorAll(v);for(let C=y.length-1;C>=0;C--)y[C].parentNode.removeChild(y[C])}function h(v){if(v.nodeType===Node.ELEMENT_NODE){let y=v.attributes;for(let L=y.length-1;L>=0;L--){let P=y[L].name.toLowerCase(),D=y[L].value.toLowerCase().trim();(P.startsWith("on")||D.startsWith("javascript:")||D.startsWith("data:")||D.startsWith("vbscript:"))&&v.removeAttribute(y[L].name)}let C=v.childNodes;for(let L=0;L
    Loading\u2026
    '}function s(){return'
    Loading\u2026
    '}function i(r){return!r||r==="skeleton"?n():r==="spinner"?s():r}function a(r,l,d){r.dispatchEvent(new CustomEvent(l,{bubbles:!0,detail:d||{}}))}let o={observe:function(r,l,d){if(!(r instanceof Element)){console.warn("[VanduoLazyLoad] observe() requires a DOM Element.");return}if(typeof l!="function"){console.warn("[VanduoLazyLoad] observe() requires a callback function.");return}if(m.has(r))return;let c=d&&d.threshold!=null?d.threshold:0,u=d&&d.rootMargin?d.rootMargin:"0px",h=new IntersectionObserver(function(p,v){p.forEach(function(y){if(y.isIntersecting){v.unobserve(y.target),m.delete(y.target);try{l(y.target)}catch(C){console.error("[VanduoLazyLoad] Callback threw:",C)}}})},{threshold:c,rootMargin:u});m.set(r,h),h.observe(r)},unobserve:function(r){let l=m.get(r);l&&(l.unobserve(r),m.delete(r))},unobserveAll:function(){m.forEach(function(r,l){r.unobserve(l)}),m.clear()},loadSection:function(r,l,d){if(typeof r!="string"||!r){console.warn("[VanduoLazyLoad] loadSection() requires a non-empty URL string.");return}if(!(l instanceof Element)){console.warn("[VanduoLazyLoad] loadSection() requires a DOM Element as containerEl.");return}if(!e(r)){console.error("[VanduoLazyLoad] loadSection() blocked cross-origin URL:",r);return}let c=d||{},u=i(c.placeholder);t(l,u),a(l,"lazysection:loading",{url:r}),this.observe(l,function(){let h=new window.AbortController,p=setTimeout(function(){h.abort()},1e4);window.fetch(r,{signal:h.signal}).then(function(v){if(clearTimeout(p),!v.ok)throw new Error("HTTP "+v.status);return v.text()}).then(function(v){t(l,v),a(l,"lazysection:loaded",{url:r}),typeof window.Vanduo<"u"&&window.Vanduo.init(),typeof c.onLoaded=="function"&&c.onLoaded(l)}).catch(function(v){let y=document.createElement("div");y.className="vd-alert vd-alert-error",y.setAttribute("role","alert");let C=document.createElement("span");C.textContent="Failed to load content. ";let L=document.createElement("small");for(L.style.opacity="0.7",L.textContent=v.message,y.appendChild(C),y.appendChild(L);l.firstChild;)l.removeChild(l.firstChild);l.appendChild(y),a(l,"lazysection:error",{url:r,error:v}),console.error("[VanduoLazyLoad] loadSection failed:",v),typeof c.onError=="function"&&c.onError(v)})},{threshold:c.threshold,rootMargin:c.rootMargin})},init:function(){let r=this;document.querySelectorAll("[data-vd-lazy]").forEach(function(d){if(m.has(d)||d.dataset.vdLazyState==="loading"||d.dataset.vdLazyState==="loaded")return;let c=d.getAttribute("data-vd-lazy");if(!c)return;d.dataset.vdLazyState="loading";let u=d.getAttribute("data-vd-lazy-placeholder")||"skeleton";r.loadSection(c,d,{placeholder:u,onLoaded:function(){d.dataset.vdLazyState="loaded"},onError:function(){d.dataset.vdLazyState="error"}})})}};typeof window.Vanduo<"u"&&window.Vanduo.register("LazyLoad",o),window.VanduoLazyLoad=o})();(function(){"use strict";let m={observers:new Map,init:function(){document.querySelectorAll("[data-glass-scroll]").forEach(e=>{this.observers.has(e)||this.initElement(e)})},initElement:function(e){let t=e.dataset.glassSentinel,n;if(t&&(n=document.querySelector(t)),n||(n=e.previousElementSibling),!n){e.classList.add("is-glass-active");return}let s=new IntersectionObserver(i=>{i.forEach(a=>{e.classList.toggle("is-glass-active",!a.isIntersecting)})},{threshold:0,rootMargin:"0px"});s.observe(n),this.observers.set(e,s)},destroy:function(e){let t=this.observers.get(e);t&&(t.disconnect(),this.observers.delete(e))},destroyAll:function(){this.observers.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("glassScroll",m),window.VanduoGlassScroll=m})();(function(){"use strict";let e={instances:new Map,init:function(){document.querySelectorAll(".vd-morph, [data-vd-morph]").forEach(function(n){e.instances.has(n)||n.getAttribute("data-vd-morph")!=="manual"&&e.initInstance(n)})},initInstance:function(t){e._ensureLayers(t);let n=[],s=!1,i=function(a){s||(e._runMorph(t,a,function(){s=!1}),s=!0)};t.addEventListener("click",i),n.push(function(){t.removeEventListener("click",i)}),this.instances.set(t,{cleanup:n})},morph:function(t){t&&(this.instances.has(t)||this.initInstance(t),this._runMorph(t,null,null))},destroy:function(t){let n=this.instances.get(t);n&&(n.cleanup.forEach(function(s){s()}),this.instances.delete(t))},destroyAll:function(){this.instances.forEach(function(t,n){e.destroy(n)})},_ensureLayers:function(t){if(!t.querySelector(".vd-morph-wave")){let n=document.createElement("span");n.className="vd-morph-wave",n.setAttribute("aria-hidden","true"),t.insertBefore(n,t.firstChild)}if(!t.querySelector(".vd-morph-shine")){let n=document.createElement("span");n.className="vd-morph-shine",n.setAttribute("aria-hidden","true");let s=t.querySelector(".vd-morph-wave");s&&s.nextSibling?t.insertBefore(n,s.nextSibling):t.insertBefore(n,t.firstChild)}},_runMorph:function(t,n,s){let i=t.querySelector(".vd-morph-wave");if(i){let r=t.getBoundingClientRect(),l=r.left+r.width/2,d=r.top+r.height/2,c=n&&n.clientX||l,u=n&&n.clientY||d;i.style.left=c-r.left+"px",i.style.top=u-r.top+"px"}t.classList.add("is-morphing");let a=750,o=getComputedStyle(t).getPropertyValue("--morph-duration");if(o){let r=parseFloat(o);isNaN(r)||(a=r*(o.indexOf("ms")!==-1?1:1e3))}setTimeout(function(){t.classList.remove("is-morphing");let r=t.querySelector(".vd-morph-current"),l=t.querySelector(".vd-morph-next");r&&l&&(r.classList.remove("vd-morph-current"),r.classList.add("vd-morph-next"),l.classList.remove("vd-morph-next"),l.classList.add("vd-morph-current")),t.classList.add("morph-done"),setTimeout(function(){t.classList.remove("morph-done")},350),typeof s=="function"&&s()},a)}};typeof window.Vanduo<"u"&&window.Vanduo.register("morph",e),window.VanduoMorph=e})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll(".vd-flow, .vd-carousel").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=e.querySelector(".vd-flow-track");if(!t)return;let n=Array.from(t.querySelectorAll(".vd-flow-slide"));if(n.length===0)return;let s=e.classList.contains("vd-flow-fade"),i=e.hasAttribute("data-vd-autoplay"),a=parseInt(e.getAttribute("data-vd-interval"),10)||5e3,o=e.getAttribute("data-vd-loop")!=="false",r={current:0,total:n.length,autoplayTimer:null,isFade:s,loop:o,isDragging:!1,startX:0,currentX:0,threshold:50},l=[];n.forEach((g,k)=>{g.setAttribute("role","group"),g.setAttribute("aria-roledescription","slide"),g.setAttribute("aria-label","Slide "+(k+1)+" of "+n.length),k===0&&g.classList.add("is-active")}),e.setAttribute("role","region"),e.setAttribute("aria-roledescription","carousel"),e.getAttribute("aria-label")||e.setAttribute("aria-label","Carousel");let d=document.createElement("div");d.setAttribute("aria-live","polite"),d.setAttribute("aria-atomic","true"),d.className="sr-only",d.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);",e.appendChild(d);let c=(g,k)=>{k===void 0&&(k=!0);let T=g;r.loop?T=(g%r.total+r.total)%r.total:T=Math.max(0,Math.min(g,r.total-1));let M=r.current;r.current=T,r.isFade?n.forEach((w,E)=>{w.classList.toggle("is-active",E===T)}):t.style.transform="translateX(-"+T*100+"%)",e.querySelectorAll(".vd-flow-indicator").forEach((w,E)=>{w.classList.toggle("is-active",E===T),w.setAttribute("aria-selected",E===T?"true":"false")}),n.forEach((w,E)=>{w.setAttribute("aria-hidden",E!==T?"true":"false")}),k&&(d.textContent="Slide "+(T+1)+" of "+r.total),e.dispatchEvent(new CustomEvent("flow:change",{detail:{current:T,previous:M,total:r.total}}))},u=()=>c(r.current+1),h=()=>c(r.current-1),p=e.querySelector(".vd-flow-prev"),v=e.querySelector(".vd-flow-next");if(p){let g=()=>h();p.addEventListener("click",g),l.push(()=>p.removeEventListener("click",g))}if(v){let g=()=>u();v.addEventListener("click",g),l.push(()=>v.removeEventListener("click",g))}e.querySelectorAll(".vd-flow-indicator").forEach((g,k)=>{g.setAttribute("role","tab"),g.setAttribute("aria-selected",k===0?"true":"false"),g.setAttribute("aria-label","Go to slide "+(k+1));let T=()=>c(k);g.addEventListener("click",T),l.push(()=>g.removeEventListener("click",T))});let C=g=>{g.key==="ArrowLeft"&&(h(),g.preventDefault()),g.key==="ArrowRight"&&(u(),g.preventDefault())};e.setAttribute("tabindex","0"),e.addEventListener("keydown",C),l.push(()=>e.removeEventListener("keydown",C));let L=g=>{r.isDragging=!0,r.startX=g.clientX||g.touches&&g.touches[0].clientX||0,r.currentX=r.startX,e.classList.add("is-dragging")},P=g=>{r.isDragging&&(r.currentX=g.clientX||g.touches&&g.touches[0].clientX||0)},x=()=>{if(!r.isDragging)return;r.isDragging=!1,e.classList.remove("is-dragging");let g=r.startX-r.currentX;Math.abs(g)>r.threshold&&(g>0?u():h())};e.addEventListener("mousedown",L),e.addEventListener("mousemove",P),e.addEventListener("mouseup",x),e.addEventListener("mouseleave",x),e.addEventListener("touchstart",L,{passive:!0}),e.addEventListener("touchmove",P,{passive:!0}),e.addEventListener("touchend",x),l.push(()=>e.removeEventListener("mousedown",L),()=>e.removeEventListener("mousemove",P),()=>e.removeEventListener("mouseup",x),()=>e.removeEventListener("mouseleave",x),()=>e.removeEventListener("touchstart",L),()=>e.removeEventListener("touchmove",P),()=>e.removeEventListener("touchend",x));let D=()=>{V(),r.autoplayTimer=setInterval(u,a)},V=()=>{r.autoplayTimer&&(clearInterval(r.autoplayTimer),r.autoplayTimer=null)};if(i){D();let g=()=>V(),k=()=>D();e.addEventListener("mouseenter",g),e.addEventListener("mouseleave",k),e.addEventListener("focusin",g),e.addEventListener("focusout",k),l.push(()=>e.removeEventListener("mouseenter",g),()=>e.removeEventListener("mouseleave",k),()=>e.removeEventListener("focusin",g),()=>e.removeEventListener("focusout",k),()=>V())}c(0,!1),this.instances.set(e,{cleanup:l,goTo:c,next:u,prev:h,getState:()=>({...r})})},goTo:function(e,t){let n=this.instances.get(e);n&&n.goTo(t)},next:function(e){let t=this.instances.get(e);t&&t.next()},prev:function(e){let t=this.instances.get(e);t&&t.prev()},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("flow",m),window.VanduoFlow=m})();(function(){"use strict";let m={instances:new Map,_globalCleanups:[],init:function(){if(document.querySelectorAll("[data-vd-bubble], [data-vd-popover]").forEach(t=>{this.instances.has(t)||this.initInstance(t)}),this._globalCleanups.length===0){let t=s=>{this.instances.forEach((i,a)=>{!i.popover.contains(s.target)&&!a.contains(s.target)&&this.hide(a)})},n=s=>{s.key==="Escape"&&this.instances.forEach((i,a)=>this.hide(a))};document.addEventListener("click",t,!0),document.addEventListener("keydown",n),this._globalCleanups.push(()=>document.removeEventListener("click",t,!0),()=>document.removeEventListener("keydown",n))}},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-bubble-placement")||e.getAttribute("data-vd-popover-placement")||"bottom",s=document.createElement("div");s.className="vd-bubble-content",s.setAttribute("role","dialog"),s.setAttribute("aria-modal","false"),s.setAttribute("data-placement",n);let i=e.getAttribute("data-vd-bubble-title")||e.getAttribute("data-vd-popover-title"),a=e.getAttribute("data-vd-bubble")||e.getAttribute("data-vd-popover")||"",o=e.getAttribute("data-vd-bubble-html")||e.getAttribute("data-vd-popover-html");if(i){let c=document.createElement("div");c.className="vd-bubble-header";let u=document.createElement("span");u.textContent=i;let h=document.createElement("button");h.className="vd-bubble-close",h.setAttribute("aria-label","Close"),h.innerHTML="×",c.appendChild(u),c.appendChild(h),s.appendChild(c);let p=v=>{v.stopPropagation(),this.hide(e)};h.addEventListener("click",p),t.push(()=>h.removeEventListener("click",p))}let r=document.createElement("div");r.className="vd-bubble-body",o?typeof sanitizeHtml=="function"?r.innerHTML=sanitizeHtml(o):r.textContent=o:r.textContent=a,s.appendChild(r),document.body.appendChild(s);let l="vd-bubble-"+Math.random().toString(36).slice(2,9);s.id=l,e.setAttribute("aria-haspopup","dialog"),e.setAttribute("aria-expanded","false"),e.setAttribute("aria-controls",l);let d=c=>{c.stopPropagation(),s.classList.contains("is-visible")?this.hide(e):(this.hideAll(),this.show(e))};e.addEventListener("click",d),t.push(()=>e.removeEventListener("click",d)),this.instances.set(e,{popover:s,cleanup:t,placement:n})},position:function(e,t,n){let s=e.getBoundingClientRect(),i=t.getBoundingClientRect(),a=10,o,r;switch(n){case"top":o=s.top-i.height-a+window.scrollY,r=s.left+(s.width-i.width)/2+window.scrollX;break;case"left":o=s.top+(s.height-i.height)/2+window.scrollY,r=s.left-i.width-a+window.scrollX;break;case"right":o=s.top+(s.height-i.height)/2+window.scrollY,r=s.right+a+window.scrollX;break;default:o=s.bottom+a+window.scrollY,r=s.left+(s.width-i.width)/2+window.scrollX}r=Math.max(8,Math.min(r,window.innerWidth-i.width-8)),o=Math.max(8,o),t.style.top=o+"px",t.style.left=r+"px"},show:function(e){let t=this.instances.get(e);if(!t)return;let{popover:n,placement:s}=t;n.style.display="block",n.classList.add("is-visible"),e.setAttribute("aria-expanded","true"),requestAnimationFrame(()=>{this.position(e,n,s)}),e.dispatchEvent(new CustomEvent("bubble:show",{bubbles:!0}))},hide:function(e){let t=this.instances.get(e);t&&(t.popover.classList.remove("is-visible"),e.setAttribute("aria-expanded","false"),e.dispatchEvent(new CustomEvent("bubble:hide",{bubbles:!0})))},hideAll:function(){this.instances.forEach((e,t)=>this.hide(t))},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),t.popover.parentNode&&t.popover.parentNode.removeChild(t.popover),e.removeAttribute("aria-haspopup"),e.removeAttribute("aria-expanded"),e.removeAttribute("aria-controls"),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t)),this._globalCleanups.forEach(e=>e()),this._globalCleanups=[]}};typeof window.Vanduo<"u"&&window.Vanduo.register("bubble",m),window.VanduoBubble=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("[data-vd-waypoint-nav], [data-vd-scrollspy-nav]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=Array.from(e.querySelectorAll('a[href^="#"]'));if(t.length===0)return;let n=[],s=parseInt(e.getAttribute("data-vd-waypoint-offset")||"80",10),i=[];if(t.forEach(d=>{let c=d.getAttribute("href").slice(1),u=document.getElementById(c);u&&(u.setAttribute("data-vd-waypoint-section",""),i.push({id:c,link:d,section:u}))}),i.length===0)return;let a=new Set,o=d=>{t.forEach(u=>u.classList.remove("is-active"));let c=t.find(u=>u.getAttribute("href")==="#"+d);c&&(c.classList.add("is-active"),e.dispatchEvent(new CustomEvent("waypoint:change",{detail:{activeId:d,link:c}})))},r="-"+s+"px 0px -40% 0px",l=new IntersectionObserver(d=>{d.forEach(c=>{c.isIntersecting?a.add(c.target.id):a.delete(c.target.id)});for(let c=0;cl.observe(d.section)),t.forEach(d=>{let c=u=>{u.preventDefault();let h=d.getAttribute("href").slice(1),p=document.getElementById(h);p&&(p.scrollIntoView({behavior:"smooth"}),o(h))};d.addEventListener("click",c),n.push(()=>d.removeEventListener("click",c))}),n.push(()=>l.disconnect()),this.instances.set(e,{observer:l,cleanup:n,sections:i,setActive:o})},refresh:function(e){this.destroy(e),this.initInstance(e)},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("waypoint",m),window.VanduoWaypoint=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll(".vd-ripple, [data-vd-ripple]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=s=>{let i=e.getBoundingClientRect(),a=Math.max(i.width,i.height),o=(s.clientX||s.touches&&s.touches[0].clientX||i.left+i.width/2)-i.left-a/2,r=(s.clientY||s.touches&&s.touches[0].clientY||i.top+i.height/2)-i.top-a/2,l=document.createElement("span");l.className="vd-ripple-wave",l.style.width=a+"px",l.style.height=a+"px",l.style.left=o+"px",l.style.top=r+"px",e.appendChild(l),l.addEventListener("animationend",()=>{l.parentNode&&l.parentNode.removeChild(l)})};e.addEventListener("mousedown",n),e.addEventListener("touchstart",n,{passive:!0}),t.push(()=>e.removeEventListener("mousedown",n),()=>e.removeEventListener("touchstart",n)),this.instances.set(e,{cleanup:t})},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),e.querySelectorAll(".vd-ripple-wave").forEach(n=>n.remove()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("ripple",m),window.VanduoRipple=m})();(function(){"use strict";function m(n){if(!n||n===document.body)return!1;let s=window.getComputedStyle(n),i=s.overflowY,a=s.overflowX,o=/(auto|scroll|overlay)/.test(i)&&n.scrollHeight>n.clientHeight,r=/(auto|scroll|overlay)/.test(a)&&n.scrollWidth>n.clientWidth;return o||r}function e(n){let s=n.parentElement;for(;s&&s!==document.body&&s!==document.documentElement;){if(m(s))return s;s=s.parentElement}return null}let t={instances:new Map,init:function(){document.querySelectorAll(".vd-affix, .vd-sticky, [data-vd-affix]").forEach(s=>{this.instances.has(s)||this.initInstance(s)})},initInstance:function(n){let s=[],i=parseInt(n.getAttribute("data-vd-affix-offset")||"0",10),a=Number.isNaN(i)?0:i,o=e(n),r=!1,l=document.createElement("div");l.style.cssText="display:block;height:1px;margin-bottom:-1px;visibility:hidden;pointer-events:none;",n.parentNode.insertBefore(l,n),n.style.setProperty("--affix-top-offset",a+"px");function d(){r||(r=!0,n.classList.add("is-stuck"),n.dispatchEvent(new CustomEvent("affix:stuck",{bubbles:!0,detail:{offset:a,root:o||window}})))}function c(){r&&(r=!1,n.classList.remove("is-stuck"),n.dispatchEvent(new CustomEvent("affix:unstuck",{bubbles:!0,detail:{offset:a,root:o||window}})))}let u=new IntersectionObserver(function(h){h.forEach(p=>{p.isIntersecting?c():d()})},{root:o,rootMargin:"-"+a+"px 0px 0px 0px",threshold:0});u.observe(l),s.push(()=>u.disconnect(),()=>{l.parentNode&&l.parentNode.removeChild(l)},()=>{n.classList.remove("is-stuck"),n.style.removeProperty("--affix-top-offset")}),this.instances.set(n,{cleanup:s,observer:u,sentinel:l,scrollParent:o})},destroy:function(n){let s=this.instances.get(n);s&&(s.cleanup.forEach(i=>i()),n.classList.remove("is-stuck"),this.instances.delete(n))},destroyAll:function(){this.instances.forEach((n,s)=>this.destroy(s))}};typeof window.Vanduo<"u"&&window.Vanduo.register("affix",t),window.VanduoAffix=t})();(function(){"use strict";function m(t){let n=document.createElement("div");return n.textContent=t,n.innerHTML}let e={instances:new Map,init:function(){document.querySelectorAll("[data-vd-suggest], [data-vd-autocomplete]").forEach(n=>{this.instances.has(n)||this.initInstance(n)})},initInstance:function(t){let n=[],s=parseInt(t.getAttribute("data-vd-suggest-min-chars")||"1",10),i=t.getAttribute("data-vd-suggest-url")||"",a=t.getAttribute("data-vd-suggest")||t.getAttribute("data-vd-autocomplete")||"",o=[];try{o=JSON.parse(a)}catch{o=a.split(",").map(k=>k.trim()).filter(Boolean)}let r=t.closest(".vd-suggest-wrapper, .vd-autocomplete-wrapper");r||(r=document.createElement("div"),r.className="vd-suggest-wrapper",t.parentNode.insertBefore(r,t),r.appendChild(t));let l=document.createElement("ul");l.className="vd-suggest-list",l.setAttribute("role","listbox");let d="vd-suggest-"+Math.random().toString(36).slice(2,9);l.id=d,r.appendChild(l),t.setAttribute("role","combobox"),t.setAttribute("aria-autocomplete","list"),t.setAttribute("aria-expanded","false"),t.setAttribute("aria-controls",d),t.setAttribute("autocomplete","off");let c=-1,u=[],h=null,p=(g,k)=>{if(l.innerHTML="",u=g,c=-1,g.length===0){let T=document.createElement("li");T.className="vd-suggest-empty",T.textContent="No results",l.appendChild(T);return}g.forEach((T,M)=>{let f=document.createElement("li");f.className="vd-suggest-item",f.setAttribute("role","option"),f.id=d+"-item-"+M;let w=typeof T=="object"&&(T.label||T.text)||String(T);if(k){let E=m(w),I=new RegExp("("+k.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")+")","gi");f.innerHTML=E.replace(I,'$1')}else f.textContent=w;f.addEventListener("click",()=>C(M)),l.appendChild(f)})},v=()=>{l.classList.add("is-open"),t.setAttribute("aria-expanded","true")},y=()=>{l.classList.remove("is-open"),t.setAttribute("aria-expanded","false"),c=-1,t.removeAttribute("aria-activedescendant")},C=g=>{let k=u[g],T=typeof k=="object"&&(k.value||k.label)||String(k);t.value=T,y(),t.dispatchEvent(new CustomEvent("suggest:select",{detail:{value:T,item:k,index:g},bubbles:!0}))},L=g=>{let k=l.querySelectorAll(".vd-suggest-item");k.forEach(T=>T.classList.remove("is-highlighted")),g>=0&&g{if(g.length0,v()},x=()=>{clearTimeout(h),h=setTimeout(()=>P(t.value),200)},D=g=>{if(!l.classList.contains("is-open")){g.key==="ArrowDown"&&(P(t.value),g.preventDefault());return}let k=u.length;switch(g.key){case"ArrowDown":g.preventDefault(),L(c0?c-1:k-1);break;case"Enter":g.preventDefault(),c>=0&&C(c);break;case"Escape":y();break}},V=()=>{setTimeout(y,200)};t.addEventListener("input",x),t.addEventListener("keydown",D),t.addEventListener("blur",V),t.addEventListener("focus",()=>{t.value.length>=s&&P(t.value)}),n.push(()=>t.removeEventListener("input",x),()=>t.removeEventListener("keydown",D),()=>t.removeEventListener("blur",V),()=>clearTimeout(h),()=>{l.parentNode&&l.parentNode.removeChild(l)}),this.instances.set(t,{cleanup:n,list:l,close:y})},destroy:function(t){let n=this.instances.get(t);n&&(n.cleanup.forEach(s=>s()),this.instances.delete(t))},destroyAll:function(){this.instances.forEach((t,n)=>this.destroy(n))}};typeof window.Vanduo<"u"&&window.Vanduo.register("suggest",e),window.VanduoSuggest=e})();(function(){"use strict";let m={instances:new Map,rules:{required:e=>e.trim().length>0,email:e=>/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e),url:e=>{try{return new URL(e),!0}catch{return!1}},number:e=>!isNaN(parseFloat(e))&&isFinite(e),min:(e,t)=>e.length>=parseInt(t,10),max:(e,t)=>e.length<=parseInt(t,10),minVal:(e,t)=>parseFloat(e)>=parseFloat(t),maxVal:(e,t)=>parseFloat(e)<=parseFloat(t),pattern:(e,t)=>{try{return t.length>100?!1:new RegExp(t).test(e)}catch{return!1}},match:(e,t)=>{try{let n=typeof CSS<"u"&&CSS.escape?CSS.escape(t):t,s=document.querySelector('[name="'+n+'"]');return s?e===s.value:!1}catch{return!1}}},messages:{required:"This field is required",email:"Please enter a valid email address",url:"Please enter a valid URL",number:"Please enter a valid number",min:"Minimum {0} characters required",max:"Maximum {0} characters allowed",minVal:"Value must be at least {0}",maxVal:"Value must be at most {0}",pattern:"Invalid format",match:"Fields do not match"},init:function(){document.querySelectorAll("[data-vd-validate], .vd-validate").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-validate-mode")||"blur",s=e.querySelectorAll("[data-vd-rules]"),i=r=>{let d=(r.getAttribute("data-vd-rules")||"").split("|").map(h=>h.trim()).filter(Boolean),c=r.value,u=[];for(let h of d){let[p,...v]=h.split(":"),y=v.join(":"),C=this.rules[p];if(C&&!C(c,y)){let P=r.getAttribute("data-vd-msg-"+p)||this.messages[p]||"Invalid";y&&(P=P.replace("{0}",y)),u.push(P);break}}return this.setFieldState(r,u),u.length===0},a=()=>{let r=!0;return s.forEach(l=>{i(l)||(r=!1)}),r};s.forEach(r=>{if(n==="input"||n==="blur"){let l=n==="input"?"input":"blur",d=()=>i(r);if(r.addEventListener(l,d),t.push(()=>r.removeEventListener(l,d)),n==="blur"){let c=()=>{(r.classList.contains("is-invalid")||r.classList.contains("is-valid"))&&i(r)};r.addEventListener("input",c),t.push(()=>r.removeEventListener("input",c))}}});let o=r=>{let l=a();if(!l){r.preventDefault(),r.stopPropagation();let d=e.querySelector(".is-invalid");d&&d.focus()}e.dispatchEvent(new CustomEvent("validate:submit",{detail:{valid:l},bubbles:!0}))};e.addEventListener("submit",o),t.push(()=>e.removeEventListener("submit",o)),this.instances.set(e,{cleanup:t,validateAll:a,validateField:i})},setFieldState:function(e,t){let n=e.closest(".vd-form-group")||e.parentElement,s=n.querySelector(".vd-validate-error");e.classList.remove("is-valid","is-invalid"),t.length>0?(e.classList.add("is-invalid"),e.setAttribute("aria-invalid","true"),s||(s=document.createElement("div"),s.className="vd-validate-error",s.id="vd-err-"+Math.random().toString(36).slice(2,9),s.setAttribute("role","alert"),n.appendChild(s)),s.textContent=t[0],s.style.display="",e.setAttribute("aria-describedby",s.id)):e.value.trim()?(e.classList.add("is-valid"),e.removeAttribute("aria-invalid"),s&&(s.style.display="none")):(e.removeAttribute("aria-invalid"),s&&(s.style.display="none"))},validateForm:function(e){let t=this.instances.get(e);return t?t.validateAll():!1},addRule:function(e,t,n){this.rules[e]=t,n&&(this.messages[e]=n)},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("validate",m),window.VanduoValidate=m})();(function(){"use strict";let m=["Su","Mo","Tu","We","Th","Fr","Sa"],e=["January","February","March","April","May","June","July","August","September","October","November","December"],t={instances:new Map,init:function(){document.querySelectorAll("[data-vd-datepicker]").forEach(s=>{this.instances.has(s)||this.initInstance(s)})},initInstance:function(n){let s=[],i=n.getAttribute("data-vd-datepicker-format")||"yyyy-mm-dd",a=n.getAttribute("data-vd-datepicker-min"),o=n.getAttribute("data-vd-datepicker-max"),r=a?new Date(a):null,l=o?new Date(o):null,d=new Date,c=d.getFullYear(),u=d.getMonth(),h=null,p="days";if(n.value){let f=new Date(n.value);isNaN(f.getTime())||(h=f,c=f.getFullYear(),u=f.getMonth())}let v=document.createElement("div");v.className="vd-datepicker-popup",v.setAttribute("role","dialog"),v.setAttribute("aria-label","Choose date");let y=document.createElement("div");y.className="vd-suggest-wrapper",y.style.position="relative",y.style.display="inline-block",n.parentNode.insertBefore(y,n),y.appendChild(n),y.appendChild(v);let C=f=>{let w=f.getFullYear(),E=String(f.getMonth()+1).padStart(2,"0"),I=String(f.getDate()).padStart(2,"0");return i.replace("yyyy",w).replace("mm",E).replace("dd",I)},L=f=>!!(r&&fl),P=(f,w)=>f&&w&&f.getFullYear()===w.getFullYear()&&f.getMonth()===w.getMonth()&&f.getDate()===w.getDate(),x=()=>{v.innerHTML="";let f=document.createElement("div");f.className="vd-datepicker-header";let w=document.createElement("button");w.type="button",w.className="vd-datepicker-prev",w.innerHTML="‹",w.setAttribute("aria-label","Previous");let E=document.createElement("button");E.type="button",E.className="vd-datepicker-next",E.innerHTML="›",E.setAttribute("aria-label","Next");let I=document.createElement("span");if(I.className="vd-datepicker-title",p==="days")I.textContent=e[u]+" "+c,I.addEventListener("click",()=>{p="months",x()}),w.addEventListener("click",()=>{u--,u<0&&(u=11,c--),x()}),E.addEventListener("click",()=>{u++,u>11&&(u=0,c++),x()});else if(p==="months")I.textContent=String(c),I.addEventListener("click",()=>{p="years",x()}),w.addEventListener("click",()=>{c--,x()}),E.addEventListener("click",()=>{c++,x()});else{let O=Math.floor(c/10)*10;I.textContent=O+" - "+(O+9),w.addEventListener("click",()=>{c-=10,x()}),E.addEventListener("click",()=>{c+=10,x()})}if(f.appendChild(w),f.appendChild(I),f.appendChild(E),v.appendChild(f),p==="days"){let O=document.createElement("div");O.className="vd-datepicker-weekdays",m.forEach(F=>{let U=document.createElement("span");U.textContent=F,O.appendChild(U)}),v.appendChild(O);let H=document.createElement("div");H.className="vd-datepicker-days";let z=new Date(c,u,1).getDay(),R=new Date(c,u+1,0).getDate(),j=new Date(c,u,0).getDate();for(let F=z-1;F>=0;F--){let U=D(j-F,!0);H.appendChild(U)}for(let F=1;F<=R;F++){let U=new Date(c,u,F),b=D(F,!1,U);H.appendChild(b)}let G=z+R,Z=G%7===0?0:7-G%7;for(let F=1;F<=Z;F++){let U=D(F,!0);H.appendChild(U)}v.appendChild(H)}else if(p==="months"){let O=document.createElement("div");O.className="vd-datepicker-months",e.forEach((H,z)=>{let R=document.createElement("button");R.type="button",R.className="vd-datepicker-month-btn",R.textContent=H.slice(0,3),h&&h.getFullYear()===c&&h.getMonth()===z&&R.classList.add("is-selected"),R.addEventListener("click",()=>{u=z,p="days",x()}),O.appendChild(R)}),v.appendChild(O)}else{let O=document.createElement("div");O.className="vd-datepicker-years";let H=Math.floor(c/10)*10;for(let z=H-1;z<=H+10;z++){let R=document.createElement("button");R.type="button",R.className="vd-datepicker-year-btn",R.textContent=z,h&&h.getFullYear()===z&&R.classList.add("is-selected"),(zH+9)&&(R.style.opacity="0.4"),R.addEventListener("click",()=>{c=z,p="months",x()}),O.appendChild(R)}v.appendChild(O)}},D=(f,w,E)=>{let I=document.createElement("button");return I.type="button",I.className="vd-datepicker-day",I.textContent=f,w?(I.classList.add("is-outside"),I.tabIndex=-1,I):(E&&P(E,d)&&I.classList.add("is-today"),E&&P(E,h)&&I.classList.add("is-selected"),E&&L(E)?(I.classList.add("is-disabled"),I):(E&&I.addEventListener("click",()=>{h=E,c=E.getFullYear(),u=E.getMonth(),n.value=C(E),g(),n.dispatchEvent(new CustomEvent("datepicker:select",{detail:{date:E,formatted:n.value},bubbles:!0})),n.dispatchEvent(new Event("change",{bubbles:!0}))}),I))},V=()=>{x(),v.classList.add("is-open"),n.setAttribute("aria-expanded","true")},g=()=>{v.classList.remove("is-open"),n.setAttribute("aria-expanded","false"),p="days"},k=()=>V(),T=f=>{y.contains(f.target)||g()},M=f=>{f.key==="Escape"&&g()};n.addEventListener("focus",k),document.addEventListener("click",T,!0),document.addEventListener("keydown",M),n.setAttribute("aria-haspopup","dialog"),n.setAttribute("aria-expanded","false"),n.setAttribute("autocomplete","off"),s.push(()=>n.removeEventListener("focus",k),()=>document.removeEventListener("click",T,!0),()=>document.removeEventListener("keydown",M)),this.instances.set(n,{cleanup:s,open:V,close:g,popup:v})},destroy:function(n){let s=this.instances.get(n);s&&(s.cleanup.forEach(i=>i()),this.instances.delete(n))},destroyAll:function(){this.instances.forEach((n,s)=>this.destroy(s))}};typeof window.Vanduo<"u"&&window.Vanduo.register("datepicker",t),window.VanduoDatepicker=t})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("[data-vd-timepicker]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-timepicker-format")==="24h",s=parseInt(e.getAttribute("data-vd-timepicker-step")||"30",10),i=e.closest(".vd-suggest-wrapper");i||(i=document.createElement("div"),i.style.position="relative",i.style.display="inline-block",e.parentNode.insertBefore(i,e),i.appendChild(e));let a=document.createElement("div");a.className="vd-timepicker-popup",a.setAttribute("role","listbox"),i.appendChild(a);let o=[];for(let p=0;p<24;p++)for(let v=0;v<60;v+=s){let y=String(p).padStart(2,"0"),C=String(v).padStart(2,"0");if(n)o.push({display:y+":"+C,value:y+":"+C});else{let L=p<12?"AM":"PM",x=(p===0?12:p>12?p-12:p)+":"+C+" "+L;o.push({display:x,value:y+":"+C})}}let r=()=>{a.innerHTML="",o.forEach(p=>{let v=document.createElement("div");v.className="vd-timepicker-item",v.setAttribute("role","option"),v.textContent=p.display,(e.value===p.value||e.value===p.display)&&v.classList.add("is-selected"),v.addEventListener("click",()=>{e.value=p.display,a.querySelectorAll(".vd-timepicker-item").forEach(y=>y.classList.remove("is-selected")),v.classList.add("is-selected"),d(),e.dispatchEvent(new CustomEvent("timepicker:select",{detail:{display:p.display,value:p.value},bubbles:!0})),e.dispatchEvent(new Event("change",{bubbles:!0}))}),a.appendChild(v)})},l=()=>{r(),a.classList.add("is-open"),e.setAttribute("aria-expanded","true");let p=a.querySelector(".is-selected");p&&p.scrollIntoView({block:"center"})},d=()=>{a.classList.remove("is-open"),e.setAttribute("aria-expanded","false")},c=()=>l(),u=p=>{i.contains(p.target)||d()},h=p=>{p.key==="Escape"&&d()};e.addEventListener("focus",c),document.addEventListener("click",u,!0),document.addEventListener("keydown",h),e.setAttribute("aria-haspopup","listbox"),e.setAttribute("aria-expanded","false"),e.setAttribute("autocomplete","off"),e.readOnly=!0,t.push(()=>e.removeEventListener("focus",c),()=>document.removeEventListener("click",u,!0),()=>document.removeEventListener("keydown",h)),this.instances.set(e,{cleanup:t,open:l,close:d})},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("timepicker",m),window.VanduoTimepicker=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll(".vd-stepper").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=Array.from(e.querySelectorAll(".vd-stepper-item")),s=e.classList.contains("vd-stepper-clickable"),i=n.findIndex(o=>o.classList.contains("is-active"));i===-1&&(i=0);let a=o=>{if(o<0||o>=n.length)return;let r=i;i=o,n.forEach((l,d)=>{l.classList.remove("is-active","is-completed"),d{let l=()=>a(r);o.addEventListener("click",l),t.push(()=>o.removeEventListener("click",l))}),a(i),this.instances.set(e,{cleanup:t,setStep:a,next:()=>a(i+1),prev:()=>a(i-1),getCurrent:()=>i})},setStep:function(e,t){let n=this.instances.get(e);n&&n.setStep(t)},next:function(e){let t=this.instances.get(e);t&&t.next()},prev:function(e){let t=this.instances.get(e);t&&t.prev()},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("stepper",m),window.VanduoStepper=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("[data-vd-rating]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=parseInt(e.getAttribute("data-vd-rating-max")||"5",10),s=parseFloat(e.getAttribute("data-vd-rating-value")||"0"),i=e.classList.contains("vd-rating-readonly")||e.hasAttribute("data-vd-rating-readonly"),a=s;e.classList.add("vd-rating"),e.setAttribute("role","radiogroup"),e.setAttribute("aria-label",e.getAttribute("aria-label")||"Rating"),e.innerHTML="";let o=[];for(let d=1;d<=n;d++){let c=document.createElement("button");c.type="button",c.className="vd-rating-star",c.setAttribute("role","radio"),c.setAttribute("aria-label",d+" star"+(d>1?"s":"")),c.setAttribute("aria-checked",d<=a?"true":"false"),i&&(c.tabIndex=-1),o.push(c),e.appendChild(c)}let r=document.createElement("span");r.className="vd-rating-value",r.textContent=a>0?a.toString():"",e.appendChild(r);let l=d=>{o.forEach((c,u)=>{c.classList.remove("is-active","is-half");let h=u+1;h<=Math.floor(d)?c.classList.add("is-active"):h-.5<=d&&c.classList.add("is-half"),c.setAttribute("aria-checked",h<=d?"true":"false")}),r.textContent=d>0?d.toString():""};if(l(a),!i){o.forEach((c,u)=>{let h=()=>{o.forEach((y,C)=>{y.classList.toggle("is-hovered",C<=u)})},p=()=>{o.forEach(y=>y.classList.remove("is-hovered"))},v=()=>{a=u+1,e.setAttribute("data-vd-rating-value",a),l(a),e.dispatchEvent(new CustomEvent("rating:change",{detail:{value:a,max:n},bubbles:!0}))};c.addEventListener("mouseenter",h),c.addEventListener("mouseleave",p),c.addEventListener("click",v),t.push(()=>c.removeEventListener("mouseenter",h),()=>c.removeEventListener("mouseleave",p),()=>c.removeEventListener("click",v))});let d=c=>{c.key==="ArrowRight"||c.key==="ArrowUp"?(c.preventDefault(),a1&&(a--,l(a),o[a-1].focus(),e.dispatchEvent(new CustomEvent("rating:change",{detail:{value:a,max:n},bubbles:!0}))))};e.addEventListener("keydown",d),t.push(()=>e.removeEventListener("keydown",d))}this.instances.set(e,{cleanup:t,getValue:()=>a,setValue:d=>{a=d,l(d)}})},getValue:function(e){let t=this.instances.get(e);return t?t.getValue():0},setValue:function(e,t){let n=this.instances.get(e);n&&n.setValue(t)},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("rating",m),window.VanduoRating=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("[data-vd-transfer]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[];e.classList.add("vd-transfer");let n,s;try{n=JSON.parse(e.getAttribute("data-vd-transfer")||"[]").map((h,p)=>({id:h.id||"item-"+p,label:h.label||h.text||String(h),selected:!1}))}catch{n=[]}s=[];let i=new Set,a=new Set,o=()=>{e.innerHTML="";let u=r("Source",n,i,"source"),h=document.createElement("div");h.className="vd-transfer-actions";let p=document.createElement("button");p.type="button",p.className="vd-transfer-btn",p.innerHTML="›",p.setAttribute("aria-label","Move to target"),p.disabled=i.size===0,p.addEventListener("click",()=>l());let v=document.createElement("button");v.type="button",v.className="vd-transfer-btn",v.innerHTML="‹",v.setAttribute("aria-label","Move to source"),v.disabled=a.size===0,v.addEventListener("click",()=>d()),h.appendChild(p),h.appendChild(v);let y=r("Target",s,a,"target");e.appendChild(u),e.appendChild(h),e.appendChild(y)},r=(u,h,p,v)=>{let y=document.createElement("div");y.className="vd-transfer-panel";let C=document.createElement("div");C.className="vd-transfer-header";let L=document.createElement("span");L.textContent=u;let P=document.createElement("span");P.className="vd-transfer-count",P.textContent=p.size+"/"+h.length,C.appendChild(L),C.appendChild(P),y.appendChild(C);let x=document.createElement("div");x.className="vd-transfer-search";let D=document.createElement("input");D.type="text",D.placeholder="Search...",D.setAttribute("aria-label","Search "+u.toLowerCase()),x.appendChild(D),y.appendChild(x);let V=document.createElement("ul");V.className="vd-transfer-list",V.setAttribute("role","listbox");let g=k=>{V.innerHTML="",(k?h.filter(M=>(M.label||M.text||String(M)).toLowerCase().includes(k.toLowerCase())):h).forEach(M=>{let f=document.createElement("li");f.className="vd-transfer-item",f.setAttribute("role","option"),p.has(M.id)&&f.classList.add("is-selected");let w=document.createElement("input");w.type="checkbox",w.checked=p.has(M.id),w.setAttribute("aria-label",M.label);let E=document.createElement("span");E.textContent=M.label,f.addEventListener("click",()=>{p.has(M.id)?p.delete(M.id):p.add(M.id),o()}),f.appendChild(w),f.appendChild(E),V.appendChild(f)})};return D.addEventListener("input",()=>g(D.value)),g(""),y.appendChild(V),y},l=()=>{let u=n.filter(h=>i.has(h.id));n=n.filter(h=>!i.has(h.id)),s=s.concat(u),i.clear(),o(),c()},d=()=>{let u=s.filter(h=>a.has(h.id));s=s.filter(h=>!a.has(h.id)),n=n.concat(u),a.clear(),o(),c()},c=()=>{e.dispatchEvent(new CustomEvent("transfer:change",{detail:{source:n.map(u=>u.id),target:s.map(u=>u.id)},bubbles:!0}))};o(),this.instances.set(e,{cleanup:t,getTarget:()=>s.map(u=>u.id),getSource:()=>n.map(u=>u.id)})},getSelected:function(e){let t=this.instances.get(e);return t?t.getTarget():[]},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),e.innerHTML="",this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("transfer",m),window.VanduoTransfer=m})();(function(){"use strict";let m={instances:new Map,init:function(){document.querySelectorAll("[data-vd-tree]").forEach(t=>{this.instances.has(t)||this.initInstance(t)})},initInstance:function(e){let t=[],n=e.getAttribute("data-vd-tree-cascade")!=="false",s;try{s=JSON.parse(e.getAttribute("data-vd-tree")||"[]")}catch{s=[]}e.classList.add("vd-tree"),e.setAttribute("role","tree");let i=(r,l)=>{l.innerHTML="",r.forEach(d=>{let c=document.createElement("li");c.className="vd-tree-node",c.setAttribute("role","treeitem"),c.setAttribute("aria-expanded",d.open?"true":"false"),d.open&&c.classList.add("is-open");let u=document.createElement("div");if(u.className="vd-tree-node-content",d.children&&d.children.length>0){let p=document.createElement("button");p.type="button",p.className="vd-tree-toggle",p.setAttribute("aria-label","Toggle"),p.addEventListener("click",v=>{v.stopPropagation(),d.open=!d.open,c.classList.toggle("is-open"),c.setAttribute("aria-expanded",d.open?"true":"false")}),u.appendChild(p)}else{let p=document.createElement("span");p.className="vd-tree-toggle-placeholder",u.appendChild(p)}if(e.hasAttribute("data-vd-tree-checkbox")){let p=document.createElement("input");p.type="checkbox",p.className="vd-tree-checkbox",p.checked=!!d.checked,p.setAttribute("aria-label",d.label),p.addEventListener("change",v=>{v.stopPropagation(),d.checked=p.checked,n&&d.children&&(a(d.children,p.checked),i(s,e)),e.dispatchEvent(new CustomEvent("tree:check",{detail:{id:d.id,checked:p.checked,label:d.label},bubbles:!0}))}),u.appendChild(p)}if(d.icon){let p=document.createElement("span");p.className="vd-tree-icon "+d.icon,u.appendChild(p)}let h=document.createElement("span");if(h.className="vd-tree-label",h.textContent=d.label||"",u.appendChild(h),c.appendChild(u),d.children&&d.children.length>0){let p=document.createElement("ul");p.className="vd-tree-children",p.setAttribute("role","group"),i(d.children,p),c.appendChild(p)}l.appendChild(c)})},a=(r,l)=>{r.forEach(d=>{d.checked=l,d.children&&a(d.children,l)})},o=r=>{let l=document.activeElement;if(!e.contains(l))return;let d=Array.from(e.querySelectorAll(".vd-tree-node-content")),c=d.indexOf(l.closest(".vd-tree-node-content"));if(c!==-1)switch(r.key){case"ArrowDown":if(r.preventDefault(),c0){let u=d[c-1].querySelector(".vd-tree-toggle, .vd-tree-label");u&&u.focus()}break}};e.addEventListener("keydown",o),t.push(()=>e.removeEventListener("keydown",o)),i(s,e),this.instances.set(e,{cleanup:t,getData:()=>s,getChecked:()=>{let r=[],l=d=>{d.forEach(c=>{c.checked&&r.push(c.id||c.label),c.children&&l(c.children)})};return l(s),r}})},getChecked:function(e){let t=this.instances.get(e);return t?t.getChecked():[]},destroy:function(e){let t=this.instances.get(e);t&&(t.cleanup.forEach(n=>n()),e.innerHTML="",this.instances.delete(e))},destroyAll:function(){this.instances.forEach((e,t)=>this.destroy(t))}};typeof window.Vanduo<"u"&&window.Vanduo.register("tree",m),window.VanduoTree=m})();(function(){"use strict";let m={_active:!1,_steps:[],_currentStep:0,_elements:{},_cleanup:[],_boundTriggers:new WeakMap,_triggerElement:null,init:function(){document.querySelectorAll("[data-vd-spotlight]").forEach(t=>{if(this._boundTriggers.has(t))return;let n=s=>{s.preventDefault();let i=this._parseSteps(t.getAttribute("data-vd-spotlight"));i.length!==0&&this.start(i,{trigger:t})};t.addEventListener("click",n),this._boundTriggers.set(t,n)})},_parseSteps:function(e){if(typeof e!="string"||e.trim()==="")return[];try{let t=JSON.parse(e);return this._normalizeSteps(t)}catch(t){return console.error("VanduoSpotlight: invalid data-vd-spotlight payload.",t),[]}},_normalizeStep:function(e){if(!e||typeof e!="object")return null;let t=e.target,n=typeof t=="string"&&t.trim()!=="",s=typeof Element<"u"&&t instanceof Element;if(!n&&!s)return null;let i=typeof e.title=="string"?e.title:"",a=typeof e.description=="string"?e.description:typeof e.content=="string"?e.content:"";return{target:t,title:i,description:a}},_normalizeSteps:function(e){return Array.isArray(e)?e.map(t=>this._normalizeStep(t)).filter(Boolean):[]},start:function(e,t){this._active&&this.stop();let n=this._normalizeSteps(e);if(n.length===0)return;let s=t||{};this._steps=n,this._currentStep=0,this._active=!0,this._triggerElement=s.trigger||(document.activeElement instanceof HTMLElement?document.activeElement:null);let i=document.createElement("div");i.className="vd-spotlight-overlay",i.setAttribute("aria-hidden","true"),document.body.appendChild(i);let a=document.createElement("div");a.className="vd-spotlight-tooltip",a.setAttribute("role","dialog"),a.setAttribute("aria-modal","true"),a.tabIndex=-1,document.body.appendChild(a),this._elements={overlay:i,tooltip:a};let o=r=>{r.key==="Escape"&&this.stop()};document.addEventListener("keydown",o),this._cleanup.push(()=>document.removeEventListener("keydown",o)),i.addEventListener("click",()=>this.stop()),this._showStep(this._currentStep)},_showStep:function(e){let t=this._steps[e];if(!t)return;let n=typeof t.target=="string"?document.querySelector(t.target):t.target,{tooltip:s}=this._elements;document.querySelectorAll(".vd-spotlight-target").forEach(d=>{d.classList.remove("vd-spotlight-target")}),n&&(n.classList.add("vd-spotlight-target"),n.scrollIntoView({behavior:"smooth",block:"center"}));let i=this._steps.length;if(s.innerHTML="",s.removeAttribute("aria-labelledby"),s.removeAttribute("aria-describedby"),t.title){let d=document.createElement("h4");d.className="vd-spotlight-title",d.id="vd-spotlight-title-"+e+"-"+Date.now(),d.textContent=t.title,s.appendChild(d),s.setAttribute("aria-labelledby",d.id)}if(t.description){let d=document.createElement("p");d.className="vd-spotlight-description",d.id="vd-spotlight-description-"+e+"-"+Date.now(),d.textContent=t.description,s.appendChild(d),s.setAttribute("aria-describedby",d.id)}let a=document.createElement("div");a.className="vd-spotlight-footer",a.setAttribute("aria-label","Step "+(e+1)+" of "+i);let o=document.createElement("span");o.className="vd-spotlight-counter",o.textContent=e+1+" / "+i;let r=document.createElement("div");if(r.className="vd-spotlight-actions",e>0){let d=document.createElement("button");d.type="button",d.className="vd-spotlight-btn",d.textContent="Back",d.addEventListener("click",()=>this.prev()),r.appendChild(d)}let l=document.createElement("button");if(l.type="button",l.className="vd-spotlight-btn",l.textContent="Skip",l.addEventListener("click",()=>this.stop()),r.appendChild(l),ethis.next()),r.appendChild(d)}else{let d=document.createElement("button");d.type="button",d.className="vd-spotlight-btn vd-spotlight-btn-primary",d.textContent="Done",d.addEventListener("click",()=>this.stop()),r.appendChild(d)}a.appendChild(o),a.appendChild(r),s.appendChild(a),n&&requestAnimationFrame(()=>{let d=n.getBoundingClientRect(),c=s.getBoundingClientRect(),u=d.bottom+12+window.scrollY,h=d.left+(d.width-c.width)/2+window.scrollX;h=Math.max(8,Math.min(h,window.innerWidth-c.width-8)),u+c.height>window.innerHeight+window.scrollY&&(u=d.top-c.height-12+window.scrollY),s.style.top=u+"px",s.style.left=h+"px"}),document.dispatchEvent(new CustomEvent("spotlight:step",{detail:{index:e,step:e,total:i,data:t}}))},next:function(){this._currentStep0&&(this._currentStep--,this._showStep(this._currentStep))},stop:function(){if(!this._active)return;let e=this._steps.length,t={completedSteps:e===0?0:Math.min(this._currentStep+1,e),total:e,completed:e>0&&this._currentStep>=e-1};this._active=!1,document.querySelectorAll(".vd-spotlight-target").forEach(n=>{n.classList.remove("vd-spotlight-target")}),this._elements.overlay&&this._elements.overlay.parentNode&&this._elements.overlay.parentNode.removeChild(this._elements.overlay),this._elements.tooltip&&this._elements.tooltip.parentNode&&this._elements.tooltip.parentNode.removeChild(this._elements.tooltip),this._cleanup.forEach(n=>n()),this._cleanup=[],this._elements={},this._steps=[],this._currentStep=0,this._triggerElement&&this._triggerElement.isConnected&&typeof this._triggerElement.focus=="function"&&this._triggerElement.focus(),this._triggerElement=null,document.dispatchEvent(new CustomEvent("spotlight:end",{detail:t}))},destroyAll:function(){this.stop()}};typeof window.Vanduo<"u"&&window.Vanduo.register("spotlight",m),window.VanduoSpotlight=m})();(function(){"use strict";function m(i){let a=i.slice();for(let o=a.length-1;o>0;o--){let r=Math.floor(Math.random()*(o+1)),l=a[o];a[o]=a[r],a[r]=l}return a}function e(i){if(!isFinite(i)||i<0)return"0:00";let a=Math.floor(i/60),o=Math.floor(i%60);return a+":"+(o<10?"0":"")+o}function t(i){let a=parseFloat(i.min)||0,o=parseFloat(i.max)||1,l=((parseFloat(i.value)||0)-a)/(o-a)*100;i.style.setProperty("--fill",l+"%"),i.style.backgroundImage="linear-gradient(to right, var(--music-player-track-fill, currentColor) 0%, var(--music-player-track-fill, currentColor) "+l+"%, var(--music-player-track-bg, #ccc) "+l+"%, var(--music-player-track-bg, #ccc) 100%)"}function n(i){let a=document.createElement("i");return a.className="ph ph-"+i,a.setAttribute("aria-hidden","true"),a}let s={instances:new Map,defaults:{tracks:[],volume:.5,shuffle:!1,showProgress:!1,showPlaylist:!1,autoAdvance:!0},init:function(){document.querySelectorAll(".vd-music-player, [data-music-player]").forEach(i=>{if(this.instances.has(i))return;let a={},o=i.getAttribute("data-music-player-options");if(o)try{a=JSON.parse(o)}catch{}this.initPlayer(i,a)})},initPlayer:function(i,a){let o=Object.assign({},this.defaults,a||{}),l=(Array.isArray(o.tracks)?o.tracks:[]).filter(f=>f&&typeof f.url=="string"&&f.url.trim()),c={tracks:o.shuffle?m(l):l.slice(),originalTracks:l.slice(),currentIndex:0,isPlaying:!1,volume:Math.max(0,Math.min(1,o.volume)),shuffle:o.shuffle,showProgress:o.showProgress,showPlaylist:o.showPlaylist,autoAdvance:o.autoAdvance,audio:null},u=new Audio;u.volume=c.volume,u.preload="metadata",c.audio=u,this._buildDOM(i,c);let h={btnPlay:i.querySelector(".vd-music-player-btn-play"),btnPrev:i.querySelector(".vd-music-player-btn-prev"),btnNext:i.querySelector(".vd-music-player-btn-next"),btnShuffle:i.querySelector(".vd-music-player-btn-shuffle"),btnPlaylist:i.querySelector(".vd-music-player-btn-playlist"),trackName:i.querySelector(".vd-music-player-track-name"),volumeSlider:i.querySelector(".vd-music-player-volume-slider"),volumeIcon:i.querySelector(".vd-music-player-volume-icon"),progressBar:i.querySelector(".vd-music-player-progress-bar"),timeElapsed:i.querySelector(".vd-music-player-time-elapsed"),timeDuration:i.querySelector(".vd-music-player-time-duration"),playlistPanel:i.querySelector(".vd-music-player-playlist")},p=()=>{let f=h.btnPlay;f&&(f.innerHTML="",f.appendChild(n(c.isPlaying?"pause":"play")),f.setAttribute("aria-label",c.isPlaying?"Pause":"Play"),f.classList.toggle("is-active",c.isPlaying))},v=()=>{let f=h.trackName;if(!f)return;let w=c.tracks[c.currentIndex];w?(f.textContent=w.name||"Unknown Track",f.classList.remove("is-idle")):(f.textContent="No tracks loaded",f.classList.add("is-idle"))},y=()=>{let f=h.volumeIcon;if(!f)return;f.innerHTML="";let w=c.volume,E=w===0?"speaker-none":w<.5?"speaker-low":"speaker-high";f.appendChild(n(E))},C=()=>{let f=h.btnShuffle;f&&(f.classList.toggle("is-active",c.shuffle),f.setAttribute("aria-pressed",c.shuffle?"true":"false"))},L=()=>{let f=h.playlistPanel;f&&(f.innerHTML="",c.tracks.forEach((w,E)=>{let I=document.createElement("button");I.className="vd-music-player-playlist-item"+(E===c.currentIndex?" is-active":""),I.type="button",I.setAttribute("data-index",String(E)),I.setAttribute("aria-current",E===c.currentIndex?"true":"false");let O=document.createElement("span");O.className="vd-music-player-playlist-num",O.textContent=String(E+1);let H=document.createElement("span");H.className="vd-music-player-playlist-name",H.textContent=w.name||"Track "+(E+1),I.appendChild(O),I.appendChild(H),f.appendChild(I)}))},P=()=>{let f=h.progressBar;if(!f||!u.duration)return;let w=u.currentTime/u.duration*100;f.value=String(w),t(f),h.timeElapsed&&(h.timeElapsed.textContent=e(u.currentTime)),h.timeDuration&&(h.timeDuration.textContent=e(u.duration))},x=(f,w)=>{let E=c.tracks[f];E&&(c.currentIndex=f,u.src=E.url,v(),L(),h.progressBar&&(h.progressBar.value="0",t(h.progressBar)),h.timeElapsed&&(h.timeElapsed.textContent="0:00"),h.timeDuration&&(h.timeDuration.textContent="0:00"),i.dispatchEvent(new CustomEvent("musicplayer:trackchange",{bubbles:!0,detail:{index:f,name:E.name,url:E.url}})),w&&u.play().catch(()=>{}))},D=[],V=()=>{c.isPlaying=!0,p(),i.dispatchEvent(new CustomEvent("musicplayer:play",{bubbles:!0}))},g=()=>{c.isPlaying=!1,p(),i.dispatchEvent(new CustomEvent("musicplayer:pause",{bubbles:!0}))},k=()=>{if(c.autoAdvance&&c.tracks.length>1){let f=(c.currentIndex+1)%c.tracks.length;x(f,!0)}else c.isPlaying=!1,p(),i.dispatchEvent(new CustomEvent("musicplayer:ended",{bubbles:!0}))},T=()=>{c.showProgress&&P()},M=()=>{h.timeDuration&&(h.timeDuration.textContent=e(u.duration)),h.progressBar&&(h.progressBar.max="100",t(h.progressBar))};if(u.addEventListener("play",V),u.addEventListener("pause",g),u.addEventListener("ended",k),u.addEventListener("timeupdate",T),u.addEventListener("loadedmetadata",M),D.push(()=>{u.removeEventListener("play",V),u.removeEventListener("pause",g),u.removeEventListener("ended",k),u.removeEventListener("timeupdate",T),u.removeEventListener("loadedmetadata",M),u.pause(),u.src=""}),h.btnPlay){let f=()=>{!u.src&&c.tracks.length&&x(c.currentIndex,!1),c.isPlaying?u.pause():u.play().catch(()=>{})};h.btnPlay.addEventListener("click",f),D.push(()=>h.btnPlay.removeEventListener("click",f));let w=E=>{(E.key===" "||E.key==="Enter")&&(E.preventDefault(),f())};h.btnPlay.addEventListener("keydown",w),D.push(()=>h.btnPlay.removeEventListener("keydown",w))}if(h.btnPrev){let f=()=>{if(c.tracks.length)if(u.currentTime>3)u.currentTime=0;else{let w=c.currentIndex===0?c.tracks.length-1:c.currentIndex-1;x(w,c.isPlaying)}};h.btnPrev.addEventListener("click",f),D.push(()=>h.btnPrev.removeEventListener("click",f))}if(h.btnNext){let f=()=>{if(!c.tracks.length)return;let w=(c.currentIndex+1)%c.tracks.length;x(w,c.isPlaying)};h.btnNext.addEventListener("click",f),D.push(()=>h.btnNext.removeEventListener("click",f))}if(h.btnShuffle){let f=()=>{if(c.shuffle=!c.shuffle,c.shuffle){let w=c.tracks[c.currentIndex];c.tracks=m(c.tracks);let E=c.tracks.findIndex(I=>I===w);E>0&&(c.tracks.splice(E,1),c.tracks.unshift(w)),c.currentIndex=0}else{let w=c.tracks[c.currentIndex];c.tracks=c.originalTracks.slice(),c.currentIndex=c.tracks.findIndex(E=>E===w),c.currentIndex<0&&(c.currentIndex=0)}C(),L()};h.btnShuffle.addEventListener("click",f),D.push(()=>h.btnShuffle.removeEventListener("click",f))}if(h.btnPlaylist){let f=()=>{let w=h.playlistPanel;if(!w)return;let E=w.classList.toggle("is-open");h.btnPlaylist.classList.toggle("is-active",E),h.btnPlaylist.setAttribute("aria-expanded",E?"true":"false")};h.btnPlaylist.addEventListener("click",f),D.push(()=>h.btnPlaylist.removeEventListener("click",f))}if(h.volumeSlider){let f=w=>{let E=parseFloat(w.target.value);c.volume=E,u.volume=E,y(),t(h.volumeSlider),i.dispatchEvent(new CustomEvent("musicplayer:volumechange",{bubbles:!0,detail:{volume:E}}))};h.volumeSlider.addEventListener("input",f),D.push(()=>h.volumeSlider.removeEventListener("input",f)),t(h.volumeSlider)}if(h.progressBar){let f=w=>{if(!u.duration)return;let E=parseFloat(w.target.value);u.currentTime=E/100*u.duration,t(h.progressBar)};h.progressBar.addEventListener("input",f),D.push(()=>h.progressBar.removeEventListener("input",f))}if(h.playlistPanel){let f=w=>{let E=w.target.closest(".vd-music-player-playlist-item");if(!E)return;let I=parseInt(E.getAttribute("data-index"),10);isNaN(I)||x(I,!0)};h.playlistPanel.addEventListener("click",f),D.push(()=>h.playlistPanel.removeEventListener("click",f))}p(),v(),y(),o.showPlaylist&&L(),this.instances.set(i,{state:c,audio:u,refs:h,cleanup:D}),i.setAttribute("data-music-player-initialized","true")},_buildDOM:function(i,a){if(i.querySelector(".vd-music-player-controls"))return;i.setAttribute("role","region"),i.setAttribute("aria-label","Music Player"),a.showProgress&&i.classList.add("has-progress"),a.showPlaylist&&i.classList.add("has-playlist");let o=document.createElement("div");o.className="vd-music-player-info";let r=document.createElement("span");r.className="vd-music-player-icon",r.setAttribute("aria-hidden","true"),r.appendChild(n("music-note"));let l=document.createElement("span");l.className="vd-music-player-track-name",l.setAttribute("aria-live","polite"),l.setAttribute("aria-atomic","true"),o.appendChild(r),o.appendChild(l),i.appendChild(o);let d=document.createElement("div");d.className="vd-music-player-controls",d.setAttribute("role","group"),d.setAttribute("aria-label","Playback controls");let c=document.createElement("button");c.type="button",c.className="vd-music-player-btn vd-music-player-btn-prev",c.setAttribute("aria-label","Previous track"),c.appendChild(n("skip-back"));let u=document.createElement("button");u.type="button",u.className="vd-music-player-btn vd-music-player-btn-play",u.setAttribute("aria-label","Play"),u.appendChild(n("play"));let h=document.createElement("button");if(h.type="button",h.className="vd-music-player-btn vd-music-player-btn-next",h.setAttribute("aria-label","Next track"),h.appendChild(n("skip-forward")),d.appendChild(c),d.appendChild(u),d.appendChild(h),a.showPlaylist||a.shuffle!==void 0){let L=document.createElement("button");L.type="button",L.className="vd-music-player-btn vd-music-player-btn-shuffle",L.setAttribute("aria-label","Shuffle"),L.setAttribute("aria-pressed",a.shuffle?"true":"false"),L.appendChild(n("shuffle")),d.appendChild(L)}let p=document.createElement("span");p.className="vd-music-player-spacer",p.setAttribute("aria-hidden","true"),d.appendChild(p);let v=document.createElement("div");v.className="vd-music-player-volume";let y=document.createElement("span");y.className="vd-music-player-volume-icon",y.setAttribute("aria-hidden","true");let C=document.createElement("input");if(C.type="range",C.className="vd-music-player-volume-slider",C.min="0",C.max="1",C.step="0.01",C.value=String(a.volume),C.setAttribute("aria-label","Volume"),v.appendChild(y),v.appendChild(C),d.appendChild(v),a.showPlaylist){let L=document.createElement("button");L.type="button",L.className="vd-music-player-btn vd-music-player-btn-playlist",L.setAttribute("aria-label","Show playlist"),L.setAttribute("aria-expanded","false"),L.appendChild(n("playlist")),d.appendChild(L)}if(i.appendChild(d),a.showProgress){let L=document.createElement("div");L.className="vd-music-player-progress";let P=document.createElement("span");P.className="vd-music-player-time vd-music-player-time-elapsed",P.textContent="0:00",P.setAttribute("aria-hidden","true");let x=document.createElement("input");x.type="range",x.className="vd-music-player-progress-bar",x.min="0",x.max="100",x.step="0.1",x.value="0",x.setAttribute("aria-label","Seek");let D=document.createElement("span");D.className="vd-music-player-time vd-music-player-time-duration",D.textContent="0:00",D.setAttribute("aria-hidden","true"),L.appendChild(P),L.appendChild(x),L.appendChild(D),i.appendChild(L)}if(a.showPlaylist){let L=document.createElement("div");L.className="vd-music-player-playlist",L.setAttribute("aria-label","Playlist"),i.appendChild(L)}},play:function(i){let a=this.instances.get(i);a&&(!a.audio.src&&a.state.tracks.length&&(a.audio.src=a.state.tracks[a.state.currentIndex].url),a.audio.play().catch(()=>{}))},pause:function(i){let a=this.instances.get(i);a&&a.audio.pause()},toggle:function(i){let a=this.instances.get(i);a&&(a.state.isPlaying?this.pause(i):this.play(i))},next:function(i){let a=this.instances.get(i);if(!a||!a.state.tracks.length)return;let o=(a.state.currentIndex+1)%a.state.tracks.length;this._loadTrack(a,o,a.state.isPlaying)},previous:function(i){let a=this.instances.get(i);if(!a||!a.state.tracks.length)return;let o=a.state.tracks.length,r=(a.state.currentIndex-1+o)%o;this._loadTrack(a,r,a.state.isPlaying)},setVolume:function(i,a){let o=this.instances.get(i);if(!o)return;let r=Math.max(0,Math.min(1,a));o.state.volume=r,o.audio.volume=r,o.refs.volumeSlider&&(o.refs.volumeSlider.value=String(r),t(o.refs.volumeSlider)),i.dispatchEvent(new CustomEvent("musicplayer:volumechange",{bubbles:!0,detail:{volume:r}}))},setTrack:function(i,a){let o=this.instances.get(i);o&&this._loadTrack(o,a,o.state.isPlaying)},shuffle:function(i){let a=this.instances.get(i);!a||!a.refs.btnShuffle||a.refs.btnShuffle.click()},getState:function(i){let a=this.instances.get(i);if(!a)return null;let o=a.state;return{isPlaying:o.isPlaying,currentIndex:o.currentIndex,currentTrack:o.tracks[o.currentIndex]||null,volume:o.volume,shuffle:o.shuffle,tracks:o.tracks.slice()}},destroy:function(i){let a=this.instances.get(i);a&&(a.cleanup.forEach(o=>o()),this.instances.delete(i),i.removeAttribute("data-music-player-initialized"))},destroyAll:function(){this.instances.forEach((i,a)=>this.destroy(a))},_loadTrack:function(i,a,o){let r=i.state.tracks[a];if(!r)return;let l=this._containerOf(i);i.state.currentIndex=a,i.audio.src=r.url,i.refs.trackName&&(i.refs.trackName.textContent=r.name||"Unknown Track",i.refs.trackName.classList.remove("is-idle")),i.refs.playlistPanel&&i.refs.playlistPanel.querySelectorAll(".vd-music-player-playlist-item").forEach((d,c)=>{let u=c===a;d.classList.toggle("is-active",u),d.setAttribute("aria-current",u?"true":"false")}),i.refs.progressBar&&(i.refs.progressBar.value="0",t(i.refs.progressBar)),i.refs.timeElapsed&&(i.refs.timeElapsed.textContent="0:00"),i.refs.timeDuration&&(i.refs.timeDuration.textContent="0:00"),l&&l.dispatchEvent(new CustomEvent("musicplayer:trackchange",{bubbles:!0,detail:{index:a,name:r.name,url:r.url}})),o&&i.audio.play().catch(()=>{})},_containerOf:function(i){for(let[a,o]of this.instances)if(o===i)return a;return null}};typeof window.Vanduo<"u"&&window.Vanduo.register("musicPlayer",s),window.VanduoMusicPlayer=s})();var J=window.Vanduo;var Re=J;})(); //# sourceMappingURL=vanduo.min.js.map diff --git a/dist/vanduo.min.js.map b/dist/vanduo.min.js.map index 8f60505..b177d8f 100644 --- a/dist/vanduo.min.js.map +++ b/dist/vanduo.min.js.map @@ -1,7 +1,7 @@ { "version": 3, - "sources": ["../js/utils/lifecycle.js", "../js/vanduo.js", "../js/components/code-snippet.js", "../js/components/collapsible.js", "../js/components/dropdown.js", "../js/components/font-switcher.js", "../js/components/grid.js", "../js/components/image-box.js", "../js/components/modals.js", "../js/components/navbar.js", "../js/components/pagination.js", "../js/components/parallax.js", "../js/components/preloader.js", "../js/components/select.js", "../js/components/sidenav.js", "../js/components/tabs.js", "../js/components/theme-customizer.js", "../js/components/theme-switcher.js", "../js/components/toast.js", "../js/components/tooltips.js", "../js/components/doc-search.js", "../js/components/draggable.js", "../js/components/lazy-load.js", "../js/components/glass.js", "../js/components/flow.js", "../js/components/bubble.js", "../js/components/waypoint.js", "../js/components/ripple.js", "../js/components/affix.js", "../js/components/suggest.js", "../js/components/validate.js", "../js/components/datepicker.js", "../js/components/timepicker.js", "../js/components/stepper.js", "../js/components/rating.js", "../js/components/transfer.js", "../js/components/tree.js", "../js/components/spotlight.js", "../js/components/music-player.js", "../js/index.js"], - "sourcesContent": ["/**\n * Vanduo Framework - Lifecycle Manager\n * Central registry for component instances and cleanup\n * Prevents memory leaks in SPAs by tracking event listeners\n */\n\n(function() {\n 'use strict';\n\n /**\n * Lifecycle Manager\n * Simple registry that tracks component instances and their cleanup functions\n */\n const Lifecycle = {\n // Map of element -> { componentName, cleanupFunctions }\n instances: new Map(),\n\n /**\n * Register a component instance\n * @param {HTMLElement} element - The DOM element\n * @param {string} componentName - Name of the component\n * @param {Array} cleanupFns - Functions to call on destroy\n */\n register: function(element, componentName, cleanupFns = []) {\n if (this.instances.has(element)) {\n // Already registered, merge cleanup functions\n const existing = this.instances.get(element);\n existing.cleanup = existing.cleanup.concat(cleanupFns);\n return;\n }\n\n this.instances.set(element, {\n component: componentName,\n cleanup: cleanupFns,\n registeredAt: Date.now()\n });\n },\n\n /**\n * Unregister a single element and run its cleanup\n * @param {HTMLElement} element - The element to unregister\n */\n unregister: function(element) {\n const instance = this.instances.get(element);\n if (!instance) return;\n\n // Run all cleanup functions\n instance.cleanup.forEach(function(fn) {\n try {\n fn();\n } catch (e) {\n console.warn('[Vanduo Lifecycle] Cleanup error:', e);\n }\n });\n\n this.instances.delete(element);\n },\n\n /**\n * Destroy all instances of a specific component\n * @param {string} componentName - Optional component name filter\n */\n destroyAll: function(componentName) {\n const toRemove = [];\n\n this.instances.forEach(function(instance, element) {\n if (!componentName || instance.component === componentName) {\n toRemove.push(element);\n }\n });\n\n toRemove.forEach(function(element) {\n Lifecycle.unregister(element);\n });\n },\n\n /**\n * Destroy all instances within a specific container\n * Useful for SPAs when navigating between pages\n * @param {HTMLElement} container - Container element\n */\n destroyAllInContainer: function(container) {\n const toRemove = [];\n\n this.instances.forEach(function(instance, element) {\n if (container.contains(element)) {\n toRemove.push(element);\n }\n });\n\n toRemove.forEach(function(element) {\n Lifecycle.unregister(element);\n });\n },\n\n /**\n * Get all registered instances (for debugging)\n * @returns {Array} Array of instance info objects\n */\n getAll: function() {\n const result = [];\n this.instances.forEach(function(instance, element) {\n result.push({\n element: element,\n component: instance.component,\n registeredAt: instance.registeredAt\n });\n });\n return result;\n },\n\n /**\n * Check if an element is registered\n * @param {HTMLElement} element - The element to check\n * @returns {boolean}\n */\n has: function(element) {\n return this.instances.has(element);\n }\n };\n\n // Auto-cleanup on page unload\n window.addEventListener('beforeunload', function() {\n Lifecycle.destroyAll();\n });\n\n // Expose globally\n window.VanduoLifecycle = Lifecycle;\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('lifecycle', Lifecycle);\n }\n\n})();\n", "/**\n * Vanduo Framework - Main JavaScript File\n */\n\n(function () {\n 'use strict';\n\n const VANDUO_VERSION = typeof __VANDUO_VERSION__ !== 'undefined' ? __VANDUO_VERSION__ : '0.0.0-dev';\n\n /**\n * Vanduo Framework Object\n */\n const Vanduo = {\n version: VANDUO_VERSION,\n components: {},\n\n /**\n * Initialize framework\n * Call this after DOM is ready and all components are loaded\n */\n init: function () {\n // Initialize components when DOM is ready\n if (typeof ready !== 'undefined') {\n ready(() => {\n this.initComponents();\n });\n } else {\n // Fallback if helpers.js is not loaded\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => {\n this.initComponents();\n });\n } else {\n this.initComponents();\n }\n }\n },\n\n /**\n * Initialize all components\n */\n initComponents: function () {\n // Initialize all registered components\n Object.keys(this.components).forEach((name) => {\n const component = this.components[name];\n if (component.init && typeof component.init === 'function') {\n try {\n component.init();\n } catch (e) {\n console.warn('[Vanduo] Failed to initialize component \"' + name + '\":', e);\n }\n }\n });\n\n console.log('Vanduo Framework v' + this.version + ' initialized');\n },\n\n /**\n * Register a component\n * @param {string} name - Component name\n * @param {Object} component - Component object with init method\n */\n register: function (name, component) {\n this.components[name] = component;\n // Note: Components are NOT auto-initialized on registration\n // Call Vanduo.init() explicitly after all components are registered\n },\n\n /**\n * Re-initialize a component (useful after dynamic DOM changes)\n * @param {string} name - Component name\n */\n reinit: function (name) {\n const component = this.components[name];\n if (component && component.init && typeof component.init === 'function') {\n try {\n component.init();\n } catch (e) {\n console.warn('[Vanduo] Failed to reinitialize component \"' + name + '\":', e);\n }\n }\n },\n\n /**\n * Destroy all component instances and clean up event listeners\n * Uses lifecycle manager for memory leak prevention\n */\n destroyAll: function () {\n // First, destroy components that have their own destroyAll\n const names = Object.keys(this.components);\n for (let i = 0; i < names.length; i++) {\n const component = this.components[names[i]];\n if (component && component.destroyAll && typeof component.destroyAll === 'function') {\n try {\n component.destroyAll();\n } catch (e) {\n console.warn('[Vanduo] Failed to destroy component \"' + names[i] + '\":', e);\n }\n }\n }\n\n // Then, cleanup any remaining registered elements via lifecycle manager\n if (typeof window.VanduoLifecycle !== 'undefined') {\n window.VanduoLifecycle.destroyAll();\n }\n },\n\n /**\n * Get component instance\n * @param {string} name - Component name\n * @returns {Object|null}\n */\n getComponent: function (name) {\n return this.components[name] || null;\n }\n };\n\n // Expose to global scope\n window.Vanduo = Vanduo;\n\n})();\n", "/**\n * Vanduo Framework - Code Snippet Component\n * Copyable code blocks with tabs, syntax highlighting, and HTML extraction\n */\n\n(function () {\n 'use strict';\n\n /**\n * Code Snippet Component\n */\n const CodeSnippet = {\n _snippetIdCounter: 0,\n\n getSnippetInstanceId: function (snippet) {\n if (snippet.dataset.codeSnippetId) {\n return snippet.dataset.codeSnippetId;\n }\n\n const baseId = (snippet.id || '').trim();\n if (baseId) {\n snippet.dataset.codeSnippetId = `snippet-${baseId}`;\n return snippet.dataset.codeSnippetId;\n }\n\n this._snippetIdCounter += 1;\n snippet.dataset.codeSnippetId = `snippet-auto-${this._snippetIdCounter}`;\n return snippet.dataset.codeSnippetId;\n },\n\n addListener: function (snippet, target, event, handler) {\n if (!target) return;\n target.addEventListener(event, handler);\n if (!snippet._codeSnippetCleanup) {\n snippet._codeSnippetCleanup = [];\n }\n snippet._codeSnippetCleanup.push(() => target.removeEventListener(event, handler));\n },\n\n /**\n * Initialize all code snippet components\n */\n init: function () {\n const snippets = document.querySelectorAll('.vd-code-snippet');\n\n snippets.forEach(snippet => {\n if (!snippet.dataset.initialized) {\n this.initSnippet(snippet);\n }\n });\n },\n\n /**\n * Initialize a single code snippet\n * @param {HTMLElement} snippet - Code snippet container element\n */\n initSnippet: function (snippet) {\n snippet.dataset.initialized = 'true';\n snippet._codeSnippetCleanup = [];\n\n // Handle collapsible toggle\n const toggle = snippet.querySelector('.vd-code-snippet-toggle');\n const content = snippet.querySelector('.vd-code-snippet-content');\n\n if (toggle && content) {\n this.initCollapsible(snippet, toggle, content);\n }\n\n // Handle tabs\n const tabs = snippet.querySelectorAll('.vd-code-snippet-tab');\n const panes = snippet.querySelectorAll('.vd-code-snippet-pane');\n\n if (tabs.length > 0) {\n this.initTabs(snippet, tabs, panes);\n }\n\n // Handle copy button\n const copyBtn = snippet.querySelector('.vd-code-snippet-copy');\n if (copyBtn) {\n this.initCopyButton(snippet, copyBtn);\n }\n\n // Handle HTML extraction\n const extractPanes = snippet.querySelectorAll('[data-extract]');\n extractPanes.forEach(pane => {\n this.extractHtml(pane);\n });\n\n // Handle line numbers\n const lineNumberPanes = snippet.querySelectorAll('.has-line-numbers');\n lineNumberPanes.forEach(pane => {\n this.addLineNumbers(pane);\n });\n },\n\n /**\n * Initialize collapsible functionality\n * @param {HTMLElement} snippet - Code snippet container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} content - Collapsible content\n */\n initCollapsible: function (snippet, toggle, content) {\n // Set initial state\n const isExpanded = snippet.dataset.expanded === 'true';\n toggle.setAttribute('aria-expanded', isExpanded);\n content.dataset.visible = isExpanded;\n\n this.addListener(snippet, toggle, 'click', () => {\n const expanded = snippet.dataset.expanded === 'true';\n snippet.dataset.expanded = !expanded;\n toggle.setAttribute('aria-expanded', !expanded);\n content.dataset.visible = !expanded;\n\n // Extract HTML on first expand if needed\n if (!expanded) {\n const extractPanes = content.querySelectorAll('[data-extract]:not([data-extracted])');\n extractPanes.forEach(pane => {\n this.extractHtml(pane);\n });\n }\n\n // Dispatch event\n const event = new CustomEvent('codesnippet:toggle', {\n bubbles: true,\n detail: { snippet, expanded: !expanded }\n });\n snippet.dispatchEvent(event);\n });\n },\n\n /**\n * Initialize tab functionality\n * @param {HTMLElement} snippet - Code snippet container\n * @param {NodeList} tabs - Tab buttons\n * @param {NodeList} panes - Code panes\n */\n initTabs: function (snippet, tabs, panes) {\n const snippetId = this.getSnippetInstanceId(snippet);\n\n // Set up ARIA attributes\n const tabList = snippet.querySelector('.vd-code-snippet-tabs');\n if (tabList) {\n tabList.setAttribute('role', 'tablist');\n }\n\n tabs.forEach((tab, index) => {\n const lang = tab.dataset.lang;\n const isActive = tab.classList.contains('is-active');\n\n // Set ARIA attributes\n tab.setAttribute('role', 'tab');\n tab.setAttribute('aria-selected', isActive);\n tab.setAttribute('tabindex', isActive ? '0' : '-1');\n tab.id = tab.id || `code-tab-${snippetId}-${lang || 'tab'}-${index}`;\n\n // Find corresponding pane\n const pane = snippet.querySelector(`.vd-code-snippet-pane[data-lang=\"${lang}\"]`);\n if (pane) {\n pane.id = pane.id || `code-pane-${snippetId}-${lang || 'pane'}-${index}`;\n pane.setAttribute('role', 'tabpanel');\n tab.setAttribute('aria-controls', pane.id);\n pane.setAttribute('aria-labelledby', tab.id);\n }\n\n // Click handler\n this.addListener(snippet, tab, 'click', () => {\n this.switchTab(snippet, tab, tabs, panes);\n });\n\n // Keyboard navigation\n this.addListener(snippet, tab, 'keydown', (e) => {\n this.handleTabKeydown(e, snippet, tabs, panes);\n });\n });\n },\n\n /**\n * Switch to a specific tab\n * @param {HTMLElement} snippet - Code snippet container\n * @param {HTMLElement} activeTab - Tab to activate\n * @param {NodeList} tabs - All tab buttons\n * @param {NodeList} panes - All code panes\n */\n switchTab: function (snippet, activeTab, tabs, panes) {\n const lang = activeTab.dataset.lang;\n\n // Deactivate all tabs\n tabs.forEach(tab => {\n tab.classList.remove('is-active');\n tab.setAttribute('aria-selected', 'false');\n tab.setAttribute('tabindex', '-1');\n });\n\n // Hide all panes\n panes.forEach(pane => {\n pane.classList.remove('is-active');\n });\n\n // Activate selected tab\n activeTab.classList.add('is-active');\n activeTab.setAttribute('aria-selected', 'true');\n activeTab.setAttribute('tabindex', '0');\n\n // Show corresponding pane\n const activePane = snippet.querySelector(`.vd-code-snippet-pane[data-lang=\"${lang}\"]`);\n if (activePane) {\n activePane.classList.add('is-active');\n }\n\n // Dispatch event\n const event = new CustomEvent('codesnippet:tabchange', {\n bubbles: true,\n detail: { snippet, tab: activeTab, lang }\n });\n snippet.dispatchEvent(event);\n },\n\n /**\n * Handle keyboard navigation for tabs\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} snippet - Code snippet container\n * @param {NodeList} tabs - All tab buttons\n * @param {NodeList} panes - All code panes\n */\n handleTabKeydown: function (e, snippet, tabs, panes) {\n const tabArray = Array.from(tabs);\n const currentIndex = tabArray.indexOf(e.target);\n let newIndex;\n\n switch (e.key) {\n case 'ArrowLeft':\n e.preventDefault();\n newIndex = currentIndex > 0 ? currentIndex - 1 : tabArray.length - 1;\n break;\n case 'ArrowRight':\n e.preventDefault();\n newIndex = currentIndex < tabArray.length - 1 ? currentIndex + 1 : 0;\n break;\n case 'Home':\n e.preventDefault();\n newIndex = 0;\n break;\n case 'End':\n e.preventDefault();\n newIndex = tabArray.length - 1;\n break;\n default:\n return;\n }\n\n if (newIndex !== currentIndex) {\n tabArray[newIndex].focus();\n this.switchTab(snippet, tabArray[newIndex], tabs, panes);\n }\n },\n\n /**\n * Initialize copy button\n * @param {HTMLElement} snippet - Code snippet container\n * @param {HTMLElement} copyBtn - Copy button element\n */\n initCopyButton: function (snippet, copyBtn) {\n this.addListener(snippet, copyBtn, 'click', async () => {\n await this.copyCode(snippet, copyBtn);\n });\n },\n\n /**\n * Copy code to clipboard\n * @param {HTMLElement} snippet - Code snippet container\n * @param {HTMLElement} copyBtn - Copy button element\n */\n copyCode: async function (snippet, copyBtn) {\n const activePane = snippet.querySelector('.vd-code-snippet-pane.is-active') ||\n snippet.querySelector('.vd-code-snippet-pane');\n\n if (!activePane) {\n console.warn('CodeSnippet: No code pane found');\n return;\n }\n\n const codeElement = activePane.querySelector('code') || activePane;\n const code = codeElement.textContent;\n\n let copySuccess;\n try {\n await navigator.clipboard.writeText(code);\n copySuccess = true;\n } catch (_err) {\n // Fallback for older browsers\n copySuccess = this.fallbackCopy(code);\n }\n this.showCopyFeedback(copyBtn, copySuccess);\n\n // Dispatch event\n const event = new CustomEvent('codesnippet:copy', {\n bubbles: true,\n detail: { snippet, code, success: copySuccess }\n });\n snippet.dispatchEvent(event);\n },\n\n /**\n * Fallback copy method for older browsers\n * @param {string} text - Text to copy\n * @returns {boolean} Success status\n */\n fallbackCopy: function (text) {\n const textarea = document.createElement('textarea');\n textarea.value = text;\n textarea.style.position = 'fixed';\n textarea.style.left = '-9999px';\n textarea.style.top = '-9999px';\n document.body.appendChild(textarea);\n textarea.focus();\n textarea.select();\n\n let success = false;\n try {\n success = document.execCommand('copy');\n } catch (err) {\n console.warn('CodeSnippet: Fallback copy failed', err);\n }\n\n document.body.removeChild(textarea);\n return success;\n },\n\n /**\n * Show copy feedback\n * @param {HTMLElement} copyBtn - Copy button element\n * @param {boolean} success - Whether copy was successful\n */\n showCopyFeedback: function (copyBtn, success) {\n if (success) {\n copyBtn.classList.add('is-copied');\n\n // Announce to screen readers\n const announcement = document.createElement('span');\n announcement.setAttribute('role', 'status');\n announcement.setAttribute('aria-live', 'polite');\n announcement.className = 'sr-only';\n announcement.textContent = 'Code copied to clipboard';\n copyBtn.appendChild(announcement);\n\n setTimeout(() => {\n copyBtn.classList.remove('is-copied');\n if (announcement.parentNode) {\n announcement.parentNode.removeChild(announcement);\n }\n }, 2000);\n }\n },\n\n /**\n * Extract HTML from a demo element\n * @param {HTMLElement} pane - Code pane with data-extract attribute\n */\n extractHtml: function (pane) {\n const selector = pane.dataset.extract;\n if (!selector) return;\n\n const source = document.querySelector(selector);\n if (!source) {\n console.warn(`CodeSnippet: Source element not found: ${selector}`);\n return;\n }\n\n // Get inner HTML\n let html = source.innerHTML;\n\n // Format the HTML\n html = this.formatHtml(html);\n\n // Escape for display\n html = this.escapeHtml(html);\n\n // Apply syntax highlighting\n html = this.highlightHtml(html);\n\n // Set content via DOM API to avoid string-based HTML insertion\n const codeEl = document.createElement('code');\n codeEl.innerHTML = html;\n pane.replaceChildren(codeEl);\n pane.dataset.extracted = 'true';\n },\n\n /**\n * Format HTML with proper indentation\n * @param {string} html - Raw HTML string\n * @returns {string} Formatted HTML\n */\n formatHtml: function (html) {\n // Remove leading/trailing whitespace\n html = html.trim();\n\n // Simple formatting: normalize whitespace\n // Split by tags, then rejoin with proper indentation\n const lines = html.split('\\n');\n let indent = 0;\n const indentSize = 2;\n const formattedLines = [];\n\n lines.forEach(line => {\n line = line.trim();\n if (!line) return;\n\n // Check for closing tags at start\n if (line.match(/^<\\/\\w/)) {\n indent = Math.max(0, indent - indentSize);\n }\n\n formattedLines.push(' '.repeat(indent) + line);\n\n // Check for opening tags (not self-closing)\n // Use short fixed-length regex + indexOf to prevent ReDoS\n const hasOpenTag = /<[a-zA-Z]/.test(line);\n const isSelfClosing = line.includes('/>');\n if (hasOpenTag && !isSelfClosing) {\n // Don't indent for void elements\n if (!line.match(/<(br|hr|img|input|meta|link|area|base|col|embed|param|source|track|wbr)/i)) {\n // Only indent if not also closing on same line\n if (!line.match(/<\\/\\w+>$/)) {\n indent += indentSize;\n }\n }\n }\n });\n\n return formattedLines.join('\\n');\n },\n\n /**\n * Escape HTML entities for display\n * @param {string} html - HTML string\n * @returns {string} Escaped HTML\n */\n escapeHtml: function (html) {\n const div = document.createElement('div');\n div.textContent = html;\n return div.innerHTML;\n },\n\n /**\n * Apply syntax highlighting to HTML\n * @param {string} html - Escaped HTML string\n * @returns {string} HTML with syntax highlighting spans\n */\n highlightHtml: function (html) {\n // Highlight HTML tags\n html = html.replace(/(<\\/?)([\\w-]+)/g, '$1$2');\n\n // Highlight attributes\n html = html.replace(/([\\w-]+)(=)("|')/g, '$1$2$3');\n\n // Highlight attribute values (strings)\n html = html.replace(/("|')([^&]*)("|')/g, '$1$2$3');\n\n // Highlight comments\n html = html.replace(/(<!--)(.*?)(-->)/g, '$1$2$3');\n\n return html;\n },\n\n /**\n * Apply syntax highlighting to CSS\n * @param {string} css - CSS string\n * @returns {string} CSS with syntax highlighting spans\n */\n highlightCss: function (css) {\n // Highlight selectors \u2014 use non-backtracking bounded pattern\n css = css.replace(/([.#]?[a-zA-Z][a-zA-Z0-9_-]{0,200})(\\s*\\{)/g, '$1$2');\n\n // Highlight properties \u2014 use non-backtracking bounded pattern\n css = css.replace(/([a-zA-Z][a-zA-Z0-9_-]{0,200})(\\s*:)/g, '$1$2');\n\n // Highlight values\n css = css.replace(/:\\s*([^;{}]+)(;)/g, ': $1$2');\n\n // Highlight units\n css = css.replace(/(\\d+)(px|rem|em|%|vh|vw|deg|s|ms)/g, '$1$2');\n\n // Highlight comments\n css = css.replace(/(\\/\\*[\\s\\S]*?\\*\\/)/g, '$1');\n\n return css;\n },\n\n /**\n * Apply syntax highlighting to JavaScript\n * @param {string} js - JavaScript string\n * @returns {string} JS with syntax highlighting spans\n */\n highlightJs: function (js) {\n // Highlight keywords\n const keywords = ['const', 'let', 'var', 'function', 'return', 'if', 'else', 'for', 'while', 'switch', 'case', 'break', 'continue', 'new', 'this', 'class', 'extends', 'import', 'export', 'default', 'async', 'await', 'try', 'catch', 'throw', 'typeof', 'instanceof'];\n keywords.forEach(kw => {\n const regex = new RegExp(`\\\\b(${kw})\\\\b`, 'g');\n js = js.replace(regex, '$1');\n });\n\n // Highlight strings (limit to 10 000 chars to prevent polynomial backtracking)\n js = js.replace(/('(?:[^'\\\\]|\\\\.){0,10000}'|\"(?:[^\"\\\\]|\\\\.){0,10000}\"|`(?:[^`\\\\]|\\\\.){0,10000}`)/g, '$1');\n\n // Highlight numbers\n js = js.replace(/\\b(\\d+\\.?\\d*)\\b/g, '$1');\n\n // Highlight function calls\n js = js.replace(/\\b([\\w]+)(\\s*\\()/g, '$1$2');\n\n // Highlight comments\n js = js.replace(/(\\/\\/.*$)/gm, '$1');\n js = js.replace(/(\\/\\*[\\s\\S]*?\\*\\/)/g, '$1');\n\n return js;\n },\n\n /**\n * Add line numbers to a code pane\n * @param {HTMLElement} pane - Code pane element\n */\n addLineNumbers: function (pane) {\n const code = pane.querySelector('code');\n if (!code) return;\n\n const lines = code.innerHTML.split('\\n');\n const lineCount = lines.length;\n\n // Create line numbers container\n const lineNumbers = document.createElement('div');\n lineNumbers.className = 'vd-code-snippet-line-numbers';\n lineNumbers.setAttribute('aria-hidden', 'true');\n\n for (let i = 1; i <= lineCount; i++) {\n const lineNum = document.createElement('span');\n lineNum.textContent = i;\n lineNumbers.appendChild(lineNum);\n }\n\n // Wrap code content\n const codeWrapper = document.createElement('div');\n codeWrapper.className = 'vd-code-snippet-code';\n codeWrapper.appendChild(code.cloneNode(true));\n\n // Replace code with new structure\n code.parentNode.removeChild(code);\n pane.appendChild(lineNumbers);\n pane.appendChild(codeWrapper);\n },\n\n /**\n * Programmatically expand a code snippet\n * @param {string|HTMLElement} snippet - Snippet selector or element\n */\n expand: function (snippet) {\n if (typeof snippet === 'string') {\n snippet = document.querySelector(snippet);\n }\n if (!snippet) return;\n\n snippet.dataset.expanded = 'true';\n const toggle = snippet.querySelector('.vd-code-snippet-toggle');\n const content = snippet.querySelector('.vd-code-snippet-content');\n\n if (toggle) toggle.setAttribute('aria-expanded', 'true');\n if (content) content.dataset.visible = 'true';\n },\n\n /**\n * Programmatically collapse a code snippet\n * @param {string|HTMLElement} snippet - Snippet selector or element\n */\n collapse: function (snippet) {\n if (typeof snippet === 'string') {\n snippet = document.querySelector(snippet);\n }\n if (!snippet) return;\n\n snippet.dataset.expanded = 'false';\n const toggle = snippet.querySelector('.vd-code-snippet-toggle');\n const content = snippet.querySelector('.vd-code-snippet-content');\n\n if (toggle) toggle.setAttribute('aria-expanded', 'false');\n if (content) content.dataset.visible = 'false';\n },\n\n /**\n * Programmatically switch to a specific language tab\n * @param {string|HTMLElement} snippet - Snippet selector or element\n * @param {string} lang - Language to switch to (html, css, js)\n */\n showLang: function (snippet, lang) {\n if (typeof snippet === 'string') {\n snippet = document.querySelector(snippet);\n }\n if (!snippet) return;\n\n const tab = snippet.querySelector(`.vd-code-snippet-tab[data-lang=\"${lang}\"]`);\n const tabs = snippet.querySelectorAll('.vd-code-snippet-tab');\n const panes = snippet.querySelectorAll('.vd-code-snippet-pane');\n\n if (tab) {\n this.switchTab(snippet, tab, tabs, panes);\n }\n },\n\n /**\n * Destroy a code snippet instance and clean up listeners\n * @param {string|HTMLElement} snippet - Snippet selector or element\n */\n destroy: function (snippet) {\n if (typeof snippet === 'string') {\n snippet = document.querySelector(snippet);\n }\n if (!snippet) return;\n\n if (snippet._codeSnippetCleanup) {\n snippet._codeSnippetCleanup.forEach(fn => fn());\n delete snippet._codeSnippetCleanup;\n }\n\n delete snippet.dataset.initialized;\n },\n\n /**\n * Destroy all code snippet instances\n */\n destroyAll: function () {\n const snippets = document.querySelectorAll('.vd-code-snippet[data-initialized=\"true\"]');\n snippets.forEach(snippet => this.destroy(snippet));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('codeSnippet', CodeSnippet);\n }\n\n // Also expose globally for convenience\n window.CodeSnippet = CodeSnippet;\n\n})();\n", "/**\n * Vanduo Framework - Collapsible Component\n * JavaScript functionality for collapsible/accordion components\n */\n\n(function() {\n 'use strict';\n\n /**\n * Collapsible Component\n */\n const Collapsible = {\n // Store initialized containers and their cleanup functions\n instances: new Map(),\n\n /**\n * Initialize collapsible components\n */\n init: function() {\n const collapsibles = document.querySelectorAll('.vd-collapsible, .accordion');\n\n collapsibles.forEach(container => {\n if (this.instances.has(container)) {\n return;\n }\n this.initCollapsible(container);\n });\n },\n\n /**\n * Initialize a collapsible container\n * @param {HTMLElement} container - Collapsible container\n */\n initCollapsible: function(container) {\n const isAccordion = container.classList.contains('accordion');\n const items = container.querySelectorAll('.vd-collapsible-item, .accordion-item');\n const cleanupFunctions = [];\n\n items.forEach(item => {\n const header = item.querySelector('.vd-collapsible-header, .accordion-header');\n const body = item.querySelector('.vd-collapsible-body, .accordion-body');\n const trigger = item.querySelector('.vd-collapsible-trigger, .accordion-trigger') || header;\n\n if (!header || !body) {\n return;\n }\n\n // Set initial state\n if (item.classList.contains('is-open')) {\n this.openItem(item, body, false);\n } else {\n this.closeItem(item, body, false);\n }\n\n // Add click handler\n const clickHandler = (e) => {\n e.preventDefault();\n this.toggleItem(item, body, container, isAccordion);\n };\n trigger.addEventListener('click', clickHandler);\n cleanupFunctions.push(() => trigger.removeEventListener('click', clickHandler));\n });\n\n this.instances.set(container, { cleanup: cleanupFunctions });\n },\n \n /**\n * Toggle collapsible item\n * @param {HTMLElement} item - Collapsible item\n * @param {HTMLElement} body - Collapsible body\n * @param {HTMLElement} container - Collapsible container\n * @param {boolean} isAccordion - Whether in accordion mode\n */\n toggleItem: function(item, body, container, isAccordion) {\n const isOpen = item.classList.contains('is-open');\n \n if (isOpen) {\n this.closeItem(item, body);\n } else {\n // If accordion mode, close other open items\n if (isAccordion) {\n const otherOpenItems = container.querySelectorAll('.vd-collapsible-item.is-open, .accordion-item.is-open');\n otherOpenItems.forEach(otherItem => {\n if (otherItem !== item) {\n const otherBody = otherItem.querySelector('.vd-collapsible-body, .accordion-body');\n this.closeItem(otherItem, otherBody);\n }\n });\n }\n \n this.openItem(item, body);\n }\n },\n \n /**\n * Open collapsible item\n * @param {HTMLElement} item - Collapsible item\n * @param {HTMLElement} body - Collapsible body\n * @param {boolean} animate - Whether to animate\n */\n openItem: function(item, body, animate = true) {\n if (!animate) {\n body.style.transition = 'none';\n }\n \n item.classList.add('is-open');\n item.setAttribute('aria-expanded', 'true');\n \n // Set max-height to actual height\n const height = body.scrollHeight;\n body.style.maxHeight = `${height}px`;\n \n // Reset transition after a brief delay\n if (!animate) {\n setTimeout(() => {\n body.style.transition = '';\n }, 0);\n }\n \n // Dispatch event\n item.dispatchEvent(new CustomEvent('collapsible:open', { bubbles: true }));\n },\n \n /**\n * Close collapsible item\n * @param {HTMLElement} item - Collapsible item\n * @param {HTMLElement} body - Collapsible body\n * @param {boolean} animate - Whether to animate\n */\n closeItem: function(item, body, animate = true) {\n if (!animate) {\n body.style.transition = 'none';\n }\n \n item.classList.remove('is-open');\n item.setAttribute('aria-expanded', 'false');\n body.style.maxHeight = '0';\n \n // Reset transition after a brief delay\n if (!animate) {\n setTimeout(() => {\n body.style.transition = '';\n }, 0);\n }\n \n // Dispatch event\n item.dispatchEvent(new CustomEvent('collapsible:close', { bubbles: true }));\n },\n \n /**\n * Open item programmatically\n * @param {HTMLElement|string} item - Collapsible item or selector\n */\n open: function(item) {\n const el = typeof item === 'string' ? document.querySelector(item) : item;\n if (el) {\n const body = el.querySelector('.vd-collapsible-body, .accordion-body');\n if (body) {\n this.openItem(el, body);\n }\n }\n },\n \n /**\n * Close item programmatically\n * @param {HTMLElement|string} item - Collapsible item or selector\n */\n close: function(item) {\n const el = typeof item === 'string' ? document.querySelector(item) : item;\n if (el) {\n const body = el.querySelector('.vd-collapsible-body, .accordion-body');\n if (body) {\n this.closeItem(el, body);\n }\n }\n },\n \n /**\n * Toggle item programmatically\n * @param {HTMLElement|string} item - Collapsible item or selector\n */\n toggle: function(item) {\n const el = typeof item === 'string' ? document.querySelector(item) : item;\n if (el) {\n const body = el.querySelector('.vd-collapsible-body, .accordion-body');\n const container = el.closest('.vd-collapsible, .accordion');\n const isAccordion = container && container.classList.contains('accordion');\n\n if (body) {\n this.toggleItem(el, body, container, isAccordion);\n }\n }\n },\n\n /**\n * Destroy a collapsible instance and clean up event listeners\n * @param {HTMLElement} container - Collapsible container\n */\n destroy: function(container) {\n const instance = this.instances.get(container);\n if (!instance) return;\n\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(container);\n },\n\n /**\n * Destroy all collapsible instances\n */\n destroyAll: function() {\n this.instances.forEach((instance, container) => {\n this.destroy(container);\n });\n }\n };\n \n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('collapsible', Collapsible);\n }\n \n // Expose globally\n window.VanduoCollapsible = Collapsible;\n \n})();\n\n", "/**\n * Vanduo Framework - Dropdown Component\n * JavaScript functionality for dropdown menus\n */\n\n(function() {\n 'use strict';\n\n /**\n * Dropdown Component\n */\n const Dropdown = {\n // Store initialized dropdowns and their cleanup functions\n instances: new Map(),\n\n /**\n * Initialize dropdown components\n */\n init: function() {\n const dropdowns = document.querySelectorAll('.vd-dropdown');\n\n dropdowns.forEach(dropdown => {\n if (this.instances.has(dropdown)) {\n return;\n }\n this.initDropdown(dropdown);\n });\n },\n\n /**\n * Initialize a single dropdown\n * @param {HTMLElement} dropdown - Dropdown container\n */\n initDropdown: function(dropdown) {\n const toggle = dropdown.querySelector('.vd-dropdown-toggle');\n const menu = dropdown.querySelector('.vd-dropdown-menu');\n\n if (!toggle || !menu) {\n return;\n }\n\n const cleanupFunctions = [];\n\n // Set ARIA attributes\n toggle.setAttribute('aria-haspopup', 'true');\n toggle.setAttribute('aria-expanded', 'false');\n menu.setAttribute('role', 'menu');\n menu.setAttribute('aria-hidden', 'true');\n\n // Toggle on click\n const toggleClickHandler = (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggleDropdown(dropdown, toggle, menu);\n };\n toggle.addEventListener('click', toggleClickHandler);\n cleanupFunctions.push(() => toggle.removeEventListener('click', toggleClickHandler));\n\n // Close on outside click\n const documentClickHandler = (e) => {\n if (!dropdown.contains(e.target) && menu.classList.contains('is-open')) {\n this.closeDropdown(dropdown, toggle, menu);\n }\n };\n document.addEventListener('click', documentClickHandler);\n cleanupFunctions.push(() => document.removeEventListener('click', documentClickHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, dropdown, toggle, menu);\n };\n toggle.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => toggle.removeEventListener('keydown', keydownHandler));\n\n // Handle item clicks\n const items = menu.querySelectorAll('.vd-dropdown-item:not(.disabled):not(.is-disabled)');\n items.forEach(item => {\n const itemClickHandler = (e) => {\n e.preventDefault();\n this.selectItem(item, dropdown, toggle, menu);\n };\n item.addEventListener('click', itemClickHandler);\n cleanupFunctions.push(() => item.removeEventListener('click', itemClickHandler));\n\n const itemKeydownHandler = (e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.selectItem(item, dropdown, toggle, menu);\n }\n };\n item.addEventListener('keydown', itemKeydownHandler);\n cleanupFunctions.push(() => item.removeEventListener('keydown', itemKeydownHandler));\n });\n\n this.instances.set(dropdown, { toggle, menu, cleanup: cleanupFunctions, typeaheadBuffer: '', typeaheadTimer: null });\n },\n \n /**\n * Toggle dropdown\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Dropdown menu\n */\n toggleDropdown: function(dropdown, toggle, menu) {\n const isOpen = menu.classList.contains('is-open');\n \n if (isOpen) {\n this.closeDropdown(dropdown, toggle, menu);\n } else {\n this.openDropdown(dropdown, toggle, menu);\n }\n },\n \n /**\n * Open dropdown\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Dropdown menu\n */\n openDropdown: function(dropdown, toggle, menu) {\n // Close other open dropdowns\n const otherOpen = document.querySelectorAll('.vd-dropdown-menu.is-open');\n otherOpen.forEach(otherMenu => {\n if (otherMenu !== menu) {\n const otherDropdown = otherMenu.closest('.vd-dropdown');\n const otherToggle = otherDropdown.querySelector('.vd-dropdown-toggle');\n this.closeDropdown(otherDropdown, otherToggle, otherMenu);\n }\n });\n \n dropdown.classList.add('is-open');\n menu.classList.add('is-open');\n toggle.setAttribute('aria-expanded', 'true');\n menu.setAttribute('aria-hidden', 'false');\n \n // Position menu\n this.positionMenu(dropdown, menu);\n \n // Focus first item\n const firstItem = menu.querySelector('.vd-dropdown-item:not(.disabled):not(.is-disabled)');\n if (firstItem) {\n setTimeout(() => firstItem.focus(), 0);\n }\n },\n \n /**\n * Close dropdown\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Dropdown menu\n */\n closeDropdown: function(dropdown, toggle, menu) {\n dropdown.classList.remove('is-open');\n menu.classList.remove('is-open');\n toggle.setAttribute('aria-expanded', 'false');\n menu.setAttribute('aria-hidden', 'true');\n \n // Return focus to toggle\n toggle.focus();\n },\n \n /**\n * Position dropdown menu\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} menu - Dropdown menu\n */\n positionMenu: function(dropdown, menu) {\n const rect = dropdown.getBoundingClientRect();\n const menuRect = menu.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const padding = 8;\n \n // Check if menu overflows right\n if (rect.left + menuRect.width > viewportWidth - padding) {\n menu.classList.add('vd-dropdown-menu-end');\n menu.classList.remove('vd-dropdown-menu-start');\n }\n \n // Check if menu overflows bottom (for top positioning)\n if (menu.classList.contains('dropdown-menu-top')) {\n if (rect.top - menuRect.height < padding) {\n menu.classList.remove('vd-dropdown-menu-top');\n }\n } else {\n if (rect.bottom + menuRect.height > viewportHeight - padding) {\n menu.classList.add('vd-dropdown-menu-top');\n }\n }\n },\n \n /**\n * Handle keyboard navigation\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Dropdown menu\n */\n handleKeydown: function(e, dropdown, toggle, menu) {\n const isOpen = menu.classList.contains('is-open');\n const items = Array.from(menu.querySelectorAll('.vd-dropdown-item:not(.disabled):not(.is-disabled)'));\n const currentIndex = items.findIndex(item => item === document.activeElement);\n \n switch (e.key) {\n case 'Enter':\n case ' ':\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen) {\n this.openDropdown(dropdown, toggle, menu);\n } else if (e.key === 'ArrowDown') {\n const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n items[nextIndex].focus();\n }\n break;\n \n case 'ArrowUp':\n if (isOpen) {\n e.preventDefault();\n const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n items[prevIndex].focus();\n }\n break;\n \n case 'Escape':\n if (isOpen) {\n e.preventDefault();\n this.closeDropdown(dropdown, toggle, menu);\n }\n break;\n \n case 'Home':\n if (isOpen) {\n e.preventDefault();\n items[0].focus();\n }\n break;\n \n case 'End':\n if (isOpen) {\n e.preventDefault();\n items[items.length - 1].focus();\n }\n break;\n\n default:\n // Typeahead: jump to matching item when typing printable characters\n if (isOpen && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\n // Per-instance typeahead state to avoid cross-instance corruption\n const instance = this.instances.get(dropdown);\n if (!instance) break;\n clearTimeout(instance.typeaheadTimer);\n instance.typeaheadBuffer += e.key.toLowerCase();\n\n const match = items.find(item =>\n item.textContent.trim().toLowerCase().startsWith(instance.typeaheadBuffer)\n );\n if (match) {\n match.focus();\n }\n\n instance.typeaheadTimer = setTimeout(() => {\n instance.typeaheadBuffer = '';\n }, 500);\n }\n break;\n }\n },\n \n /**\n * Select dropdown item\n * @param {HTMLElement} item - Dropdown item\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Dropdown menu\n */\n selectItem: function(item, dropdown, toggle, menu) {\n // Remove active from all items\n menu.querySelectorAll('.vd-dropdown-item').forEach(i => {\n i.classList.remove('active', 'is-active');\n });\n \n // Add active to selected item\n item.classList.add('active', 'is-active');\n \n // Update toggle text if it's a button\n if (toggle.tagName === 'BUTTON' || toggle.classList.contains('btn')) {\n toggle.textContent = item.textContent.trim();\n }\n \n // Close dropdown\n this.closeDropdown(dropdown, toggle, menu);\n \n // Dispatch event\n item.dispatchEvent(new CustomEvent('dropdown:select', { \n bubbles: true,\n detail: { item, value: item.dataset.value || item.textContent }\n }));\n },\n \n /**\n * Open dropdown programmatically\n * @param {HTMLElement|string} dropdown - Dropdown container or selector\n */\n open: function(dropdown) {\n const el = typeof dropdown === 'string' ? document.querySelector(dropdown) : dropdown;\n if (el) {\n const toggle = el.querySelector('.vd-dropdown-toggle');\n const menu = el.querySelector('.vd-dropdown-menu');\n if (toggle && menu) {\n this.openDropdown(el, toggle, menu);\n }\n }\n },\n \n /**\n * Close dropdown programmatically\n * @param {HTMLElement|string} dropdown - Dropdown container or selector\n */\n close: function(dropdown) {\n const el = typeof dropdown === 'string' ? document.querySelector(dropdown) : dropdown;\n if (el) {\n const toggle = el.querySelector('.vd-dropdown-toggle');\n const menu = el.querySelector('.vd-dropdown-menu');\n if (toggle && menu) {\n this.closeDropdown(el, toggle, menu);\n }\n }\n },\n\n /**\n * Destroy a dropdown instance and clean up event listeners\n * @param {HTMLElement} dropdown - Dropdown element\n */\n destroy: function(dropdown) {\n const instance = this.instances.get(dropdown);\n if (!instance) return;\n\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(dropdown);\n },\n\n /**\n * Destroy all dropdown instances\n */\n destroyAll: function() {\n this.instances.forEach((instance, dropdown) => {\n this.destroy(dropdown);\n });\n }\n };\n \n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('dropdown', Dropdown);\n }\n \n // Expose globally\n window.VanduoDropdown = Dropdown;\n \n})();\n\n", "/**\n * Vanduo Framework - Font Switcher\n * Handles font selection and persistence for previewing different typefaces\n */\n\n(function() {\n 'use strict';\n\n const FontSwitcher = {\n STORAGE_KEY: 'vanduo-font-preference',\n isInitialized: false,\n\n // Available fonts configuration\n fonts: {\n 'system': {\n name: 'System Default',\n family: null // Uses CSS default\n },\n 'inter': {\n name: 'Inter',\n family: \"'Inter', sans-serif\"\n },\n 'source-sans': {\n name: 'Source Sans 3',\n family: \"'Source Sans 3', sans-serif\"\n },\n 'fira-sans': {\n name: 'Fira Sans',\n family: \"'Fira Sans', sans-serif\"\n },\n 'ibm-plex': {\n name: 'IBM Plex Sans',\n family: \"'IBM Plex Sans', sans-serif\"\n },\n 'jetbrains-mono': {\n name: 'JetBrains Mono',\n family: \"'JetBrains Mono', monospace\"\n },\n 'ubuntu': {\n name: 'Ubuntu',\n family: \"'Ubuntu', sans-serif\",\n category: 'sans-serif',\n description: 'Friendly, humanist sans-serif'\n },\n 'open-sans': {\n name: 'Open Sans',\n family: \"'Open Sans', sans-serif\",\n category: 'sans-serif',\n description: 'Neutral, highly readable'\n },\n 'rubik': {\n name: 'Rubik',\n family: \"'Rubik', sans-serif\",\n category: 'sans-serif',\n description: 'Modern, geometric'\n },\n 'titillium-web': {\n name: 'Titillium Web',\n family: \"'Titillium Web', sans-serif\",\n category: 'sans-serif',\n description: 'Technical, elegant'\n }\n },\n\n init: function() {\n this.state = {\n preference: this.getPreference()\n };\n\n if (this.isInitialized) {\n this.applyFont();\n this.renderUI();\n this.updateUI();\n return;\n }\n\n this.isInitialized = true;\n\n this.applyFont();\n this.renderUI();\n\n console.log('Vanduo Font Switcher initialized');\n },\n\n /**\n * Get saved font preference from localStorage\n * @returns {string} Font key or 'ubuntu' (default)\n */\n getPreference: function() {\n return this.getStorageValue(this.STORAGE_KEY, 'ubuntu');\n },\n\n /**\n * Set font preference and apply it\n * @param {string} fontKey - The font key to apply\n */\n setPreference: function(fontKey) {\n if (!this.fonts[fontKey]) {\n console.warn('Unknown font:', fontKey);\n return;\n }\n\n this.state.preference = fontKey;\n this.setStorageValue(this.STORAGE_KEY, fontKey);\n this.applyFont();\n this.updateUI();\n\n // Dispatch custom event for other components to listen to\n const event = new CustomEvent('font:change', {\n bubbles: true,\n detail: { font: fontKey, fontData: this.fonts[fontKey] }\n });\n document.dispatchEvent(event);\n },\n\n /**\n * Apply the current font preference to the document\n */\n applyFont: function() {\n const fontKey = this.state.preference;\n\n if (fontKey === 'system') {\n // Remove data-font attribute to use system default\n document.documentElement.removeAttribute('data-font');\n } else {\n // Set data-font attribute which triggers CSS variable override\n document.documentElement.setAttribute('data-font', fontKey);\n }\n },\n\n /**\n * Initialize UI elements with data-toggle=\"font\"\n */\n renderUI: function() {\n const toggles = document.querySelectorAll('[data-toggle=\"font\"]');\n\n toggles.forEach(toggle => {\n if (toggle.getAttribute('data-font-initialized') === 'true') {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n }\n return;\n }\n\n if (toggle.tagName === 'SELECT') {\n // Set initial value\n toggle.value = this.state.preference;\n\n // Listen for changes\n const onChange = (e) => {\n this.setPreference(e.target.value);\n };\n toggle.addEventListener('change', onChange);\n toggle._fontToggleHandler = onChange;\n } else {\n // Button implementation - cycle through fonts\n const onClick = () => {\n const fontKeys = Object.keys(this.fonts);\n const currentIndex = fontKeys.indexOf(this.state.preference);\n const nextIndex = (currentIndex + 1) % fontKeys.length;\n this.setPreference(fontKeys[nextIndex]);\n };\n toggle.addEventListener('click', onClick);\n toggle._fontToggleHandler = onClick;\n }\n\n toggle.setAttribute('data-font-initialized', 'true');\n });\n },\n\n /**\n * Update all UI elements to reflect current state\n */\n updateUI: function() {\n const toggles = document.querySelectorAll('[data-toggle=\"font\"]');\n\n toggles.forEach(toggle => {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n } else {\n // Update button text if it has a label span\n const label = toggle.querySelector('.font-current-label');\n if (label) {\n label.textContent = this.fonts[this.state.preference].name;\n }\n }\n });\n },\n\n /**\n * Get the current font preference\n * @returns {string} Current font key\n */\n getCurrentFont: function() {\n return this.state.preference;\n },\n\n /**\n * Get font data for a given key\n * @param {string} fontKey - The font key\n * @returns {Object|null} Font data or null\n */\n getFontData: function(fontKey) {\n return this.fonts[fontKey] || null;\n },\n\n destroyAll: function() {\n const toggles = document.querySelectorAll('[data-toggle=\"font\"][data-font-initialized=\"true\"]');\n toggles.forEach(toggle => {\n if (toggle._fontToggleHandler) {\n const eventName = toggle.tagName === 'SELECT' ? 'change' : 'click';\n toggle.removeEventListener(eventName, toggle._fontToggleHandler);\n delete toggle._fontToggleHandler;\n }\n toggle.removeAttribute('data-font-initialized');\n });\n\n this.isInitialized = false;\n },\n\n getStorageValue: function(key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function(key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('fontSwitcher', FontSwitcher);\n }\n\n // Expose globally for convenience\n window.FontSwitcher = FontSwitcher;\n})();\n", "/**\n * Vanduo Framework - Grid Layout Component\n * Toggle between standard 12-column and Fibonacci grid modes\n * via data-layout-mode attribute and toggle buttons\n */\n\n(function () {\n 'use strict';\n\n const supportsHas = (function () {\n try {\n return CSS.supports('selector(:has(*))');\n } catch (_e) {\n return false;\n }\n })();\n\n /**\n * Grid Layout Component\n */\n const GridLayout = {\n instances: new Map(),\n\n /**\n * Initialize all grid layout containers\n */\n init: function () {\n const containers = document.querySelectorAll('[data-layout-mode]');\n\n containers.forEach(function (container) {\n if (this.instances.has(container)) {\n return;\n }\n this.initContainer(container);\n }.bind(this));\n\n this.initToggleButtons();\n },\n\n /**\n * Initialize a single grid container\n * @param {HTMLElement} container - Element with data-layout-mode\n */\n initContainer: function (container) {\n const mode = container.getAttribute('data-layout-mode') || 'standard';\n const cleanupFunctions = [];\n\n this.applyMode(container, mode);\n\n container.setAttribute('role', 'region');\n container.setAttribute('aria-label', 'Grid layout: ' + mode + ' mode');\n\n this.instances.set(container, {\n cleanup: cleanupFunctions,\n mode: mode\n });\n },\n\n /**\n * Initialize toggle buttons that target grid containers\n */\n initToggleButtons: function () {\n const toggleButtons = document.querySelectorAll('[data-grid-toggle]');\n\n toggleButtons.forEach(function (button) {\n if (button.getAttribute('data-grid-initialized') === 'true') {\n return;\n }\n\n const clickHandler = function (e) {\n e.preventDefault();\n const targetSelector = button.getAttribute('data-grid-toggle');\n let target;\n\n if (targetSelector) {\n target = document.querySelector(targetSelector);\n } else {\n target = button.closest('[data-layout-mode]');\n }\n\n if (target) {\n this.toggle(target);\n }\n }.bind(this);\n\n button.addEventListener('click', clickHandler);\n button.setAttribute('data-grid-initialized', 'true');\n button.setAttribute('aria-pressed', 'false');\n\n button._gridCleanup = function () {\n button.removeEventListener('click', clickHandler);\n button.removeAttribute('data-grid-initialized');\n button.removeAttribute('aria-pressed');\n };\n }.bind(this));\n },\n\n /**\n * Apply Fibonacci grid-template-columns inline for browsers without :has()\n * @param {HTMLElement} container - Grid container\n */\n applyFibFallback: function (container) {\n if (supportsHas) return;\n\n const rows = container.querySelectorAll('.vd-row, .row');\n rows.forEach(function (row) {\n const cols = row.querySelectorAll(':scope > [class*=\"vd-col-\"], :scope > [class*=\"col-\"]');\n const count = cols.length;\n\n if (count === 1) {\n row.style.gridTemplateColumns = '1fr';\n } else if (count === 2) {\n row.style.gridTemplateColumns = '1fr 1.618fr';\n } else if (count === 3) {\n row.style.gridTemplateColumns = '2fr 3fr 5fr';\n } else if (count === 4) {\n row.style.gridTemplateColumns = '1fr 2fr 3fr 5fr';\n } else {\n row.style.gridTemplateColumns = 'repeat(' + count + ', 1fr)';\n }\n });\n },\n\n /**\n * Remove inline grid-template-columns fallback\n * @param {HTMLElement} container - Grid container\n */\n removeFibFallback: function (container) {\n const rows = container.querySelectorAll('.vd-row, .row');\n rows.forEach(function (row) {\n row.style.gridTemplateColumns = '';\n });\n },\n\n /**\n * Apply a layout mode to a container\n * @param {HTMLElement} container - Target container\n * @param {string} mode - 'fibonacci' or 'standard'\n */\n applyMode: function (container, mode) {\n container.classList.remove('vd-grid-standard', 'vd-grid-fibonacci');\n\n if (mode === 'fibonacci') {\n container.classList.add('vd-grid-fibonacci');\n this.applyFibFallback(container);\n } else {\n container.classList.add('vd-grid-standard');\n this.removeFibFallback(container);\n }\n\n container.setAttribute('data-layout-mode', mode);\n container.setAttribute('aria-label', 'Grid layout: ' + mode + ' mode');\n\n // Update associated toggle button states\n const toggleButtons = document.querySelectorAll('[data-grid-toggle]');\n toggleButtons.forEach(function (btn) {\n const targetSelector = btn.getAttribute('data-grid-toggle');\n if (targetSelector && container.matches(targetSelector)) {\n const isActive = (mode === 'fibonacci');\n if (isActive) {\n btn.classList.add('is-active');\n } else {\n btn.classList.remove('is-active');\n }\n btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');\n }\n });\n\n // Store mode in instance\n const instance = this.instances.get(container);\n if (instance) {\n instance.mode = mode;\n }\n\n // Dispatch custom event\n let event;\n try {\n event = new CustomEvent('grid:modechange', {\n bubbles: true,\n detail: {\n container: container,\n mode: mode\n }\n });\n } catch (_e) {\n event = document.createEvent('CustomEvent');\n event.initCustomEvent('grid:modechange', true, true, {\n container: container,\n mode: mode\n });\n }\n container.dispatchEvent(event);\n },\n\n /**\n * Toggle between standard and fibonacci modes\n * @param {HTMLElement|string} container - Container element or selector\n */\n toggle: function (container) {\n if (typeof container === 'string') {\n container = document.querySelector(container);\n }\n if (!container) return;\n\n const currentMode = container.getAttribute('data-layout-mode') || 'standard';\n const newMode = (currentMode === 'fibonacci') ? 'standard' : 'fibonacci';\n this.applyMode(container, newMode);\n },\n\n /**\n * Set a specific mode\n * @param {HTMLElement|string} container - Container element or selector\n * @param {string} mode - 'fibonacci' or 'standard'\n */\n setMode: function (container, mode) {\n if (typeof container === 'string') {\n container = document.querySelector(container);\n }\n if (!container) return;\n if (mode !== 'fibonacci' && mode !== 'standard') return;\n\n this.applyMode(container, mode);\n },\n\n /**\n * Get the current mode of a container\n * @param {HTMLElement|string} container - Container element or selector\n * @returns {string|null} Current mode or null\n */\n getMode: function (container) {\n if (typeof container === 'string') {\n container = document.querySelector(container);\n }\n if (!container) return null;\n return container.getAttribute('data-layout-mode') || 'standard';\n },\n\n /**\n * Destroy a single grid layout instance\n * @param {HTMLElement} container - Grid container\n */\n destroy: function (container) {\n const instance = this.instances.get(container);\n if (!instance) return;\n\n instance.cleanup.forEach(function (fn) { fn(); });\n container.classList.remove('vd-grid-standard', 'vd-grid-fibonacci');\n container.removeAttribute('aria-label');\n this.removeFibFallback(container);\n this.instances.delete(container);\n },\n\n /**\n * Destroy all grid layout instances and clean up toggle buttons\n */\n destroyAll: function () {\n this.instances.forEach(function (instance, container) {\n this.destroy(container);\n }.bind(this));\n\n const toggleButtons = document.querySelectorAll('[data-grid-initialized=\"true\"]');\n toggleButtons.forEach(function (button) {\n if (button._gridCleanup) {\n button._gridCleanup();\n delete button._gridCleanup;\n }\n });\n }\n };\n\n // Register with Vanduo framework\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('gridLayout', GridLayout);\n }\n\n // Expose globally\n window.VanduoGridLayout = GridLayout;\n\n})();\n", "/**\n * Vanduo Framework - Image Box Component\n * Lightbox-style image enlargement with smooth transitions\n * \n * Features:\n * - Click to enlarge images with data-image-box attribute\n * - Smooth scale and opacity transitions\n * - Dismiss via click, ESC key, or scroll\n * - Magnifying glass cursor on hover\n * - Accessible with ARIA attributes\n * - Reduced motion support\n */\n\n(function () {\n 'use strict';\n\n /**\n * Image Box Component\n */\n const ImageBox = {\n backdrop: null,\n container: null,\n img: null,\n closeBtn: null,\n caption: null,\n currentTrigger: null,\n scrollThreshold: 50,\n initialScrollY: 0,\n isOpen: false,\n\n // Store cleanup functions for event listeners\n _cleanupFunctions: [],\n\n /**\n * Initialize Image Box component\n */\n init: function () {\n this.createBackdrop();\n this.bindTriggers();\n },\n\n /**\n * Create backdrop elements\n */\n createBackdrop: function () {\n // Prevent duplicate backdrop creation\n if (this.backdrop || document.querySelector('.vd-image-box-backdrop')) {\n // If backdrop already exists in DOM, reuse it\n if (!this.backdrop) {\n this.backdrop = document.querySelector('.vd-image-box-backdrop');\n this.container = this.backdrop.querySelector('.vd-image-box-container');\n this.img = this.backdrop.querySelector('.vd-image-box-img');\n this.closeBtn = this.backdrop.querySelector('.vd-image-box-close');\n this.caption = this.backdrop.querySelector('.vd-image-box-caption');\n this.bindBackdropEvents();\n }\n return;\n }\n\n // Create backdrop\n this.backdrop = document.createElement('div');\n this.backdrop.className = 'vd-image-box-backdrop';\n this.backdrop.setAttribute('role', 'dialog');\n this.backdrop.setAttribute('aria-modal', 'true');\n this.backdrop.setAttribute('aria-label', 'Image viewer');\n this.backdrop.setAttribute('tabindex', '-1');\n\n // Create container\n this.container = document.createElement('div');\n this.container.className = 'vd-image-box-container';\n\n // Create image\n this.img = document.createElement('img');\n this.img.className = 'vd-image-box-img';\n this.img.alt = '';\n\n // Create close button\n this.closeBtn = document.createElement('button');\n this.closeBtn.className = 'vd-image-box-close';\n this.closeBtn.setAttribute('aria-label', 'Close image viewer');\n this.closeBtn.innerHTML = '×';\n\n // Create caption element\n this.caption = document.createElement('div');\n this.caption.className = 'vd-image-box-caption';\n\n // Assemble\n this.container.appendChild(this.img);\n this.backdrop.appendChild(this.closeBtn);\n this.backdrop.appendChild(this.container);\n this.backdrop.appendChild(this.caption);\n document.body.appendChild(this.backdrop);\n\n // Bind backdrop events\n this.bindBackdropEvents();\n },\n\n /**\n * Bind events to backdrop elements\n */\n bindBackdropEvents: function () {\n const self = this;\n\n // Close on backdrop click (but not when clicking the image)\n const backdropClickHandler = function (e) {\n if (e.target === self.backdrop || e.target === self.container) {\n self.close();\n }\n };\n this.backdrop.addEventListener('click', backdropClickHandler);\n this._cleanupFunctions.push(() => this.backdrop.removeEventListener('click', backdropClickHandler));\n\n // Close on image click\n const imgClickHandler = function () {\n self.close();\n };\n this.img.addEventListener('click', imgClickHandler);\n this._cleanupFunctions.push(() => this.img.removeEventListener('click', imgClickHandler));\n\n // Close on close button click\n const closeBtnHandler = function () {\n self.close();\n };\n this.closeBtn.addEventListener('click', closeBtnHandler);\n this._cleanupFunctions.push(() => this.closeBtn.removeEventListener('click', closeBtnHandler));\n\n // ESC key handler\n const escHandler = function (e) {\n if (e.key === 'Escape' && self.isOpen) {\n self.close();\n }\n };\n document.addEventListener('keydown', escHandler);\n this._cleanupFunctions.push(() => document.removeEventListener('keydown', escHandler));\n\n // Scroll handler for dismissal\n const scrollHandler = function () {\n if (!self.isOpen) return;\n\n const currentScrollY = window.scrollY;\n const scrollDelta = Math.abs(currentScrollY - self.initialScrollY);\n\n if (scrollDelta > self.scrollThreshold) {\n self.close();\n }\n };\n window.addEventListener('scroll', scrollHandler, { passive: true });\n this._cleanupFunctions.push(() => window.removeEventListener('scroll', scrollHandler));\n },\n\n /**\n * Bind triggers to all images with data-image-box attribute\n */\n bindTriggers: function () {\n const self = this;\n const triggers = document.querySelectorAll('[data-image-box]');\n\n triggers.forEach(function (trigger) {\n // Skip if already initialized\n if (trigger.dataset.imageBoxInitialized) return;\n trigger.dataset.imageBoxInitialized = 'true';\n\n // Add trigger class\n trigger.classList.add('vd-image-box-trigger');\n\n // Handle broken images\n if (trigger.tagName === 'IMG') {\n // Check if already in error state\n if (trigger.complete && trigger.naturalWidth === 0) {\n trigger.classList.add('is-broken');\n }\n\n // Listen for error events\n const errorHandler = function () {\n trigger.classList.add('is-broken');\n };\n trigger.addEventListener('error', errorHandler);\n\n // Listen for successful load\n const loadHandler = function () {\n trigger.classList.remove('is-broken');\n };\n trigger.addEventListener('load', loadHandler);\n }\n\n // Bind click event\n const clickHandler = function (e) {\n e.preventDefault();\n self.open(trigger);\n };\n trigger.addEventListener('click', clickHandler);\n\n // Store cleanup\n trigger._imageBoxCleanup = () => trigger.removeEventListener('click', clickHandler);\n\n // Keyboard accessibility for non-button triggers\n if (trigger.tagName !== 'BUTTON' && trigger.tagName !== 'A') {\n trigger.setAttribute('role', 'button');\n trigger.setAttribute('tabindex', '0');\n trigger.setAttribute('aria-label', 'View enlarged image');\n\n const keyHandler = function (e) {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n self.open(trigger);\n }\n };\n trigger.addEventListener('keydown', keyHandler);\n\n const originalCleanup = trigger._imageBoxCleanup;\n trigger._imageBoxCleanup = () => {\n originalCleanup();\n trigger.removeEventListener('keydown', keyHandler);\n };\n }\n });\n },\n\n /**\n * Open image box\n * @param {HTMLElement} trigger - The trigger element\n */\n open: function (trigger) {\n if (this.isOpen) return;\n\n this.currentTrigger = trigger;\n this.isOpen = true;\n this.initialScrollY = window.scrollY;\n\n // Get image source - support dual images (thumbnail + full-size)\n // data-image-box-full-src takes precedence for the lightbox\n const imgSrc = trigger.dataset.imageBoxFullSrc ||\n trigger.dataset.imageBoxSrc ||\n trigger.src ||\n trigger.href;\n\n if (!imgSrc) {\n console.warn('[Vanduo ImageBox] No image source found for trigger:', trigger);\n return;\n }\n\n // Get caption\n const captionText = trigger.dataset.imageBoxCaption || trigger.alt || '';\n\n // Set image source\n this.img.src = imgSrc;\n this.img.alt = trigger.alt || '';\n\n // Set caption\n if (captionText) {\n this.caption.textContent = captionText;\n this.caption.style.display = 'block';\n } else {\n this.caption.style.display = 'none';\n }\n\n // Calculate scrollbar width and lock body scroll\n const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n document.body.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);\n document.body.classList.add('body-image-box-open');\n\n // Show backdrop\n this.backdrop.classList.add('is-visible');\n\n // Focus management\n this.backdrop.focus();\n\n // Dispatch event\n trigger.dispatchEvent(new CustomEvent('imageBox:open', {\n bubbles: true,\n detail: { src: imgSrc }\n }));\n\n // Handle image load\n if (!this.img.complete) {\n this.img.style.opacity = '0';\n this._imgLoadHandler = () => {\n this.img.style.opacity = '';\n };\n this.img.addEventListener('load', this._imgLoadHandler, { once: true });\n }\n },\n\n /**\n * Close image box\n */\n close: function () {\n if (!this.isOpen) return;\n\n this.isOpen = false;\n\n // Hide backdrop\n this.backdrop.classList.remove('is-visible');\n\n // Unlock body scroll\n document.body.classList.remove('body-image-box-open');\n document.body.style.removeProperty('--scrollbar-width');\n\n // Return focus to trigger\n if (this.currentTrigger) {\n this.currentTrigger.focus();\n this.currentTrigger.dispatchEvent(new CustomEvent('imageBox:close', { bubbles: true }));\n this.currentTrigger = null;\n }\n\n // Clear image after transition\n setTimeout(() => {\n if (!this.isOpen) {\n // Clean up load handler if still pending\n if (this._imgLoadHandler) {\n this.img.removeEventListener('load', this._imgLoadHandler);\n this._imgLoadHandler = null;\n }\n this.img.src = '';\n this.img.alt = '';\n }\n }, 300);\n },\n\n /**\n * Reinitialize - useful after dynamic DOM changes\n */\n reinit: function () {\n this.bindTriggers();\n },\n\n /**\n * Destroy component and clean up\n */\n destroy: function () {\n // Close if open\n if (this.isOpen) {\n this.close();\n }\n\n // Remove backdrop\n if (this.backdrop && this.backdrop.parentNode) {\n this.backdrop.parentNode.removeChild(this.backdrop);\n }\n\n // Run cleanup functions\n this._cleanupFunctions.forEach(fn => fn());\n this._cleanupFunctions = [];\n\n // Remove trigger bindings\n const triggers = document.querySelectorAll('[data-image-box-initialized]');\n triggers.forEach(trigger => {\n trigger.classList.remove('vd-image-box-trigger');\n if (trigger._imageBoxCleanup) {\n trigger._imageBoxCleanup();\n delete trigger._imageBoxCleanup;\n }\n delete trigger.dataset.imageBoxInitialized;\n });\n\n this.backdrop = null;\n this.container = null;\n this.img = null;\n this.closeBtn = null;\n this.caption = null;\n this.currentTrigger = null;\n this.isOpen = false;\n },\n\n destroyAll: function () {\n this.destroy();\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('imageBox', ImageBox);\n }\n\n // Expose globally\n window.VanduoImageBox = ImageBox;\n\n})();\n", "/**\n * Vanduo Framework - Modals Component\n * JavaScript functionality for modal dialogs\n */\n\n(function () {\n 'use strict';\n\n /**\n * Modals Component\n */\n const Modals = {\n modals: new Map(),\n openModals: [],\n zIndexCounter: 1050,\n\n // Store trigger cleanup functions\n _triggerCleanups: [],\n // Shared ESC key handler (installed once)\n _sharedEscHandler: null,\n\n /**\n * Initialize modals\n */\n init: function () {\n const modals = document.querySelectorAll('.vd-modal');\n\n modals.forEach(modal => {\n if (this.modals.has(modal)) {\n return;\n }\n this.initModal(modal);\n });\n\n // Handle data-modal triggers\n const triggers = document.querySelectorAll('[data-modal]');\n triggers.forEach(trigger => {\n if (trigger.dataset.modalTriggerInitialized) return;\n trigger.dataset.modalTriggerInitialized = 'true';\n\n const triggerClickHandler = (e) => {\n e.preventDefault();\n const modalId = trigger.dataset.modal;\n const modal = document.querySelector(modalId);\n if (modal) {\n this.open(modal);\n }\n };\n trigger.addEventListener('click', triggerClickHandler);\n this._triggerCleanups.push(() => trigger.removeEventListener('click', triggerClickHandler));\n });\n },\n\n /**\n * Initialize a single modal\n * @param {HTMLElement} modal - Modal element\n */\n initModal: function (modal) {\n const backdrop = this.createBackdrop(modal);\n const closeButtons = modal.querySelectorAll('.vd-modal-close, [data-dismiss=\"modal\"]');\n const dialog = modal.querySelector('.vd-modal-dialog');\n\n if (!dialog) {\n return;\n }\n\n const cleanupFunctions = [];\n\n // Set ARIA attributes\n modal.setAttribute('role', 'dialog');\n modal.setAttribute('aria-modal', 'true');\n modal.setAttribute('aria-hidden', 'true');\n\n // Generate ID if not exists\n if (!modal.id) {\n modal.id = 'modal-' + Math.random().toString(36).substr(2, 9);\n }\n\n // Set aria-labelledby\n const title = modal.querySelector('.vd-modal-title');\n if (title && !title.id) {\n title.id = modal.id + '-title';\n modal.setAttribute('aria-labelledby', title.id);\n }\n\n // Close button handlers\n closeButtons.forEach(button => {\n const closeHandler = () => {\n this.close(modal);\n };\n button.addEventListener('click', closeHandler);\n cleanupFunctions.push(() => button.removeEventListener('click', closeHandler));\n });\n\n // Backdrop click handler\n const backdropClickHandler = (e) => {\n if (e.target === backdrop && modal.dataset.backdrop !== 'static') {\n this.close(modal);\n }\n };\n backdrop.addEventListener('click', backdropClickHandler);\n cleanupFunctions.push(() => backdrop.removeEventListener('click', backdropClickHandler));\n\n // ESC key handler \u2014 use a single shared handler instead of one-per-modal\n if (!this._sharedEscHandler) {\n this._sharedEscHandler = (e) => {\n if (e.key === 'Escape' && this.openModals.length > 0) {\n const topModal = this.openModals[this.openModals.length - 1];\n if (topModal.dataset.keyboard !== 'false') {\n this.close(topModal);\n }\n }\n };\n document.addEventListener('keydown', this._sharedEscHandler);\n }\n\n this.modals.set(modal, { backdrop, dialog, trapHandler: null, cleanup: cleanupFunctions });\n },\n\n /**\n * Create backdrop element\n * @param {HTMLElement} modal - Modal element\n * @returns {HTMLElement} Backdrop element\n */\n createBackdrop: function (modal) {\n let backdrop = modal.querySelector('.vd-modal-backdrop');\n\n if (!backdrop) {\n backdrop = document.createElement('div');\n backdrop.className = 'vd-modal-backdrop';\n document.body.appendChild(backdrop);\n }\n\n return backdrop;\n },\n\n /**\n * Open modal\n * @param {HTMLElement|string} modal - Modal element or selector\n */\n open: function (modal) {\n const el = typeof modal === 'string' ? document.querySelector(modal) : modal;\n\n if (!el) {\n console.warn('[Vanduo Modals] Modal element not found:', modal);\n return;\n }\n\n if (!this.modals.has(el)) {\n console.warn('[Vanduo Modals] Modal not initialized:', el);\n return;\n }\n\n const modalData = this.modals.get(el);\n const { backdrop, dialog: _dialog } = modalData;\n\n // Increment z-index for stacking\n this.zIndexCounter += 10;\n el.style.zIndex = this.zIndexCounter;\n backdrop.style.zIndex = this.zIndexCounter - 1;\n\n // Add to open modals stack\n this.openModals.push(el);\n\n // Show backdrop\n backdrop.classList.add('is-visible');\n\n // Show modal\n el.classList.add('is-open');\n el.setAttribute('aria-hidden', 'false');\n\n // Lock body scroll\n if (this.openModals.length === 1) {\n document.body.classList.add('body-modal-open');\n const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n if (scrollbarWidth > 0) {\n document.body.style.paddingRight = `${scrollbarWidth}px`;\n }\n }\n\n // Focus trap (store handler for cleanup)\n const trapHandler = this.trapFocus(el);\n modalData.trapHandler = trapHandler;\n\n // Auto-focus first focusable element\n setTimeout(() => {\n const firstFocusable = this.getFocusableElements(el)[0];\n if (firstFocusable) {\n firstFocusable.focus();\n }\n }, 100);\n\n // Dispatch event\n el.dispatchEvent(new CustomEvent('modal:open', { bubbles: true }));\n },\n\n /**\n * Close modal\n * @param {HTMLElement|string} modal - Modal element or selector\n */\n close: function (modal) {\n const el = typeof modal === 'string' ? document.querySelector(modal) : modal;\n\n if (!el) {\n console.warn('[Vanduo Modals] Modal element not found:', modal);\n return;\n }\n\n if (!this.modals.has(el)) {\n console.warn('[Vanduo Modals] Modal not initialized:', el);\n return;\n }\n\n const modalData = this.modals.get(el);\n const { backdrop, trapHandler } = modalData;\n\n // Remove focus trap event listener to prevent memory leak\n if (trapHandler) {\n el.removeEventListener('keydown', trapHandler);\n modalData.trapHandler = null;\n }\n\n // Remove from open modals stack\n const index = this.openModals.indexOf(el);\n if (index > -1) {\n this.openModals.splice(index, 1);\n }\n\n // Hide modal\n el.classList.remove('is-open');\n el.setAttribute('aria-hidden', 'true');\n\n // Hide backdrop if no other modals open\n if (this.openModals.length === 0) {\n backdrop.classList.remove('is-visible');\n document.body.classList.remove('body-modal-open');\n document.body.style.paddingRight = '';\n // Reset z-index counter to prevent indefinite growth\n this.zIndexCounter = 1050;\n } else {\n // Show backdrop for top modal\n const topModal = this.openModals[this.openModals.length - 1];\n const topBackdrop = this.modals.get(topModal).backdrop;\n topBackdrop.classList.add('is-visible');\n }\n\n // Return focus to trigger\n const trigger = document.querySelector(`[data-modal=\"#${el.id}\"]`);\n if (trigger) {\n trigger.focus();\n }\n\n // Dispatch event\n el.dispatchEvent(new CustomEvent('modal:close', { bubbles: true }));\n },\n\n /**\n * Trap focus within modal\n * @param {HTMLElement} modal - Modal element\n * @returns {Function} The trap handler function for cleanup\n */\n trapFocus: function (modal) {\n const self = this;\n\n const trapHandler = function (e) {\n if (e.key !== 'Tab') {\n return;\n }\n\n const focusableElements = self.getFocusableElements(modal);\n const firstElement = focusableElements[0];\n const lastElement = focusableElements[focusableElements.length - 1];\n\n if (e.shiftKey) {\n // Shift + Tab\n if (document.activeElement === firstElement) {\n e.preventDefault();\n lastElement.focus();\n }\n } else {\n // Tab\n if (document.activeElement === lastElement) {\n e.preventDefault();\n firstElement.focus();\n }\n }\n };\n\n modal.addEventListener('keydown', trapHandler);\n return trapHandler;\n },\n\n /**\n * Get focusable elements within modal\n * @param {HTMLElement} modal - Modal element\n * @returns {Array} Focusable elements\n */\n getFocusableElements: function (modal) {\n const selector = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n return Array.from(modal.querySelectorAll(selector)).filter(el => {\n return !el.hasAttribute('disabled') &&\n el.offsetWidth > 0 &&\n el.offsetHeight > 0;\n });\n },\n\n /**\n * Toggle modal\n * @param {HTMLElement|string} modal - Modal element or selector\n */\n toggle: function (modal) {\n const el = typeof modal === 'string' ? document.querySelector(modal) : modal;\n if (el) {\n if (el.classList.contains('is-open')) {\n this.close(el);\n } else {\n this.open(el);\n }\n }\n },\n\n /**\n * Destroy a modal instance and clean up event listeners\n * @param {HTMLElement} modal - Modal element\n */\n destroy: function (modal) {\n const modalData = this.modals.get(modal);\n if (!modalData) return;\n\n // Close if open\n if (modal.classList.contains('is-open')) {\n this.close(modal);\n }\n\n // Run all cleanup functions\n if (modalData.cleanup) {\n modalData.cleanup.forEach(fn => fn());\n }\n\n // Remove created backdrop\n if (modalData.backdrop && modalData.backdrop.parentNode) {\n modalData.backdrop.parentNode.removeChild(modalData.backdrop);\n }\n\n this.modals.delete(modal);\n },\n\n /**\n * Destroy all modal instances\n */\n destroyAll: function () {\n this.modals.forEach((data, modal) => {\n this.destroy(modal);\n });\n // Clean up trigger listeners\n this._triggerCleanups.forEach(fn => fn());\n this._triggerCleanups = [];\n // Remove shared ESC handler\n if (this._sharedEscHandler) {\n document.removeEventListener('keydown', this._sharedEscHandler);\n this._sharedEscHandler = null;\n }\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('modals', Modals);\n }\n\n // Expose globally\n window.VanduoModals = Modals;\n\n})();\n\n", "/**\n * Vanduo Framework - Navbar Component\n * JavaScript functionality for navbar mobile menu\n */\n\n(function () {\n 'use strict';\n\n /**\n * Navbar Component\n */\n const Navbar = {\n // Store initialized navbars and their cleanup functions\n instances: new Map(),\n\n /**\n * Get the breakpoint value from CSS variable or use fallback\n * @returns {number} Breakpoint in pixels\n */\n getBreakpoint: function () {\n const root = getComputedStyle(document.documentElement);\n const breakpointValue = root.getPropertyValue('--breakpoint-lg').trim();\n\n // Parse the value (could be \"992px\" or just \"992\")\n const parsed = parseInt(breakpointValue, 10);\n return isNaN(parsed) ? 992 : parsed;\n },\n\n /**\n * Initialize navbar component\n */\n init: function () {\n const navbars = document.querySelectorAll('.vd-navbar');\n\n navbars.forEach(navbar => {\n // Skip if already initialized\n if (this.instances.has(navbar)) {\n return;\n }\n this.initNavbar(navbar);\n });\n },\n\n /**\n * Initialize scroll-aware glass/transparent behaviour for a navbar.\n * Adds/removes `.vd-navbar-scrolled` when the page scrolls past a threshold.\n * Threshold: `data-scroll-threshold` attribute (px) or the navbar's own height.\n * @param {HTMLElement} navbar - Navbar element\n * @returns {Function|null} Cleanup function, or null if not applicable\n */\n initScrollWatcher: function (navbar) {\n const isGlass = navbar.classList.contains('vd-navbar-glass');\n const isTransparent = navbar.classList.contains('vd-navbar-transparent');\n\n if (!isGlass && !isTransparent) {\n return null;\n }\n\n const getThreshold = () => {\n const attr = parseInt(navbar.dataset.scrollThreshold, 10);\n return isNaN(attr) ? (navbar.offsetHeight || 60) : attr;\n };\n\n const onScroll = () => {\n const scrolled = window.scrollY > getThreshold();\n navbar.classList.toggle('vd-navbar-scrolled', scrolled);\n };\n\n onScroll(); // set initial state without waiting for first scroll\n window.addEventListener('scroll', onScroll, { passive: true });\n\n return () => window.removeEventListener('scroll', onScroll);\n },\n\n /**\n * Initialize a single navbar\n * @param {HTMLElement} navbar - Navbar element\n */\n initNavbar: function (navbar) {\n const toggle = navbar.querySelector('.vd-navbar-toggle, .vd-navbar-burger');\n const menu = navbar.querySelector('.vd-navbar-menu');\n const overlay = navbar.querySelector('.vd-navbar-overlay') || this.createOverlay(navbar);\n\n // Store cleanup functions for this navbar instance\n const cleanupFunctions = [];\n\n // Wire up scroll-aware glass/transparent behaviour regardless of mobile menu\n const scrollWatcherCleanup = this.initScrollWatcher(navbar);\n if (scrollWatcherCleanup) {\n cleanupFunctions.push(scrollWatcherCleanup);\n }\n\n if (!toggle || !menu) {\n // Still store the instance so scroll-watcher cleanup is tracked\n if (cleanupFunctions.length) {\n this.instances.set(navbar, { toggle: null, menu: null, overlay: null, cleanup: cleanupFunctions });\n }\n return;\n }\n\n // Toggle menu on button click\n const toggleClickHandler = (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggleMenu(navbar, toggle, menu, overlay);\n };\n toggle.addEventListener('click', toggleClickHandler);\n cleanupFunctions.push(() => toggle.removeEventListener('click', toggleClickHandler));\n\n // Close menu on overlay click\n if (overlay) {\n const overlayClickHandler = () => {\n this.closeMenu(navbar, toggle, menu, overlay);\n };\n overlay.addEventListener('click', overlayClickHandler);\n cleanupFunctions.push(() => overlay.removeEventListener('click', overlayClickHandler));\n }\n\n // Close menu on escape key\n const keydownHandler = (e) => {\n if (e.key === 'Escape' && menu.classList.contains('is-open')) {\n this.closeMenu(navbar, toggle, menu, overlay);\n }\n };\n document.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => document.removeEventListener('keydown', keydownHandler));\n\n // Close menu on window resize (if resizing to desktop)\n let resizeTimer;\n const resizeHandler = () => {\n clearTimeout(resizeTimer);\n resizeTimer = setTimeout(() => {\n const breakpoint = this.getBreakpoint();\n if (window.innerWidth >= breakpoint && menu.classList.contains('is-open')) {\n this.closeMenu(navbar, toggle, menu, overlay);\n }\n }, 250);\n };\n window.addEventListener('resize', resizeHandler);\n cleanupFunctions.push(() => {\n clearTimeout(resizeTimer);\n window.removeEventListener('resize', resizeHandler);\n });\n\n // Close menu when clicking outside\n const documentClickHandler = (e) => {\n if (menu.classList.contains('is-open') &&\n !navbar.contains(e.target) &&\n !menu.contains(e.target)) {\n this.closeMenu(navbar, toggle, menu, overlay);\n }\n };\n document.addEventListener('click', documentClickHandler);\n cleanupFunctions.push(() => document.removeEventListener('click', documentClickHandler));\n\n // Handle dropdown toggles in mobile menu\n const dropdownToggles = menu.querySelectorAll('.vd-navbar-dropdown > .vd-nav-link, .vd-navbar-dropdown > .nav-link');\n dropdownToggles.forEach(dropdownToggle => {\n const dropdownClickHandler = (e) => {\n const breakpoint = this.getBreakpoint();\n if (window.innerWidth < breakpoint) {\n e.preventDefault();\n const dropdown = dropdownToggle.parentElement;\n const dropdownMenu = dropdown.querySelector('.vd-navbar-dropdown-menu');\n\n if (dropdownMenu) {\n dropdownMenu.classList.toggle('is-open');\n }\n }\n };\n dropdownToggle.addEventListener('click', dropdownClickHandler);\n cleanupFunctions.push(() => dropdownToggle.removeEventListener('click', dropdownClickHandler));\n });\n\n // Store instance with cleanup functions\n this.instances.set(navbar, {\n toggle,\n menu,\n overlay,\n cleanup: cleanupFunctions\n });\n },\n\n /**\n * Destroy a navbar instance and clean up event listeners\n * @param {HTMLElement} navbar - Navbar element\n */\n destroy: function (navbar) {\n const instance = this.instances.get(navbar);\n if (!instance) {\n return;\n }\n\n // Run all cleanup functions\n instance.cleanup.forEach(fn => fn());\n\n // Remove created overlay if it exists\n if (instance.overlay && instance.overlay.parentNode) {\n instance.overlay.parentNode.removeChild(instance.overlay);\n }\n\n // Remove from instances map\n this.instances.delete(navbar);\n },\n\n /**\n * Destroy all navbar instances\n */\n destroyAll: function () {\n this.instances.forEach((instance, navbar) => {\n this.destroy(navbar);\n });\n },\n\n /**\n * Toggle mobile menu\n * @param {HTMLElement} navbar - Navbar element\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Menu element\n * @param {HTMLElement} overlay - Overlay element\n */\n toggleMenu: function (navbar, toggle, menu, overlay) {\n const isOpen = menu.classList.contains('is-open');\n\n if (isOpen) {\n this.closeMenu(navbar, toggle, menu, overlay);\n } else {\n this.openMenu(navbar, toggle, menu, overlay);\n }\n },\n\n /**\n * Open mobile menu\n * @param {HTMLElement} navbar - Navbar element\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Menu element\n * @param {HTMLElement} overlay - Overlay element\n */\n openMenu: function (navbar, toggle, menu, overlay) {\n menu.classList.add('is-open');\n toggle.classList.add('is-active');\n\n if (overlay) {\n overlay.classList.add('is-active');\n }\n\n // Prevent body scroll when menu is open (use class to avoid conflicts with modals)\n document.body.classList.add('body-navbar-open');\n\n // Set ARIA attributes\n toggle.setAttribute('aria-expanded', 'true');\n menu.setAttribute('aria-hidden', 'false');\n },\n\n /**\n * Close mobile menu\n * @param {HTMLElement} navbar - Navbar element\n * @param {HTMLElement} toggle - Toggle button\n * @param {HTMLElement} menu - Menu element\n * @param {HTMLElement} overlay - Overlay element\n */\n closeMenu: function (navbar, toggle, menu, overlay) {\n menu.classList.remove('is-open');\n toggle.classList.remove('is-active');\n\n if (overlay) {\n overlay.classList.remove('is-active');\n }\n\n // Restore body scroll\n document.body.classList.remove('body-navbar-open');\n\n // Close all dropdown menus\n const dropdownMenus = menu.querySelectorAll('.vd-navbar-dropdown-menu.is-open');\n dropdownMenus.forEach(dropdownMenu => {\n dropdownMenu.classList.remove('is-open');\n });\n\n // Set ARIA attributes\n toggle.setAttribute('aria-expanded', 'false');\n menu.setAttribute('aria-hidden', 'true');\n },\n\n /**\n * Create overlay element if it doesn't exist\n * @param {HTMLElement} navbar - Navbar element\n * @returns {HTMLElement} Overlay element\n */\n createOverlay: function (_navbar) {\n const overlay = document.createElement('div');\n overlay.className = 'vd-navbar-overlay';\n document.body.appendChild(overlay);\n return overlay;\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('navbar', Navbar);\n }\n\n // Expose globally\n window.VanduoNavbar = Navbar;\n\n})();\n", "/**\n * Vanduo Framework - Pagination Component\n * JavaScript functionality for dynamic pagination\n */\n\n(function() {\n 'use strict';\n\n /**\n * Pagination Component\n */\n const Pagination = {\n // Store initialized paginations and their cleanup functions\n instances: new Map(),\n\n /**\n * Initialize pagination components\n */\n init: function() {\n const paginations = document.querySelectorAll('.vd-pagination[data-pagination]');\n\n paginations.forEach(pagination => {\n if (this.instances.has(pagination)) {\n return;\n }\n this.initPagination(pagination);\n });\n },\n\n /**\n * Initialize a pagination\n * @param {HTMLElement} pagination - Pagination container\n */\n initPagination: function(pagination) {\n const totalPages = parseInt(pagination.dataset.totalPages) || 1;\n const currentPage = parseInt(pagination.dataset.currentPage) || 1;\n const maxVisible = parseInt(pagination.dataset.maxVisible) || 7;\n\n this.render(pagination, {\n totalPages: totalPages,\n currentPage: currentPage,\n maxVisible: maxVisible\n });\n\n // Handle clicks (event delegation)\n const clickHandler = (e) => {\n const link = e.target.closest('.vd-pagination-link');\n if (!link || link.closest('.vd-pagination-item.disabled') || link.closest('.vd-pagination-item.active')) {\n return;\n }\n\n e.preventDefault();\n\n const item = link.closest('.vd-pagination-item');\n const page = item.dataset.page;\n\n if (page) {\n this.goToPage(pagination, parseInt(page));\n } else if (item.classList.contains('pagination-prev')) {\n this.prevPage(pagination);\n } else if (item.classList.contains('pagination-next')) {\n this.nextPage(pagination);\n }\n };\n pagination.addEventListener('click', clickHandler);\n\n this.instances.set(pagination, {\n cleanup: [() => pagination.removeEventListener('click', clickHandler)]\n });\n },\n \n /**\n * Render pagination\n * @param {HTMLElement} pagination - Pagination container\n * @param {Object} options - Pagination options\n */\n render: function(pagination, options) {\n const { totalPages, currentPage, maxVisible } = options;\n \n if (totalPages <= 1) {\n pagination.innerHTML = '';\n return;\n }\n \n let html = '';\n \n // Previous button\n html += `
  • `;\n html += `Previous`;\n html += `
    • `;\n \n // Calculate page range\n const pages = this.calculatePages(currentPage, totalPages, maxVisible);\n \n // Page numbers\n let lastPage = 0;\n pages.forEach(page => {\n if (page === 'ellipsis') {\n html += `
  • \u2026
    • `;\n } else {\n if (page !== lastPage + 1 && lastPage > 0) {\n html += `
  • \u2026
    • `;\n }\n const safePage = Number(page);\n html += `
  • `;\n html += `${safePage}`;\n html += `
    • `;\n lastPage = page;\n }\n });\n \n // Next button\n html += `
  • `;\n html += `Next`;\n html += `
    • `;\n \n pagination.innerHTML = html;\n \n // Update data attributes\n pagination.dataset.currentPage = currentPage;\n },\n \n /**\n * Calculate which pages to show\n * @param {number} currentPage - Current page\n * @param {number} totalPages - Total pages\n * @param {number} maxVisible - Maximum visible pages\n * @returns {Array} Array of page numbers or 'ellipsis'\n */\n calculatePages: function(currentPage, totalPages, maxVisible) {\n const pages = [];\n const half = Math.floor(maxVisible / 2);\n \n if (totalPages <= maxVisible) {\n // Show all pages\n for (let i = 1; i <= totalPages; i++) {\n pages.push(i);\n }\n } else {\n // Always show first page\n pages.push(1);\n \n let start = Math.max(2, currentPage - half);\n let end = Math.min(totalPages - 1, currentPage + half);\n \n // Adjust if we're near the start\n if (currentPage <= half + 1) {\n end = Math.min(totalPages - 1, maxVisible - 1);\n }\n \n // Adjust if we're near the end\n if (currentPage >= totalPages - half) {\n start = Math.max(2, totalPages - maxVisible + 2);\n }\n \n // Add ellipsis before if needed\n if (start > 2) {\n pages.push('ellipsis');\n }\n \n // Add middle pages\n for (let i = start; i <= end; i++) {\n pages.push(i);\n }\n \n // Add ellipsis after if needed\n if (end < totalPages - 1) {\n pages.push('ellipsis');\n }\n \n // Always show last page\n if (totalPages > 1) {\n pages.push(totalPages);\n }\n }\n \n return pages;\n },\n \n /**\n * Go to specific page\n * @param {HTMLElement} pagination - Pagination container\n * @param {number} page - Page number\n */\n goToPage: function(pagination, page) {\n const totalPages = parseInt(pagination.dataset.totalPages) || 1;\n const maxVisible = parseInt(pagination.dataset.maxVisible) || 7;\n \n if (page < 1 || page > totalPages) {\n return;\n }\n \n this.render(pagination, {\n totalPages: totalPages,\n currentPage: page,\n maxVisible: maxVisible\n });\n \n // Dispatch event\n pagination.dispatchEvent(new CustomEvent('pagination:change', {\n bubbles: true,\n detail: { page, totalPages }\n }));\n },\n \n /**\n * Go to previous page\n * @param {HTMLElement} pagination - Pagination container\n */\n prevPage: function(pagination) {\n const currentPage = parseInt(pagination.dataset.currentPage) || 1;\n if (currentPage > 1) {\n this.goToPage(pagination, currentPage - 1);\n }\n },\n \n /**\n * Go to next page\n * @param {HTMLElement} pagination - Pagination container\n */\n nextPage: function(pagination) {\n const currentPage = parseInt(pagination.dataset.currentPage) || 1;\n const totalPages = parseInt(pagination.dataset.totalPages) || 1;\n if (currentPage < totalPages) {\n this.goToPage(pagination, currentPage + 1);\n }\n },\n \n /**\n * Update pagination\n * @param {HTMLElement|string} pagination - Pagination container or selector\n * @param {Object} options - Pagination options\n */\n update: function(pagination, options) {\n const el = typeof pagination === 'string' ? document.querySelector(pagination) : pagination;\n if (el) {\n if (options.totalPages !== undefined) {\n el.dataset.totalPages = options.totalPages;\n }\n if (options.currentPage !== undefined) {\n el.dataset.currentPage = options.currentPage;\n }\n if (options.maxVisible !== undefined) {\n el.dataset.maxVisible = options.maxVisible;\n }\n \n this.render(el, {\n totalPages: parseInt(el.dataset.totalPages) || 1,\n currentPage: parseInt(el.dataset.currentPage) || 1,\n maxVisible: parseInt(el.dataset.maxVisible) || 7\n });\n }\n },\n\n /**\n * Destroy a pagination instance and clean up event listeners\n * @param {HTMLElement} pagination - Pagination container\n */\n destroy: function(pagination) {\n const instance = this.instances.get(pagination);\n if (!instance) return;\n\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(pagination);\n },\n\n /**\n * Destroy all pagination instances\n */\n destroyAll: function() {\n this.instances.forEach((instance, pagination) => {\n this.destroy(pagination);\n });\n }\n };\n \n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('pagination', Pagination);\n }\n \n // Expose globally\n window.VanduoPagination = Pagination;\n \n})();\n\n", "/**\n * Vanduo Framework - Parallax Component\n * JavaScript functionality for parallax scroll effects\n */\n\n(function () {\n 'use strict';\n\n /**\n * Parallax Component\n */\n const Parallax = {\n parallaxElements: new Map(),\n ticking: false,\n isMobile: window.innerWidth < 768,\n reducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches,\n isInitialized: false,\n _onScroll: null,\n _onResize: null,\n\n /**\n * Initialize parallax components\n */\n init: function () {\n if (this.isInitialized) {\n this.refresh();\n return;\n }\n\n this.isInitialized = true;\n\n // Check for reduced motion preference\n if (this.reducedMotion) {\n return; // Don't initialize if user prefers reduced motion\n }\n\n const parallaxElements = document.querySelectorAll('.vd-parallax');\n\n parallaxElements.forEach(element => {\n if (!element.dataset.parallaxInitialized) {\n this.initParallax(element);\n }\n });\n\n // Handle scroll\n this.handleScroll();\n this._onScroll = () => {\n this.handleScroll();\n };\n window.addEventListener('scroll', this._onScroll, { passive: true });\n\n // Handle resize\n this._onResize = () => {\n this.isMobile = window.innerWidth < 768;\n this.updateAll();\n };\n window.addEventListener('resize', this._onResize);\n },\n\n /**\n * Initialize a parallax element\n * @param {HTMLElement} element - Parallax container\n */\n initParallax: function (element) {\n element.dataset.parallaxInitialized = 'true';\n\n // Check if disabled on mobile\n const disableMobile = element.classList.contains('parallax-disable-mobile');\n if (disableMobile && this.isMobile) {\n return;\n }\n\n const layers = element.querySelectorAll('.vd-parallax-layer, .vd-parallax-bg');\n const speed = this.getSpeed(element);\n const direction = element.classList.contains('parallax-horizontal') ? 'horizontal' : 'vertical';\n\n this.parallaxElements.set(element, {\n layers: Array.from(layers),\n speed: speed,\n direction: direction,\n disableMobile: disableMobile\n });\n\n // Initial update\n this.updateParallax(element);\n },\n\n /**\n * Get parallax speed from element\n * @param {HTMLElement} element - Parallax element\n * @returns {number} Speed multiplier\n */\n getSpeed: function (element) {\n if (element.classList.contains('parallax-slow')) {\n return 0.5;\n } else if (element.classList.contains('parallax-fast')) {\n return 1.5;\n }\n return 1; // Default medium speed\n },\n\n /**\n * Handle scroll event\n */\n handleScroll: function () {\n if (!this.ticking) {\n window.requestAnimationFrame(() => {\n this.updateAll();\n this.ticking = false;\n });\n this.ticking = true;\n }\n },\n\n /**\n * Update all parallax elements\n */\n updateAll: function () {\n this.parallaxElements.forEach((config, element) => {\n // Skip if disabled on mobile\n if (config.disableMobile && this.isMobile) {\n return;\n }\n\n this.updateParallax(element);\n });\n },\n\n /**\n * Update parallax for a single element\n * @param {HTMLElement} element - Parallax element\n */\n updateParallax: function (element) {\n const config = this.parallaxElements.get(element);\n if (!config) {\n return;\n }\n\n const rect = element.getBoundingClientRect();\n const windowHeight = window.innerHeight;\n const elementTop = rect.top;\n const elementHeight = rect.height;\n\n // Calculate scroll progress (0 to 1)\n const scrollProgress = Math.max(0, Math.min(1,\n (windowHeight - elementTop) / (windowHeight + elementHeight)\n ));\n\n // Calculate offset based on speed and direction\n const offset = (scrollProgress - 0.5) * config.speed * 100;\n\n config.layers.forEach((layer, _index) => {\n // Different layers can have different speeds\n const layerSpeed = layer.dataset.parallaxSpeed ? parseFloat(layer.dataset.parallaxSpeed) : 1;\n const layerOffset = offset * layerSpeed;\n\n if (config.direction === 'horizontal') {\n layer.style.transform = `translateX(${layerOffset}px)`;\n } else {\n layer.style.transform = `translateY(${layerOffset}px)`;\n }\n });\n },\n\n /**\n * Destroy parallax element\n * @param {HTMLElement|string} element - Parallax element or selector\n */\n destroy: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.parallaxElements.has(el)) {\n const config = this.parallaxElements.get(el);\n config.layers.forEach(layer => {\n layer.style.transform = '';\n });\n this.parallaxElements.delete(el);\n }\n },\n\n /**\n * Refresh parallax (recalculate positions)\n */\n refresh: function () {\n this.updateAll();\n },\n\n destroyAll: function () {\n this.parallaxElements.forEach((_config, element) => {\n this.destroy(element);\n });\n this.parallaxElements.clear();\n\n if (this._onScroll) {\n window.removeEventListener('scroll', this._onScroll);\n this._onScroll = null;\n }\n\n if (this._onResize) {\n window.removeEventListener('resize', this._onResize);\n this._onResize = null;\n }\n\n this.isInitialized = false;\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('parallax', Parallax);\n }\n\n // Expose globally\n window.VanduoParallax = Parallax;\n\n})();\n\n", "/**\n * Vanduo Framework - Preloader Component\n * JavaScript functionality for progress bars and loaders\n */\n\n(function() {\n 'use strict';\n\n /**\n * Preloader Component\n */\n const Preloader = {\n /**\n * Initialize preloader components\n */\n init: function() {\n const progressBars = document.querySelectorAll('.progress-bar[data-progress]');\n \n progressBars.forEach(bar => {\n if (!bar.dataset.progressInitialized) {\n this.initProgressBar(bar);\n }\n });\n },\n \n /**\n * Initialize a progress bar\n * @param {HTMLElement} bar - Progress bar element\n */\n initProgressBar: function(bar) {\n bar.dataset.progressInitialized = 'true';\n \n const initialValue = parseInt(bar.dataset.progress) || 0;\n this.setProgress(bar, initialValue, false);\n },\n \n /**\n * Set progress value\n * @param {HTMLElement|string} bar - Progress bar element or selector\n * @param {number} value - Progress value (0-100)\n * @param {boolean} animate - Whether to animate\n */\n setProgress: function(bar, value, animate = true) {\n const el = typeof bar === 'string' ? document.querySelector(bar) : bar;\n \n if (!el) {\n return;\n }\n \n // Clamp value between 0 and 100\n value = Math.max(0, Math.min(100, value));\n \n // Update width\n if (animate) {\n el.style.transition = 'width var(--transition-duration-slow) var(--transition-ease)';\n } else {\n el.style.transition = 'none';\n setTimeout(() => {\n el.style.transition = '';\n }, 0);\n }\n \n el.style.width = value + '%';\n el.setAttribute('aria-valuenow', value);\n el.setAttribute('aria-valuemin', 0);\n el.setAttribute('aria-valuemax', 100);\n \n // Update text if exists\n const text = el.querySelector('.progress-text');\n if (text) {\n text.textContent = value + '%';\n }\n \n // Dispatch event\n el.dispatchEvent(new CustomEvent('progress:update', {\n bubbles: true,\n detail: { value, max: 100 }\n }));\n \n // Complete event\n if (value >= 100) {\n el.dispatchEvent(new CustomEvent('progress:complete', {\n bubbles: true,\n detail: { value, max: 100 }\n }));\n }\n },\n \n /**\n * Animate progress from current to target\n * @param {HTMLElement|string} bar - Progress bar element or selector\n * @param {number} targetValue - Target progress value (0-100)\n * @param {number} duration - Animation duration in ms\n */\n animateProgress: function(bar, targetValue, duration = 1000) {\n const el = typeof bar === 'string' ? document.querySelector(bar) : bar;\n \n if (!el) {\n return;\n }\n \n const startValue = parseInt(el.style.width) || 0;\n const difference = targetValue - startValue;\n const startTime = performance.now();\n \n const animate = (currentTime) => {\n const elapsed = currentTime - startTime;\n const progress = Math.min(elapsed / duration, 1);\n \n // Easing function (ease-out)\n const easeOut = 1 - Math.pow(1 - progress, 3);\n const currentValue = startValue + (difference * easeOut);\n \n this.setProgress(el, currentValue, false);\n \n if (progress < 1) {\n requestAnimationFrame(animate);\n }\n };\n \n requestAnimationFrame(animate);\n },\n \n /**\n * Show preloader\n * @param {HTMLElement|string} preloader - Preloader element or selector\n */\n show: function(preloader) {\n const el = typeof preloader === 'string' ? document.querySelector(preloader) : preloader;\n if (el) {\n el.style.display = 'inline-block';\n el.setAttribute('aria-hidden', 'false');\n }\n },\n \n /**\n * Hide preloader\n * @param {HTMLElement|string} preloader - Preloader element or selector\n */\n hide: function(preloader) {\n const el = typeof preloader === 'string' ? document.querySelector(preloader) : preloader;\n if (el) {\n el.style.display = 'none';\n el.setAttribute('aria-hidden', 'true');\n }\n },\n \n /**\n * Toggle preloader\n * @param {HTMLElement|string} preloader - Preloader element or selector\n */\n toggle: function(preloader) {\n const el = typeof preloader === 'string' ? document.querySelector(preloader) : preloader;\n if (el) {\n if (el.style.display === 'none' || el.getAttribute('aria-hidden') === 'true') {\n this.show(el);\n } else {\n this.hide(el);\n }\n }\n },\n\n /**\n * Destroy all progress bar instances\n */\n destroyAll: function() {\n const progressBars = document.querySelectorAll('.progress-bar[data-progress-initialized=\"true\"]');\n progressBars.forEach(bar => {\n delete bar.dataset.progressInitialized;\n });\n }\n };\n \n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('preloader', Preloader);\n }\n \n // Expose globally\n window.VanduoPreloader = Preloader;\n \n})();\n\n", "/**\n * Vanduo Framework - Select Component\n * Custom select dropdown with enhanced functionality\n */\n\n(function () {\n 'use strict';\n\n /**\n * Select Component\n */\n const Select = {\n // Store initialized selects and their cleanup functions\n instances: new Map(),\n\n /**\n * Initialize select components\n */\n init: function () {\n const selects = document.querySelectorAll('select.vd-custom-select-input, select[data-custom-select]');\n\n selects.forEach(select => {\n if (this.instances.has(select)) {\n return;\n }\n this.initSelect(select);\n });\n },\n\n /**\n * Initialize a single select\n * @param {HTMLSelectElement} select - Select element\n */\n initSelect: function (select) {\n // Skip if already has custom wrapper\n if (select.closest('.vd-custom-select-wrapper')) {\n return;\n }\n\n const cleanupFunctions = [];\n\n // Create wrapper\n const wrapper = document.createElement('div');\n wrapper.className = 'custom-select-wrapper';\n select.parentNode.insertBefore(wrapper, select);\n wrapper.appendChild(select);\n\n // Create custom button\n const button = document.createElement('button');\n button.type = 'button';\n button.className = 'custom-select-button';\n button.setAttribute('aria-haspopup', 'listbox');\n button.setAttribute('aria-expanded', 'false');\n button.setAttribute('aria-labelledby', select.id || this.generateId(select));\n\n // Create dropdown\n const dropdown = document.createElement('div');\n dropdown.className = 'custom-select-dropdown';\n dropdown.setAttribute('role', 'listbox');\n\n // Create search input if searchable\n if (select.dataset.searchable === 'true') {\n const searchWrapper = document.createElement('div');\n searchWrapper.className = 'custom-select-search';\n const searchInput = document.createElement('input');\n searchInput.type = 'text';\n searchInput.className = 'input input-sm';\n searchInput.placeholder = 'Search...';\n searchInput.setAttribute('aria-label', 'Search options');\n searchWrapper.appendChild(searchInput);\n dropdown.appendChild(searchWrapper);\n\n const filterFn = (e) => {\n this.filterOptions(dropdown, e.target.value);\n };\n const searchHandler = typeof debounce === 'function' ? debounce(filterFn, 150) : filterFn;\n searchInput.addEventListener('input', searchHandler);\n cleanupFunctions.push(() => searchInput.removeEventListener('input', searchHandler));\n }\n\n // Build options\n this.buildOptions(select, dropdown, button);\n\n wrapper.appendChild(button);\n wrapper.appendChild(dropdown);\n\n // Update button text\n this.updateButtonText(select, button);\n\n // Event listeners\n const buttonClickHandler = (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggleDropdown(button, dropdown);\n };\n button.addEventListener('click', buttonClickHandler);\n cleanupFunctions.push(() => button.removeEventListener('click', buttonClickHandler));\n\n // Close on outside click\n const documentClickHandler = (e) => {\n if (!wrapper.contains(e.target) && dropdown.classList.contains('is-open')) {\n this.closeDropdown(button, dropdown);\n }\n };\n document.addEventListener('click', documentClickHandler);\n cleanupFunctions.push(() => document.removeEventListener('click', documentClickHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, select, button, dropdown);\n };\n button.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => button.removeEventListener('keydown', keydownHandler));\n\n // Update on select change\n const changeHandler = () => {\n this.updateButtonText(select, button);\n this.updateSelectedOptions(select, dropdown);\n };\n select.addEventListener('change', changeHandler);\n cleanupFunctions.push(() => select.removeEventListener('change', changeHandler));\n\n this.instances.set(select, { wrapper, button, dropdown, cleanup: cleanupFunctions, typeaheadBuffer: '', typeaheadTimer: null });\n },\n\n /**\n * Build options in dropdown\n * @param {HTMLSelectElement} select - Select element\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {HTMLElement} button - Button element\n */\n buildOptions: function (select, dropdown, button) {\n const options = select.querySelectorAll('option');\n const fragment = document.createDocumentFragment();\n\n options.forEach((option, index) => {\n if (option.parentElement.tagName === 'OPTGROUP') {\n // Handle option groups\n const group = option.parentElement;\n if (!dropdown.querySelector(`[data-group=\"${group.label}\"]`)) {\n const groupElement = document.createElement('div');\n groupElement.className = 'custom-select-option-group';\n groupElement.textContent = group.label;\n groupElement.dataset.group = group.label;\n fragment.appendChild(groupElement);\n }\n }\n\n if (option.value === '' && !option.textContent.trim()) {\n return; // Skip empty options\n }\n\n const optionElement = document.createElement('div');\n optionElement.className = 'custom-select-option';\n optionElement.textContent = option.textContent;\n optionElement.setAttribute('role', 'option');\n optionElement.setAttribute('data-value', option.value);\n optionElement.setAttribute('data-index', index);\n\n if (option.selected) {\n optionElement.classList.add('is-selected');\n optionElement.setAttribute('aria-selected', 'true');\n }\n\n if (option.disabled) {\n optionElement.classList.add('is-disabled');\n optionElement.setAttribute('aria-disabled', 'true');\n }\n\n optionElement.addEventListener('click', (_e) => {\n if (!option.disabled) {\n this.selectOption(select, option, optionElement, button, dropdown);\n }\n });\n\n fragment.appendChild(optionElement);\n });\n\n dropdown.appendChild(fragment);\n },\n\n /**\n * Select an option\n * @param {HTMLSelectElement} select - Select element\n * @param {HTMLOptionElement} option - Option element\n * @param {HTMLElement} optionElement - Custom option element\n * @param {HTMLElement} button - Button element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n selectOption: function (select, option, optionElement, button, dropdown) {\n if (select.multiple) {\n // Multi-select\n option.selected = !option.selected;\n optionElement.classList.toggle('is-selected');\n optionElement.setAttribute('aria-selected', option.selected);\n } else {\n // Single select\n select.value = option.value;\n select.dispatchEvent(new Event('change', { bubbles: true }));\n this.closeDropdown(button, dropdown);\n }\n\n this.updateButtonText(select, button);\n },\n\n /**\n * Update button text\n * @param {HTMLSelectElement} select - Select element\n * @param {HTMLElement} button - Button element\n */\n updateButtonText: function (select, button) {\n if (select.multiple) {\n const selected = Array.from(select.selectedOptions);\n if (selected.length === 0) {\n button.textContent = select.dataset.placeholder || 'Select options...';\n } else if (selected.length === 1) {\n button.textContent = selected[0].textContent;\n } else {\n button.textContent = `${selected.length} selected`;\n }\n } else {\n const selectedOption = select.options[select.selectedIndex];\n button.textContent = selectedOption ? selectedOption.textContent : (select.dataset.placeholder || 'Select...');\n }\n },\n\n /**\n * Update selected options in dropdown\n * @param {HTMLSelectElement} select - Select element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n updateSelectedOptions: function (select, dropdown) {\n const options = dropdown.querySelectorAll('.custom-select-option');\n const selectedValues = Array.from(select.selectedOptions).map(opt => opt.value);\n\n options.forEach(optionEl => {\n const value = optionEl.dataset.value;\n if (selectedValues.includes(value)) {\n optionEl.classList.add('is-selected');\n optionEl.setAttribute('aria-selected', 'true');\n } else {\n optionEl.classList.remove('is-selected');\n optionEl.setAttribute('aria-selected', 'false');\n }\n });\n },\n\n /**\n * Toggle dropdown\n * @param {HTMLElement} button - Button element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n toggleDropdown: function (button, dropdown) {\n const isOpen = dropdown.classList.contains('is-open');\n\n if (isOpen) {\n this.closeDropdown(button, dropdown);\n } else {\n this.openDropdown(button, dropdown);\n }\n },\n\n /**\n * Open dropdown\n * @param {HTMLElement} button - Button element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n openDropdown: function (button, dropdown) {\n dropdown.classList.add('is-open');\n button.setAttribute('aria-expanded', 'true');\n\n // Focus first option\n const firstOption = dropdown.querySelector('.custom-select-option:not(.is-disabled)');\n if (firstOption) {\n firstOption.focus();\n }\n },\n\n /**\n * Close dropdown\n * @param {HTMLElement} button - Button element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n closeDropdown: function (button, dropdown) {\n dropdown.classList.remove('is-open');\n button.setAttribute('aria-expanded', 'false');\n },\n\n /**\n * Handle keyboard navigation\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLSelectElement} select - Select element\n * @param {HTMLElement} button - Button element\n * @param {HTMLElement} dropdown - Dropdown container\n */\n handleKeydown: function (e, select, button, dropdown) {\n const isOpen = dropdown.classList.contains('is-open');\n const options = Array.from(dropdown.querySelectorAll('.custom-select-option:not(.is-disabled)'));\n const currentIndex = options.findIndex(opt => opt === document.activeElement);\n\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n if (isOpen && currentIndex >= 0) {\n const optionEl = options[currentIndex];\n const option = select.options[parseInt(optionEl.dataset.index)];\n this.selectOption(select, option, optionEl, button, dropdown);\n } else {\n this.openDropdown(button, dropdown);\n }\n break;\n\n case 'Escape':\n if (isOpen) {\n e.preventDefault();\n this.closeDropdown(button, dropdown);\n button.focus();\n }\n break;\n\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen) {\n this.openDropdown(button, dropdown);\n } else {\n const nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0;\n options[nextIndex].focus();\n }\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n if (isOpen) {\n const prevIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1;\n options[prevIndex].focus();\n }\n break;\n\n case 'Home':\n if (isOpen) {\n e.preventDefault();\n options[0].focus();\n }\n break;\n\n case 'End':\n if (isOpen) {\n e.preventDefault();\n options[options.length - 1].focus();\n }\n break;\n\n default:\n // Typeahead: jump to matching option when typing printable characters\n if (isOpen && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\n // Per-instance typeahead state to avoid cross-instance corruption\n const instance = this.instances.get(select);\n if (!instance) break;\n clearTimeout(instance.typeaheadTimer);\n instance.typeaheadBuffer += e.key.toLowerCase();\n\n const match = options.find(opt =>\n opt.textContent.trim().toLowerCase().startsWith(instance.typeaheadBuffer)\n );\n if (match) {\n match.focus();\n }\n\n instance.typeaheadTimer = setTimeout(() => {\n instance.typeaheadBuffer = '';\n }, 500);\n }\n break;\n }\n },\n\n /**\n * Filter options by search term\n * @param {HTMLElement} dropdown - Dropdown container\n * @param {string} searchTerm - Search term\n */\n filterOptions: function (dropdown, searchTerm) {\n const options = dropdown.querySelectorAll('.vd-custom-select-option');\n const term = searchTerm.toLowerCase();\n\n options.forEach(option => {\n const text = option.textContent.toLowerCase();\n if (text.includes(term)) {\n option.style.display = 'block';\n } else {\n option.style.display = 'none';\n }\n });\n },\n\n /**\n * Generate unique ID\n * @param {HTMLElement} element - Element\n * @returns {string} Generated ID\n */\n generateId: function (element) {\n if (element.id) {\n return element.id;\n }\n const id = 'select-' + Math.random().toString(36).substr(2, 9);\n element.id = id;\n return id;\n },\n\n /**\n * Destroy a select instance and clean up event listeners\n * @param {HTMLSelectElement} select - Select element\n */\n destroy: function (select) {\n const instance = this.instances.get(select);\n if (!instance) return;\n\n instance.cleanup.forEach(fn => fn());\n\n // Unwrap the select element back to its original parent\n if (instance.wrapper && instance.wrapper.parentNode) {\n instance.wrapper.parentNode.insertBefore(select, instance.wrapper);\n instance.wrapper.parentNode.removeChild(instance.wrapper);\n }\n\n this.instances.delete(select);\n },\n\n /**\n * Destroy all select instances\n */\n destroyAll: function () {\n this.instances.forEach((instance, select) => {\n this.destroy(select);\n });\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('select', Select);\n }\n\n})();\n\n", "/**\n * Vanduo Framework - Sidenav Component\n * JavaScript functionality for side navigation drawer\n */\n\n(function() {\n 'use strict';\n\n /**\n * Sidenav Component\n */\n const Sidenav = {\n sidenavs: new Map(),\n breakpoint: 992, // Desktop breakpoint\n \n // Global cleanup functions (toggles, resize)\n _globalCleanups: [],\n\n isFixedVariant: function(sidenav) {\n return sidenav.classList.contains('vd-sidenav-fixed') || sidenav.classList.contains('sidenav-fixed');\n },\n\n isPushVariant: function(sidenav) {\n return sidenav.classList.contains('vd-sidenav-push') || sidenav.classList.contains('sidenav-push');\n },\n\n isRightVariant: function(sidenav) {\n return sidenav.classList.contains('vd-sidenav-right') || sidenav.classList.contains('sidenav-right');\n },\n\n /**\n * Initialize sidenav components\n */\n init: function() {\n const sidenavs = document.querySelectorAll('.vd-sidenav, .vd-offcanvas');\n\n sidenavs.forEach(sidenav => {\n if (this.sidenavs.has(sidenav)) {\n return;\n }\n this.initSidenav(sidenav);\n });\n\n // Handle toggle buttons\n const toggles = document.querySelectorAll('[data-sidenav-toggle]');\n toggles.forEach(toggle => {\n if (toggle.dataset.sidenavToggleInitialized) return;\n toggle.dataset.sidenavToggleInitialized = 'true';\n\n const toggleClickHandler = (e) => {\n e.preventDefault();\n const targetId = toggle.dataset.sidenavToggle;\n const sidenav = document.querySelector(targetId);\n if (sidenav) {\n this.toggle(sidenav);\n }\n };\n toggle.addEventListener('click', toggleClickHandler);\n this._globalCleanups.push(() => toggle.removeEventListener('click', toggleClickHandler));\n });\n\n // Handle responsive behavior\n this.handleResize();\n const resizeHandler = () => {\n this.handleResize();\n };\n window.addEventListener('resize', resizeHandler);\n this._globalCleanups.push(() => window.removeEventListener('resize', resizeHandler));\n },\n\n /**\n * Initialize a single sidenav\n * @param {HTMLElement} sidenav - Sidenav element\n */\n initSidenav: function(sidenav) {\n // Apply data-vd-position direction class if specified\n const position = sidenav.getAttribute('data-vd-position');\n if (position) {\n const prefix = sidenav.classList.contains('vd-offcanvas') ? 'vd-offcanvas' : 'vd-sidenav';\n sidenav.classList.add(prefix + '-' + position);\n }\n\n const overlay = this.createOverlay(sidenav);\n const closeButton = sidenav.querySelector('.vd-sidenav-close, .vd-offcanvas-close');\n const cleanupFunctions = [];\n\n // Set ARIA attributes\n sidenav.setAttribute('role', 'navigation');\n sidenav.setAttribute('aria-hidden', 'true');\n\n // Close button handler\n if (closeButton) {\n const closeHandler = () => {\n this.close(sidenav);\n };\n closeButton.addEventListener('click', closeHandler);\n cleanupFunctions.push(() => closeButton.removeEventListener('click', closeHandler));\n }\n\n // Overlay click handler\n const overlayClickHandler = () => {\n if (sidenav.dataset.backdrop !== 'static') {\n this.close(sidenav);\n }\n };\n overlay.addEventListener('click', overlayClickHandler);\n cleanupFunctions.push(() => overlay.removeEventListener('click', overlayClickHandler));\n\n // ESC key handler\n const escKeyHandler = (e) => {\n if (e.key === 'Escape' && sidenav.classList.contains('is-open')) {\n if (sidenav.dataset.keyboard !== 'false') {\n this.close(sidenav);\n }\n }\n };\n document.addEventListener('keydown', escKeyHandler);\n cleanupFunctions.push(() => document.removeEventListener('keydown', escKeyHandler));\n\n this.sidenavs.set(sidenav, { overlay, cleanup: cleanupFunctions });\n },\n \n /**\n * Create overlay element\n * @param {HTMLElement} sidenav - Sidenav element\n * @returns {HTMLElement} Overlay element\n */\n createOverlay: function(sidenav) {\n let overlay = sidenav.querySelector('.vd-sidenav-overlay');\n \n if (!overlay) {\n overlay = document.createElement('div');\n overlay.className = 'vd-sidenav-overlay';\n document.body.appendChild(overlay);\n }\n \n return overlay;\n },\n \n /**\n * Open sidenav\n * @param {HTMLElement|string} sidenav - Sidenav element or selector\n */\n open: function(sidenav) {\n const el = typeof sidenav === 'string' ? document.querySelector(sidenav) : sidenav;\n \n if (!el || !this.sidenavs.has(el)) {\n return;\n }\n \n const { overlay } = this.sidenavs.get(el);\n \n // Show overlay (if not fixed)\n if (!this.isFixedVariant(el)) {\n overlay.classList.add('is-visible');\n }\n \n // Open sidenav\n el.classList.add('is-open');\n el.setAttribute('aria-hidden', 'false');\n \n // Lock body scroll\n document.body.classList.add('body-sidenav-open');\n \n // Handle push variant\n if (this.isPushVariant(el)) {\n this.handlePushVariant(el, true);\n }\n \n // Dispatch event\n el.dispatchEvent(new CustomEvent('sidenav:open', { bubbles: true }));\n },\n \n /**\n * Close sidenav\n * @param {HTMLElement|string} sidenav - Sidenav element or selector\n */\n close: function(sidenav) {\n const el = typeof sidenav === 'string' ? document.querySelector(sidenav) : sidenav;\n \n if (!el || !this.sidenavs.has(el)) {\n return;\n }\n \n const { overlay } = this.sidenavs.get(el);\n \n // Hide overlay\n overlay.classList.remove('is-visible');\n \n // Close sidenav\n el.classList.remove('is-open');\n el.setAttribute('aria-hidden', 'true');\n \n // Unlock body scroll\n document.body.classList.remove('body-sidenav-open');\n \n // Handle push variant\n if (this.isPushVariant(el)) {\n this.handlePushVariant(el, false);\n }\n \n // Dispatch event\n el.dispatchEvent(new CustomEvent('sidenav:close', { bubbles: true }));\n },\n \n /**\n * Toggle sidenav\n * @param {HTMLElement|string} sidenav - Sidenav element or selector\n */\n toggle: function(sidenav) {\n const el = typeof sidenav === 'string' ? document.querySelector(sidenav) : sidenav;\n if (el) {\n if (el.classList.contains('is-open')) {\n this.close(el);\n } else {\n this.open(el);\n }\n }\n },\n \n /**\n * Handle push variant\n * @param {HTMLElement} sidenav - Sidenav element\n * @param {boolean} isOpen - Whether sidenav is open\n */\n handlePushVariant: function(sidenav, isOpen) {\n // Find the main content wrapper\n const content = document.querySelector('main, .main-content, .content, [role=\"main\"]') || document.body;\n \n if (isOpen) {\n if (window.innerWidth >= this.breakpoint) {\n if (this.isRightVariant(sidenav)) {\n content.style.marginRight = sidenav.offsetWidth + 'px';\n } else {\n content.style.marginLeft = sidenav.offsetWidth + 'px';\n }\n }\n } else {\n content.style.marginLeft = '';\n content.style.marginRight = '';\n }\n },\n \n /**\n * Handle window resize\n */\n handleResize: function() {\n this.sidenavs.forEach(({ overlay }, sidenav) => {\n // Close overlay sidenavs on resize to desktop if they're open\n if (window.innerWidth >= this.breakpoint) {\n if (this.isFixedVariant(sidenav) && !sidenav.classList.contains('is-open')) {\n // Fixed sidenavs should be visible on desktop\n sidenav.classList.add('is-open');\n sidenav.setAttribute('aria-hidden', 'false');\n overlay.classList.remove('is-visible');\n }\n } else {\n // On mobile, fixed sidenavs become overlay\n if (this.isFixedVariant(sidenav) && sidenav.classList.contains('is-open')) {\n this.close(sidenav);\n }\n }\n });\n },\n\n /**\n * Destroy a sidenav instance and clean up event listeners\n * @param {HTMLElement} sidenav - Sidenav element\n */\n destroy: function(sidenav) {\n const data = this.sidenavs.get(sidenav);\n if (!data) return;\n\n // Close if open\n if (sidenav.classList.contains('is-open')) {\n this.close(sidenav);\n }\n\n data.cleanup.forEach(fn => fn());\n\n // Remove created overlay\n if (data.overlay && data.overlay.parentNode) {\n data.overlay.parentNode.removeChild(data.overlay);\n }\n\n this.sidenavs.delete(sidenav);\n },\n\n /**\n * Destroy all sidenav instances\n */\n destroyAll: function() {\n this.sidenavs.forEach((data, sidenav) => {\n this.destroy(sidenav);\n });\n this._globalCleanups.forEach(fn => fn());\n this._globalCleanups = [];\n }\n };\n \n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('sidenav', Sidenav);\n }\n \n // Expose globally\n window.VanduoSidenav = Sidenav;\n \n})();\n\n", "/**\n * Vanduo Framework - Tabs Component\n * Tabbed content navigation with keyboard support\n */\n\n(function() {\n 'use strict';\n\n /**\n * Tabs Component\n */\n const Tabs = {\n // Store initialized tab containers and their cleanup functions\n instances: new Map(),\n\n /**\n * Initialize all tab components\n */\n init: function() {\n const tabContainers = document.querySelectorAll('.vd-tabs, [data-tabs]');\n\n tabContainers.forEach(container => {\n if (this.instances.has(container)) {\n return;\n }\n this.initTabs(container);\n });\n },\n\n /**\n * Initialize a single tab container\n * @param {HTMLElement} container - Tabs container element\n */\n initTabs: function(container) {\n const tabList = container.querySelector('.vd-tab-list, [role=\"tablist\"]');\n const tabLinks = container.querySelectorAll('.vd-tab-link, [data-tab]');\n const tabPanes = container.querySelectorAll('.vd-tab-pane, [data-tab-pane]');\n\n if (!tabList || tabLinks.length === 0) return;\n\n const cleanupFunctions = [];\n\n // Set up ARIA attributes\n tabList.setAttribute('role', 'tablist');\n\n tabLinks.forEach((link, index) => {\n const tabId = link.dataset.tab || link.getAttribute('href')?.replace('#', '') || `tab-${index}`;\n const pane = this.findPane(container, tabId, tabPanes);\n\n // Set up tab attributes\n link.setAttribute('role', 'tab');\n link.setAttribute('aria-selected', link.classList.contains('is-active') ? 'true' : 'false');\n link.setAttribute('tabindex', link.classList.contains('is-active') ? '0' : '-1');\n\n if (!link.id) {\n link.id = `tab-btn-${tabId}`;\n }\n\n // Set up pane attributes\n if (pane) {\n pane.setAttribute('role', 'tabpanel');\n pane.setAttribute('aria-labelledby', link.id);\n if (!pane.id) {\n pane.id = `tab-pane-${tabId}`;\n }\n link.setAttribute('aria-controls', pane.id);\n }\n\n // Click handler\n const clickHandler = (e) => {\n e.preventDefault();\n if (!link.classList.contains('disabled') && !link.disabled) {\n this.activateTab(container, link, tabLinks, tabPanes);\n }\n };\n link.addEventListener('click', clickHandler);\n cleanupFunctions.push(() => link.removeEventListener('click', clickHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, container, link, tabLinks, tabPanes);\n };\n link.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => link.removeEventListener('keydown', keydownHandler));\n });\n\n // Ensure one tab is active\n const activeTab = container.querySelector('.vd-tab-link.is-active, [data-tab].is-active');\n if (!activeTab && tabLinks.length > 0) {\n this.activateTab(container, tabLinks[0], tabLinks, tabPanes);\n }\n\n this.instances.set(container, { cleanup: cleanupFunctions });\n },\n\n /**\n * Find the pane associated with a tab\n * @param {HTMLElement} container - Tabs container\n * @param {string} tabId - Tab identifier\n * @param {NodeList} tabPanes - All tab panes\n * @returns {HTMLElement|null} The matching pane\n */\n findPane: function(container, tabId, tabPanes) {\n // Try data attribute first\n let pane = container.querySelector(`[data-tab-pane=\"${tabId}\"]`);\n\n // Try ID\n if (!pane) {\n pane = container.querySelector(`#${tabId}`);\n }\n\n // Try matching by index\n if (!pane) {\n const tabLinks = container.querySelectorAll('.vd-tab-link, [data-tab]');\n tabLinks.forEach((link, index) => {\n const linkTabId = link.dataset.tab || link.getAttribute('href')?.replace('#', '');\n if (linkTabId === tabId && tabPanes[index]) {\n pane = tabPanes[index];\n }\n });\n }\n\n return pane;\n },\n\n /**\n * Activate a tab\n * @param {HTMLElement} container - Tabs container\n * @param {HTMLElement} tab - Tab to activate\n * @param {NodeList} allTabs - All tab links\n * @param {NodeList} allPanes - All tab panes\n */\n activateTab: function(container, tab, allTabs, allPanes) {\n const tabId = tab.dataset.tab || tab.getAttribute('href')?.replace('#', '') || tab.id;\n\n // Deactivate all tabs\n allTabs.forEach(t => {\n t.classList.remove('is-active');\n t.setAttribute('aria-selected', 'false');\n t.setAttribute('tabindex', '-1');\n\n // Also handle parent li if exists\n if (t.parentElement && t.parentElement.classList.contains('tab-item')) {\n t.parentElement.classList.remove('is-active');\n }\n });\n\n // Hide all panes\n allPanes.forEach(p => {\n p.classList.remove('is-active');\n });\n\n // Activate selected tab\n tab.classList.add('is-active');\n tab.setAttribute('aria-selected', 'true');\n tab.setAttribute('tabindex', '0');\n\n // Also handle parent li if exists\n if (tab.parentElement && tab.parentElement.classList.contains('tab-item')) {\n tab.parentElement.classList.add('is-active');\n }\n\n // Show corresponding pane\n const pane = this.findPane(container, tabId, allPanes);\n if (pane) {\n pane.classList.add('is-active');\n }\n\n // Dispatch custom event\n const event = new CustomEvent('tab:change', {\n bubbles: true,\n detail: {\n tab: tab,\n pane: pane,\n tabId: tabId\n }\n });\n container.dispatchEvent(event);\n },\n\n /**\n * Handle keyboard navigation\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} container - Tabs container\n * @param {HTMLElement} currentTab - Currently focused tab\n * @param {NodeList} allTabs - All tab links\n * @param {NodeList} allPanes - All tab panes\n */\n handleKeydown: function(e, container, currentTab, allTabs, allPanes) {\n const isVertical = container.classList.contains('tabs-vertical');\n const tabs = Array.from(allTabs).filter(t => !t.classList.contains('disabled') && !t.disabled);\n const currentIndex = tabs.indexOf(currentTab);\n\n let newIndex = currentIndex;\n\n switch (e.key) {\n case 'ArrowLeft':\n if (!isVertical) {\n e.preventDefault();\n newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;\n }\n break;\n\n case 'ArrowRight':\n if (!isVertical) {\n e.preventDefault();\n newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;\n }\n break;\n\n case 'ArrowUp':\n if (isVertical) {\n e.preventDefault();\n newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;\n }\n break;\n\n case 'ArrowDown':\n if (isVertical) {\n e.preventDefault();\n newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;\n }\n break;\n\n case 'Home':\n e.preventDefault();\n newIndex = 0;\n break;\n\n case 'End':\n e.preventDefault();\n newIndex = tabs.length - 1;\n break;\n\n case 'Enter':\n case ' ':\n e.preventDefault();\n this.activateTab(container, currentTab, allTabs, allPanes);\n return;\n\n default:\n return;\n }\n\n // Focus and activate new tab\n if (newIndex !== currentIndex) {\n tabs[newIndex].focus();\n this.activateTab(container, tabs[newIndex], allTabs, allPanes);\n }\n },\n\n /**\n * Programmatically show a tab\n * @param {string|HTMLElement} tab - Tab identifier or element\n */\n show: function(tab) {\n let tabElement;\n\n if (typeof tab === 'string') {\n tabElement = document.querySelector(`[data-tab=\"${tab}\"], [href=\"#${tab}\"]`);\n } else {\n tabElement = tab;\n }\n\n if (!tabElement) return;\n\n const container = tabElement.closest('.vd-tabs, [data-tabs]');\n if (!container) return;\n\n const allTabs = container.querySelectorAll('.vd-tab-link, [data-tab]');\n const allPanes = container.querySelectorAll('.vd-tab-pane, [data-tab-pane]');\n\n this.activateTab(container, tabElement, allTabs, allPanes);\n },\n\n /**\n * Destroy a tabs instance and clean up event listeners\n * @param {HTMLElement} container - Tabs container\n */\n destroy: function(container) {\n const instance = this.instances.get(container);\n if (!instance) return;\n\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(container);\n },\n\n /**\n * Destroy all tabs instances\n */\n destroyAll: function() {\n this.instances.forEach((instance, container) => {\n this.destroy(container);\n });\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tabs', Tabs);\n }\n\n})();\n", "/**\n * Vanduo Framework - Theme Customizer\n * A comprehensive theme customization component for the navbar\n * Handles primary color, neutral color, radius, font, and color mode\n */\n\n(function () {\n 'use strict';\n\n const ThemeCustomizer = {\n // Storage keys\n STORAGE_KEYS: {\n PRIMARY: 'vanduo-primary-color',\n NEUTRAL: 'vanduo-neutral-color',\n RADIUS: 'vanduo-radius',\n FONT: 'vanduo-font-preference',\n THEME: 'vanduo-theme-preference'\n },\n\n // Default values\n DEFAULTS: {\n PRIMARY_LIGHT: 'black',\n PRIMARY_DARK: 'amber',\n NEUTRAL: 'neutral',\n RADIUS: '0.5',\n FONT: 'ubuntu',\n THEME: 'system'\n },\n\n // Primary color definitions (Open Color based)\n PRIMARY_COLORS: {\n 'black': { name: 'Black', color: '#000000' },\n 'red': { name: 'Red', color: '#fa5252' },\n 'orange': { name: 'Orange', color: '#fd7e14' },\n 'amber': { name: 'Amber', color: '#f59f00' },\n 'yellow': { name: 'Yellow', color: '#fcc419' },\n 'lime': { name: 'Lime', color: '#82c91e' },\n 'green': { name: 'Green', color: '#40c057' },\n 'emerald': { name: 'Emerald', color: '#20c997' },\n 'teal': { name: 'Teal', color: '#12b886' },\n 'cyan': { name: 'Cyan', color: '#22b8cf' },\n 'sky': { name: 'Sky', color: '#3bc9db' },\n 'blue': { name: 'Blue', color: '#228be6' },\n 'indigo': { name: 'Indigo', color: '#4c6ef5' },\n 'violet': { name: 'Violet', color: '#7950f2' },\n 'purple': { name: 'Purple', color: '#be4bdb' },\n 'fuchsia': { name: 'Fuchsia', color: '#f06595' },\n 'pink': { name: 'Pink', color: '#e64980' },\n 'rose': { name: 'Rose', color: '#ff8787' }\n },\n\n // Neutral color definitions\n NEUTRAL_COLORS: {\n 'slate': { name: 'Slate', color: '#64748b' },\n 'gray': { name: 'Gray', color: '#6b7280' },\n 'zinc': { name: 'Zinc', color: '#71717a' },\n 'neutral': { name: 'Neutral', color: '#737373' },\n 'stone': { name: 'Stone', color: '#78716c' }\n },\n\n // Radius options\n RADIUS_OPTIONS: ['0', '0.125', '0.25', '0.375', '0.5'],\n\n // Font options\n FONT_OPTIONS: {\n 'jetbrains-mono': { name: 'JetBrains Mono', family: \"'JetBrains Mono', monospace\" },\n 'inter': { name: 'Inter', family: \"'Inter', sans-serif\" },\n 'source-sans': { name: 'Source Sans 3', family: \"'Source Sans 3', sans-serif\" },\n 'fira-sans': { name: 'Fira Sans', family: \"'Fira Sans', sans-serif\" },\n 'ibm-plex': { name: 'IBM Plex Sans', family: \"'IBM Plex Sans', sans-serif\" },\n 'system': { name: 'System Default', family: null },\n // Google Fonts Collection\n 'ubuntu': { name: 'Ubuntu', family: \"'Ubuntu', sans-serif\" },\n 'open-sans': { name: 'Open Sans', family: \"'Open Sans', sans-serif\" },\n 'rubik': { name: 'Rubik', family: \"'Rubik', sans-serif\" },\n 'titillium-web': { name: 'Titillium Web', family: \"'Titillium Web', sans-serif\" }\n },\n\n // Theme mode options\n THEME_MODES: ['system', 'dark', 'light'],\n\n // State\n state: {\n primary: null,\n neutral: null,\n radius: null,\n font: null,\n theme: null,\n isOpen: false\n },\n\n isInitialized: false,\n _cleanup: [],\n\n // DOM references\n elements: {\n customizer: null,\n trigger: null,\n panel: null,\n overlay: null\n },\n\n /**\n * Initialize the Theme Customizer\n */\n init: function () {\n if (this.isInitialized) {\n this.bindExistingElements();\n this.bindPanelEvents();\n this.updateUI();\n return;\n }\n\n this.isInitialized = true;\n this._cleanup = [];\n\n this.loadPreferences();\n this.applyAllPreferences();\n this.bindExistingElements();\n this.bindEvents();\n\n console.log('Vanduo Theme Customizer initialized');\n },\n\n addListener: function (target, event, handler, options) {\n if (!target) return;\n target.addEventListener(event, handler, options);\n this._cleanup.push(() => target.removeEventListener(event, handler, options));\n },\n\n /**\n * Get default primary color based on theme\n */\n getDefaultPrimary: function (theme) {\n if (theme === 'system') {\n if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {\n return this.DEFAULTS.PRIMARY_DARK;\n }\n return this.DEFAULTS.PRIMARY_LIGHT;\n }\n return theme === 'dark' ? this.DEFAULTS.PRIMARY_DARK : this.DEFAULTS.PRIMARY_LIGHT;\n },\n\n /**\n * Load preferences from localStorage\n */\n loadPreferences: function () {\n this.state.theme = this.getStorageValue(this.STORAGE_KEYS.THEME, this.DEFAULTS.THEME);\n this.state.primary = this.getStorageValue(this.STORAGE_KEYS.PRIMARY, this.getDefaultPrimary(this.state.theme));\n this._normalizeDefaultPrimaryIfStaleWithStoredTheme();\n this.state.neutral = this.getStorageValue(this.STORAGE_KEYS.NEUTRAL, this.DEFAULTS.NEUTRAL);\n this.state.radius = this.getStorageValue(this.STORAGE_KEYS.RADIUS, this.DEFAULTS.RADIUS);\n this.state.font = this.getStorageValue(this.STORAGE_KEYS.FONT, this.DEFAULTS.FONT);\n },\n\n /**\n * Save a preference to localStorage\n */\n savePreference: function (key, value) {\n this.setStorageValue(key, value);\n },\n\n /**\n * Apply all preferences\n */\n applyAllPreferences: function () {\n this.applyPrimary(this.state.primary);\n this.applyNeutral(this.state.neutral);\n this.applyRadius(this.state.radius);\n this.applyFont(this.state.font);\n this.applyTheme(this.state.theme);\n },\n\n /**\n * Apply primary color\n */\n applyPrimary: function (colorKey) {\n if (!this.PRIMARY_COLORS[colorKey]) {\n colorKey = this.getDefaultPrimary(this.state.theme);\n }\n\n this.state.primary = colorKey;\n document.documentElement.setAttribute('data-primary', colorKey);\n this.savePreference(this.STORAGE_KEYS.PRIMARY, colorKey);\n\n this.dispatchEvent('primary-change', { color: colorKey });\n },\n\n /**\n * Apply neutral color\n */\n applyNeutral: function (neutralKey) {\n if (!this.NEUTRAL_COLORS[neutralKey]) {\n neutralKey = this.DEFAULTS.NEUTRAL;\n }\n\n this.state.neutral = neutralKey;\n document.documentElement.setAttribute('data-neutral', neutralKey);\n this.savePreference(this.STORAGE_KEYS.NEUTRAL, neutralKey);\n\n this.dispatchEvent('neutral-change', { neutral: neutralKey });\n },\n\n /**\n * Apply border radius\n */\n applyRadius: function (radius) {\n if (!this.RADIUS_OPTIONS.includes(radius)) {\n radius = this.DEFAULTS.RADIUS;\n }\n\n this.state.radius = radius;\n document.documentElement.setAttribute('data-radius', radius);\n document.documentElement.style.setProperty('--radius-scale', radius);\n this.savePreference(this.STORAGE_KEYS.RADIUS, radius);\n\n this.dispatchEvent('radius-change', { radius: radius });\n },\n\n /**\n * Apply font family\n */\n applyFont: function (fontKey) {\n if (!this.FONT_OPTIONS[fontKey]) {\n fontKey = this.DEFAULTS.FONT;\n }\n\n this.state.font = fontKey;\n\n if (fontKey === 'system') {\n document.documentElement.removeAttribute('data-font');\n } else {\n document.documentElement.setAttribute('data-font', fontKey);\n }\n\n this.savePreference(this.STORAGE_KEYS.FONT, fontKey);\n\n // Also update the existing FontSwitcher if available\n if (window.FontSwitcher && window.FontSwitcher.setPreference) {\n window.FontSwitcher.state.preference = fontKey;\n window.FontSwitcher.applyFont();\n }\n\n this.dispatchEvent('font-change', { font: fontKey });\n },\n\n /**\n * Apply theme mode\n */\n applyTheme: function (mode) {\n if (!this.THEME_MODES.includes(mode)) {\n mode = this.DEFAULTS.THEME;\n }\n\n // Prevent circular updates\n this._isApplying = true;\n\n // Re-align black/amber when they don't match the effective primary for the target mode.\n // Covers theme toggles and stale localStorage (e.g. amber saved while theme is light).\n if (this.isUsingDefaultPrimary()) {\n const expected = this.getDefaultPrimary(mode);\n if (this.state.primary !== expected) {\n this.applyPrimary(expected);\n }\n }\n\n this.state.theme = mode;\n\n if (mode === 'system') {\n document.documentElement.removeAttribute('data-theme');\n } else {\n document.documentElement.setAttribute('data-theme', mode);\n }\n\n this.savePreference(this.STORAGE_KEYS.THEME, mode);\n\n // Also update the existing ThemeSwitcher if available\n // Only update state, don't call setPreference to avoid circular calls\n if (window.Vanduo && window.Vanduo.components.themeSwitcher) {\n const themeSwitcher = window.Vanduo.components.themeSwitcher;\n if (themeSwitcher.state && themeSwitcher.state.preference !== mode) {\n themeSwitcher.state.preference = mode;\n if (typeof themeSwitcher.setStorageValue === 'function') {\n themeSwitcher.setStorageValue(themeSwitcher.STORAGE_KEY, mode);\n }\n if (typeof themeSwitcher.updateUI === 'function') {\n themeSwitcher.updateUI();\n }\n }\n }\n\n this._isApplying = false;\n this.dispatchEvent('mode-change', { mode: mode });\n },\n\n /**\n * Dispatch custom event\n */\n dispatchEvent: function (type, detail) {\n const event = new CustomEvent('theme:' + type, {\n bubbles: true,\n detail: detail\n });\n document.dispatchEvent(event);\n\n // Also dispatch a general change event\n const changeEvent = new CustomEvent('theme:change', {\n bubbles: true,\n detail: {\n type: type,\n value: detail[Object.keys(detail)[0]],\n state: { ...this.state }\n }\n });\n document.dispatchEvent(changeEvent);\n },\n\n /**\n * Bind to existing DOM elements or create them dynamically\n */\n bindExistingElements: function () {\n // First check for existing full structure\n this.elements.customizer = document.querySelector('.vd-theme-customizer');\n\n if (this.elements.customizer) {\n this.elements.trigger = this.elements.customizer.querySelector('.vd-theme-customizer-trigger');\n this.elements.panel = this.elements.customizer.querySelector('.vd-theme-customizer-panel');\n this.elements.overlay = this.elements.customizer.querySelector('.vd-theme-customizer-overlay');\n } else {\n // Look for standalone trigger button with data attribute\n const standaloneTrigger = document.querySelector('[data-theme-customizer-trigger]');\n if (standaloneTrigger) {\n this.createDynamicPanel(standaloneTrigger);\n }\n }\n\n // Update UI to reflect current state\n this.updateUI();\n },\n\n /**\n * Create the panel dynamically when only a trigger button exists\n */\n createDynamicPanel: function (triggerButton) {\n // Create wrapper\n const wrapper = document.createElement('div');\n wrapper.className = 'vd-theme-customizer';\n\n // Move trigger into wrapper or create reference\n this.elements.trigger = triggerButton;\n\n // Create overlay\n const overlay = document.createElement('div');\n overlay.className = 'vd-theme-customizer-overlay';\n\n // Create panel\n const panel = document.createElement('div');\n panel.className = 'vd-theme-customizer-panel';\n panel.innerHTML = this.getPanelHTML();\n\n // Append to body\n document.body.appendChild(overlay);\n document.body.appendChild(panel);\n\n // Store references\n this.elements.panel = panel;\n this.elements.overlay = overlay;\n this.elements.customizer = { contains: (el) => panel.contains(el) || triggerButton.contains(el) };\n\n // Position panel below trigger on desktop\n this.positionPanel();\n\n // Bind panel events after creation\n this.bindPanelEvents();\n\n // Reposition on resize\n this.addListener(window, 'resize', () => this.positionPanel());\n },\n\n /**\n * Position the panel below the trigger button on desktop\n */\n positionPanel: function () {\n if (!this.elements.panel || !this.elements.trigger) return;\n\n const isMobile = window.innerWidth < 768;\n\n if (isMobile) {\n // Mobile: full height slide-in from right - let CSS handle it\n this.elements.panel.style.top = '';\n this.elements.panel.style.right = '';\n this.elements.panel.style.left = '';\n this.elements.panel.style.height = '';\n this.elements.panel.style.maxHeight = '';\n } else {\n // Desktop: position directly below the trigger button, aligned to its right edge\n const triggerRect = this.elements.trigger.getBoundingClientRect();\n const panelWidth = 320; // --customizer-width\n const panelTop = triggerRect.bottom + 8;\n\n // Calculate right position: align panel's right edge with trigger's right edge\n // But ensure it doesn't overflow the viewport\n const viewportWidth = window.innerWidth;\n let panelRight = viewportWidth - triggerRect.right;\n\n // Ensure panel doesn't overflow left side of viewport\n const panelLeft = viewportWidth - panelRight - panelWidth;\n if (panelLeft < 8) {\n panelRight = viewportWidth - panelWidth - 8;\n }\n\n this.elements.panel.style.top = panelTop + 'px';\n this.elements.panel.style.right = panelRight + 'px';\n this.elements.panel.style.left = '';\n this.elements.panel.style.height = 'auto';\n this.elements.panel.style.maxHeight = 'calc(100vh - ' + panelTop + 'px)';\n }\n },\n\n /**\n * Bind events specifically for the panel (called after dynamic creation)\n */\n bindPanelEvents: function () {\n if (!this.elements.panel) return;\n if (this.elements.panel.getAttribute('data-customizer-initialized') === 'true') return;\n\n this.elements.panel.setAttribute('data-customizer-initialized', 'true');\n\n // Primary color swatches\n this.elements.panel.querySelectorAll('[data-color]').forEach(swatch => {\n this.addListener(swatch, 'click', () => {\n this.applyPrimary(swatch.dataset.color);\n this.updateUI();\n });\n });\n\n // Neutral color swatches\n this.elements.panel.querySelectorAll('[data-neutral]').forEach(swatch => {\n this.addListener(swatch, 'click', () => {\n this.applyNeutral(swatch.dataset.neutral);\n this.updateUI();\n });\n });\n\n // Radius buttons\n this.elements.panel.querySelectorAll('[data-radius]').forEach(btn => {\n this.addListener(btn, 'click', () => {\n this.applyRadius(btn.dataset.radius);\n this.updateUI();\n });\n });\n\n // Font selector\n const fontSelect = this.elements.panel.querySelector('[data-customizer-font]');\n if (fontSelect) {\n this.addListener(fontSelect, 'change', (e) => {\n this.applyFont(e.target.value);\n this.updateUI();\n });\n }\n\n // Reset button\n const resetBtn = this.elements.panel.querySelector('.customizer-reset');\n if (resetBtn) {\n this.addListener(resetBtn, 'click', () => {\n this.reset();\n });\n }\n\n // Mobile close button\n const closeBtn = this.elements.panel.querySelector('.customizer-mobile-close');\n if (closeBtn) {\n this.addListener(closeBtn, 'click', () => {\n this.close();\n });\n }\n\n // Overlay click\n if (this.elements.overlay) {\n this.addListener(this.elements.overlay, 'click', () => {\n this.close();\n });\n }\n },\n\n /**\n * Generate panel HTML\n */\n getPanelHTML: function () {\n const esc = typeof escapeHtml === 'function'\n ? escapeHtml\n : function (text) {\n const div = document.createElement('div');\n div.textContent = String(text ?? '');\n return div.innerHTML;\n };\n const safeColor = function (value) {\n const normalized = String(value ?? '').trim();\n // Allow common color formats used by palette values.\n if (/^(#[0-9a-fA-F]{3,8}|rgb[a]?\\([^)]{1,60}\\)|hsl[a]?\\([^)]{1,60}\\)|var\\(--[a-zA-Z0-9_-]{1,40}\\))$/.test(normalized)) {\n return normalized;\n }\n return '#000000';\n };\n\n // Generate primary color swatches\n let primarySwatches = '';\n for (const [key, value] of Object.entries(this.PRIMARY_COLORS)) {\n primarySwatches += ``;\n }\n\n // Generate neutral color swatches\n let neutralSwatches = '';\n for (const [key, value] of Object.entries(this.NEUTRAL_COLORS)) {\n neutralSwatches += ``;\n }\n\n // Generate radius buttons\n let radiusButtons = '';\n this.RADIUS_OPTIONS.forEach(r => {\n radiusButtons += ``;\n });\n\n // Generate font options\n let fontOptions = '';\n for (const [key, value] of Object.entries(this.FONT_OPTIONS)) {\n fontOptions += ``;\n }\n\n return `\n
    \n

    Customize Theme

    \n \n
    \n
    \n\n
    \n \n
    \n ${primarySwatches}\n
    \n
    \n
    \n \n
    \n ${neutralSwatches}\n
    \n
    \n
    \n \n
    \n ${radiusButtons}\n
    \n
    \n
    \n \n \n
    \n
    \n
    \n \n
    \n `;\n },\n\n /**\n * Bind event listeners\n */\n /**\n * Check whether the current primary color is one of the auto-defaults\n * (i.e. the user hasn't explicitly picked a non-default color).\n */\n isUsingDefaultPrimary: function () {\n return this.state.primary === this.DEFAULTS.PRIMARY_LIGHT ||\n this.state.primary === this.DEFAULTS.PRIMARY_DARK;\n },\n\n /**\n * When primary is still one of the auto-default palette keys (black/amber) but\n * localStorage was written under a different theme (or OS changed in system mode),\n * align in-memory state before applyAllPreferences runs \u2014 avoids amber+light / black+dark drift.\n */\n _normalizeDefaultPrimaryIfStaleWithStoredTheme: function () {\n if (!this.isUsingDefaultPrimary()) {\n return;\n }\n const expected = this.getDefaultPrimary(this.state.theme);\n if (this.state.primary !== expected) {\n this.state.primary = expected;\n }\n },\n\n bindEvents: function () {\n // Trigger click - bind to any trigger button\n if (this.elements.trigger) {\n this.addListener(this.elements.trigger, 'click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggle();\n });\n }\n\n this.bindPanelEvents();\n\n // Listen for OS dark/light changes so we can swap the default primary\n if (window.matchMedia) {\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const handler = () => {\n if (this.state.theme === 'system' && this.isUsingDefaultPrimary()) {\n const newDefault = this.getDefaultPrimary('system');\n if (newDefault !== this.state.primary) {\n this.applyPrimary(newDefault);\n this.updateUI();\n }\n }\n };\n mq.addEventListener('change', handler);\n this._cleanup.push(() => mq.removeEventListener('change', handler));\n }\n\n // Close on outside click\n this.addListener(document, 'click', (e) => {\n if (this.state.isOpen && this.elements.customizer && !this.elements.customizer.contains(e.target)) {\n this.close();\n }\n });\n\n // Close on Escape key\n this.addListener(document, 'keydown', (e) => {\n if (e.key === 'Escape' && this.state.isOpen) {\n this.close();\n }\n });\n },\n\n /**\n * Toggle panel open/close\n */\n toggle: function () {\n if (this.state.isOpen) {\n this.close();\n } else {\n this.open();\n }\n },\n\n /**\n * Open the panel\n */\n open: function () {\n this.state.isOpen = true;\n\n // Ensure panel is positioned correctly before opening\n this.positionPanel();\n\n if (this.elements.panel) {\n this.elements.panel.classList.add('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'true');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.add('is-active');\n }\n\n this.dispatchEvent('panel-open', { isOpen: true });\n },\n\n /**\n * Close the panel\n */\n close: function () {\n this.state.isOpen = false;\n\n if (this.elements.panel) {\n this.elements.panel.classList.remove('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'false');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.remove('is-active');\n }\n\n this.dispatchEvent('panel-close', { isOpen: false });\n },\n\n /**\n * Update UI to reflect current state\n */\n updateUI: function () {\n if (!this.elements.panel) return;\n\n // Update primary color swatches\n this.elements.panel.querySelectorAll('[data-color]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.color === this.state.primary);\n });\n\n // Update neutral color swatches\n this.elements.panel.querySelectorAll('[data-neutral]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.neutral === this.state.neutral);\n });\n\n // Update radius buttons\n this.elements.panel.querySelectorAll('[data-radius]').forEach(btn => {\n btn.classList.toggle('is-active', btn.dataset.radius === this.state.radius);\n });\n\n // Update font selector\n const fontSelect = this.elements.panel.querySelector('[data-customizer-font]');\n if (fontSelect) {\n fontSelect.value = this.state.font;\n }\n\n },\n\n /**\n * Reset all preferences to defaults\n */\n reset: function () {\n this.applyTheme(this.DEFAULTS.THEME);\n this.applyPrimary(this.getDefaultPrimary(this.DEFAULTS.THEME));\n this.applyNeutral(this.DEFAULTS.NEUTRAL);\n this.applyRadius(this.DEFAULTS.RADIUS);\n this.applyFont(this.DEFAULTS.FONT);\n this.updateUI();\n\n this.dispatchEvent('reset', { state: { ...this.state } });\n },\n\n /**\n * Get current state\n */\n getState: function () {\n return { ...this.state };\n },\n\n /**\n * Programmatically set preferences\n */\n setPreferences: function (prefs) {\n if (prefs.primary) this.applyPrimary(prefs.primary);\n if (prefs.neutral) this.applyNeutral(prefs.neutral);\n if (prefs.radius) this.applyRadius(prefs.radius);\n if (prefs.font) this.applyFont(prefs.font);\n if (prefs.theme) this.applyTheme(prefs.theme);\n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n destroyAll: function () {\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n\n if (this.elements.panel) {\n this.elements.panel.removeAttribute('data-customizer-initialized');\n }\n\n this.close();\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeCustomizer', ThemeCustomizer);\n }\n\n // Expose globally for convenience\n window.ThemeCustomizer = ThemeCustomizer;\n})();\n", "/**\n * Vanduo Framework - Theme Switcher\n * Handles light/dark/system theme toggling and persistence\n */\n\n(function () {\n 'use strict';\n\n const ThemeSwitcher = {\n isInitialized: false,\n _mediaQuery: null,\n _onMediaChange: null,\n\n init: function () {\n this.STORAGE_KEY = 'vanduo-theme-preference';\n this.state = {\n preference: this.getPreference() // 'light', 'dark', or 'system'\n };\n\n if (this.isInitialized) {\n this.applyTheme();\n this.renderUI();\n this.updateUI();\n return;\n }\n\n this.isInitialized = true;\n\n this.applyTheme();\n this.listenForSystemChanges();\n this.renderUI();\n\n console.log('Vanduo Theme Switcher initialized');\n },\n\n getPreference: function () {\n return this.getStorageValue(this.STORAGE_KEY, 'system');\n },\n\n setPreference: function (pref) {\n this.state.preference = pref;\n this.setStorageValue(this.STORAGE_KEY, pref);\n this.applyTheme();\n \n // Coordinate with ThemeCustomizer for primary color swap if available\n // Check _isApplying flag to prevent circular updates\n if (window.ThemeCustomizer && window.ThemeCustomizer.applyTheme && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme(pref);\n }\n \n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n applyTheme: function () {\n const pref = this.state.preference;\n\n if (pref === 'system') {\n // When in system mode, we remove the data attribute to let the media query take over\n // or we can explicitly set it. Explicitly setting it ensures consistency if we rely on [data-theme]\n // But if we rely on @media in CSS, we might want to remove attributes.\n // However, our CSS strategy uses :root:not([data-theme=\"light\"]) inside media query for system dark fallback\n // which is a bit complex.\n\n // Simpler approach: \n // If preference is system, REMOVE data-theme attribute. Let CSS media queries handle it.\n document.documentElement.removeAttribute('data-theme');\n } else {\n document.documentElement.setAttribute('data-theme', pref);\n }\n },\n\n listenForSystemChanges: function () {\n if (this._mediaQuery && this._onMediaChange) {\n return;\n }\n\n this._mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n this._onMediaChange = _e => {\n if (this.state.preference === 'system') {\n // Re-apply (effectively just to ensure consistency, though removing attribute usually suffices)\n this.applyTheme();\n // Keep default primary (black/amber) aligned when OS scheme changes while in system mode\n if (window.ThemeCustomizer && typeof window.ThemeCustomizer.applyTheme === 'function' && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme('system');\n }\n }\n };\n this._mediaQuery.addEventListener('change', this._onMediaChange);\n },\n\n // Helper to facilitate UI creation if needed, though often UI is in HTML\n renderUI: function () {\n // Look for any uninitialized theme toggles\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.getAttribute('data-theme-initialized') === 'true') {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n }\n return;\n }\n\n // Simplified UI Binding - assumes a select or a button cycle\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n const onChange = (e) => {\n this.setPreference(e.target.value);\n };\n toggle.addEventListener('change', onChange);\n toggle._themeToggleHandler = onChange;\n } else {\n // Button implementation (cycle)\n const onClick = () => {\n const modes = ['system', 'light', 'dark'];\n const nextIndex = (modes.indexOf(this.state.preference) + 1) % modes.length;\n this.setPreference(modes[nextIndex]);\n };\n toggle.addEventListener('click', onClick);\n toggle._themeToggleHandler = onClick;\n }\n // Mark as initialized\n toggle.setAttribute('data-theme-initialized', 'true');\n });\n },\n\n updateUI: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n } else {\n // Update button text/icon if needed\n // e.g. toggle.textContent = this.state.preference;\n // For now, assume the user handles visual state or generic text\n\n // If there is an icon or text span inside, update it\n const span = toggle.querySelector('.theme-current-label');\n if (span) {\n span.textContent = this.state.preference.charAt(0).toUpperCase() + this.state.preference.slice(1);\n }\n }\n });\n },\n\n destroyAll: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"][data-theme-initialized=\"true\"]');\n toggles.forEach(toggle => {\n if (toggle._themeToggleHandler) {\n const eventName = toggle.tagName === 'SELECT' ? 'change' : 'click';\n toggle.removeEventListener(eventName, toggle._themeToggleHandler);\n delete toggle._themeToggleHandler;\n }\n toggle.removeAttribute('data-theme-initialized');\n });\n\n if (this._mediaQuery && this._onMediaChange) {\n this._mediaQuery.removeEventListener('change', this._onMediaChange);\n }\n\n this._mediaQuery = null;\n this._onMediaChange = null;\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeSwitcher', ThemeSwitcher);\n }\n})();\n", "/**\n * Vanduo Framework - Toast Component\n * Popup notifications for user feedback\n */\n\n(function() {\n 'use strict';\n\n /**\n * Toast Component\n */\n const Toast = {\n // Default options\n defaults: {\n position: 'top-right',\n duration: 5000,\n dismissible: true,\n showProgress: true,\n pauseOnHover: true\n },\n\n // Container cache\n containers: {},\n\n /**\n * Get or create a toast container for a position\n * @param {string} position - Container position\n * @returns {HTMLElement} Toast container element\n */\n getContainer: function(position) {\n if (this.containers[position]) {\n return this.containers[position];\n }\n\n const container = document.createElement('div');\n container.className = `vd-toast-container vd-toast-container-${position}`;\n container.setAttribute('role', 'status');\n container.setAttribute('aria-live', 'polite');\n container.setAttribute('aria-atomic', 'false');\n document.body.appendChild(container);\n this.containers[position] = container;\n\n return container;\n },\n\n /**\n * Show a toast notification\n * @param {Object|string} options - Toast options or message string\n * @param {string} [type] - Toast type (success, error, warning, info)\n * @param {number} [duration] - Auto-dismiss duration in ms\n * @returns {HTMLElement} Toast element\n */\n show: function(options, type, duration) {\n // Support simple API: Toast.show('Message', 'success', 3000)\n if (typeof options === 'string') {\n options = {\n message: options,\n type: type,\n duration: duration\n };\n }\n\n const config = Object.assign({}, this.defaults, options);\n const container = this.getContainer(config.position);\n\n // Create toast element\n const toast = document.createElement('div');\n toast.className = 'vd-toast';\n\n if (config.type) {\n toast.classList.add(`vd-toast-${config.type}`);\n }\n\n if (config.solid) {\n toast.classList.add('vd-toast-solid');\n }\n\n if (config.showProgress && config.duration > 0) {\n toast.classList.add('vd-toast-with-progress');\n }\n\n // Build toast content\n let html = '';\n\n // Icon (sanitize custom icons, default icons are trusted SVG)\n if (config.icon) {\n const safeIcon = typeof sanitizeHtml === 'function' ? sanitizeHtml(config.icon) : escapeHtml(config.icon);\n html += `${safeIcon}`;\n } else if (config.type) {\n html += `${this.getDefaultIcon(config.type)}`;\n }\n\n // Local escape helper \u2014 guarantees HTML-safe output even if the\n // global escapeHtml utility is not loaded in the current bundle.\n const _esc = typeof escapeHtml === 'function'\n ? escapeHtml\n : function (s) {\n const d = document.createElement('div');\n d.appendChild(document.createTextNode(s));\n return d.innerHTML;\n };\n\n // Content (escape text to prevent injection)\n html += '
    ';\n if (config.title) {\n html += `
    ${_esc(String(config.title))}
    `;\n }\n if (config.message) {\n html += `
    ${_esc(String(config.message))}
    `;\n }\n html += '
    ';\n\n // Close button\n if (config.dismissible) {\n html += '';\n }\n\n // Progress bar\n if (config.showProgress && config.duration > 0) {\n const safeDuration = parseInt(config.duration, 10) || 0;\n html += `
    `;\n }\n\n toast.innerHTML = html;\n\n // Add to container\n container.appendChild(toast);\n\n toast._toastCleanup = [];\n\n // Set up close button handler\n if (config.dismissible) {\n const closeBtn = toast.querySelector('.vd-toast-close');\n const onClose = () => {\n this.dismiss(toast);\n };\n closeBtn.addEventListener('click', onClose);\n toast._toastCleanup.push(() => closeBtn.removeEventListener('click', onClose));\n }\n\n // Pause on hover\n let timeoutId = null;\n let remainingTime = config.duration;\n let startTime = null;\n\n const startTimer = () => {\n if (config.duration > 0) {\n startTime = Date.now();\n timeoutId = setTimeout(() => {\n this.dismiss(toast);\n }, remainingTime);\n toast._toastTimeoutId = timeoutId;\n\n // Resume progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'running';\n }\n }\n };\n\n const pauseTimer = () => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n timeoutId = null;\n toast._toastTimeoutId = null;\n remainingTime -= Date.now() - startTime;\n\n // Pause progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'paused';\n }\n }\n };\n\n if (config.pauseOnHover) {\n toast.addEventListener('mouseenter', pauseTimer);\n toast.addEventListener('mouseleave', startTimer);\n toast._toastCleanup.push(\n () => toast.removeEventListener('mouseenter', pauseTimer),\n () => toast.removeEventListener('mouseleave', startTimer)\n );\n }\n\n // Trigger enter animation\n requestAnimationFrame(() => {\n toast.classList.add('is-visible');\n startTimer();\n });\n\n // Store config on element for later access\n toast._toastConfig = config;\n\n // Dispatch show event\n const showEvent = new CustomEvent('toast:show', {\n bubbles: true,\n detail: { toast, config }\n });\n toast.dispatchEvent(showEvent);\n\n return toast;\n },\n\n /**\n * Dismiss a toast\n * @param {HTMLElement} toast - Toast element to dismiss\n */\n dismiss: function(toast) {\n if (!toast || toast.classList.contains('is-exiting')) return;\n\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n toast._toastTimeoutId = null;\n }\n\n toast.classList.remove('is-visible');\n toast.classList.add('is-exiting');\n\n // Dispatch dismiss event\n const dismissEvent = new CustomEvent('toast:dismiss', {\n bubbles: true,\n detail: { toast }\n });\n toast.dispatchEvent(dismissEvent);\n\n // Remove after animation\n const handleTransitionEnd = () => {\n toast.removeEventListener('transitionend', handleTransitionEnd);\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n };\n\n toast.addEventListener('transitionend', handleTransitionEnd);\n\n // Fallback removal if transition doesn't fire\n setTimeout(() => {\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n }, 400);\n },\n\n /**\n * Destroy all toasts and containers\n */\n destroyAll: function() {\n Object.keys(this.containers).forEach(position => {\n const container = this.containers[position];\n if (!container) return;\n\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => {\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n }\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n });\n\n if (container.parentElement) {\n container.parentElement.removeChild(container);\n }\n });\n\n this.containers = {};\n },\n\n /**\n * Dismiss all toasts\n * @param {string} [position] - Optional position to clear (clears all if not specified)\n */\n dismissAll: function(position) {\n if (position && this.containers[position]) {\n const toasts = this.containers[position].querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n } else {\n Object.values(this.containers).forEach(container => {\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n });\n }\n },\n\n /**\n * Get default icon SVG for a type\n * @param {string} type - Toast type\n * @returns {string} SVG icon markup\n */\n getDefaultIcon: function(type) {\n const icons = {\n success: '',\n error: '',\n warning: '',\n info: ''\n };\n\n return icons[type] || '';\n },\n\n /**\n * Convenience methods for common toast types\n */\n success: function(message, options) {\n return this.show(Object.assign({ message, type: 'success' }, options));\n },\n\n error: function(message, options) {\n return this.show(Object.assign({ message, type: 'error' }, options));\n },\n\n warning: function(message, options) {\n return this.show(Object.assign({ message, type: 'warning' }, options));\n },\n\n info: function(message, options) {\n return this.show(Object.assign({ message, type: 'info' }, options));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('toast', Toast);\n }\n\n // Also expose globally for convenience\n window.Toast = Toast;\n\n})();\n", "/**\n * Vanduo Framework - Tooltips Component\n * JavaScript functionality for tooltips\n */\n\n(function () {\n 'use strict';\n\n /**\n * Tooltips Component\n */\n const Tooltips = {\n tooltips: new Map(),\n delayTimers: new Map(),\n\n /**\n * Sanitize HTML \u2014 delegates to shared sanitizeHtml from helpers.js\n * @param {string} input\n * @returns {string} sanitized HTML\n */\n sanitizeHtml: function (input) {\n if (typeof sanitizeHtml === 'function') {\n return sanitizeHtml(input);\n }\n // Fallback: strip all HTML\n const div = document.createElement('div');\n div.textContent = input || '';\n return div.innerHTML;\n },\n\n /**\n * Initialize tooltips\n */\n init: function () {\n const elements = document.querySelectorAll('[data-tooltip], [data-tooltip-html]');\n\n elements.forEach(element => {\n if (this.tooltips.has(element)) {\n return;\n }\n this.initTooltip(element);\n });\n },\n\n /**\n * Initialize a single tooltip\n * @param {HTMLElement} element - Element with tooltip\n */\n initTooltip: function (element) {\n const tooltip = this.createTooltip(element);\n const cleanupFunctions = [];\n\n // Show on hover/focus\n const enterHandler = () => { this.showTooltip(element, tooltip); };\n const leaveHandler = () => { this.hideTooltip(element, tooltip); };\n const focusHandler = () => { this.showTooltip(element, tooltip); };\n const blurHandler = () => { this.hideTooltip(element, tooltip); };\n\n element.addEventListener('mouseenter', enterHandler);\n element.addEventListener('mouseleave', leaveHandler);\n element.addEventListener('focus', focusHandler);\n element.addEventListener('blur', blurHandler);\n\n cleanupFunctions.push(\n () => element.removeEventListener('mouseenter', enterHandler),\n () => element.removeEventListener('mouseleave', leaveHandler),\n () => element.removeEventListener('focus', focusHandler),\n () => element.removeEventListener('blur', blurHandler)\n );\n\n this.tooltips.set(element, { tooltip, cleanup: cleanupFunctions });\n },\n\n /**\n * Create tooltip element\n * @param {HTMLElement} element - Target element\n * @returns {HTMLElement} Tooltip element\n */\n createTooltip: function (element) {\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-tooltip';\n tooltip.setAttribute('role', 'tooltip');\n tooltip.setAttribute('aria-hidden', 'true');\n\n // Generate unique ID and link via aria-describedby\n const tooltipId = 'tooltip-' + Math.random().toString(36).substr(2, 9);\n tooltip.id = tooltipId;\n element.setAttribute('aria-describedby', tooltipId);\n\n // Get content\n const htmlContent = element.dataset.tooltipHtml;\n const textContent = element.dataset.tooltip;\n\n if (htmlContent) {\n tooltip.innerHTML = this.sanitizeHtml(htmlContent);\n tooltip.classList.add('vd-tooltip-html');\n } else if (textContent) {\n tooltip.textContent = textContent;\n }\n\n // Get placement\n const placement = element.dataset.tooltipPlacement || element.dataset.placement || 'top';\n tooltip.setAttribute('data-placement', placement);\n tooltip.classList.add(`vd-tooltip-${placement}`);\n\n // Get variant\n if (element.dataset.tooltipVariant) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipVariant}`);\n }\n\n // Get size\n if (element.dataset.tooltipSize) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipSize}`);\n }\n\n // Get delay\n const delay = parseInt(element.dataset.tooltipDelay) || 0;\n tooltip.dataset.delay = delay;\n\n document.body.appendChild(tooltip);\n\n return tooltip;\n },\n\n /**\n * Show tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n showTooltip: function (element, tooltip) {\n const delay = parseInt(tooltip.dataset.delay) || 0;\n\n if (delay > 0) {\n const timer = setTimeout(() => {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }, delay);\n this.delayTimers.set(element, timer);\n } else {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }\n },\n\n /**\n * Hide tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n hideTooltip: function (element, tooltip) {\n // Clear delay timer if exists\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n tooltip.classList.remove('is-visible');\n tooltip.setAttribute('aria-hidden', 'true');\n },\n\n /**\n * Position tooltip relative to element\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n positionTooltip: function (element, tooltip) {\n const placement = tooltip.dataset.placement || 'top';\n const rect = element.getBoundingClientRect();\n const tooltipRect = tooltip.getBoundingClientRect();\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;\n\n let top = 0;\n let left = 0;\n\n switch (placement) {\n case 'top':\n top = rect.top + scrollTop - tooltipRect.height - 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'bottom':\n top = rect.bottom + scrollTop + 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'left':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.left + scrollLeft - tooltipRect.width - 8;\n break;\n case 'right':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.right + scrollLeft + 8;\n break;\n }\n\n // Prevent overflow\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const padding = 8;\n\n if (left < padding) {\n left = padding;\n } else if (left + tooltipRect.width > viewportWidth - padding) {\n left = viewportWidth - tooltipRect.width - padding;\n }\n\n if (top < scrollTop + padding) {\n top = scrollTop + padding;\n } else if (top + tooltipRect.height > scrollTop + viewportHeight - padding) {\n top = scrollTop + viewportHeight - tooltipRect.height - padding;\n }\n\n // Use single style assignment with transform for better performance\n tooltip.style.cssText = `position: absolute; top: 0; left: 0; transform: translate(${left}px, ${top}px);`;\n },\n\n /**\n * Show tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n show: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.showTooltip(el, tooltip);\n }\n },\n\n /**\n * Hide tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n hide: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.hideTooltip(el, tooltip);\n }\n },\n\n /**\n * Update tooltip content\n * @param {HTMLElement|string} element - Target element or selector\n * @param {string} content - New content\n * @param {boolean} isHtml - Whether content is HTML\n */\n update: function (element, content, isHtml = false) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n if (isHtml) {\n tooltip.innerHTML = this.sanitizeHtml(content);\n tooltip.classList.add('vd-tooltip-html');\n } else {\n tooltip.textContent = content;\n tooltip.classList.remove('vd-tooltip-html');\n }\n }\n },\n\n /**\n * Destroy a tooltip instance and clean up\n * @param {HTMLElement} element - Element with tooltip\n */\n destroy: function (element) {\n const data = this.tooltips.get(element);\n if (!data) return;\n\n // Clear any pending timer\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n data.cleanup.forEach(fn => fn());\n\n // Remove tooltip element from DOM\n if (data.tooltip && data.tooltip.parentNode) {\n data.tooltip.parentNode.removeChild(data.tooltip);\n }\n\n this.tooltips.delete(element);\n },\n\n /**\n * Destroy all tooltip instances\n */\n destroyAll: function () {\n this.tooltips.forEach((data, element) => {\n this.destroy(element);\n });\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tooltips', Tooltips);\n }\n\n // Expose globally\n window.VanduoTooltips = Tooltips;\n\n})();\n", "/**\n * Vanduo Framework - Search Component\n * Client-side search functionality for content pages\n * \n * @example Basic usage (initialize with defaults)\n * // HTML:\n * //
    \n * // \n * //
    \n * //
    \n * \n * @example Custom configuration\n * var search = Search.create({\n * containerSelector: '.my-search',\n * contentSelector: 'article[id]',\n * titleSelector: 'h2, h3',\n * maxResults: 5,\n * onSelect: function(result) {\n * console.log('Selected:', result.title);\n * }\n * });\n * \n * @example With custom data source\n * var search = Search.create({\n * containerSelector: '.my-search',\n * data: [\n * { id: 'item1', title: 'First Item', content: 'Description...', category: 'Category A' },\n * { id: 'item2', title: 'Second Item', content: 'Description...', category: 'Category B' }\n * ]\n * });\n */\n\n(function() {\n 'use strict';\n\n /**\n * Default configuration\n */\n const DEFAULTS = {\n // Behavior\n minQueryLength: 2,\n maxResults: 10,\n debounceMs: 150,\n highlightTag: 'mark',\n keyboardShortcut: true, // Enable Cmd/Ctrl+K shortcut\n \n // Selectors (for DOM-based indexing)\n containerSelector: '.vd-doc-search',\n inputSelector: '.vd-doc-search-input',\n resultsSelector: '.vd-doc-search-results',\n contentSelector: '.doc-content section[id]',\n titleSelector: '.demo-title, h2, h3',\n navSelector: '.doc-nav-link',\n sectionSelector: '.doc-nav-section',\n \n // Content extraction\n excludeFromContent: 'pre, code, script, style',\n maxContentLength: 500,\n \n // Custom data source (alternative to DOM indexing)\n data: null,\n \n // Category icons mapping\n categoryIcons: {\n 'getting-started': 'ph-rocket-launch',\n 'core': 'ph-cube',\n 'components': 'ph-puzzle-piece',\n 'interactive': 'ph-cursor-click',\n 'data-display': 'ph-table',\n 'feedback': 'ph-bell',\n 'meta': 'ph-info',\n 'default': 'ph-file-text'\n },\n \n // Callbacks\n onSelect: null, // function(result) - called when result is selected\n onSearch: null, // function(query, results) - called after search\n onOpen: null, // function() - called when results open\n onClose: null, // function() - called when results close\n \n // Text customization\n emptyTitle: 'No results found',\n emptyText: 'Try different keywords or check spelling',\n placeholder: 'Search...'\n };\n\n /**\n * Search Component Factory\n * Creates a new search instance with the given configuration\n * \n * @param {Object} options - Configuration options\n * @returns {Object} Search instance\n */\n function createSearch(options) {\n const config = Object.assign({}, DEFAULTS, options || {});\n \n // Instance state\n const state = {\n initialized: false,\n index: [],\n results: [],\n activeIndex: -1,\n isOpen: false,\n query: '',\n container: null,\n input: null,\n resultsContainer: null,\n debounceTimer: null,\n boundHandlers: {}\n };\n\n function safeInvokeCallback(name, fn, ...args) {\n try {\n fn(...args);\n } catch (error) {\n console.warn('[Vanduo Search] Callback error in \"' + name + '\":', error);\n }\n }\n\n function setResultsHtml(html) {\n if (!state.resultsContainer) return;\n try {\n state.resultsContainer.innerHTML = html;\n } catch (error) {\n console.warn('[Vanduo Search] Failed to render results:', error);\n }\n }\n\n /**\n * Initialize the search component\n * Idempotent \u2014 safe to call more than once on the same instance.\n * Returns the instance on success, null if required DOM elements are missing.\n */\n function init() {\n if (state.initialized) {\n return instance;\n }\n\n state.container = document.querySelector(config.containerSelector);\n if (!state.container) {\n state.initialized = false;\n return null;\n }\n\n state.input = state.container.querySelector(config.inputSelector);\n state.resultsContainer = state.container.querySelector(config.resultsSelector);\n\n if (!state.input || !state.resultsContainer) {\n state.initialized = false;\n return null;\n }\n\n // Set placeholder if configured\n if (config.placeholder) {\n state.input.setAttribute('placeholder', config.placeholder);\n }\n\n // Build search index\n buildIndex();\n\n // Bind events\n bindEvents();\n\n // Set up ARIA attributes\n setupAria();\n\n state.initialized = true;\n return instance;\n }\n\n /**\n * Build search index from DOM or custom data\n */\n function buildIndex() {\n state.index = [];\n \n // Use custom data if provided\n if (config.data && Array.isArray(config.data)) {\n config.data.forEach(function(item) {\n state.index.push({\n id: item.id || slugify(item.title),\n title: item.title || '',\n category: item.category || '',\n categorySlug: slugify(item.category || ''),\n content: item.content || '',\n keywords: item.keywords || extractKeywordsFromText(item.title + ' ' + item.content),\n url: item.url || '#' + (item.id || slugify(item.title)),\n icon: item.icon || ''\n });\n });\n return;\n }\n\n // Build from DOM\n const sections = document.querySelectorAll(config.contentSelector);\n const categoryMap = buildCategoryMap();\n\n sections.forEach(function(section) {\n const id = section.id;\n if (!id) return;\n\n const titleEl = section.querySelector(config.titleSelector);\n const title = titleEl ? titleEl.textContent.replace(/v[\\d.]+/g, '').trim() : id;\n const category = categoryMap[id] || 'Documentation';\n const content = extractContent(section);\n const keywords = extractKeywords(section, title);\n const iconEl = titleEl ? titleEl.querySelector('i.ph') : null;\n let icon = '';\n if (iconEl && iconEl.classList) {\n for (let ci = 0; ci < iconEl.classList.length; ci++) {\n if (iconEl.classList[ci].indexOf('ph-') === 0) {\n icon = iconEl.classList[ci];\n break;\n }\n }\n }\n\n state.index.push({\n id: id,\n title: title,\n category: category,\n categorySlug: slugify(category),\n content: content,\n keywords: keywords,\n url: '#' + id,\n icon: icon\n });\n });\n }\n\n /**\n * Build a map of section IDs to their categories\n */\n function buildCategoryMap() {\n const map = {};\n let currentCategory = 'Documentation';\n const navItems = document.querySelectorAll(config.navSelector + ', ' + config.sectionSelector);\n\n navItems.forEach(function(item) {\n if (item.classList.contains('doc-nav-section')) {\n currentCategory = item.textContent.trim();\n } else {\n const href = item.getAttribute('href');\n if (href && href.startsWith('#')) {\n const id = href.substring(1);\n map[id] = currentCategory;\n }\n }\n });\n\n return map;\n }\n\n /**\n * Extract searchable content from a section\n */\n function extractContent(section) {\n const clone = section.cloneNode(true);\n \n const toRemove = clone.querySelectorAll(config.excludeFromContent);\n toRemove.forEach(function(el) {\n el.remove();\n });\n\n let text = clone.textContent || '';\n text = text.replace(/\\s+/g, ' ').trim();\n \n return text.substring(0, config.maxContentLength);\n }\n\n /**\n * Extract keywords from a section\n */\n function extractKeywords(section, title) {\n const keywords = [];\n \n // Add title words\n title.toLowerCase().split(/\\s+/).forEach(function(word) {\n if (word.length > 2) {\n keywords.push(word);\n }\n });\n\n // Add class names from code examples\n const codeBlocks = section.querySelectorAll('code');\n codeBlocks.forEach(function(code) {\n const text = code.textContent || '';\n const classMatches = text.match(/\\.([\\w-]+)/g);\n if (classMatches) {\n classMatches.forEach(function(match) {\n keywords.push(match.substring(1).toLowerCase());\n });\n }\n });\n\n // Add data attributes\n const dataAttrs = section.querySelectorAll('[data-tooltip], [data-modal]');\n dataAttrs.forEach(function(el) {\n const attrs = el.getAttributeNames().filter(function(name) {\n return name.startsWith('data-');\n });\n attrs.forEach(function(attr) {\n keywords.push(attr.replace('data-', ''));\n });\n });\n\n return Array.from(new Set(keywords));\n }\n\n /**\n * Extract keywords from text string\n */\n function extractKeywordsFromText(text) {\n const words = text.toLowerCase().split(/\\s+/);\n return words.filter(function(word) {\n return word.length > 2;\n });\n }\n\n /**\n * Convert string to slug\n */\n function slugify(str) {\n return str.toLowerCase().replace(/\\s+/g, '-').replace(/[^a-z0-9-]/g, '');\n }\n\n /**\n * Bind event listeners\n */\n function bindEvents() {\n // Store bound handlers for cleanup\n state.boundHandlers.handleInput = function(e) {\n handleInput(e);\n };\n state.boundHandlers.handleFocus = function() {\n if (state.query.length >= config.minQueryLength) {\n open();\n }\n };\n state.boundHandlers.handleKeydown = function(e) {\n handleKeydown(e);\n };\n state.boundHandlers.handleOutsideClick = function(e) {\n if (!state.container.contains(e.target)) {\n close();\n }\n };\n state.boundHandlers.handleGlobalKeydown = function(e) {\n if (config.keyboardShortcut && (e.metaKey || e.ctrlKey) && e.key === 'k') {\n e.preventDefault();\n state.input.focus();\n state.input.select();\n }\n };\n state.boundHandlers.handleResultClick = function(e) {\n const result = e.target.closest('.vd-doc-search-result');\n if (result) {\n const index = parseInt(result.dataset.index, 10);\n select(index);\n }\n };\n\n // Input events\n state.input.addEventListener('input', state.boundHandlers.handleInput);\n state.input.addEventListener('focus', state.boundHandlers.handleFocus);\n state.input.addEventListener('keydown', state.boundHandlers.handleKeydown);\n\n // Close on outside click\n document.addEventListener('click', state.boundHandlers.handleOutsideClick);\n\n // Global keyboard shortcut\n document.addEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n\n // Result click handling\n state.resultsContainer.addEventListener('click', state.boundHandlers.handleResultClick);\n }\n\n /**\n * Unbind event listeners\n */\n function unbindEvents() {\n if (state.input) {\n state.input.removeEventListener('input', state.boundHandlers.handleInput);\n state.input.removeEventListener('focus', state.boundHandlers.handleFocus);\n state.input.removeEventListener('keydown', state.boundHandlers.handleKeydown);\n }\n document.removeEventListener('click', state.boundHandlers.handleOutsideClick);\n document.removeEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n if (state.resultsContainer) {\n state.resultsContainer.removeEventListener('click', state.boundHandlers.handleResultClick);\n }\n }\n\n /**\n * Set up ARIA attributes\n */\n function setupAria() {\n const resultsId = state.resultsContainer.id || 'search-results-' + Math.random().toString(36).substr(2, 9);\n state.resultsContainer.id = resultsId;\n \n state.input.setAttribute('role', 'combobox');\n state.input.setAttribute('aria-autocomplete', 'list');\n state.input.setAttribute('aria-controls', resultsId);\n state.input.setAttribute('aria-expanded', 'false');\n \n state.resultsContainer.setAttribute('role', 'listbox');\n state.resultsContainer.setAttribute('aria-label', 'Search results');\n }\n\n /**\n * Handle input changes\n */\n function handleInput(e) {\n const query = e.target.value.trim();\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n state.debounceTimer = setTimeout(function() {\n state.query = query;\n\n if (query.length < config.minQueryLength) {\n close();\n return;\n }\n\n state.results = search(query);\n state.activeIndex = -1;\n render();\n open();\n\n // Callback\n if (typeof config.onSearch === 'function') {\n safeInvokeCallback('onSearch', config.onSearch, query, state.results);\n }\n }, config.debounceMs);\n }\n\n /**\n * Handle keyboard navigation\n */\n function handleKeydown(e) {\n if (!state.isOpen) {\n if (e.key === 'ArrowDown' && state.query.length >= config.minQueryLength) {\n e.preventDefault();\n state.results = search(state.query);\n render();\n open();\n }\n return;\n }\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n navigate(1);\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n navigate(-1);\n break;\n\n case 'Enter':\n e.preventDefault();\n if (state.activeIndex >= 0) {\n select(state.activeIndex);\n } else if (state.results.length > 0) {\n select(0);\n }\n break;\n\n case 'Escape':\n e.preventDefault();\n close();\n break;\n\n case 'Tab':\n close();\n break;\n }\n }\n\n /**\n * Perform search\n */\n function search(query) {\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n const scored = [];\n\n state.index.forEach(function(entry) {\n let score = 0;\n const titleLower = entry.title.toLowerCase();\n const categoryLower = entry.category.toLowerCase();\n const contentLower = entry.content.toLowerCase();\n\n terms.forEach(function(term) {\n // Title match - highest priority\n if (titleLower.includes(term)) {\n score += 100;\n if (titleLower === term) {\n score += 50;\n } else if (titleLower.startsWith(term)) {\n score += 25;\n }\n }\n\n // Category match\n if (categoryLower.includes(term)) {\n score += 50;\n }\n\n // Keyword match\n const keywordMatch = entry.keywords.some(function(k) {\n return k.includes(term);\n });\n if (keywordMatch) {\n score += 30;\n }\n\n // Content match\n if (contentLower.includes(term)) {\n score += 10;\n }\n });\n\n if (score > 0) {\n scored.push({\n id: entry.id,\n title: entry.title,\n category: entry.category,\n categorySlug: entry.categorySlug,\n content: entry.content,\n url: entry.url,\n icon: entry.icon,\n score: score\n });\n }\n });\n\n scored.sort(function(a, b) {\n return b.score - a.score;\n });\n\n return scored.slice(0, config.maxResults);\n }\n\n /**\n * Render search results\n */\n function render() {\n if (state.results.length === 0) {\n setResultsHtml(renderEmpty());\n return;\n }\n\n let html = '
      ';\n\n state.results.forEach(function(result, index) {\n const isActive = index === state.activeIndex;\n const icon = result.icon || getCategoryIcon(result.categorySlug);\n const excerpt = getExcerpt(result.content, state.query);\n\n html += '
    • ' +\n '
      ' +\n '' +\n '
      ' +\n '
      ' +\n '
      ' + highlight(result.title, state.query) + '
      ' +\n '
      ' + escapeHtml(result.category) + '
      ' +\n '
      ' + highlight(excerpt, state.query) + '
      ' +\n '
      ' +\n '
      • ';\n });\n\n html += '
    ';\n html += renderFooter();\n\n setResultsHtml(html);\n }\n\n /**\n * Render empty state\n */\n function renderEmpty() {\n return '
    ' +\n '
    ' +\n '
    ' + escapeHtml(config.emptyTitle) + '
    ' +\n '
    ' + escapeHtml(config.emptyText) + '
    ' +\n '
    ';\n }\n\n /**\n * Render footer with keyboard hints\n */\n function renderFooter() {\n return '
    ' +\n '\u2191\u2193 to navigate' +\n '\u21B5 to select' +\n 'esc to close' +\n '
    ';\n }\n\n /**\n * Get icon for category\n */\n function getCategoryIcon(categorySlug) {\n return config.categoryIcons[categorySlug] || config.categoryIcons['default'] || 'ph-file-text';\n }\n\n /**\n * Get excerpt from content\n */\n function getExcerpt(content, query) {\n const terms = query.toLowerCase().split(/\\s+/);\n const contentLower = content.toLowerCase();\n const excerptLength = 100;\n\n let matchPos = -1;\n for (let i = 0; i < terms.length; i++) {\n const pos = contentLower.indexOf(terms[i]);\n if (pos !== -1 && (matchPos === -1 || pos < matchPos)) {\n matchPos = pos;\n }\n }\n\n if (matchPos === -1) {\n return content.substring(0, excerptLength) + '...';\n }\n\n const start = Math.max(0, matchPos - 30);\n const end = Math.min(content.length, matchPos + excerptLength);\n let excerpt = content.substring(start, end);\n\n if (start > 0) {\n excerpt = '...' + excerpt;\n }\n if (end < content.length) {\n excerpt = excerpt + '...';\n }\n\n return excerpt;\n }\n\n /**\n * Highlight matched terms in text\n */\n function highlight(text, query) {\n if (!query) return escapeHtml(text);\n\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n let escaped = escapeHtml(text);\n\n terms.forEach(function(term) {\n // Skip overly long terms to prevent ReDoS\n if (term.length > 50) return;\n const regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n escaped = escaped.replace(regex, '<' + config.highlightTag + '>$1');\n });\n\n return escaped;\n }\n\n /**\n * Escape HTML entities\n */\n function escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n /**\n * Navigate results with keyboard\n */\n function navigate(direction) {\n let newIndex = state.activeIndex + direction;\n\n if (newIndex < 0) {\n newIndex = state.results.length - 1;\n } else if (newIndex >= state.results.length) {\n newIndex = 0;\n }\n\n setActiveIndex(newIndex);\n }\n\n /**\n * Set active result index\n */\n function setActiveIndex(index) {\n const prevActive = state.resultsContainer.querySelector('.vd-doc-search-result.is-active');\n if (prevActive) {\n prevActive.classList.remove('is-active');\n prevActive.setAttribute('aria-selected', 'false');\n }\n\n state.activeIndex = index;\n\n const newActive = state.resultsContainer.querySelector('[data-index=\"' + index + '\"]');\n if (newActive) {\n newActive.classList.add('is-active');\n newActive.setAttribute('aria-selected', 'true');\n state.input.setAttribute('aria-activedescendant', 'vd-doc-search-result-' + index);\n newActive.scrollIntoView({ block: 'nearest' });\n }\n }\n\n /**\n * Select a result\n */\n function select(index) {\n const result = state.results[index];\n if (!result) return;\n\n // Close search\n close();\n state.input.value = '';\n state.query = '';\n\n // Custom callback\n if (typeof config.onSelect === 'function') {\n safeInvokeCallback('onSelect', config.onSelect, result);\n return;\n }\n\n // Default behavior: navigate to section\n const section = document.querySelector(result.url);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth', block: 'start' });\n window.history.pushState(null, '', result.url);\n updateSidebarActive(result.id);\n }\n }\n\n /**\n * Update sidebar navigation active state\n */\n function updateSidebarActive(sectionId) {\n const navLinks = document.querySelectorAll(config.navSelector);\n navLinks.forEach(function(link) {\n link.classList.remove('active');\n if (link.getAttribute('href') === '#' + sectionId) {\n link.classList.add('active');\n }\n });\n }\n\n /**\n * Open results dropdown\n */\n function open() {\n if (state.isOpen) return;\n\n state.isOpen = true;\n state.resultsContainer.classList.add('is-open');\n state.input.setAttribute('aria-expanded', 'true');\n\n if (typeof config.onOpen === 'function') {\n safeInvokeCallback('onOpen', config.onOpen);\n }\n }\n\n /**\n * Close results dropdown\n */\n function close() {\n if (!state.isOpen) return;\n\n state.isOpen = false;\n state.activeIndex = -1;\n state.resultsContainer.classList.remove('is-open');\n state.input.setAttribute('aria-expanded', 'false');\n state.input.removeAttribute('aria-activedescendant');\n\n if (typeof config.onClose === 'function') {\n safeInvokeCallback('onClose', config.onClose);\n }\n }\n\n /**\n * Destroy the component\n */\n function destroy() {\n unbindEvents();\n \n state.initialized = false;\n state.index = [];\n state.results = [];\n state.isOpen = false;\n state.query = '';\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n if (state.resultsContainer) {\n setResultsHtml('');\n }\n }\n\n /**\n * Rebuild the search index\n */\n function rebuild() {\n buildIndex();\n }\n\n /**\n * Update configuration\n */\n function setConfig(newConfig) {\n Object.assign(config, newConfig);\n }\n\n /**\n * Get current configuration\n */\n function getConfig() {\n return Object.assign({}, config);\n }\n\n /**\n * Get search index\n */\n function getIndex() {\n return state.index.slice();\n }\n\n // Public instance API\n const instance = {\n init: init,\n destroy: destroy,\n rebuild: rebuild,\n search: search,\n open: open,\n close: close,\n setConfig: setConfig,\n getConfig: getConfig,\n getIndex: getIndex\n };\n\n return instance;\n }\n\n /**\n * Search Component (singleton for backward compatibility)\n */\n const Search = {\n // Factory method \u2014 creates and auto-initializes a new independent instance.\n // Always returns the instance so callers retain a reference even if the\n // DOM container is not yet available (they can retry init() later).\n create: function(options) {\n const instance = createSearch(options);\n if (instance) {\n instance.init();\n }\n return instance || null;\n },\n \n // Default instance\n _instance: null,\n \n // Configuration (for default instance)\n config: Object.assign({}, DEFAULTS),\n\n /**\n * Initialize the default search instance\n */\n init: function(options) {\n if (this._instance) {\n this._instance.destroy();\n }\n \n if (options) {\n Object.assign(this.config, options);\n }\n \n this._instance = createSearch(this.config);\n return this._instance ? this._instance.init() : null;\n },\n\n /**\n * Destroy the default instance\n */\n destroy: function() {\n if (this._instance) {\n this._instance.destroy();\n this._instance = null;\n }\n },\n\n destroyAll: function() {\n this.destroy();\n },\n\n /**\n * Rebuild the default instance index\n */\n rebuild: function() {\n if (this._instance) {\n this._instance.rebuild();\n }\n },\n\n /**\n * Search using the default instance\n */\n search: function(query) {\n return this._instance ? this._instance.search(query) : [];\n },\n\n /**\n * Open the default instance\n */\n open: function() {\n if (this._instance) {\n this._instance.open();\n }\n },\n\n /**\n * Close the default instance\n */\n close: function() {\n if (this._instance) {\n this._instance.close();\n }\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('docSearch', Search);\n }\n\n // Expose globally (both names for compatibility)\n window.Search = Search;\n window.DocSearch = Search; // Backward compatibility\n window.VanduoDocSearch = Search; // New name compatibility\n\n})();\n", "/**\n * Vanduo Framework - Draggable Component\n * JavaScript functionality for draggable elements and drop zones\n */\n\n(function () {\n 'use strict';\n\n /**\n * Draggable Component\n */\n const Draggable = {\n // Store initialized draggables and their cleanup functions\n instances: new Map(),\n // Store current drag state\n currentDrag: null,\n // Store touch state\n touchState: null,\n // Feedback element\n feedbackElement: null,\n // Shared selector used by init and touch reorder\n containerSelector: '.vd-draggable-container, .vd-draggable-container-vertical',\n\n /**\n * Initialize draggable components\n */\n init: function () {\n const draggables = document.querySelectorAll('.vd-draggable, [data-draggable]');\n\n draggables.forEach(element => {\n if (this.instances.has(element)) {\n return;\n }\n this.initDraggable(element);\n });\n\n const containers = document.querySelectorAll(this.containerSelector);\n containers.forEach(container => {\n if (!this.instances.has(container)) {\n this.initContainer(container);\n }\n });\n\n const dropZones = document.querySelectorAll('.vd-drop-zone');\n dropZones.forEach(zone => {\n if (!this.instances.has(zone)) {\n this.initDropZone(zone);\n }\n });\n\n this.createFeedbackElement();\n },\n\n /**\n * Initialize a single draggable element\n * @param {HTMLElement} element - Draggable element\n */\n initDraggable: function (element) {\n const cleanupFunctions = [];\n\n // Make element draggable if not already\n if (!element.hasAttribute('draggable')) {\n element.setAttribute('draggable', 'true');\n }\n\n // Accessibility: add ARIA attributes\n if (!element.hasAttribute('tabindex')) {\n element.setAttribute('tabindex', '0');\n }\n element.setAttribute('role', 'option');\n element.setAttribute('aria-roledescription', 'draggable item');\n element.setAttribute('aria-grabbed', 'false');\n\n // Handle drag start\n const dragStartHandler = (e) => {\n this.handleDragStart(e, element);\n };\n element.addEventListener('dragstart', dragStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragstart', dragStartHandler));\n\n // Handle drag\n const dragHandler = (e) => {\n this.handleDrag(e, element);\n };\n element.addEventListener('drag', dragHandler);\n cleanupFunctions.push(() => element.removeEventListener('drag', dragHandler));\n\n // Handle drag end\n const dragEndHandler = (e) => {\n this.handleDragEnd(e, element);\n };\n element.addEventListener('dragend', dragEndHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragend', dragEndHandler));\n\n // Handle touch start (for mobile)\n const touchStartHandler = (e) => {\n this.handleTouchStart(e, element);\n };\n element.addEventListener('touchstart', touchStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchstart', touchStartHandler));\n\n // Handle touch move (for mobile)\n // { passive: false } is required so that e.preventDefault() works\n // once the drag threshold is reached \u2014 without it, modern browsers\n // treat the listener as passive and silently ignore preventDefault().\n const touchMoveHandler = (e) => {\n this.handleTouchMove(e, element);\n };\n element.addEventListener('touchmove', touchMoveHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchmove', touchMoveHandler));\n\n // Handle touch end (for mobile)\n const touchEndHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchend', touchEndHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchend', touchEndHandler));\n\n // Handle touch cancel (for mobile)\n const touchCancelHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchcancel', touchCancelHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchcancel', touchCancelHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, element);\n };\n element.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => element.removeEventListener('keydown', keydownHandler));\n\n this.instances.set(element, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a draggable container\n * @param {HTMLElement} container - Draggable container\n */\n initContainer: function (container) {\n // Accessibility: add ARIA role to container\n container.setAttribute('role', 'listbox');\n container.setAttribute('aria-label', container.getAttribute('aria-label') || 'Draggable items');\n\n const items = container.querySelectorAll('.vd-draggable-item');\n items.forEach(item => {\n if (!this.instances.has(item)) {\n this.initDraggable(item);\n }\n });\n\n const cleanupFunctions = [];\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n };\n\n // Handle drag over for auto-sorting\n const dragOverHandler = (e) => {\n e.preventDefault(); // Necessary to allow drop\n e.dataTransfer.dropEffect = 'move';\n\n if (!this.currentDrag) return;\n const draggingEl = this.currentDrag.element;\n\n // Only reorder if dragging an item that belongs to this container (or if we support cross-container drag, but keep simple)\n if (!container.contains(draggingEl)) return;\n\n // Prevent jumps when the dragging finalizes with 0,0 coordinates near the end\n if (e.clientX === 0 && e.clientY === 0) return;\n\n this.handleReorder(container, draggingEl, e.clientX, e.clientY);\n };\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault(); // crucial to prevent the browser's default handling and snapping back\n };\n\n container.addEventListener('dragenter', dragEnterHandler);\n container.addEventListener('dragover', dragOverHandler);\n container.addEventListener('drop', dropHandler);\n\n cleanupFunctions.push(() => {\n container.removeEventListener('dragenter', dragEnterHandler);\n container.removeEventListener('dragover', dragOverHandler);\n container.removeEventListener('drop', dropHandler);\n });\n\n this.instances.set(container, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a drop zone\n * @param {HTMLElement} zone - Drop zone element\n */\n initDropZone: function (zone) {\n const cleanupFunctions = [];\n\n // Accessibility: add ARIA role to drop zone\n zone.setAttribute('role', 'region');\n zone.setAttribute('aria-dropeffect', 'move');\n if (!zone.hasAttribute('aria-label')) {\n zone.setAttribute('aria-label', 'Drop zone');\n }\n\n // Handle drag over\n const dragOverHandler = (e) => {\n e.preventDefault();\n this.handleDragOver(e, zone);\n };\n zone.addEventListener('dragover', dragOverHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragover', dragOverHandler));\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n this.handleDragEnter(e, zone);\n };\n zone.addEventListener('dragenter', dragEnterHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragenter', dragEnterHandler));\n\n // Handle drag leave\n const dragLeaveHandler = (e) => {\n this.handleDragLeave(e, zone);\n };\n zone.addEventListener('dragleave', dragLeaveHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragleave', dragLeaveHandler));\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault();\n this.handleDrop(e, zone);\n };\n zone.addEventListener('drop', dropHandler);\n cleanupFunctions.push(() => zone.removeEventListener('drop', dropHandler));\n\n this.instances.set(zone, { cleanup: cleanupFunctions });\n },\n\n /**\n * Create feedback element for drag operations\n */\n createFeedbackElement: function () {\n if (!this.feedbackElement) {\n // Reuse existing element if present\n const existing = document.querySelector('.vd-drag-feedback');\n if (existing) {\n this.feedbackElement = existing;\n return;\n }\n\n this.feedbackElement = document.createElement('div');\n this.feedbackElement.className = 'vd-drag-feedback hidden';\n this.feedbackElement.setAttribute('role', 'presentation');\n document.body.appendChild(this.feedbackElement);\n }\n },\n\n /**\n * Handle drag start event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragStart: function (e, element) {\n // Add dragging class\n element.classList.add('is-dragging');\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: e.clientX, y: e.clientY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element)\n };\n\n // Set drag data\n e.dataTransfer.effectAllowed = 'move';\n e.dataTransfer.setData('text/plain', this.currentDrag.data);\n\n // We no longer suppress the native ghost image or manually update feedback\n // for mouse drags, relying on the browser's native rendering instead.\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY }\n }\n }));\n },\n\n /**\n * Handle drag event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDrag: function (e, element) {\n // Guard against null state (race condition on fast interactions)\n if (!this.currentDrag) return;\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - this.currentDrag.initialPosition.x,\n y: e.clientY - this.currentDrag.initialPosition.y\n }\n }\n }));\n },\n\n /**\n * Handle drag end event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragEnd: function (e, element) {\n // Remove dragging class\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'false');\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Guard against null state\n const data = this.currentDrag?.data || this.getData(element);\n const initialPos = this.currentDrag?.initialPosition || { x: 0, y: 0 };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - initialPos.x,\n y: e.clientY - initialPos.y\n }\n }\n }));\n\n // Reset drag state\n this.currentDrag = null;\n },\n\n /**\n * Handle touch start event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchStart: function (e, element) {\n // Don't prevent default here \u2014 it blocks scrolling.\n // We only prevent default in touchmove once drag threshold is reached.\n const touch = e.touches[0];\n const rect = element.getBoundingClientRect();\n this.touchState = {\n element: element,\n startX: touch.clientX,\n startY: touch.clientY,\n lastX: touch.clientX,\n lastY: touch.clientY,\n // Keep preview anchored to the original grab point.\n offsetX: touch.clientX - rect.left,\n offsetY: touch.clientY - rect.top,\n startTime: Date.now(),\n isDragging: false\n };\n },\n\n /**\n * Handle touch move event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchMove: function (e, element) {\n if (!this.touchState) return;\n\n const touch = e.touches[0];\n this.touchState.lastX = touch.clientX;\n this.touchState.lastY = touch.clientY;\n const deltaX = touch.clientX - this.touchState.startX;\n const deltaY = touch.clientY - this.touchState.startY;\n\n // Only start dragging if moved a minimum distance\n if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {\n // Now we know it's a drag, not a scroll \u2014 prevent default\n if (e.cancelable) e.preventDefault();\n\n if (!this.touchState.isDragging) {\n this.touchState.isDragging = true;\n element.classList.add('is-dragging');\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: this.touchState.startX, y: this.touchState.startY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element),\n // Preserve where inside the element the drag started for accurate ghost positioning.\n offsetX: this.touchState.offsetX,\n offsetY: this.touchState.offsetY\n };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY }\n }\n }));\n }\n\n // Update feedback\n this.updateFeedback(touch.clientX, touch.clientY);\n\n // Dispatch event\n if (this.currentDrag) {\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY },\n delta: { x: deltaX, y: deltaY }\n }\n }));\n\n this.updateTouchDropZone(touch.clientX, touch.clientY);\n\n // Reorder for touch\n const container = element.closest(this.containerSelector);\n if (container && container.contains(element)) {\n this.handleReorder(container, element, touch.clientX, touch.clientY);\n }\n }\n }\n },\n\n /**\n * Handle touch end event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchEnd: function (e, element) {\n if (this.touchState && this.touchState.isDragging) {\n if (e.cancelable) e.preventDefault();\n const endTouch = e.changedTouches?.[0];\n const endPosition = {\n x: endTouch?.clientX ?? this.touchState.lastX ?? this.touchState.startX,\n y: endTouch?.clientY ?? this.touchState.lastY ?? this.touchState.startY\n };\n\n const dropZone = this.resolveDropZoneAtPoint(endPosition.x, endPosition.y) || this.touchState.overZone;\n if (dropZone) {\n this.dispatchDrop(dropZone, endPosition);\n } else if (this.touchState.overZone) {\n this.touchState.overZone.classList.remove('is-drag-over');\n }\n\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n element.setAttribute('aria-grabbed', 'false');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Dispatch event\n const data = this.currentDrag?.data || this.getData(element);\n const startX = this.touchState?.startX || 0;\n const startY = this.touchState?.startY || 0;\n\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: endPosition,\n delta: {\n x: endPosition.x - startX,\n y: endPosition.y - startY\n }\n }\n }));\n }\n\n // Reset states\n this.touchState = null;\n this.currentDrag = null;\n },\n\n /**\n * Handle drag over event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} _zone - Drop zone element\n */\n handleDragOver: function (e, _zone) {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n },\n\n /**\n * Handle drag enter event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragEnter: function (e, zone) {\n e.preventDefault();\n zone.classList.add('is-drag-over');\n },\n\n /**\n * Handle drag leave event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragLeave: function (e, zone) {\n zone.classList.remove('is-drag-over');\n },\n\n /**\n * Handle drop event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDrop: function (e, zone) {\n e.preventDefault();\n this.dispatchDrop(zone, { x: e.clientX, y: e.clientY });\n },\n\n /**\n * Resolve a drop zone from viewport coordinates\n * @param {number} x\n * @param {number} y\n * @returns {HTMLElement|null}\n */\n resolveDropZoneAtPoint: function (x, y) {\n if (!Number.isFinite(x) || !Number.isFinite(y)) return null;\n\n // Prefer the full stacking list so overlays/top elements don't hide real drop targets.\n if (typeof document.elementsFromPoint === 'function') {\n const stacked = document.elementsFromPoint(x, y);\n for (const element of stacked) {\n const zone = element.closest('.vd-drop-zone');\n if (zone) return zone;\n }\n }\n\n const target = document.elementFromPoint(x, y);\n const targetZone = target ? target.closest('.vd-drop-zone') : null;\n if (targetZone) return targetZone;\n\n // Last-resort fallback for mobile emulation edge cases.\n const zones = document.querySelectorAll('.vd-drop-zone');\n for (const zone of zones) {\n const rect = zone.getBoundingClientRect();\n if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {\n return zone;\n }\n }\n\n return null;\n },\n\n /**\n * Track and update active drop-zone hover state on touch devices\n * @param {number} x\n * @param {number} y\n */\n updateTouchDropZone: function (x, y) {\n if (!this.touchState) return;\n\n const nextZone = this.resolveDropZoneAtPoint(x, y);\n const prevZone = this.touchState.overZone || null;\n\n if (prevZone && prevZone !== nextZone) {\n prevZone.classList.remove('is-drag-over');\n }\n\n if (nextZone && nextZone !== prevZone) {\n nextZone.classList.add('is-drag-over');\n }\n\n this.touchState.overZone = nextZone || null;\n },\n\n /**\n * Dispatch a normalized drop event for mouse and touch flows\n * @param {HTMLElement} zone\n * @param {{x:number, y:number}} position\n */\n dispatchDrop: function (zone, position) {\n zone.classList.remove('is-drag-over');\n zone.dispatchEvent(new CustomEvent('draggable:drop', {\n bubbles: true,\n detail: {\n zone: zone,\n element: this.currentDrag?.element,\n data: this.currentDrag?.data,\n position: position\n }\n }));\n },\n\n /**\n * Reorder elements in container based on cursor position\n * @param {HTMLElement} container \n * @param {HTMLElement} element \n * @param {number} clientX \n * @param {number} clientY \n */\n handleReorder: function (container, element, clientX, clientY) {\n const isVertical = container.classList.contains('vd-draggable-container-vertical');\n const siblings = [...container.querySelectorAll('.vd-draggable-item:not(.is-dragging), .vd-draggable:not(.is-dragging)')];\n\n const nextSibling = siblings.reduce((closest, child) => {\n const box = child.getBoundingClientRect();\n const offset = isVertical\n ? clientY - box.top - box.height / 2\n : clientX - box.left - box.width / 2;\n\n if (offset < 0 && offset > closest.offset) {\n return { offset: offset, element: child };\n } else {\n return closest;\n }\n }, { offset: Number.NEGATIVE_INFINITY }).element;\n\n if (nextSibling == null) {\n container.appendChild(element);\n } else {\n container.insertBefore(element, nextSibling);\n }\n },\n\n /**\n * Handle keyboard events\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} element - Draggable element\n */\n handleKeydown: function (e, element) {\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n // Trigger click or custom action\n element.click();\n break;\n case 'Escape':\n // Cancel drag if in progress\n if (element.classList.contains('is-dragging')) {\n element.classList.remove('is-dragging');\n element.setAttribute('aria-grabbed', 'false');\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n this.currentDrag = null;\n }\n break;\n case 'ArrowUp':\n case 'ArrowLeft': {\n e.preventDefault();\n const prev = element.previousElementSibling;\n if (prev && (prev.classList.contains('vd-draggable') || prev.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(element, prev);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'up' }\n }));\n }\n break;\n }\n case 'ArrowDown':\n case 'ArrowRight': {\n e.preventDefault();\n const next = element.nextElementSibling;\n if (next && (next.classList.contains('vd-draggable') || next.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(next, element);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'down' }\n }));\n }\n break;\n }\n }\n },\n\n /**\n * Get data from draggable element\n * @param {HTMLElement} element - Draggable element\n * @returns {string} Data associated with the element\n */\n getData: function (element) {\n return element.dataset.draggable || element.textContent.trim();\n },\n\n /**\n * Update drag feedback element\n * @param {number} x - Current X coordinate\n * @param {number} y - Current Y coordinate\n */\n updateFeedback: function (x, y) {\n if (!this.currentDrag) return;\n\n // Show feedback\n this.feedbackElement.classList.remove('hidden');\n\n // Update feedback content\n const rect = this.currentDrag.initialBounds;\n this.feedbackElement.innerHTML = '';\n const clone = this.currentDrag.element.cloneNode(true);\n this.feedbackElement.appendChild(clone);\n\n // Set styles\n const offsetX = this.currentDrag.offsetX ?? 20;\n const offsetY = this.currentDrag.offsetY ?? 20;\n Object.assign(this.feedbackElement.style, {\n left: (x - offsetX) + 'px',\n top: (y - offsetY) + 'px',\n width: rect.width + 'px',\n height: rect.height + 'px'\n });\n },\n\n /**\n * Make an element draggable programmatically\n * @param {HTMLElement|string} element - Element or selector\n * @param {Object} options - Configuration options\n */\n makeDraggable: function (element, options = {}) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && !this.instances.has(el)) {\n // Add classes and attributes\n el.classList.add('vd-draggable');\n el.setAttribute('draggable', 'true');\n\n // Set options\n if (options.data) {\n el.dataset.draggable = options.data;\n }\n\n // Initialize\n this.initDraggable(el);\n }\n },\n\n /**\n * Remove draggable functionality from an element\n * @param {HTMLElement|string} element - Element or selector\n */\n removeDraggable: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && this.instances.has(el)) {\n // Clean up\n const instance = this.instances.get(el);\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n\n // Remove classes and attributes\n el.classList.remove('vd-draggable');\n el.removeAttribute('draggable');\n el.removeAttribute('data-draggable');\n }\n },\n\n /**\n * Destroy a draggable instance and clean up event listeners\n * @param {HTMLElement} element - Draggable element\n */\n destroy: function (element) {\n this.removeDraggable(element);\n },\n\n /**\n * Destroy all draggable instances\n */\n destroyAll: function () {\n const instances = Array.from(this.instances.keys());\n instances.forEach(element => this.destroy(element));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('draggable', Draggable);\n }\n\n // Expose globally\n window.VanduoDraggable = Draggable;\n})();\n", "/**\n * Vanduo Framework \u2013 LazyLoad Component\n * v1.2.1\n *\n * Provides two levels of API:\n *\n * LOW-LEVEL (generic IntersectionObserver wrapper)\n * VanduoLazyLoad.observe(element, callback, options?)\n * VanduoLazyLoad.unobserve(element)\n * VanduoLazyLoad.unobserveAll()\n *\n * HIGH-LEVEL (HTML-section fetcher, mirrors vanduo-docs SPA behaviour)\n * VanduoLazyLoad.loadSection(url, containerEl, options?)\n * options: { placeholder, threshold, rootMargin, onLoaded, onError }\n * placeholder: 'skeleton' | 'spinner' | HTMLString (default: 'skeleton')\n *\n * ATTRIBUTE-DRIVEN (zero-JS usage, wired by init())\n *
    \u2026
    \n *\n * EVENTS dispatched on the host element:\n * lazysection:loading \u2014 fetch started\n * lazysection:loaded \u2014 content injected\n * lazysection:error \u2014 fetch failed\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500 Private state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /** @type {Map} */\n const _observerMap = new Map();\n\n /* \u2500\u2500 Security helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Returns true only if `url` resolves to the same origin as the page\n * (relative paths and same-origin absolute URLs are allowed).\n * Cross-origin URLs are rejected to prevent SSRF-style fetch abuse.\n * @param {string} url\n * @returns {boolean}\n */\n function _isSafeUrl(url) {\n try {\n // Relative URLs (no origin) are always safe\n const resolved = new URL(url, window.location.href);\n return resolved.origin === window.location.origin;\n } catch (_) {\n return false;\n }\n }\n\n /**\n * Safely inject fetched HTML into a container by parsing it with\n * DOMParser (avoids script execution) and replacing children via\n * standard DOM APIs instead of raw innerHTML assignment.\n * @param {Element} containerEl\n * @param {string} html\n */\n function _safeInjectHtml(containerEl, html) {\n const parser = new DOMParser();\n const doc = parser.parseFromString(html.trim(), 'text/html'); // CodeQL [js/xss-through-dom] Intentional: parsed nodes are sanitized below before adoption into live DOM\n\n const DANGEROUS_TAGS = ['SCRIPT', 'IFRAME', 'OBJECT', 'EMBED', 'FORM', 'BASE', 'LINK', 'META', 'STYLE'];\n for (const tag of DANGEROUS_TAGS) {\n const els = doc.querySelectorAll(tag);\n for (let i = els.length - 1; i >= 0; i--) {\n els[i].parentNode.removeChild(els[i]);\n }\n }\n\n // Strip dangerous attributes (e.g. onerror, javascript: urls) from all elements\n function _sanitizeNode(node) {\n if (node.nodeType === Node.ELEMENT_NODE) {\n const attrs = node.attributes;\n for (let i = attrs.length - 1; i >= 0; i--) {\n const attrName = attrs[i].name.toLowerCase();\n const attrValue = attrs[i].value.toLowerCase();\n const trimmedValue = attrValue.trim();\n if (\n attrName.startsWith('on') ||\n trimmedValue.startsWith('javascript:') ||\n trimmedValue.startsWith('data:') ||\n trimmedValue.startsWith('vbscript:')\n ) {\n node.removeAttribute(attrs[i].name);\n }\n }\n const children = node.childNodes;\n for (let i = 0; i < children.length; i++) {\n _sanitizeNode(children[i]);\n }\n }\n }\n _sanitizeNode(doc.body);\n\n // Collect all top-level body children\n const nodes = Array.from(doc.body.childNodes);\n // Clear container and append parsed nodes\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n nodes.forEach(function (node) {\n containerEl.appendChild(document.adoptNode(node));\n });\n }\n\n /* \u2500\u2500 Placeholder HTML \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _skeletonHtml() {\n return '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _spinnerHtml() {\n return '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _resolvePlaceholder(placeholder) {\n if (!placeholder || placeholder === 'skeleton') return _skeletonHtml();\n if (placeholder === 'spinner') return _spinnerHtml();\n // Caller-supplied HTML string\n return placeholder;\n }\n\n /* \u2500\u2500 Dispatch helper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _dispatch(el, eventName, detail) {\n el.dispatchEvent(new CustomEvent(eventName, { bubbles: true, detail: detail || {} }));\n }\n\n /* \u2500\u2500 VanduoLazyLoad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const VanduoLazyLoad = {\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * LOW-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Observe an element. `callback` is invoked once when the element\n * enters the viewport, then the element is automatically unobserved.\n *\n * @param {Element} element\n * @param {function(Element): void} callback\n * @param {{ threshold?: number, rootMargin?: string }} [options]\n */\n observe: function (element, callback, options) {\n if (!(element instanceof Element)) {\n console.warn('[VanduoLazyLoad] observe() requires a DOM Element.');\n return;\n }\n if (typeof callback !== 'function') {\n console.warn('[VanduoLazyLoad] observe() requires a callback function.');\n return;\n }\n // Already observed \u2014 ignore\n if (_observerMap.has(element)) return;\n\n const threshold = (options && options.threshold != null) ? options.threshold : 0;\n const rootMargin = (options && options.rootMargin) ? options.rootMargin : '0px';\n\n const observer = new IntersectionObserver(function (entries, obs) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n obs.unobserve(entry.target);\n _observerMap.delete(entry.target);\n try {\n callback(entry.target);\n } catch (e) {\n console.error('[VanduoLazyLoad] Callback threw:', e);\n }\n }\n });\n }, { threshold: threshold, rootMargin: rootMargin });\n\n _observerMap.set(element, observer);\n observer.observe(element);\n },\n\n /**\n * Stop observing an element that was previously passed to observe().\n * @param {Element} element\n */\n unobserve: function (element) {\n const observer = _observerMap.get(element);\n if (observer) {\n observer.unobserve(element);\n _observerMap.delete(element);\n }\n },\n\n /**\n * Stop observing ALL currently observed elements.\n */\n unobserveAll: function () {\n _observerMap.forEach(function (observer, element) {\n observer.unobserve(element);\n });\n _observerMap.clear();\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * HIGH-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fetch an HTML partial and inject it into `containerEl` when the\n * container enters the viewport. A placeholder is shown immediately.\n *\n * @param {string} url URL of the HTML partial to fetch\n * @param {Element} containerEl Target element whose content will be replaced\n * @param {{\n * placeholder?: 'skeleton'|'spinner'|string,\n * threshold?: number,\n * rootMargin?: string,\n * onLoaded?: function(Element): void,\n * onError?: function(Error): void\n * }} [options]\n */\n loadSection: function (url, containerEl, options) {\n if (typeof url !== 'string' || !url) {\n console.warn('[VanduoLazyLoad] loadSection() requires a non-empty URL string.');\n return;\n }\n if (!(containerEl instanceof Element)) {\n console.warn('[VanduoLazyLoad] loadSection() requires a DOM Element as containerEl.');\n return;\n }\n // Reject cross-origin URLs to prevent SSRF-style fetch abuse\n if (!_isSafeUrl(url)) {\n console.error('[VanduoLazyLoad] loadSection() blocked cross-origin URL:', url);\n return;\n }\n\n const opts = options || {};\n // Placeholders are known-safe static HTML strings built internally\n const placeholderHtml = _resolvePlaceholder(opts.placeholder);\n\n // Use _safeInjectHtml instead of innerHTML to prevent XSS from caller-supplied placeholders\n _safeInjectHtml(containerEl, placeholderHtml);\n _dispatch(containerEl, 'lazysection:loading', { url: url });\n\n // Fetch when visible\n this.observe(containerEl, function () {\n const controller = new window.AbortController();\n const timeoutId = setTimeout(function () { controller.abort(); }, 10000);\n\n window.fetch(url, { signal: controller.signal })\n .then(function (res) {\n clearTimeout(timeoutId);\n if (!res.ok) throw new Error('HTTP ' + res.status);\n return res.text();\n })\n .then(function (html) {\n // Use DOMParser to parse fetched content safely, avoiding\n // raw innerHTML assignment of externally-sourced strings\n _safeInjectHtml(containerEl, html);\n _dispatch(containerEl, 'lazysection:loaded', { url: url });\n // Re-init Vanduo components inside the new content\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.init();\n }\n if (typeof opts.onLoaded === 'function') {\n opts.onLoaded(containerEl);\n }\n })\n .catch(function (err) {\n // Build error node via DOM APIs \u2014 no dynamic HTML strings\n const alertEl = document.createElement('div');\n alertEl.className = 'vd-alert vd-alert-error';\n alertEl.setAttribute('role', 'alert');\n const msgEl = document.createElement('span');\n msgEl.textContent = 'Failed to load content. ';\n const detailEl = document.createElement('small');\n detailEl.style.opacity = '0.7';\n detailEl.textContent = err.message;\n alertEl.appendChild(msgEl);\n alertEl.appendChild(detailEl);\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n containerEl.appendChild(alertEl);\n _dispatch(containerEl, 'lazysection:error', { url: url, error: err });\n console.error('[VanduoLazyLoad] loadSection failed:', err);\n if (typeof opts.onError === 'function') {\n opts.onError(err);\n }\n });\n }, { threshold: opts.threshold, rootMargin: opts.rootMargin });\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * ATTRIBUTE-DRIVEN INIT\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Scan the DOM for [data-vd-lazy] elements and wire them up.\n * Safe to call multiple times \u2014 already-observed elements are skipped.\n */\n init: function () {\n const self = this;\n const elements = document.querySelectorAll('[data-vd-lazy]');\n elements.forEach(function (el) {\n // Skip already-observed or already-loaded elements\n if (_observerMap.has(el) || el.dataset.vdLazyState === 'loading' || el.dataset.vdLazyState === 'loaded') return;\n\n const url = el.getAttribute('data-vd-lazy');\n if (!url) return;\n\n el.dataset.vdLazyState = 'loading';\n const placeholder = el.getAttribute('data-vd-lazy-placeholder') || 'skeleton';\n\n self.loadSection(url, el, {\n placeholder: placeholder,\n onLoaded: function () {\n el.dataset.vdLazyState = 'loaded';\n },\n onError: function () {\n el.dataset.vdLazyState = 'error';\n }\n });\n });\n }\n };\n\n /* \u2500\u2500 Register with Vanduo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('LazyLoad', VanduoLazyLoad);\n }\n\n /* \u2500\u2500 Global convenience alias \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n window.VanduoLazyLoad = VanduoLazyLoad;\n\n})();\n", "/**\n * Vanduo Framework - Glass Scroll Activation\n * Generic scroll-aware glass activation via IntersectionObserver.\n *\n * Usage:\n * Add `data-glass-scroll` to any element carrying a `.vd-glass*` class.\n * By default the previous sibling is used as the sentinel.\n * Point to a custom sentinel via `data-glass-sentinel=\"\"`.\n *\n * Behaviour:\n * - Adds `.is-glass-active` when the sentinel leaves the viewport (scrolled past).\n * - Removes `.is-glass-active` when the sentinel re-enters the viewport.\n */\n(function () {\n 'use strict';\n\n const GlassScroll = {\n /** @type {Map} */\n observers: new Map(),\n\n init: function () {\n document.querySelectorAll('[data-glass-scroll]').forEach(el => {\n if (this.observers.has(el)) return;\n this.initElement(el);\n });\n },\n\n /**\n * Wire up a single scroll-activated glass element.\n * @param {HTMLElement} el\n */\n initElement: function (el) {\n const sentinelSelector = el.dataset.glassSentinel;\n let sentinel;\n\n if (sentinelSelector) {\n sentinel = document.querySelector(sentinelSelector);\n }\n\n if (!sentinel) {\n // Fall back to the previous sibling element\n sentinel = el.previousElementSibling;\n }\n\n if (!sentinel) {\n // No sentinel available \u2014 activate immediately so glass is always shown\n el.classList.add('is-glass-active');\n return;\n }\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n // Active when sentinel is NOT intersecting (scrolled past it)\n el.classList.toggle('is-glass-active', !entry.isIntersecting);\n });\n },\n { threshold: 0, rootMargin: '0px' }\n );\n\n observer.observe(sentinel);\n this.observers.set(el, observer);\n },\n\n /**\n * Disconnect and remove a single element's observer.\n * @param {HTMLElement} el\n */\n destroy: function (el) {\n const observer = this.observers.get(el);\n if (observer) {\n observer.disconnect();\n this.observers.delete(el);\n }\n },\n\n destroyAll: function () {\n this.observers.forEach((observer, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('glassScroll', GlassScroll);\n }\n\n window.VanduoGlassScroll = GlassScroll;\n})();\n", "/**\n * Vanduo Framework - Flow (Carousel/Slider) Component\n * Touch-enabled carousel with slide/fade transitions, autoplay, indicators\n */\n\n(function () {\n 'use strict';\n\n const Flow = {\n instances: new Map(),\n\n init: function () {\n const carousels = document.querySelectorAll('.vd-flow, .vd-carousel');\n carousels.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const track = el.querySelector('.vd-flow-track');\n if (!track) return;\n\n const slides = Array.from(track.querySelectorAll('.vd-flow-slide'));\n if (slides.length === 0) return;\n\n const isFade = el.classList.contains('vd-flow-fade');\n const autoplay = el.hasAttribute('data-vd-autoplay');\n const interval = parseInt(el.getAttribute('data-vd-interval'), 10) || 5000;\n const loop = el.getAttribute('data-vd-loop') !== 'false';\n\n const state = {\n current: 0,\n total: slides.length,\n autoplayTimer: null,\n isFade: isFade,\n loop: loop,\n isDragging: false,\n startX: 0,\n currentX: 0,\n threshold: 50\n };\n\n const cleanup = [];\n\n // Set initial active slide\n slides.forEach((slide, i) => {\n slide.setAttribute('role', 'group');\n slide.setAttribute('aria-roledescription', 'slide');\n slide.setAttribute('aria-label', 'Slide ' + (i + 1) + ' of ' + slides.length);\n if (i === 0) slide.classList.add('is-active');\n });\n\n el.setAttribute('role', 'region');\n el.setAttribute('aria-roledescription', 'carousel');\n if (!el.getAttribute('aria-label')) {\n el.setAttribute('aria-label', 'Carousel');\n }\n\n // Live region for announcements\n const liveRegion = document.createElement('div');\n liveRegion.setAttribute('aria-live', 'polite');\n liveRegion.setAttribute('aria-atomic', 'true');\n liveRegion.className = 'sr-only';\n liveRegion.style.cssText = 'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);';\n el.appendChild(liveRegion);\n\n const goTo = (index, announce) => {\n if (announce === undefined) announce = true;\n let target = index;\n if (state.loop) {\n target = ((index % state.total) + state.total) % state.total;\n } else {\n target = Math.max(0, Math.min(index, state.total - 1));\n }\n\n const prev = state.current;\n state.current = target;\n\n if (state.isFade) {\n slides.forEach((s, i) => {\n s.classList.toggle('is-active', i === target);\n });\n } else {\n track.style.transform = 'translateX(-' + (target * 100) + '%)';\n }\n\n // Update indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.classList.toggle('is-active', i === target);\n ind.setAttribute('aria-selected', i === target ? 'true' : 'false');\n });\n\n // Update slide ARIA\n slides.forEach((s, i) => {\n s.setAttribute('aria-hidden', i !== target ? 'true' : 'false');\n });\n\n if (announce) {\n liveRegion.textContent = 'Slide ' + (target + 1) + ' of ' + state.total;\n }\n\n el.dispatchEvent(new CustomEvent('flow:change', {\n detail: { current: target, previous: prev, total: state.total }\n }));\n };\n\n const next = () => goTo(state.current + 1);\n const prev = () => goTo(state.current - 1);\n\n // Controls\n const prevBtn = el.querySelector('.vd-flow-prev');\n const nextBtn = el.querySelector('.vd-flow-next');\n\n if (prevBtn) {\n const h = () => prev();\n prevBtn.addEventListener('click', h);\n cleanup.push(() => prevBtn.removeEventListener('click', h));\n }\n if (nextBtn) {\n const h = () => next();\n nextBtn.addEventListener('click', h);\n cleanup.push(() => nextBtn.removeEventListener('click', h));\n }\n\n // Indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.setAttribute('role', 'tab');\n ind.setAttribute('aria-selected', i === 0 ? 'true' : 'false');\n ind.setAttribute('aria-label', 'Go to slide ' + (i + 1));\n const h = () => goTo(i);\n ind.addEventListener('click', h);\n cleanup.push(() => ind.removeEventListener('click', h));\n });\n\n // Keyboard navigation\n const keyHandler = (e) => {\n if (e.key === 'ArrowLeft') { prev(); e.preventDefault(); }\n if (e.key === 'ArrowRight') { next(); e.preventDefault(); }\n };\n el.setAttribute('tabindex', '0');\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n // Touch / pointer support\n const pointerDown = (e) => {\n state.isDragging = true;\n state.startX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n state.currentX = state.startX;\n el.classList.add('is-dragging');\n };\n\n const pointerMove = (e) => {\n if (!state.isDragging) return;\n state.currentX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n };\n\n const pointerUp = () => {\n if (!state.isDragging) return;\n state.isDragging = false;\n el.classList.remove('is-dragging');\n const diff = state.startX - state.currentX;\n if (Math.abs(diff) > state.threshold) {\n if (diff > 0) next();\n else prev();\n }\n };\n\n el.addEventListener('mousedown', pointerDown);\n el.addEventListener('mousemove', pointerMove);\n el.addEventListener('mouseup', pointerUp);\n el.addEventListener('mouseleave', pointerUp);\n el.addEventListener('touchstart', pointerDown, { passive: true });\n el.addEventListener('touchmove', pointerMove, { passive: true });\n el.addEventListener('touchend', pointerUp);\n\n cleanup.push(\n () => el.removeEventListener('mousedown', pointerDown),\n () => el.removeEventListener('mousemove', pointerMove),\n () => el.removeEventListener('mouseup', pointerUp),\n () => el.removeEventListener('mouseleave', pointerUp),\n () => el.removeEventListener('touchstart', pointerDown),\n () => el.removeEventListener('touchmove', pointerMove),\n () => el.removeEventListener('touchend', pointerUp)\n );\n\n // Autoplay\n const startAutoplay = () => {\n stopAutoplay();\n state.autoplayTimer = setInterval(next, interval);\n };\n\n const stopAutoplay = () => {\n if (state.autoplayTimer) {\n clearInterval(state.autoplayTimer);\n state.autoplayTimer = null;\n }\n };\n\n if (autoplay) {\n startAutoplay();\n const pauseHandler = () => stopAutoplay();\n const resumeHandler = () => startAutoplay();\n el.addEventListener('mouseenter', pauseHandler);\n el.addEventListener('mouseleave', resumeHandler);\n el.addEventListener('focusin', pauseHandler);\n el.addEventListener('focusout', resumeHandler);\n cleanup.push(\n () => el.removeEventListener('mouseenter', pauseHandler),\n () => el.removeEventListener('mouseleave', resumeHandler),\n () => el.removeEventListener('focusin', pauseHandler),\n () => el.removeEventListener('focusout', resumeHandler),\n () => stopAutoplay()\n );\n }\n\n // Initial ARIA state\n goTo(0, false);\n\n this.instances.set(el, {\n cleanup: cleanup,\n goTo: goTo,\n next: next,\n prev: prev,\n getState: () => ({ ...state })\n });\n },\n\n goTo: function (el, index) {\n const instance = this.instances.get(el);\n if (instance) instance.goTo(index);\n },\n\n next: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.next();\n },\n\n prev: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.prev();\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('flow', Flow);\n }\n\n window.VanduoFlow = Flow;\n\n})();\n", "/**\n * Vanduo Framework - Bubble (Popover) Component\n * Click-triggered rich HTML popover, reuses tooltip positioning concepts\n */\n\n(function () {\n 'use strict';\n\n const Bubble = {\n instances: new Map(),\n _globalCleanups: [],\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-bubble], [data-vd-popover]');\n triggers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n\n if (this._globalCleanups.length === 0) {\n const outsideClick = (e) => {\n this.instances.forEach((inst, trigger) => {\n if (!inst.popover.contains(e.target) && !trigger.contains(e.target)) {\n this.hide(trigger);\n }\n });\n };\n const escHandler = (e) => {\n if (e.key === 'Escape') {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n }\n };\n document.addEventListener('click', outsideClick, true);\n document.addEventListener('keydown', escHandler);\n this._globalCleanups.push(\n () => document.removeEventListener('click', outsideClick, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n }\n },\n\n initInstance: function (trigger) {\n const cleanup = [];\n const placement = trigger.getAttribute('data-vd-bubble-placement') ||\n trigger.getAttribute('data-vd-popover-placement') || 'bottom';\n\n // Build popover element\n const popover = document.createElement('div');\n popover.className = 'vd-bubble-content';\n popover.setAttribute('role', 'dialog');\n popover.setAttribute('aria-modal', 'false');\n popover.setAttribute('data-placement', placement);\n\n const title = trigger.getAttribute('data-vd-bubble-title') ||\n trigger.getAttribute('data-vd-popover-title');\n const content = trigger.getAttribute('data-vd-bubble') ||\n trigger.getAttribute('data-vd-popover') || '';\n const htmlContent = trigger.getAttribute('data-vd-bubble-html') ||\n trigger.getAttribute('data-vd-popover-html');\n\n if (title) {\n const header = document.createElement('div');\n header.className = 'vd-bubble-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const closeBtn = document.createElement('button');\n closeBtn.className = 'vd-bubble-close';\n closeBtn.setAttribute('aria-label', 'Close');\n closeBtn.innerHTML = '×';\n header.appendChild(titleSpan);\n header.appendChild(closeBtn);\n popover.appendChild(header);\n\n const closeHandler = (e) => { e.stopPropagation(); this.hide(trigger); };\n closeBtn.addEventListener('click', closeHandler);\n cleanup.push(() => closeBtn.removeEventListener('click', closeHandler));\n }\n\n const body = document.createElement('div');\n body.className = 'vd-bubble-body';\n if (htmlContent) {\n if (typeof sanitizeHtml === 'function') {\n body.innerHTML = sanitizeHtml(htmlContent);\n } else {\n body.textContent = htmlContent;\n }\n } else {\n body.textContent = content;\n }\n popover.appendChild(body);\n\n document.body.appendChild(popover);\n\n // ARIA on trigger\n const popId = 'vd-bubble-' + Math.random().toString(36).slice(2, 9);\n popover.id = popId;\n trigger.setAttribute('aria-haspopup', 'dialog');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.setAttribute('aria-controls', popId);\n\n // Toggle on click\n const toggleHandler = (e) => {\n e.stopPropagation();\n if (popover.classList.contains('is-visible')) {\n this.hide(trigger);\n } else {\n this.hideAll();\n this.show(trigger);\n }\n };\n trigger.addEventListener('click', toggleHandler);\n cleanup.push(() => trigger.removeEventListener('click', toggleHandler));\n\n this.instances.set(trigger, { popover, cleanup, placement });\n },\n\n position: function (trigger, popover, placement) {\n const rect = trigger.getBoundingClientRect();\n const popRect = popover.getBoundingClientRect();\n const gap = 10;\n let top, left;\n\n switch (placement) {\n case 'top':\n top = rect.top - popRect.height - gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n break;\n case 'left':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.left - popRect.width - gap + window.scrollX;\n break;\n case 'right':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.right + gap + window.scrollX;\n break;\n default: // bottom\n top = rect.bottom + gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n }\n\n // Clamp to viewport\n left = Math.max(8, Math.min(left, window.innerWidth - popRect.width - 8));\n top = Math.max(8, top);\n\n popover.style.top = top + 'px';\n popover.style.left = left + 'px';\n },\n\n show: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n const { popover, placement } = instance;\n\n popover.style.display = 'block';\n popover.classList.add('is-visible');\n trigger.setAttribute('aria-expanded', 'true');\n\n requestAnimationFrame(() => {\n this.position(trigger, popover, placement);\n });\n\n trigger.dispatchEvent(new CustomEvent('bubble:show', { bubbles: true }));\n },\n\n hide: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.popover.classList.remove('is-visible');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.dispatchEvent(new CustomEvent('bubble:hide', { bubbles: true }));\n },\n\n hideAll: function () {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n },\n\n destroy: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n if (instance.popover.parentNode) {\n instance.popover.parentNode.removeChild(instance.popover);\n }\n trigger.removeAttribute('aria-haspopup');\n trigger.removeAttribute('aria-expanded');\n trigger.removeAttribute('aria-controls');\n this.instances.delete(trigger);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, trigger) => this.destroy(trigger));\n this._globalCleanups.forEach(fn => fn());\n this._globalCleanups = [];\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('bubble', Bubble);\n }\n\n window.VanduoBubble = Bubble;\n\n})();\n", "/**\n * Vanduo Framework - Waypoint (Scrollspy) Component\n * Highlights navigation links based on scroll position using IntersectionObserver\n */\n\n(function () {\n 'use strict';\n\n const Waypoint = {\n instances: new Map(),\n\n init: function () {\n const navs = document.querySelectorAll('[data-vd-waypoint-nav], [data-vd-scrollspy-nav]');\n navs.forEach(nav => {\n if (this.instances.has(nav)) return;\n this.initInstance(nav);\n });\n },\n\n initInstance: function (nav) {\n const links = Array.from(nav.querySelectorAll('a[href^=\"#\"]'));\n if (links.length === 0) return;\n\n const cleanup = [];\n const offset = parseInt(nav.getAttribute('data-vd-waypoint-offset') || '80', 10);\n const sections = [];\n\n links.forEach(link => {\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.setAttribute('data-vd-waypoint-section', '');\n sections.push({ id, link, section });\n }\n });\n\n if (sections.length === 0) return;\n\n const activeSections = new Set();\n\n const setActive = (id) => {\n links.forEach(l => l.classList.remove('is-active'));\n const target = links.find(l => l.getAttribute('href') === '#' + id);\n if (target) {\n target.classList.add('is-active');\n nav.dispatchEvent(new CustomEvent('waypoint:change', {\n detail: { activeId: id, link: target }\n }));\n }\n };\n\n const rootMargin = '-' + offset + 'px 0px -40% 0px';\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n activeSections.add(entry.target.id);\n } else {\n activeSections.delete(entry.target.id);\n }\n });\n\n // Pick the topmost visible section\n for (let i = 0; i < sections.length; i++) {\n if (activeSections.has(sections[i].id)) {\n setActive(sections[i].id);\n return;\n }\n }\n }, {\n rootMargin: rootMargin,\n threshold: 0\n });\n\n sections.forEach(s => observer.observe(s.section));\n\n // Smooth scroll on click\n links.forEach(link => {\n const clickHandler = (e) => {\n e.preventDefault();\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth' });\n setActive(id);\n }\n };\n link.addEventListener('click', clickHandler);\n cleanup.push(() => link.removeEventListener('click', clickHandler));\n });\n\n cleanup.push(() => observer.disconnect());\n\n this.instances.set(nav, { observer, cleanup, sections, setActive });\n },\n\n refresh: function (nav) {\n this.destroy(nav);\n this.initInstance(nav);\n },\n\n destroy: function (nav) {\n const instance = this.instances.get(nav);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(nav);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, nav) => this.destroy(nav));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('waypoint', Waypoint);\n }\n\n window.VanduoWaypoint = Waypoint;\n\n})();\n", "/**\n * Vanduo Framework - Ripple (Waves Effect) Component\n * Adds expanding circle animation on click at pointer position\n */\n\n(function () {\n 'use strict';\n\n const Ripple = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-ripple, [data-vd-ripple]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n\n const createWave = (e) => {\n const rect = el.getBoundingClientRect();\n const size = Math.max(rect.width, rect.height);\n const x = (e.clientX || (e.touches && e.touches[0].clientX) || rect.left + rect.width / 2) - rect.left - size / 2;\n const y = (e.clientY || (e.touches && e.touches[0].clientY) || rect.top + rect.height / 2) - rect.top - size / 2;\n\n const wave = document.createElement('span');\n wave.className = 'vd-ripple-wave';\n wave.style.width = size + 'px';\n wave.style.height = size + 'px';\n wave.style.left = x + 'px';\n wave.style.top = y + 'px';\n\n el.appendChild(wave);\n\n wave.addEventListener('animationend', () => {\n if (wave.parentNode) wave.parentNode.removeChild(wave);\n });\n };\n\n el.addEventListener('mousedown', createWave);\n el.addEventListener('touchstart', createWave, { passive: true });\n\n cleanup.push(\n () => el.removeEventListener('mousedown', createWave),\n () => el.removeEventListener('touchstart', createWave)\n );\n\n this.instances.set(el, { cleanup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n // Remove any lingering wave elements\n el.querySelectorAll('.vd-ripple-wave').forEach(w => w.remove());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('ripple', Ripple);\n }\n\n window.VanduoRipple = Ripple;\n\n})();\n", "/**\n * Vanduo Framework - Affix (Sticky) Component\n * Uses IntersectionObserver to toggle .is-stuck within the nearest scrollable parent\n */\n\n(function () {\n 'use strict';\n\n function isScrollable(element) {\n if (!element || element === document.body) return false;\n\n const style = window.getComputedStyle(element);\n const overflowY = style.overflowY;\n const overflowX = style.overflowX;\n const canScrollY = /(auto|scroll|overlay)/.test(overflowY) && element.scrollHeight > element.clientHeight;\n const canScrollX = /(auto|scroll|overlay)/.test(overflowX) && element.scrollWidth > element.clientWidth;\n\n return canScrollY || canScrollX;\n }\n\n function getScrollParent(element) {\n let parent = element.parentElement;\n\n while (parent && parent !== document.body && parent !== document.documentElement) {\n if (isScrollable(parent)) return parent;\n parent = parent.parentElement;\n }\n\n return null;\n }\n\n const Affix = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-affix, .vd-sticky, [data-vd-affix]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const parsedOffset = parseInt(el.getAttribute('data-vd-affix-offset') || '0', 10);\n const offset = Number.isNaN(parsedOffset) ? 0 : parsedOffset;\n const scrollParent = getScrollParent(el);\n let isStuck = false;\n\n const sentinel = document.createElement('div');\n sentinel.style.cssText = 'display:block;height:1px;margin-bottom:-1px;visibility:hidden;pointer-events:none;';\n el.parentNode.insertBefore(sentinel, el);\n\n el.style.setProperty('--affix-top-offset', offset + 'px');\n\n function stick() {\n if (isStuck) return;\n isStuck = true;\n el.classList.add('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:stuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n function unstick() {\n if (!isStuck) return;\n isStuck = false;\n el.classList.remove('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:unstuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n const observer = new IntersectionObserver(function (entries) {\n entries.forEach(entry => {\n if (!entry.isIntersecting) {\n stick();\n } else {\n unstick();\n }\n });\n }, {\n root: scrollParent,\n rootMargin: '-' + offset + 'px 0px 0px 0px',\n threshold: 0\n });\n\n observer.observe(sentinel);\n\n cleanup.push(\n () => observer.disconnect(),\n () => { if (sentinel.parentNode) sentinel.parentNode.removeChild(sentinel); },\n () => {\n el.classList.remove('is-stuck');\n el.style.removeProperty('--affix-top-offset');\n }\n );\n\n this.instances.set(el, { cleanup, observer, sentinel, scrollParent });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n el.classList.remove('is-stuck');\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('affix', Affix);\n }\n\n window.VanduoAffix = Affix;\n\n})();\n", "/**\n * Vanduo Framework - Suggest (Autocomplete) Component\n * Dropdown suggestion list with keyboard navigation, static/async data sources\n */\n\n(function () {\n 'use strict';\n\n /**\n * Escape HTML entities to prevent XSS when inserting into innerHTML\n * @param {string} text\n * @returns {string}\n */\n function _escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n const Suggest = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-suggest], [data-vd-autocomplete]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const minChars = parseInt(input.getAttribute('data-vd-suggest-min-chars') || '1', 10);\n const url = input.getAttribute('data-vd-suggest-url') || '';\n const staticData = input.getAttribute('data-vd-suggest') || input.getAttribute('data-vd-autocomplete') || '';\n let items = [];\n\n try { items = JSON.parse(staticData); } catch (_e) {\n items = staticData.split(',').map(s => s.trim()).filter(Boolean);\n }\n\n // Wrap input if not already wrapped\n let wrapper = input.closest('.vd-suggest-wrapper, .vd-autocomplete-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create dropdown list\n const list = document.createElement('ul');\n list.className = 'vd-suggest-list';\n list.setAttribute('role', 'listbox');\n const listId = 'vd-suggest-' + Math.random().toString(36).slice(2, 9);\n list.id = listId;\n wrapper.appendChild(list);\n\n // ARIA\n input.setAttribute('role', 'combobox');\n input.setAttribute('aria-autocomplete', 'list');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('aria-controls', listId);\n input.setAttribute('autocomplete', 'off');\n\n let highlighted = -1;\n let currentItems = [];\n let debounceTimer = null;\n\n const renderItems = (filtered, query) => {\n list.innerHTML = '';\n currentItems = filtered;\n highlighted = -1;\n\n if (filtered.length === 0) {\n const empty = document.createElement('li');\n empty.className = 'vd-suggest-empty';\n empty.textContent = 'No results';\n list.appendChild(empty);\n return;\n }\n\n filtered.forEach((item, i) => {\n const li = document.createElement('li');\n li.className = 'vd-suggest-item';\n li.setAttribute('role', 'option');\n li.id = listId + '-item-' + i;\n\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n if (query) {\n // Escape HTML first to prevent XSS, then highlight matches in the safe string\n const escaped = _escapeHtml(text);\n const re = new RegExp('(' + query.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n li.innerHTML = escaped.replace(re, '$1');\n } else {\n li.textContent = text;\n }\n\n li.addEventListener('click', () => selectItem(i));\n list.appendChild(li);\n });\n };\n\n const open = () => {\n list.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n list.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n highlighted = -1;\n input.removeAttribute('aria-activedescendant');\n };\n\n const selectItem = (index) => {\n const item = currentItems[index];\n const value = typeof item === 'object' ? (item.value || item.label || String(item)) : String(item);\n input.value = value;\n close();\n input.dispatchEvent(new CustomEvent('suggest:select', {\n detail: { value, item, index },\n bubbles: true\n }));\n };\n\n const highlight = (index) => {\n const listItems = list.querySelectorAll('.vd-suggest-item');\n listItems.forEach(li => li.classList.remove('is-highlighted'));\n if (index >= 0 && index < listItems.length) {\n highlighted = index;\n listItems[index].classList.add('is-highlighted');\n input.setAttribute('aria-activedescendant', listItems[index].id);\n listItems[index].scrollIntoView({ block: 'nearest' });\n }\n };\n\n const doSearch = async (query) => {\n if (query.length < minChars) { close(); return; }\n\n let filtered;\n if (url) {\n try {\n const separator = url.includes('?') ? '&' : '?';\n const res = await window.fetch(url + separator + 'q=' + encodeURIComponent(query));\n filtered = await res.json();\n } catch (_e) {\n filtered = [];\n }\n } else {\n const lower = query.toLowerCase();\n filtered = items.filter(item => {\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n return text.toLowerCase().includes(lower);\n });\n }\n\n renderItems(filtered, query);\n if (filtered.length > 0) open();\n else open(); // show \"no results\"\n };\n\n const inputHandler = () => {\n clearTimeout(debounceTimer);\n debounceTimer = setTimeout(() => doSearch(input.value), 200);\n };\n\n const keyHandler = (e) => {\n if (!list.classList.contains('is-open')) {\n if (e.key === 'ArrowDown') { doSearch(input.value); e.preventDefault(); }\n return;\n }\n\n const total = currentItems.length;\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n highlight(highlighted < total - 1 ? highlighted + 1 : 0);\n break;\n case 'ArrowUp':\n e.preventDefault();\n highlight(highlighted > 0 ? highlighted - 1 : total - 1);\n break;\n case 'Enter':\n e.preventDefault();\n if (highlighted >= 0) selectItem(highlighted);\n break;\n case 'Escape':\n close();\n break;\n }\n };\n\n const blurHandler = () => {\n setTimeout(close, 200);\n };\n\n input.addEventListener('input', inputHandler);\n input.addEventListener('keydown', keyHandler);\n input.addEventListener('blur', blurHandler);\n input.addEventListener('focus', () => { if (input.value.length >= minChars) doSearch(input.value); });\n\n cleanup.push(\n () => input.removeEventListener('input', inputHandler),\n () => input.removeEventListener('keydown', keyHandler),\n () => input.removeEventListener('blur', blurHandler),\n () => clearTimeout(debounceTimer),\n () => { if (list.parentNode) list.parentNode.removeChild(list); }\n );\n\n this.instances.set(input, { cleanup, list, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('suggest', Suggest);\n }\n\n window.VanduoSuggest = Suggest;\n\n})();\n", "/**\n * Vanduo Framework - Validate (Form Validation) Component\n * Declarative validation via data attributes with real-time and on-submit modes\n */\n\n(function () {\n 'use strict';\n\n const Validate = {\n instances: new Map(),\n\n rules: {\n required: (value) => value.trim().length > 0,\n email: (value) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value),\n url: (value) => { try { new URL(value); return true; } catch (_e) { return false; } },\n number: (value) => !isNaN(parseFloat(value)) && isFinite(value),\n min: (value, param) => value.length >= parseInt(param, 10),\n max: (value, param) => value.length <= parseInt(param, 10),\n minVal: (value, param) => parseFloat(value) >= parseFloat(param),\n maxVal: (value, param) => parseFloat(value) <= parseFloat(param),\n pattern: (value, param) => {\n try {\n // Cap regex length to prevent ReDoS from excessively complex patterns\n if (param.length > 100) return false;\n return new RegExp(param).test(value);\n } catch (_e) { return false; }\n },\n match: (value, param) => {\n try {\n const escaped = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(param) : param;\n const other = document.querySelector('[name=\"' + escaped + '\"]');\n return other ? value === other.value : false;\n } catch (_e) {\n return false;\n }\n }\n },\n\n messages: {\n required: 'This field is required',\n email: 'Please enter a valid email address',\n url: 'Please enter a valid URL',\n number: 'Please enter a valid number',\n min: 'Minimum {0} characters required',\n max: 'Maximum {0} characters allowed',\n minVal: 'Value must be at least {0}',\n maxVal: 'Value must be at most {0}',\n pattern: 'Invalid format',\n match: 'Fields do not match'\n },\n\n init: function () {\n const forms = document.querySelectorAll('[data-vd-validate], .vd-validate');\n forms.forEach(form => {\n if (this.instances.has(form)) return;\n this.initInstance(form);\n });\n },\n\n initInstance: function (form) {\n const cleanup = [];\n const mode = form.getAttribute('data-vd-validate-mode') || 'blur'; // blur | input | submit\n const fields = form.querySelectorAll('[data-vd-rules]');\n\n const validateField = (field) => {\n const rulesStr = field.getAttribute('data-vd-rules') || '';\n const rules = rulesStr.split('|').map(r => r.trim()).filter(Boolean);\n const value = field.value;\n const errors = [];\n\n for (const rule of rules) {\n const [name, ...params] = rule.split(':');\n const param = params.join(':');\n const validator = this.rules[name];\n\n if (validator && !validator(value, param)) {\n const customMsg = field.getAttribute('data-vd-msg-' + name);\n let msg = customMsg || this.messages[name] || 'Invalid';\n if (param) msg = msg.replace('{0}', param);\n errors.push(msg);\n break; // one error at a time\n }\n }\n\n this.setFieldState(field, errors);\n return errors.length === 0;\n };\n\n const validateAll = () => {\n let valid = true;\n fields.forEach(field => {\n if (!validateField(field)) valid = false;\n });\n return valid;\n };\n\n // Per-field listeners\n fields.forEach(field => {\n if (mode === 'input' || mode === 'blur') {\n const eventType = mode === 'input' ? 'input' : 'blur';\n const handler = () => validateField(field);\n field.addEventListener(eventType, handler);\n cleanup.push(() => field.removeEventListener(eventType, handler));\n\n if (mode === 'blur') {\n const inputClear = () => {\n if (field.classList.contains('is-invalid') || field.classList.contains('is-valid')) {\n validateField(field);\n }\n };\n field.addEventListener('input', inputClear);\n cleanup.push(() => field.removeEventListener('input', inputClear));\n }\n }\n });\n\n // Form submit\n const submitHandler = (e) => {\n const valid = validateAll();\n if (!valid) {\n e.preventDefault();\n e.stopPropagation();\n // Focus first invalid field\n const firstInvalid = form.querySelector('.is-invalid');\n if (firstInvalid) firstInvalid.focus();\n }\n form.dispatchEvent(new CustomEvent('validate:submit', {\n detail: { valid },\n bubbles: true\n }));\n };\n\n form.addEventListener('submit', submitHandler);\n cleanup.push(() => form.removeEventListener('submit', submitHandler));\n\n this.instances.set(form, { cleanup, validateAll, validateField });\n },\n\n setFieldState: function (field, errors) {\n const wrapper = field.closest('.vd-form-group') || field.parentElement;\n let errorEl = wrapper.querySelector('.vd-validate-error');\n\n field.classList.remove('is-valid', 'is-invalid');\n\n if (errors.length > 0) {\n field.classList.add('is-invalid');\n field.setAttribute('aria-invalid', 'true');\n if (!errorEl) {\n errorEl = document.createElement('div');\n errorEl.className = 'vd-validate-error';\n errorEl.id = 'vd-err-' + Math.random().toString(36).slice(2, 9);\n errorEl.setAttribute('role', 'alert');\n wrapper.appendChild(errorEl);\n }\n errorEl.textContent = errors[0];\n errorEl.style.display = '';\n field.setAttribute('aria-describedby', errorEl.id);\n } else if (field.value.trim()) {\n field.classList.add('is-valid');\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n } else {\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n }\n },\n\n validateForm: function (form) {\n const instance = this.instances.get(form);\n return instance ? instance.validateAll() : false;\n },\n\n addRule: function (name, validator, message) {\n this.rules[name] = validator;\n if (message) this.messages[name] = message;\n },\n\n destroy: function (form) {\n const instance = this.instances.get(form);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(form);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, form) => this.destroy(form));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('validate', Validate);\n }\n\n window.VanduoValidate = Validate;\n\n})();\n", "/**\n * Vanduo Framework - Datepicker Component\n * Calendar popup attached to input field with month/year navigation\n */\n\n(function () {\n 'use strict';\n\n const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\n const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];\n\n const Datepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-datepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const format = input.getAttribute('data-vd-datepicker-format') || 'yyyy-mm-dd';\n const minStr = input.getAttribute('data-vd-datepicker-min');\n const maxStr = input.getAttribute('data-vd-datepicker-max');\n const minDate = minStr ? new Date(minStr) : null;\n const maxDate = maxStr ? new Date(maxStr) : null;\n\n const today = new Date();\n let viewYear = today.getFullYear();\n let viewMonth = today.getMonth();\n let selectedDate = null;\n let viewMode = 'days'; // days | months | years\n\n // Parse existing value\n if (input.value) {\n const parsed = new Date(input.value);\n if (!isNaN(parsed.getTime())) {\n selectedDate = parsed;\n viewYear = parsed.getFullYear();\n viewMonth = parsed.getMonth();\n }\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-datepicker-popup';\n popup.setAttribute('role', 'dialog');\n popup.setAttribute('aria-label', 'Choose date');\n\n const wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n wrapper.appendChild(popup);\n\n const formatDate = (d) => {\n const yyyy = d.getFullYear();\n const mm = String(d.getMonth() + 1).padStart(2, '0');\n const dd = String(d.getDate()).padStart(2, '0');\n return format.replace('yyyy', yyyy).replace('mm', mm).replace('dd', dd);\n };\n\n const isDisabled = (d) => {\n if (minDate && d < minDate) return true;\n if (maxDate && d > maxDate) return true;\n return false;\n };\n\n const isSameDay = (a, b) => a && b &&\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate();\n\n const render = () => {\n popup.innerHTML = '';\n\n // Header\n const header = document.createElement('div');\n header.className = 'vd-datepicker-header';\n\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-datepicker-prev';\n prevBtn.innerHTML = '‹';\n prevBtn.setAttribute('aria-label', 'Previous');\n\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-datepicker-next';\n nextBtn.innerHTML = '›';\n nextBtn.setAttribute('aria-label', 'Next');\n\n const title = document.createElement('span');\n title.className = 'vd-datepicker-title';\n\n if (viewMode === 'days') {\n title.textContent = MONTHS[viewMonth] + ' ' + viewYear;\n title.addEventListener('click', () => { viewMode = 'months'; render(); });\n prevBtn.addEventListener('click', () => { viewMonth--; if (viewMonth < 0) { viewMonth = 11; viewYear--; } render(); });\n nextBtn.addEventListener('click', () => { viewMonth++; if (viewMonth > 11) { viewMonth = 0; viewYear++; } render(); });\n } else if (viewMode === 'months') {\n title.textContent = String(viewYear);\n title.addEventListener('click', () => { viewMode = 'years'; render(); });\n prevBtn.addEventListener('click', () => { viewYear--; render(); });\n nextBtn.addEventListener('click', () => { viewYear++; render(); });\n } else {\n const decadeStart = Math.floor(viewYear / 10) * 10;\n title.textContent = decadeStart + ' - ' + (decadeStart + 9);\n prevBtn.addEventListener('click', () => { viewYear -= 10; render(); });\n nextBtn.addEventListener('click', () => { viewYear += 10; render(); });\n }\n\n header.appendChild(prevBtn);\n header.appendChild(title);\n header.appendChild(nextBtn);\n popup.appendChild(header);\n\n if (viewMode === 'days') {\n // Weekday headers\n const weekdays = document.createElement('div');\n weekdays.className = 'vd-datepicker-weekdays';\n DAYS.forEach(d => {\n const span = document.createElement('span');\n span.textContent = d;\n weekdays.appendChild(span);\n });\n popup.appendChild(weekdays);\n\n // Days grid\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-days';\n\n const firstDay = new Date(viewYear, viewMonth, 1).getDay();\n const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();\n const daysInPrev = new Date(viewYear, viewMonth, 0).getDate();\n\n // Previous month padding\n for (let i = firstDay - 1; i >= 0; i--) {\n const btn = createDayBtn(daysInPrev - i, true);\n grid.appendChild(btn);\n }\n\n // Current month\n for (let d = 1; d <= daysInMonth; d++) {\n const date = new Date(viewYear, viewMonth, d);\n const btn = createDayBtn(d, false, date);\n grid.appendChild(btn);\n }\n\n // Next month padding\n const totalCells = firstDay + daysInMonth;\n const remaining = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7);\n for (let i = 1; i <= remaining; i++) {\n const btn = createDayBtn(i, true);\n grid.appendChild(btn);\n }\n\n popup.appendChild(grid);\n } else if (viewMode === 'months') {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-months';\n MONTHS.forEach((name, i) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-month-btn';\n btn.textContent = name.slice(0, 3);\n if (selectedDate && selectedDate.getFullYear() === viewYear && selectedDate.getMonth() === i) {\n btn.classList.add('is-selected');\n }\n btn.addEventListener('click', () => { viewMonth = i; viewMode = 'days'; render(); });\n grid.appendChild(btn);\n });\n popup.appendChild(grid);\n } else {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-years';\n const decadeStart = Math.floor(viewYear / 10) * 10;\n for (let y = decadeStart - 1; y <= decadeStart + 10; y++) {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-year-btn';\n btn.textContent = y;\n if (selectedDate && selectedDate.getFullYear() === y) btn.classList.add('is-selected');\n if (y < decadeStart || y > decadeStart + 9) btn.style.opacity = '0.4';\n btn.addEventListener('click', () => { viewYear = y; viewMode = 'months'; render(); });\n grid.appendChild(btn);\n }\n popup.appendChild(grid);\n }\n };\n\n const createDayBtn = (day, outside, date) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-day';\n btn.textContent = day;\n\n if (outside) {\n btn.classList.add('is-outside');\n btn.tabIndex = -1;\n return btn;\n }\n\n if (date && isSameDay(date, today)) btn.classList.add('is-today');\n if (date && isSameDay(date, selectedDate)) btn.classList.add('is-selected');\n if (date && isDisabled(date)) {\n btn.classList.add('is-disabled');\n return btn;\n }\n\n if (date) {\n btn.addEventListener('click', () => {\n selectedDate = date;\n viewYear = date.getFullYear();\n viewMonth = date.getMonth();\n input.value = formatDate(date);\n close();\n input.dispatchEvent(new CustomEvent('datepicker:select', {\n detail: { date, formatted: input.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n }\n\n return btn;\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n viewMode = 'days';\n };\n\n // Events\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'dialog');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close, popup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('datepicker', Datepicker);\n }\n\n window.VanduoDatepicker = Datepicker;\n\n})();\n", "/**\n * Vanduo Framework - Timepicker Component\n * Dropdown time selection with 12h/24h format and configurable step intervals\n */\n\n(function () {\n 'use strict';\n\n const Timepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-timepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const is24h = input.getAttribute('data-vd-timepicker-format') === '24h';\n const step = parseInt(input.getAttribute('data-vd-timepicker-step') || '30', 10);\n\n // Create wrapper\n let wrapper = input.closest('.vd-suggest-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-timepicker-popup';\n popup.setAttribute('role', 'listbox');\n wrapper.appendChild(popup);\n\n // Generate time slots\n const times = [];\n for (let h = 0; h < 24; h++) {\n for (let m = 0; m < 60; m += step) {\n const hh24 = String(h).padStart(2, '0');\n const mm = String(m).padStart(2, '0');\n\n if (is24h) {\n times.push({ display: hh24 + ':' + mm, value: hh24 + ':' + mm });\n } else {\n const period = h < 12 ? 'AM' : 'PM';\n const h12 = h === 0 ? 12 : (h > 12 ? h - 12 : h);\n const display = h12 + ':' + mm + ' ' + period;\n times.push({ display, value: hh24 + ':' + mm });\n }\n }\n }\n\n const render = () => {\n popup.innerHTML = '';\n times.forEach(t => {\n const item = document.createElement('div');\n item.className = 'vd-timepicker-item';\n item.setAttribute('role', 'option');\n item.textContent = t.display;\n\n if (input.value === t.value || input.value === t.display) {\n item.classList.add('is-selected');\n }\n\n item.addEventListener('click', () => {\n input.value = t.display;\n popup.querySelectorAll('.vd-timepicker-item').forEach(i => i.classList.remove('is-selected'));\n item.classList.add('is-selected');\n close();\n input.dispatchEvent(new CustomEvent('timepicker:select', {\n detail: { display: t.display, value: t.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n\n popup.appendChild(item);\n });\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n // Scroll to selected\n const selected = popup.querySelector('.is-selected');\n if (selected) selected.scrollIntoView({ block: 'center' });\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n };\n\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'listbox');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n input.readOnly = true;\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('timepicker', Timepicker);\n }\n\n window.VanduoTimepicker = Timepicker;\n\n})();\n", "/**\n * Vanduo Framework - Stepper Component\n * Multi-step progress indicator with state management\n */\n\n(function () {\n 'use strict';\n\n const Stepper = {\n instances: new Map(),\n\n init: function () {\n const steppers = document.querySelectorAll('.vd-stepper');\n steppers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const items = Array.from(el.querySelectorAll('.vd-stepper-item'));\n const isClickable = el.classList.contains('vd-stepper-clickable');\n let currentIndex = items.findIndex(i => i.classList.contains('is-active'));\n if (currentIndex === -1) currentIndex = 0;\n\n const setStep = (index) => {\n if (index < 0 || index >= items.length) return;\n const prev = currentIndex;\n currentIndex = index;\n\n items.forEach((item, i) => {\n item.classList.remove('is-active', 'is-completed');\n if (i < index) item.classList.add('is-completed');\n else if (i === index) item.classList.add('is-active');\n });\n\n el.dispatchEvent(new CustomEvent('stepper:change', {\n detail: { current: index, previous: prev, total: items.length },\n bubbles: true\n }));\n };\n\n if (isClickable) {\n items.forEach((item, i) => {\n const handler = () => setStep(i);\n item.addEventListener('click', handler);\n cleanup.push(() => item.removeEventListener('click', handler));\n });\n }\n\n // Initialize current state\n setStep(currentIndex);\n\n this.instances.set(el, {\n cleanup,\n setStep,\n next: () => setStep(currentIndex + 1),\n prev: () => setStep(currentIndex - 1),\n getCurrent: () => currentIndex\n });\n },\n\n setStep: function (el, index) {\n const inst = this.instances.get(el);\n if (inst) inst.setStep(index);\n },\n\n next: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.next();\n },\n\n prev: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.prev();\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('stepper', Stepper);\n }\n\n window.VanduoStepper = Stepper;\n\n})();\n", "/**\n * Vanduo Framework - Rating Component\n * Star-based rating input with hover preview and read-only mode\n */\n\n(function () {\n 'use strict';\n\n const Rating = {\n instances: new Map(),\n\n init: function () {\n const ratings = document.querySelectorAll('[data-vd-rating]');\n ratings.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const max = parseInt(el.getAttribute('data-vd-rating-max') || '5', 10);\n const initialValue = parseFloat(el.getAttribute('data-vd-rating-value') || '0');\n const readonly = el.classList.contains('vd-rating-readonly') || el.hasAttribute('data-vd-rating-readonly');\n let currentValue = initialValue;\n\n el.classList.add('vd-rating');\n el.setAttribute('role', 'radiogroup');\n el.setAttribute('aria-label', el.getAttribute('aria-label') || 'Rating');\n\n // Clear existing stars\n el.innerHTML = '';\n\n // Create stars\n const stars = [];\n for (let i = 1; i <= max; i++) {\n const star = document.createElement('button');\n star.type = 'button';\n star.className = 'vd-rating-star';\n star.setAttribute('role', 'radio');\n star.setAttribute('aria-label', i + ' star' + (i > 1 ? 's' : ''));\n star.setAttribute('aria-checked', i <= currentValue ? 'true' : 'false');\n if (readonly) star.tabIndex = -1;\n stars.push(star);\n el.appendChild(star);\n }\n\n // Value display\n const valueDisplay = document.createElement('span');\n valueDisplay.className = 'vd-rating-value';\n valueDisplay.textContent = currentValue > 0 ? currentValue.toString() : '';\n el.appendChild(valueDisplay);\n\n const updateStars = (value) => {\n stars.forEach((star, i) => {\n star.classList.remove('is-active', 'is-half');\n const starNum = i + 1;\n if (starNum <= Math.floor(value)) {\n star.classList.add('is-active');\n } else if (starNum - 0.5 <= value) {\n star.classList.add('is-half');\n }\n star.setAttribute('aria-checked', starNum <= value ? 'true' : 'false');\n });\n valueDisplay.textContent = value > 0 ? value.toString() : '';\n };\n\n updateStars(currentValue);\n\n if (!readonly) {\n stars.forEach((star, i) => {\n const enterHandler = () => {\n stars.forEach((s, j) => {\n s.classList.toggle('is-hovered', j <= i);\n });\n };\n const leaveHandler = () => {\n stars.forEach(s => s.classList.remove('is-hovered'));\n };\n const clickHandler = () => {\n currentValue = i + 1;\n el.setAttribute('data-vd-rating-value', currentValue);\n updateStars(currentValue);\n el.dispatchEvent(new CustomEvent('rating:change', {\n detail: { value: currentValue, max },\n bubbles: true\n }));\n };\n\n star.addEventListener('mouseenter', enterHandler);\n star.addEventListener('mouseleave', leaveHandler);\n star.addEventListener('click', clickHandler);\n\n cleanup.push(\n () => star.removeEventListener('mouseenter', enterHandler),\n () => star.removeEventListener('mouseleave', leaveHandler),\n () => star.removeEventListener('click', clickHandler)\n );\n });\n\n // Keyboard\n const keyHandler = (e) => {\n if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n e.preventDefault();\n if (currentValue < max) {\n currentValue++;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n e.preventDefault();\n if (currentValue > 1) {\n currentValue--;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n }\n };\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n }\n\n this.instances.set(el, {\n cleanup,\n getValue: () => currentValue,\n setValue: (v) => { currentValue = v; updateStars(v); }\n });\n },\n\n getValue: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getValue() : 0;\n },\n\n setValue: function (el, value) {\n const inst = this.instances.get(el);\n if (inst) inst.setValue(value);\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('rating', Rating);\n }\n\n window.VanduoRating = Rating;\n\n})();\n", "/**\n * Vanduo Framework - Transfer (Dual-list) Component\n * Source-to-target list transfer with search, select-all, and move actions\n */\n\n(function () {\n 'use strict';\n\n const Transfer = {\n instances: new Map(),\n\n init: function () {\n const transfers = document.querySelectorAll('[data-vd-transfer]');\n transfers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n el.classList.add('vd-transfer');\n\n let sourceData, targetData;\n try {\n const raw = JSON.parse(el.getAttribute('data-vd-transfer') || '[]');\n sourceData = raw.map((item, i) => ({\n id: item.id || 'item-' + i,\n label: item.label || item.text || String(item),\n selected: false\n }));\n } catch (_e) {\n sourceData = [];\n }\n targetData = [];\n\n const sourceSelected = new Set();\n const targetSelected = new Set();\n\n const render = () => {\n el.innerHTML = '';\n\n // Source panel\n const sourcePanel = createPanel('Source', sourceData, sourceSelected, 'source');\n // Actions\n const actions = document.createElement('div');\n actions.className = 'vd-transfer-actions';\n\n const moveRightBtn = document.createElement('button');\n moveRightBtn.type = 'button';\n moveRightBtn.className = 'vd-transfer-btn';\n moveRightBtn.innerHTML = '›';\n moveRightBtn.setAttribute('aria-label', 'Move to target');\n moveRightBtn.disabled = sourceSelected.size === 0;\n moveRightBtn.addEventListener('click', () => moveRight());\n\n const moveLeftBtn = document.createElement('button');\n moveLeftBtn.type = 'button';\n moveLeftBtn.className = 'vd-transfer-btn';\n moveLeftBtn.innerHTML = '‹';\n moveLeftBtn.setAttribute('aria-label', 'Move to source');\n moveLeftBtn.disabled = targetSelected.size === 0;\n moveLeftBtn.addEventListener('click', () => moveLeft());\n\n actions.appendChild(moveRightBtn);\n actions.appendChild(moveLeftBtn);\n\n // Target panel\n const targetPanel = createPanel('Target', targetData, targetSelected, 'target');\n\n el.appendChild(sourcePanel);\n el.appendChild(actions);\n el.appendChild(targetPanel);\n };\n\n const createPanel = (title, data, selected, _side) => {\n const panel = document.createElement('div');\n panel.className = 'vd-transfer-panel';\n\n const header = document.createElement('div');\n header.className = 'vd-transfer-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const count = document.createElement('span');\n count.className = 'vd-transfer-count';\n count.textContent = selected.size + '/' + data.length;\n header.appendChild(titleSpan);\n header.appendChild(count);\n panel.appendChild(header);\n\n // Search\n const searchDiv = document.createElement('div');\n searchDiv.className = 'vd-transfer-search';\n const searchInput = document.createElement('input');\n searchInput.type = 'text';\n searchInput.placeholder = 'Search...';\n searchInput.setAttribute('aria-label', 'Search ' + title.toLowerCase());\n searchDiv.appendChild(searchInput);\n panel.appendChild(searchDiv);\n\n // List\n const list = document.createElement('ul');\n list.className = 'vd-transfer-list';\n list.setAttribute('role', 'listbox');\n\n const renderList = (filter) => {\n list.innerHTML = '';\n const filtered = filter ? data.filter(d => {\n const label = (d.label || d.text || String(d)).toLowerCase();\n return label.includes(filter.toLowerCase());\n }) : data;\n filtered.forEach(item => {\n const li = document.createElement('li');\n li.className = 'vd-transfer-item';\n li.setAttribute('role', 'option');\n if (selected.has(item.id)) li.classList.add('is-selected');\n\n const checkbox = document.createElement('input');\n checkbox.type = 'checkbox';\n checkbox.checked = selected.has(item.id);\n checkbox.setAttribute('aria-label', item.label);\n\n const label = document.createElement('span');\n label.textContent = item.label;\n\n li.addEventListener('click', () => {\n if (selected.has(item.id)) selected.delete(item.id);\n else selected.add(item.id);\n render();\n });\n\n li.appendChild(checkbox);\n li.appendChild(label);\n list.appendChild(li);\n });\n };\n\n searchInput.addEventListener('input', () => renderList(searchInput.value));\n renderList('');\n\n panel.appendChild(list);\n return panel;\n };\n\n const moveRight = () => {\n const toMove = sourceData.filter(d => sourceSelected.has(d.id));\n sourceData = sourceData.filter(d => !sourceSelected.has(d.id));\n targetData = targetData.concat(toMove);\n sourceSelected.clear();\n render();\n fireChange();\n };\n\n const moveLeft = () => {\n const toMove = targetData.filter(d => targetSelected.has(d.id));\n targetData = targetData.filter(d => !targetSelected.has(d.id));\n sourceData = sourceData.concat(toMove);\n targetSelected.clear();\n render();\n fireChange();\n };\n\n const fireChange = () => {\n el.dispatchEvent(new CustomEvent('transfer:change', {\n detail: {\n source: sourceData.map(d => d.id),\n target: targetData.map(d => d.id)\n },\n bubbles: true\n }));\n };\n\n render();\n\n this.instances.set(el, {\n cleanup,\n getTarget: () => targetData.map(d => d.id),\n getSource: () => sourceData.map(d => d.id)\n });\n },\n\n getSelected: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getTarget() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('transfer', Transfer);\n }\n\n window.VanduoTransfer = Transfer;\n\n})();\n", "/**\n * Vanduo Framework - Tree View Component\n * Hierarchical collapsible tree with checkbox selection and keyboard navigation\n */\n\n(function () {\n 'use strict';\n\n const Tree = {\n instances: new Map(),\n\n init: function () {\n const trees = document.querySelectorAll('[data-vd-tree]');\n trees.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const cascade = el.getAttribute('data-vd-tree-cascade') !== 'false';\n\n let data;\n try { data = JSON.parse(el.getAttribute('data-vd-tree') || '[]'); } catch (_e) { data = []; }\n\n el.classList.add('vd-tree');\n el.setAttribute('role', 'tree');\n\n const render = (items, parent) => {\n parent.innerHTML = '';\n items.forEach(item => {\n const node = document.createElement('li');\n node.className = 'vd-tree-node';\n node.setAttribute('role', 'treeitem');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n if (item.open) node.classList.add('is-open');\n\n const content = document.createElement('div');\n content.className = 'vd-tree-node-content';\n\n // Toggle\n if (item.children && item.children.length > 0) {\n const toggle = document.createElement('button');\n toggle.type = 'button';\n toggle.className = 'vd-tree-toggle';\n toggle.setAttribute('aria-label', 'Toggle');\n toggle.addEventListener('click', (e) => {\n e.stopPropagation();\n item.open = !item.open;\n node.classList.toggle('is-open');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n });\n content.appendChild(toggle);\n } else {\n const ph = document.createElement('span');\n ph.className = 'vd-tree-toggle-placeholder';\n content.appendChild(ph);\n }\n\n // Checkbox\n if (el.hasAttribute('data-vd-tree-checkbox')) {\n const cb = document.createElement('input');\n cb.type = 'checkbox';\n cb.className = 'vd-tree-checkbox';\n cb.checked = !!item.checked;\n cb.setAttribute('aria-label', item.label);\n cb.addEventListener('change', (e) => {\n e.stopPropagation();\n item.checked = cb.checked;\n if (cascade && item.children) {\n setChildChecked(item.children, cb.checked);\n render(data, el);\n }\n el.dispatchEvent(new CustomEvent('tree:check', {\n detail: { id: item.id, checked: cb.checked, label: item.label },\n bubbles: true\n }));\n });\n content.appendChild(cb);\n }\n\n // Icon\n if (item.icon) {\n const icon = document.createElement('span');\n icon.className = 'vd-tree-icon ' + item.icon;\n content.appendChild(icon);\n }\n\n // Label\n const label = document.createElement('span');\n label.className = 'vd-tree-label';\n label.textContent = item.label || '';\n content.appendChild(label);\n\n node.appendChild(content);\n\n // Children\n if (item.children && item.children.length > 0) {\n const childList = document.createElement('ul');\n childList.className = 'vd-tree-children';\n childList.setAttribute('role', 'group');\n render(item.children, childList);\n node.appendChild(childList);\n }\n\n parent.appendChild(node);\n });\n };\n\n const setChildChecked = (items, checked) => {\n items.forEach(item => {\n item.checked = checked;\n if (item.children) setChildChecked(item.children, checked);\n });\n };\n\n // Keyboard\n const keyHandler = (e) => {\n const focused = document.activeElement;\n if (!el.contains(focused)) return;\n\n const nodes = Array.from(el.querySelectorAll('.vd-tree-node-content'));\n const idx = nodes.indexOf(focused.closest('.vd-tree-node-content'));\n if (idx === -1) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (idx < nodes.length - 1) {\n const next = nodes[idx + 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (next) next.focus();\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (idx > 0) {\n const prev = nodes[idx - 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (prev) prev.focus();\n }\n break;\n }\n };\n\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n render(data, el);\n\n this.instances.set(el, {\n cleanup,\n getData: () => data,\n getChecked: () => {\n const checked = [];\n const collect = (items) => {\n items.forEach(i => {\n if (i.checked) checked.push(i.id || i.label);\n if (i.children) collect(i.children);\n });\n };\n collect(data);\n return checked;\n }\n });\n },\n\n getChecked: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getChecked() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tree', Tree);\n }\n\n window.VanduoTree = Tree;\n\n})();\n", "/**\n * Vanduo Framework - Spotlight (Feature Discovery) Component\n * Guided tour with overlay highlight and step-through tooltip\n */\n\n(function () {\n 'use strict';\n\n const Spotlight = {\n _active: false,\n _steps: [],\n _currentStep: 0,\n _elements: {},\n _cleanup: [],\n _boundTriggers: new WeakMap(),\n _triggerElement: null,\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-spotlight]');\n\n triggers.forEach(trigger => {\n if (this._boundTriggers.has(trigger)) return;\n\n const clickHandler = (event) => {\n event.preventDefault();\n\n const steps = this._parseSteps(trigger.getAttribute('data-vd-spotlight'));\n if (steps.length === 0) return;\n\n this.start(steps, { trigger });\n };\n\n trigger.addEventListener('click', clickHandler);\n this._boundTriggers.set(trigger, clickHandler);\n });\n },\n\n _parseSteps: function (raw) {\n if (typeof raw !== 'string' || raw.trim() === '') return [];\n\n try {\n const parsed = JSON.parse(raw);\n return this._normalizeSteps(parsed);\n } catch (error) {\n console.error('VanduoSpotlight: invalid data-vd-spotlight payload.', error);\n return [];\n }\n },\n\n _normalizeStep: function (step) {\n if (!step || typeof step !== 'object') return null;\n\n const target = step.target;\n const hasSelectorTarget = typeof target === 'string' && target.trim() !== '';\n const hasElementTarget = typeof Element !== 'undefined' && target instanceof Element;\n\n if (!hasSelectorTarget && !hasElementTarget) return null;\n\n const title = typeof step.title === 'string' ? step.title : '';\n const description = typeof step.description === 'string'\n ? step.description\n : (typeof step.content === 'string' ? step.content : '');\n\n return {\n target,\n title,\n description\n };\n },\n\n _normalizeSteps: function (steps) {\n if (!Array.isArray(steps)) return [];\n\n return steps\n .map(step => this._normalizeStep(step))\n .filter(Boolean);\n },\n\n start: function (steps, options) {\n if (this._active) this.stop();\n\n const normalizedSteps = this._normalizeSteps(steps);\n if (normalizedSteps.length === 0) return;\n\n const startOptions = options || {};\n\n this._steps = normalizedSteps;\n this._currentStep = 0;\n this._active = true;\n this._triggerElement = startOptions.trigger || (document.activeElement instanceof HTMLElement ? document.activeElement : null);\n\n // Create overlay\n const overlay = document.createElement('div');\n overlay.className = 'vd-spotlight-overlay';\n overlay.setAttribute('aria-hidden', 'true');\n document.body.appendChild(overlay);\n\n // Create tooltip\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-spotlight-tooltip';\n tooltip.setAttribute('role', 'dialog');\n tooltip.setAttribute('aria-modal', 'true');\n tooltip.tabIndex = -1;\n document.body.appendChild(tooltip);\n\n this._elements = { overlay, tooltip };\n\n // ESC to close\n const escHandler = (e) => { if (e.key === 'Escape') this.stop(); };\n document.addEventListener('keydown', escHandler);\n this._cleanup.push(() => document.removeEventListener('keydown', escHandler));\n\n // Overlay click to close\n overlay.addEventListener('click', () => this.stop());\n\n this._showStep(this._currentStep);\n },\n\n _showStep: function (index) {\n const step = this._steps[index];\n if (!step) return;\n\n const target = typeof step.target === 'string' ? document.querySelector(step.target) : step.target;\n const { tooltip } = this._elements;\n\n // Remove previous highlight\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n // Highlight target\n if (target) {\n target.classList.add('vd-spotlight-target');\n target.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n\n // Build tooltip content\n const total = this._steps.length;\n tooltip.innerHTML = '';\n tooltip.removeAttribute('aria-labelledby');\n tooltip.removeAttribute('aria-describedby');\n\n if (step.title) {\n const title = document.createElement('h4');\n title.className = 'vd-spotlight-title';\n title.id = 'vd-spotlight-title-' + index + '-' + Date.now();\n title.textContent = step.title;\n tooltip.appendChild(title);\n tooltip.setAttribute('aria-labelledby', title.id);\n }\n\n if (step.description) {\n const desc = document.createElement('p');\n desc.className = 'vd-spotlight-description';\n desc.id = 'vd-spotlight-description-' + index + '-' + Date.now();\n desc.textContent = step.description;\n tooltip.appendChild(desc);\n tooltip.setAttribute('aria-describedby', desc.id);\n }\n\n // Footer\n const footer = document.createElement('div');\n footer.className = 'vd-spotlight-footer';\n footer.setAttribute('aria-label', 'Step ' + (index + 1) + ' of ' + total);\n\n const counter = document.createElement('span');\n counter.className = 'vd-spotlight-counter';\n counter.textContent = (index + 1) + ' / ' + total;\n\n const actions = document.createElement('div');\n actions.className = 'vd-spotlight-actions';\n\n if (index > 0) {\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-spotlight-btn';\n prevBtn.textContent = 'Back';\n prevBtn.addEventListener('click', () => this.prev());\n actions.appendChild(prevBtn);\n }\n\n const skipBtn = document.createElement('button');\n skipBtn.type = 'button';\n skipBtn.className = 'vd-spotlight-btn';\n skipBtn.textContent = 'Skip';\n skipBtn.addEventListener('click', () => this.stop());\n actions.appendChild(skipBtn);\n\n if (index < total - 1) {\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n nextBtn.textContent = 'Next';\n nextBtn.addEventListener('click', () => this.next());\n actions.appendChild(nextBtn);\n } else {\n const doneBtn = document.createElement('button');\n doneBtn.type = 'button';\n doneBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n doneBtn.textContent = 'Done';\n doneBtn.addEventListener('click', () => this.stop());\n actions.appendChild(doneBtn);\n }\n\n footer.appendChild(counter);\n footer.appendChild(actions);\n tooltip.appendChild(footer);\n\n // Position tooltip near target\n if (target) {\n requestAnimationFrame(() => {\n const rect = target.getBoundingClientRect();\n const tRect = tooltip.getBoundingClientRect();\n let top = rect.bottom + 12 + window.scrollY;\n let left = rect.left + (rect.width - tRect.width) / 2 + window.scrollX;\n\n // Keep in viewport\n left = Math.max(8, Math.min(left, window.innerWidth - tRect.width - 8));\n if (top + tRect.height > window.innerHeight + window.scrollY) {\n top = rect.top - tRect.height - 12 + window.scrollY;\n }\n\n tooltip.style.top = top + 'px';\n tooltip.style.left = left + 'px';\n });\n }\n\n document.dispatchEvent(new CustomEvent('spotlight:step', {\n detail: { index, step: index, total, data: step }\n }));\n },\n\n next: function () {\n if (this._currentStep < this._steps.length - 1) {\n this._currentStep++;\n this._showStep(this._currentStep);\n }\n },\n\n prev: function () {\n if (this._currentStep > 0) {\n this._currentStep--;\n this._showStep(this._currentStep);\n }\n },\n\n stop: function () {\n if (!this._active) return;\n\n const total = this._steps.length;\n const detail = {\n completedSteps: total === 0 ? 0 : Math.min(this._currentStep + 1, total),\n total,\n completed: total > 0 && this._currentStep >= total - 1\n };\n\n this._active = false;\n\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n if (this._elements.overlay && this._elements.overlay.parentNode) {\n this._elements.overlay.parentNode.removeChild(this._elements.overlay);\n }\n if (this._elements.tooltip && this._elements.tooltip.parentNode) {\n this._elements.tooltip.parentNode.removeChild(this._elements.tooltip);\n }\n\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n this._elements = {};\n this._steps = [];\n this._currentStep = 0;\n\n if (this._triggerElement && this._triggerElement.isConnected && typeof this._triggerElement.focus === 'function') {\n this._triggerElement.focus();\n }\n this._triggerElement = null;\n\n document.dispatchEvent(new CustomEvent('spotlight:end', { detail }));\n },\n\n destroyAll: function () {\n this.stop();\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('spotlight', Spotlight);\n }\n\n window.VanduoSpotlight = Spotlight;\n\n})();\n", "/**\n * Vanduo Framework - Music Player Component\n * HTML5 Audio-based music player with transport controls, volume,\n * and optional shuffle, seek bar, and playlist features.\n *\n * Options (passed to MusicPlayer.init or data-music-player-options):\n * tracks {Array} - [{name, url}] \u2014 required\n * volume {number} - Initial volume 0\u20131 (default 0.5)\n * shuffle {boolean} - Shuffle on init (default false)\n * showProgress {boolean} - Show seek/progress bar (default false)\n * showPlaylist {boolean} - Show expandable playlist panel (default false)\n * autoAdvance {boolean} - Auto-play next track on end (default true)\n *\n * Custom events (all bubble, dispatched on container):\n * musicplayer:play \u2014 playback started\n * musicplayer:pause \u2014 playback paused\n * musicplayer:trackchange \u2014 detail: { index, name, url }\n * musicplayer:volumechange \u2014 detail: { volume }\n * musicplayer:ended \u2014 last track ended (autoAdvance=false only)\n *\n * Programmatic API:\n * MusicPlayer.init(container?, options?)\n * MusicPlayer.play(container)\n * MusicPlayer.pause(container)\n * MusicPlayer.toggle(container)\n * MusicPlayer.next(container)\n * MusicPlayer.previous(container)\n * MusicPlayer.setVolume(container, value)\n * MusicPlayer.setTrack(container, index)\n * MusicPlayer.shuffle(container)\n * MusicPlayer.getState(container)\n * MusicPlayer.destroy(container)\n * MusicPlayer.destroyAll()\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fisher-Yates shuffle (returns new array).\n * @param {Array} arr\n * @returns {Array}\n */\n function shuffleArray(arr) {\n const shuffled = arr.slice();\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n const tmp = shuffled[i];\n shuffled[i] = shuffled[j];\n shuffled[j] = tmp;\n }\n return shuffled;\n }\n\n /**\n * Format seconds as m:ss.\n * @param {number} seconds\n * @returns {string}\n */\n function formatTime(seconds) {\n if (!isFinite(seconds) || seconds < 0) return '0:00';\n const m = Math.floor(seconds / 60);\n const s = Math.floor(seconds % 60);\n return m + ':' + (s < 10 ? '0' : '') + s;\n }\n\n /**\n * Set CSS background-size on a range input to visually fill the track.\n * @param {HTMLInputElement} input\n */\n function updateRangeFill(input) {\n const min = parseFloat(input.min) || 0;\n const max = parseFloat(input.max) || 1;\n const val = parseFloat(input.value) || 0;\n const pct = ((val - min) / (max - min)) * 100;\n input.style.setProperty('--fill', pct + '%');\n // Fallback inline gradient for browsers without ::-moz-range-progress\n input.style.backgroundImage =\n 'linear-gradient(to right, var(--music-player-track-fill, currentColor) 0%, ' +\n 'var(--music-player-track-fill, currentColor) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) 100%)';\n }\n\n /* \u2500\u2500\u2500 Phosphor icon helper (matches framework icon style) \u2500 */\n\n /**\n * Return an element (Phosphor icon).\n * @param {string} name\n * @returns {HTMLElement}\n */\n function icon(name) {\n const el = document.createElement('i');\n el.className = 'ph ph-' + name;\n el.setAttribute('aria-hidden', 'true');\n return el;\n }\n\n /* \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const MusicPlayer = {\n /** @type {Map} */\n instances: new Map(),\n\n /**\n * Default options.\n */\n defaults: {\n tracks: [],\n volume: 0.5,\n shuffle: false,\n showProgress: false,\n showPlaylist: false,\n autoAdvance: true,\n },\n\n /**\n * Auto-initialize all .vd-music-player / [data-music-player] elements.\n * Options can be provided via data-music-player-options (JSON string).\n */\n init: function () {\n document.querySelectorAll('.vd-music-player, [data-music-player]').forEach((el) => {\n if (this.instances.has(el)) return;\n\n let opts = {};\n const attr = el.getAttribute('data-music-player-options');\n if (attr) {\n try { opts = JSON.parse(attr); } catch (_) { /* ignore malformed JSON */ }\n }\n this.initPlayer(el, opts);\n });\n },\n\n /**\n * Initialize a single player element.\n * @param {HTMLElement} container\n * @param {Object} [options]\n */\n initPlayer: function (container, options) {\n const opts = Object.assign({}, this.defaults, options || {});\n\n // Validate and normalise tracks\n const rawTracks = Array.isArray(opts.tracks) ? opts.tracks : [];\n const tracks = rawTracks.filter((t) => t && typeof t.url === 'string' && t.url.trim());\n\n // Build shuffled working copy without mutating opts\n const trackList = opts.shuffle ? shuffleArray(tracks) : tracks.slice();\n\n /* \u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const state = {\n tracks: trackList,\n originalTracks: tracks.slice(),\n currentIndex: 0,\n isPlaying: false,\n volume: Math.max(0, Math.min(1, opts.volume)),\n shuffle: opts.shuffle,\n showProgress: opts.showProgress,\n showPlaylist: opts.showPlaylist,\n autoAdvance: opts.autoAdvance,\n audio: null,\n };\n\n /* \u2500\u2500 Audio element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const audio = new Audio();\n audio.volume = state.volume;\n audio.preload = 'metadata';\n state.audio = audio;\n\n /* \u2500\u2500 Build DOM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n this._buildDOM(container, state);\n\n // Grab references after DOM build\n const refs = {\n btnPlay: container.querySelector('.vd-music-player-btn-play'),\n btnPrev: container.querySelector('.vd-music-player-btn-prev'),\n btnNext: container.querySelector('.vd-music-player-btn-next'),\n btnShuffle: container.querySelector('.vd-music-player-btn-shuffle'),\n btnPlaylist: container.querySelector('.vd-music-player-btn-playlist'),\n trackName: container.querySelector('.vd-music-player-track-name'),\n volumeSlider: container.querySelector('.vd-music-player-volume-slider'),\n volumeIcon: container.querySelector('.vd-music-player-volume-icon'),\n progressBar: container.querySelector('.vd-music-player-progress-bar'),\n timeElapsed: container.querySelector('.vd-music-player-time-elapsed'),\n timeDuration: container.querySelector('.vd-music-player-time-duration'),\n playlistPanel: container.querySelector('.vd-music-player-playlist'),\n };\n\n /* \u2500\u2500 Internal render helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const renderPlayIcon = () => {\n const btn = refs.btnPlay;\n if (!btn) return;\n btn.innerHTML = '';\n btn.appendChild(icon(state.isPlaying ? 'pause' : 'play'));\n btn.setAttribute('aria-label', state.isPlaying ? 'Pause' : 'Play');\n btn.classList.toggle('is-active', state.isPlaying);\n };\n\n const renderTrackName = () => {\n const el = refs.trackName;\n if (!el) return;\n const track = state.tracks[state.currentIndex];\n if (track) {\n el.textContent = track.name || 'Unknown Track';\n el.classList.remove('is-idle');\n } else {\n el.textContent = 'No tracks loaded';\n el.classList.add('is-idle');\n }\n };\n\n const renderVolumeIcon = () => {\n const el = refs.volumeIcon;\n if (!el) return;\n el.innerHTML = '';\n const v = state.volume;\n const name = v === 0 ? 'speaker-none' : v < 0.5 ? 'speaker-low' : 'speaker-high';\n el.appendChild(icon(name));\n };\n\n const renderShuffleBtn = () => {\n const btn = refs.btnShuffle;\n if (!btn) return;\n btn.classList.toggle('is-active', state.shuffle);\n btn.setAttribute('aria-pressed', state.shuffle ? 'true' : 'false');\n };\n\n const renderPlaylistItems = () => {\n const panel = refs.playlistPanel;\n if (!panel) return;\n panel.innerHTML = '';\n state.tracks.forEach((track, i) => {\n const item = document.createElement('button');\n item.className =\n 'vd-music-player-playlist-item' + (i === state.currentIndex ? ' is-active' : '');\n item.type = 'button';\n item.setAttribute('data-index', String(i));\n item.setAttribute('aria-current', i === state.currentIndex ? 'true' : 'false');\n\n const num = document.createElement('span');\n num.className = 'vd-music-player-playlist-num';\n num.textContent = String(i + 1);\n\n const name = document.createElement('span');\n name.className = 'vd-music-player-playlist-name';\n name.textContent = track.name || 'Track ' + (i + 1);\n\n item.appendChild(num);\n item.appendChild(name);\n panel.appendChild(item);\n });\n };\n\n const renderProgress = () => {\n const bar = refs.progressBar;\n if (!bar || !audio.duration) return;\n const pct = (audio.currentTime / audio.duration) * 100;\n bar.value = String(pct);\n updateRangeFill(bar);\n if (refs.timeElapsed) refs.timeElapsed.textContent = formatTime(audio.currentTime);\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n };\n\n /* \u2500\u2500 Load track \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const loadTrack = (index, autoPlay) => {\n const track = state.tracks[index];\n if (!track) return;\n state.currentIndex = index;\n audio.src = track.url;\n renderTrackName();\n renderPlaylistItems();\n\n // Reset progress\n if (refs.progressBar) {\n refs.progressBar.value = '0';\n updateRangeFill(refs.progressBar);\n }\n if (refs.timeElapsed) refs.timeElapsed.textContent = '0:00';\n if (refs.timeDuration) refs.timeDuration.textContent = '0:00';\n\n container.dispatchEvent(\n new CustomEvent('musicplayer:trackchange', {\n bubbles: true,\n detail: { index, name: track.name, url: track.url },\n })\n );\n\n if (autoPlay) {\n audio.play().catch(() => { /* browser may block autoplay */ });\n }\n };\n\n /* \u2500\u2500 Audio event listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const cleanupFunctions = [];\n\n const onPlay = () => {\n state.isPlaying = true;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:play', { bubbles: true }));\n };\n\n const onPause = () => {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:pause', { bubbles: true }));\n };\n\n const onEnded = () => {\n if (state.autoAdvance && state.tracks.length > 1) {\n const next = (state.currentIndex + 1) % state.tracks.length;\n loadTrack(next, true);\n } else {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:ended', { bubbles: true }));\n }\n };\n\n const onTimeUpdate = () => {\n if (state.showProgress) renderProgress();\n };\n\n const onLoadedMetadata = () => {\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n if (refs.progressBar) {\n refs.progressBar.max = '100';\n updateRangeFill(refs.progressBar);\n }\n };\n\n audio.addEventListener('play', onPlay);\n audio.addEventListener('pause', onPause);\n audio.addEventListener('ended', onEnded);\n audio.addEventListener('timeupdate', onTimeUpdate);\n audio.addEventListener('loadedmetadata', onLoadedMetadata);\n cleanupFunctions.push(() => {\n audio.removeEventListener('play', onPlay);\n audio.removeEventListener('pause', onPause);\n audio.removeEventListener('ended', onEnded);\n audio.removeEventListener('timeupdate', onTimeUpdate);\n audio.removeEventListener('loadedmetadata', onLoadedMetadata);\n audio.pause();\n audio.src = '';\n });\n\n /* \u2500\u2500 Control button listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n if (refs.btnPlay) {\n const handler = () => {\n if (!audio.src && state.tracks.length) loadTrack(state.currentIndex, false);\n if (state.isPlaying) {\n audio.pause();\n } else {\n audio.play().catch(() => {});\n }\n };\n refs.btnPlay.addEventListener('click', handler);\n cleanupFunctions.push(() => refs.btnPlay.removeEventListener('click', handler));\n\n // Keyboard: Space / Enter (already native for `;\n }\n\n // Generate neutral color swatches\n let neutralSwatches = '';\n for (const [key, value] of Object.entries(this.NEUTRAL_COLORS)) {\n neutralSwatches += ``;\n }\n\n // Generate radius buttons\n let radiusButtons = '';\n this.RADIUS_OPTIONS.forEach(r => {\n radiusButtons += ``;\n });\n\n // Generate font options\n let fontOptions = '';\n for (const [key, value] of Object.entries(this.FONT_OPTIONS)) {\n fontOptions += ``;\n }\n\n return `\n
    \n

    Customize Theme

    \n \n
    \n
    \n\n
    \n \n
    \n ${primarySwatches}\n
    \n
    \n
    \n \n
    \n ${neutralSwatches}\n
    \n
    \n
    \n \n
    \n ${radiusButtons}\n
    \n
    \n
    \n \n \n
    \n
    \n
    \n \n
    \n `;\n },\n\n /**\n * Bind event listeners\n */\n /**\n * Check whether the current primary color is one of the auto-defaults\n * (i.e. the user hasn't explicitly picked a non-default color).\n */\n isUsingDefaultPrimary: function () {\n return this.state.primary === this.DEFAULTS.PRIMARY_LIGHT ||\n this.state.primary === this.DEFAULTS.PRIMARY_DARK;\n },\n\n /**\n * When primary is still one of the auto-default palette keys (black/amber) but\n * localStorage was written under a different theme (or OS changed in system mode),\n * align in-memory state before applyAllPreferences runs \u2014 avoids amber+light / black+dark drift.\n */\n _normalizeDefaultPrimaryIfStaleWithStoredTheme: function () {\n if (!this.isUsingDefaultPrimary()) {\n return;\n }\n const expected = this.getDefaultPrimary(this.state.theme);\n if (this.state.primary !== expected) {\n this.state.primary = expected;\n }\n },\n\n bindEvents: function () {\n // Trigger click - bind to any trigger button\n if (this.elements.trigger) {\n this.addListener(this.elements.trigger, 'click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.toggle();\n });\n }\n\n this.bindPanelEvents();\n\n // Listen for OS dark/light changes so we can swap the default primary\n if (window.matchMedia) {\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const handler = () => {\n if (this.state.theme === 'system' && this.isUsingDefaultPrimary()) {\n const newDefault = this.getDefaultPrimary('system');\n if (newDefault !== this.state.primary) {\n this.applyPrimary(newDefault);\n this.updateUI();\n }\n }\n };\n mq.addEventListener('change', handler);\n this._cleanup.push(() => mq.removeEventListener('change', handler));\n }\n\n // Close on outside click\n this.addListener(document, 'click', (e) => {\n if (this.state.isOpen && this.elements.customizer && !this.elements.customizer.contains(e.target)) {\n this.close();\n }\n });\n\n // Close on Escape key\n this.addListener(document, 'keydown', (e) => {\n if (e.key === 'Escape' && this.state.isOpen) {\n this.close();\n }\n });\n },\n\n /**\n * Toggle panel open/close\n */\n toggle: function () {\n if (this.state.isOpen) {\n this.close();\n } else {\n this.open();\n }\n },\n\n /**\n * Open the panel\n */\n open: function () {\n this.state.isOpen = true;\n\n // Ensure panel is positioned correctly before opening\n this.positionPanel();\n\n if (this.elements.panel) {\n this.elements.panel.classList.add('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'true');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.add('is-active');\n }\n\n this.dispatchEvent('panel-open', { isOpen: true });\n },\n\n /**\n * Close the panel\n */\n close: function () {\n this.state.isOpen = false;\n\n if (this.elements.panel) {\n this.elements.panel.classList.remove('is-open');\n }\n if (this.elements.trigger) {\n this.elements.trigger.setAttribute('aria-expanded', 'false');\n }\n if (this.elements.overlay) {\n this.elements.overlay.classList.remove('is-active');\n }\n\n this.dispatchEvent('panel-close', { isOpen: false });\n },\n\n /**\n * Update UI to reflect current state\n */\n updateUI: function () {\n if (!this.elements.panel) return;\n\n // Update primary color swatches\n this.elements.panel.querySelectorAll('[data-color]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.color === this.state.primary);\n });\n\n // Update neutral color swatches\n this.elements.panel.querySelectorAll('[data-neutral]').forEach(swatch => {\n swatch.classList.toggle('is-active', swatch.dataset.neutral === this.state.neutral);\n });\n\n // Update radius buttons\n this.elements.panel.querySelectorAll('[data-radius]').forEach(btn => {\n btn.classList.toggle('is-active', btn.dataset.radius === this.state.radius);\n });\n\n // Update font selector\n const fontSelect = this.elements.panel.querySelector('[data-customizer-font]');\n if (fontSelect) {\n fontSelect.value = this.state.font;\n }\n\n },\n\n /**\n * Reset all preferences to defaults\n */\n reset: function () {\n this.applyTheme(this.DEFAULTS.THEME);\n this.applyPrimary(this.getDefaultPrimary(this.DEFAULTS.THEME));\n this.applyNeutral(this.DEFAULTS.NEUTRAL);\n this.applyRadius(this.DEFAULTS.RADIUS);\n this.applyFont(this.DEFAULTS.FONT);\n this.updateUI();\n\n this.dispatchEvent('reset', { state: { ...this.state } });\n },\n\n /**\n * Get current state\n */\n getState: function () {\n return { ...this.state };\n },\n\n /**\n * Programmatically set preferences\n */\n setPreferences: function (prefs) {\n if (prefs.primary) this.applyPrimary(prefs.primary);\n if (prefs.neutral) this.applyNeutral(prefs.neutral);\n if (prefs.radius) this.applyRadius(prefs.radius);\n if (prefs.font) this.applyFont(prefs.font);\n if (prefs.theme) this.applyTheme(prefs.theme);\n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n destroyAll: function () {\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n\n if (this.elements.panel) {\n this.elements.panel.removeAttribute('data-customizer-initialized');\n }\n\n this.close();\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeCustomizer', ThemeCustomizer);\n }\n\n // Expose globally for convenience\n window.ThemeCustomizer = ThemeCustomizer;\n})();\n", "/**\n * Vanduo Framework - Theme Switcher\n * Handles light/dark/system theme toggling and persistence\n */\n\n(function () {\n 'use strict';\n\n const ThemeSwitcher = {\n isInitialized: false,\n _mediaQuery: null,\n _onMediaChange: null,\n\n init: function () {\n this.STORAGE_KEY = 'vanduo-theme-preference';\n this.state = {\n preference: this.getPreference() // 'light', 'dark', or 'system'\n };\n\n if (this.isInitialized) {\n this.applyTheme();\n this.renderUI();\n this.updateUI();\n return;\n }\n\n this.isInitialized = true;\n\n this.applyTheme();\n this.listenForSystemChanges();\n this.renderUI();\n\n console.log('Vanduo Theme Switcher initialized');\n },\n\n getPreference: function () {\n return this.getStorageValue(this.STORAGE_KEY, 'system');\n },\n\n setPreference: function (pref) {\n this.state.preference = pref;\n this.setStorageValue(this.STORAGE_KEY, pref);\n this.applyTheme();\n \n // Coordinate with ThemeCustomizer for primary color swap if available\n // Check _isApplying flag to prevent circular updates\n if (window.ThemeCustomizer && window.ThemeCustomizer.applyTheme && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme(pref);\n }\n \n this.updateUI();\n },\n\n getStorageValue: function (key, fallback) {\n if (typeof window.safeStorageGet === 'function') {\n return window.safeStorageGet(key, fallback);\n }\n try {\n const value = localStorage.getItem(key);\n return value !== null ? value : fallback;\n } catch (_e) {\n return fallback;\n }\n },\n\n setStorageValue: function (key, value) {\n if (typeof window.safeStorageSet === 'function') {\n return window.safeStorageSet(key, value);\n }\n try {\n localStorage.setItem(key, value);\n return true;\n } catch (_e) {\n return false;\n }\n },\n\n applyTheme: function () {\n const pref = this.state.preference;\n\n if (pref === 'system') {\n // When in system mode, we remove the data attribute to let the media query take over\n // or we can explicitly set it. Explicitly setting it ensures consistency if we rely on [data-theme]\n // But if we rely on @media in CSS, we might want to remove attributes.\n // However, our CSS strategy uses :root:not([data-theme=\"light\"]) inside media query for system dark fallback\n // which is a bit complex.\n\n // Simpler approach: \n // If preference is system, REMOVE data-theme attribute. Let CSS media queries handle it.\n document.documentElement.removeAttribute('data-theme');\n } else {\n document.documentElement.setAttribute('data-theme', pref);\n }\n },\n\n listenForSystemChanges: function () {\n if (this._mediaQuery && this._onMediaChange) {\n return;\n }\n\n this._mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n this._onMediaChange = _e => {\n if (this.state.preference === 'system') {\n // Re-apply (effectively just to ensure consistency, though removing attribute usually suffices)\n this.applyTheme();\n // Keep default primary (black/amber) aligned when OS scheme changes while in system mode\n if (window.ThemeCustomizer && typeof window.ThemeCustomizer.applyTheme === 'function' && !window.ThemeCustomizer._isApplying) {\n window.ThemeCustomizer.applyTheme('system');\n }\n }\n };\n this._mediaQuery.addEventListener('change', this._onMediaChange);\n },\n\n // Helper to facilitate UI creation if needed, though often UI is in HTML\n renderUI: function () {\n // Look for any uninitialized theme toggles\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.getAttribute('data-theme-initialized') === 'true') {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n }\n return;\n }\n\n // Simplified UI Binding - assumes a select or a button cycle\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n const onChange = (e) => {\n this.setPreference(e.target.value);\n };\n toggle.addEventListener('change', onChange);\n toggle._themeToggleHandler = onChange;\n } else {\n // Button implementation (cycle)\n const onClick = () => {\n const modes = ['system', 'light', 'dark'];\n const nextIndex = (modes.indexOf(this.state.preference) + 1) % modes.length;\n this.setPreference(modes[nextIndex]);\n };\n toggle.addEventListener('click', onClick);\n toggle._themeToggleHandler = onClick;\n }\n // Mark as initialized\n toggle.setAttribute('data-theme-initialized', 'true');\n });\n },\n\n updateUI: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"]');\n toggles.forEach(toggle => {\n if (toggle.tagName === 'SELECT') {\n toggle.value = this.state.preference;\n } else {\n // Update button text/icon if needed\n // e.g. toggle.textContent = this.state.preference;\n // For now, assume the user handles visual state or generic text\n\n // If there is an icon or text span inside, update it\n const span = toggle.querySelector('.theme-current-label');\n if (span) {\n span.textContent = this.state.preference.charAt(0).toUpperCase() + this.state.preference.slice(1);\n }\n }\n });\n },\n\n destroyAll: function () {\n const toggles = document.querySelectorAll('[data-toggle=\"theme\"][data-theme-initialized=\"true\"]');\n toggles.forEach(toggle => {\n if (toggle._themeToggleHandler) {\n const eventName = toggle.tagName === 'SELECT' ? 'change' : 'click';\n toggle.removeEventListener(eventName, toggle._themeToggleHandler);\n delete toggle._themeToggleHandler;\n }\n toggle.removeAttribute('data-theme-initialized');\n });\n\n if (this._mediaQuery && this._onMediaChange) {\n this._mediaQuery.removeEventListener('change', this._onMediaChange);\n }\n\n this._mediaQuery = null;\n this._onMediaChange = null;\n this.isInitialized = false;\n }\n };\n\n // Register component\n if (window.Vanduo) {\n window.Vanduo.register('themeSwitcher', ThemeSwitcher);\n }\n})();\n", "/**\n * Vanduo Framework - Toast Component\n * Popup notifications for user feedback\n */\n\n(function() {\n 'use strict';\n\n /**\n * Toast Component\n */\n const Toast = {\n // Default options\n defaults: {\n position: 'top-right',\n duration: 5000,\n dismissible: true,\n showProgress: true,\n pauseOnHover: true\n },\n\n // Container cache\n containers: {},\n\n /**\n * Get or create a toast container for a position\n * @param {string} position - Container position\n * @returns {HTMLElement} Toast container element\n */\n getContainer: function(position) {\n if (this.containers[position]) {\n return this.containers[position];\n }\n\n const container = document.createElement('div');\n container.className = `vd-toast-container vd-toast-container-${position}`;\n container.setAttribute('role', 'status');\n container.setAttribute('aria-live', 'polite');\n container.setAttribute('aria-atomic', 'false');\n document.body.appendChild(container);\n this.containers[position] = container;\n\n return container;\n },\n\n /**\n * Show a toast notification\n * @param {Object|string} options - Toast options or message string\n * @param {string} [type] - Toast type (success, error, warning, info)\n * @param {number} [duration] - Auto-dismiss duration in ms\n * @returns {HTMLElement} Toast element\n */\n show: function(options, type, duration) {\n // Support simple API: Toast.show('Message', 'success', 3000)\n if (typeof options === 'string') {\n options = {\n message: options,\n type: type,\n duration: duration\n };\n }\n\n const config = Object.assign({}, this.defaults, options);\n const container = this.getContainer(config.position);\n\n // Create toast element\n const toast = document.createElement('div');\n toast.className = 'vd-toast';\n\n if (config.type) {\n toast.classList.add(`vd-toast-${config.type}`);\n }\n\n if (config.solid) {\n toast.classList.add('vd-toast-solid');\n }\n\n if (config.showProgress && config.duration > 0) {\n toast.classList.add('vd-toast-with-progress');\n }\n\n // Build toast content\n let html = '';\n\n // Icon (sanitize custom icons, default icons are trusted SVG)\n if (config.icon) {\n const safeIcon = typeof sanitizeHtml === 'function' ? sanitizeHtml(config.icon) : escapeHtml(config.icon);\n html += `${safeIcon}`;\n } else if (config.type) {\n html += `${this.getDefaultIcon(config.type)}`;\n }\n\n // Local escape helper \u2014 guarantees HTML-safe output even if the\n // global escapeHtml utility is not loaded in the current bundle.\n const _esc = typeof escapeHtml === 'function'\n ? escapeHtml\n : function (s) {\n const d = document.createElement('div');\n d.appendChild(document.createTextNode(s));\n return d.innerHTML;\n };\n\n // Content (escape text to prevent injection)\n html += '
    ';\n if (config.title) {\n html += `
    ${_esc(String(config.title))}
    `;\n }\n if (config.message) {\n html += `
    ${_esc(String(config.message))}
    `;\n }\n html += '
    ';\n\n // Close button\n if (config.dismissible) {\n html += '';\n }\n\n // Progress bar\n if (config.showProgress && config.duration > 0) {\n const safeDuration = parseInt(config.duration, 10) || 0;\n html += `
    `;\n }\n\n toast.innerHTML = html;\n\n // Add to container\n container.appendChild(toast);\n\n toast._toastCleanup = [];\n\n // Set up close button handler\n if (config.dismissible) {\n const closeBtn = toast.querySelector('.vd-toast-close');\n const onClose = () => {\n this.dismiss(toast);\n };\n closeBtn.addEventListener('click', onClose);\n toast._toastCleanup.push(() => closeBtn.removeEventListener('click', onClose));\n }\n\n // Pause on hover\n let timeoutId = null;\n let remainingTime = config.duration;\n let startTime = null;\n\n const startTimer = () => {\n if (config.duration > 0) {\n startTime = Date.now();\n timeoutId = setTimeout(() => {\n this.dismiss(toast);\n }, remainingTime);\n toast._toastTimeoutId = timeoutId;\n\n // Resume progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'running';\n }\n }\n };\n\n const pauseTimer = () => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n timeoutId = null;\n toast._toastTimeoutId = null;\n remainingTime -= Date.now() - startTime;\n\n // Pause progress animation\n const progress = toast.querySelector('.vd-toast-progress');\n if (progress) {\n progress.style.animationPlayState = 'paused';\n }\n }\n };\n\n if (config.pauseOnHover) {\n toast.addEventListener('mouseenter', pauseTimer);\n toast.addEventListener('mouseleave', startTimer);\n toast._toastCleanup.push(\n () => toast.removeEventListener('mouseenter', pauseTimer),\n () => toast.removeEventListener('mouseleave', startTimer)\n );\n }\n\n // Trigger enter animation\n requestAnimationFrame(() => {\n toast.classList.add('is-visible');\n startTimer();\n });\n\n // Store config on element for later access\n toast._toastConfig = config;\n\n // Dispatch show event\n const showEvent = new CustomEvent('toast:show', {\n bubbles: true,\n detail: { toast, config }\n });\n toast.dispatchEvent(showEvent);\n\n return toast;\n },\n\n /**\n * Dismiss a toast\n * @param {HTMLElement} toast - Toast element to dismiss\n */\n dismiss: function(toast) {\n if (!toast || toast.classList.contains('is-exiting')) return;\n\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n toast._toastTimeoutId = null;\n }\n\n toast.classList.remove('is-visible');\n toast.classList.add('is-exiting');\n\n // Dispatch dismiss event\n const dismissEvent = new CustomEvent('toast:dismiss', {\n bubbles: true,\n detail: { toast }\n });\n toast.dispatchEvent(dismissEvent);\n\n // Remove after animation\n const handleTransitionEnd = () => {\n toast.removeEventListener('transitionend', handleTransitionEnd);\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n };\n\n toast.addEventListener('transitionend', handleTransitionEnd);\n\n // Fallback removal if transition doesn't fire\n setTimeout(() => {\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n }, 400);\n },\n\n /**\n * Destroy all toasts and containers\n */\n destroyAll: function() {\n Object.keys(this.containers).forEach(position => {\n const container = this.containers[position];\n if (!container) return;\n\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => {\n if (toast._toastTimeoutId) {\n clearTimeout(toast._toastTimeoutId);\n }\n if (toast._toastCleanup) {\n toast._toastCleanup.forEach(fn => fn());\n delete toast._toastCleanup;\n }\n if (toast.parentElement) {\n toast.parentElement.removeChild(toast);\n }\n });\n\n if (container.parentElement) {\n container.parentElement.removeChild(container);\n }\n });\n\n this.containers = {};\n },\n\n /**\n * Dismiss all toasts\n * @param {string} [position] - Optional position to clear (clears all if not specified)\n */\n dismissAll: function(position) {\n if (position && this.containers[position]) {\n const toasts = this.containers[position].querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n } else {\n Object.values(this.containers).forEach(container => {\n const toasts = container.querySelectorAll('.vd-toast');\n toasts.forEach(toast => this.dismiss(toast));\n });\n }\n },\n\n /**\n * Get default icon SVG for a type\n * @param {string} type - Toast type\n * @returns {string} SVG icon markup\n */\n getDefaultIcon: function(type) {\n const icons = {\n success: '',\n error: '',\n warning: '',\n info: ''\n };\n\n return icons[type] || '';\n },\n\n /**\n * Convenience methods for common toast types\n */\n success: function(message, options) {\n return this.show(Object.assign({ message, type: 'success' }, options));\n },\n\n error: function(message, options) {\n return this.show(Object.assign({ message, type: 'error' }, options));\n },\n\n warning: function(message, options) {\n return this.show(Object.assign({ message, type: 'warning' }, options));\n },\n\n info: function(message, options) {\n return this.show(Object.assign({ message, type: 'info' }, options));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('toast', Toast);\n }\n\n // Also expose globally for convenience\n window.Toast = Toast;\n\n})();\n", "/**\n * Vanduo Framework - Tooltips Component\n * JavaScript functionality for tooltips\n */\n\n(function () {\n 'use strict';\n\n /**\n * Tooltips Component\n */\n const Tooltips = {\n tooltips: new Map(),\n delayTimers: new Map(),\n\n /**\n * Sanitize HTML \u2014 delegates to shared sanitizeHtml from helpers.js\n * @param {string} input\n * @returns {string} sanitized HTML\n */\n sanitizeHtml: function (input) {\n if (typeof sanitizeHtml === 'function') {\n return sanitizeHtml(input);\n }\n // Fallback: strip all HTML\n const div = document.createElement('div');\n div.textContent = input || '';\n return div.innerHTML;\n },\n\n /**\n * Initialize tooltips\n */\n init: function () {\n const elements = document.querySelectorAll('[data-tooltip], [data-tooltip-html]');\n\n elements.forEach(element => {\n if (this.tooltips.has(element)) {\n return;\n }\n this.initTooltip(element);\n });\n },\n\n /**\n * Initialize a single tooltip\n * @param {HTMLElement} element - Element with tooltip\n */\n initTooltip: function (element) {\n const tooltip = this.createTooltip(element);\n const cleanupFunctions = [];\n\n // Show on hover/focus\n const enterHandler = () => { this.showTooltip(element, tooltip); };\n const leaveHandler = () => { this.hideTooltip(element, tooltip); };\n const focusHandler = () => { this.showTooltip(element, tooltip); };\n const blurHandler = () => { this.hideTooltip(element, tooltip); };\n\n element.addEventListener('mouseenter', enterHandler);\n element.addEventListener('mouseleave', leaveHandler);\n element.addEventListener('focus', focusHandler);\n element.addEventListener('blur', blurHandler);\n\n cleanupFunctions.push(\n () => element.removeEventListener('mouseenter', enterHandler),\n () => element.removeEventListener('mouseleave', leaveHandler),\n () => element.removeEventListener('focus', focusHandler),\n () => element.removeEventListener('blur', blurHandler)\n );\n\n this.tooltips.set(element, { tooltip, cleanup: cleanupFunctions });\n },\n\n /**\n * Create tooltip element\n * @param {HTMLElement} element - Target element\n * @returns {HTMLElement} Tooltip element\n */\n createTooltip: function (element) {\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-tooltip';\n tooltip.setAttribute('role', 'tooltip');\n tooltip.setAttribute('aria-hidden', 'true');\n\n // Generate unique ID and link via aria-describedby\n const tooltipId = 'tooltip-' + Math.random().toString(36).substr(2, 9);\n tooltip.id = tooltipId;\n element.setAttribute('aria-describedby', tooltipId);\n\n // Get content\n const htmlContent = element.dataset.tooltipHtml;\n const textContent = element.dataset.tooltip;\n\n if (htmlContent) {\n tooltip.innerHTML = this.sanitizeHtml(htmlContent);\n tooltip.classList.add('vd-tooltip-html');\n } else if (textContent) {\n tooltip.textContent = textContent;\n }\n\n // Get placement\n const placement = element.dataset.tooltipPlacement || element.dataset.placement || 'top';\n tooltip.setAttribute('data-placement', placement);\n tooltip.classList.add(`vd-tooltip-${placement}`);\n\n // Get variant\n if (element.dataset.tooltipVariant) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipVariant}`);\n }\n\n // Get size\n if (element.dataset.tooltipSize) {\n tooltip.classList.add(`vd-tooltip-${element.dataset.tooltipSize}`);\n }\n\n // Get delay\n const delay = parseInt(element.dataset.tooltipDelay) || 0;\n tooltip.dataset.delay = delay;\n\n document.body.appendChild(tooltip);\n\n return tooltip;\n },\n\n /**\n * Show tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n showTooltip: function (element, tooltip) {\n const delay = parseInt(tooltip.dataset.delay) || 0;\n\n if (delay > 0) {\n const timer = setTimeout(() => {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }, delay);\n this.delayTimers.set(element, timer);\n } else {\n this.positionTooltip(element, tooltip);\n tooltip.classList.add('is-visible');\n tooltip.setAttribute('aria-hidden', 'false');\n }\n },\n\n /**\n * Hide tooltip\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n hideTooltip: function (element, tooltip) {\n // Clear delay timer if exists\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n tooltip.classList.remove('is-visible');\n tooltip.setAttribute('aria-hidden', 'true');\n },\n\n /**\n * Position tooltip relative to element\n * @param {HTMLElement} element - Target element\n * @param {HTMLElement} tooltip - Tooltip element\n */\n positionTooltip: function (element, tooltip) {\n const placement = tooltip.dataset.placement || 'top';\n const rect = element.getBoundingClientRect();\n const tooltipRect = tooltip.getBoundingClientRect();\n const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;\n\n let top = 0;\n let left = 0;\n\n switch (placement) {\n case 'top':\n top = rect.top + scrollTop - tooltipRect.height - 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'bottom':\n top = rect.bottom + scrollTop + 8;\n left = rect.left + scrollLeft + (rect.width / 2) - (tooltipRect.width / 2);\n break;\n case 'left':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.left + scrollLeft - tooltipRect.width - 8;\n break;\n case 'right':\n top = rect.top + scrollTop + (rect.height / 2) - (tooltipRect.height / 2);\n left = rect.right + scrollLeft + 8;\n break;\n }\n\n // Prevent overflow\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const padding = 8;\n\n if (left < padding) {\n left = padding;\n } else if (left + tooltipRect.width > viewportWidth - padding) {\n left = viewportWidth - tooltipRect.width - padding;\n }\n\n if (top < scrollTop + padding) {\n top = scrollTop + padding;\n } else if (top + tooltipRect.height > scrollTop + viewportHeight - padding) {\n top = scrollTop + viewportHeight - tooltipRect.height - padding;\n }\n\n // Use single style assignment with transform for better performance\n tooltip.style.cssText = `position: absolute; top: 0; left: 0; transform: translate(${left}px, ${top}px);`;\n },\n\n /**\n * Show tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n show: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.showTooltip(el, tooltip);\n }\n },\n\n /**\n * Hide tooltip programmatically\n * @param {HTMLElement|string} element - Target element or selector\n */\n hide: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n this.hideTooltip(el, tooltip);\n }\n },\n\n /**\n * Update tooltip content\n * @param {HTMLElement|string} element - Target element or selector\n * @param {string} content - New content\n * @param {boolean} isHtml - Whether content is HTML\n */\n update: function (element, content, isHtml = false) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n if (el && this.tooltips.has(el)) {\n const { tooltip } = this.tooltips.get(el);\n if (isHtml) {\n tooltip.innerHTML = this.sanitizeHtml(content);\n tooltip.classList.add('vd-tooltip-html');\n } else {\n tooltip.textContent = content;\n tooltip.classList.remove('vd-tooltip-html');\n }\n }\n },\n\n /**\n * Destroy a tooltip instance and clean up\n * @param {HTMLElement} element - Element with tooltip\n */\n destroy: function (element) {\n const data = this.tooltips.get(element);\n if (!data) return;\n\n // Clear any pending timer\n const timer = this.delayTimers.get(element);\n if (timer) {\n clearTimeout(timer);\n this.delayTimers.delete(element);\n }\n\n data.cleanup.forEach(fn => fn());\n\n // Remove tooltip element from DOM\n if (data.tooltip && data.tooltip.parentNode) {\n data.tooltip.parentNode.removeChild(data.tooltip);\n }\n\n this.tooltips.delete(element);\n },\n\n /**\n * Destroy all tooltip instances\n */\n destroyAll: function () {\n this.tooltips.forEach((data, element) => {\n this.destroy(element);\n });\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tooltips', Tooltips);\n }\n\n // Expose globally\n window.VanduoTooltips = Tooltips;\n\n})();\n", "/**\n * Vanduo Framework - Search Component\n * Client-side search functionality for content pages\n * \n * @example Basic usage (initialize with defaults)\n * // HTML:\n * //
    \n * // \n * //
    \n * //
    \n * \n * @example Custom configuration\n * var search = Search.create({\n * containerSelector: '.my-search',\n * contentSelector: 'article[id]',\n * titleSelector: 'h2, h3',\n * maxResults: 5,\n * onSelect: function(result) {\n * console.log('Selected:', result.title);\n * }\n * });\n * \n * @example With custom data source\n * var search = Search.create({\n * containerSelector: '.my-search',\n * data: [\n * { id: 'item1', title: 'First Item', content: 'Description...', category: 'Category A' },\n * { id: 'item2', title: 'Second Item', content: 'Description...', category: 'Category B' }\n * ]\n * });\n */\n\n(function() {\n 'use strict';\n\n /**\n * Default configuration\n */\n const DEFAULTS = {\n // Behavior\n minQueryLength: 2,\n maxResults: 10,\n debounceMs: 150,\n highlightTag: 'mark',\n keyboardShortcut: true, // Enable Cmd/Ctrl+K shortcut\n \n // Selectors (for DOM-based indexing)\n containerSelector: '.vd-doc-search',\n inputSelector: '.vd-doc-search-input',\n resultsSelector: '.vd-doc-search-results',\n contentSelector: '.doc-content section[id]',\n titleSelector: '.demo-title, h2, h3',\n navSelector: '.doc-nav-link',\n sectionSelector: '.doc-nav-section',\n \n // Content extraction\n excludeFromContent: 'pre, code, script, style',\n maxContentLength: 500,\n \n // Custom data source (alternative to DOM indexing)\n data: null,\n \n // Category icons mapping\n categoryIcons: {\n 'getting-started': 'ph-rocket-launch',\n 'core': 'ph-cube',\n 'components': 'ph-puzzle-piece',\n 'interactive': 'ph-cursor-click',\n 'data-display': 'ph-table',\n 'feedback': 'ph-bell',\n 'meta': 'ph-info',\n 'default': 'ph-file-text'\n },\n \n // Callbacks\n onSelect: null, // function(result) - called when result is selected\n onSearch: null, // function(query, results) - called after search\n onOpen: null, // function() - called when results open\n onClose: null, // function() - called when results close\n \n // Text customization\n emptyTitle: 'No results found',\n emptyText: 'Try different keywords or check spelling',\n placeholder: 'Search...'\n };\n\n /**\n * Search Component Factory\n * Creates a new search instance with the given configuration\n * \n * @param {Object} options - Configuration options\n * @returns {Object} Search instance\n */\n function createSearch(options) {\n const config = Object.assign({}, DEFAULTS, options || {});\n \n // Instance state\n const state = {\n initialized: false,\n index: [],\n results: [],\n activeIndex: -1,\n isOpen: false,\n query: '',\n container: null,\n input: null,\n resultsContainer: null,\n debounceTimer: null,\n boundHandlers: {}\n };\n\n function safeInvokeCallback(name, fn, ...args) {\n try {\n fn(...args);\n } catch (error) {\n console.warn('[Vanduo Search] Callback error in \"' + name + '\":', error);\n }\n }\n\n function setResultsHtml(html) {\n if (!state.resultsContainer) return;\n try {\n state.resultsContainer.innerHTML = html;\n } catch (error) {\n console.warn('[Vanduo Search] Failed to render results:', error);\n }\n }\n\n /**\n * Initialize the search component\n * Idempotent \u2014 safe to call more than once on the same instance.\n * Returns the instance on success, null if required DOM elements are missing.\n */\n function init() {\n if (state.initialized) {\n return instance;\n }\n\n state.container = document.querySelector(config.containerSelector);\n if (!state.container) {\n state.initialized = false;\n return null;\n }\n\n state.input = state.container.querySelector(config.inputSelector);\n state.resultsContainer = state.container.querySelector(config.resultsSelector);\n\n if (!state.input || !state.resultsContainer) {\n state.initialized = false;\n return null;\n }\n\n // Set placeholder if configured\n if (config.placeholder) {\n state.input.setAttribute('placeholder', config.placeholder);\n }\n\n // Build search index\n buildIndex();\n\n // Bind events\n bindEvents();\n\n // Set up ARIA attributes\n setupAria();\n\n state.initialized = true;\n return instance;\n }\n\n /**\n * Build search index from DOM or custom data\n */\n function buildIndex() {\n state.index = [];\n \n // Use custom data if provided\n if (config.data && Array.isArray(config.data)) {\n config.data.forEach(function(item) {\n state.index.push({\n id: item.id || slugify(item.title),\n title: item.title || '',\n category: item.category || '',\n categorySlug: slugify(item.category || ''),\n content: item.content || '',\n keywords: item.keywords || extractKeywordsFromText(item.title + ' ' + item.content),\n url: item.url || '#' + (item.id || slugify(item.title)),\n icon: item.icon || ''\n });\n });\n return;\n }\n\n // Build from DOM\n const sections = document.querySelectorAll(config.contentSelector);\n const categoryMap = buildCategoryMap();\n\n sections.forEach(function(section) {\n const id = section.id;\n if (!id) return;\n\n const titleEl = section.querySelector(config.titleSelector);\n const title = titleEl ? titleEl.textContent.replace(/v[\\d.]+/g, '').trim() : id;\n const category = categoryMap[id] || 'Documentation';\n const content = extractContent(section);\n const keywords = extractKeywords(section, title);\n const iconEl = titleEl ? titleEl.querySelector('i.ph') : null;\n let icon = '';\n if (iconEl && iconEl.classList) {\n for (let ci = 0; ci < iconEl.classList.length; ci++) {\n if (iconEl.classList[ci].indexOf('ph-') === 0) {\n icon = iconEl.classList[ci];\n break;\n }\n }\n }\n\n state.index.push({\n id: id,\n title: title,\n category: category,\n categorySlug: slugify(category),\n content: content,\n keywords: keywords,\n url: '#' + id,\n icon: icon\n });\n });\n }\n\n /**\n * Build a map of section IDs to their categories\n */\n function buildCategoryMap() {\n const map = {};\n let currentCategory = 'Documentation';\n const navItems = document.querySelectorAll(config.navSelector + ', ' + config.sectionSelector);\n\n navItems.forEach(function(item) {\n if (item.classList.contains('doc-nav-section')) {\n currentCategory = item.textContent.trim();\n } else {\n const href = item.getAttribute('href');\n if (href && href.startsWith('#')) {\n const id = href.substring(1);\n map[id] = currentCategory;\n }\n }\n });\n\n return map;\n }\n\n /**\n * Extract searchable content from a section\n */\n function extractContent(section) {\n const clone = section.cloneNode(true);\n \n const toRemove = clone.querySelectorAll(config.excludeFromContent);\n toRemove.forEach(function(el) {\n el.remove();\n });\n\n let text = clone.textContent || '';\n text = text.replace(/\\s+/g, ' ').trim();\n \n return text.substring(0, config.maxContentLength);\n }\n\n /**\n * Extract keywords from a section\n */\n function extractKeywords(section, title) {\n const keywords = [];\n \n // Add title words\n title.toLowerCase().split(/\\s+/).forEach(function(word) {\n if (word.length > 2) {\n keywords.push(word);\n }\n });\n\n // Add class names from code examples\n const codeBlocks = section.querySelectorAll('code');\n codeBlocks.forEach(function(code) {\n const text = code.textContent || '';\n const classMatches = text.match(/\\.([\\w-]+)/g);\n if (classMatches) {\n classMatches.forEach(function(match) {\n keywords.push(match.substring(1).toLowerCase());\n });\n }\n });\n\n // Add data attributes\n const dataAttrs = section.querySelectorAll('[data-tooltip], [data-modal]');\n dataAttrs.forEach(function(el) {\n const attrs = el.getAttributeNames().filter(function(name) {\n return name.startsWith('data-');\n });\n attrs.forEach(function(attr) {\n keywords.push(attr.replace('data-', ''));\n });\n });\n\n return Array.from(new Set(keywords));\n }\n\n /**\n * Extract keywords from text string\n */\n function extractKeywordsFromText(text) {\n const words = text.toLowerCase().split(/\\s+/);\n return words.filter(function(word) {\n return word.length > 2;\n });\n }\n\n /**\n * Convert string to slug\n */\n function slugify(str) {\n return str.toLowerCase().replace(/\\s+/g, '-').replace(/[^a-z0-9-]/g, '');\n }\n\n /**\n * Bind event listeners\n */\n function bindEvents() {\n // Store bound handlers for cleanup\n state.boundHandlers.handleInput = function(e) {\n handleInput(e);\n };\n state.boundHandlers.handleFocus = function() {\n if (state.query.length >= config.minQueryLength) {\n open();\n }\n };\n state.boundHandlers.handleKeydown = function(e) {\n handleKeydown(e);\n };\n state.boundHandlers.handleOutsideClick = function(e) {\n if (!state.container.contains(e.target)) {\n close();\n }\n };\n state.boundHandlers.handleGlobalKeydown = function(e) {\n if (config.keyboardShortcut && (e.metaKey || e.ctrlKey) && e.key === 'k') {\n e.preventDefault();\n state.input.focus();\n state.input.select();\n }\n };\n state.boundHandlers.handleResultClick = function(e) {\n const result = e.target.closest('.vd-doc-search-result');\n if (result) {\n const index = parseInt(result.dataset.index, 10);\n select(index);\n }\n };\n\n // Input events\n state.input.addEventListener('input', state.boundHandlers.handleInput);\n state.input.addEventListener('focus', state.boundHandlers.handleFocus);\n state.input.addEventListener('keydown', state.boundHandlers.handleKeydown);\n\n // Close on outside click\n document.addEventListener('click', state.boundHandlers.handleOutsideClick);\n\n // Global keyboard shortcut\n document.addEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n\n // Result click handling\n state.resultsContainer.addEventListener('click', state.boundHandlers.handleResultClick);\n }\n\n /**\n * Unbind event listeners\n */\n function unbindEvents() {\n if (state.input) {\n state.input.removeEventListener('input', state.boundHandlers.handleInput);\n state.input.removeEventListener('focus', state.boundHandlers.handleFocus);\n state.input.removeEventListener('keydown', state.boundHandlers.handleKeydown);\n }\n document.removeEventListener('click', state.boundHandlers.handleOutsideClick);\n document.removeEventListener('keydown', state.boundHandlers.handleGlobalKeydown);\n if (state.resultsContainer) {\n state.resultsContainer.removeEventListener('click', state.boundHandlers.handleResultClick);\n }\n }\n\n /**\n * Set up ARIA attributes\n */\n function setupAria() {\n const resultsId = state.resultsContainer.id || 'search-results-' + Math.random().toString(36).substr(2, 9);\n state.resultsContainer.id = resultsId;\n \n state.input.setAttribute('role', 'combobox');\n state.input.setAttribute('aria-autocomplete', 'list');\n state.input.setAttribute('aria-controls', resultsId);\n state.input.setAttribute('aria-expanded', 'false');\n \n state.resultsContainer.setAttribute('role', 'listbox');\n state.resultsContainer.setAttribute('aria-label', 'Search results');\n }\n\n /**\n * Handle input changes\n */\n function handleInput(e) {\n const query = e.target.value.trim();\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n state.debounceTimer = setTimeout(function() {\n state.query = query;\n\n if (query.length < config.minQueryLength) {\n close();\n return;\n }\n\n state.results = search(query);\n state.activeIndex = -1;\n render();\n open();\n\n // Callback\n if (typeof config.onSearch === 'function') {\n safeInvokeCallback('onSearch', config.onSearch, query, state.results);\n }\n }, config.debounceMs);\n }\n\n /**\n * Handle keyboard navigation\n */\n function handleKeydown(e) {\n if (!state.isOpen) {\n if (e.key === 'ArrowDown' && state.query.length >= config.minQueryLength) {\n e.preventDefault();\n state.results = search(state.query);\n render();\n open();\n }\n return;\n }\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n navigate(1);\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n navigate(-1);\n break;\n\n case 'Enter':\n e.preventDefault();\n if (state.activeIndex >= 0) {\n select(state.activeIndex);\n } else if (state.results.length > 0) {\n select(0);\n }\n break;\n\n case 'Escape':\n e.preventDefault();\n close();\n break;\n\n case 'Tab':\n close();\n break;\n }\n }\n\n /**\n * Perform search\n */\n function search(query) {\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n const scored = [];\n\n state.index.forEach(function(entry) {\n let score = 0;\n const titleLower = entry.title.toLowerCase();\n const categoryLower = entry.category.toLowerCase();\n const contentLower = entry.content.toLowerCase();\n\n terms.forEach(function(term) {\n // Title match - highest priority\n if (titleLower.includes(term)) {\n score += 100;\n if (titleLower === term) {\n score += 50;\n } else if (titleLower.startsWith(term)) {\n score += 25;\n }\n }\n\n // Category match\n if (categoryLower.includes(term)) {\n score += 50;\n }\n\n // Keyword match\n const keywordMatch = entry.keywords.some(function(k) {\n return k.includes(term);\n });\n if (keywordMatch) {\n score += 30;\n }\n\n // Content match\n if (contentLower.includes(term)) {\n score += 10;\n }\n });\n\n if (score > 0) {\n scored.push({\n id: entry.id,\n title: entry.title,\n category: entry.category,\n categorySlug: entry.categorySlug,\n content: entry.content,\n url: entry.url,\n icon: entry.icon,\n score: score\n });\n }\n });\n\n scored.sort(function(a, b) {\n return b.score - a.score;\n });\n\n return scored.slice(0, config.maxResults);\n }\n\n /**\n * Render search results\n */\n function render() {\n if (state.results.length === 0) {\n setResultsHtml(renderEmpty());\n return;\n }\n\n let html = '
      ';\n\n state.results.forEach(function(result, index) {\n const isActive = index === state.activeIndex;\n const icon = result.icon || getCategoryIcon(result.categorySlug);\n const excerpt = getExcerpt(result.content, state.query);\n\n html += '
    • ' +\n '
      ' +\n '' +\n '
      ' +\n '
      ' +\n '
      ' + highlight(result.title, state.query) + '
      ' +\n '
      ' + escapeHtml(result.category) + '
      ' +\n '
      ' + highlight(excerpt, state.query) + '
      ' +\n '
      ' +\n '
      • ';\n });\n\n html += '
    ';\n html += renderFooter();\n\n setResultsHtml(html);\n }\n\n /**\n * Render empty state\n */\n function renderEmpty() {\n return '
    ' +\n '
    ' +\n '
    ' + escapeHtml(config.emptyTitle) + '
    ' +\n '
    ' + escapeHtml(config.emptyText) + '
    ' +\n '
    ';\n }\n\n /**\n * Render footer with keyboard hints\n */\n function renderFooter() {\n return '
    ' +\n '\u2191\u2193 to navigate' +\n '\u21B5 to select' +\n 'esc to close' +\n '
    ';\n }\n\n /**\n * Get icon for category\n */\n function getCategoryIcon(categorySlug) {\n return config.categoryIcons[categorySlug] || config.categoryIcons['default'] || 'ph-file-text';\n }\n\n /**\n * Get excerpt from content\n */\n function getExcerpt(content, query) {\n const terms = query.toLowerCase().split(/\\s+/);\n const contentLower = content.toLowerCase();\n const excerptLength = 100;\n\n let matchPos = -1;\n for (let i = 0; i < terms.length; i++) {\n const pos = contentLower.indexOf(terms[i]);\n if (pos !== -1 && (matchPos === -1 || pos < matchPos)) {\n matchPos = pos;\n }\n }\n\n if (matchPos === -1) {\n return content.substring(0, excerptLength) + '...';\n }\n\n const start = Math.max(0, matchPos - 30);\n const end = Math.min(content.length, matchPos + excerptLength);\n let excerpt = content.substring(start, end);\n\n if (start > 0) {\n excerpt = '...' + excerpt;\n }\n if (end < content.length) {\n excerpt = excerpt + '...';\n }\n\n return excerpt;\n }\n\n /**\n * Highlight matched terms in text\n */\n function highlight(text, query) {\n if (!query) return escapeHtml(text);\n\n const terms = query.toLowerCase().split(/\\s+/).filter(function(t) {\n return t.length > 0;\n });\n let escaped = escapeHtml(text);\n\n terms.forEach(function(term) {\n // Skip overly long terms to prevent ReDoS\n if (term.length > 50) return;\n const regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n escaped = escaped.replace(regex, '<' + config.highlightTag + '>$1');\n });\n\n return escaped;\n }\n\n /**\n * Escape HTML entities\n */\n function escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n /**\n * Navigate results with keyboard\n */\n function navigate(direction) {\n let newIndex = state.activeIndex + direction;\n\n if (newIndex < 0) {\n newIndex = state.results.length - 1;\n } else if (newIndex >= state.results.length) {\n newIndex = 0;\n }\n\n setActiveIndex(newIndex);\n }\n\n /**\n * Set active result index\n */\n function setActiveIndex(index) {\n const prevActive = state.resultsContainer.querySelector('.vd-doc-search-result.is-active');\n if (prevActive) {\n prevActive.classList.remove('is-active');\n prevActive.setAttribute('aria-selected', 'false');\n }\n\n state.activeIndex = index;\n\n const newActive = state.resultsContainer.querySelector('[data-index=\"' + index + '\"]');\n if (newActive) {\n newActive.classList.add('is-active');\n newActive.setAttribute('aria-selected', 'true');\n state.input.setAttribute('aria-activedescendant', 'vd-doc-search-result-' + index);\n newActive.scrollIntoView({ block: 'nearest' });\n }\n }\n\n /**\n * Select a result\n */\n function select(index) {\n const result = state.results[index];\n if (!result) return;\n\n // Close search\n close();\n state.input.value = '';\n state.query = '';\n\n // Custom callback\n if (typeof config.onSelect === 'function') {\n safeInvokeCallback('onSelect', config.onSelect, result);\n return;\n }\n\n // Default behavior: navigate to section\n const section = document.querySelector(result.url);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth', block: 'start' });\n window.history.pushState(null, '', result.url);\n updateSidebarActive(result.id);\n }\n }\n\n /**\n * Update sidebar navigation active state\n */\n function updateSidebarActive(sectionId) {\n const navLinks = document.querySelectorAll(config.navSelector);\n navLinks.forEach(function(link) {\n link.classList.remove('active');\n if (link.getAttribute('href') === '#' + sectionId) {\n link.classList.add('active');\n }\n });\n }\n\n /**\n * Open results dropdown\n */\n function open() {\n if (state.isOpen) return;\n\n state.isOpen = true;\n state.resultsContainer.classList.add('is-open');\n state.input.setAttribute('aria-expanded', 'true');\n\n if (typeof config.onOpen === 'function') {\n safeInvokeCallback('onOpen', config.onOpen);\n }\n }\n\n /**\n * Close results dropdown\n */\n function close() {\n if (!state.isOpen) return;\n\n state.isOpen = false;\n state.activeIndex = -1;\n state.resultsContainer.classList.remove('is-open');\n state.input.setAttribute('aria-expanded', 'false');\n state.input.removeAttribute('aria-activedescendant');\n\n if (typeof config.onClose === 'function') {\n safeInvokeCallback('onClose', config.onClose);\n }\n }\n\n /**\n * Destroy the component\n */\n function destroy() {\n unbindEvents();\n \n state.initialized = false;\n state.index = [];\n state.results = [];\n state.isOpen = false;\n state.query = '';\n\n if (state.debounceTimer) {\n clearTimeout(state.debounceTimer);\n }\n\n if (state.resultsContainer) {\n setResultsHtml('');\n }\n }\n\n /**\n * Rebuild the search index\n */\n function rebuild() {\n buildIndex();\n }\n\n /**\n * Update configuration\n */\n function setConfig(newConfig) {\n Object.assign(config, newConfig);\n }\n\n /**\n * Get current configuration\n */\n function getConfig() {\n return Object.assign({}, config);\n }\n\n /**\n * Get search index\n */\n function getIndex() {\n return state.index.slice();\n }\n\n // Public instance API\n const instance = {\n init: init,\n destroy: destroy,\n rebuild: rebuild,\n search: search,\n open: open,\n close: close,\n setConfig: setConfig,\n getConfig: getConfig,\n getIndex: getIndex\n };\n\n return instance;\n }\n\n /**\n * Search Component (singleton for backward compatibility)\n */\n const Search = {\n // Factory method \u2014 creates and auto-initializes a new independent instance.\n // Always returns the instance so callers retain a reference even if the\n // DOM container is not yet available (they can retry init() later).\n create: function(options) {\n const instance = createSearch(options);\n if (instance) {\n instance.init();\n }\n return instance || null;\n },\n \n // Default instance\n _instance: null,\n \n // Configuration (for default instance)\n config: Object.assign({}, DEFAULTS),\n\n /**\n * Initialize the default search instance\n */\n init: function(options) {\n if (this._instance) {\n this._instance.destroy();\n }\n \n if (options) {\n Object.assign(this.config, options);\n }\n \n this._instance = createSearch(this.config);\n return this._instance ? this._instance.init() : null;\n },\n\n /**\n * Destroy the default instance\n */\n destroy: function() {\n if (this._instance) {\n this._instance.destroy();\n this._instance = null;\n }\n },\n\n destroyAll: function() {\n this.destroy();\n },\n\n /**\n * Rebuild the default instance index\n */\n rebuild: function() {\n if (this._instance) {\n this._instance.rebuild();\n }\n },\n\n /**\n * Search using the default instance\n */\n search: function(query) {\n return this._instance ? this._instance.search(query) : [];\n },\n\n /**\n * Open the default instance\n */\n open: function() {\n if (this._instance) {\n this._instance.open();\n }\n },\n\n /**\n * Close the default instance\n */\n close: function() {\n if (this._instance) {\n this._instance.close();\n }\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('docSearch', Search);\n }\n\n // Expose globally (both names for compatibility)\n window.Search = Search;\n window.DocSearch = Search; // Backward compatibility\n window.VanduoDocSearch = Search; // New name compatibility\n\n})();\n", "/**\n * Vanduo Framework - Draggable Component\n * JavaScript functionality for draggable elements and drop zones\n */\n\n(function () {\n 'use strict';\n\n /**\n * Draggable Component\n */\n const Draggable = {\n // Store initialized draggables and their cleanup functions\n instances: new Map(),\n // Store current drag state\n currentDrag: null,\n // Store touch state\n touchState: null,\n // Feedback element\n feedbackElement: null,\n // Shared selector used by init and touch reorder\n containerSelector: '.vd-draggable-container, .vd-draggable-container-vertical',\n\n /**\n * Initialize draggable components\n */\n init: function () {\n const draggables = document.querySelectorAll('.vd-draggable, [data-draggable]');\n\n draggables.forEach(element => {\n if (this.instances.has(element)) {\n return;\n }\n this.initDraggable(element);\n });\n\n const containers = document.querySelectorAll(this.containerSelector);\n containers.forEach(container => {\n if (!this.instances.has(container)) {\n this.initContainer(container);\n }\n });\n\n const dropZones = document.querySelectorAll('.vd-drop-zone');\n dropZones.forEach(zone => {\n if (!this.instances.has(zone)) {\n this.initDropZone(zone);\n }\n });\n\n this.createFeedbackElement();\n },\n\n /**\n * Initialize a single draggable element\n * @param {HTMLElement} element - Draggable element\n */\n initDraggable: function (element) {\n const cleanupFunctions = [];\n\n // Make element draggable if not already\n if (!element.hasAttribute('draggable')) {\n element.setAttribute('draggable', 'true');\n }\n\n // Accessibility: add ARIA attributes\n if (!element.hasAttribute('tabindex')) {\n element.setAttribute('tabindex', '0');\n }\n element.setAttribute('role', 'option');\n element.setAttribute('aria-roledescription', 'draggable item');\n element.setAttribute('aria-grabbed', 'false');\n\n // Handle drag start\n const dragStartHandler = (e) => {\n this.handleDragStart(e, element);\n };\n element.addEventListener('dragstart', dragStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragstart', dragStartHandler));\n\n // Handle drag\n const dragHandler = (e) => {\n this.handleDrag(e, element);\n };\n element.addEventListener('drag', dragHandler);\n cleanupFunctions.push(() => element.removeEventListener('drag', dragHandler));\n\n // Handle drag end\n const dragEndHandler = (e) => {\n this.handleDragEnd(e, element);\n };\n element.addEventListener('dragend', dragEndHandler);\n cleanupFunctions.push(() => element.removeEventListener('dragend', dragEndHandler));\n\n // Handle touch start (for mobile)\n const touchStartHandler = (e) => {\n this.handleTouchStart(e, element);\n };\n element.addEventListener('touchstart', touchStartHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchstart', touchStartHandler));\n\n // Handle touch move (for mobile)\n // { passive: false } is required so that e.preventDefault() works\n // once the drag threshold is reached \u2014 without it, modern browsers\n // treat the listener as passive and silently ignore preventDefault().\n const touchMoveHandler = (e) => {\n this.handleTouchMove(e, element);\n };\n element.addEventListener('touchmove', touchMoveHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchmove', touchMoveHandler));\n\n // Handle touch end (for mobile)\n const touchEndHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchend', touchEndHandler, { passive: false });\n cleanupFunctions.push(() => element.removeEventListener('touchend', touchEndHandler));\n\n // Handle touch cancel (for mobile)\n const touchCancelHandler = (e) => {\n this.handleTouchEnd(e, element);\n };\n element.addEventListener('touchcancel', touchCancelHandler);\n cleanupFunctions.push(() => element.removeEventListener('touchcancel', touchCancelHandler));\n\n // Keyboard navigation\n const keydownHandler = (e) => {\n this.handleKeydown(e, element);\n };\n element.addEventListener('keydown', keydownHandler);\n cleanupFunctions.push(() => element.removeEventListener('keydown', keydownHandler));\n\n this.instances.set(element, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a draggable container\n * @param {HTMLElement} container - Draggable container\n */\n initContainer: function (container) {\n // Accessibility: add ARIA role to container\n container.setAttribute('role', 'listbox');\n container.setAttribute('aria-label', container.getAttribute('aria-label') || 'Draggable items');\n\n const items = container.querySelectorAll('.vd-draggable-item');\n items.forEach(item => {\n if (!this.instances.has(item)) {\n this.initDraggable(item);\n }\n });\n\n const cleanupFunctions = [];\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n };\n\n // Handle drag over for auto-sorting\n const dragOverHandler = (e) => {\n e.preventDefault(); // Necessary to allow drop\n e.dataTransfer.dropEffect = 'move';\n\n if (!this.currentDrag) return;\n const draggingEl = this.currentDrag.element;\n\n // Only reorder if dragging an item that belongs to this container (or if we support cross-container drag, but keep simple)\n if (!container.contains(draggingEl)) return;\n\n // Prevent jumps when the dragging finalizes with 0,0 coordinates near the end\n if (e.clientX === 0 && e.clientY === 0) return;\n\n this.handleReorder(container, draggingEl, e.clientX, e.clientY);\n };\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault(); // crucial to prevent the browser's default handling and snapping back\n };\n\n container.addEventListener('dragenter', dragEnterHandler);\n container.addEventListener('dragover', dragOverHandler);\n container.addEventListener('drop', dropHandler);\n\n cleanupFunctions.push(() => {\n container.removeEventListener('dragenter', dragEnterHandler);\n container.removeEventListener('dragover', dragOverHandler);\n container.removeEventListener('drop', dropHandler);\n });\n\n this.instances.set(container, { cleanup: cleanupFunctions });\n },\n\n /**\n * Initialize a drop zone\n * @param {HTMLElement} zone - Drop zone element\n */\n initDropZone: function (zone) {\n const cleanupFunctions = [];\n\n // Accessibility: add ARIA role to drop zone\n zone.setAttribute('role', 'region');\n zone.setAttribute('aria-dropeffect', 'move');\n if (!zone.hasAttribute('aria-label')) {\n zone.setAttribute('aria-label', 'Drop zone');\n }\n\n // Handle drag over\n const dragOverHandler = (e) => {\n e.preventDefault();\n this.handleDragOver(e, zone);\n };\n zone.addEventListener('dragover', dragOverHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragover', dragOverHandler));\n\n // Handle drag enter\n const dragEnterHandler = (e) => {\n e.preventDefault();\n this.handleDragEnter(e, zone);\n };\n zone.addEventListener('dragenter', dragEnterHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragenter', dragEnterHandler));\n\n // Handle drag leave\n const dragLeaveHandler = (e) => {\n this.handleDragLeave(e, zone);\n };\n zone.addEventListener('dragleave', dragLeaveHandler);\n cleanupFunctions.push(() => zone.removeEventListener('dragleave', dragLeaveHandler));\n\n // Handle drop\n const dropHandler = (e) => {\n e.preventDefault();\n this.handleDrop(e, zone);\n };\n zone.addEventListener('drop', dropHandler);\n cleanupFunctions.push(() => zone.removeEventListener('drop', dropHandler));\n\n this.instances.set(zone, { cleanup: cleanupFunctions });\n },\n\n /**\n * Create feedback element for drag operations\n */\n createFeedbackElement: function () {\n if (!this.feedbackElement) {\n // Reuse existing element if present\n const existing = document.querySelector('.vd-drag-feedback');\n if (existing) {\n this.feedbackElement = existing;\n return;\n }\n\n this.feedbackElement = document.createElement('div');\n this.feedbackElement.className = 'vd-drag-feedback hidden';\n this.feedbackElement.setAttribute('role', 'presentation');\n document.body.appendChild(this.feedbackElement);\n }\n },\n\n /**\n * Handle drag start event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragStart: function (e, element) {\n // Add dragging class\n element.classList.add('is-dragging');\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: e.clientX, y: e.clientY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element)\n };\n\n // Set drag data\n e.dataTransfer.effectAllowed = 'move';\n e.dataTransfer.setData('text/plain', this.currentDrag.data);\n\n // We no longer suppress the native ghost image or manually update feedback\n // for mouse drags, relying on the browser's native rendering instead.\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY }\n }\n }));\n },\n\n /**\n * Handle drag event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDrag: function (e, element) {\n // Guard against null state (race condition on fast interactions)\n if (!this.currentDrag) return;\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - this.currentDrag.initialPosition.x,\n y: e.clientY - this.currentDrag.initialPosition.y\n }\n }\n }));\n },\n\n /**\n * Handle drag end event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} element - Draggable element\n */\n handleDragEnd: function (e, element) {\n // Remove dragging class\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Accessibility: update aria-grabbed\n element.setAttribute('aria-grabbed', 'false');\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Guard against null state\n const data = this.currentDrag?.data || this.getData(element);\n const initialPos = this.currentDrag?.initialPosition || { x: 0, y: 0 };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: { x: e.clientX, y: e.clientY },\n delta: {\n x: e.clientX - initialPos.x,\n y: e.clientY - initialPos.y\n }\n }\n }));\n\n // Reset drag state\n this.currentDrag = null;\n },\n\n /**\n * Handle touch start event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchStart: function (e, element) {\n // Don't prevent default here \u2014 it blocks scrolling.\n // We only prevent default in touchmove once drag threshold is reached.\n const touch = e.touches[0];\n const rect = element.getBoundingClientRect();\n this.touchState = {\n element: element,\n startX: touch.clientX,\n startY: touch.clientY,\n lastX: touch.clientX,\n lastY: touch.clientY,\n // Keep preview anchored to the original grab point.\n offsetX: touch.clientX - rect.left,\n offsetY: touch.clientY - rect.top,\n startTime: Date.now(),\n isDragging: false\n };\n },\n\n /**\n * Handle touch move event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchMove: function (e, element) {\n if (!this.touchState) return;\n\n const touch = e.touches[0];\n this.touchState.lastX = touch.clientX;\n this.touchState.lastY = touch.clientY;\n const deltaX = touch.clientX - this.touchState.startX;\n const deltaY = touch.clientY - this.touchState.startY;\n\n // Only start dragging if moved a minimum distance\n if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {\n // Now we know it's a drag, not a scroll \u2014 prevent default\n if (e.cancelable) e.preventDefault();\n\n if (!this.touchState.isDragging) {\n this.touchState.isDragging = true;\n element.classList.add('is-dragging');\n element.setAttribute('aria-grabbed', 'true');\n\n // Store drag state\n this.currentDrag = {\n element: element,\n initialPosition: { x: this.touchState.startX, y: this.touchState.startY },\n initialBounds: element.getBoundingClientRect(),\n data: this.getData(element),\n // Preserve where inside the element the drag started for accurate ghost positioning.\n offsetX: this.touchState.offsetX,\n offsetY: this.touchState.offsetY\n };\n\n // Dispatch event\n element.dispatchEvent(new CustomEvent('draggable:start', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY }\n }\n }));\n }\n\n // Update feedback\n this.updateFeedback(touch.clientX, touch.clientY);\n\n // Dispatch event\n if (this.currentDrag) {\n element.dispatchEvent(new CustomEvent('draggable:drag', {\n bubbles: true,\n detail: {\n element: element,\n data: this.currentDrag.data,\n position: { x: touch.clientX, y: touch.clientY },\n delta: { x: deltaX, y: deltaY }\n }\n }));\n\n this.updateTouchDropZone(touch.clientX, touch.clientY);\n\n // Reorder for touch\n const container = element.closest(this.containerSelector);\n if (container && container.contains(element)) {\n this.handleReorder(container, element, touch.clientX, touch.clientY);\n }\n }\n }\n },\n\n /**\n * Handle touch end event (for mobile)\n * @param {TouchEvent} e - Touch event\n * @param {HTMLElement} element - Draggable element\n */\n handleTouchEnd: function (e, element) {\n if (this.touchState && this.touchState.isDragging) {\n if (e.cancelable) e.preventDefault();\n const endTouch = e.changedTouches?.[0];\n const endPosition = {\n x: endTouch?.clientX ?? this.touchState.lastX ?? this.touchState.startX,\n y: endTouch?.clientY ?? this.touchState.lastY ?? this.touchState.startY\n };\n\n const dropZone = this.resolveDropZoneAtPoint(endPosition.x, endPosition.y) || this.touchState.overZone;\n if (dropZone) {\n this.dispatchDrop(dropZone, endPosition);\n } else if (this.touchState.overZone) {\n this.touchState.overZone.classList.remove('is-drag-over');\n }\n\n element.classList.remove('is-dragging');\n element.classList.add('is-dropped');\n element.setAttribute('aria-grabbed', 'false');\n setTimeout(() => element.classList.remove('is-dropped'), 300);\n\n // Hide feedback\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n\n // Dispatch event\n const data = this.currentDrag?.data || this.getData(element);\n const startX = this.touchState?.startX || 0;\n const startY = this.touchState?.startY || 0;\n\n element.dispatchEvent(new CustomEvent('draggable:end', {\n bubbles: true,\n detail: {\n element: element,\n data: data,\n position: endPosition,\n delta: {\n x: endPosition.x - startX,\n y: endPosition.y - startY\n }\n }\n }));\n }\n\n // Reset states\n this.touchState = null;\n this.currentDrag = null;\n },\n\n /**\n * Handle drag over event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} _zone - Drop zone element\n */\n handleDragOver: function (e, _zone) {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n },\n\n /**\n * Handle drag enter event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragEnter: function (e, zone) {\n e.preventDefault();\n zone.classList.add('is-drag-over');\n },\n\n /**\n * Handle drag leave event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDragLeave: function (e, zone) {\n zone.classList.remove('is-drag-over');\n },\n\n /**\n * Handle drop event\n * @param {DragEvent} e - Drag event\n * @param {HTMLElement} zone - Drop zone element\n */\n handleDrop: function (e, zone) {\n e.preventDefault();\n this.dispatchDrop(zone, { x: e.clientX, y: e.clientY });\n },\n\n /**\n * Resolve a drop zone from viewport coordinates\n * @param {number} x\n * @param {number} y\n * @returns {HTMLElement|null}\n */\n resolveDropZoneAtPoint: function (x, y) {\n if (!Number.isFinite(x) || !Number.isFinite(y)) return null;\n\n // Prefer the full stacking list so overlays/top elements don't hide real drop targets.\n if (typeof document.elementsFromPoint === 'function') {\n const stacked = document.elementsFromPoint(x, y);\n for (const element of stacked) {\n const zone = element.closest('.vd-drop-zone');\n if (zone) return zone;\n }\n }\n\n const target = document.elementFromPoint(x, y);\n const targetZone = target ? target.closest('.vd-drop-zone') : null;\n if (targetZone) return targetZone;\n\n // Last-resort fallback for mobile emulation edge cases.\n const zones = document.querySelectorAll('.vd-drop-zone');\n for (const zone of zones) {\n const rect = zone.getBoundingClientRect();\n if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {\n return zone;\n }\n }\n\n return null;\n },\n\n /**\n * Track and update active drop-zone hover state on touch devices\n * @param {number} x\n * @param {number} y\n */\n updateTouchDropZone: function (x, y) {\n if (!this.touchState) return;\n\n const nextZone = this.resolveDropZoneAtPoint(x, y);\n const prevZone = this.touchState.overZone || null;\n\n if (prevZone && prevZone !== nextZone) {\n prevZone.classList.remove('is-drag-over');\n }\n\n if (nextZone && nextZone !== prevZone) {\n nextZone.classList.add('is-drag-over');\n }\n\n this.touchState.overZone = nextZone || null;\n },\n\n /**\n * Dispatch a normalized drop event for mouse and touch flows\n * @param {HTMLElement} zone\n * @param {{x:number, y:number}} position\n */\n dispatchDrop: function (zone, position) {\n zone.classList.remove('is-drag-over');\n zone.dispatchEvent(new CustomEvent('draggable:drop', {\n bubbles: true,\n detail: {\n zone: zone,\n element: this.currentDrag?.element,\n data: this.currentDrag?.data,\n position: position\n }\n }));\n },\n\n /**\n * Reorder elements in container based on cursor position\n * @param {HTMLElement} container \n * @param {HTMLElement} element \n * @param {number} clientX \n * @param {number} clientY \n */\n handleReorder: function (container, element, clientX, clientY) {\n const isVertical = container.classList.contains('vd-draggable-container-vertical');\n const siblings = [...container.querySelectorAll('.vd-draggable-item:not(.is-dragging), .vd-draggable:not(.is-dragging)')];\n\n const nextSibling = siblings.reduce((closest, child) => {\n const box = child.getBoundingClientRect();\n const offset = isVertical\n ? clientY - box.top - box.height / 2\n : clientX - box.left - box.width / 2;\n\n if (offset < 0 && offset > closest.offset) {\n return { offset: offset, element: child };\n } else {\n return closest;\n }\n }, { offset: Number.NEGATIVE_INFINITY }).element;\n\n if (nextSibling == null) {\n container.appendChild(element);\n } else {\n container.insertBefore(element, nextSibling);\n }\n },\n\n /**\n * Handle keyboard events\n * @param {KeyboardEvent} e - Keyboard event\n * @param {HTMLElement} element - Draggable element\n */\n handleKeydown: function (e, element) {\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n // Trigger click or custom action\n element.click();\n break;\n case 'Escape':\n // Cancel drag if in progress\n if (element.classList.contains('is-dragging')) {\n element.classList.remove('is-dragging');\n element.setAttribute('aria-grabbed', 'false');\n if (this.feedbackElement) {\n this.feedbackElement.classList.add('hidden');\n }\n this.currentDrag = null;\n }\n break;\n case 'ArrowUp':\n case 'ArrowLeft': {\n e.preventDefault();\n const prev = element.previousElementSibling;\n if (prev && (prev.classList.contains('vd-draggable') || prev.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(element, prev);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'up' }\n }));\n }\n break;\n }\n case 'ArrowDown':\n case 'ArrowRight': {\n e.preventDefault();\n const next = element.nextElementSibling;\n if (next && (next.classList.contains('vd-draggable') || next.classList.contains('vd-draggable-item'))) {\n element.parentNode.insertBefore(next, element);\n element.focus();\n element.dispatchEvent(new CustomEvent('draggable:reorder', {\n bubbles: true,\n detail: { element: element, direction: 'down' }\n }));\n }\n break;\n }\n }\n },\n\n /**\n * Get data from draggable element\n * @param {HTMLElement} element - Draggable element\n * @returns {string} Data associated with the element\n */\n getData: function (element) {\n return element.dataset.draggable || element.textContent.trim();\n },\n\n /**\n * Update drag feedback element\n * @param {number} x - Current X coordinate\n * @param {number} y - Current Y coordinate\n */\n updateFeedback: function (x, y) {\n if (!this.currentDrag) return;\n\n // Show feedback\n this.feedbackElement.classList.remove('hidden');\n\n // Update feedback content\n const rect = this.currentDrag.initialBounds;\n this.feedbackElement.innerHTML = '';\n const clone = this.currentDrag.element.cloneNode(true);\n this.feedbackElement.appendChild(clone);\n\n // Set styles\n const offsetX = this.currentDrag.offsetX ?? 20;\n const offsetY = this.currentDrag.offsetY ?? 20;\n Object.assign(this.feedbackElement.style, {\n left: (x - offsetX) + 'px',\n top: (y - offsetY) + 'px',\n width: rect.width + 'px',\n height: rect.height + 'px'\n });\n },\n\n /**\n * Make an element draggable programmatically\n * @param {HTMLElement|string} element - Element or selector\n * @param {Object} options - Configuration options\n */\n makeDraggable: function (element, options = {}) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && !this.instances.has(el)) {\n // Add classes and attributes\n el.classList.add('vd-draggable');\n el.setAttribute('draggable', 'true');\n\n // Set options\n if (options.data) {\n el.dataset.draggable = options.data;\n }\n\n // Initialize\n this.initDraggable(el);\n }\n },\n\n /**\n * Remove draggable functionality from an element\n * @param {HTMLElement|string} element - Element or selector\n */\n removeDraggable: function (element) {\n const el = typeof element === 'string' ? document.querySelector(element) : element;\n\n if (el && this.instances.has(el)) {\n // Clean up\n const instance = this.instances.get(el);\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n\n // Remove classes and attributes\n el.classList.remove('vd-draggable');\n el.removeAttribute('draggable');\n el.removeAttribute('data-draggable');\n }\n },\n\n /**\n * Destroy a draggable instance and clean up event listeners\n * @param {HTMLElement} element - Draggable element\n */\n destroy: function (element) {\n this.removeDraggable(element);\n },\n\n /**\n * Destroy all draggable instances\n */\n destroyAll: function () {\n const instances = Array.from(this.instances.keys());\n instances.forEach(element => this.destroy(element));\n }\n };\n\n // Register with Vanduo framework if available\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('draggable', Draggable);\n }\n\n // Expose globally\n window.VanduoDraggable = Draggable;\n})();\n", "/**\n * Vanduo Framework \u2013 LazyLoad Component\n * v1.2.1\n *\n * Provides two levels of API:\n *\n * LOW-LEVEL (generic IntersectionObserver wrapper)\n * VanduoLazyLoad.observe(element, callback, options?)\n * VanduoLazyLoad.unobserve(element)\n * VanduoLazyLoad.unobserveAll()\n *\n * HIGH-LEVEL (HTML-section fetcher, mirrors vanduo-docs SPA behaviour)\n * VanduoLazyLoad.loadSection(url, containerEl, options?)\n * options: { placeholder, threshold, rootMargin, onLoaded, onError }\n * placeholder: 'skeleton' | 'spinner' | HTMLString (default: 'skeleton')\n *\n * ATTRIBUTE-DRIVEN (zero-JS usage, wired by init())\n *
    \u2026
    \n *\n * EVENTS dispatched on the host element:\n * lazysection:loading \u2014 fetch started\n * lazysection:loaded \u2014 content injected\n * lazysection:error \u2014 fetch failed\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500 Private state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /** @type {Map} */\n const _observerMap = new Map();\n\n /* \u2500\u2500 Security helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Returns true only if `url` resolves to the same origin as the page\n * (relative paths and same-origin absolute URLs are allowed).\n * Cross-origin URLs are rejected to prevent SSRF-style fetch abuse.\n * @param {string} url\n * @returns {boolean}\n */\n function _isSafeUrl(url) {\n try {\n // Relative URLs (no origin) are always safe\n const resolved = new URL(url, window.location.href);\n return resolved.origin === window.location.origin;\n } catch (_) {\n return false;\n }\n }\n\n /**\n * Safely inject fetched HTML into a container by parsing it with\n * DOMParser (avoids script execution) and replacing children via\n * standard DOM APIs instead of raw innerHTML assignment.\n * @param {Element} containerEl\n * @param {string} html\n */\n function _safeInjectHtml(containerEl, html) {\n const parser = new DOMParser();\n const doc = parser.parseFromString(html.trim(), 'text/html'); // CodeQL [js/xss-through-dom] Intentional: parsed nodes are sanitized below before adoption into live DOM\n\n const DANGEROUS_TAGS = ['SCRIPT', 'IFRAME', 'OBJECT', 'EMBED', 'FORM', 'BASE', 'LINK', 'META', 'STYLE'];\n for (const tag of DANGEROUS_TAGS) {\n const els = doc.querySelectorAll(tag);\n for (let i = els.length - 1; i >= 0; i--) {\n els[i].parentNode.removeChild(els[i]);\n }\n }\n\n // Strip dangerous attributes (e.g. onerror, javascript: urls) from all elements\n function _sanitizeNode(node) {\n if (node.nodeType === Node.ELEMENT_NODE) {\n const attrs = node.attributes;\n for (let i = attrs.length - 1; i >= 0; i--) {\n const attrName = attrs[i].name.toLowerCase();\n const attrValue = attrs[i].value.toLowerCase();\n const trimmedValue = attrValue.trim();\n if (\n attrName.startsWith('on') ||\n trimmedValue.startsWith('javascript:') ||\n trimmedValue.startsWith('data:') ||\n trimmedValue.startsWith('vbscript:')\n ) {\n node.removeAttribute(attrs[i].name);\n }\n }\n const children = node.childNodes;\n for (let i = 0; i < children.length; i++) {\n _sanitizeNode(children[i]);\n }\n }\n }\n _sanitizeNode(doc.body);\n\n // Collect all top-level body children\n const nodes = Array.from(doc.body.childNodes);\n // Clear container and append parsed nodes\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n nodes.forEach(function (node) {\n containerEl.appendChild(document.adoptNode(node));\n });\n }\n\n /* \u2500\u2500 Placeholder HTML \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _skeletonHtml() {\n return '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _spinnerHtml() {\n return '
    '\n + '
    '\n + ''\n + ''\n + ''\n + '
    '\n + 'Loading\u2026
    ';\n }\n\n function _resolvePlaceholder(placeholder) {\n if (!placeholder || placeholder === 'skeleton') return _skeletonHtml();\n if (placeholder === 'spinner') return _spinnerHtml();\n // Caller-supplied HTML string\n return placeholder;\n }\n\n /* \u2500\u2500 Dispatch helper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n function _dispatch(el, eventName, detail) {\n el.dispatchEvent(new CustomEvent(eventName, { bubbles: true, detail: detail || {} }));\n }\n\n /* \u2500\u2500 VanduoLazyLoad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const VanduoLazyLoad = {\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * LOW-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Observe an element. `callback` is invoked once when the element\n * enters the viewport, then the element is automatically unobserved.\n *\n * @param {Element} element\n * @param {function(Element): void} callback\n * @param {{ threshold?: number, rootMargin?: string }} [options]\n */\n observe: function (element, callback, options) {\n if (!(element instanceof Element)) {\n console.warn('[VanduoLazyLoad] observe() requires a DOM Element.');\n return;\n }\n if (typeof callback !== 'function') {\n console.warn('[VanduoLazyLoad] observe() requires a callback function.');\n return;\n }\n // Already observed \u2014 ignore\n if (_observerMap.has(element)) return;\n\n const threshold = (options && options.threshold != null) ? options.threshold : 0;\n const rootMargin = (options && options.rootMargin) ? options.rootMargin : '0px';\n\n const observer = new IntersectionObserver(function (entries, obs) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n obs.unobserve(entry.target);\n _observerMap.delete(entry.target);\n try {\n callback(entry.target);\n } catch (e) {\n console.error('[VanduoLazyLoad] Callback threw:', e);\n }\n }\n });\n }, { threshold: threshold, rootMargin: rootMargin });\n\n _observerMap.set(element, observer);\n observer.observe(element);\n },\n\n /**\n * Stop observing an element that was previously passed to observe().\n * @param {Element} element\n */\n unobserve: function (element) {\n const observer = _observerMap.get(element);\n if (observer) {\n observer.unobserve(element);\n _observerMap.delete(element);\n }\n },\n\n /**\n * Stop observing ALL currently observed elements.\n */\n unobserveAll: function () {\n _observerMap.forEach(function (observer, element) {\n observer.unobserve(element);\n });\n _observerMap.clear();\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * HIGH-LEVEL API\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fetch an HTML partial and inject it into `containerEl` when the\n * container enters the viewport. A placeholder is shown immediately.\n *\n * @param {string} url URL of the HTML partial to fetch\n * @param {Element} containerEl Target element whose content will be replaced\n * @param {{\n * placeholder?: 'skeleton'|'spinner'|string,\n * threshold?: number,\n * rootMargin?: string,\n * onLoaded?: function(Element): void,\n * onError?: function(Error): void\n * }} [options]\n */\n loadSection: function (url, containerEl, options) {\n if (typeof url !== 'string' || !url) {\n console.warn('[VanduoLazyLoad] loadSection() requires a non-empty URL string.');\n return;\n }\n if (!(containerEl instanceof Element)) {\n console.warn('[VanduoLazyLoad] loadSection() requires a DOM Element as containerEl.');\n return;\n }\n // Reject cross-origin URLs to prevent SSRF-style fetch abuse\n if (!_isSafeUrl(url)) {\n console.error('[VanduoLazyLoad] loadSection() blocked cross-origin URL:', url);\n return;\n }\n\n const opts = options || {};\n // Placeholders are known-safe static HTML strings built internally\n const placeholderHtml = _resolvePlaceholder(opts.placeholder);\n\n // Use _safeInjectHtml instead of innerHTML to prevent XSS from caller-supplied placeholders\n _safeInjectHtml(containerEl, placeholderHtml);\n _dispatch(containerEl, 'lazysection:loading', { url: url });\n\n // Fetch when visible\n this.observe(containerEl, function () {\n const controller = new window.AbortController();\n const timeoutId = setTimeout(function () { controller.abort(); }, 10000);\n\n window.fetch(url, { signal: controller.signal })\n .then(function (res) {\n clearTimeout(timeoutId);\n if (!res.ok) throw new Error('HTTP ' + res.status);\n return res.text();\n })\n .then(function (html) {\n // Use DOMParser to parse fetched content safely, avoiding\n // raw innerHTML assignment of externally-sourced strings\n _safeInjectHtml(containerEl, html);\n _dispatch(containerEl, 'lazysection:loaded', { url: url });\n // Re-init Vanduo components inside the new content\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.init();\n }\n if (typeof opts.onLoaded === 'function') {\n opts.onLoaded(containerEl);\n }\n })\n .catch(function (err) {\n // Build error node via DOM APIs \u2014 no dynamic HTML strings\n const alertEl = document.createElement('div');\n alertEl.className = 'vd-alert vd-alert-error';\n alertEl.setAttribute('role', 'alert');\n const msgEl = document.createElement('span');\n msgEl.textContent = 'Failed to load content. ';\n const detailEl = document.createElement('small');\n detailEl.style.opacity = '0.7';\n detailEl.textContent = err.message;\n alertEl.appendChild(msgEl);\n alertEl.appendChild(detailEl);\n while (containerEl.firstChild) {\n containerEl.removeChild(containerEl.firstChild);\n }\n containerEl.appendChild(alertEl);\n _dispatch(containerEl, 'lazysection:error', { url: url, error: err });\n console.error('[VanduoLazyLoad] loadSection failed:', err);\n if (typeof opts.onError === 'function') {\n opts.onError(err);\n }\n });\n }, { threshold: opts.threshold, rootMargin: opts.rootMargin });\n },\n\n /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * ATTRIBUTE-DRIVEN INIT\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Scan the DOM for [data-vd-lazy] elements and wire them up.\n * Safe to call multiple times \u2014 already-observed elements are skipped.\n */\n init: function () {\n const self = this;\n const elements = document.querySelectorAll('[data-vd-lazy]');\n elements.forEach(function (el) {\n // Skip already-observed or already-loaded elements\n if (_observerMap.has(el) || el.dataset.vdLazyState === 'loading' || el.dataset.vdLazyState === 'loaded') return;\n\n const url = el.getAttribute('data-vd-lazy');\n if (!url) return;\n\n el.dataset.vdLazyState = 'loading';\n const placeholder = el.getAttribute('data-vd-lazy-placeholder') || 'skeleton';\n\n self.loadSection(url, el, {\n placeholder: placeholder,\n onLoaded: function () {\n el.dataset.vdLazyState = 'loaded';\n },\n onError: function () {\n el.dataset.vdLazyState = 'error';\n }\n });\n });\n }\n };\n\n /* \u2500\u2500 Register with Vanduo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('LazyLoad', VanduoLazyLoad);\n }\n\n /* \u2500\u2500 Global convenience alias \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n window.VanduoLazyLoad = VanduoLazyLoad;\n\n})();\n", "/**\n * Vanduo Framework - Glass Scroll Activation\n * Generic scroll-aware glass activation via IntersectionObserver.\n *\n * Usage:\n * Add `data-glass-scroll` to any element carrying a `.vd-glass*` class.\n * By default the previous sibling is used as the sentinel.\n * Point to a custom sentinel via `data-glass-sentinel=\"\"`.\n *\n * Behaviour:\n * - Adds `.is-glass-active` when the sentinel leaves the viewport (scrolled past).\n * - Removes `.is-glass-active` when the sentinel re-enters the viewport.\n */\n(function () {\n 'use strict';\n\n const GlassScroll = {\n /** @type {Map} */\n observers: new Map(),\n\n init: function () {\n document.querySelectorAll('[data-glass-scroll]').forEach(el => {\n if (this.observers.has(el)) return;\n this.initElement(el);\n });\n },\n\n /**\n * Wire up a single scroll-activated glass element.\n * @param {HTMLElement} el\n */\n initElement: function (el) {\n const sentinelSelector = el.dataset.glassSentinel;\n let sentinel;\n\n if (sentinelSelector) {\n sentinel = document.querySelector(sentinelSelector);\n }\n\n if (!sentinel) {\n // Fall back to the previous sibling element\n sentinel = el.previousElementSibling;\n }\n\n if (!sentinel) {\n // No sentinel available \u2014 activate immediately so glass is always shown\n el.classList.add('is-glass-active');\n return;\n }\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach(entry => {\n // Active when sentinel is NOT intersecting (scrolled past it)\n el.classList.toggle('is-glass-active', !entry.isIntersecting);\n });\n },\n { threshold: 0, rootMargin: '0px' }\n );\n\n observer.observe(sentinel);\n this.observers.set(el, observer);\n },\n\n /**\n * Disconnect and remove a single element's observer.\n * @param {HTMLElement} el\n */\n destroy: function (el) {\n const observer = this.observers.get(el);\n if (observer) {\n observer.disconnect();\n this.observers.delete(el);\n }\n },\n\n destroyAll: function () {\n this.observers.forEach((observer, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('glassScroll', GlassScroll);\n }\n\n window.VanduoGlassScroll = GlassScroll;\n})();\n", "/**\n * Vanduo Framework - Water Morph Effect Component\n * Liquid wave content-swap animation on click\n *\n * Usage:\n * Add .vd-morph or [data-vd-morph] to any element.\n * Provide .vd-morph-content.vd-morph-current and .vd-morph-content.vd-morph-next children.\n * Wave and shine layers are auto-created if absent.\n *\n * JS API:\n * VanduoMorph.morph(el) \u2014 trigger morph programmatically (from center)\n * VanduoMorph.destroy(el) \u2014 tear down listeners for one element\n * VanduoMorph.destroyAll() \u2014 tear down all instances\n */\n\n(function () {\n 'use strict';\n\n const MORPH_DURATION_MS = 750;\n\n const Morph = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-morph, [data-vd-morph]');\n elements.forEach(function (el) {\n if (Morph.instances.has(el)) return;\n if (el.getAttribute('data-vd-morph') === 'manual') return;\n Morph.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n Morph._ensureLayers(el);\n\n const cleanup = [];\n let morphing = false;\n\n const handleClick = function (e) {\n if (morphing) return;\n Morph._runMorph(el, e, function () { morphing = false; });\n morphing = true;\n };\n\n el.addEventListener('click', handleClick);\n cleanup.push(function () { el.removeEventListener('click', handleClick); });\n\n this.instances.set(el, { cleanup: cleanup });\n },\n\n morph: function (el) {\n if (!el) return;\n if (!this.instances.has(el)) this.initInstance(el);\n this._runMorph(el, null, null);\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(function (fn) { fn(); });\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach(function (_, el) { Morph.destroy(el); });\n },\n\n /* \u2500\u2500 Internal helpers \u2500\u2500 */\n\n _ensureLayers: function (el) {\n if (!el.querySelector('.vd-morph-wave')) {\n const wave = document.createElement('span');\n wave.className = 'vd-morph-wave';\n wave.setAttribute('aria-hidden', 'true');\n el.insertBefore(wave, el.firstChild);\n }\n if (!el.querySelector('.vd-morph-shine')) {\n const shine = document.createElement('span');\n shine.className = 'vd-morph-shine';\n shine.setAttribute('aria-hidden', 'true');\n const waveEl = el.querySelector('.vd-morph-wave');\n if (waveEl && waveEl.nextSibling) {\n el.insertBefore(shine, waveEl.nextSibling);\n } else {\n el.insertBefore(shine, el.firstChild);\n }\n }\n },\n\n _runMorph: function (el, pointerEvent, onComplete) {\n const wave = el.querySelector('.vd-morph-wave');\n if (wave) {\n const rect = el.getBoundingClientRect();\n const cx = rect.left + rect.width / 2;\n const cy = rect.top + rect.height / 2;\n const px = pointerEvent ? (pointerEvent.clientX || cx) : cx;\n const py = pointerEvent ? (pointerEvent.clientY || cy) : cy;\n wave.style.left = (px - rect.left) + 'px';\n wave.style.top = (py - rect.top) + 'px';\n }\n\n el.classList.add('is-morphing');\n\n let duration = MORPH_DURATION_MS;\n const custom = getComputedStyle(el).getPropertyValue('--morph-duration');\n if (custom) {\n const parsed = parseFloat(custom);\n if (!isNaN(parsed)) duration = parsed * (custom.indexOf('ms') !== -1 ? 1 : 1000);\n }\n\n setTimeout(function () {\n el.classList.remove('is-morphing');\n\n const current = el.querySelector('.vd-morph-current');\n const next = el.querySelector('.vd-morph-next');\n if (current && next) {\n current.classList.remove('vd-morph-current');\n current.classList.add('vd-morph-next');\n next.classList.remove('vd-morph-next');\n next.classList.add('vd-morph-current');\n }\n\n el.classList.add('morph-done');\n setTimeout(function () { el.classList.remove('morph-done'); }, 350);\n\n if (typeof onComplete === 'function') onComplete();\n }, duration);\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('morph', Morph);\n }\n\n window.VanduoMorph = Morph;\n\n})();\n", "/**\n * Vanduo Framework - Flow (Carousel/Slider) Component\n * Touch-enabled carousel with slide/fade transitions, autoplay, indicators\n */\n\n(function () {\n 'use strict';\n\n const Flow = {\n instances: new Map(),\n\n init: function () {\n const carousels = document.querySelectorAll('.vd-flow, .vd-carousel');\n carousels.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const track = el.querySelector('.vd-flow-track');\n if (!track) return;\n\n const slides = Array.from(track.querySelectorAll('.vd-flow-slide'));\n if (slides.length === 0) return;\n\n const isFade = el.classList.contains('vd-flow-fade');\n const autoplay = el.hasAttribute('data-vd-autoplay');\n const interval = parseInt(el.getAttribute('data-vd-interval'), 10) || 5000;\n const loop = el.getAttribute('data-vd-loop') !== 'false';\n\n const state = {\n current: 0,\n total: slides.length,\n autoplayTimer: null,\n isFade: isFade,\n loop: loop,\n isDragging: false,\n startX: 0,\n currentX: 0,\n threshold: 50\n };\n\n const cleanup = [];\n\n // Set initial active slide\n slides.forEach((slide, i) => {\n slide.setAttribute('role', 'group');\n slide.setAttribute('aria-roledescription', 'slide');\n slide.setAttribute('aria-label', 'Slide ' + (i + 1) + ' of ' + slides.length);\n if (i === 0) slide.classList.add('is-active');\n });\n\n el.setAttribute('role', 'region');\n el.setAttribute('aria-roledescription', 'carousel');\n if (!el.getAttribute('aria-label')) {\n el.setAttribute('aria-label', 'Carousel');\n }\n\n // Live region for announcements\n const liveRegion = document.createElement('div');\n liveRegion.setAttribute('aria-live', 'polite');\n liveRegion.setAttribute('aria-atomic', 'true');\n liveRegion.className = 'sr-only';\n liveRegion.style.cssText = 'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);';\n el.appendChild(liveRegion);\n\n const goTo = (index, announce) => {\n if (announce === undefined) announce = true;\n let target = index;\n if (state.loop) {\n target = ((index % state.total) + state.total) % state.total;\n } else {\n target = Math.max(0, Math.min(index, state.total - 1));\n }\n\n const prev = state.current;\n state.current = target;\n\n if (state.isFade) {\n slides.forEach((s, i) => {\n s.classList.toggle('is-active', i === target);\n });\n } else {\n track.style.transform = 'translateX(-' + (target * 100) + '%)';\n }\n\n // Update indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.classList.toggle('is-active', i === target);\n ind.setAttribute('aria-selected', i === target ? 'true' : 'false');\n });\n\n // Update slide ARIA\n slides.forEach((s, i) => {\n s.setAttribute('aria-hidden', i !== target ? 'true' : 'false');\n });\n\n if (announce) {\n liveRegion.textContent = 'Slide ' + (target + 1) + ' of ' + state.total;\n }\n\n el.dispatchEvent(new CustomEvent('flow:change', {\n detail: { current: target, previous: prev, total: state.total }\n }));\n };\n\n const next = () => goTo(state.current + 1);\n const prev = () => goTo(state.current - 1);\n\n // Controls\n const prevBtn = el.querySelector('.vd-flow-prev');\n const nextBtn = el.querySelector('.vd-flow-next');\n\n if (prevBtn) {\n const h = () => prev();\n prevBtn.addEventListener('click', h);\n cleanup.push(() => prevBtn.removeEventListener('click', h));\n }\n if (nextBtn) {\n const h = () => next();\n nextBtn.addEventListener('click', h);\n cleanup.push(() => nextBtn.removeEventListener('click', h));\n }\n\n // Indicators\n const indicators = el.querySelectorAll('.vd-flow-indicator');\n indicators.forEach((ind, i) => {\n ind.setAttribute('role', 'tab');\n ind.setAttribute('aria-selected', i === 0 ? 'true' : 'false');\n ind.setAttribute('aria-label', 'Go to slide ' + (i + 1));\n const h = () => goTo(i);\n ind.addEventListener('click', h);\n cleanup.push(() => ind.removeEventListener('click', h));\n });\n\n // Keyboard navigation\n const keyHandler = (e) => {\n if (e.key === 'ArrowLeft') { prev(); e.preventDefault(); }\n if (e.key === 'ArrowRight') { next(); e.preventDefault(); }\n };\n el.setAttribute('tabindex', '0');\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n // Touch / pointer support\n const pointerDown = (e) => {\n state.isDragging = true;\n state.startX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n state.currentX = state.startX;\n el.classList.add('is-dragging');\n };\n\n const pointerMove = (e) => {\n if (!state.isDragging) return;\n state.currentX = e.clientX || (e.touches && e.touches[0].clientX) || 0;\n };\n\n const pointerUp = () => {\n if (!state.isDragging) return;\n state.isDragging = false;\n el.classList.remove('is-dragging');\n const diff = state.startX - state.currentX;\n if (Math.abs(diff) > state.threshold) {\n if (diff > 0) next();\n else prev();\n }\n };\n\n el.addEventListener('mousedown', pointerDown);\n el.addEventListener('mousemove', pointerMove);\n el.addEventListener('mouseup', pointerUp);\n el.addEventListener('mouseleave', pointerUp);\n el.addEventListener('touchstart', pointerDown, { passive: true });\n el.addEventListener('touchmove', pointerMove, { passive: true });\n el.addEventListener('touchend', pointerUp);\n\n cleanup.push(\n () => el.removeEventListener('mousedown', pointerDown),\n () => el.removeEventListener('mousemove', pointerMove),\n () => el.removeEventListener('mouseup', pointerUp),\n () => el.removeEventListener('mouseleave', pointerUp),\n () => el.removeEventListener('touchstart', pointerDown),\n () => el.removeEventListener('touchmove', pointerMove),\n () => el.removeEventListener('touchend', pointerUp)\n );\n\n // Autoplay\n const startAutoplay = () => {\n stopAutoplay();\n state.autoplayTimer = setInterval(next, interval);\n };\n\n const stopAutoplay = () => {\n if (state.autoplayTimer) {\n clearInterval(state.autoplayTimer);\n state.autoplayTimer = null;\n }\n };\n\n if (autoplay) {\n startAutoplay();\n const pauseHandler = () => stopAutoplay();\n const resumeHandler = () => startAutoplay();\n el.addEventListener('mouseenter', pauseHandler);\n el.addEventListener('mouseleave', resumeHandler);\n el.addEventListener('focusin', pauseHandler);\n el.addEventListener('focusout', resumeHandler);\n cleanup.push(\n () => el.removeEventListener('mouseenter', pauseHandler),\n () => el.removeEventListener('mouseleave', resumeHandler),\n () => el.removeEventListener('focusin', pauseHandler),\n () => el.removeEventListener('focusout', resumeHandler),\n () => stopAutoplay()\n );\n }\n\n // Initial ARIA state\n goTo(0, false);\n\n this.instances.set(el, {\n cleanup: cleanup,\n goTo: goTo,\n next: next,\n prev: prev,\n getState: () => ({ ...state })\n });\n },\n\n goTo: function (el, index) {\n const instance = this.instances.get(el);\n if (instance) instance.goTo(index);\n },\n\n next: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.next();\n },\n\n prev: function (el) {\n const instance = this.instances.get(el);\n if (instance) instance.prev();\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('flow', Flow);\n }\n\n window.VanduoFlow = Flow;\n\n})();\n", "/**\n * Vanduo Framework - Bubble (Popover) Component\n * Click-triggered rich HTML popover, reuses tooltip positioning concepts\n */\n\n(function () {\n 'use strict';\n\n const Bubble = {\n instances: new Map(),\n _globalCleanups: [],\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-bubble], [data-vd-popover]');\n triggers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n\n if (this._globalCleanups.length === 0) {\n const outsideClick = (e) => {\n this.instances.forEach((inst, trigger) => {\n if (!inst.popover.contains(e.target) && !trigger.contains(e.target)) {\n this.hide(trigger);\n }\n });\n };\n const escHandler = (e) => {\n if (e.key === 'Escape') {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n }\n };\n document.addEventListener('click', outsideClick, true);\n document.addEventListener('keydown', escHandler);\n this._globalCleanups.push(\n () => document.removeEventListener('click', outsideClick, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n }\n },\n\n initInstance: function (trigger) {\n const cleanup = [];\n const placement = trigger.getAttribute('data-vd-bubble-placement') ||\n trigger.getAttribute('data-vd-popover-placement') || 'bottom';\n\n // Build popover element\n const popover = document.createElement('div');\n popover.className = 'vd-bubble-content';\n popover.setAttribute('role', 'dialog');\n popover.setAttribute('aria-modal', 'false');\n popover.setAttribute('data-placement', placement);\n\n const title = trigger.getAttribute('data-vd-bubble-title') ||\n trigger.getAttribute('data-vd-popover-title');\n const content = trigger.getAttribute('data-vd-bubble') ||\n trigger.getAttribute('data-vd-popover') || '';\n const htmlContent = trigger.getAttribute('data-vd-bubble-html') ||\n trigger.getAttribute('data-vd-popover-html');\n\n if (title) {\n const header = document.createElement('div');\n header.className = 'vd-bubble-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const closeBtn = document.createElement('button');\n closeBtn.className = 'vd-bubble-close';\n closeBtn.setAttribute('aria-label', 'Close');\n closeBtn.innerHTML = '×';\n header.appendChild(titleSpan);\n header.appendChild(closeBtn);\n popover.appendChild(header);\n\n const closeHandler = (e) => { e.stopPropagation(); this.hide(trigger); };\n closeBtn.addEventListener('click', closeHandler);\n cleanup.push(() => closeBtn.removeEventListener('click', closeHandler));\n }\n\n const body = document.createElement('div');\n body.className = 'vd-bubble-body';\n if (htmlContent) {\n if (typeof sanitizeHtml === 'function') {\n body.innerHTML = sanitizeHtml(htmlContent);\n } else {\n body.textContent = htmlContent;\n }\n } else {\n body.textContent = content;\n }\n popover.appendChild(body);\n\n document.body.appendChild(popover);\n\n // ARIA on trigger\n const popId = 'vd-bubble-' + Math.random().toString(36).slice(2, 9);\n popover.id = popId;\n trigger.setAttribute('aria-haspopup', 'dialog');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.setAttribute('aria-controls', popId);\n\n // Toggle on click\n const toggleHandler = (e) => {\n e.stopPropagation();\n if (popover.classList.contains('is-visible')) {\n this.hide(trigger);\n } else {\n this.hideAll();\n this.show(trigger);\n }\n };\n trigger.addEventListener('click', toggleHandler);\n cleanup.push(() => trigger.removeEventListener('click', toggleHandler));\n\n this.instances.set(trigger, { popover, cleanup, placement });\n },\n\n position: function (trigger, popover, placement) {\n const rect = trigger.getBoundingClientRect();\n const popRect = popover.getBoundingClientRect();\n const gap = 10;\n let top, left;\n\n switch (placement) {\n case 'top':\n top = rect.top - popRect.height - gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n break;\n case 'left':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.left - popRect.width - gap + window.scrollX;\n break;\n case 'right':\n top = rect.top + (rect.height - popRect.height) / 2 + window.scrollY;\n left = rect.right + gap + window.scrollX;\n break;\n default: // bottom\n top = rect.bottom + gap + window.scrollY;\n left = rect.left + (rect.width - popRect.width) / 2 + window.scrollX;\n }\n\n // Clamp to viewport\n left = Math.max(8, Math.min(left, window.innerWidth - popRect.width - 8));\n top = Math.max(8, top);\n\n popover.style.top = top + 'px';\n popover.style.left = left + 'px';\n },\n\n show: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n const { popover, placement } = instance;\n\n popover.style.display = 'block';\n popover.classList.add('is-visible');\n trigger.setAttribute('aria-expanded', 'true');\n\n requestAnimationFrame(() => {\n this.position(trigger, popover, placement);\n });\n\n trigger.dispatchEvent(new CustomEvent('bubble:show', { bubbles: true }));\n },\n\n hide: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.popover.classList.remove('is-visible');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.dispatchEvent(new CustomEvent('bubble:hide', { bubbles: true }));\n },\n\n hideAll: function () {\n this.instances.forEach((_, trigger) => this.hide(trigger));\n },\n\n destroy: function (trigger) {\n const instance = this.instances.get(trigger);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n if (instance.popover.parentNode) {\n instance.popover.parentNode.removeChild(instance.popover);\n }\n trigger.removeAttribute('aria-haspopup');\n trigger.removeAttribute('aria-expanded');\n trigger.removeAttribute('aria-controls');\n this.instances.delete(trigger);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, trigger) => this.destroy(trigger));\n this._globalCleanups.forEach(fn => fn());\n this._globalCleanups = [];\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('bubble', Bubble);\n }\n\n window.VanduoBubble = Bubble;\n\n})();\n", "/**\n * Vanduo Framework - Waypoint (Scrollspy) Component\n * Highlights navigation links based on scroll position using IntersectionObserver\n */\n\n(function () {\n 'use strict';\n\n const Waypoint = {\n instances: new Map(),\n\n init: function () {\n const navs = document.querySelectorAll('[data-vd-waypoint-nav], [data-vd-scrollspy-nav]');\n navs.forEach(nav => {\n if (this.instances.has(nav)) return;\n this.initInstance(nav);\n });\n },\n\n initInstance: function (nav) {\n const links = Array.from(nav.querySelectorAll('a[href^=\"#\"]'));\n if (links.length === 0) return;\n\n const cleanup = [];\n const offset = parseInt(nav.getAttribute('data-vd-waypoint-offset') || '80', 10);\n const sections = [];\n\n links.forEach(link => {\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.setAttribute('data-vd-waypoint-section', '');\n sections.push({ id, link, section });\n }\n });\n\n if (sections.length === 0) return;\n\n const activeSections = new Set();\n\n const setActive = (id) => {\n links.forEach(l => l.classList.remove('is-active'));\n const target = links.find(l => l.getAttribute('href') === '#' + id);\n if (target) {\n target.classList.add('is-active');\n nav.dispatchEvent(new CustomEvent('waypoint:change', {\n detail: { activeId: id, link: target }\n }));\n }\n };\n\n const rootMargin = '-' + offset + 'px 0px -40% 0px';\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n activeSections.add(entry.target.id);\n } else {\n activeSections.delete(entry.target.id);\n }\n });\n\n // Pick the topmost visible section\n for (let i = 0; i < sections.length; i++) {\n if (activeSections.has(sections[i].id)) {\n setActive(sections[i].id);\n return;\n }\n }\n }, {\n rootMargin: rootMargin,\n threshold: 0\n });\n\n sections.forEach(s => observer.observe(s.section));\n\n // Smooth scroll on click\n links.forEach(link => {\n const clickHandler = (e) => {\n e.preventDefault();\n const id = link.getAttribute('href').slice(1);\n const section = document.getElementById(id);\n if (section) {\n section.scrollIntoView({ behavior: 'smooth' });\n setActive(id);\n }\n };\n link.addEventListener('click', clickHandler);\n cleanup.push(() => link.removeEventListener('click', clickHandler));\n });\n\n cleanup.push(() => observer.disconnect());\n\n this.instances.set(nav, { observer, cleanup, sections, setActive });\n },\n\n refresh: function (nav) {\n this.destroy(nav);\n this.initInstance(nav);\n },\n\n destroy: function (nav) {\n const instance = this.instances.get(nav);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(nav);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, nav) => this.destroy(nav));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('waypoint', Waypoint);\n }\n\n window.VanduoWaypoint = Waypoint;\n\n})();\n", "/**\n * Vanduo Framework - Ripple (Waves Effect) Component\n * Adds expanding circle animation on click at pointer position\n */\n\n(function () {\n 'use strict';\n\n const Ripple = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-ripple, [data-vd-ripple]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n\n const createWave = (e) => {\n const rect = el.getBoundingClientRect();\n const size = Math.max(rect.width, rect.height);\n const x = (e.clientX || (e.touches && e.touches[0].clientX) || rect.left + rect.width / 2) - rect.left - size / 2;\n const y = (e.clientY || (e.touches && e.touches[0].clientY) || rect.top + rect.height / 2) - rect.top - size / 2;\n\n const wave = document.createElement('span');\n wave.className = 'vd-ripple-wave';\n wave.style.width = size + 'px';\n wave.style.height = size + 'px';\n wave.style.left = x + 'px';\n wave.style.top = y + 'px';\n\n el.appendChild(wave);\n\n wave.addEventListener('animationend', () => {\n if (wave.parentNode) wave.parentNode.removeChild(wave);\n });\n };\n\n el.addEventListener('mousedown', createWave);\n el.addEventListener('touchstart', createWave, { passive: true });\n\n cleanup.push(\n () => el.removeEventListener('mousedown', createWave),\n () => el.removeEventListener('touchstart', createWave)\n );\n\n this.instances.set(el, { cleanup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n // Remove any lingering wave elements\n el.querySelectorAll('.vd-ripple-wave').forEach(w => w.remove());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('ripple', Ripple);\n }\n\n window.VanduoRipple = Ripple;\n\n})();\n", "/**\n * Vanduo Framework - Affix (Sticky) Component\n * Uses IntersectionObserver to toggle .is-stuck within the nearest scrollable parent\n */\n\n(function () {\n 'use strict';\n\n function isScrollable(element) {\n if (!element || element === document.body) return false;\n\n const style = window.getComputedStyle(element);\n const overflowY = style.overflowY;\n const overflowX = style.overflowX;\n const canScrollY = /(auto|scroll|overlay)/.test(overflowY) && element.scrollHeight > element.clientHeight;\n const canScrollX = /(auto|scroll|overlay)/.test(overflowX) && element.scrollWidth > element.clientWidth;\n\n return canScrollY || canScrollX;\n }\n\n function getScrollParent(element) {\n let parent = element.parentElement;\n\n while (parent && parent !== document.body && parent !== document.documentElement) {\n if (isScrollable(parent)) return parent;\n parent = parent.parentElement;\n }\n\n return null;\n }\n\n const Affix = {\n instances: new Map(),\n\n init: function () {\n const elements = document.querySelectorAll('.vd-affix, .vd-sticky, [data-vd-affix]');\n elements.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const parsedOffset = parseInt(el.getAttribute('data-vd-affix-offset') || '0', 10);\n const offset = Number.isNaN(parsedOffset) ? 0 : parsedOffset;\n const scrollParent = getScrollParent(el);\n let isStuck = false;\n\n const sentinel = document.createElement('div');\n sentinel.style.cssText = 'display:block;height:1px;margin-bottom:-1px;visibility:hidden;pointer-events:none;';\n el.parentNode.insertBefore(sentinel, el);\n\n el.style.setProperty('--affix-top-offset', offset + 'px');\n\n function stick() {\n if (isStuck) return;\n isStuck = true;\n el.classList.add('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:stuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n function unstick() {\n if (!isStuck) return;\n isStuck = false;\n el.classList.remove('is-stuck');\n el.dispatchEvent(new CustomEvent('affix:unstuck', {\n bubbles: true,\n detail: {\n offset: offset,\n root: scrollParent || window\n }\n }));\n }\n\n const observer = new IntersectionObserver(function (entries) {\n entries.forEach(entry => {\n if (!entry.isIntersecting) {\n stick();\n } else {\n unstick();\n }\n });\n }, {\n root: scrollParent,\n rootMargin: '-' + offset + 'px 0px 0px 0px',\n threshold: 0\n });\n\n observer.observe(sentinel);\n\n cleanup.push(\n () => observer.disconnect(),\n () => { if (sentinel.parentNode) sentinel.parentNode.removeChild(sentinel); },\n () => {\n el.classList.remove('is-stuck');\n el.style.removeProperty('--affix-top-offset');\n }\n );\n\n this.instances.set(el, { cleanup, observer, sentinel, scrollParent });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n el.classList.remove('is-stuck');\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('affix', Affix);\n }\n\n window.VanduoAffix = Affix;\n\n})();\n", "/**\n * Vanduo Framework - Suggest (Autocomplete) Component\n * Dropdown suggestion list with keyboard navigation, static/async data sources\n */\n\n(function () {\n 'use strict';\n\n /**\n * Escape HTML entities to prevent XSS when inserting into innerHTML\n * @param {string} text\n * @returns {string}\n */\n function _escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n\n const Suggest = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-suggest], [data-vd-autocomplete]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const minChars = parseInt(input.getAttribute('data-vd-suggest-min-chars') || '1', 10);\n const url = input.getAttribute('data-vd-suggest-url') || '';\n const staticData = input.getAttribute('data-vd-suggest') || input.getAttribute('data-vd-autocomplete') || '';\n let items = [];\n\n try { items = JSON.parse(staticData); } catch (_e) {\n items = staticData.split(',').map(s => s.trim()).filter(Boolean);\n }\n\n // Wrap input if not already wrapped\n let wrapper = input.closest('.vd-suggest-wrapper, .vd-autocomplete-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create dropdown list\n const list = document.createElement('ul');\n list.className = 'vd-suggest-list';\n list.setAttribute('role', 'listbox');\n const listId = 'vd-suggest-' + Math.random().toString(36).slice(2, 9);\n list.id = listId;\n wrapper.appendChild(list);\n\n // ARIA\n input.setAttribute('role', 'combobox');\n input.setAttribute('aria-autocomplete', 'list');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('aria-controls', listId);\n input.setAttribute('autocomplete', 'off');\n\n let highlighted = -1;\n let currentItems = [];\n let debounceTimer = null;\n\n const renderItems = (filtered, query) => {\n list.innerHTML = '';\n currentItems = filtered;\n highlighted = -1;\n\n if (filtered.length === 0) {\n const empty = document.createElement('li');\n empty.className = 'vd-suggest-empty';\n empty.textContent = 'No results';\n list.appendChild(empty);\n return;\n }\n\n filtered.forEach((item, i) => {\n const li = document.createElement('li');\n li.className = 'vd-suggest-item';\n li.setAttribute('role', 'option');\n li.id = listId + '-item-' + i;\n\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n if (query) {\n // Escape HTML first to prevent XSS, then highlight matches in the safe string\n const escaped = _escapeHtml(text);\n const re = new RegExp('(' + query.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + ')', 'gi');\n li.innerHTML = escaped.replace(re, '$1');\n } else {\n li.textContent = text;\n }\n\n li.addEventListener('click', () => selectItem(i));\n list.appendChild(li);\n });\n };\n\n const open = () => {\n list.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n list.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n highlighted = -1;\n input.removeAttribute('aria-activedescendant');\n };\n\n const selectItem = (index) => {\n const item = currentItems[index];\n const value = typeof item === 'object' ? (item.value || item.label || String(item)) : String(item);\n input.value = value;\n close();\n input.dispatchEvent(new CustomEvent('suggest:select', {\n detail: { value, item, index },\n bubbles: true\n }));\n };\n\n const highlight = (index) => {\n const listItems = list.querySelectorAll('.vd-suggest-item');\n listItems.forEach(li => li.classList.remove('is-highlighted'));\n if (index >= 0 && index < listItems.length) {\n highlighted = index;\n listItems[index].classList.add('is-highlighted');\n input.setAttribute('aria-activedescendant', listItems[index].id);\n listItems[index].scrollIntoView({ block: 'nearest' });\n }\n };\n\n const doSearch = async (query) => {\n if (query.length < minChars) { close(); return; }\n\n let filtered;\n if (url) {\n try {\n const separator = url.includes('?') ? '&' : '?';\n const res = await window.fetch(url + separator + 'q=' + encodeURIComponent(query));\n filtered = await res.json();\n } catch (_e) {\n filtered = [];\n }\n } else {\n const lower = query.toLowerCase();\n filtered = items.filter(item => {\n const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);\n return text.toLowerCase().includes(lower);\n });\n }\n\n renderItems(filtered, query);\n if (filtered.length > 0) open();\n else open(); // show \"no results\"\n };\n\n const inputHandler = () => {\n clearTimeout(debounceTimer);\n debounceTimer = setTimeout(() => doSearch(input.value), 200);\n };\n\n const keyHandler = (e) => {\n if (!list.classList.contains('is-open')) {\n if (e.key === 'ArrowDown') { doSearch(input.value); e.preventDefault(); }\n return;\n }\n\n const total = currentItems.length;\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n highlight(highlighted < total - 1 ? highlighted + 1 : 0);\n break;\n case 'ArrowUp':\n e.preventDefault();\n highlight(highlighted > 0 ? highlighted - 1 : total - 1);\n break;\n case 'Enter':\n e.preventDefault();\n if (highlighted >= 0) selectItem(highlighted);\n break;\n case 'Escape':\n close();\n break;\n }\n };\n\n const blurHandler = () => {\n setTimeout(close, 200);\n };\n\n input.addEventListener('input', inputHandler);\n input.addEventListener('keydown', keyHandler);\n input.addEventListener('blur', blurHandler);\n input.addEventListener('focus', () => { if (input.value.length >= minChars) doSearch(input.value); });\n\n cleanup.push(\n () => input.removeEventListener('input', inputHandler),\n () => input.removeEventListener('keydown', keyHandler),\n () => input.removeEventListener('blur', blurHandler),\n () => clearTimeout(debounceTimer),\n () => { if (list.parentNode) list.parentNode.removeChild(list); }\n );\n\n this.instances.set(input, { cleanup, list, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('suggest', Suggest);\n }\n\n window.VanduoSuggest = Suggest;\n\n})();\n", "/**\n * Vanduo Framework - Validate (Form Validation) Component\n * Declarative validation via data attributes with real-time and on-submit modes\n */\n\n(function () {\n 'use strict';\n\n const Validate = {\n instances: new Map(),\n\n rules: {\n required: (value) => value.trim().length > 0,\n email: (value) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value),\n url: (value) => { try { new URL(value); return true; } catch (_e) { return false; } },\n number: (value) => !isNaN(parseFloat(value)) && isFinite(value),\n min: (value, param) => value.length >= parseInt(param, 10),\n max: (value, param) => value.length <= parseInt(param, 10),\n minVal: (value, param) => parseFloat(value) >= parseFloat(param),\n maxVal: (value, param) => parseFloat(value) <= parseFloat(param),\n pattern: (value, param) => {\n try {\n // Cap regex length to prevent ReDoS from excessively complex patterns\n if (param.length > 100) return false;\n return new RegExp(param).test(value);\n } catch (_e) { return false; }\n },\n match: (value, param) => {\n try {\n const escaped = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(param) : param;\n const other = document.querySelector('[name=\"' + escaped + '\"]');\n return other ? value === other.value : false;\n } catch (_e) {\n return false;\n }\n }\n },\n\n messages: {\n required: 'This field is required',\n email: 'Please enter a valid email address',\n url: 'Please enter a valid URL',\n number: 'Please enter a valid number',\n min: 'Minimum {0} characters required',\n max: 'Maximum {0} characters allowed',\n minVal: 'Value must be at least {0}',\n maxVal: 'Value must be at most {0}',\n pattern: 'Invalid format',\n match: 'Fields do not match'\n },\n\n init: function () {\n const forms = document.querySelectorAll('[data-vd-validate], .vd-validate');\n forms.forEach(form => {\n if (this.instances.has(form)) return;\n this.initInstance(form);\n });\n },\n\n initInstance: function (form) {\n const cleanup = [];\n const mode = form.getAttribute('data-vd-validate-mode') || 'blur'; // blur | input | submit\n const fields = form.querySelectorAll('[data-vd-rules]');\n\n const validateField = (field) => {\n const rulesStr = field.getAttribute('data-vd-rules') || '';\n const rules = rulesStr.split('|').map(r => r.trim()).filter(Boolean);\n const value = field.value;\n const errors = [];\n\n for (const rule of rules) {\n const [name, ...params] = rule.split(':');\n const param = params.join(':');\n const validator = this.rules[name];\n\n if (validator && !validator(value, param)) {\n const customMsg = field.getAttribute('data-vd-msg-' + name);\n let msg = customMsg || this.messages[name] || 'Invalid';\n if (param) msg = msg.replace('{0}', param);\n errors.push(msg);\n break; // one error at a time\n }\n }\n\n this.setFieldState(field, errors);\n return errors.length === 0;\n };\n\n const validateAll = () => {\n let valid = true;\n fields.forEach(field => {\n if (!validateField(field)) valid = false;\n });\n return valid;\n };\n\n // Per-field listeners\n fields.forEach(field => {\n if (mode === 'input' || mode === 'blur') {\n const eventType = mode === 'input' ? 'input' : 'blur';\n const handler = () => validateField(field);\n field.addEventListener(eventType, handler);\n cleanup.push(() => field.removeEventListener(eventType, handler));\n\n if (mode === 'blur') {\n const inputClear = () => {\n if (field.classList.contains('is-invalid') || field.classList.contains('is-valid')) {\n validateField(field);\n }\n };\n field.addEventListener('input', inputClear);\n cleanup.push(() => field.removeEventListener('input', inputClear));\n }\n }\n });\n\n // Form submit\n const submitHandler = (e) => {\n const valid = validateAll();\n if (!valid) {\n e.preventDefault();\n e.stopPropagation();\n // Focus first invalid field\n const firstInvalid = form.querySelector('.is-invalid');\n if (firstInvalid) firstInvalid.focus();\n }\n form.dispatchEvent(new CustomEvent('validate:submit', {\n detail: { valid },\n bubbles: true\n }));\n };\n\n form.addEventListener('submit', submitHandler);\n cleanup.push(() => form.removeEventListener('submit', submitHandler));\n\n this.instances.set(form, { cleanup, validateAll, validateField });\n },\n\n setFieldState: function (field, errors) {\n const wrapper = field.closest('.vd-form-group') || field.parentElement;\n let errorEl = wrapper.querySelector('.vd-validate-error');\n\n field.classList.remove('is-valid', 'is-invalid');\n\n if (errors.length > 0) {\n field.classList.add('is-invalid');\n field.setAttribute('aria-invalid', 'true');\n if (!errorEl) {\n errorEl = document.createElement('div');\n errorEl.className = 'vd-validate-error';\n errorEl.id = 'vd-err-' + Math.random().toString(36).slice(2, 9);\n errorEl.setAttribute('role', 'alert');\n wrapper.appendChild(errorEl);\n }\n errorEl.textContent = errors[0];\n errorEl.style.display = '';\n field.setAttribute('aria-describedby', errorEl.id);\n } else if (field.value.trim()) {\n field.classList.add('is-valid');\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n } else {\n field.removeAttribute('aria-invalid');\n if (errorEl) errorEl.style.display = 'none';\n }\n },\n\n validateForm: function (form) {\n const instance = this.instances.get(form);\n return instance ? instance.validateAll() : false;\n },\n\n addRule: function (name, validator, message) {\n this.rules[name] = validator;\n if (message) this.messages[name] = message;\n },\n\n destroy: function (form) {\n const instance = this.instances.get(form);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(form);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, form) => this.destroy(form));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('validate', Validate);\n }\n\n window.VanduoValidate = Validate;\n\n})();\n", "/**\n * Vanduo Framework - Datepicker Component\n * Calendar popup attached to input field with month/year navigation\n */\n\n(function () {\n 'use strict';\n\n const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\n const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];\n\n const Datepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-datepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const format = input.getAttribute('data-vd-datepicker-format') || 'yyyy-mm-dd';\n const minStr = input.getAttribute('data-vd-datepicker-min');\n const maxStr = input.getAttribute('data-vd-datepicker-max');\n const minDate = minStr ? new Date(minStr) : null;\n const maxDate = maxStr ? new Date(maxStr) : null;\n\n const today = new Date();\n let viewYear = today.getFullYear();\n let viewMonth = today.getMonth();\n let selectedDate = null;\n let viewMode = 'days'; // days | months | years\n\n // Parse existing value\n if (input.value) {\n const parsed = new Date(input.value);\n if (!isNaN(parsed.getTime())) {\n selectedDate = parsed;\n viewYear = parsed.getFullYear();\n viewMonth = parsed.getMonth();\n }\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-datepicker-popup';\n popup.setAttribute('role', 'dialog');\n popup.setAttribute('aria-label', 'Choose date');\n\n const wrapper = document.createElement('div');\n wrapper.className = 'vd-suggest-wrapper';\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n wrapper.appendChild(popup);\n\n const formatDate = (d) => {\n const yyyy = d.getFullYear();\n const mm = String(d.getMonth() + 1).padStart(2, '0');\n const dd = String(d.getDate()).padStart(2, '0');\n return format.replace('yyyy', yyyy).replace('mm', mm).replace('dd', dd);\n };\n\n const isDisabled = (d) => {\n if (minDate && d < minDate) return true;\n if (maxDate && d > maxDate) return true;\n return false;\n };\n\n const isSameDay = (a, b) => a && b &&\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate();\n\n const render = () => {\n popup.innerHTML = '';\n\n // Header\n const header = document.createElement('div');\n header.className = 'vd-datepicker-header';\n\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-datepicker-prev';\n prevBtn.innerHTML = '‹';\n prevBtn.setAttribute('aria-label', 'Previous');\n\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-datepicker-next';\n nextBtn.innerHTML = '›';\n nextBtn.setAttribute('aria-label', 'Next');\n\n const title = document.createElement('span');\n title.className = 'vd-datepicker-title';\n\n if (viewMode === 'days') {\n title.textContent = MONTHS[viewMonth] + ' ' + viewYear;\n title.addEventListener('click', () => { viewMode = 'months'; render(); });\n prevBtn.addEventListener('click', () => { viewMonth--; if (viewMonth < 0) { viewMonth = 11; viewYear--; } render(); });\n nextBtn.addEventListener('click', () => { viewMonth++; if (viewMonth > 11) { viewMonth = 0; viewYear++; } render(); });\n } else if (viewMode === 'months') {\n title.textContent = String(viewYear);\n title.addEventListener('click', () => { viewMode = 'years'; render(); });\n prevBtn.addEventListener('click', () => { viewYear--; render(); });\n nextBtn.addEventListener('click', () => { viewYear++; render(); });\n } else {\n const decadeStart = Math.floor(viewYear / 10) * 10;\n title.textContent = decadeStart + ' - ' + (decadeStart + 9);\n prevBtn.addEventListener('click', () => { viewYear -= 10; render(); });\n nextBtn.addEventListener('click', () => { viewYear += 10; render(); });\n }\n\n header.appendChild(prevBtn);\n header.appendChild(title);\n header.appendChild(nextBtn);\n popup.appendChild(header);\n\n if (viewMode === 'days') {\n // Weekday headers\n const weekdays = document.createElement('div');\n weekdays.className = 'vd-datepicker-weekdays';\n DAYS.forEach(d => {\n const span = document.createElement('span');\n span.textContent = d;\n weekdays.appendChild(span);\n });\n popup.appendChild(weekdays);\n\n // Days grid\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-days';\n\n const firstDay = new Date(viewYear, viewMonth, 1).getDay();\n const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();\n const daysInPrev = new Date(viewYear, viewMonth, 0).getDate();\n\n // Previous month padding\n for (let i = firstDay - 1; i >= 0; i--) {\n const btn = createDayBtn(daysInPrev - i, true);\n grid.appendChild(btn);\n }\n\n // Current month\n for (let d = 1; d <= daysInMonth; d++) {\n const date = new Date(viewYear, viewMonth, d);\n const btn = createDayBtn(d, false, date);\n grid.appendChild(btn);\n }\n\n // Next month padding\n const totalCells = firstDay + daysInMonth;\n const remaining = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7);\n for (let i = 1; i <= remaining; i++) {\n const btn = createDayBtn(i, true);\n grid.appendChild(btn);\n }\n\n popup.appendChild(grid);\n } else if (viewMode === 'months') {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-months';\n MONTHS.forEach((name, i) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-month-btn';\n btn.textContent = name.slice(0, 3);\n if (selectedDate && selectedDate.getFullYear() === viewYear && selectedDate.getMonth() === i) {\n btn.classList.add('is-selected');\n }\n btn.addEventListener('click', () => { viewMonth = i; viewMode = 'days'; render(); });\n grid.appendChild(btn);\n });\n popup.appendChild(grid);\n } else {\n const grid = document.createElement('div');\n grid.className = 'vd-datepicker-years';\n const decadeStart = Math.floor(viewYear / 10) * 10;\n for (let y = decadeStart - 1; y <= decadeStart + 10; y++) {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-year-btn';\n btn.textContent = y;\n if (selectedDate && selectedDate.getFullYear() === y) btn.classList.add('is-selected');\n if (y < decadeStart || y > decadeStart + 9) btn.style.opacity = '0.4';\n btn.addEventListener('click', () => { viewYear = y; viewMode = 'months'; render(); });\n grid.appendChild(btn);\n }\n popup.appendChild(grid);\n }\n };\n\n const createDayBtn = (day, outside, date) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'vd-datepicker-day';\n btn.textContent = day;\n\n if (outside) {\n btn.classList.add('is-outside');\n btn.tabIndex = -1;\n return btn;\n }\n\n if (date && isSameDay(date, today)) btn.classList.add('is-today');\n if (date && isSameDay(date, selectedDate)) btn.classList.add('is-selected');\n if (date && isDisabled(date)) {\n btn.classList.add('is-disabled');\n return btn;\n }\n\n if (date) {\n btn.addEventListener('click', () => {\n selectedDate = date;\n viewYear = date.getFullYear();\n viewMonth = date.getMonth();\n input.value = formatDate(date);\n close();\n input.dispatchEvent(new CustomEvent('datepicker:select', {\n detail: { date, formatted: input.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n }\n\n return btn;\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n viewMode = 'days';\n };\n\n // Events\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'dialog');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close, popup });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('datepicker', Datepicker);\n }\n\n window.VanduoDatepicker = Datepicker;\n\n})();\n", "/**\n * Vanduo Framework - Timepicker Component\n * Dropdown time selection with 12h/24h format and configurable step intervals\n */\n\n(function () {\n 'use strict';\n\n const Timepicker = {\n instances: new Map(),\n\n init: function () {\n const inputs = document.querySelectorAll('[data-vd-timepicker]');\n inputs.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (input) {\n const cleanup = [];\n const is24h = input.getAttribute('data-vd-timepicker-format') === '24h';\n const step = parseInt(input.getAttribute('data-vd-timepicker-step') || '30', 10);\n\n // Create wrapper\n let wrapper = input.closest('.vd-suggest-wrapper');\n if (!wrapper) {\n wrapper = document.createElement('div');\n wrapper.style.position = 'relative';\n wrapper.style.display = 'inline-block';\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n }\n\n // Create popup\n const popup = document.createElement('div');\n popup.className = 'vd-timepicker-popup';\n popup.setAttribute('role', 'listbox');\n wrapper.appendChild(popup);\n\n // Generate time slots\n const times = [];\n for (let h = 0; h < 24; h++) {\n for (let m = 0; m < 60; m += step) {\n const hh24 = String(h).padStart(2, '0');\n const mm = String(m).padStart(2, '0');\n\n if (is24h) {\n times.push({ display: hh24 + ':' + mm, value: hh24 + ':' + mm });\n } else {\n const period = h < 12 ? 'AM' : 'PM';\n const h12 = h === 0 ? 12 : (h > 12 ? h - 12 : h);\n const display = h12 + ':' + mm + ' ' + period;\n times.push({ display, value: hh24 + ':' + mm });\n }\n }\n }\n\n const render = () => {\n popup.innerHTML = '';\n times.forEach(t => {\n const item = document.createElement('div');\n item.className = 'vd-timepicker-item';\n item.setAttribute('role', 'option');\n item.textContent = t.display;\n\n if (input.value === t.value || input.value === t.display) {\n item.classList.add('is-selected');\n }\n\n item.addEventListener('click', () => {\n input.value = t.display;\n popup.querySelectorAll('.vd-timepicker-item').forEach(i => i.classList.remove('is-selected'));\n item.classList.add('is-selected');\n close();\n input.dispatchEvent(new CustomEvent('timepicker:select', {\n detail: { display: t.display, value: t.value },\n bubbles: true\n }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n });\n\n popup.appendChild(item);\n });\n };\n\n const open = () => {\n render();\n popup.classList.add('is-open');\n input.setAttribute('aria-expanded', 'true');\n // Scroll to selected\n const selected = popup.querySelector('.is-selected');\n if (selected) selected.scrollIntoView({ block: 'center' });\n };\n\n const close = () => {\n popup.classList.remove('is-open');\n input.setAttribute('aria-expanded', 'false');\n };\n\n const focusHandler = () => open();\n const outsideHandler = (e) => {\n if (!wrapper.contains(e.target)) close();\n };\n const escHandler = (e) => { if (e.key === 'Escape') close(); };\n\n input.addEventListener('focus', focusHandler);\n document.addEventListener('click', outsideHandler, true);\n document.addEventListener('keydown', escHandler);\n input.setAttribute('aria-haspopup', 'listbox');\n input.setAttribute('aria-expanded', 'false');\n input.setAttribute('autocomplete', 'off');\n input.readOnly = true;\n\n cleanup.push(\n () => input.removeEventListener('focus', focusHandler),\n () => document.removeEventListener('click', outsideHandler, true),\n () => document.removeEventListener('keydown', escHandler)\n );\n\n this.instances.set(input, { cleanup, open, close });\n },\n\n destroy: function (el) {\n const instance = this.instances.get(el);\n if (!instance) return;\n instance.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('timepicker', Timepicker);\n }\n\n window.VanduoTimepicker = Timepicker;\n\n})();\n", "/**\n * Vanduo Framework - Stepper Component\n * Multi-step progress indicator with state management\n */\n\n(function () {\n 'use strict';\n\n const Stepper = {\n instances: new Map(),\n\n init: function () {\n const steppers = document.querySelectorAll('.vd-stepper');\n steppers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const items = Array.from(el.querySelectorAll('.vd-stepper-item'));\n const isClickable = el.classList.contains('vd-stepper-clickable');\n let currentIndex = items.findIndex(i => i.classList.contains('is-active'));\n if (currentIndex === -1) currentIndex = 0;\n\n const setStep = (index) => {\n if (index < 0 || index >= items.length) return;\n const prev = currentIndex;\n currentIndex = index;\n\n items.forEach((item, i) => {\n item.classList.remove('is-active', 'is-completed');\n if (i < index) item.classList.add('is-completed');\n else if (i === index) item.classList.add('is-active');\n });\n\n el.dispatchEvent(new CustomEvent('stepper:change', {\n detail: { current: index, previous: prev, total: items.length },\n bubbles: true\n }));\n };\n\n if (isClickable) {\n items.forEach((item, i) => {\n const handler = () => setStep(i);\n item.addEventListener('click', handler);\n cleanup.push(() => item.removeEventListener('click', handler));\n });\n }\n\n // Initialize current state\n setStep(currentIndex);\n\n this.instances.set(el, {\n cleanup,\n setStep,\n next: () => setStep(currentIndex + 1),\n prev: () => setStep(currentIndex - 1),\n getCurrent: () => currentIndex\n });\n },\n\n setStep: function (el, index) {\n const inst = this.instances.get(el);\n if (inst) inst.setStep(index);\n },\n\n next: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.next();\n },\n\n prev: function (el) {\n const inst = this.instances.get(el);\n if (inst) inst.prev();\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('stepper', Stepper);\n }\n\n window.VanduoStepper = Stepper;\n\n})();\n", "/**\n * Vanduo Framework - Rating Component\n * Star-based rating input with hover preview and read-only mode\n */\n\n(function () {\n 'use strict';\n\n const Rating = {\n instances: new Map(),\n\n init: function () {\n const ratings = document.querySelectorAll('[data-vd-rating]');\n ratings.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const max = parseInt(el.getAttribute('data-vd-rating-max') || '5', 10);\n const initialValue = parseFloat(el.getAttribute('data-vd-rating-value') || '0');\n const readonly = el.classList.contains('vd-rating-readonly') || el.hasAttribute('data-vd-rating-readonly');\n let currentValue = initialValue;\n\n el.classList.add('vd-rating');\n el.setAttribute('role', 'radiogroup');\n el.setAttribute('aria-label', el.getAttribute('aria-label') || 'Rating');\n\n // Clear existing stars\n el.innerHTML = '';\n\n // Create stars\n const stars = [];\n for (let i = 1; i <= max; i++) {\n const star = document.createElement('button');\n star.type = 'button';\n star.className = 'vd-rating-star';\n star.setAttribute('role', 'radio');\n star.setAttribute('aria-label', i + ' star' + (i > 1 ? 's' : ''));\n star.setAttribute('aria-checked', i <= currentValue ? 'true' : 'false');\n if (readonly) star.tabIndex = -1;\n stars.push(star);\n el.appendChild(star);\n }\n\n // Value display\n const valueDisplay = document.createElement('span');\n valueDisplay.className = 'vd-rating-value';\n valueDisplay.textContent = currentValue > 0 ? currentValue.toString() : '';\n el.appendChild(valueDisplay);\n\n const updateStars = (value) => {\n stars.forEach((star, i) => {\n star.classList.remove('is-active', 'is-half');\n const starNum = i + 1;\n if (starNum <= Math.floor(value)) {\n star.classList.add('is-active');\n } else if (starNum - 0.5 <= value) {\n star.classList.add('is-half');\n }\n star.setAttribute('aria-checked', starNum <= value ? 'true' : 'false');\n });\n valueDisplay.textContent = value > 0 ? value.toString() : '';\n };\n\n updateStars(currentValue);\n\n if (!readonly) {\n stars.forEach((star, i) => {\n const enterHandler = () => {\n stars.forEach((s, j) => {\n s.classList.toggle('is-hovered', j <= i);\n });\n };\n const leaveHandler = () => {\n stars.forEach(s => s.classList.remove('is-hovered'));\n };\n const clickHandler = () => {\n currentValue = i + 1;\n el.setAttribute('data-vd-rating-value', currentValue);\n updateStars(currentValue);\n el.dispatchEvent(new CustomEvent('rating:change', {\n detail: { value: currentValue, max },\n bubbles: true\n }));\n };\n\n star.addEventListener('mouseenter', enterHandler);\n star.addEventListener('mouseleave', leaveHandler);\n star.addEventListener('click', clickHandler);\n\n cleanup.push(\n () => star.removeEventListener('mouseenter', enterHandler),\n () => star.removeEventListener('mouseleave', leaveHandler),\n () => star.removeEventListener('click', clickHandler)\n );\n });\n\n // Keyboard\n const keyHandler = (e) => {\n if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n e.preventDefault();\n if (currentValue < max) {\n currentValue++;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n e.preventDefault();\n if (currentValue > 1) {\n currentValue--;\n updateStars(currentValue);\n stars[currentValue - 1].focus();\n el.dispatchEvent(new CustomEvent('rating:change', { detail: { value: currentValue, max }, bubbles: true }));\n }\n }\n };\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n }\n\n this.instances.set(el, {\n cleanup,\n getValue: () => currentValue,\n setValue: (v) => { currentValue = v; updateStars(v); }\n });\n },\n\n getValue: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getValue() : 0;\n },\n\n setValue: function (el, value) {\n const inst = this.instances.get(el);\n if (inst) inst.setValue(value);\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('rating', Rating);\n }\n\n window.VanduoRating = Rating;\n\n})();\n", "/**\n * Vanduo Framework - Transfer (Dual-list) Component\n * Source-to-target list transfer with search, select-all, and move actions\n */\n\n(function () {\n 'use strict';\n\n const Transfer = {\n instances: new Map(),\n\n init: function () {\n const transfers = document.querySelectorAll('[data-vd-transfer]');\n transfers.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n el.classList.add('vd-transfer');\n\n let sourceData, targetData;\n try {\n const raw = JSON.parse(el.getAttribute('data-vd-transfer') || '[]');\n sourceData = raw.map((item, i) => ({\n id: item.id || 'item-' + i,\n label: item.label || item.text || String(item),\n selected: false\n }));\n } catch (_e) {\n sourceData = [];\n }\n targetData = [];\n\n const sourceSelected = new Set();\n const targetSelected = new Set();\n\n const render = () => {\n el.innerHTML = '';\n\n // Source panel\n const sourcePanel = createPanel('Source', sourceData, sourceSelected, 'source');\n // Actions\n const actions = document.createElement('div');\n actions.className = 'vd-transfer-actions';\n\n const moveRightBtn = document.createElement('button');\n moveRightBtn.type = 'button';\n moveRightBtn.className = 'vd-transfer-btn';\n moveRightBtn.innerHTML = '›';\n moveRightBtn.setAttribute('aria-label', 'Move to target');\n moveRightBtn.disabled = sourceSelected.size === 0;\n moveRightBtn.addEventListener('click', () => moveRight());\n\n const moveLeftBtn = document.createElement('button');\n moveLeftBtn.type = 'button';\n moveLeftBtn.className = 'vd-transfer-btn';\n moveLeftBtn.innerHTML = '‹';\n moveLeftBtn.setAttribute('aria-label', 'Move to source');\n moveLeftBtn.disabled = targetSelected.size === 0;\n moveLeftBtn.addEventListener('click', () => moveLeft());\n\n actions.appendChild(moveRightBtn);\n actions.appendChild(moveLeftBtn);\n\n // Target panel\n const targetPanel = createPanel('Target', targetData, targetSelected, 'target');\n\n el.appendChild(sourcePanel);\n el.appendChild(actions);\n el.appendChild(targetPanel);\n };\n\n const createPanel = (title, data, selected, _side) => {\n const panel = document.createElement('div');\n panel.className = 'vd-transfer-panel';\n\n const header = document.createElement('div');\n header.className = 'vd-transfer-header';\n const titleSpan = document.createElement('span');\n titleSpan.textContent = title;\n const count = document.createElement('span');\n count.className = 'vd-transfer-count';\n count.textContent = selected.size + '/' + data.length;\n header.appendChild(titleSpan);\n header.appendChild(count);\n panel.appendChild(header);\n\n // Search\n const searchDiv = document.createElement('div');\n searchDiv.className = 'vd-transfer-search';\n const searchInput = document.createElement('input');\n searchInput.type = 'text';\n searchInput.placeholder = 'Search...';\n searchInput.setAttribute('aria-label', 'Search ' + title.toLowerCase());\n searchDiv.appendChild(searchInput);\n panel.appendChild(searchDiv);\n\n // List\n const list = document.createElement('ul');\n list.className = 'vd-transfer-list';\n list.setAttribute('role', 'listbox');\n\n const renderList = (filter) => {\n list.innerHTML = '';\n const filtered = filter ? data.filter(d => {\n const label = (d.label || d.text || String(d)).toLowerCase();\n return label.includes(filter.toLowerCase());\n }) : data;\n filtered.forEach(item => {\n const li = document.createElement('li');\n li.className = 'vd-transfer-item';\n li.setAttribute('role', 'option');\n if (selected.has(item.id)) li.classList.add('is-selected');\n\n const checkbox = document.createElement('input');\n checkbox.type = 'checkbox';\n checkbox.checked = selected.has(item.id);\n checkbox.setAttribute('aria-label', item.label);\n\n const label = document.createElement('span');\n label.textContent = item.label;\n\n li.addEventListener('click', () => {\n if (selected.has(item.id)) selected.delete(item.id);\n else selected.add(item.id);\n render();\n });\n\n li.appendChild(checkbox);\n li.appendChild(label);\n list.appendChild(li);\n });\n };\n\n searchInput.addEventListener('input', () => renderList(searchInput.value));\n renderList('');\n\n panel.appendChild(list);\n return panel;\n };\n\n const moveRight = () => {\n const toMove = sourceData.filter(d => sourceSelected.has(d.id));\n sourceData = sourceData.filter(d => !sourceSelected.has(d.id));\n targetData = targetData.concat(toMove);\n sourceSelected.clear();\n render();\n fireChange();\n };\n\n const moveLeft = () => {\n const toMove = targetData.filter(d => targetSelected.has(d.id));\n targetData = targetData.filter(d => !targetSelected.has(d.id));\n sourceData = sourceData.concat(toMove);\n targetSelected.clear();\n render();\n fireChange();\n };\n\n const fireChange = () => {\n el.dispatchEvent(new CustomEvent('transfer:change', {\n detail: {\n source: sourceData.map(d => d.id),\n target: targetData.map(d => d.id)\n },\n bubbles: true\n }));\n };\n\n render();\n\n this.instances.set(el, {\n cleanup,\n getTarget: () => targetData.map(d => d.id),\n getSource: () => sourceData.map(d => d.id)\n });\n },\n\n getSelected: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getTarget() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('transfer', Transfer);\n }\n\n window.VanduoTransfer = Transfer;\n\n})();\n", "/**\n * Vanduo Framework - Tree View Component\n * Hierarchical collapsible tree with checkbox selection and keyboard navigation\n */\n\n(function () {\n 'use strict';\n\n const Tree = {\n instances: new Map(),\n\n init: function () {\n const trees = document.querySelectorAll('[data-vd-tree]');\n trees.forEach(el => {\n if (this.instances.has(el)) return;\n this.initInstance(el);\n });\n },\n\n initInstance: function (el) {\n const cleanup = [];\n const cascade = el.getAttribute('data-vd-tree-cascade') !== 'false';\n\n let data;\n try { data = JSON.parse(el.getAttribute('data-vd-tree') || '[]'); } catch (_e) { data = []; }\n\n el.classList.add('vd-tree');\n el.setAttribute('role', 'tree');\n\n const render = (items, parent) => {\n parent.innerHTML = '';\n items.forEach(item => {\n const node = document.createElement('li');\n node.className = 'vd-tree-node';\n node.setAttribute('role', 'treeitem');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n if (item.open) node.classList.add('is-open');\n\n const content = document.createElement('div');\n content.className = 'vd-tree-node-content';\n\n // Toggle\n if (item.children && item.children.length > 0) {\n const toggle = document.createElement('button');\n toggle.type = 'button';\n toggle.className = 'vd-tree-toggle';\n toggle.setAttribute('aria-label', 'Toggle');\n toggle.addEventListener('click', (e) => {\n e.stopPropagation();\n item.open = !item.open;\n node.classList.toggle('is-open');\n node.setAttribute('aria-expanded', item.open ? 'true' : 'false');\n });\n content.appendChild(toggle);\n } else {\n const ph = document.createElement('span');\n ph.className = 'vd-tree-toggle-placeholder';\n content.appendChild(ph);\n }\n\n // Checkbox\n if (el.hasAttribute('data-vd-tree-checkbox')) {\n const cb = document.createElement('input');\n cb.type = 'checkbox';\n cb.className = 'vd-tree-checkbox';\n cb.checked = !!item.checked;\n cb.setAttribute('aria-label', item.label);\n cb.addEventListener('change', (e) => {\n e.stopPropagation();\n item.checked = cb.checked;\n if (cascade && item.children) {\n setChildChecked(item.children, cb.checked);\n render(data, el);\n }\n el.dispatchEvent(new CustomEvent('tree:check', {\n detail: { id: item.id, checked: cb.checked, label: item.label },\n bubbles: true\n }));\n });\n content.appendChild(cb);\n }\n\n // Icon\n if (item.icon) {\n const icon = document.createElement('span');\n icon.className = 'vd-tree-icon ' + item.icon;\n content.appendChild(icon);\n }\n\n // Label\n const label = document.createElement('span');\n label.className = 'vd-tree-label';\n label.textContent = item.label || '';\n content.appendChild(label);\n\n node.appendChild(content);\n\n // Children\n if (item.children && item.children.length > 0) {\n const childList = document.createElement('ul');\n childList.className = 'vd-tree-children';\n childList.setAttribute('role', 'group');\n render(item.children, childList);\n node.appendChild(childList);\n }\n\n parent.appendChild(node);\n });\n };\n\n const setChildChecked = (items, checked) => {\n items.forEach(item => {\n item.checked = checked;\n if (item.children) setChildChecked(item.children, checked);\n });\n };\n\n // Keyboard\n const keyHandler = (e) => {\n const focused = document.activeElement;\n if (!el.contains(focused)) return;\n\n const nodes = Array.from(el.querySelectorAll('.vd-tree-node-content'));\n const idx = nodes.indexOf(focused.closest('.vd-tree-node-content'));\n if (idx === -1) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (idx < nodes.length - 1) {\n const next = nodes[idx + 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (next) next.focus();\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n if (idx > 0) {\n const prev = nodes[idx - 1].querySelector('.vd-tree-toggle, .vd-tree-label');\n if (prev) prev.focus();\n }\n break;\n }\n };\n\n el.addEventListener('keydown', keyHandler);\n cleanup.push(() => el.removeEventListener('keydown', keyHandler));\n\n render(data, el);\n\n this.instances.set(el, {\n cleanup,\n getData: () => data,\n getChecked: () => {\n const checked = [];\n const collect = (items) => {\n items.forEach(i => {\n if (i.checked) checked.push(i.id || i.label);\n if (i.children) collect(i.children);\n });\n };\n collect(data);\n return checked;\n }\n });\n },\n\n getChecked: function (el) {\n const inst = this.instances.get(el);\n return inst ? inst.getChecked() : [];\n },\n\n destroy: function (el) {\n const inst = this.instances.get(el);\n if (!inst) return;\n inst.cleanup.forEach(fn => fn());\n el.innerHTML = '';\n this.instances.delete(el);\n },\n\n destroyAll: function () {\n this.instances.forEach((_, el) => this.destroy(el));\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('tree', Tree);\n }\n\n window.VanduoTree = Tree;\n\n})();\n", "/**\n * Vanduo Framework - Spotlight (Feature Discovery) Component\n * Guided tour with overlay highlight and step-through tooltip\n */\n\n(function () {\n 'use strict';\n\n const Spotlight = {\n _active: false,\n _steps: [],\n _currentStep: 0,\n _elements: {},\n _cleanup: [],\n _boundTriggers: new WeakMap(),\n _triggerElement: null,\n\n init: function () {\n const triggers = document.querySelectorAll('[data-vd-spotlight]');\n\n triggers.forEach(trigger => {\n if (this._boundTriggers.has(trigger)) return;\n\n const clickHandler = (event) => {\n event.preventDefault();\n\n const steps = this._parseSteps(trigger.getAttribute('data-vd-spotlight'));\n if (steps.length === 0) return;\n\n this.start(steps, { trigger });\n };\n\n trigger.addEventListener('click', clickHandler);\n this._boundTriggers.set(trigger, clickHandler);\n });\n },\n\n _parseSteps: function (raw) {\n if (typeof raw !== 'string' || raw.trim() === '') return [];\n\n try {\n const parsed = JSON.parse(raw);\n return this._normalizeSteps(parsed);\n } catch (error) {\n console.error('VanduoSpotlight: invalid data-vd-spotlight payload.', error);\n return [];\n }\n },\n\n _normalizeStep: function (step) {\n if (!step || typeof step !== 'object') return null;\n\n const target = step.target;\n const hasSelectorTarget = typeof target === 'string' && target.trim() !== '';\n const hasElementTarget = typeof Element !== 'undefined' && target instanceof Element;\n\n if (!hasSelectorTarget && !hasElementTarget) return null;\n\n const title = typeof step.title === 'string' ? step.title : '';\n const description = typeof step.description === 'string'\n ? step.description\n : (typeof step.content === 'string' ? step.content : '');\n\n return {\n target,\n title,\n description\n };\n },\n\n _normalizeSteps: function (steps) {\n if (!Array.isArray(steps)) return [];\n\n return steps\n .map(step => this._normalizeStep(step))\n .filter(Boolean);\n },\n\n start: function (steps, options) {\n if (this._active) this.stop();\n\n const normalizedSteps = this._normalizeSteps(steps);\n if (normalizedSteps.length === 0) return;\n\n const startOptions = options || {};\n\n this._steps = normalizedSteps;\n this._currentStep = 0;\n this._active = true;\n this._triggerElement = startOptions.trigger || (document.activeElement instanceof HTMLElement ? document.activeElement : null);\n\n // Create overlay\n const overlay = document.createElement('div');\n overlay.className = 'vd-spotlight-overlay';\n overlay.setAttribute('aria-hidden', 'true');\n document.body.appendChild(overlay);\n\n // Create tooltip\n const tooltip = document.createElement('div');\n tooltip.className = 'vd-spotlight-tooltip';\n tooltip.setAttribute('role', 'dialog');\n tooltip.setAttribute('aria-modal', 'true');\n tooltip.tabIndex = -1;\n document.body.appendChild(tooltip);\n\n this._elements = { overlay, tooltip };\n\n // ESC to close\n const escHandler = (e) => { if (e.key === 'Escape') this.stop(); };\n document.addEventListener('keydown', escHandler);\n this._cleanup.push(() => document.removeEventListener('keydown', escHandler));\n\n // Overlay click to close\n overlay.addEventListener('click', () => this.stop());\n\n this._showStep(this._currentStep);\n },\n\n _showStep: function (index) {\n const step = this._steps[index];\n if (!step) return;\n\n const target = typeof step.target === 'string' ? document.querySelector(step.target) : step.target;\n const { tooltip } = this._elements;\n\n // Remove previous highlight\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n // Highlight target\n if (target) {\n target.classList.add('vd-spotlight-target');\n target.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n\n // Build tooltip content\n const total = this._steps.length;\n tooltip.innerHTML = '';\n tooltip.removeAttribute('aria-labelledby');\n tooltip.removeAttribute('aria-describedby');\n\n if (step.title) {\n const title = document.createElement('h4');\n title.className = 'vd-spotlight-title';\n title.id = 'vd-spotlight-title-' + index + '-' + Date.now();\n title.textContent = step.title;\n tooltip.appendChild(title);\n tooltip.setAttribute('aria-labelledby', title.id);\n }\n\n if (step.description) {\n const desc = document.createElement('p');\n desc.className = 'vd-spotlight-description';\n desc.id = 'vd-spotlight-description-' + index + '-' + Date.now();\n desc.textContent = step.description;\n tooltip.appendChild(desc);\n tooltip.setAttribute('aria-describedby', desc.id);\n }\n\n // Footer\n const footer = document.createElement('div');\n footer.className = 'vd-spotlight-footer';\n footer.setAttribute('aria-label', 'Step ' + (index + 1) + ' of ' + total);\n\n const counter = document.createElement('span');\n counter.className = 'vd-spotlight-counter';\n counter.textContent = (index + 1) + ' / ' + total;\n\n const actions = document.createElement('div');\n actions.className = 'vd-spotlight-actions';\n\n if (index > 0) {\n const prevBtn = document.createElement('button');\n prevBtn.type = 'button';\n prevBtn.className = 'vd-spotlight-btn';\n prevBtn.textContent = 'Back';\n prevBtn.addEventListener('click', () => this.prev());\n actions.appendChild(prevBtn);\n }\n\n const skipBtn = document.createElement('button');\n skipBtn.type = 'button';\n skipBtn.className = 'vd-spotlight-btn';\n skipBtn.textContent = 'Skip';\n skipBtn.addEventListener('click', () => this.stop());\n actions.appendChild(skipBtn);\n\n if (index < total - 1) {\n const nextBtn = document.createElement('button');\n nextBtn.type = 'button';\n nextBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n nextBtn.textContent = 'Next';\n nextBtn.addEventListener('click', () => this.next());\n actions.appendChild(nextBtn);\n } else {\n const doneBtn = document.createElement('button');\n doneBtn.type = 'button';\n doneBtn.className = 'vd-spotlight-btn vd-spotlight-btn-primary';\n doneBtn.textContent = 'Done';\n doneBtn.addEventListener('click', () => this.stop());\n actions.appendChild(doneBtn);\n }\n\n footer.appendChild(counter);\n footer.appendChild(actions);\n tooltip.appendChild(footer);\n\n // Position tooltip near target\n if (target) {\n requestAnimationFrame(() => {\n const rect = target.getBoundingClientRect();\n const tRect = tooltip.getBoundingClientRect();\n let top = rect.bottom + 12 + window.scrollY;\n let left = rect.left + (rect.width - tRect.width) / 2 + window.scrollX;\n\n // Keep in viewport\n left = Math.max(8, Math.min(left, window.innerWidth - tRect.width - 8));\n if (top + tRect.height > window.innerHeight + window.scrollY) {\n top = rect.top - tRect.height - 12 + window.scrollY;\n }\n\n tooltip.style.top = top + 'px';\n tooltip.style.left = left + 'px';\n });\n }\n\n document.dispatchEvent(new CustomEvent('spotlight:step', {\n detail: { index, step: index, total, data: step }\n }));\n },\n\n next: function () {\n if (this._currentStep < this._steps.length - 1) {\n this._currentStep++;\n this._showStep(this._currentStep);\n }\n },\n\n prev: function () {\n if (this._currentStep > 0) {\n this._currentStep--;\n this._showStep(this._currentStep);\n }\n },\n\n stop: function () {\n if (!this._active) return;\n\n const total = this._steps.length;\n const detail = {\n completedSteps: total === 0 ? 0 : Math.min(this._currentStep + 1, total),\n total,\n completed: total > 0 && this._currentStep >= total - 1\n };\n\n this._active = false;\n\n document.querySelectorAll('.vd-spotlight-target').forEach(el => {\n el.classList.remove('vd-spotlight-target');\n });\n\n if (this._elements.overlay && this._elements.overlay.parentNode) {\n this._elements.overlay.parentNode.removeChild(this._elements.overlay);\n }\n if (this._elements.tooltip && this._elements.tooltip.parentNode) {\n this._elements.tooltip.parentNode.removeChild(this._elements.tooltip);\n }\n\n this._cleanup.forEach(fn => fn());\n this._cleanup = [];\n this._elements = {};\n this._steps = [];\n this._currentStep = 0;\n\n if (this._triggerElement && this._triggerElement.isConnected && typeof this._triggerElement.focus === 'function') {\n this._triggerElement.focus();\n }\n this._triggerElement = null;\n\n document.dispatchEvent(new CustomEvent('spotlight:end', { detail }));\n },\n\n destroyAll: function () {\n this.stop();\n }\n };\n\n if (typeof window.Vanduo !== 'undefined') {\n window.Vanduo.register('spotlight', Spotlight);\n }\n\n window.VanduoSpotlight = Spotlight;\n\n})();\n", "/**\n * Vanduo Framework - Music Player Component\n * HTML5 Audio-based music player with transport controls, volume,\n * and optional shuffle, seek bar, and playlist features.\n *\n * Options (passed to MusicPlayer.init or data-music-player-options):\n * tracks {Array} - [{name, url}] \u2014 required\n * volume {number} - Initial volume 0\u20131 (default 0.5)\n * shuffle {boolean} - Shuffle on init (default false)\n * showProgress {boolean} - Show seek/progress bar (default false)\n * showPlaylist {boolean} - Show expandable playlist panel (default false)\n * autoAdvance {boolean} - Auto-play next track on end (default true)\n *\n * Custom events (all bubble, dispatched on container):\n * musicplayer:play \u2014 playback started\n * musicplayer:pause \u2014 playback paused\n * musicplayer:trackchange \u2014 detail: { index, name, url }\n * musicplayer:volumechange \u2014 detail: { volume }\n * musicplayer:ended \u2014 last track ended (autoAdvance=false only)\n *\n * Programmatic API:\n * MusicPlayer.init(container?, options?)\n * MusicPlayer.play(container)\n * MusicPlayer.pause(container)\n * MusicPlayer.toggle(container)\n * MusicPlayer.next(container)\n * MusicPlayer.previous(container)\n * MusicPlayer.setVolume(container, value)\n * MusicPlayer.setTrack(container, index)\n * MusicPlayer.shuffle(container)\n * MusicPlayer.getState(container)\n * MusicPlayer.destroy(container)\n * MusicPlayer.destroyAll()\n */\n\n(function () {\n 'use strict';\n\n /* \u2500\u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n /**\n * Fisher-Yates shuffle (returns new array).\n * @param {Array} arr\n * @returns {Array}\n */\n function shuffleArray(arr) {\n const shuffled = arr.slice();\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n const tmp = shuffled[i];\n shuffled[i] = shuffled[j];\n shuffled[j] = tmp;\n }\n return shuffled;\n }\n\n /**\n * Format seconds as m:ss.\n * @param {number} seconds\n * @returns {string}\n */\n function formatTime(seconds) {\n if (!isFinite(seconds) || seconds < 0) return '0:00';\n const m = Math.floor(seconds / 60);\n const s = Math.floor(seconds % 60);\n return m + ':' + (s < 10 ? '0' : '') + s;\n }\n\n /**\n * Set CSS background-size on a range input to visually fill the track.\n * @param {HTMLInputElement} input\n */\n function updateRangeFill(input) {\n const min = parseFloat(input.min) || 0;\n const max = parseFloat(input.max) || 1;\n const val = parseFloat(input.value) || 0;\n const pct = ((val - min) / (max - min)) * 100;\n input.style.setProperty('--fill', pct + '%');\n // Fallback inline gradient for browsers without ::-moz-range-progress\n input.style.backgroundImage =\n 'linear-gradient(to right, var(--music-player-track-fill, currentColor) 0%, ' +\n 'var(--music-player-track-fill, currentColor) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) ' + pct + '%, ' +\n 'var(--music-player-track-bg, #ccc) 100%)';\n }\n\n /* \u2500\u2500\u2500 Phosphor icon helper (matches framework icon style) \u2500 */\n\n /**\n * Return an element (Phosphor icon).\n * @param {string} name\n * @returns {HTMLElement}\n */\n function icon(name) {\n const el = document.createElement('i');\n el.className = 'ph ph-' + name;\n el.setAttribute('aria-hidden', 'true');\n return el;\n }\n\n /* \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const MusicPlayer = {\n /** @type {Map} */\n instances: new Map(),\n\n /**\n * Default options.\n */\n defaults: {\n tracks: [],\n volume: 0.5,\n shuffle: false,\n showProgress: false,\n showPlaylist: false,\n autoAdvance: true,\n },\n\n /**\n * Auto-initialize all .vd-music-player / [data-music-player] elements.\n * Options can be provided via data-music-player-options (JSON string).\n */\n init: function () {\n document.querySelectorAll('.vd-music-player, [data-music-player]').forEach((el) => {\n if (this.instances.has(el)) return;\n\n let opts = {};\n const attr = el.getAttribute('data-music-player-options');\n if (attr) {\n try { opts = JSON.parse(attr); } catch (_) { /* ignore malformed JSON */ }\n }\n this.initPlayer(el, opts);\n });\n },\n\n /**\n * Initialize a single player element.\n * @param {HTMLElement} container\n * @param {Object} [options]\n */\n initPlayer: function (container, options) {\n const opts = Object.assign({}, this.defaults, options || {});\n\n // Validate and normalise tracks\n const rawTracks = Array.isArray(opts.tracks) ? opts.tracks : [];\n const tracks = rawTracks.filter((t) => t && typeof t.url === 'string' && t.url.trim());\n\n // Build shuffled working copy without mutating opts\n const trackList = opts.shuffle ? shuffleArray(tracks) : tracks.slice();\n\n /* \u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const state = {\n tracks: trackList,\n originalTracks: tracks.slice(),\n currentIndex: 0,\n isPlaying: false,\n volume: Math.max(0, Math.min(1, opts.volume)),\n shuffle: opts.shuffle,\n showProgress: opts.showProgress,\n showPlaylist: opts.showPlaylist,\n autoAdvance: opts.autoAdvance,\n audio: null,\n };\n\n /* \u2500\u2500 Audio element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const audio = new Audio();\n audio.volume = state.volume;\n audio.preload = 'metadata';\n state.audio = audio;\n\n /* \u2500\u2500 Build DOM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n this._buildDOM(container, state);\n\n // Grab references after DOM build\n const refs = {\n btnPlay: container.querySelector('.vd-music-player-btn-play'),\n btnPrev: container.querySelector('.vd-music-player-btn-prev'),\n btnNext: container.querySelector('.vd-music-player-btn-next'),\n btnShuffle: container.querySelector('.vd-music-player-btn-shuffle'),\n btnPlaylist: container.querySelector('.vd-music-player-btn-playlist'),\n trackName: container.querySelector('.vd-music-player-track-name'),\n volumeSlider: container.querySelector('.vd-music-player-volume-slider'),\n volumeIcon: container.querySelector('.vd-music-player-volume-icon'),\n progressBar: container.querySelector('.vd-music-player-progress-bar'),\n timeElapsed: container.querySelector('.vd-music-player-time-elapsed'),\n timeDuration: container.querySelector('.vd-music-player-time-duration'),\n playlistPanel: container.querySelector('.vd-music-player-playlist'),\n };\n\n /* \u2500\u2500 Internal render helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const renderPlayIcon = () => {\n const btn = refs.btnPlay;\n if (!btn) return;\n btn.innerHTML = '';\n btn.appendChild(icon(state.isPlaying ? 'pause' : 'play'));\n btn.setAttribute('aria-label', state.isPlaying ? 'Pause' : 'Play');\n btn.classList.toggle('is-active', state.isPlaying);\n };\n\n const renderTrackName = () => {\n const el = refs.trackName;\n if (!el) return;\n const track = state.tracks[state.currentIndex];\n if (track) {\n el.textContent = track.name || 'Unknown Track';\n el.classList.remove('is-idle');\n } else {\n el.textContent = 'No tracks loaded';\n el.classList.add('is-idle');\n }\n };\n\n const renderVolumeIcon = () => {\n const el = refs.volumeIcon;\n if (!el) return;\n el.innerHTML = '';\n const v = state.volume;\n const name = v === 0 ? 'speaker-none' : v < 0.5 ? 'speaker-low' : 'speaker-high';\n el.appendChild(icon(name));\n };\n\n const renderShuffleBtn = () => {\n const btn = refs.btnShuffle;\n if (!btn) return;\n btn.classList.toggle('is-active', state.shuffle);\n btn.setAttribute('aria-pressed', state.shuffle ? 'true' : 'false');\n };\n\n const renderPlaylistItems = () => {\n const panel = refs.playlistPanel;\n if (!panel) return;\n panel.innerHTML = '';\n state.tracks.forEach((track, i) => {\n const item = document.createElement('button');\n item.className =\n 'vd-music-player-playlist-item' + (i === state.currentIndex ? ' is-active' : '');\n item.type = 'button';\n item.setAttribute('data-index', String(i));\n item.setAttribute('aria-current', i === state.currentIndex ? 'true' : 'false');\n\n const num = document.createElement('span');\n num.className = 'vd-music-player-playlist-num';\n num.textContent = String(i + 1);\n\n const name = document.createElement('span');\n name.className = 'vd-music-player-playlist-name';\n name.textContent = track.name || 'Track ' + (i + 1);\n\n item.appendChild(num);\n item.appendChild(name);\n panel.appendChild(item);\n });\n };\n\n const renderProgress = () => {\n const bar = refs.progressBar;\n if (!bar || !audio.duration) return;\n const pct = (audio.currentTime / audio.duration) * 100;\n bar.value = String(pct);\n updateRangeFill(bar);\n if (refs.timeElapsed) refs.timeElapsed.textContent = formatTime(audio.currentTime);\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n };\n\n /* \u2500\u2500 Load track \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n const loadTrack = (index, autoPlay) => {\n const track = state.tracks[index];\n if (!track) return;\n state.currentIndex = index;\n audio.src = track.url;\n renderTrackName();\n renderPlaylistItems();\n\n // Reset progress\n if (refs.progressBar) {\n refs.progressBar.value = '0';\n updateRangeFill(refs.progressBar);\n }\n if (refs.timeElapsed) refs.timeElapsed.textContent = '0:00';\n if (refs.timeDuration) refs.timeDuration.textContent = '0:00';\n\n container.dispatchEvent(\n new CustomEvent('musicplayer:trackchange', {\n bubbles: true,\n detail: { index, name: track.name, url: track.url },\n })\n );\n\n if (autoPlay) {\n audio.play().catch(() => { /* browser may block autoplay */ });\n }\n };\n\n /* \u2500\u2500 Audio event listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n const cleanupFunctions = [];\n\n const onPlay = () => {\n state.isPlaying = true;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:play', { bubbles: true }));\n };\n\n const onPause = () => {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:pause', { bubbles: true }));\n };\n\n const onEnded = () => {\n if (state.autoAdvance && state.tracks.length > 1) {\n const next = (state.currentIndex + 1) % state.tracks.length;\n loadTrack(next, true);\n } else {\n state.isPlaying = false;\n renderPlayIcon();\n container.dispatchEvent(new CustomEvent('musicplayer:ended', { bubbles: true }));\n }\n };\n\n const onTimeUpdate = () => {\n if (state.showProgress) renderProgress();\n };\n\n const onLoadedMetadata = () => {\n if (refs.timeDuration) refs.timeDuration.textContent = formatTime(audio.duration);\n if (refs.progressBar) {\n refs.progressBar.max = '100';\n updateRangeFill(refs.progressBar);\n }\n };\n\n audio.addEventListener('play', onPlay);\n audio.addEventListener('pause', onPause);\n audio.addEventListener('ended', onEnded);\n audio.addEventListener('timeupdate', onTimeUpdate);\n audio.addEventListener('loadedmetadata', onLoadedMetadata);\n cleanupFunctions.push(() => {\n audio.removeEventListener('play', onPlay);\n audio.removeEventListener('pause', onPause);\n audio.removeEventListener('ended', onEnded);\n audio.removeEventListener('timeupdate', onTimeUpdate);\n audio.removeEventListener('loadedmetadata', onLoadedMetadata);\n audio.pause();\n audio.src = '';\n });\n\n /* \u2500\u2500 Control button listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n if (refs.btnPlay) {\n const handler = () => {\n if (!audio.src && state.tracks.length) loadTrack(state.currentIndex, false);\n if (state.isPlaying) {\n audio.pause();\n } else {\n audio.play().catch(() => {});\n }\n };\n refs.btnPlay.addEventListener('click', handler);\n cleanupFunctions.push(() => refs.btnPlay.removeEventListener('click', handler));\n\n // Keyboard: Space / Enter (already native for