@jjlmoya/utils-pets 1.1.0

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@jjlmoya/utils-pets",
+  "version": "1.1.0",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./data": "./src/data.ts"
+  },
+  "files": [
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "lint": "eslint src/ --max-warnings 0 && stylelint \"src/**/*.{css,astro}\"",
+    "check": "astro check",
+    "type-check": "astro check",
+    "test": "vitest run",
+    "preversion": "npm run lint && npm run test",
+    "postversion": "git push && git push --tags",
+    "patch": "npm version patch",
+    "minor": "npm version minor",
+    "major": "npm version major"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,astro}": [
+      "eslint --fix"
+    ]
+  },
+  "dependencies": {
+    "@iconify-json/mdi": "^1.2.3",
+    "@jjlmoya/utils-shared": "1.0.2",
+    "astro": "^6.1.2",
+    "astro-icon": "^1.1.0"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.9.8",
+    "eslint": "^9.39.4",
+    "eslint-plugin-astro": "^1.6.0",
+    "eslint-plugin-no-comments": "^1.1.10",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.4.0",
+    "postcss-html": "^1.8.1",
+    "schema-dts": "^1.1.2",
+    "stylelint": "^17.6.0",
+    "stylelint-config-standard": "^40.0.0",
+    "stylelint-declaration-strict-value": "^1.11.1",
+    "typescript": "^5.4.0",
+    "typescript-eslint": "^8.58.0",
+    "vitest": "^4.1.2"
+  }
+}

package/src/category/i18n/en.ts

@@ -0,0 +1,48 @@
+import type { CategoryLocaleContent } from '../../types';
+
+export const content: CategoryLocaleContent = {
+  slug: 'pets',
+  title: 'Pet Tools',
+  description: 'Free calculators and utilities for pet owners. Find out your dog or cat\'s real age and calculate their daily ration with veterinary precision.',
+  seo: [
+    { type: 'title', text: 'Animal Nutrition and Wellbeing: Science in the Service of Your Pet', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'Caring for a dog, cat, or rabbit is much more than giving them food and affection. It involves understanding their biology, their aging rhythm, and their specific energy needs. In this section we offer <strong>free veterinary calculators</strong> that apply validated scientific formulas to help you make better decisions about your companion\'s health.',
+    },
+    {
+      type: 'paragraph',
+      html: 'From the curiosity of knowing how many human years your dog really has, to the precise calculation of the daily ration based on RER (Resting Energy Requirement), our tools transform complex veterinary concepts into clear, actionable answers for the responsible pet owner.',
+    },
+    { type: 'title', text: 'Your Pet\'s Real Age: Beyond the "Times 7" Myth', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'The popular belief that one dog year equals seven human years has been debunked by modern veterinary science for decades. The reality is that dogs mature exponentially in their first two years of life, reaching the equivalent of 15 human years at 12 months and 24 years at 24 months. Afterwards, the pace slows and depends enormously on the <strong>size of the animal</strong>: a giant dog over 45 kg can age up to 60% faster than a small breed.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Cats, on the other hand, follow a more linear aging curve: after the first two years of accelerated development, each feline year is approximately equivalent to four human years. Knowing your pet\'s life stage is not just curiosity, it is relevant medical information: it determines when to schedule geriatric checkups, when to adjust the diet, and what health signs you should monitor.',
+    },
+    { type: 'title', text: 'Precision Nutrition: Calculate the Exact Daily Ration', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'Obesity affects more than 50% of domestic pets in developed countries and is the direct cause of joint and cardiovascular problems and a reduced life expectancy. The problem is not a lack of love from owners, but the <strong>absence of precise caloric references</strong>. Our daily ration calculator applies the standard veterinary RER formula (70 × weight^0.75) and multiplies it by the corresponding DER factor for your animal\'s species, life stage, and activity level.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Pet Age Calculator:</strong> Converts chronological years to human equivalent based on species and size, with life stage and next veterinary milestone.',
+        '<strong>Daily Ration Calculator:</strong> Calculates grams of dry and wet food based on RER and DER for dogs, cats, and rabbits.',
+      ],
+    },
+    {
+      type: 'tip',
+      title: 'Veterinary Advice',
+      html: 'These tools provide scientific starting references, but every animal is unique. Always consult your vet to adjust the diet and health plan to your pet\'s individual needs.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Investing in knowledge about your pet\'s biology is the most effective form of preventive medicine. A healthy weight and timely veterinary care can add years of quality life to your faithful companion.',
+    },
+  ],
+};

package/src/category/i18n/es.ts

@@ -0,0 +1,48 @@
+import type { CategoryLocaleContent } from '../../types';
+
+export const content: CategoryLocaleContent = {
+  slug: 'mascotas',
+  title: 'Herramientas para Mascotas',
+  description: 'Calculadoras y utilidades gratuitas para propietarios de mascotas. Descubre la edad real de tu perro o gato y calcula su ración diaria con precisión veterinaria.',
+  seo: [
+    { type: 'title', text: 'Nutrición y Bienestar Animal: Ciencia al Servicio de tu Mascota', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'Cuidar a un perro, un gato o un conejo es mucho más que darles comida y cariño. Implica entender su biología, su ritmo de envejecimiento y sus necesidades energéticas concretas. En esta sección ofrecemos <strong>calculadoras veterinarias gratuitas</strong> que aplican fórmulas científicas validadas para ayudarte a tomar mejores decisiones sobre la salud de tu compañero.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Desde la curiosidad de saber cuántos años humanos tiene realmente tu perro hasta el cálculo preciso de la ración diaria basado en el RER (Resting Energy Requirement), nuestras herramientas transforman conceptos veterinarios complejos en respuestas claras y accionables para el propietario responsable.',
+    },
+    { type: 'title', text: 'Edad Real de tu Mascota: Más Allá del Mito del "Por 7"', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'La popular creencia de que un año de perro equivale a siete años humanos lleva décadas siendo desmentida por la veterinaria moderna. La realidad es que los perros maduran de forma exponencial en sus primeros dos años de vida, alcanzando la equivalencia de 15 años humanos a los 12 meses y de 24 años a los 24 meses. Después, el ritmo se ralentiza y depende enormemente del <strong>tamaño del animal</strong>: un perro gigante de más de 45 kg puede envejecer hasta un 60% más rápido que uno de talla pequeña.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Los gatos, por su parte, siguen una curva de envejecimiento más lineal: tras los dos primeros años de desarrollo acelerado, cada año felino equivale aproximadamente a cuatro años humanos. Conocer la etapa vital de tu mascota no es solo curiosidad, es información médica relevante: determina cuándo programar chequeos geriátricos, cuándo ajustar la dieta y qué señales de salud debes vigilar.',
+    },
+    { type: 'title', text: 'Nutrición de Precisión: Calcula la Ración Diaria Exacta', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'La obesidad afecta a más del 50% de las mascotas domésticas en países desarrollados y es la causa directa de problemas articulares, cardiovasculares y una esperanza de vida reducida. El problema no es la falta de amor de los propietarios, sino la <strong>ausencia de referencias calóricas precisas</strong>. Nuestra calculadora de ración diaria aplica la fórmula veterinaria estándar RER (70 × peso^0.75) y la multiplica por el factor DER correspondiente a la especie, etapa vital y nivel de actividad de tu animal.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Calculadora de Edad de Mascotas:</strong> Convierte años cronológicos a equivalente humano según especie y tamaño, con etapa vital y próximo hito veterinario.',
+        '<strong>Calculadora de Ración Diaria:</strong> Calcula gramos de pienso seco y húmedo basándose en RER y DER para perros, gatos y conejos.',
+      ],
+    },
+    {
+      type: 'tip',
+      title: 'Consejo Veterinario',
+      html: 'Estas herramientas ofrecen referencias científicas de partida, pero cada animal es único. Consulta siempre con tu veterinario para ajustar la dieta y el plan de salud a las necesidades individuales de tu mascota.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Invertir en conocimiento sobre la biología de tu mascota es la forma más efectiva de medicina preventiva. Un peso saludable y una atención veterinaria en el momento correcto pueden añadir años de calidad de vida a tu compañero fiel.',
+    },
+  ],
+};

package/src/category/i18n/fr.ts

@@ -0,0 +1,48 @@
+import type { CategoryLocaleContent } from '../../types';
+
+export const content: CategoryLocaleContent = {
+  slug: 'animaux',
+  title: 'Outils pour Animaux de Compagnie',
+  description: 'Calculatrices et utilitaires gratuits pour les propriétaires d\'animaux. Découvrez l\'âge réel de votre chien ou chat et calculez leur ration quotidienne avec précision vétérinaire.',
+  seo: [
+    { type: 'title', text: 'Nutrition et Bien-être Animal : La Science au Service de votre Animal', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'Prendre soin d\'un chien, d\'un chat ou d\'un lapin va bien au-delà de leur donner de la nourriture et de l\'affection. Cela implique de comprendre leur biologie, leur rythme de vieillissement et leurs besoins énergétiques spécifiques. Dans cette section, nous proposons des <strong>calculatrices vétérinaires gratuites</strong> qui appliquent des formules scientifiques validées pour vous aider à prendre de meilleures décisions concernant la santé de votre compagnon.',
+    },
+    {
+      type: 'paragraph',
+      html: 'De la curiosité de savoir combien d\'années humaines a réellement votre chien, jusqu\'au calcul précis de la ration quotidienne basé sur le RER (Resting Energy Requirement), nos outils transforment des concepts vétérinaires complexes en réponses claires et exploitables pour le propriétaire responsable.',
+    },
+    { type: 'title', text: 'L\'Âge Réel de votre Animal : Au-delà du Mythe du "Fois 7"', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'La croyance populaire qu\'une année de chien équivaut à sept années humaines est démystifiée depuis des décennies par la médecine vétérinaire moderne. La réalité est que les chiens mûrissent de façon exponentielle au cours de leurs deux premières années de vie, atteignant l\'équivalent de 15 ans humains à 12 mois et de 24 ans à 24 mois. Ensuite, le rythme ralentit et dépend énormément de la <strong>taille de l\'animal</strong>.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Les chats, quant à eux, suivent une courbe de vieillissement plus linéaire : après les deux premières années de développement accéléré, chaque année féline équivaut approximativement à quatre années humaines. Connaître le stade de vie de votre animal n\'est pas seulement une curiosité, c\'est une information médicale pertinente qui détermine le moment des bilans gériatriques et l\'ajustement du régime alimentaire.',
+    },
+    { type: 'title', text: 'Nutrition de Précision : Calculez la Ration Quotidienne Exacte', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'L\'obésité touche plus de 50 % des animaux de compagnie dans les pays développés et est la cause directe de problèmes articulaires, cardiovasculaires et d\'une espérance de vie réduite. Notre calculatrice de ration quotidienne applique la formule vétérinaire standard RER (70 × poids^0.75) multipliée par le facteur DER correspondant à l\'espèce, au stade de vie et au niveau d\'activité de votre animal.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Calculatrice d\'Âge des Animaux :</strong> Convertit les années chronologiques en équivalent humain selon l\'espèce et la taille.',
+        '<strong>Calculatrice de Ration Quotidienne :</strong> Calcule les grammes de nourriture sèche et humide basés sur le RER et le DER pour chiens, chats et lapins.',
+      ],
+    },
+    {
+      type: 'tip',
+      title: 'Conseil Vétérinaire',
+      html: 'Ces outils fournissent des références scientifiques de départ, mais chaque animal est unique. Consultez toujours votre vétérinaire pour adapter le régime alimentaire et le plan de santé aux besoins individuels de votre animal.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Investir dans la connaissance de la biologie de votre animal est la forme la plus efficace de médecine préventive. Un poids sain et des soins vétérinaires en temps voulu peuvent ajouter des années de vie de qualité à votre fidèle compagnon.',
+    },
+  ],
+};

package/src/category/index.ts

@@ -0,0 +1,13 @@
+import type { PetCategoryEntry } from '../types';
+import { petAge } from '../tool/petAge';
+import { petRation } from '../tool/petRation';
+
+export const petsCategory: PetCategoryEntry = {
+  icon: 'mdi:paw',
+  tools: [petAge, petRation],
+  i18n: {
+    es: () => import('./i18n/es').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+  },
+};

package/src/category/seo.astro

@@ -0,0 +1,14 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { petsCategory } from './index';
+import type { KnownLocale } from '../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await petsCategory.i18n[locale]?.();
+---
+
+{content && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/components/PreviewNavSidebar.astro

@@ -0,0 +1,115 @@
+---
+interface NavItem {
+  id: string;
+  title: string;
+  href: string;
+  isActive?: boolean;
+}
+
+interface Props {
+  categoryTitle: string;
+  tools?: NavItem[];
+}
+
+const { categoryTitle, tools = [] } = Astro.props;
+---
+
+<nav class="preview-nav-sidebar">
+  <div class="sidebar-header">
+    <h3>{categoryTitle}</h3>
+  </div>
+
+  <ul class="tools-list">
+    {tools.map((tool) => (
+      <li>
+        <a
+          href={tool.href}
+          class:list={['tool-link', { active: tool.isActive }]}
+        >
+          <span class="tool-title">{tool.title}</span>
+        </a>
+      </li>
+    ))}
+  </ul>
+</nav>
+
+<style>
+  .preview-nav-sidebar {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--bg-surface, #0f172a);
+  }
+
+  .sidebar-header {
+    padding: 2rem 1.5rem 1.5rem;
+    border-bottom: 1px solid var(--border-color, #1e293b);
+  }
+
+  .sidebar-header h3 {
+    margin: 0;
+    font-size: 0.75rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--text-muted, #94a3b8);
+  }
+
+  .tools-list {
+    list-style: none;
+    margin: 0;
+    padding: 0.5rem 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .tools-list li {
+    margin: 0;
+  }
+
+  .tool-link {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1.5rem;
+    color: var(--text-muted, #94a3b8);
+    text-decoration: none;
+    font-size: 0.9375rem;
+    font-weight: 500;
+    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    border-left: 3px solid transparent;
+    position: relative;
+  }
+
+  .tool-link:hover {
+    color: var(--text-base, #f1f5f9);
+    background: rgba(255, 255, 255, 0.08);
+    padding-left: 1.75rem;
+  }
+
+  .tool-link.active {
+    color: var(--accent, #f43f5e);
+    background: rgba(244, 63, 94, 0.15);
+    border-left-color: var(--accent, #f43f5e);
+    font-weight: 600;
+  }
+
+  .tool-link.active::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 24px;
+    background: var(--accent, #f43f5e);
+    border-radius: 0 2px 2px 0;
+  }
+
+  .tool-title {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

package/src/components/PreviewToolbar.astro

@@ -0,0 +1,142 @@
+---
+import type { KnownLocale } from '../types';
+
+interface Props {
+  currentLocale: KnownLocale;
+  localeUrls?: Partial<Record<KnownLocale, string>>;
+}
+
+const { currentLocale, localeUrls = {} } = Astro.props;
+
+const otherLocales = Object.entries(localeUrls).filter(([l]) => l !== currentLocale) as [
+  KnownLocale,
+  string,
+][];
+---
+
+<nav class="preview-toolbar">
+  {
+    otherLocales.length > 0 && (
+      <div class="locale-group">
+        <span class="locale-current">{currentLocale.toUpperCase()}</span>
+        {otherLocales.map(([locale, url]) => (
+          <a href={url} class="btn-locale">
+            {locale.toUpperCase()}
+          </a>
+        ))}
+      </div>
+    )
+  }
+
+  <button id="theme-toggle" class="btn-theme" aria-label="Toggle theme" title="Toggle theme">
+    <span class="theme-icon"></span>
+  </button>
+</nav>
+
+<script>
+  function initToolbar() {
+    const btn = document.getElementById('theme-toggle');
+    if (!btn) return;
+
+    const applyTheme = (theme: string) => {
+      document.documentElement.classList.remove('theme-light', 'theme-dark');
+      document.documentElement.classList.add(theme);
+      localStorage.setItem('theme', theme);
+    };
+
+    btn.addEventListener('click', () => {
+      const next = document.documentElement.classList.contains('theme-dark')
+        ? 'theme-light'
+        : 'theme-dark';
+      applyTheme(next);
+    });
+  }
+
+  initToolbar();
+  document.addEventListener('astro:after-swap', initToolbar);
+</script>
+
+<style>
+  .preview-toolbar {
+    position: fixed;
+    top: 1rem;
+    right: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    z-index: 1000;
+    background: var(--bg-surface);
+    padding: 0.4rem;
+    border-radius: 1rem;
+    border: 1px solid var(--border-color);
+    backdrop-filter: blur(12px);
+  }
+
+  .locale-group {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding-right: 0.5rem;
+    border-right: 1px solid var(--border-color);
+  }
+
+  .locale-current {
+    font-size: 0.7rem;
+    font-weight: 900;
+    color: var(--text-muted);
+    padding: 0.4rem 0.6rem;
+    letter-spacing: 0.08em;
+  }
+
+  .btn-locale {
+    background: transparent;
+    border: 1px solid var(--border-color);
+    color: var(--text-main);
+    cursor: pointer;
+    padding: 0.4rem 0.7rem;
+    border-radius: 0.5rem;
+    font-weight: 700;
+    font-size: 0.7rem;
+    text-decoration: none;
+    letter-spacing: 0.08em;
+    transition: all 0.2s ease;
+  }
+
+  .btn-locale:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+  }
+
+  .btn-theme {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 0.6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s ease;
+  }
+
+  .btn-theme:hover {
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  .theme-icon {
+    display: block;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+  }
+
+  :global(.theme-light) .theme-icon {
+    background: #f59e0b;
+    box-shadow: 0 0 8px #fbbf24;
+  }
+
+  :global(.theme-dark) .theme-icon {
+    background: #94a3b8;
+    box-shadow: inset -4px -2px 0 #1e293b;
+  }
+</style>

package/src/data.ts

@@ -0,0 +1,15 @@
+export { petAge } from './tool/petAge';
+export { petRation } from './tool/petRation';
+export { petsCategory } from './category';
+
+export type { PetAgeUI, PetAgeLocaleContent } from './tool/petAge';
+export type { PetRationUI, PetRationLocaleContent } from './tool/petRation';
+
+export type {
+  KnownLocale,
+  ToolLocaleContent,
+  CategoryLocaleContent,
+  LocaleMap,
+  PetToolEntry,
+  PetCategoryEntry,
+} from './types';

package/src/env.d.ts

@@ -0,0 +1,4 @@
+declare module '*.astro' {
+  const Component: (_props: Record<string, unknown>) => unknown;
+  export default Component;
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+export * from './tool/petAge';
+export * from './tool/petRation';
+
+export { petsCategory } from './category';
+export { default as PetsCategorySEO } from './category/seo.astro';
+
+export type {
+  KnownLocale,
+  FAQItem,
+  BibliographyEntry,
+  HowToStep,
+  ToolLocaleContent,
+  CategoryLocaleContent,
+  LocaleLoader,
+  LocaleMap,
+  PetToolEntry,
+  PetCategoryEntry,
+} from './types';
+
+export { ALL_TOOLS } from './tools';

package/src/layouts/PreviewLayout.astro

@@ -0,0 +1,116 @@
+---
+import "@jjlmoya/utils-shared/theme.css";
+import PreviewToolbar from "../components/PreviewToolbar.astro";
+import type { KnownLocale } from "../types";
+
+interface Props {
+  title: string;
+  currentLocale?: KnownLocale;
+  localeUrls?: Partial<Record<KnownLocale, string>>;
+  hasSidebar?: boolean;
+}
+
+const { title, currentLocale = "es", localeUrls = {}, hasSidebar = false } = Astro.props;
+---
+
+<!doctype html>
+<html lang={currentLocale}>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>{title} · preview</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+
+    <script is:inline>
+      (function () {
+        const saved = localStorage.getItem("theme") || "theme-dark";
+        document.documentElement.classList.add(saved);
+      })();
+    </script>
+    <slot name="head" />
+  </head>
+  <body>
+    <PreviewToolbar currentLocale={currentLocale} localeUrls={localeUrls} />
+    <div class:list={["page-wrapper", { "with-sidebar": hasSidebar }]}>
+      {
+        hasSidebar && (
+          <aside class="sidebar-area">
+            <slot name="sidebar" />
+          </aside>
+        )
+      }
+      <main>
+        <slot />
+      </main>
+    </div>
+  </body>
+</html>
+
+<style is:global>
+  :root {
+    --accent: #f43f5e;
+    --primary-base: #9f1239;
+    --cyan: #06b6d4;
+  }
+
+  .theme-dark,
+  .theme-light {
+    --text-main: var(--text-base);
+    --border-color: var(--border-base);
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--bg-page);
+    color: var(--text-base);
+    margin: 0;
+    min-height: 100vh;
+    transition:
+      background-color 0.3s ease,
+      color 0.3s ease;
+  }
+
+  main {
+    padding: 0 2rem;
+  }
+
+  .page-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .page-wrapper.with-sidebar {
+    display: grid;
+    grid-template-columns: 240px 1fr;
+    min-height: 100vh;
+  }
+
+  .sidebar-area {
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    overflow-y: auto;
+    border-right: 1px solid var(--border-color);
+    background: var(--bg-page);
+  }
+
+  @media (max-width: 768px) {
+    .page-wrapper.with-sidebar {
+      grid-template-columns: 1fr;
+    }
+
+    .sidebar-area {
+      display: none;
+    }
+  }
+</style>