From f481ee130906bd291f4778176a8c43602d82870c Mon Sep 17 00:00:00 2001
From: AxenoDev <tbavart@gmail.com>
Date: Fri, 13 Feb 2026 17:50:15 +0100
Subject: [PATCH 01/10] add: create .gitignore to exclude VitePress cache
 directory

---
 docs/.gitignore | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 docs/.gitignore

diff --git a/docs/.gitignore b/docs/.gitignore
new file mode 100644
index 0000000..f95ea57
--- /dev/null
+++ b/docs/.gitignore
@@ -0,0 +1 @@
+.vitepress/cache/
\ No newline at end of file

From c6dd7248c699a69d886f229dfd71272ed0e0996e Mon Sep 17 00:00:00 2001
From: AxenoDev <tbavart@gmail.com>
Date: Fri, 13 Feb 2026 17:50:26 +0100
Subject: [PATCH 02/10] add: expand .gitignore to include additional log and
 cache files

---
 .gitignore | 88 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 87 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index f51a8a8..fb07ce4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -119,4 +119,90 @@ gradle-app.setting
 # End of https://www.toptal.com/developers/gitignore/api/intellij+all,gradle
 
 # run-paper
-run/**
\ No newline at end of file
+run/**
+
+# Bun
+bun.lock
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# database
+*.sqlite
+
+# package-json
+package-json.lock
+
+# bun deploy file
+node_modules.bun
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
\ No newline at end of file

From a742de8f678c7e961b9efb6d7a3cc7012fb4facf Mon Sep 17 00:00:00 2001
From: AxenoDev <tbavart@gmail.com>
Date: Sat, 14 Feb 2026 11:48:00 +0100
Subject: [PATCH 03/10] feat: add runtime API examples and custom styles for
 documentation

---
 docs/.gitignore                               |   2 +-
 docs/.vitepress/config.mts                    |  42 ++
 .../theme/components/CachedImage.vue          | 179 +++++++
 .../theme/components/KikoFeature.vue          | 181 +++++++
 docs/.vitepress/theme/components/KikoHero.vue | 453 ++++++++++++++++++
 docs/.vitepress/theme/index.ts                |  13 +
 docs/.vitepress/theme/style/blocks.css        |  92 ++++
 docs/.vitepress/theme/style/colors.css        |  26 +
 docs/.vitepress/theme/style/index.css         |   3 +
 docs/.vitepress/theme/style/navbar.css        |  60 +++
 docs/.vitepress/theme/style/style.scss        |  77 +++
 docs/pages/api-examples.md                    |  49 ++
 docs/pages/index.md                           |  36 ++
 package.json                                  |  14 +
 14 files changed, 1226 insertions(+), 1 deletion(-)
 create mode 100644 docs/.vitepress/config.mts
 create mode 100644 docs/.vitepress/theme/components/CachedImage.vue
 create mode 100644 docs/.vitepress/theme/components/KikoFeature.vue
 create mode 100644 docs/.vitepress/theme/components/KikoHero.vue
 create mode 100644 docs/.vitepress/theme/index.ts
 create mode 100644 docs/.vitepress/theme/style/blocks.css
 create mode 100644 docs/.vitepress/theme/style/colors.css
 create mode 100644 docs/.vitepress/theme/style/index.css
 create mode 100644 docs/.vitepress/theme/style/navbar.css
 create mode 100644 docs/.vitepress/theme/style/style.scss
 create mode 100644 docs/pages/api-examples.md
 create mode 100644 docs/pages/index.md
 create mode 100644 package.json

diff --git a/docs/.gitignore b/docs/.gitignore
index f95ea57..6dc972e 100644
--- a/docs/.gitignore
+++ b/docs/.gitignore
@@ -1 +1 @@
-.vitepress/cache/
\ No newline at end of file
+.vitepress/cache
\ No newline at end of file
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
new file mode 100644
index 0000000..88250e6
--- /dev/null
+++ b/docs/.vitepress/config.mts
@@ -0,0 +1,42 @@
+import {defineConfig} from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+    title: "KikoAPI docs",
+    description: "KikoAPI is a lightweight helper library for our Paper plugins that speeds up development.",
+    vite: {
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    api: "modern-compiler"
+                }
+            }
+        }
+    },
+    srcDir: './pages',
+    appearance: 'force-dark',
+    themeConfig: {
+        search: {
+            provider: 'local'
+        },
+        // https://vitepress.dev/reference/default-theme-config
+        nav: [
+            {text: 'Home', link: '/'},
+            {text: 'Examples', link: '/markdown-examples'}
+        ],
+
+        sidebar: [
+            {
+                text: 'Examples',
+                items: [
+                    {text: 'Markdown Examples', link: '/markdown-examples'},
+                    {text: 'Runtime API Examples', link: '/api-examples'}
+                ]
+            }
+        ],
+
+        socialLinks: [
+            {icon: 'github', link: 'https://github.com/vuejs/vitepress'}
+        ]
+    }
+})
diff --git a/docs/.vitepress/theme/components/CachedImage.vue b/docs/.vitepress/theme/components/CachedImage.vue
new file mode 100644
index 0000000..81fd4d9
--- /dev/null
+++ b/docs/.vitepress/theme/components/CachedImage.vue
@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+
+const props = defineProps<{
+    src?: string;
+    placeholder?: string;
+    alt?: string;
+}>();
+
+const imgSrc = ref<string>('');
+const isLoading = ref(true);
+const hasError = ref(false);
+
+const CACHE_PREFIX = 'cached_image_';
+const CACHE_EXPIRY = 7 * 24 * 60 * 60 * 1000;
+
+interface CachedImageData {
+    data: string;
+    timestamp: number;
+}
+
+const getCachedImage = (url: string): string | null => {
+    try {
+        const key = CACHE_PREFIX + btoa(url);
+        const cached = localStorage.getItem(key);
+        if (cached) {
+            const data: CachedImageData = JSON.parse(cached);
+            if (Date.now() - data.timestamp < CACHE_EXPIRY) {
+                return data.data;
+            } else {
+                localStorage.removeItem(key);
+            }
+        }
+    } catch (e) {
+        console.warn('Failed to get cached image:', e);
+    }
+    return null;
+};
+
+const setCachedImage = (url: string, dataUrl: string): void => {
+    try {
+        const key = CACHE_PREFIX + btoa(url);
+        const data: CachedImageData = {
+            data: dataUrl,
+            timestamp: Date.now()
+        };
+        localStorage.setItem(key, JSON.stringify(data));
+    } catch (e) {
+        console.warn('Failed to cache image:', e);
+    }
+};
+
+const loadImage = (url: string): void => {
+    if (!url) {
+        imgSrc.value = props.placeholder || '';
+        isLoading.value = false;
+        return;
+    }
+
+    const cached = getCachedImage(url);
+    if (cached) {
+        imgSrc.value = cached;
+        isLoading.value = false;
+        hasError.value = false;
+        return;
+    }
+
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+
+    img.onload = () => {
+        try {
+            const canvas = document.createElement('canvas');
+            canvas.width = img.naturalWidth;
+            canvas.height = img.naturalHeight;
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                ctx.drawImage(img, 0, 0);
+                const dataUrl = canvas.toDataURL('image/png');
+                setCachedImage(url, dataUrl);
+                imgSrc.value = dataUrl;
+            } else {
+                imgSrc.value = url;
+            }
+        } catch (e) {
+            console.warn('Failed to cache image, using original URL:', e);
+            imgSrc.value = url;
+        }
+        isLoading.value = false;
+        hasError.value = false;
+    };
+
+    img.onerror = () => {
+        hasError.value = true;
+        isLoading.value = false;
+        imgSrc.value = props.placeholder || '';
+    };
+
+    img.src = url;
+};
+
+onMounted(() => {
+    if (props.src) {
+        loadImage(props.src);
+    } else if (props.placeholder) {
+        imgSrc.value = props.placeholder;
+        isLoading.value = false;
+    }
+});
+
+watch(() => props.src, (newSrc) => {
+    if (newSrc) {
+        isLoading.value = true;
+        hasError.value = false;
+        loadImage(newSrc);
+    }
+});
+</script>
+
+<template>
+    <div class="cached-image-wrapper">
+        <img
+            v-if="imgSrc"
+            :src="imgSrc"
+            :alt="alt || ''"
+            :class="{ loading: isLoading, error: hasError }"
+            v-bind="$attrs"
+        />
+        <div v-else-if="isLoading" class="loading-placeholder">
+            <span>Loading...</span>
+        </div>
+        <div v-else-if="hasError" class="error-placeholder">
+            <span>Failed to load image</span>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.cached-image-wrapper {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    transition: opacity 0.3s ease;
+}
+
+img.loading {
+    opacity: 0.5;
+}
+
+img.error {
+    opacity: 0.3;
+}
+
+.loading-placeholder,
+.error-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+    background: rgba(128, 128, 128, 0.1);
+    border-radius: 8px;
+}
+
+.loading-placeholder span {
+    color: var(--vp-c-text-2);
+    font-size: 14px;
+}
+
+.error-placeholder span {
+    color: var(--vp-c-danger);
+    font-size: 14px;
+}
+</style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/KikoFeature.vue b/docs/.vitepress/theme/components/KikoFeature.vue
new file mode 100644
index 0000000..736c38b
--- /dev/null
+++ b/docs/.vitepress/theme/components/KikoFeature.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+export interface Feature {
+    icon?: string
+    title: string
+    details: string
+    link?: string
+}
+
+defineProps<{
+    features?: Feature[]
+}>()
+</script>
+
+<template>
+    <div class="KikoFeature">
+        <div class="container">
+            <div class="items">
+                <div
+                        v-for="(feature, index) in features"
+                        :key="index"
+                        class="item animate-feature"
+                        :style="{ animationDelay: `${1.2 + index * 0.15}s` }"
+                >
+                    <article class="box">
+                        <div v-if="feature.icon" class="icon" v-html="feature.icon"></div>
+                        <h2 class="title" v-html="feature.title"></h2>
+                        <p class="details" v-html="feature.details"></p>
+                        <a v-if="feature.link" :href="feature.link" class="link">
+                            En savoir plus ->
+                        </a>
+                    </article>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(40px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.animate-feature {
+    opacity: 0;
+    animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.KikoFeature {
+    position: relative;
+    padding: 48px 24px;
+}
+
+@media (min-width: 640px) {
+    .KikoFeature {
+        padding: 64px 48px;
+    }
+}
+
+@media (min-width: 960px) {
+    .KikoFeature {
+        padding: 96px 64px;
+    }
+}
+
+.container {
+    margin: 0 auto;
+    max-width: 1152px;
+}
+
+.items {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 16px;
+}
+
+@media (min-width: 640px) {
+    .items {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 24px;
+    }
+}
+
+@media (min-width: 960px) {
+    .items {
+        grid-template-columns: repeat(3, 1fr);
+        gap: 32px;
+    }
+}
+
+.item {
+    transition: transform 0.3s ease;
+}
+
+.item:hover {
+    transform: translateY(-4px);
+}
+
+.box {
+    position: relative;
+    height: 100%;
+    padding: 28px;
+    background-color: var(--vp-c-bg-soft);
+    border: 1px solid var(--vp-c-divider);
+    border-radius: 12px;
+    transition: all 0.3s ease;
+}
+
+.box:hover {
+    border-color: var(--vp-c-brand-1);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
+}
+
+.icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 48px;
+    height: 48px;
+    margin-bottom: 20px;
+    font-size: 24px;
+    background: var(--vp-c-brand-soft);
+    border-radius: 10px;
+    transition: transform 0.3s ease;
+}
+
+.box:hover .icon {
+    transform: scale(1.1) rotate(5deg);
+}
+
+.title {
+    margin: 0 0 12px;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 28px;
+    color: var(--vp-c-text-1);
+}
+
+.details {
+    margin: 0;
+    font-size: 15px;
+    line-height: 18px;
+    color: var(--vp-c-text-2);
+}
+
+.link {
+    display: inline-block;
+    margin-top: 16px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--vp-c-brand-1);
+    text-decoration: none;
+    transition: all 0.2s ease;
+}
+
+.link:hover {
+    color: var(--vp-c-brand-2);
+    transform: translateX(4px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .animate-feature {
+        animation: none;
+        opacity: 1;
+    }
+
+    .item:hover {
+        transform: none;
+    }
+
+    .box:hover .icon {
+        transform: scale(1.05);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/KikoHero.vue b/docs/.vitepress/theme/components/KikoHero.vue
new file mode 100644
index 0000000..9fc95f7
--- /dev/null
+++ b/docs/.vitepress/theme/components/KikoHero.vue
@@ -0,0 +1,453 @@
+<script setup lang="ts">
+import type {DefaultTheme} from 'vitepress/theme'
+import {VPButton} from "vitepress/theme";
+import {computed, inject} from 'vue'
+import {layoutInfoInjectionKey} from 'vitepress/dist/client/theme-default/composables/layout'
+import CachedImage from "./CachedImage.vue";
+
+export interface HeroAction {
+    theme?: 'brand' | 'alt'
+    text: string
+    link: string
+    target?: string
+    rel?: string
+}
+
+defineProps<{
+    name?: string
+    text?: string
+    tagline?: string
+    image?: DefaultTheme.ThemeableImage
+    actions?: HeroAction[]
+}>()
+
+const {heroImageSlotExists} = inject(
+        layoutInfoInjectionKey,
+        {heroImageSlotExists: computed(() => false)}
+)
+</script>
+
+<template>
+    <div class="KikoHero" :class="{ 'has-image': image || heroImageSlotExists }">
+        <div class="container">
+            <div class="main">
+                <slot name="home-hero-info-before"/>
+                <slot name="home-hero-info">
+                    <h1 class="heading">
+                        <span v-if="name" v-html="name" class="name clip animate-name"></span>
+                        <span v-if="text" v-html="text" class="text animate-text"></span>
+                    </h1>
+                    <p v-if="tagline" v-html="tagline" class="tagline animate-tagline"></p>
+                </slot>
+                <slot name="home-hero-info-after"/>
+
+                <div v-if="actions" class="actions animate-actions">
+                    <div v-for="(action, index) in actions" :key="action.link" class="action"
+                         :style="{ animationDelay: `${0.8 + index * 0.1}s` }">
+                        <VPButton
+                                tag="a"
+                                size="medium"
+                                :theme="action.theme"
+                                :text="action.text"
+                                :href="action.link"
+                                :target="action.target"
+                                :rel="action.rel"
+                        />
+                    </div>
+                </div>
+                <slot name="home-hero-actions-after"/>
+            </div>
+
+            <div v-if="image || heroImageSlotExists" class="image">
+                <div class="image-container">
+                    <div class="image-bg animate-image-bg"/>
+                    <slot name="home-hero-image">
+                        <CachedImage
+                            v-if="image"
+                            class="image-src animate-image"
+                            :src="typeof image === 'string' ? image : image.src"
+                            :alt="typeof image === 'string' ? 'Hero Image' : (image.alt || 'Hero Image')"
+                        />
+                    </slot>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+/* Animations */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeInScale {
+    from {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes fadeInRotate {
+    from {
+        opacity: 0;
+        transform: rotate(-10deg) scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: rotate(0deg) scale(1);
+    }
+}
+
+@keyframes pulseGlow {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(0.8);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+.animate-name {
+    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards;
+}
+
+.animate-text {
+    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
+}
+
+.animate-tagline {
+    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s backwards;
+}
+
+.animate-actions {
+    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s backwards;
+}
+
+.action {
+    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+}
+
+.animate-image {
+    animation: fadeInRotate 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s backwards;
+}
+
+.animate-image-bg {
+    animation: pulseGlow 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
+}
+
+.KikoHero {
+    margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
+}
+
+@media (min-width: 640px) {
+    .KikoHero {
+        padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px;
+    }
+}
+
+@media (min-width: 960px) {
+    .KikoHero {
+        padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px;
+    }
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    max-width: 1152px;
+}
+
+@media (min-width: 960px) {
+    .container {
+        flex-direction: row;
+    }
+}
+
+.main {
+    position: relative;
+    z-index: 10;
+    order: 2;
+    flex-grow: 1;
+    flex-shrink: 0;
+}
+
+.KikoHero.has-image .container {
+    text-align: center;
+}
+
+@media (min-width: 960px) {
+    .KikoHero.has-image .container {
+        text-align: left;
+    }
+}
+
+@media (min-width: 960px) {
+    .main {
+        order: 1;
+        width: calc((100% / 3) * 2);
+    }
+
+    .KikoHero.has-image .main {
+        max-width: 592px;
+    }
+}
+
+.heading {
+    display: flex;
+    flex-direction: column;
+}
+
+.name,
+.text {
+    width: fit-content;
+    max-width: 392px;
+    letter-spacing: -0.4px;
+    line-height: 40px;
+    font-size: 32px;
+    font-weight: 700;
+    white-space: pre-wrap;
+}
+
+.KikoHero.has-image .name,
+.KikoHero.has-image .text {
+    margin: 0 auto;
+}
+
+.name {
+    color: var(--vp-home-hero-name-color);
+}
+
+.clip {
+    background: var(--vp-home-hero-name-background);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: var(--vp-home-hero-name-color);
+}
+
+@media (min-width: 640px) {
+    .name,
+    .text {
+        max-width: 576px;
+        line-height: 56px;
+        font-size: 48px;
+    }
+}
+
+@media (min-width: 960px) {
+    .name,
+    .text {
+        line-height: 64px;
+        font-size: 56px;
+    }
+
+    .KikoHero.has-image .name,
+    .KikoHero.has-image .text {
+        margin: 0;
+    }
+}
+
+.tagline {
+    padding-top: 8px;
+    max-width: 392px;
+    line-height: 28px;
+    font-size: 18px;
+    font-weight: 500;
+    white-space: pre-wrap;
+    color: var(--vp-c-text-2);
+}
+
+.KikoHero.has-image .tagline {
+    margin: 0 auto;
+}
+
+@media (min-width: 640px) {
+    .tagline {
+        padding-top: 12px;
+        max-width: 576px;
+        line-height: 32px;
+        font-size: 20px;
+    }
+}
+
+@media (min-width: 960px) {
+    .tagline {
+        line-height: 36px;
+        font-size: 24px;
+    }
+
+    .KikoHero.has-image .tagline {
+        margin: 0;
+    }
+}
+
+.actions {
+    display: flex;
+    flex-wrap: wrap;
+    margin: -6px;
+    padding-top: 24px;
+}
+
+.KikoHero.has-image .actions {
+    justify-content: center;
+}
+
+@media (min-width: 640px) {
+    .actions {
+        padding-top: 32px;
+    }
+}
+
+@media (min-width: 960px) {
+    .KikoHero.has-image .actions {
+        justify-content: flex-start;
+    }
+}
+
+.action {
+    flex-shrink: 0;
+    padding: 6px;
+}
+
+.image {
+    order: 1;
+    margin: -76px -24px -48px;
+}
+
+@media (min-width: 640px) {
+    .image {
+        margin: -108px -24px -48px;
+    }
+}
+
+@media (min-width: 960px) {
+    .image {
+        flex-grow: 1;
+        order: 2;
+        margin: 0;
+        min-height: 100%;
+    }
+}
+
+.KikoHero .image-container {
+    opacity: 0;
+    animation: fadeIn 0.8s ease-out forwards;
+    animation-delay: 0.3s;
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+:deep(.image-src) {
+    transform: translate(-50%, -60%);
+    animation: slideIn 0.8s ease-out forwards;
+    animation-delay: 0.3s;
+}
+
+@keyframes slideIn {
+    0% {
+        transform: translate(-50%, -40%);
+        opacity: 0;
+    }
+    100% {
+        transform: translate(-50%, -50%);
+        opacity: 1;
+    }
+}
+
+@media (min-width: 640px) {
+    .image-container {
+        width: 392px;
+        height: 392px;
+    }
+}
+
+@media (min-width: 960px) {
+    .image-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        /*rtl:ignore*/
+        transform: translate(-32px, -32px);
+    }
+}
+
+.image-bg {
+    position: absolute;
+    top: 50%;
+    /*rtl:ignore*/
+    left: 50%;
+    border-radius: 50%;
+    width: 192px;
+    height: 192px;
+    background-image: var(--vp-home-hero-image-background-image);
+    filter: var(--vp-home-hero-image-filter);
+    /*rtl:ignore*/
+    transform: translate(-50%, -50%);
+}
+
+@media (min-width: 640px) {
+    .image-bg {
+        width: 256px;
+        height: 256px;
+    }
+}
+
+@media (min-width: 960px) {
+    .image-bg {
+        width: 320px;
+        height: 320px;
+    }
+}
+
+:deep(.image-src) {
+    position: absolute;
+    top: 50%;
+    /*rtl:ignore*/
+    left: 50%;
+    max-width: 192px;
+    max-height: 192px;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    /*rtl:ignore*/
+    transform: translate(-50%, -50%);
+}
+
+@media (min-width: 640px) {
+    :deep(.image-src) {
+        max-width: 256px;
+        max-height: 256px;
+    }
+}
+
+@media (min-width: 960px) {
+    :deep(.image-src) {
+        max-width: 320px;
+        max-height: 320px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
new file mode 100644
index 0000000..79429dc
--- /dev/null
+++ b/docs/.vitepress/theme/index.ts
@@ -0,0 +1,13 @@
+import {Theme} from 'vitepress';
+import DefaultTheme from "vitepress/theme";
+import './style/index.css';
+import CachedImage from './components/CachedImage.vue';
+
+export default {
+    extends: DefaultTheme,
+    enhanceApp({ app }) {
+        // Register global components
+        app.component('CachedImage', CachedImage);
+    }
+} satisfies Theme;
+
diff --git a/docs/.vitepress/theme/style/blocks.css b/docs/.vitepress/theme/style/blocks.css
new file mode 100644
index 0000000..90c4257
--- /dev/null
+++ b/docs/.vitepress/theme/style/blocks.css
@@ -0,0 +1,92 @@
+.VPDoc .custom-block {
+    margin: 28px 0;
+    padding: 20px 24px 12px 42px;
+    border-radius: 8px;
+    overflow-x: auto;
+    transition:
+            color 0.5s,
+            background-color 0.5s;
+    position: relative;
+    font-size: 14px;
+    line-height: 1.6;
+    font-weight: 500;
+    color: var(--vp-c-text-2);
+    background-color: var(--vp-c-bg-soft);
+
+    &:before {
+        content: "ℹ️";
+        position: absolute;
+        font-weight: 600;
+        font-size: 15px;
+        top: 20px;
+        left: 16px;
+    }
+
+    .custom-block-title {
+        margin-bottom: 8px;
+        font-size: 15px;
+        font-weight: 500;
+        color: var(--vp-c-text-1);
+        transition: color 0.5s;
+    }
+
+    &.warning {
+        border: 1px solid var(--vp-c-yellow-2);
+        code,
+        a {
+            color: var(--vp-c-yellow-2);
+        }
+        &:before {
+            color: var(--vp-c-yellow-2);
+            content: "⚠️";
+            font-size: 16px;
+            top: 19px;
+            left: 16px;
+        }
+    }
+
+    &.info {
+        border: 1px solid var(--vp-c-info-2);
+        code,
+        a {
+            color: var(--vp-c-info-1);
+        }
+        &:before {
+            color: var(--vp-c-info-2);
+        }
+    }
+
+    &.danger {
+        border: 1px solid var(--vp-c-red-2);
+        &:before {
+            color: var(--vp-c-red-2);
+            content: "⛔";
+        }
+    }
+
+    &.tip {
+        border: 1px solid var(--vp-c-green-2);
+        code,
+        a {
+            color: var(--vp-c-green-1);
+        }
+        &:before {
+            color: var(--vp-c-green-2);
+            content: "💡";
+        }
+    }
+
+    ul li:before {
+        top: 0.55rem;
+    }
+
+    ol li:before {
+        top: 1px;
+        font-size: 13px;
+    }
+
+    :not(pre) > code {
+        font-size: 13px;
+        background-color: rgba(0, 0, 0, 0.2);
+    }
+}
\ No newline at end of file
diff --git a/docs/.vitepress/theme/style/colors.css b/docs/.vitepress/theme/style/colors.css
new file mode 100644
index 0000000..2f3b97f
--- /dev/null
+++ b/docs/.vitepress/theme/style/colors.css
@@ -0,0 +1,26 @@
+:root {
+    --vp-c-bg: #16161a;
+    --vp-c-bg-alt: #101013;
+    --vp-c-bg-elv: #202127;
+    --vp-c-bg-soft: #1d1d23;
+
+    --vp-c-brand-1: #FC67FA;
+    --vp-c-brand-2: #FC67FA;
+    --vp-c-brand-3: #FC67FA;
+    --vp-c-brand-soft: rgba(252, 103, 250, 0.27);
+
+    --vp-c-tip-1: var(--vp-c-brand-1);
+    --vp-c-tip-2: var(--vp-c-brand-2);
+    --vp-c-tip-3: var(--vp-c-brand-3);
+    --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+    --vp-c-warning-1: #f5d86f;
+    --vp-c-warning-2: #eac048;
+    --vp-c-warning-3: #d4a92a;
+    --vp-c-warning-soft: #d4a92a44;
+
+    --vp-c-danger-1: #e066f0;
+    --vp-c-danger-2: #c050d4;
+    --vp-c-danger-3: #a038b8;
+    --vp-c-danger-soft: rgba(190, 49, 112, 0.27);
+}
diff --git a/docs/.vitepress/theme/style/index.css b/docs/.vitepress/theme/style/index.css
new file mode 100644
index 0000000..ecde99e
--- /dev/null
+++ b/docs/.vitepress/theme/style/index.css
@@ -0,0 +1,3 @@
+@import "./colors.css";
+@import './style.scss';
+@import "./navbar.css";
\ No newline at end of file
diff --git a/docs/.vitepress/theme/style/navbar.css b/docs/.vitepress/theme/style/navbar.css
new file mode 100644
index 0000000..0628991
--- /dev/null
+++ b/docs/.vitepress/theme/style/navbar.css
@@ -0,0 +1,60 @@
+:root {
+    --vp-nav-bg-color: rgba(22, 22, 26, 0.7);
+    --vp-nav-border-color: rgba(255, 255, 255, 0.08);
+}
+
+.VPNav {
+    background-color: var(--vp-nav-bg-color) !important;
+    backdrop-filter: blur(20px) saturate(180%);
+    border-bottom: 1px solid var(--vp-nav-border-color);
+    transition: background-color 0.5s, border-color 0.5s;
+}
+
+.VPNavBar,
+.VPLocalNav,
+.VPNavBar:not(.home.top) .content-body {
+    background-color: transparent !important;
+    backdrop-filter: none !important;
+    border-bottom: none !important;
+}
+
+.VPNavBarSearchButton {
+    border-radius: 8px !important;
+    background-color: rgba(255, 255, 255, 0.05) !important;
+    border: 1px solid var(--vp-nav-border-color) !important;
+    transition: all 0.2s ease;
+}
+
+.VPNavBarSearchButton:hover {
+    background-color: rgba(255, 255, 255, 0.1) !important;
+    border-color: var(--vp-c-brand-1) !important;
+}
+
+.VPNavBarMenuLink {
+    font-weight: 500;
+    font-size: 14px;
+    color: var(--vp-c-text-2);
+    transition: color 0.25s;
+}
+
+.VPNavBarMenuLink:hover {
+    color: var(--vp-c-brand-1) !important;
+}
+
+.VPNav .divider-line {
+    background-color: var(--vp-nav-border-color) !important;
+    width: 1px !important;
+}
+
+.curtain {
+    background-color: rgba(0, 0, 0, 0.4) !important;
+    backdrop-filter: blur(4px);
+}
+
+@media (max-width: 959px) {
+    .VPLocalNav {
+        background-color: var(--vp-nav-bg-color) !important;
+        backdrop-filter: blur(20px);
+        border-bottom: 1px solid var(--vp-nav-border-color);
+    }
+}
\ No newline at end of file
diff --git a/docs/.vitepress/theme/style/style.scss b/docs/.vitepress/theme/style/style.scss
new file mode 100644
index 0000000..0200a68
--- /dev/null
+++ b/docs/.vitepress/theme/style/style.scss
@@ -0,0 +1,77 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ *
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attched to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+:root {
+    --vp-home-hero-name-color: transparent;
+    --vp-home-hero-name-background: linear-gradient(30deg, rgba(252, 103, 250) 10%, rgba(244, 196, 243));
+
+    --vp-home-hero-image-background-image: linear-gradient(-45deg, rgba(252, 103, 250, 0.5) 50%, rgba(225, 117, 223, 0.5) 50%);
+    --vp-home-hero-image-filter: blur(50px);
+}
+
+:root {
+    --vp-custom-block-tip-border: transparent;
+    --vp-custom-block-tip-text: var(--vp-c-text-1);
+    --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+    --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+    --vp-border-radius: 0.5rem;
+    --vp-anim-dur: 150ms;
+}
+
+.brand-button {
+    outline: var(--vp-c-brand-2) 2px solid;
+    box-sizing: border-box !important;
+    background: var(--vp-c-brand-soft);
+    transition: 160ms ease-in-out all !important;
+
+    &:hover {
+        outline-offset: 2px;
+        background: var(--vp-c-brand-3);
+    }
+
+    &:active {
+        background: var(--vp-c-brand-1);
+    }
+}
\ No newline at end of file
diff --git a/docs/pages/api-examples.md b/docs/pages/api-examples.md
new file mode 100644
index 0000000..6bd8bb5
--- /dev/null
+++ b/docs/pages/api-examples.md
@@ -0,0 +1,49 @@
+---
+outline: deep
+---
+
+# Runtime API Examples
+
+This page demonstrates usage of some of the runtime APIs provided by VitePress.
+
+The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
+
+```md
+<script setup>
+import { useData } from 'vitepress'
+
+const { theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+```
+
+<script setup>
+import { useData } from 'vitepress'
+
+const { site, theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+
+## More
+
+Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).
diff --git a/docs/pages/index.md b/docs/pages/index.md
new file mode 100644
index 0000000..1034945
--- /dev/null
+++ b/docs/pages/index.md
@@ -0,0 +1,36 @@
+---
+layout: page
+navbar: true
+sidebar: false
+aside: false
+outline: false
+---
+
+<script setup>
+import CachedImage from '../.vitepress/theme/components/CachedImage.vue';
+import KikoHero from '../.vitepress/theme/components/KikoHero.vue';
+import KikoFeature from '../.vitepress/theme/components/KikoFeature.vue';
+
+const features = [
+    { title: "Feature A", details: "Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" },
+    { title: "Feature B", details: "Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" },
+    { title: "Feature C", details: "Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" }
+]
+</script>
+
+<KikoHero
+name="KikoAPI docs"
+text="A lightweight library for our plugins."
+tagline="My great project tagline"
+:image="{
+src: 'https://raw.githubusercontent.com/KikoPlugins/.github/master/assets/logos/kikologo_transparent.png',
+alt: 'KikoAPI Logo'
+}"
+:actions="[
+{ theme: 'brand-button', text: 'Download', link: 'https://modrinth.com/plugins/kikoapi' },
+{ theme: 'brand-button', text: 'Docs', link: '/markdown-examples' },
+{ theme: 'alt', text: 'Test', link: '/api-examples' }
+]"
+/>
+
+<KikoFeature :features="features" />
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..5327fb0
--- /dev/null
+++ b/package.json
@@ -0,0 +1,14 @@
+{
+  "dependencies": {
+    "@theojs/lumen": "^6.4.5",
+    "sass": "^1.97.3"
+  },
+  "devDependencies": {
+    "vitepress": "^2.0.0-alpha.16"
+  },
+  "scripts": {
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
+  }
+}
\ No newline at end of file

From dd2f375fb62083c4151c5cab70c9abe506c33e78 Mon Sep 17 00:00:00 2001
From: AxenoDev <tbavart@gmail.com>
Date: Sat, 14 Feb 2026 11:48:05 +0100
Subject: [PATCH 04/10] feat: add runtime API examples and custom styles for
 documentation

---
 docs/pages/markdown-examples.md | 85 +++++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 docs/pages/markdown-examples.md

diff --git a/docs/pages/markdown-examples.md b/docs/pages/markdown-examples.md
new file mode 100644
index 0000000..f9258a5
--- /dev/null
+++ b/docs/pages/markdown-examples.md
@@ -0,0 +1,85 @@
+# Markdown Extension Examples
+
+This page demonstrates some of the built-in markdown extensions provided by VitePress.
+
+## Syntax Highlighting
+
+VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
+
+**Input**
+
+````md
+```js{4}
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!'
+    }
+  }
+}
+```
+````
+
+**Output**
+
+```js{4}
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!'
+    }
+  }
+}
+```
+
+## Custom Containers
+
+**Input**
+
+```md
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+```
+
+**Output**
+
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+
+## More
+
+Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).

From 74bd4decff56c2946af8c2bc554498463c94c36e Mon Sep 17 00:00:00 2001
From: AxenoDev <tbavart@gmail.com>
Date: Mon, 16 Feb 2026 17:07:41 +0100
Subject: [PATCH 05/10] add: update .gitignore to replace package-json.lock
 with bun.lock

---
 .gitignore | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index fb07ce4..9672d0a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -136,7 +136,7 @@ lerna-debug.log*
 *.sqlite
 
 # package-json
-package-json.lock
+bun.lock
 
 # bun deploy file
 node_modules.bun

From 92b50151fe572e5825cfc46d7407d02e903f8593 Mon Sep 17 00:00:00 2001
From: AxenoDev <tbavart@gmail.com>
Date: Mon, 16 Feb 2026 17:16:34 +0100
Subject: [PATCH 06/10] feat: implement image caching limit and improve error
 handling

---
 docs/.vitepress/config.mts                       |  2 +-
 docs/.vitepress/theme/components/CachedImage.vue | 10 +++++++++-
 docs/.vitepress/theme/components/KikoFeature.vue |  4 ++--
 docs/.vitepress/theme/components/KikoHero.vue    | 14 ++++++--------
 docs/.vitepress/theme/style/style.scss           |  2 --
 package.json                                     |  4 ++--
 6 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 88250e6..10ebc68 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -36,7 +36,7 @@ export default defineConfig({
         ],
 
         socialLinks: [
-            {icon: 'github', link: 'https://github.com/vuejs/vitepress'}
+            {icon: 'github', link: 'https://github.com/kikoplugin/KikoAPI'}
         ]
     }
 })
diff --git a/docs/.vitepress/theme/components/CachedImage.vue b/docs/.vitepress/theme/components/CachedImage.vue
index 81fd4d9..0d9119b 100644
--- a/docs/.vitepress/theme/components/CachedImage.vue
+++ b/docs/.vitepress/theme/components/CachedImage.vue
@@ -39,6 +39,10 @@ const getCachedImage = (url: string): string | null => {
 
 const setCachedImage = (url: string, dataUrl: string): void => {
     try {
+        if (dataUrl.length > 5 * 1024 * 1024) { // 5MB limit
+            console.warn('Image is too large to cache:', url);
+            return;
+        }
         const key = CACHE_PREFIX + btoa(url);
         const data: CachedImageData = {
             data: dataUrl,
@@ -46,7 +50,11 @@ const setCachedImage = (url: string, dataUrl: string): void => {
         };
         localStorage.setItem(key, JSON.stringify(data));
     } catch (e) {
-        console.warn('Failed to cache image:', e);
+        if (e instanceof DOMException && e.name === 'QuotaExceededError') {
+            console.warn('LocalStorage quota exceeded, cannot cache image:', e);
+        } else {
+            console.warn('Failed to retrieve cached image:', e);
+        }
     }
 };
 
diff --git a/docs/.vitepress/theme/components/KikoFeature.vue b/docs/.vitepress/theme/components/KikoFeature.vue
index 736c38b..102c5bd 100644
--- a/docs/.vitepress/theme/components/KikoFeature.vue
+++ b/docs/.vitepress/theme/components/KikoFeature.vue
@@ -26,7 +26,7 @@ defineProps<{
                         <h2 class="title" v-html="feature.title"></h2>
                         <p class="details" v-html="feature.details"></p>
                         <a v-if="feature.link" :href="feature.link" class="link">
-                            En savoir plus ->
+                            Learn More &gt;
                         </a>
                     </article>
                 </div>
@@ -145,7 +145,7 @@ defineProps<{
 .details {
     margin: 0;
     font-size: 15px;
-    line-height: 18px;
+    line-height: 1.2;
     color: var(--vp-c-text-2);
 }
 
diff --git a/docs/.vitepress/theme/components/KikoHero.vue b/docs/.vitepress/theme/components/KikoHero.vue
index 9fc95f7..5fa8e93 100644
--- a/docs/.vitepress/theme/components/KikoHero.vue
+++ b/docs/.vitepress/theme/components/KikoHero.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import type {DefaultTheme} from 'vitepress/theme'
 import {VPButton} from "vitepress/theme";
-import {computed, inject} from 'vue'
-import {layoutInfoInjectionKey} from 'vitepress/dist/client/theme-default/composables/layout'
 import CachedImage from "./CachedImage.vue";
 
 export interface HeroAction {
@@ -21,14 +19,10 @@ defineProps<{
     actions?: HeroAction[]
 }>()
 
-const {heroImageSlotExists} = inject(
-        layoutInfoInjectionKey,
-        {heroImageSlotExists: computed(() => false)}
-)
 </script>
 
 <template>
-    <div class="KikoHero" :class="{ 'has-image': image || heroImageSlotExists }">
+    <div class="KikoHero" :class="{ 'has-image': image }">
         <div class="container">
             <div class="main">
                 <slot name="home-hero-info-before"/>
@@ -58,7 +52,7 @@ const {heroImageSlotExists} = inject(
                 <slot name="home-hero-actions-after"/>
             </div>
 
-            <div v-if="image || heroImageSlotExists" class="image">
+            <div v-if="image" class="image">
                 <div class="image-container">
                     <div class="image-bg animate-image-bg"/>
                     <slot name="home-hero-image">
@@ -138,6 +132,8 @@ const {heroImageSlotExists} = inject(
 }
 
 .action {
+    flex-shrink: 0;
+    padding: 6px;
     animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
 }
 
@@ -435,6 +431,8 @@ const {heroImageSlotExists} = inject(
     object-fit: contain;
     /*rtl:ignore*/
     transform: translate(-50%, -50%);
+    animation: slideIn 0.8s ease-out forwards;
+    animation-delay: 0.3s;
 }
 
 @media (min-width: 640px) {
diff --git a/docs/.vitepress/theme/style/style.scss b/docs/.vitepress/theme/style/style.scss
index 0200a68..7e55943 100644
--- a/docs/.vitepress/theme/style/style.scss
+++ b/docs/.vitepress/theme/style/style.scss
@@ -49,9 +49,7 @@
 
     --vp-home-hero-image-background-image: linear-gradient(-45deg, rgba(252, 103, 250, 0.5) 50%, rgba(225, 117, 223, 0.5) 50%);
     --vp-home-hero-image-filter: blur(50px);
-}
 
-:root {
     --vp-custom-block-tip-border: transparent;
     --vp-custom-block-tip-text: var(--vp-c-text-1);
     --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
diff --git a/package.json b/package.json
index 5327fb0..0c8c9a6 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,9 @@
 {
   "dependencies": {
-    "@theojs/lumen": "^6.4.5",
-    "sass": "^1.97.3"
+    "@theojs/lumen": "^6.4.5"
   },
   "devDependencies": {
+    "sass": "^1.97.3",
     "vitepress": "^2.0.0-alpha.16"
   },
   "scripts": {

From bda2b299986a2786626dc2b53fa1cfe8bd27e4c4 Mon Sep 17 00:00:00 2001
From: AxenoDev <tbavart@gmail.com>
Date: Mon, 16 Feb 2026 17:18:28 +0100
Subject: [PATCH 07/10] refactor: remove unused CachedImage import from
 index.md

---
 docs/pages/index.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/pages/index.md b/docs/pages/index.md
index 1034945..43eb348 100644
--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -7,7 +7,6 @@ outline: false
 ---
 
 <script setup>
-import CachedImage from '../.vitepress/theme/components/CachedImage.vue';
 import KikoHero from '../.vitepress/theme/components/KikoHero.vue';
 import KikoFeature from '../.vitepress/theme/components/KikoFeature.vue';
 

From 5d7c7a1a97ab24f95c2c0e652aa98d6fded6e992 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=C3=A9o=20B=2E?= <tbavart@gmail.com>
Date: Mon, 16 Feb 2026 21:03:56 +0100
Subject: [PATCH 08/10] Update docs/.vitepress/config.mts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 docs/.vitepress/config.mts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 10ebc68..b589772 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -36,7 +36,7 @@ export default defineConfig({
         ],
 
         socialLinks: [
-            {icon: 'github', link: 'https://github.com/kikoplugin/KikoAPI'}
+            {icon: 'github', link: 'https://github.com/KikoPlugins/KikoAPI'}
         ]
     }
 })

From 7d05d48116eb47e6b5addcd2d6233737bf5256eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=C3=A9o=20B=2E?= <tbavart@gmail.com>
Date: Mon, 16 Feb 2026 21:04:21 +0100
Subject: [PATCH 09/10] Update docs/.vitepress/theme/components/CachedImage.vue

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 docs/.vitepress/theme/components/CachedImage.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/.vitepress/theme/components/CachedImage.vue b/docs/.vitepress/theme/components/CachedImage.vue
index 0d9119b..531d362 100644
--- a/docs/.vitepress/theme/components/CachedImage.vue
+++ b/docs/.vitepress/theme/components/CachedImage.vue
@@ -113,8 +113,11 @@ onMounted(() => {
     } else if (props.placeholder) {
         imgSrc.value = props.placeholder;
         isLoading.value = false;
+    } else {
+        isLoading.value = false;
     }
 });
+});
 
 watch(() => props.src, (newSrc) => {
     if (newSrc) {

From e013f7a713da6a2b5d622bbf5858dcd5b03492b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=C3=A9o=20B=2E?= <tbavart@gmail.com>
Date: Mon, 16 Feb 2026 21:05:53 +0100
Subject: [PATCH 10/10] Update docs/.vitepress/theme/style/style.scss

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 docs/.vitepress/theme/style/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/.vitepress/theme/style/style.scss b/docs/.vitepress/theme/style/style.scss
index 7e55943..f119072 100644
--- a/docs/.vitepress/theme/style/style.scss
+++ b/docs/.vitepress/theme/style/style.scss
@@ -28,7 +28,7 @@
  *   custom containers.
  *
  * - `default`: The color used purely for subtle indication without any
- *   special meanings attched to it such as bg color for menu hover state.
+ *   special meanings attached to it such as bg color for menu hover state.
  *
  * - `brand`: Used for primary brand colors, such as link text, button with
  *   brand theme, etc.