From 523767bcde19f0d10667f0a9fc6ecbdba903efc2 Mon Sep 17 00:00:00 2001
From: cihandeniz <cihan@gcbrains.com>
Date: Wed, 12 Nov 2025 14:17:20 +0100
Subject: [PATCH 1/5] init `issue/theme-system`

- reorganize docs and demos for new theme system
---
 .theme/app/assets/styles.scss                 |  0
 .../theme-variables.vue}                      |  0
 .../using-components.vue}                     |  0
 .../{tailwind.vue => css/using-utilities.vue} |  0
 .theme/package.json                           |  3 +-
 vue-files.md                                  | 53 +++++++++----------
 6 files changed, 25 insertions(+), 31 deletions(-)
 delete mode 100644 .theme/app/assets/styles.scss
 rename .theme/app/pages/demo/{scss/global-variables.vue => css/theme-variables.vue} (100%)
 rename .theme/app/pages/demo/{scss/style-with-scss.vue => css/using-components.vue} (100%)
 rename .theme/app/pages/demo/{tailwind.vue => css/using-utilities.vue} (100%)

diff --git a/.theme/app/assets/styles.scss b/.theme/app/assets/styles.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/.theme/app/pages/demo/scss/global-variables.vue b/.theme/app/pages/demo/css/theme-variables.vue
similarity index 100%
rename from .theme/app/pages/demo/scss/global-variables.vue
rename to .theme/app/pages/demo/css/theme-variables.vue
diff --git a/.theme/app/pages/demo/scss/style-with-scss.vue b/.theme/app/pages/demo/css/using-components.vue
similarity index 100%
rename from .theme/app/pages/demo/scss/style-with-scss.vue
rename to .theme/app/pages/demo/css/using-components.vue
diff --git a/.theme/app/pages/demo/tailwind.vue b/.theme/app/pages/demo/css/using-utilities.vue
similarity index 100%
rename from .theme/app/pages/demo/tailwind.vue
rename to .theme/app/pages/demo/css/using-utilities.vue
diff --git a/.theme/package.json b/.theme/package.json
index b7477b3c..694da590 100644
--- a/.theme/package.json
+++ b/.theme/package.json
@@ -24,8 +24,7 @@
     "@primevue/nuxt-module": "4.3.9",
     "cross-env": "10.0.0",
     "log-symbols": "7.0.1",
-    "nuxt": "4.1.2",
-    "sass": "1.93.0"
+    "nuxt": "4.1.2"
   },
   "dependencies": {
     "@primeuix/themes": "1.2.3",
diff --git a/vue-files.md b/vue-files.md
index d1e6f13d..44d51d67 100644
--- a/vue-files.md
+++ b/vue-files.md
@@ -44,30 +44,17 @@ can be used in computed properties as shown in
 
 Demo is at [/demo/computed/with-ref](/demo/computed/with-ref)
 
-## Using Scss
+## Style
 
-Here you can find how to use Scss in nuxt, to learn about Css and Scss syntax
-check out our [learn-css](https://github.com/mouseless/learn-css) repository.
+Here you can find how we use CSS in Nuxt. To see our conventions and learnings
+for CSS, check out the [learn-css](https://github.com/mouseless/learn-css)
+repository.
 
-## Style with Tailwind
+### Setting Up a Theme System
 
-You must install `tailwindcss` and `@tailwindcss/vite` 
-packages in your project. Then configure Tailwind in your nuxt project by following the `nuxt.config.ts` file in `.theme/nuxt.config.ts`.
+...
 
-To style a component using Tailwind you can refer to
-`./theme/app/pages/demo/tailwind.vue`
-And use Tailwind classes as can be seen in the file.
-
-Demo is at [/demo/tailwind](/demo/tailwind)
-
-### Style With Scss
-
-To style a component using Scss you can refer to
-`./theme/app/pages/demo/scss/style-with-scss.vue`
-
-Demo is at [/demo/scss/style-with-scss](/demo/scss/style-with-scss)
-
-### Adding & Using Global Variables
+### Theme Variables
 
 To add global variables create an `assets` folder at the root of your project
 and add `variables.scss` file. In this file global variables can be created.
@@ -85,18 +72,26 @@ To use the global variables simply use the variables created in
 > You need to use a sass-loader and configure `nuxt.config.ts` for global
 > variables to work.
 
-Demo is at [/demo/scss/global-variables](/demo/scss/global-variables)
+Demo is at [/demo/css/theme-variables](/demo/css/theme-variables)
 
-### Global Style
+### Using Utilities
 
-To add a global style create `styles.scss` file in your assets folder and add
-styles as can be seen in `./theme/app/assets/styles.scss`. Global styles will
-work like a default style, only when the specific style is not given in the
-component.
+You must install `tailwindcss` and `@tailwindcss/vite` packages in your project.
+Then configure Tailwind in your nuxt project by following the `nuxt.config.ts`
+file in `.theme/nuxt.config.ts`.
 
-> [!WARNING]
->
-> You need to specify the `styles.scss` as global style in `nuxt.config.ts`
+To style a component using Tailwind you can refer to
+`./theme/app/pages/demo/css/using-utilities.vue`. And use Tailwind classes as can be
+seen in the file.
+
+Demo is at [/demo/css/using-utilities](/demo/css/using-utilities)
+
+### Using Components
+
+To style a component using Scss you can refer to
+`./theme/app/pages/demo/scss/style-with-scss.vue`
+
+Demo is at [/demo/css/using-components](/demo/css/using-components)
 
 ## Handling Errors
 

From 11da39cb22ff12b525b8f03164596c7504c90bd5 Mon Sep 17 00:00:00 2001
From: cihandeniz <cihan@gcbrains.com>
Date: Wed, 12 Nov 2025 15:53:18 +0100
Subject: [PATCH 2/5] apply theme system

- improve nav responsive
- add missing base styles to `a` and `li`
- remove `scss`
---
 .theme/app/assets/components.css              |  30 ++++
 .theme/app/assets/{tailwind.css => theme.css} |  27 +++-
 .theme/app/assets/variables.scss              |  22 ---
 .theme/app/components/Mermaid.vue             |  10 +-
 .../app/components/Prose/ProseBlockquote.vue  |  24 ++-
 .theme/app/layouts/default.vue                |  48 +++---
 .theme/app/pages/demo/css/theme-variables.vue |  23 ++-
 .../app/pages/demo/css/using-components.vue   |  16 +-
 .theme/nuxt.config.ts                         |   6 +-
 .theme/package-lock.json                      | 149 ++++++------------
 .theme/public/layers.css                      |   1 +
 content.md                                    |  12 +-
 12 files changed, 162 insertions(+), 206 deletions(-)
 create mode 100644 .theme/app/assets/components.css
 rename .theme/app/assets/{tailwind.css => theme.css} (90%)
 delete mode 100644 .theme/app/assets/variables.scss
 create mode 100644 .theme/public/layers.css

diff --git a/.theme/app/assets/components.css b/.theme/app/assets/components.css
new file mode 100644
index 00000000..76c376bb
--- /dev/null
+++ b/.theme/app/assets/components.css
@@ -0,0 +1,30 @@
+@reference "./theme.css";
+
+@layer utilities {
+  li {
+    list-style-type: square;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  img.nuxt:is(.logo) {
+    content: url(https://nuxt.com/assets/design-kit/logo-green-black.svg);
+
+    @media (prefers-color-scheme: dark) {
+      content: url(https://nuxt.com/assets/design-kit/logo-green-white.svg);
+    }
+  }
+
+  .c--basic {
+    --justify-content-default: center;
+
+    display: flex;
+    justify-content: var(--justify-content-default);
+    background-color: beige;
+
+    font-size: 2rem;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  }
+}
diff --git a/.theme/app/assets/tailwind.css b/.theme/app/assets/theme.css
similarity index 90%
rename from .theme/app/assets/tailwind.css
rename to .theme/app/assets/theme.css
index 12530dd1..5f1d9728 100644
--- a/.theme/app/assets/tailwind.css
+++ b/.theme/app/assets/theme.css
@@ -1,6 +1,29 @@
+@import "https://brand.mouseless.codes/assets/css/default.css";
 @import "tailwindcss/theme" layer(theme);
 @import "tailwindcss/preflight" layer(base);
-@import "tailwindcss/utilities";
+@import "tailwindcss/utilities" layer(utilities);
+
+:root {
+  --color-primary: var(--color-red-500);
+  --color-primary-text: var(--color-gray-100);
+  --color-primary-border: var(--color-red-900);
+  --color-primary-line: var(--color-gray-500);
+  --color-secondary: var(--color-darkgreen-800);
+  --color-secondary-text: var(--color-gray-300);
+  --color-tertiary: var(--color-darkgreen-700);
+
+  --font-size: 16px;
+  --height-logo: 30px;
+  --height-logo-small: calc(var(--height-logo) / 2);
+
+  --max-width-content: 64rem;
+
+  /* theme variables samples */
+  --justify-content-default: center;
+  --theme-color-default: burlywood;
+  --font-size-default: 2rem;
+  --font-family-default: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
 
 @theme {
   /* ----- */
@@ -227,4 +250,4 @@
   .content {
     /* @apply max-md:max-w-[90%]; this is an example */
   }
-}
\ No newline at end of file
+}
diff --git a/.theme/app/assets/variables.scss b/.theme/app/assets/variables.scss
deleted file mode 100644
index 5e58e80a..00000000
--- a/.theme/app/assets/variables.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-$justify-content-default: center;
-
-$theme-color-default: burlywood;
-
-$font-size-default: 2rem;
-$font-family-dafault: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-
-:root {
-  --color-primary: var(--color-red-500);
-  --color-primary-text: var(--color-gray-100);
-  --color-primary-border: var(--color-red-900);
-  --color-primary-line: var(--color-gray-500);
-  --color-secondary: var(--color-darkgreen-800);
-  --color-secondary-text: var(--color-gray-300);
-  --color-tertiary: var(--color-darkgreen-700);
-
-  --font-size: 16px;
-  --height-logo: 30px;
-  --height-logo-small: calc(var(--height-logo) / 2);
-
-  --max-width-content: 64rem;
-}
\ No newline at end of file
diff --git a/.theme/app/components/Mermaid.vue b/.theme/app/components/Mermaid.vue
index 80571142..f40046d3 100644
--- a/.theme/app/components/Mermaid.vue
+++ b/.theme/app/components/Mermaid.vue
@@ -1,5 +1,8 @@
 <template>
-  <div ref="mermaidContainer" class="mermaid">
+  <div
+    ref="mermaidContainer"
+    class="not-[data-processed]:text-transparent"
+  >
     <slot />
   </div>
 </template>
@@ -27,8 +30,3 @@ onMounted(async() => {
   }
 });
 </script>
-<style scoped>
-.mermaid:not([data-processed]) {
-  color: transparent;
-}
-</style>
\ No newline at end of file
diff --git a/.theme/app/components/Prose/ProseBlockquote.vue b/.theme/app/components/Prose/ProseBlockquote.vue
index 25c3643e..7754e84f 100644
--- a/.theme/app/components/Prose/ProseBlockquote.vue
+++ b/.theme/app/components/Prose/ProseBlockquote.vue
@@ -1,5 +1,13 @@
 <template>
-  <blockquote :class="type" class="pl-4 border-l-4 border-solid ml-4">
+  <blockquote
+    class="pl-4 border-l-4 border-solid ml-4"
+    :class="{
+      'text-blue-n1': type === 'info',
+      'text-orange-0': type === 'warning',
+      'text-green-n1': type === 'success',
+      'text-fg': type === 'default'
+    }"
+  >
     <component :is="() => body" />
   </blockquote>
 </template>
@@ -39,17 +47,3 @@ const body = computed(() => {
   return result;
 });
 </script>
-<style scoped>
-.info {
-  border-color: var(--color-blue-n1);
-}
-.warning {
-  border-color: var(--color-orange-0);
-}
-.success {
-  border-color: var(--color-green-n1);
-}
-.default {
-  border-color: var(--color-fg);
-}
-</style>
diff --git a/.theme/app/layouts/default.vue b/.theme/app/layouts/default.vue
index 278aa251..7ecff47f 100644
--- a/.theme/app/layouts/default.vue
+++ b/.theme/app/layouts/default.vue
@@ -32,23 +32,28 @@
         >
       </NuxtLink>
     </div>
-    <nav
-      class="
-        m-auto text-center max-md:text-left
-        max-w-(--max-width-content)
-        [&>a.left+a.right]:pl-8 [&>a.left+a.right]:max-md:pl-0
-      "
-    >
-      <NuxtLink
-        v-for="menu in menus"
-        :key="menu.title"
-        :to="menu.path == $route.path ? '' : menu.path"
-        :class="menu.position < 100 ? 'left' : 'right'"
-        class="text-fg-soft no-underline m-1 font-normal hover:text-logo-mark max-md:block"
-      >
-        {{ menu.title }}
-      </NuxtLink>
-    </nav>
+    <div class="flex flex-col w-full gap-sm max-md:items-start max-md:text-sm">
+      <nav class="flex flex-wrap mx-auto text-center max-md:text-left max-md:m-0">
+        <NuxtLink
+          v-for="menu in menus.filter(m => m.position < 100)"
+          :key="menu.title"
+          :to="menu.path == $route.path ? '' : menu.path"
+          class="text-fg-soft no-underline m-1 font-normal hover:text-logo-mark"
+        >
+          {{ menu.title }}
+        </NuxtLink>
+      </nav>
+      <nav class="flex flex-wrap mx-auto text-center max-md:text-left max-md:m-0">
+        <NuxtLink
+          v-for="menu in menus.filter(m => m.position >= 100)"
+          :key="menu.title"
+          :to="menu.path == $route.path ? '' : menu.path"
+          class="text-fg-soft no-underline m-1 font-normal hover:text-logo-mark"
+        >
+          {{ menu.title }}
+        </NuxtLink>
+      </nav>
+    </div>
   </header>
   <article class="m-auto pt-0 px-sm pt-sm max-w-(--width-content)">
     <slot />
@@ -60,12 +65,3 @@ const menus = await queryCollection("headers")
   .order("position", "ASC")
   .all();
 </script>
-<style scoped lang="scss">
-img.nuxt:is(.logo) {
-  content: url(https://nuxt.com/assets/design-kit/logo-green-black.svg);
-
-  @media (prefers-color-scheme: dark) {
-    content: url(https://nuxt.com/assets/design-kit/logo-green-white.svg);
-  }
-}
-</style>
diff --git a/.theme/app/pages/demo/css/theme-variables.vue b/.theme/app/pages/demo/css/theme-variables.vue
index 481199d7..f0126087 100644
--- a/.theme/app/pages/demo/css/theme-variables.vue
+++ b/.theme/app/pages/demo/css/theme-variables.vue
@@ -1,16 +1,13 @@
 <template>
-  <div class="class-with-global-variable">
-    Styled with Scss using global variable
+  <div
+    class="
+      flex
+      justify-(--justify-content-default)
+      bg-(--theme-color-default)
+      text-(length:--font-size-default)
+      font-(--font-family-default)
+    "
+  >
+    Styled with utilities using global variable
   </div>
 </template>
-<style lang="scss">
-.class-with-global-variable {
-  display: flex;
-  justify-content: $justify-content-default;
-  background-color: $theme-color-default;
-  font: {
-    size: $font-size-default;
-    family:$font-family-dafault;
-  }
-}
-</style>
diff --git a/.theme/app/pages/demo/css/using-components.vue b/.theme/app/pages/demo/css/using-components.vue
index cc05867b..bf543b0b 100644
--- a/.theme/app/pages/demo/css/using-components.vue
+++ b/.theme/app/pages/demo/css/using-components.vue
@@ -1,17 +1,7 @@
 <template>
-  <div class="basic">
-    Styled with Scss
+  <div class="c--basic">
+    Styled with Components
   </div>
 </template>
-<style lang="scss">
-$justify-content-default: center;
-.basic {
-  display: flex;
-  justify-content: $justify-content-default;
-  background-color: beige;
-  font: {
-    size: 2rem;
-    family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-  }
-}
+<style>
 </style>
diff --git a/.theme/nuxt.config.ts b/.theme/nuxt.config.ts
index e1deb602..2d40dcb3 100644
--- a/.theme/nuxt.config.ts
+++ b/.theme/nuxt.config.ts
@@ -18,7 +18,7 @@ export default defineNuxtConfig({
         {
           rel: "stylesheet",
           type: "text/css",
-          href: "https://brand.mouseless.codes/assets/css/default.css"
+          href: `${import.meta.env.BASE_URL ?? ""}/layers.css`
         }
       ],
       meta: [
@@ -89,7 +89,7 @@ export default defineNuxtConfig({
       nativeSqlite: true
     }
   },
-  css: ["~/assets/styles.scss", "~/assets/tailwind.css"],
+  css: ["~/assets/theme.css", "~/assets/components.css"],
   devtools: { enabled: false },
   dir: {
     public: ".public"
@@ -159,4 +159,4 @@ export default defineNuxtConfig({
       }
     }
   }
-});
\ No newline at end of file
+});
diff --git a/.theme/package-lock.json b/.theme/package-lock.json
index b4713648..550dbc91 100644
--- a/.theme/package-lock.json
+++ b/.theme/package-lock.json
@@ -25,8 +25,7 @@
         "@primevue/nuxt-module": "4.3.9",
         "cross-env": "10.0.0",
         "log-symbols": "7.0.1",
-        "nuxt": "4.1.2",
-        "sass": "1.93.0"
+        "nuxt": "4.1.2"
       }
     },
     "node_modules/@antfu/install-pkg": {
@@ -100,6 +99,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1114,7 +1114,6 @@
       "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@eslint/object-schema": "^2.1.7",
         "debug": "^4.3.1",
@@ -1130,7 +1129,6 @@
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "license": "ISC",
-      "peer": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -1144,7 +1142,6 @@
       "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@eslint/core": "^0.17.0"
       },
@@ -1205,7 +1202,6 @@
       "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
@@ -1230,7 +1226,6 @@
       "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -1244,7 +1239,6 @@
       "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 4"
       }
@@ -1255,7 +1249,6 @@
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "license": "ISC",
-      "peer": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -1282,7 +1275,6 @@
       "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
@@ -1293,7 +1285,6 @@
       "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@eslint/core": "^0.17.0",
         "levn": "^0.4.1"
@@ -1308,7 +1299,6 @@
       "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=18.18.0"
       }
@@ -1319,7 +1309,6 @@
       "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@humanfs/core": "^0.19.1",
         "@humanwhocodes/retry": "^0.4.0"
@@ -1334,7 +1323,6 @@
       "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=12.22"
       },
@@ -1349,7 +1337,6 @@
       "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=18.18"
       },
@@ -3542,7 +3529,7 @@
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
       "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
-      "dev": true,
+      "devOptional": true,
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -3879,7 +3866,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
       "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "detect-libc": "bin/detect-libc.js"
@@ -5564,7 +5551,8 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/lodash": {
       "version": "4.17.20",
@@ -5654,6 +5642,7 @@
       "integrity": "sha512-6m1I5RmHBGTnUGS113G04DMu3CpSdxCAU/UvtjNWL4Nuf3MW9tQhiJqRlHzChIkhy6kZSAQmc+I1bcGjE3yNKg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.3",
         "@typescript-eslint/types": "8.46.3",
@@ -6418,6 +6407,7 @@
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.24.tgz",
       "integrity": "sha512-8EG5YPRgmTB+YxYBM3VXy8zHD9SWHUJLIGPhDovo3Z8VOgvP+O7UP5vl0J4BBPWYD9vxtBabzW1EuEZ+Cqs14g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/parser": "^7.28.5",
         "@vue/compiler-core": "3.5.24",
@@ -6446,7 +6436,6 @@
       "integrity": "sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/devtools-kit": "^7.7.7"
       }
@@ -6611,6 +6600,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6654,7 +6644,6 @@
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -6986,6 +6975,7 @@
       "integrity": "sha512-FFf+rsghyvXQIPV/6PDUj05EsuZA1b0drGLzNgtrELkXnJKUH6NNM2h7Ce7dkA6vvPOM4SOoUIDGRPy3yRKmqw==",
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "bindings": "^1.5.0",
         "prebuild-install": "^7.1.1"
@@ -7088,7 +7078,6 @@
       "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -7098,7 +7087,7 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "fill-range": "^7.1.1"
@@ -7127,6 +7116,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.19",
         "caniuse-lite": "^1.0.30001751",
@@ -7273,7 +7263,6 @@
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -7329,7 +7318,6 @@
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -7407,6 +7395,7 @@
       "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-11.0.3.tgz",
       "integrity": "sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@chevrotain/cst-dts-gen": "11.0.3",
         "@chevrotain/gast": "11.0.3",
@@ -7715,8 +7704,7 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/confbox": {
       "version": "0.2.2",
@@ -8092,6 +8080,7 @@
       "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.33.1.tgz",
       "integrity": "sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10"
       }
@@ -8492,6 +8481,7 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
+      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -8687,8 +8677,7 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/deepmerge": {
       "version": "4.3.1",
@@ -9135,6 +9124,7 @@
       "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -9685,7 +9675,6 @@
       "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^5.2.0"
@@ -9703,7 +9692,6 @@
       "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
@@ -9717,7 +9705,6 @@
       "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "locate-path": "^6.0.0",
         "path-exists": "^4.0.0"
@@ -9735,7 +9722,6 @@
       "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 4"
       }
@@ -9746,7 +9732,6 @@
       "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "p-locate": "^5.0.0"
       },
@@ -9763,7 +9748,6 @@
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "license": "ISC",
-      "peer": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -9777,7 +9761,6 @@
       "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "yocto-queue": "^0.1.0"
       },
@@ -9794,7 +9777,6 @@
       "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "p-limit": "^3.0.2"
       },
@@ -9811,7 +9793,6 @@
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -9822,7 +9803,6 @@
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -10018,8 +9998,7 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/fast-fifo": {
       "version": "1.3.2",
@@ -10101,16 +10080,14 @@
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/fast-npm-meta": {
       "version": "0.4.7",
@@ -10155,7 +10132,6 @@
       "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "flat-cache": "^4.0.0"
       },
@@ -10173,7 +10149,7 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -10232,7 +10208,6 @@
       "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "flatted": "^3.2.9",
         "keyv": "^4.5.4"
@@ -10246,8 +10221,7 @@
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
       "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
       "dev": true,
-      "license": "ISC",
-      "peer": true
+      "license": "ISC"
     },
     "node_modules/foreground-child": {
       "version": "3.3.1",
@@ -10462,7 +10436,6 @@
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
       "dev": true,
       "license": "ISC",
-      "peer": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -10625,7 +10598,6 @@
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -11153,8 +11125,8 @@
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
       "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
-      "devOptional": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true
     },
     "node_modules/import-fresh": {
       "version": "3.3.1",
@@ -11162,7 +11134,6 @@
       "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -11194,7 +11165,6 @@
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.8.19"
       }
@@ -11387,7 +11357,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -11407,7 +11377,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -11474,7 +11444,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
@@ -11684,8 +11654,7 @@
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/json-schema-to-typescript": {
       "version": "15.0.4",
@@ -11756,16 +11725,14 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/json5": {
       "version": "2.2.3",
@@ -11874,7 +11841,6 @@
       "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "json-buffer": "3.0.1"
       }
@@ -12392,8 +12358,7 @@
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/lodash.uniq": {
       "version": "4.5.0",
@@ -13408,7 +13373,7 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
@@ -13422,7 +13387,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -13864,7 +13829,7 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
       "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/node-emoji": {
@@ -14758,6 +14723,7 @@
       "integrity": "sha512-uc47XrtHwkBoES4HFgwgfH9sqwAtJXgAIBq4fFBMZ4hWmgVZoExyn+L4g4VuaecVKXkz1bvlaHcfwHAJPQb5Gw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@oxc-project/types": "^0.87.0"
       },
@@ -15009,7 +14975,6 @@
       "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
@@ -15058,6 +15023,7 @@
       "integrity": "sha512-iceu9s70mZyjKs6V2QX7TURkJj1crnKi9csGByWvOWwrR5rwq0U0f49yIlRAzMP4t7K2gRC1MnyMZggMhiwAVg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@oxc-project/types": "^0.81.0"
       },
@@ -15190,7 +15156,6 @@
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -15489,6 +15454,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -16198,7 +16164,6 @@
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -16753,7 +16718,6 @@
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -16797,6 +16761,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.2.tgz",
       "integrity": "sha512-MHngMYwGJVi6Fmnk6ISmnk7JAHRNF0UkuucA0CUW3N3a4KnONPEZz+vUanQP/ZC/iY1Qkf3bwPWzyY84wEks1g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -17012,27 +16977,6 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
-    "node_modules/sass": {
-      "version": "1.93.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.93.0.tgz",
-      "integrity": "sha512-CQi5/AzCwiubU3dSqRDJ93RfOfg/hhpW1l6wCIvolmehfwgCI35R/0QDs1+R+Ygrl8jFawwwIojE2w47/mf94A==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "chokidar": "^4.0.0",
-        "immutable": "^5.0.2",
-        "source-map-js": ">=0.6.2 <2.0.0"
-      },
-      "bin": {
-        "sass": "sass.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "optionalDependencies": {
-        "@parcel/watcher": "^2.4.1"
-      }
-    },
     "node_modules/sax": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.3.tgz",
@@ -17691,7 +17635,6 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       },
@@ -17782,7 +17725,6 @@
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -17977,6 +17919,7 @@
       "integrity": "sha512-t/R3R/n0MSwnnazuPpPNVO60LX0SKL45pyl9YlvxIdkH0Of7D5qM2EVe+yASRIlY5pZ73nclYJfNANGWPwFDZw==",
       "devOptional": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.15.0",
@@ -18043,7 +17986,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
@@ -18203,6 +18146,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -18560,6 +18504,7 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "napi-postinstall": "^0.3.0"
       },
@@ -18790,7 +18735,6 @@
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "punycode": "^2.1.0"
       }
@@ -18864,6 +18808,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.2.tgz",
       "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -19232,6 +19177,7 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.24.tgz",
       "integrity": "sha512-uTHDOpVQTMjcGgrqFPSb8iO2m1DUvo+WbGqoXQz8Y1CeBYQ0FXf2z1gLRaBtHjlRz7zZUBHxjVB5VTLzYkvftg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.24",
         "@vue/compiler-sfc": "3.5.24",
@@ -19294,6 +19240,7 @@
       "integrity": "sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "debug": "^4.4.0",
         "eslint-scope": "^8.2.0",
@@ -19361,6 +19308,7 @@
       "integrity": "sha512-BnstPj3KLHLrsqbVU2UOrPmr0+Mv11bsUZG0PyCOzsawCivk8W00GMXHeVUWIDOgNaScCuZah47CZFE+Wnl8mw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@intlify/core-base": "11.1.12",
         "@intlify/shared": "11.1.12",
@@ -19389,6 +19337,7 @@
       "integrity": "sha512-ARBedLm9YlbvQomnmq91Os7ck6efydTSpRP3nuOKCvgJOHNrhRoJDSKtee8kcL1Vf7nz6U+PMBL+hTvR3bTVQg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/devtools-api": "^6.6.4"
       },
@@ -19464,7 +19413,6 @@
       "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -19833,6 +19781,7 @@
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/.theme/public/layers.css b/.theme/public/layers.css
new file mode 100644
index 00000000..61c7d5b9
--- /dev/null
+++ b/.theme/public/layers.css
@@ -0,0 +1 @@
+@layer base, brand, theme, utilities;
diff --git a/content.md b/content.md
index dbcb490c..2d4f242b 100644
--- a/content.md
+++ b/content.md
@@ -41,12 +41,12 @@ line, in order to have multiple lines of code block use "\`\`\`" instead of "\`"
 We use these boxes to give information, warning or tips when it is related to
 the context but could not be included in the paragraph.
 
-| Box Type | Markdown Name        |
-| ---      | ---                  |
-| Warning  | \[!WARNING\]         |
-| Error    | \[!CAUTION\]         |
-| Note     | \[!NOTE\]            |
-| Tip      | \[!TIP\]             |
+| Box Type | Markdown Name |
+| ---      | ---           |
+| Warning  | \[!WARNING\]  |
+| Error    | \[!CAUTION\]  |
+| Note     | \[!NOTE\]     |
+| Tip      | \[!TIP\]      |
 
 ## Links
 

From 781d50eaf8a3e685d7a6460f4a35c5347a235c2d Mon Sep 17 00:00:00 2001
From: cihandeniz <cihan@gcbrains.com>
Date: Wed, 12 Nov 2025 17:07:35 +0100
Subject: [PATCH 3/5] revise documentation for tailwind theme system

---
 .theme/app/assets/components.css            |  2 +-
 .theme/app/assets/theme.css                 |  2 +-
 .theme/app/layouts/default.vue              |  4 +-
 .theme/app/pages/demo/computed/with-ref.vue |  4 +-
 vue-files.md                                | 80 +++++++++++++++------
 5 files changed, 66 insertions(+), 26 deletions(-)

diff --git a/.theme/app/assets/components.css b/.theme/app/assets/components.css
index 76c376bb..126e80c6 100644
--- a/.theme/app/assets/components.css
+++ b/.theme/app/assets/components.css
@@ -22,7 +22,7 @@
 
     display: flex;
     justify-content: var(--justify-content-default);
-    background-color: beige;
+    background-color: var(--color-yellow-p2);
 
     font-size: 2rem;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
diff --git a/.theme/app/assets/theme.css b/.theme/app/assets/theme.css
index 5f1d9728..da62a71c 100644
--- a/.theme/app/assets/theme.css
+++ b/.theme/app/assets/theme.css
@@ -20,7 +20,7 @@
 
   /* theme variables samples */
   --justify-content-default: center;
-  --theme-color-default: burlywood;
+  --theme-color-default: var(--color-blue-p3);
   --font-size-default: 2rem;
   --font-family-default: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }
diff --git a/.theme/app/layouts/default.vue b/.theme/app/layouts/default.vue
index 7ecff47f..ddef4a49 100644
--- a/.theme/app/layouts/default.vue
+++ b/.theme/app/layouts/default.vue
@@ -16,7 +16,7 @@
         <img
           class="
             mouseless logo
-            h-(--height-logo)! max-md:h-(--height-logo-small)!
+            h-(--height-logo) max-md:h-(--height-logo-small)
           "
         >
       </NuxtLink>
@@ -27,7 +27,7 @@
         <img
           class="
             nuxt logo
-            h-(--height-logo)! max-md:h-(--height-logo-small)!
+            h-(--height-logo) max-md:h-(--height-logo-small)
           "
         >
       </NuxtLink>
diff --git a/.theme/app/pages/demo/computed/with-ref.vue b/.theme/app/pages/demo/computed/with-ref.vue
index 28e4ef11..479ab801 100644
--- a/.theme/app/pages/demo/computed/with-ref.vue
+++ b/.theme/app/pages/demo/computed/with-ref.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
     <h1>No Ref</h1>
-    <button @click="changeName">
+    <button @click="changeName" class="px-xs py-1 rounded-xs bg-red-900 hover:bg-red-800 active:text-gray-300">
       Change Name
     </button>
     {{ fullName }}
   </div>
   <div>
     <h1>Ref</h1>
-    <button @click="changeNameRef">
+    <button @click="changeNameRef" class="px-xs py-1 rounded-xs bg-red-900 hover:bg-red-800 active:text-gray-300">
       Change Name
     </button>
     {{ fullNameRef }}
diff --git a/vue-files.md b/vue-files.md
index 44d51d67..3f0791fe 100644
--- a/vue-files.md
+++ b/vue-files.md
@@ -46,50 +46,90 @@ Demo is at [/demo/computed/with-ref](/demo/computed/with-ref)
 
 ## Style
 
-Here you can find how we use CSS in Nuxt. To see our conventions and learnings
+Here you will find how we use CSS in Nuxt. To see our conventions and learnings
 for CSS, check out the [learn-css](https://github.com/mouseless/learn-css)
 repository.
 
 ### Setting Up a Theme System
 
-...
+To set up a theme system, we need TailwindCSS, brand theme and a couple of
+`.css` files.
 
-### Theme Variables
+__First__, make sure you installed `tailwindcss` and `@tailwindcss/vite`
+packages in your project. Then configure Tailwind in your nuxt project as in
+`.theme/nuxt.config.ts`.
+
+__Second__, create `theme.css` and `components.css` to customize your theme.
+Place these files in `.theme/assets/` folder and add them to `css` array in
+`.theme/nuxt.config.ts`.
 
-To add global variables create an `assets` folder at the root of your project
-and add `variables.scss` file. In this file global variables can be created.
-When creating variables you can refer to `./theme/app/assets/variables.scss`.
+`theme.css` sets up TailwindCSS and any other style dependencies. Use `@import`
+at-rules to import your files.
 
-To use the global variables simply use the variables created in
-`variables.scss` without importing.
+```css
+@import "https://brand.mouseless.codes/assets/css/default.css";
+@import "tailwindcss/theme" layer(theme);
+@import "tailwindcss/preflight" layer(base);
+@import "tailwindcss/utilities" layer(utilities);
+```
 
-> [!TIP]
+> [!NOTE]
 >
-> We use `*` when importing the scss module to avoid the namespace requirement.
+> In this example our brand css already has its styles in a layer called `@layer
+> brand` so it doesn't use a layer explicitly while importing"
+
+CSS requires layer orders to be stated before any layer is declared. Otherwise
+it will process the layers in the order they are loaded. In this case brand css
+has to be loaded before tailwind's preflight, but preflight has to be ordered
+before to act as a base.
+
+__Finally__, create a `layers.css` in `.theme/public/` folder and add it in
+`.theme/nuxt.config.ts` to make sure it is loaded before any `@layer` is
+declared in css files. This file only sets the preferred order for the layers,
+e.g., `@layer base, brand, theme, utilities;`.
+
+The reason `layer.css` is in a separate file is that PostCSS processes the css
+files and moves `@import` declarations to the top most even before `@layer`
+order statements. So it becomes impossible for any remote css to get its layers
+ordered in a processed css file. To workaround this, we use a non-processed
+`layers.css` file .
 
 > [!WARNING]
 >
-> You need to use a sass-loader and configure `nuxt.config.ts` for global
-> variables to work.
+> Importing preflight css before brand css won't help, because PostCSS processes
+> `.theme/assets/theme.css` and removes local `@import` at-rules. So this leaves
+> brand css import as the only real import. Since CSS requires `@import` as the
+> first statement in a CSS files it becomes impossible to place any remote css
+> import statement after preflight.
+
+### Theme Variables
+
+To add theme variables use `.theme/assets/theme.css` file. Add any theme
+variable under `:root { ... }` scope right after `@import` statements.
+
+To make your variables available in tailwind utilities use `@theme` special
+at-rule of tailwindcss. You'll need to re-assign your existing variables in
+there to make sure tailwind recognizes your custom rules. Have a look at
+`.theme/assets/theme.css` to see how we've set up variables from our brand css
+to tailwind's utilities.
 
 Demo is at [/demo/css/theme-variables](/demo/css/theme-variables)
 
 ### Using Utilities
 
-You must install `tailwindcss` and `@tailwindcss/vite` packages in your project.
-Then configure Tailwind in your nuxt project by following the `nuxt.config.ts`
-file in `.theme/nuxt.config.ts`.
-
 To style a component using Tailwind you can refer to
-`./theme/app/pages/demo/css/using-utilities.vue`. And use Tailwind classes as can be
-seen in the file.
+`./theme/app/pages/demo/css/using-utilities.vue`. And use Tailwind classes as
+can be seen in the file.
 
 Demo is at [/demo/css/using-utilities](/demo/css/using-utilities)
 
 ### Using Components
 
-To style a component using Scss you can refer to
-`./theme/app/pages/demo/scss/style-with-scss.vue`
+When you need to different styles to child elements of your components, but the
+child elements are not in the components such as content tags from markdown
+files `p`, `h1` etc., place a marker class starting with `c--` prefix and then
+use `.theme/assets/components.css` to apply tailwind utility classes to the
+elements under the marker component class.
 
 Demo is at [/demo/css/using-components](/demo/css/using-components)
 

From 3cf4ffe612a4f904812d83805939f447b3486830 Mon Sep 17 00:00:00 2001
From: cihandeniz <cihan@gcbrains.com>
Date: Wed, 12 Nov 2025 17:20:06 +0100
Subject: [PATCH 4/5] replace regular styles with tailwind utilities

---
 .theme/app/assets/components.css              | 17 +++++------------
 .theme/app/assets/theme.css                   |  1 -
 .theme/app/pages/demo/css/theme-variables.vue |  8 +++++---
 3 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/.theme/app/assets/components.css b/.theme/app/assets/components.css
index 126e80c6..c153f20a 100644
--- a/.theme/app/assets/components.css
+++ b/.theme/app/assets/components.css
@@ -2,29 +2,22 @@
 
 @layer utilities {
   li {
-    list-style-type: square;
+    @apply list-[square];
   }
 
   a {
-    text-decoration: underline;
+    @apply underline;
   }
 
   img.nuxt:is(.logo) {
-    content: url(https://nuxt.com/assets/design-kit/logo-green-black.svg);
+    @apply content-[url(https://nuxt.com/assets/design-kit/logo-green-black.svg)];
 
     @media (prefers-color-scheme: dark) {
-      content: url(https://nuxt.com/assets/design-kit/logo-green-white.svg);
+      @apply content-[url(https://nuxt.com/assets/design-kit/logo-green-white.svg)];
     }
   }
 
   .c--basic {
-    --justify-content-default: center;
-
-    display: flex;
-    justify-content: var(--justify-content-default);
-    background-color: var(--color-yellow-p2);
-
-    font-size: 2rem;
-    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    @apply flex justify-center bg-yellow-p3 text-yellow-n4 text-[2rem] font-[Franklin_Gothic_Medium]
   }
 }
diff --git a/.theme/app/assets/theme.css b/.theme/app/assets/theme.css
index da62a71c..7ff9b06f 100644
--- a/.theme/app/assets/theme.css
+++ b/.theme/app/assets/theme.css
@@ -19,7 +19,6 @@
   --max-width-content: 64rem;
 
   /* theme variables samples */
-  --justify-content-default: center;
   --theme-color-default: var(--color-blue-p3);
   --font-size-default: 2rem;
   --font-family-default: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
diff --git a/.theme/app/pages/demo/css/theme-variables.vue b/.theme/app/pages/demo/css/theme-variables.vue
index f0126087..fba745d7 100644
--- a/.theme/app/pages/demo/css/theme-variables.vue
+++ b/.theme/app/pages/demo/css/theme-variables.vue
@@ -1,11 +1,13 @@
 <template>
+  <!-- all classes are from theme variables except `text-center` -->
   <div
     class="
-      flex
-      justify-(--justify-content-default)
+      text-center
+
+      rounded-xs py-sm text-green-n2
       bg-(--theme-color-default)
-      text-(length:--font-size-default)
       font-(--font-family-default)
+      text-(length:--font-size-default)
     "
   >
     Styled with utilities using global variable

From 72d85839aeab091fec7593b85fc1f3b0c8cd3732 Mon Sep 17 00:00:00 2001
From: cihandeniz <cihan@gcbrains.com>
Date: Wed, 12 Nov 2025 17:39:03 +0100
Subject: [PATCH 5/5] fix warnings

---
 .theme/app/pages/demo/computed/with-ref.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/.theme/app/pages/demo/computed/with-ref.vue b/.theme/app/pages/demo/computed/with-ref.vue
index 479ab801..1d49e222 100644
--- a/.theme/app/pages/demo/computed/with-ref.vue
+++ b/.theme/app/pages/demo/computed/with-ref.vue
@@ -1,14 +1,20 @@
 <template>
   <div>
     <h1>No Ref</h1>
-    <button @click="changeName" class="px-xs py-1 rounded-xs bg-red-900 hover:bg-red-800 active:text-gray-300">
+    <button
+      class="px-xs py-1 rounded-xs bg-red-900 hover:bg-red-800 active:text-gray-300"
+      @click="changeName"
+    >
       Change Name
     </button>
     {{ fullName }}
   </div>
   <div>
     <h1>Ref</h1>
-    <button @click="changeNameRef" class="px-xs py-1 rounded-xs bg-red-900 hover:bg-red-800 active:text-gray-300">
+    <button
+      class="px-xs py-1 rounded-xs bg-red-900 hover:bg-red-800 active:text-gray-300"
+      @click="changeNameRef"
+    >
       Change Name
     </button>
     {{ fullNameRef }}