From 75f57159a5283726a9f67c0b07bb602928342d70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Thu, 9 Oct 2025 16:18:19 +0200
Subject: [PATCH] feat: animated icon

---
 Projects/kompose/docs/.env                    |   0
 Projects/kompose/docs/.gitignore              |   0
 Projects/kompose/docs/.npmrc                  |   0
 Projects/kompose/docs/README.md               |   0
 Projects/kompose/docs/app/app.config.ts       |   0
 Projects/kompose/docs/app/app.vue             |   0
 Projects/kompose/docs/app/assets/css/main.css |   0
 .../kompose/docs/app/components/AppFooter.vue |   0
 .../kompose/docs/app/components/AppHeader.vue |   2 +-
 .../kompose/docs/app/components/AppIcon.vue   | 609 +++++++++++++-----
 .../docs/app/components/AppIconShowcase.vue   |   0
 .../kompose/docs/app/components/AppLogo.vue   |   0
 .../app/components/OgImage/OgImageDocs.vue    |   0
 .../docs/app/components/PageHeaderLinks.vue   |   0
 .../docs/app/components/TemplateMenu.vue      |  24 +-
 .../app/components/content/HeroBackground.vue |   0
 .../docs/app/components/content/StarsBg.vue   |   0
 Projects/kompose/docs/app/error.vue           |   0
 Projects/kompose/docs/app/layouts/docs.vue    |   0
 Projects/kompose/docs/app/pages/[...slug].vue |   0
 Projects/kompose/docs/compose.yaml            |   0
 Projects/kompose/docs/content.config.ts       |   0
 Projects/kompose/docs/content/1.index.md      |   0
 .../kompose/docs/content/2.installation.md    |   0
 .../docs/content/3.guide/configuration.md     |   0
 .../kompose/docs/content/3.guide/database.md  |   0
 .../kompose/docs/content/3.guide/hooks.md     |   0
 .../kompose/docs/content/3.guide/index.md     |   0
 .../kompose/docs/content/3.guide/network.md   |   0
 .../docs/content/3.guide/quick-start.md       |   0
 .../docs/content/3.guide/stack-management.md  |   0
 .../docs/content/3.guide/troubleshooting.md   |   0
 .../kompose/docs/content/4.reference/cli.md   |   0
 .../docs/content/4.reference/environment.md   |   0
 .../kompose/docs/content/4.reference/index.md |   0
 .../kompose/docs/content/5.stacks/auth.md     |   0
 .../kompose/docs/content/5.stacks/auto.md     |   0
 .../kompose/docs/content/5.stacks/blog.md     |   0
 .../kompose/docs/content/5.stacks/chain.md    |   0
 .../kompose/docs/content/5.stacks/chat.md     |   0
 .../kompose/docs/content/5.stacks/code.md     |   0
 .../kompose/docs/content/5.stacks/dash.md     |   0
 .../kompose/docs/content/5.stacks/data.md     |   0
 .../kompose/docs/content/5.stacks/dock.md     |   0
 .../kompose/docs/content/5.stacks/home.md     |   0
 .../kompose/docs/content/5.stacks/index.md    |   0
 .../kompose/docs/content/5.stacks/link.md     |   0
 .../kompose/docs/content/5.stacks/news.md     |   0
 .../kompose/docs/content/5.stacks/proxy.md    |   0
 .../kompose/docs/content/5.stacks/sexy.md     |   0
 .../kompose/docs/content/5.stacks/trace.md    |   0
 .../kompose/docs/content/5.stacks/track.md    |   0
 .../kompose/docs/content/5.stacks/vault.md    |   0
 Projects/kompose/docs/content/5.stacks/vpn.md |   0
 Projects/kompose/docs/eslint.config.mjs       |   0
 Projects/kompose/docs/nuxt.config.ts          |   0
 Projects/kompose/docs/package.json            |   0
 Projects/kompose/docs/pnpm-lock.yaml          |   0
 Projects/kompose/docs/pnpm-workspace.yaml     |   0
 .../kompose/docs/public/apple-touch-icon.png  | Bin
 .../kompose/docs/public/favicon-96x96.png     | Bin
 Projects/kompose/docs/public/favicon.ico      | Bin
 Projects/kompose/docs/public/favicon.svg      |   0
 Projects/kompose/docs/public/icon.svg         |   0
 .../docs/public/web-app-manifest-192x192.png  | Bin
 .../docs/public/web-app-manifest-512x512.png  | Bin
 Projects/kompose/docs/renovate.json           |   0
 .../server/routes/raw/[...slug].md.get.ts     |   0
 Projects/kompose/docs/tsconfig.json           |   0
 69 files changed, 438 insertions(+), 197 deletions(-)
 mode change 100644 => 100755 Projects/kompose/docs/.env
 mode change 100644 => 100755 Projects/kompose/docs/.gitignore
 mode change 100644 => 100755 Projects/kompose/docs/.npmrc
 mode change 100644 => 100755 Projects/kompose/docs/README.md
 mode change 100644 => 100755 Projects/kompose/docs/app/app.config.ts
 mode change 100644 => 100755 Projects/kompose/docs/app/app.vue
 mode change 100644 => 100755 Projects/kompose/docs/app/assets/css/main.css
 mode change 100644 => 100755 Projects/kompose/docs/app/components/AppFooter.vue
 mode change 100644 => 100755 Projects/kompose/docs/app/components/AppHeader.vue
 mode change 100644 => 100755 Projects/kompose/docs/app/components/AppIcon.vue
 mode change 100644 => 100755 Projects/kompose/docs/app/components/AppIconShowcase.vue
 mode change 100644 => 100755 Projects/kompose/docs/app/components/AppLogo.vue
 mode change 100644 => 100755 Projects/kompose/docs/app/components/OgImage/OgImageDocs.vue
 mode change 100644 => 100755 Projects/kompose/docs/app/components/PageHeaderLinks.vue
 mode change 100644 => 100755 Projects/kompose/docs/app/components/TemplateMenu.vue
 mode change 100644 => 100755 Projects/kompose/docs/app/components/content/HeroBackground.vue
 mode change 100644 => 100755 Projects/kompose/docs/app/components/content/StarsBg.vue
 mode change 100644 => 100755 Projects/kompose/docs/app/error.vue
 mode change 100644 => 100755 Projects/kompose/docs/app/layouts/docs.vue
 mode change 100644 => 100755 Projects/kompose/docs/app/pages/[...slug].vue
 mode change 100644 => 100755 Projects/kompose/docs/compose.yaml
 mode change 100644 => 100755 Projects/kompose/docs/content.config.ts
 mode change 100644 => 100755 Projects/kompose/docs/content/1.index.md
 mode change 100644 => 100755 Projects/kompose/docs/content/2.installation.md
 mode change 100644 => 100755 Projects/kompose/docs/content/3.guide/configuration.md
 mode change 100644 => 100755 Projects/kompose/docs/content/3.guide/database.md
 mode change 100644 => 100755 Projects/kompose/docs/content/3.guide/hooks.md
 mode change 100644 => 100755 Projects/kompose/docs/content/3.guide/index.md
 mode change 100644 => 100755 Projects/kompose/docs/content/3.guide/network.md
 mode change 100644 => 100755 Projects/kompose/docs/content/3.guide/quick-start.md
 mode change 100644 => 100755 Projects/kompose/docs/content/3.guide/stack-management.md
 mode change 100644 => 100755 Projects/kompose/docs/content/3.guide/troubleshooting.md
 mode change 100644 => 100755 Projects/kompose/docs/content/4.reference/cli.md
 mode change 100644 => 100755 Projects/kompose/docs/content/4.reference/environment.md
 mode change 100644 => 100755 Projects/kompose/docs/content/4.reference/index.md
 mode change 100644 => 100755 Projects/kompose/docs/content/5.stacks/auth.md
 mode change 100644 => 100755 Projects/kompose/docs/content/5.stacks/auto.md
 mode change 100644 => 100755 Projects/kompose/docs/content/5.stacks/blog.md
 mode change 100644 => 100755 Projects/kompose/docs/content/5.stacks/chain.md
 mode change 100644 => 100755 Projects/kompose/docs/content/5.stacks/chat.md
 mode change 100644 => 100755 Projects/kompose/docs/content/5.stacks/code.md
 mode change 100644 => 100755 Projects/kompose/docs/content/5.stacks/dash.md
 mode change 100644 => 100755 Projects/kompose/docs/content/5.stacks/data.md
 mode change 100644 => 100755 Projects/kompose/docs/content/5.stacks/dock.md
 mode change 100644 => 100755 Projects/kompose/docs/content/5.stacks/home.md
 mode change 100644 => 100755 Projects/kompose/docs/content/5.stacks/index.md
 mode change 100644 => 100755 Projects/kompose/docs/content/5.stacks/link.md
 mode change 100644 => 100755 Projects/kompose/docs/content/5.stacks/news.md
 mode change 100644 => 100755 Projects/kompose/docs/content/5.stacks/proxy.md
 mode change 100644 => 100755 Projects/kompose/docs/content/5.stacks/sexy.md
 mode change 100644 => 100755 Projects/kompose/docs/content/5.stacks/trace.md
 mode change 100644 => 100755 Projects/kompose/docs/content/5.stacks/track.md
 mode change 100644 => 100755 Projects/kompose/docs/content/5.stacks/vault.md
 mode change 100644 => 100755 Projects/kompose/docs/content/5.stacks/vpn.md
 mode change 100644 => 100755 Projects/kompose/docs/eslint.config.mjs
 mode change 100644 => 100755 Projects/kompose/docs/nuxt.config.ts
 mode change 100644 => 100755 Projects/kompose/docs/package.json
 mode change 100644 => 100755 Projects/kompose/docs/pnpm-lock.yaml
 mode change 100644 => 100755 Projects/kompose/docs/pnpm-workspace.yaml
 mode change 100644 => 100755 Projects/kompose/docs/public/apple-touch-icon.png
 mode change 100644 => 100755 Projects/kompose/docs/public/favicon-96x96.png
 mode change 100644 => 100755 Projects/kompose/docs/public/favicon.ico
 mode change 100644 => 100755 Projects/kompose/docs/public/favicon.svg
 mode change 100644 => 100755 Projects/kompose/docs/public/icon.svg
 mode change 100644 => 100755 Projects/kompose/docs/public/web-app-manifest-192x192.png
 mode change 100644 => 100755 Projects/kompose/docs/public/web-app-manifest-512x512.png
 mode change 100644 => 100755 Projects/kompose/docs/renovate.json
 mode change 100644 => 100755 Projects/kompose/docs/server/routes/raw/[...slug].md.get.ts
 mode change 100644 => 100755 Projects/kompose/docs/tsconfig.json

diff --git a/Projects/kompose/docs/.env b/Projects/kompose/docs/.env
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/.gitignore b/Projects/kompose/docs/.gitignore
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/.npmrc b/Projects/kompose/docs/.npmrc
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/README.md b/Projects/kompose/docs/README.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/app/app.config.ts b/Projects/kompose/docs/app/app.config.ts
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/app/app.vue b/Projects/kompose/docs/app/app.vue
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/app/assets/css/main.css b/Projects/kompose/docs/app/assets/css/main.css
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/app/components/AppFooter.vue b/Projects/kompose/docs/app/components/AppFooter.vue
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/app/components/AppHeader.vue b/Projects/kompose/docs/app/components/AppHeader.vue
old mode 100644
new mode 100755
index 7c0191f3..2c1f308f
--- a/Projects/kompose/docs/app/components/AppHeader.vue
+++ b/Projects/kompose/docs/app/components/AppHeader.vue
@@ -22,7 +22,7 @@ const { header } = useAppConfig()
     <template v-else #left>
       <div class="flex items-center gap-6">
         <NuxtLink :to="header?.to || '/'" class="flex items-center">
-          <img src="/icon.svg" alt="kompose" class="size-7 mt-1 mr-2"></img>
+          <AppIcon size="32px" class="mt-1 mr-2" />
           <AppLogo class="!text-2xl mt-1" />
         </NuxtLink>
 
diff --git a/Projects/kompose/docs/app/components/AppIcon.vue b/Projects/kompose/docs/app/components/AppIcon.vue
old mode 100644
new mode 100755
index 907b343d..aa1eb9d4
--- a/Projects/kompose/docs/app/components/AppIcon.vue
+++ b/Projects/kompose/docs/app/components/AppIcon.vue
@@ -1,192 +1,445 @@
-<script setup>
-import { computed } from 'vue'
+<template>
+  <div
+    class="kompose-icon-wrapper"
+    :class="{ 'is-clicked': isClicked, 'is-interactive': interactive }"
+    @click="handleClick"
+    @mouseenter="handleHover"
+    @mouseleave="handleLeave"
+    @touchstart="handleTouch"
+    :style="{ width: size, height: size }"
+  >
+    <svg
+      class="kompose-icon"
+      viewBox="0 0 192 192"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <pattern id="carbon192" x="0" y="0" width="7.68" height="7.68" patternUnits="userSpaceOnUse">
+          <rect width="7.68" height="7.68" fill="#0a0e27"></rect>
+          <path d="M0,0 L3.84,3.84 M3.84,0 L7.68,3.84 M0,3.84 L3.84,7.68" stroke="#060815" stroke-width="1.5" opacity="0.5"></path>
+        </pattern>
 
-const props = defineProps({
-  size: {
-    type: Number,
-    default: 512 // Default for PWA, can be 16, 32, 192, 512, etc.
-  }
+        <linearGradient id="bgGrad192" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" style="stop-color:#1a1d2e;stop-opacity:1"></stop>
+          <stop offset="100%" style="stop-color:#0a0e27;stop-opacity:1"></stop>
+        </linearGradient>
+
+        <linearGradient id="primaryGrad192" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" class="gradient-start" style="stop-color:#00DC82;stop-opacity:1"></stop>
+          <stop offset="100%" class="gradient-end" style="stop-color:#00a86b;stop-opacity:1"></stop>
+        </linearGradient>
+
+        <filter id="glow192">
+          <feGaussianBlur stdDeviation="6" result="coloredBlur"></feGaussianBlur>
+          <feMerge>
+            <feMergeNode in="coloredBlur"></feMergeNode>
+            <feMergeNode in="SourceGraphic"></feMergeNode>
+          </feMerge>
+        </filter>
+
+        <filter id="intenseglow192">
+          <feGaussianBlur stdDeviation="12" result="coloredBlur"></feGaussianBlur>
+          <feMerge>
+            <feMergeNode in="coloredBlur"></feMergeNode>
+            <feMergeNode in="SourceGraphic"></feMergeNode>
+          </feMerge>
+        </filter>
+      </defs>
+
+      <!-- Background -->
+      <rect class="bg-rect" width="192" height="192" rx="24" fill="url(#bgGrad192)"></rect>
+      <rect class="carbon-pattern" width="192" height="192" rx="24" fill="url(#carbon192)" opacity="0.4"></rect>
+
+      <!-- Stylized K -->
+      <g class="k-letter" transform="translate(48, 48)">
+        <line class="k-line k-vertical" x1="0" y1="0" x2="0" y2="96" stroke="url(#primaryGrad192)" stroke-width="15" stroke-linecap="round" filter="url(#glow192)"></line>
+        <line class="k-line k-diagonal-top" x1="0" y1="48" x2="57.6" y2="0" stroke="url(#primaryGrad192)" stroke-width="15" stroke-linecap="round" filter="url(#glow192)"></line>
+        <line class="k-line k-diagonal-bottom" x1="0" y1="48" x2="57.6" y2="96" stroke="url(#primaryGrad192)" stroke-width="15" stroke-linecap="round" filter="url(#glow192)"></line>
+      </g>
+
+      <!-- Animated status dot -->
+      <circle class="status-dot" cx="163.2" cy="163.2" r="11.52" fill="#00DC82" opacity="0.9"></circle>
+      <circle class="status-ring" cx="163.2" cy="163.2" r="17.28" fill="none" stroke="#00DC82" stroke-width="3" opacity="0.3"></circle>
+
+      <!-- Tech corners -->
+      <line class="corner corner-tl-h" x1="15.36" y1="15.36" x2="28.8" y2="15.36" stroke="#00DC82" stroke-width="3" opacity="0.4"></line>
+      <line class="corner corner-tl-v" x1="15.36" y1="15.36" x2="15.36" y2="28.8" stroke="#00DC82" stroke-width="3" opacity="0.4"></line>
+      <line class="corner corner-tr-h" x1="176.64" y1="15.36" x2="163.2" y2="15.36" stroke="#00DC82" stroke-width="3" opacity="0.4"></line>
+      <line class="corner corner-tr-v" x1="176.64" y1="15.36" x2="176.64" y2="28.8" stroke="#00DC82" stroke-width="3" opacity="0.4"></line>
+    </svg>
+
+    <!-- Ripple effect container -->
+    <div class="ripple" v-if="showRipple"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Props {
+  size?: string
+  interactive?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: '192px',
+  interactive: true
 })
 
-const iconSize = computed(() => props.size)
-const strokeWidth = computed(() => props.size / 32) // Scales with size
+const isClicked = ref(false)
+const showRipple = ref(false)
+
+const handleClick = () => {
+  if (!props.interactive) return
+
+  isClicked.value = true
+  showRipple.value = true
+
+  setTimeout(() => {
+    isClicked.value = false
+  }, 600)
+
+  setTimeout(() => {
+    showRipple.value = false
+  }, 800)
+}
+
+const handleHover = () => {
+  if (!props.interactive) return
+  // Hover animations are handled by CSS
+}
+
+const handleLeave = () => {
+  if (!props.interactive) return
+  // Leave animations are handled by CSS
+}
+
+const handleTouch = (e: TouchEvent) => {
+  if (!props.interactive) return
+  handleClick()
+}
 </script>
 
-<template>
-  <svg
-    :width="iconSize"
-    :height="iconSize"
-    :viewBox="`0 0 ${iconSize} ${iconSize}`"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <defs>
-      <!-- Carbon fiber pattern -->
-      <pattern 
-        id="carbon" 
-        x="0" 
-        y="0" 
-        :width="iconSize / 25" 
-        :height="iconSize / 25" 
-        patternUnits="userSpaceOnUse"
-      >
-        <rect :width="iconSize / 25" :height="iconSize / 25" fill="#0a0e27"/>
-        <path 
-          :d="`M0,0 L${iconSize/50},${iconSize/50} M${iconSize/50},0 L${iconSize/25},${iconSize/50} M0,${iconSize/50} L${iconSize/50},${iconSize/25}`" 
-          stroke="#060815" 
-          :stroke-width="strokeWidth / 4" 
-          opacity="0.5"
-        />
-      </pattern>
+<style scoped>
+.kompose-icon-wrapper {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transform-style: preserve-3d;
+}
 
-      <!-- Gradient for depth -->
-      <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-        <stop offset="0%" style="stop-color:#1a1d2e;stop-opacity:1" />
-        <stop offset="100%" style="stop-color:#0a0e27;stop-opacity:1" />
-      </linearGradient>
+.kompose-icon-wrapper:not(.is-interactive) {
+  cursor: default;
+}
 
-      <!-- Primary color gradient -->
-      <linearGradient id="primaryGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-        <stop offset="0%" style="stop-color:#00DC82;stop-opacity:1" />
-        <stop offset="100%" style="stop-color:#00a86b;stop-opacity:1" />
-      </linearGradient>
+.kompose-icon {
+  width: 100%;
+  height: 100%;
+  display: block;
+  filter: drop-shadow(0 4px 20px rgba(0, 220, 130, 0.2));
+  transition: filter 0.4s ease;
+}
 
-      <!-- Glow effect -->
-      <filter id="glow">
-        <feGaussianBlur :stdDeviation="strokeWidth" result="coloredBlur"/>
-        <feMerge>
-          <feMergeNode in="coloredBlur"/>
-          <feMergeNode in="SourceGraphic"/>
-        </feMerge>
-      </filter>
-    </defs>
+/* Hover Effects */
+.kompose-icon-wrapper.is-interactive:hover {
+  transform: scale(1.05) translateY(-2px);
+}
 
-    <!-- Background with rounded corners -->
-    <rect 
-      :width="iconSize" 
-      :height="iconSize" 
-      :rx="iconSize / 8" 
-      fill="url(#bgGrad)"
-    />
-    
-    <!-- Carbon texture overlay -->
-    <rect 
-      :width="iconSize" 
-      :height="iconSize" 
-      :rx="iconSize / 8" 
-      fill="url(#carbon)" 
-      opacity="0.4"
-    />
+.kompose-icon-wrapper.is-interactive:hover .kompose-icon {
+  filter: drop-shadow(0 8px 30px rgba(0, 220, 130, 0.4));
+  animation: subtle-pulse 2s ease-in-out infinite;
+}
 
-    <!-- Stylized "K" letter with geometric design -->
-    <g :transform="`translate(${iconSize * 0.25}, ${iconSize * 0.25})`">
-      <!-- Main vertical line of K -->
-      <line 
-        :x1="0" 
-        :y1="0" 
-        :x2="0" 
-        :y2="iconSize * 0.5" 
-        stroke="url(#primaryGrad)" 
-        :stroke-width="strokeWidth * 2.5" 
-        stroke-linecap="round"
-        filter="url(#glow)"
-      />
-      
-      <!-- Upper diagonal of K -->
-      <line 
-        :x1="0" 
-        :y1="iconSize * 0.25" 
-        :x2="iconSize * 0.3" 
-        :y2="0" 
-        stroke="url(#primaryGrad)" 
-        :stroke-width="strokeWidth * 2.5" 
-        stroke-linecap="round"
-        filter="url(#glow)"
-      />
-      
-      <!-- Lower diagonal of K -->
-      <line 
-        :x1="0" 
-        :y1="iconSize * 0.25" 
-        :x2="iconSize * 0.3" 
-        :y2="iconSize * 0.5" 
-        stroke="url(#primaryGrad)" 
-        :stroke-width="strokeWidth * 2.5" 
-        stroke-linecap="round"
-        filter="url(#glow)"
-      />
-    </g>
+.kompose-icon-wrapper.is-interactive:hover .bg-rect {
+  fill: url(#bgGrad192);
+  opacity: 1;
+  animation: bg-glow 2s ease-in-out infinite;
+}
 
-    <!-- Animated status dot (bottom right) -->
-    <circle 
-      :cx="iconSize * 0.85" 
-      :cy="iconSize * 0.85" 
-      :r="iconSize * 0.06" 
-      fill="#00DC82"
-      opacity="0.9"
-    >
-      <animate
-        attributeName="opacity"
-        values="0.6;1;0.6"
-        dur="2s"
-        repeatCount="indefinite"
-      />
-      <animate
-        attributeName="r"
-        :values="`${iconSize * 0.06};${iconSize * 0.07};${iconSize * 0.06}`"
-        dur="2s"
-        repeatCount="indefinite"
-      />
-    </circle>
+.kompose-icon-wrapper.is-interactive:hover .k-letter {
+  animation: letter-glow 1.5s ease-in-out infinite;
+}
 
-    <!-- Glow ring around dot -->
-    <circle 
-      :cx="iconSize * 0.85" 
-      :cy="iconSize * 0.85" 
-      :r="iconSize * 0.09" 
-      fill="none"
-      stroke="#00DC82" 
-      :stroke-width="strokeWidth / 2"
-      opacity="0.3"
-    />
+.kompose-icon-wrapper.is-interactive:hover .k-vertical {
+  animation: line-slide-vertical 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
 
-    <!-- Tech corner accents -->
-    <line 
-      :x1="iconSize * 0.08" 
-      :y1="iconSize * 0.08" 
-      :x2="iconSize * 0.15" 
-      :y2="iconSize * 0.08" 
-      stroke="#00DC82" 
-      :stroke-width="strokeWidth / 2" 
-      opacity="0.4"
-    />
-    <line 
-      :x1="iconSize * 0.08" 
-      :y1="iconSize * 0.08" 
-      :x2="iconSize * 0.08" 
-      :y2="iconSize * 0.15" 
-      stroke="#00DC82" 
-      :stroke-width="strokeWidth / 2" 
-      opacity="0.4"
-    />
+.kompose-icon-wrapper.is-interactive:hover .k-diagonal-top {
+  animation: line-slide-diagonal-top 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
+}
 
-    <line 
-      :x1="iconSize * 0.92" 
-      :y1="iconSize * 0.08" 
-      :x2="iconSize * 0.85" 
-      :y2="iconSize * 0.08" 
-      stroke="#00DC82" 
-      :stroke-width="strokeWidth / 2" 
-      opacity="0.4"
-    />
-    <line 
-      :x1="iconSize * 0.92" 
-      :y1="iconSize * 0.08" 
-      :x2="iconSize * 0.92" 
-      :y2="iconSize * 0.15" 
-      stroke="#00DC82" 
-      :stroke-width="strokeWidth / 2" 
-      opacity="0.4"
-    />
-  </svg>
-</template>
+.kompose-icon-wrapper.is-interactive:hover .k-diagonal-bottom {
+  animation: line-slide-diagonal-bottom 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
+}
+
+.kompose-icon-wrapper.is-interactive:hover .status-dot {
+  animation: pulse-expand 1s ease-in-out infinite;
+}
+
+.kompose-icon-wrapper.is-interactive:hover .status-ring {
+  animation: ring-pulse 1.5s ease-in-out infinite;
+}
+
+.kompose-icon-wrapper.is-interactive:hover .corner {
+  opacity: 1 !important;
+  stroke: #00DC82;
+  animation: corner-extend 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/* Click/Active Effects */
+.kompose-icon-wrapper.is-clicked {
+  animation: click-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.kompose-icon-wrapper.is-clicked .kompose-icon {
+  animation: rotate-3d 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+  filter: drop-shadow(0 12px 40px rgba(0, 220, 130, 0.6));
+}
+
+.kompose-icon-wrapper.is-clicked .k-letter {
+  animation: letter-flash 0.6s ease-out;
+  filter: url(#intenseglow192);
+}
+
+.kompose-icon-wrapper.is-clicked .status-dot {
+  animation: dot-burst 0.6s ease-out;
+}
+
+/* Ripple Effect */
+.ripple {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(0, 220, 130, 0.6) 0%, rgba(0, 220, 130, 0) 70%);
+  transform: translate(-50%, -50%) scale(0);
+  animation: ripple-expand 0.8s ease-out;
+  pointer-events: none;
+}
+
+/* Default animations for status dot */
+.status-dot {
+  animation: default-pulse 2s ease-in-out infinite;
+}
+
+.status-ring {
+  animation: default-ring-pulse 2s ease-in-out infinite;
+}
+
+/* Keyframe Animations */
+@keyframes subtle-pulse {
+  0%, 100% {
+    filter: drop-shadow(0 8px 30px rgba(0, 220, 130, 0.4));
+  }
+  50% {
+    filter: drop-shadow(0 8px 35px rgba(0, 220, 130, 0.6));
+  }
+}
+
+@keyframes bg-glow {
+  0%, 100% {
+    filter: brightness(1);
+  }
+  50% {
+    filter: brightness(1.1);
+  }
+}
+
+@keyframes letter-glow {
+  0%, 100% {
+    filter: url(#glow192);
+  }
+  50% {
+    filter: url(#intenseglow192);
+  }
+}
+
+@keyframes line-slide-vertical {
+  0% {
+    stroke-dasharray: 96;
+    stroke-dashoffset: 96;
+  }
+  100% {
+    stroke-dasharray: 96;
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes line-slide-diagonal-top {
+  0% {
+    stroke-dasharray: 68;
+    stroke-dashoffset: 68;
+  }
+  100% {
+    stroke-dasharray: 68;
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes line-slide-diagonal-bottom {
+  0% {
+    stroke-dasharray: 68;
+    stroke-dashoffset: 68;
+  }
+  100% {
+    stroke-dasharray: 68;
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes pulse-expand {
+  0%, 100% {
+    r: 11.52;
+    opacity: 0.9;
+  }
+  50% {
+    r: 14;
+    opacity: 1;
+  }
+}
+
+@keyframes ring-pulse {
+  0%, 100% {
+    r: 17.28;
+    opacity: 0.3;
+    stroke-width: 3;
+  }
+  50% {
+    r: 20;
+    opacity: 0.6;
+    stroke-width: 2;
+  }
+}
+
+@keyframes corner-extend {
+  0% {
+    stroke-dasharray: 13.44;
+    stroke-dashoffset: 13.44;
+  }
+  100% {
+    stroke-dasharray: 13.44;
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes click-bounce {
+  0% {
+    transform: scale(1) translateY(0) rotateY(0deg);
+  }
+  30% {
+    transform: scale(0.92) translateY(0) rotateY(0deg);
+  }
+  50% {
+    transform: scale(1.08) translateY(-4px) rotateY(180deg);
+  }
+  70% {
+    transform: scale(0.98) translateY(0) rotateY(360deg);
+  }
+  100% {
+    transform: scale(1) translateY(0) rotateY(360deg);
+  }
+}
+
+@keyframes rotate-3d {
+  0% {
+    transform: perspective(800px) rotateY(0deg);
+  }
+  50% {
+    transform: perspective(800px) rotateY(180deg);
+  }
+  100% {
+    transform: perspective(800px) rotateY(360deg);
+  }
+}
+
+@keyframes letter-flash {
+  0%, 100% {
+    opacity: 1;
+  }
+  20%, 60% {
+    opacity: 0.7;
+  }
+  40%, 80% {
+    opacity: 1;
+  }
+}
+
+@keyframes dot-burst {
+  0% {
+    r: 11.52;
+    opacity: 0.9;
+  }
+  50% {
+    r: 20;
+    opacity: 1;
+  }
+  100% {
+    r: 11.52;
+    opacity: 0.9;
+  }
+}
+
+@keyframes ripple-expand {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(2.5);
+    opacity: 0;
+  }
+}
+
+@keyframes default-pulse {
+  0%, 100% {
+    opacity: 0.6;
+    r: 11.52;
+  }
+  50% {
+    opacity: 1;
+    r: 13.44;
+  }
+}
+
+@keyframes default-ring-pulse {
+  0%, 100% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .kompose-icon-wrapper.is-interactive:hover {
+    transform: scale(1.03) translateY(-1px);
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .kompose-icon-wrapper,
+  .kompose-icon,
+  .kompose-icon *,
+  .ripple {
+    animation: none !important;
+    transition: none !important;
+  }
+
+  .kompose-icon-wrapper.is-interactive:hover {
+    transform: scale(1.02);
+  }
+}
+
+/* Touch device optimizations */
+@media (hover: none) and (pointer: coarse) {
+  .kompose-icon-wrapper.is-interactive:active {
+    transform: scale(0.95);
+  }
+}
+</style>
diff --git a/Projects/kompose/docs/app/components/AppIconShowcase.vue b/Projects/kompose/docs/app/components/AppIconShowcase.vue
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/app/components/AppLogo.vue b/Projects/kompose/docs/app/components/AppLogo.vue
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/app/components/OgImage/OgImageDocs.vue b/Projects/kompose/docs/app/components/OgImage/OgImageDocs.vue
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/app/components/PageHeaderLinks.vue b/Projects/kompose/docs/app/components/PageHeaderLinks.vue
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/app/components/TemplateMenu.vue b/Projects/kompose/docs/app/components/TemplateMenu.vue
old mode 100644
new mode 100755
index 3b63a1c6..54418046
--- a/Projects/kompose/docs/app/components/TemplateMenu.vue
+++ b/Projects/kompose/docs/app/components/TemplateMenu.vue
@@ -3,11 +3,11 @@
     v-slot="{ open }"
     :modal="false"
     :items="[{
-      label: 'Starter',
-      to: 'https://starter-template.nuxt.dev/'
+      label: 'Blog',
+      to: 'https://pivoine.art'
     }, {
-      label: 'Landing',
-      to: 'https://landing-template.nuxt.dev/'
+      label: 'Code',
+      to: 'https://code.pivoine.art'
     }, {
       label: 'Docs',
       to: 'https://docs-template.nuxt.dev/',
@@ -15,20 +15,8 @@
       checked: true,
       type: 'checkbox'
     }, {
-      label: 'SaaS',
-      to: 'https://saas-template.nuxt.dev/'
-    }, {
-      label: 'Dashboard',
-      to: 'https://dashboard-template.nuxt.dev/'
-    }, {
-      label: 'Chat',
-      to: 'https://chat-template.nuxt.dev/'
-    }, {
-      label: 'Portfolio',
-      to: 'https://portfolio-template.nuxt.dev/'
-    }, {
-      label: 'Changelog',
-      to: 'https://changelog-template.nuxt.dev/'
+      label: 'Sexy',
+      to: 'https://sexy.pivoine.art'
     }]"
     :content="{ align: 'start' }"
     :ui="{ content: 'min-w-fit' }"
diff --git a/Projects/kompose/docs/app/components/content/HeroBackground.vue b/Projects/kompose/docs/app/components/content/HeroBackground.vue
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/app/components/content/StarsBg.vue b/Projects/kompose/docs/app/components/content/StarsBg.vue
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/app/error.vue b/Projects/kompose/docs/app/error.vue
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/app/layouts/docs.vue b/Projects/kompose/docs/app/layouts/docs.vue
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/app/pages/[...slug].vue b/Projects/kompose/docs/app/pages/[...slug].vue
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/compose.yaml b/Projects/kompose/docs/compose.yaml
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content.config.ts b/Projects/kompose/docs/content.config.ts
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/1.index.md b/Projects/kompose/docs/content/1.index.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/2.installation.md b/Projects/kompose/docs/content/2.installation.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/3.guide/configuration.md b/Projects/kompose/docs/content/3.guide/configuration.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/3.guide/database.md b/Projects/kompose/docs/content/3.guide/database.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/3.guide/hooks.md b/Projects/kompose/docs/content/3.guide/hooks.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/3.guide/index.md b/Projects/kompose/docs/content/3.guide/index.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/3.guide/network.md b/Projects/kompose/docs/content/3.guide/network.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/3.guide/quick-start.md b/Projects/kompose/docs/content/3.guide/quick-start.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/3.guide/stack-management.md b/Projects/kompose/docs/content/3.guide/stack-management.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/3.guide/troubleshooting.md b/Projects/kompose/docs/content/3.guide/troubleshooting.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/4.reference/cli.md b/Projects/kompose/docs/content/4.reference/cli.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/4.reference/environment.md b/Projects/kompose/docs/content/4.reference/environment.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/4.reference/index.md b/Projects/kompose/docs/content/4.reference/index.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/5.stacks/auth.md b/Projects/kompose/docs/content/5.stacks/auth.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/5.stacks/auto.md b/Projects/kompose/docs/content/5.stacks/auto.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/5.stacks/blog.md b/Projects/kompose/docs/content/5.stacks/blog.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/5.stacks/chain.md b/Projects/kompose/docs/content/5.stacks/chain.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/5.stacks/chat.md b/Projects/kompose/docs/content/5.stacks/chat.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/5.stacks/code.md b/Projects/kompose/docs/content/5.stacks/code.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/5.stacks/dash.md b/Projects/kompose/docs/content/5.stacks/dash.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/5.stacks/data.md b/Projects/kompose/docs/content/5.stacks/data.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/5.stacks/dock.md b/Projects/kompose/docs/content/5.stacks/dock.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/5.stacks/home.md b/Projects/kompose/docs/content/5.stacks/home.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/5.stacks/index.md b/Projects/kompose/docs/content/5.stacks/index.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/5.stacks/link.md b/Projects/kompose/docs/content/5.stacks/link.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/5.stacks/news.md b/Projects/kompose/docs/content/5.stacks/news.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/5.stacks/proxy.md b/Projects/kompose/docs/content/5.stacks/proxy.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/5.stacks/sexy.md b/Projects/kompose/docs/content/5.stacks/sexy.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/5.stacks/trace.md b/Projects/kompose/docs/content/5.stacks/trace.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/5.stacks/track.md b/Projects/kompose/docs/content/5.stacks/track.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/5.stacks/vault.md b/Projects/kompose/docs/content/5.stacks/vault.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/content/5.stacks/vpn.md b/Projects/kompose/docs/content/5.stacks/vpn.md
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/eslint.config.mjs b/Projects/kompose/docs/eslint.config.mjs
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/nuxt.config.ts b/Projects/kompose/docs/nuxt.config.ts
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/package.json b/Projects/kompose/docs/package.json
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/pnpm-lock.yaml b/Projects/kompose/docs/pnpm-lock.yaml
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/pnpm-workspace.yaml b/Projects/kompose/docs/pnpm-workspace.yaml
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/public/apple-touch-icon.png b/Projects/kompose/docs/public/apple-touch-icon.png
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/public/favicon-96x96.png b/Projects/kompose/docs/public/favicon-96x96.png
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/public/favicon.ico b/Projects/kompose/docs/public/favicon.ico
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/public/favicon.svg b/Projects/kompose/docs/public/favicon.svg
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/public/icon.svg b/Projects/kompose/docs/public/icon.svg
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/public/web-app-manifest-192x192.png b/Projects/kompose/docs/public/web-app-manifest-192x192.png
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/public/web-app-manifest-512x512.png b/Projects/kompose/docs/public/web-app-manifest-512x512.png
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/renovate.json b/Projects/kompose/docs/renovate.json
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/server/routes/raw/[...slug].md.get.ts b/Projects/kompose/docs/server/routes/raw/[...slug].md.get.ts
old mode 100644
new mode 100755
diff --git a/Projects/kompose/docs/tsconfig.json b/Projects/kompose/docs/tsconfig.json
old mode 100644
new mode 100755