{ "pages": [ { "id": "home", "title": "Home", "file": "home.html" }, { "id": "about", "title": "About", "file": "about.html" }, { "id": "changelog", "title": "Changelog", "file": "changelog.html" }, { "id": "docs-landing", "title": "Docs", "file": "docs-landing.html" }, { "id": "kilo-oss", "title": "Kilo OSS", "file": "kilo-oss.html" } ], "tabs": { "components": { "label": "Components", "icon": "ph-cube", "categories": [ { "name": "Core", "sections": [ { "id": "icons", "title": "Icons", "file": "core/icons.html", "icon": "ph-images", "keywords": [ "phosphor", "icon", "svg", "icons" ] }, { "id": "color-palette", "title": "Color Palette", "file": "core/color-palette.html", "icon": "ph-palette", "keywords": [ "color", "theme", "palette", "css variables" ] }, { "id": "typography", "title": "Typography", "file": "core/typography.html", "icon": "ph-text-aa", "keywords": [ "font", "type", "text", "heading", "paragraph" ] }, { "id": "grid-system", "title": "Grid System", "file": "core/grid-system.html", "icon": "ph-grid-four", "keywords": [ "grid", "layout", "columns", "row", "responsive" ] }, { "id": "golden-ratio", "title": "Golden Ratio", "file": "core/golden-ratio.html", "icon": "ph-spiral", "keywords": [ "golden ratio", "spacing", "scale", "proportion" ] }, { "id": "shadows-glow", "title": "Shadows & Glow", "file": "core/shadows-glow.html", "icon": "ph-sun", "keywords": [ "shadow", "glow", "elevation", "box-shadow" ] } ] }, { "name": "Components", "sections": [ { "id": "theme-customizer", "title": "Theme Customizer", "file": "components/theme-customizer.html", "icon": "ph-paint-roller", "keywords": [ "theme", "customizer", "runtime", "colors" ] }, { "id": "theme-switcher", "title": "Theme Switcher", "file": "components/theme-switcher.html", "icon": "ph-moon", "keywords": [ "theme", "switcher", "dark mode", "light mode", "toggle" ] }, { "id": "buttons", "title": "Buttons", "file": "components/buttons.html", "icon": "ph-cursor-click", "keywords": [ "button", "click", "submit", "primary", "secondary" ] }, { "id": "button-groups", "title": "Button Groups", "file": "components/button-groups.html", "icon": "ph-squares-four", "keywords": [ "button group", "toolbar", "segmented", "toggle" ] }, { "id": "forms", "title": "Forms", "file": "components/forms.html", "icon": "ph-textbox", "keywords": [ "form", "input", "checkbox", "radio", "select" ] }, { "id": "cards", "title": "Cards", "file": "components/cards.html", "icon": "ph-rectangle", "keywords": [ "card", "panel", "content" ] }, { "id": "navigation", "title": "Navigation", "file": "components/navigation.html", "icon": "ph-compass", "keywords": [ "nav", "breadcrumb", "pagination", "tabs" ] }, { "id": "navbar", "title": "Navbar", "file": "components/navbar.html", "icon": "ph-list", "keywords": [ "navbar", "header", "menu", "responsive" ] }, { "id": "sidenav", "title": "Sidenav", "file": "components/sidenav.html", "icon": "ph-sidebar", "keywords": [ "sidenav", "sidebar", "drawer" ] }, { "id": "footer", "title": "Footer", "file": "components/footer.html", "icon": "ph-layout", "keywords": [ "footer", "bottom", "links" ] }, { "id": "image-box", "title": "Image Box", "file": "media/image-box.html", "icon": "ph-image", "keywords": [ "image", "lightbox", "gallery", "photo", "zoom" ] }, { "id": "dropdown", "title": "Dropdown", "file": "components/dropdown.html", "icon": "ph-caret-down", "keywords": [ "dropdown", "menu", "select", "options", "split button" ] }, { "id": "modals", "title": "Modals", "file": "components/modals.html", "icon": "ph-squares-four", "keywords": [ "modal", "dialog", "popup", "overlay", "confirm", "glass" ] }, { "id": "tooltips", "title": "Tooltips", "file": "components/tooltips.html", "icon": "ph-chat-centered", "keywords": [ "tooltip", "hint", "popover", "hover", "title", "glass" ] }, { "id": "progress", "title": "Progress", "file": "components/progress.html", "icon": "ph-chart-bar", "keywords": [ "progress", "bar", "loading", "percentage", "striped", "indeterminate" ] }, { "id": "spinner", "title": "Spinners", "file": "components/spinner.html", "icon": "ph-spinner", "keywords": [ "spinner", "loader", "loading", "dots", "circular", "indicator", "quad", "quad loader", "dynamic loader", "skeleton overlay" ] } ] }, { "name": "Charts & Visualization", "sections": [ { "id": "vd-hex", "title": "Hex Grid", "file": "canvas/vd-hex.html", "icon": "ph-hexagon", "keywords": [ "hex grid", "canvas", "visualization", "game", "terrain", "pathfinding", "axial coordinates" ] }, { "id": "vd-charts", "title": "Charts", "file": "canvas/vd-charts.html", "icon": "ph-chart-donut", "keywords": [ "charts", "chart", "bar chart", "line chart", "area chart", "scatter plot", "pie chart", "donut chart", "svg", "dashboard", "visualization" ] }, { "id": "vd-flowchart", "title": "Flowchart", "file": "canvas/vd-flowchart.html", "icon": "ph-flow-arrow", "keywords": [ "flowchart", "diagram", "workflow", "node editor", "arrows", "junctions", "svg", "visualization" ] } ] }, { "name": "Data Display", "sections": [ { "id": "avatars", "title": "Avatars", "file": "data-display/avatars.html", "icon": "ph-user-circle", "keywords": [ "avatar", "image", "profile" ] }, { "id": "badges", "title": "Badges", "file": "components/badges.html", "icon": "ph-tag", "keywords": [ "badge", "pill", "tag", "label", "counter", "status" ] }, { "id": "collections", "title": "Collections", "file": "data-display/collections.html", "icon": "ph-list-dashes", "keywords": [ "list", "collection", "group", "items" ] }, { "id": "tables", "title": "Tables", "file": "data-display/tables.html", "icon": "ph-table", "keywords": [ "table", "grid", "data", "rows", "columns" ] } ] }, { "name": "Feedback", "sections": [ { "id": "alerts", "title": "Alerts", "file": "components/alerts.html", "icon": "ph-bell", "keywords": [ "alert", "notification", "message", "warning", "error", "success", "dismissible", "banner" ] }, { "id": "chips", "title": "Chips", "file": "feedback/chips.html", "icon": "ph-ticket", "keywords": [ "chip", "tag", "pill", "input" ] }, { "id": "preloader", "title": "Preloader", "file": "feedback/preloader.html", "icon": "ph-spinner-gap", "keywords": [ "preloader", "loading", "loading patterns", "spinner", "quad loader", "dynamic loader", "circular", "progress" ] }, { "id": "skeleton", "title": "Skeleton", "file": "components/skeleton.html", "icon": "ph-circles-three", "keywords": [ "skeleton", "ghost", "loading", "placeholder", "shimmer", "pulse", "lazy", "VanduoLazyLoad", "data-vd-lazy" ] } ] }, { "name": "Overlay", "sections": [ { "id": "accordion", "title": "Accordion / Collapsible", "file": "components/accordion.html", "icon": "ph-list-plus", "keywords": [ "accordion", "collapsible", "expand", "collapse", "faq", "disclosure" ] }, { "id": "toasts", "title": "Toast Notifications", "file": "components/toast.html", "icon": "ph-bell-ringing", "keywords": [ "toast", "notification", "alert", "message", "snackbar", "auto-dismiss", "position" ] } ] }, { "name": "Input", "sections": [ { "id": "tabs", "title": "Tabs", "file": "components/tabs.html", "icon": "ph-tabs", "keywords": [ "tabs", "tab", "panel", "switch", "pills", "boxed", "vertical" ] }, { "id": "search", "title": "Search", "file": "interactive/search.html", "icon": "ph-magnifying-glass", "keywords": [ "search", "find", "filter", "autocomplete", "keyboard" ] }, { "id": "code-snippet", "title": "Code Snippet", "file": "interactive/code-snippet.html", "icon": "ph-code-block", "keywords": [ "code", "snippet", "copy", "syntax", "highlight", "pre" ] } ] }, { "name": "Motion", "sections": [ { "id": "draggable", "title": "Draggable Components", "file": "interactive/draggable.html", "icon": "ph-arrows-out-cardinal", "keywords": [ "draggable", "drag and drop", "dnd", "reorder", "move", "drag", "drop" ] } ] }, { "name": "Carousel & Media", "sections": [ { "id": "carousel", "title": "Carousel / Flow", "file": "components/carousel.html", "icon": "ph-slideshow", "keywords": ["carousel", "slider", "flow", "slideshow", "swipe", "autoplay"] }, { "id": "expanding-cards", "title": "Expanding Cards", "file": "components/expanding-cards.html", "icon": "ph-cards-three", "keywords": ["expanding", "cards", "flex", "reveal", "hover", "interactive", "media"] }, { "id": "spotlight", "title": "Spotlight / Feature Discovery", "file": "components/spotlight.html", "icon": "ph-target", "keywords": ["spotlight", "feature discovery", "tour", "onboarding", "highlight"] }, { "id": "timeline", "title": "Timeline", "file": "components/timeline.html", "icon": "ph-clock-countdown", "keywords": ["timeline", "history", "events", "chronology", "vertical"] }, { "id": "music-player", "title": "Music Player", "file": "media/music-player.html", "icon": "ph-music-note", "keywords": [ "music", "player", "audio", "mp3", "playlist", "volume", "media" ] } ] }, { "name": "Popover & Overlay", "sections": [ { "id": "popover", "title": "Popover / Bubble", "file": "components/popover.html", "icon": "ph-chat-teardrop", "keywords": ["popover", "bubble", "popup", "tooltip", "click"] }, { "id": "offcanvas", "title": "Offcanvas", "file": "components/offcanvas.html", "icon": "ph-sidebar-simple", "keywords": ["offcanvas", "drawer", "panel", "slide", "direction"] }, { "id": "fab", "title": "FAB (Floating Action Button)", "file": "components/fab.html", "icon": "ph-plus-circle", "keywords": ["fab", "floating", "action", "button", "speed dial"] } ] }, { "name": "Navigation & Scroll", "sections": [ { "id": "scrollspy", "title": "Scrollspy / Waypoint", "file": "components/scrollspy.html", "icon": "ph-crosshair", "keywords": ["scrollspy", "waypoint", "scroll", "navigation", "active"] }, { "id": "sticky", "title": "Sticky / Affix", "file": "components/sticky.html", "icon": "ph-push-pin", "keywords": ["sticky", "affix", "fixed", "scroll", "position"] }, { "id": "stepper", "title": "Stepper", "file": "components/stepper.html", "icon": "ph-list-numbers", "keywords": ["stepper", "wizard", "steps", "progress", "multi-step"] } ] }, { "name": "Data Entry", "sections": [ { "id": "autocomplete", "title": "Autocomplete / Suggest", "file": "components/autocomplete.html", "icon": "ph-magnifying-glass-plus", "keywords": ["autocomplete", "suggest", "typeahead", "search", "combobox"] }, { "id": "form-validation", "title": "Form Validation", "file": "components/form-validation.html", "icon": "ph-check-circle", "keywords": ["validate", "validation", "form", "rules", "required", "email"] }, { "id": "datepicker", "title": "Date Picker", "file": "components/datepicker.html", "icon": "ph-calendar", "keywords": ["datepicker", "date", "calendar", "picker", "select"] }, { "id": "timepicker", "title": "Time Picker", "file": "components/timepicker.html", "icon": "ph-clock", "keywords": ["timepicker", "time", "picker", "clock", "schedule"] }, { "id": "rating", "title": "Rating", "file": "components/rating.html", "icon": "ph-star", "keywords": ["rating", "stars", "score", "review", "feedback"] }, { "id": "transfer", "title": "Transfer / Multi-select", "file": "components/transfer.html", "icon": "ph-arrows-left-right", "keywords": ["transfer", "dual list", "multi-select", "shuttle", "pick"] }, { "id": "tree-view", "title": "Tree View", "file": "components/tree-view.html", "icon": "ph-tree-structure", "keywords": ["tree", "hierarchy", "nodes", "expand", "collapse", "checkbox"] } ] }, { "name": "Effects", "sections": [ { "id": "glass", "title": "Glass Effects", "file": "effects/glass.html", "icon": "ph-drop-half-bottom", "keywords": ["glass", "frosted", "blur", "backdrop", "translucent", "liquid"] }, { "id": "ripple", "title": "Ripple / Waves", "file": "components/ripple.html", "icon": "ph-wave-sine", "keywords": ["ripple", "waves", "click", "effect", "animation"] }, { "id": "morph", "title": "Water Morph", "file": "effects/morph.html", "icon": "ph-drop", "keywords": ["morph", "water", "liquid", "wave", "transition", "swap", "toggle", "effect"] } ] } ] }, "guides": { "label": "Guides", "icon": "ph-compass", "categories": [ { "name": "Start Here", "sections": [ { "id": "getting-started", "title": "Quick Start", "file": "quick-start.html", "preload": true, "icon": "ph-rocket-launch", "keywords": [ "install", "cdn", "npm", "pnpm", "package manager", "setup", "quick start", "getting started" ] }, { "id": "getting-started-guide", "title": "Getting Started from Zero", "file": "guides/getting-started-guide.html", "preload": true, "icon": "ph-rocket-launch", "keywords": [ "beginner", "start", "setup", "project", "first page", "tutorial", "hello world" ] }, { "id": "framework-integration", "title": "Framework Integration", "file": "guides/framework-integration.html", "icon": "ph-plugs-connected", "keywords": [ "react", "vue", "nuxt", "next", "svelte", "framework", "integration", "spa" ] }, { "id": "vanduo-ecosystem", "title": "Vanduo Ecosystem", "file": "guides/vanduo-ecosystem.html", "preload": true, "icon": "ph-planet", "keywords": [ "ecosystem", "hex grid", "charts", "flowchart", "music player", "music-player", "audio", "canvas", "packages", "install", "pnpm", "separate", "library", "lightweight", "when to use" ] }, { "id": "migration-comparison", "title": "Migration Comparison", "file": "guides/migration-comparison.html", "icon": "ph-arrows-left-right", "keywords": [ "bootstrap", "tailwind", "migration", "comparison", "switch", "convert", "migrate" ] }, { "id": "esm-vs-iife", "title": "ESM vs IIFE vs Legacy", "file": "guides/esm-vs-iife.html", "icon": "ph-package", "keywords": [ "esm", "iife", "cjs", "module", "import", "require", "script", "bundler", "format" ] } ] }, { "name": "Architecture & Production", "sections": [ { "id": "runtime-architecture", "title": "Runtime Architecture", "file": "guides/runtime-architecture.html", "icon": "ph-circuitry", "keywords": [ "runtime", "architecture", "init", "destroy", "reinit", "registry", "lowerCamelCase", "scoped" ] }, { "id": "lifecycle-manager", "title": "Lifecycle Manager", "file": "guides/lifecycle-manager.html", "icon": "ph-recycle", "keywords": [ "lifecycle", "cleanup", "destroy", "dynamic dom", "observers", "listeners", "teardown" ] }, { "id": "security-practices", "title": "Security Practices", "file": "guides/security-practices.html", "icon": "ph-shield-check", "keywords": [ "security", "sanitize", "trusted html", "allowStyle", "highlightTag", "cdn", "same origin" ] }, { "id": "production-best-practices", "title": "Production Best Practices", "file": "guides/production-best-practices.html", "icon": "ph-rocket-launch", "keywords": [ "production", "best practices", "version pinning", "tokens", "forms", "debugging", "release" ] } ] }, { "name": "Layout & Design", "sections": [ { "id": "first-layout", "title": "Building Your First Layout", "file": "guides/first-layout.html", "icon": "ph-layout", "keywords": [ "grid", "layout", "container", "row", "column", "responsive", "breakpoint", "tutorial" ] }, { "id": "fibonacci-vs-standard", "title": "Fibonacci vs Standard Grid", "file": "guides/fibonacci-vs-standard.html", "icon": "ph-spiral", "keywords": [ "fibonacci", "golden ratio", "grid", "layout", "proportion", "harmony", "toggle" ] }, { "id": "css-variables-theming", "title": "CSS Variables & Theming", "file": "guides/css-variables-theming.html", "icon": "ph-swatches", "keywords": [ "css", "variable", "theme", "dark mode", "light mode", "override", "custom", "properties" ] }, { "id": "theme-customizer-guide", "title": "Theme Customizer Walkthrough", "file": "guides/theme-customizer-guide.html", "icon": "ph-paint-brush", "keywords": [ "theme", "customizer", "color", "font", "brand", "dark mode", "light mode", "walkthrough" ] } ] }, { "name": "Best Practices", "sections": [ { "id": "utilities-cheat-sheet", "title": "Utilities Cheat Sheet", "file": "guides/utilities-cheat-sheet.html", "icon": "ph-magic-wand", "keywords": [ "utility", "utilities", "cheat sheet", "margin", "padding", "color", "flex", "radius" ] }, { "id": "accessibility-essentials", "title": "Accessibility Essentials", "file": "guides/accessibility-essentials.html", "icon": "ph-wheelchair", "keywords": [ "accessibility", "a11y", "aria", "screen reader", "keyboard", "contrast", "wcag", "inclusive" ] }, { "id": "troubleshooting", "title": "Troubleshooting & FAQ", "file": "guides/troubleshooting.html", "icon": "ph-wrench", "keywords": [ "troubleshooting", "faq", "debug", "fix", "problem", "error", "help", "issue" ] } ] }, { "name": "Performance", "sections": [ { "id": "lazy-loading-guide", "title": "Global Lazy Loading", "file": "guides/lazy-loading-guide.html", "icon": "ph-cloud-arrow-down", "keywords": [ "lazy", "load", "loading", "performance", "VanduoLazyLoad", "data-vd-lazy", "skeleton", "spinner", "placeholder", "intersection observer", "observer", "intersection", "dynamic", "fetch", "on-demand", "section", "partial", "component", "utility" ] } ] } ] } } }