@squeditor/squeditor-framework 1.0.2 → 1.0.3

package/project-template/src/assets/scss/_swiper.scss

@@ -0,0 +1,30 @@
+/* Swiper framework overrides */
+.swiper {
+  --swiper-theme-color: var(--sq-color-primary, #000);
+  --swiper-navigation-size: 20px;
+  
+  &-pagination-bullet {
+    background: var(--sq-color-primary, #000);
+    opacity: 0.3;
+    transition: all 0.3s ease;
+    
+    &-active {
+      opacity: 1;
+      width: 24px;
+      border-radius: 4px;
+    }
+  }
+
+  &-button-next,
+  &-button-prev {
+    transition: all 0.3s ease;
+    &:hover {
+      transform: translateY(-50%) scale(1.05);
+    }
+    
+    &.swiper-button-disabled {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+}

package/project-template/src/assets/scss/main.scss

@@ -7,5 +7,6 @@
 @import 'utilities';
 @import 'base';
 @import 'components';
+@import 'swiper';
 @import 'custom';
-
+@import 'themes/two';

package/project-template/src/assets/scss/themes/_two.scss

@@ -0,0 +1,95 @@
+// two.scss
+$sq-color-primary: #21169a;
+$sq-color-secondary: #f5590b;
+$sq-color-accent: #f59e0b;
+$sq-color-muted-text: #272164;
+$sq-color-muted-bg: #e4e2de;
+$sq-color-light: #e4e2de;
+$sq-color-body-bg: #f4f1eb;
+$sq-color-body-text: #201a63;
+$sq-color-heading-text: #272164;
+
+.theme-two {
+    --sq-color-primary: #{$sq-color-primary};
+    --sq-color-primary-contrast: #{sq-color-contrast($sq-color-primary, $sq-contrast-light-text, $sq-contrast-dark-text, $sq-min-contrast-ratio)};
+    --sq-color-secondary: #{$sq-color-secondary};
+    --sq-color-secondary-contrast: #{sq-color-contrast($sq-color-secondary, $sq-contrast-light-text, $sq-contrast-dark-text, $sq-min-contrast-ratio)};
+    --sq-color-accent: #{$sq-color-accent};
+    --sq-color-accent-contrast: #{sq-color-contrast($sq-color-accent, $sq-contrast-light-text, $sq-contrast-dark-text, $sq-min-contrast-ratio)};
+    --sq-color-muted-text: #{$sq-color-muted-text};
+    --sq-color-muted-bg: #{$sq-color-muted-bg};
+    --sq-color-light: #{$sq-color-light};
+    --sq-color-body-bg: #{$sq-color-body-bg};
+    --sq-color-body-text: #{$sq-color-body-text};
+    --sq-color-heading-text: #{$sq-color-heading-text};
+    --sq-font-sans: 'TASA Orbiter', sans-serif;
+    --sq-font-heading: 'TASA Orbiter', sans-serif;
+    --sq-radius-lg: 32px;
+
+    // Page Transitions
+    --sq-page-transition-from: var(--sq-color-secondary);
+    --sq-page-transition-via: var(--sq-color-accent);
+    --sq-page-transition-to: var(--sq-color-accent);
+
+    // Explicit overrides
+    --sq-btn-primary-bg: var(--sq-color-primary);
+    --sq-btn-primary-text: var(--sq-color-primary-contrast);
+    --sq-btn-secondary-bg: var(--sq-color-secondary);
+    --sq-btn-secondary-text: var(--sq-color-secondary-contrast);
+    --sq-btn-accent-bg: var(--sq-color-accent);
+    --sq-btn-accent-text: var(--sq-color-accent-contrast);
+    --sq-form-focus-border: var(--sq-color-secondary);
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        font-family: var(--sq-font-heading);
+        letter-spacing: -0.04em;
+    }
+
+    .btn {
+        --sq-btn-radius: 50rem;
+    }
+
+    @apply selection:bg-secondary selection:text-black;
+}
+
+.theme-two.sq-theme-dark {
+    $sq-color-primary-dark: #16239a;
+    $sq-color-secondary-dark: #ffc156;
+    $sq-color-accent-dark: #f59e0b;
+    $sq-color-muted-text: #c4d3d3;
+    $sq-color-muted-bg: #202052;
+    $sq-color-body-bg: #181843;
+    $sq-color-body-text: #c4d3d3;
+    $sq-color-heading-text: #ffffff;
+
+    --sq-color-primary: #{$sq-color-primary-dark};
+    --sq-color-primary-contrast: #{sq-color-contrast($sq-color-primary-dark, $sq-contrast-light-text, $sq-contrast-dark-text, $sq-min-contrast-ratio)};
+    --sq-color-secondary: #{$sq-color-secondary-dark};
+    --sq-color-secondary-contrast: #{sq-color-contrast($sq-color-secondary-dark, $sq-contrast-light-text, $sq-contrast-dark-text, $sq-min-contrast-ratio)};
+    --sq-color-accent: #{$sq-color-accent-dark};
+    --sq-color-accent-contrast: #{sq-color-contrast($sq-color-accent-dark, $sq-contrast-light-text, $sq-contrast-dark-text, $sq-min-contrast-ratio)};
+
+    --sq-color-primary: #{$sq-color-primary-dark};
+    --sq-color-primary-contrast: #{sq-color-contrast($sq-color-primary-dark, $sq-contrast-light-text, $sq-contrast-dark-text, $sq-min-contrast-ratio)};
+    --sq-color-secondary: #{$sq-color-secondary-dark};
+    --sq-color-secondary-contrast: #{sq-color-contrast($sq-color-secondary-dark, $sq-contrast-light-text, $sq-contrast-dark-text, $sq-min-contrast-ratio)};
+    --sq-color-accent: #{$sq-color-accent-dark};
+    --sq-color-accent-contrast: #{sq-color-contrast($sq-color-accent-dark, $sq-contrast-light-text, $sq-contrast-dark-text, $sq-min-contrast-ratio)};
+
+    --sq-color-muted-text: #{$sq-color-muted-text};
+    --sq-color-muted-bg: #{$sq-color-muted-bg};
+
+    --sq-color-body-bg: #{$sq-color-body-bg};
+    --sq-color-body-text: #{$sq-color-body-text};
+    --sq-color-heading-text: #{$sq-color-heading-text};
+
+    --sq-sticky-bg: #{$sq-color-muted-bg};
+    --sq-sticky-text: #{$sq-color-body-text};
+
+    --sq-card-bg: #{$sq-color-body-bg};
+}

package/project-template/src/index.php

@@ -30,17 +30,17 @@ ob_start();
 ?>
 
     <section class="py-32 md:py-48 flex items-center justify-center bg-gradient-to-b from-zinc-100 to-transparent" data-uk-height-viewport="offset-top: true">
-        <div class="max-w-4xl mx-auto px-6 text-center">
+        <div class="max-w-4xl mx-auto px-6 text-center" data-gsap-timeline="{defaults: {duration: 1.2, ease: 'power4.out', delay: 0.8}}">
             
-            <h2 class="text-6xl font-bold tracking-tight mb-8 lg:px-8">
-                Start building<span class="opacity-30"> creative websites</span> with Squeditor
+            <h2 class="text-6xl font-bold tracking-tight mb-8 lg:px-8" data-gsap="from: {y: 60, opacity: 0, filter: 'blur(20px)'}">
+                Start building <span class="bg-gradient-to-r from-zinc-500 via-zinc-400 to-zinc-200 text-transparent bg-clip-text">creative websites</span> with Squeditor
             </h2>
             
-            <p class="text-xl text-muted max-w-2xl mx-auto font-light leading-relaxed mb-12">
+            <p class="text-xl text-muted max-w-2xl mx-auto font-light leading-relaxed mb-12" data-gsap="position: '<-0.5'; from: {y: 40, opacity: 0, filter: 'blur(10px)'}">
                You can now begin creating interactive GSAP experiences, modifying the UIKit configuration, and adding content to your template files.
             </p>
 
-            <div class="flex items-center justify-center gap-4">
+            <div class="flex items-center justify-center gap-4" data-gsap="position: '<-0.5'; from: {y: 20, opacity: 0, filter: 'blur(5px)'}">
                 <a href="https://squeditor.com/" class="btn btn-lg btn-secondary !px-8 !py-3 !rounded-full text-white font-medium hover:scale-105 transition-transform">
                     Try Squeditor
                 </a>

package/project-template/src/init.php

@@ -11,9 +11,45 @@ require_once __DIR__ . '/config/site-config.php';
 define('SRC_PATH', __DIR__);
 
 // Global Theme & Schema Detection
-$active_theme  = $_GET['theme']  ?? 'default';
+$active_theme  = $_GET['theme']  ?? null;
 $active_schema = $_GET['schema'] ?? 'light';
 
+if (!$active_theme) {
+    if (file_exists(__DIR__ . '/config/active-themes.php')) {
+        require_once __DIR__ . '/config/active-themes.php';
+        
+        $current_uri = $_SERVER['REQUEST_URI'] ?? '/';
+        $path_only = parse_url($current_uri, PHP_URL_PATH);
+        
+        // Strip trailing slash except for root
+        if ($path_only !== '/' && substr($path_only, -1) === '/') {
+            $path_only = rtrim($path_only, '/');
+        }
+
+        // Normalize .html requests to .php for config matching
+        if (substr($path_only, -5) === '.html') {
+            $path_only = substr($path_only, 0, -5) . '.php';
+        } 
+        // Normalize extensionless requests to .php for config matching
+        elseif ($path_only !== '/' && !pathinfo($path_only, PATHINFO_EXTENSION)) {
+            $path_only .= '.php';
+        }
+
+        // Check exact match, also check matching without leading slash
+        $path_no_slash = ltrim($path_only, '/');
+        
+        if (isset($active_themes[$path_only])) {
+            $active_theme = $active_themes[$path_only];
+        } elseif (isset($active_themes[$path_no_slash])) {
+            $active_theme = $active_themes[$path_no_slash];
+        } else {
+            $active_theme = 'default';
+        }
+    } else {
+        $active_theme = 'default';
+    }
+}
+
 // Add to site config for template access
 $site['theme']  = $active_theme;
-$site['schema'] = $active_schema;
+$site['schema'] = $active_schema;

package/project-template/src/page-templates/head.php

@@ -13,6 +13,12 @@ if (!$is_snapshot) {
         fclose($fp);
     }
 }
+
+// Load slider config for conditional CSS loading
+$active_slider = false;
+if (file_exists(__DIR__ . '/../config/active-slider.php')) {
+    require_once __DIR__ . '/../config/active-slider.php';
+}
 ?>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -36,6 +42,7 @@ if (!$is_snapshot) {
   <script type="module" src="<?= $vite_server ?>/@vite/client"></script>
   <link rel="stylesheet" href="<?= $vite_server ?>/assets/css/tailwind.css">
   <link rel="stylesheet" href="<?= $vite_server ?>/assets/css/squeditor-icons.css">
+  <?php if ($active_slider): ?><link rel="stylesheet" href="<?= $vite_server ?>/assets/css/slider.min.css"><?php endif; ?>
   <script type="module" src="<?= $vite_server ?>/assets/scss/main.scss"></script>
   <style>html.js-fouc { opacity: 0; transition: opacity 0.15s ease-out; }</style>
   <script>document.documentElement.classList.add('js-fouc');</script>
@@ -43,5 +50,6 @@ if (!$is_snapshot) {
   <!-- Production Static Assets -->
   <link rel="stylesheet" href="assets/css/squeditor-icons.css">
   <link rel="stylesheet" href="assets/css/tailwind.css">
-  <link rel="stylesheet" href="assets/css/main_css.css">
+  <?php if ($active_slider): ?><link rel="stylesheet" href="assets/css/slider.min.css"><?php endif; ?>
+  <link rel="stylesheet" href="assets/css/main.min.css">
 <?php endif; ?>

package/project-template/src/slider-test.php

@@ -0,0 +1,87 @@
+<?php
+// src/pages/swiper-test.php
+require_once __DIR__ . '/init.php';
+
+// Content
+ob_start();
+?>
+
+<main id="main-content">
+    <section class="py-24">
+        <div class="max-w-7xl mx-auto px-6">
+            <h1 class="text-4xl md:text-5xl font-bold mb-4 text-center">Multi-Slider Architecture</h1>
+            <p class="text-lg text-muted text-center max-w-2xl mx-auto mb-16">
+                Test the dynamic library injection framework. Switch between <code>swiper</code> and <code>splide</code> in your <code>squeditor.config.js</code> to see Vite dynamically bundle the correct dependencies or set <code>false</code> to disable it!
+            </p>
+
+            <!-- Splide Test -->
+            <div class="mb-16 border-t pt-16">
+                <div class="flex items-center justify-between">
+                    <h2 class="text-2xl font-bold mb-6">Splide Slider</h2>
+                    <p class="text-xs font-mono uppercase tracking-widest text-muted mb-4">Requires <code class="text-xs">slider: { library: 'splide' }</code> -> squeditor.config.js</p>
+                </div>
+                <div class="splide" data-splide='{
+                  "type"       : "blurfade",
+                  "perMove"    : 1,
+                  "gap"        : 16,
+                  "autoplay"   : true,
+                  "interval"   : 3000,
+                  "pagination" : true,
+                  "breakpoints": {
+                    "1024": { "perPage": 1, "gap": "1rem" },
+                    "768" : { "perPage": 1, "gap": "0.75rem" },
+                    "480" : { "perPage": 1, "arrows": false }
+                  }
+                }'>
+                  <div class="splide__track">
+                    <ul class="splide__list">
+                    <?php for($i=1; $i<=6; $i++): ?>
+                      <li class="splide__slide">
+                        <div class="bg-muted text-dark h-full min-h-[24rem] rounded-2xl flex items-center justify-center text-2xl font-bold">Slide <?= $i ?></div>
+                      </li>
+                    <?php endfor; ?>
+                    </ul>
+                  </div>
+                </div>
+            </div>
+
+            <style>
+                .splide__pagination__page.is-active {
+                    background: var(--sq-color-primary);
+                }
+            </style>
+
+            <!-- Demo 1: Basic Responsive Grid -->
+            <div class="mb-8 border-t pt-16 mt-16">
+                <div class="flex items-center justify-between">
+                    <h2 class="text-2xl font-bold mb-6">Swiper Slider</h2>
+                    <p class="text-xs font-mono uppercase tracking-widest text-muted mb-4">Requires <code class="text-xs">slider: { library: 'swiper' }</code> -> squeditor.config.js</p>
+                </div>
+                <div class="swiper rounded-2xl overflow-hidden shadow-sm"
+                    data-sq-swiper="
+                        slidesPerView: 1; 
+                        spaceBetween: 20; 
+                        breakpoints: { 
+                            sm: { slidesPerView: 2 }, 
+                            md: { slidesPerView: 3 }, 
+                            lg: { slidesPerView: 4 } 
+                        }"
+                    >
+                    <div class="swiper-wrapper">
+                        <?php for($i=1; $i<=6; $i++): ?>
+                            <div class="swiper-slide">
+                                <div class="bg-muted text-dark aspect-square rounded-2xl flex items-center justify-center text-2xl font-bold">Slide <?= $i ?></div>
+                            </div>
+                        <?php endfor; ?>
+                    </div>
+                    <div class="swiper-pagination mt-6 relative !bottom-0 pb-4"></div>
+                </div>
+            </div>
+
+        </div>
+    </section>
+</main>
+
+<?php
+$content = ob_get_clean();
+require SRC_PATH . '/page-templates/base.php';

package/project-template/src/template-parts/header.php

@@ -11,15 +11,15 @@ if ($layout !== 'default') {
 }
 ?>
 <!-- Site Header -->
-<header id="sq_header" class="sq--header absolute w-full top-0 z-[1000]" data-uk-sticky="top: 80; cls-active: sq-header--sticky; animation: uk-animation-slide-top">
+<header id="sq_header" class="sq--header absolute w-full top-0 z-[1000] bg-white dark:bg-zinc-900" data-gsap="from: {y: -80, opacity: 0}; to: {y: 0, opacity: 1}; duration: 1.2; ease: expo.inOut;">
   <div class="sq--header--inner max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
 
     <!-- Logo -->
     <a href="index.html" class="sq--logo flex items-center gap-2 group">
       <div class="w-8 h-8 sq-bg-secondary rounded-lg flex items-center justify-center transition-transform group-hover:scale-110">
-        <i class="sq-icon-zap"></i>
+        <i class="sq-icon-waves"></i>
       </div>
-      <h1 class="font-bold text-xl m-0 tracking-tight hidden md:inline-flex"><?= htmlspecialchars($site['name']) ?></h1>
+      <h1 class="font-bold text-xl m-0 tracking-tight"><?= htmlspecialchars($site['name']) ?></h1>
     </a>
 
     <!-- Desktop Nav (Centered) -->
@@ -30,11 +30,11 @@ if ($layout !== 'default') {
     <!-- Right Side / CTA -->
     <div class="sq--header--cta flex items-center gap-6">
        <a href="#" class="sq-nav-link text-base font-medium text-zinc-900 dark:text-white !text-opacity-70 hover:text-secondary hover:!text-opacity-100 transition-colors hidden md:inline-block">Log in</a>
-       <a href="https://squeditor.com/" class="btn btn-secondary">Try Squeditor</a>
+       <a href="https://squeditor.com/" class="btn btn-secondary !hidden md:!inline-flex">Try Squeditor</a>
       
       <!-- Mobile Toggle -->
-      <button class="sq--header--mobile--toggle md:hidden" data-uk-toggle="target: #sq_mobile_offcanvas" type="button" aria-label="Menu">
-        <span data-uk-icon="icon: menu; ratio: 1"></span>
+      <button class="sq--header--mobile--toggle md:hidden" data-gsap-toggle="#sq_offcanvas_creative" type="button" aria-label="Menu">
+        <span data-uk-icon="icon: menu; ratio: 1.5"></span>
       </button>
     </div>
   </div>
@@ -48,18 +48,18 @@ if ($layout !== 'default') {
 </div>
 
 <!-- Creative Offcanvas -->
-<div id="sq-offcanvas-creative" class="sq-offcanvas-creative fixed inset-0 z-[9999] pointer-events-none text-zinc-600 shadow-2xl" data-gsap-timeline="{paused: true}">
+<div id="sq_offcanvas_creative" class="sq-offcanvas-creative fixed inset-0 z-[9999] pointer-events-none text-zinc-600 shadow-2xl" style="visibility: hidden" data-gsap-timeline="{paused: true}">
 
     <!-- Backdrop Overlay -->
-    <div class="sq-offcanvas-creative--close fixed inset-0 z-10 pointer-events-auto bg-black/50 backdrop-blur-md" data-gsap-reverse="#sq-offcanvas-creative" data-gsap="position: '<'; from: {autoAlpha: 0, duration: 0.25, ease: 'power3.out'}"></div>
+    <div class="sq-offcanvas-creative--close fixed inset-0 z-10 pointer-events-auto bg-black/50 backdrop-blur-md" data-gsap-reverse="#sq_offcanvas_creative" data-gsap="position: '<'; from: {autoAlpha: 0, duration: 0.25, ease: 'power3.out'}"></div>
     
     <!-- Offcanvas Background Panel -->
-    <div class="absolute top-0 left-0 w-full md:w-1/3 h-full bg-white shadow-2xl flex flex-col items-start justify-start z-20 pointer-events-auto" data-gsap="from: {xPercent: -100, duration: 0.6, ease: 'power4.inOut'}" data-sq-cursor-color="#4f46e5">
+    <div class="absolute top-0 left-0 w-full md:w-1/3 h-full bg-white shadow-2xl flex flex-col items-start justify-start z-20 pointer-events-auto" data-gsap="position: '-=0.3'; from: {xPercent: -100, duration: 0.6, ease: 'power4.inOut'}" data-sq-cursor-color="#4f46e5">
         
         <!-- Header -->
         <div class="flex items-center justify-between w-full p-6 lg:p-12" data-gsap="from: {yPercent: -20, opacity: 0, duration: 0.4, ease: 'power3.out'}">
             <a href="#" class="sq-logo text-xl font-bold text-zinc-900" data-sq-cursor-stick>Squeditor</a>
-            <button data-gsap-reverse="#sq-offcanvas-creative" class="opacity-50 hover:opacity-100 transition-opacity" data-sq-cursor-stick>
+            <button data-gsap-reverse="#sq_offcanvas_creative" class="opacity-50 hover:opacity-100 transition-opacity" data-sq-cursor-stick>
                 <span data-uk-icon="icon: close; ratio: 1.5"></span>
             </button>
         </div>
@@ -117,4 +117,4 @@ if ($layout !== 'default') {
             </a>
         </div>
     </div>
-</div>
+</div>

package/scripts/build-components.js

@@ -6,6 +6,7 @@ const projectRoot = process.cwd();
 const config = require(path.join(projectRoot, 'squeditor.config.js'));
 const fwRoot = path.resolve(projectRoot, config.framework); // resolves ..
 const manifest = require(path.join(fwRoot, 'uikit-manifest.json'));
+const resolvePages = require('./utils/resolve-pages');
 
 
 const selectedComponents = config.components || [];
@@ -82,12 +83,34 @@ console.log(`   Components included: _core, ${selectedComponents.join(', ')}`);
 // Generate src/config/active-components.php for the style-guide page
 const phpConfigDir = path.join(projectRoot, 'src/config');
 fs.mkdirSync(phpConfigDir, { recursive: true });
-const phpConfig = `<?php\n// Auto-generated by build-components.js — DO NOT EDIT\n$active_components = ${JSON.stringify(selectedComponents)};\n`;
+const phpComponentsArray = `[${selectedComponents.map(c => `'${c}'`).join(', ')}]`;
+const phpConfig = `<?php\n// Auto-generated by build-components.js — DO NOT EDIT\n$active_components = ${phpComponentsArray};\n`;
 fs.writeFileSync(
   path.join(phpConfigDir, 'active-components.php'),
   phpConfig
 );
 
+// Generate src/config/active-themes.php for automatic PHP dev server theme detection
+// Map each page to its corresponding theme identifier
+const themePageMapping = {};
+if (config.themes) {
+  Object.keys(config.themes).forEach(themeKey => {
+    const rawPages = config.themes[themeKey].pages || [];
+    const absolutePages = resolvePages(rawPages, projectRoot);
+    absolutePages.forEach(page => {
+      // Clean leading slashes for normalization if desired, but here we just map exact values
+      themePageMapping[page] = themeKey;
+    });
+  });
+}
+const phpThemesArrayParts = Object.entries(themePageMapping).map(([page, theme]) => `'${page}' => '${theme}'`);
+const phpThemesConfig = `<?php\n// Auto-generated by build-components.js — DO NOT EDIT\n$active_themes = [${phpThemesArrayParts.join(', ')}];\n`;
+fs.writeFileSync(
+  path.join(phpConfigDir, 'active-themes.php'),
+  phpThemesConfig
+);
+
+
 // Inject all themes into main.scss so live-switching works in the Style Guide
 const mainScssPath = path.join(projectRoot, 'src/assets/scss/main.scss');
 if (fs.existsSync(mainScssPath) && config.themes) {
@@ -107,3 +130,57 @@ if (fs.existsSync(mainScssPath) && config.themes) {
   fs.writeFileSync(mainScssPath, mainScss);
   console.log(`[Squeditor] 🎨 Injected themes: ${Object.keys(config.themes).join(', ')}`);
 }
+
+// Generate Dynamic Slider Config Import
+const sliderConfig = config.slider || { library: false };
+const dynamicSliderPath = path.join(outputJsDir, '_slider_dynamic.js');
+let sliderImportCode = '// Auto-generated by build-components.js — DO NOT EDIT\n';
+if (sliderConfig.library === 'swiper') {
+    sliderImportCode += 'import \'./modules/swiper-init.js\';\n';
+} else if (sliderConfig.library === 'splide') {
+    sliderImportCode += 'import \'./modules/splide-init.js\';\n';
+}
+fs.writeFileSync(dynamicSliderPath, sliderImportCode);
+console.log(`[Squeditor] 🎠 Injected slider library: ${sliderConfig.library || 'none'}`);
+
+// Copy slider library CSS to src/assets/css/slider.min.css
+// This keeps the CSS separate from main.js and gives it a clear, descriptive filename
+const sliderCssDest = path.join(projectRoot, 'src/assets/css/slider.min.css');
+if (sliderConfig.library === 'splide') {
+    const splideCssPath = path.join(projectRoot, 'node_modules/@splidejs/splide/dist/css/splide.min.css');
+    if (fs.existsSync(splideCssPath)) {
+        fs.copyFileSync(splideCssPath, sliderCssDest);
+        console.log('[Squeditor] 📎 Copied Splide CSS → src/assets/css/slider.min.css');
+    } else {
+        console.warn('[Squeditor] ⚠️ Splide CSS not found at expected path.');
+        fs.writeFileSync(sliderCssDest, '/* Splide CSS not found */\n');
+    }
+} else if (sliderConfig.library === 'swiper') {
+    // Concatenate all Swiper CSS modules into a single file
+    const swiperCssParts = [
+        'node_modules/swiper/swiper.min.css',
+        'node_modules/swiper/modules/navigation.min.css',
+        'node_modules/swiper/modules/pagination.min.css',
+        'node_modules/swiper/modules/effect-fade.min.css',
+        'node_modules/swiper/modules/free-mode.min.css',
+    ];
+    let combinedCss = '/* Swiper CSS - auto-generated by build-components.js */\n';
+    for (const part of swiperCssParts) {
+        const fullPath = path.join(projectRoot, part);
+        if (fs.existsSync(fullPath)) {
+            combinedCss += fs.readFileSync(fullPath, 'utf8') + '\n';
+        }
+    }
+    fs.writeFileSync(sliderCssDest, combinedCss);
+    console.log('[Squeditor] 📎 Copied Swiper CSS → src/assets/css/slider.min.css');
+} else {
+    // No slider configured — write an empty placeholder so head.php link doesn't 404
+    fs.writeFileSync(sliderCssDest, '/* No slider library configured */\n');
+}
+
+// Generate src/config/active-slider.php for conditional CSS loading in head.php
+const phpSliderConfig = `<?php\n// Auto-generated by build-components.js — DO NOT EDIT\n$active_slider = ${sliderConfig.library ? `'${sliderConfig.library}'` : 'false'};\n`;
+fs.writeFileSync(
+  path.join(phpConfigDir, 'active-slider.php'),
+  phpSliderConfig
+);

package/scripts/copy-static.js

@@ -145,6 +145,32 @@ async function run() {
     } else {
         console.warn(`[Squeditor] ⚠️ Source directory for static assets not found: ${srcDir}`);
     }
+
+    // Post-Vite-build CSS renaming for clearer dist output
+    const distCssDir = path.join(projectRoot, config.snapshot.outputDir, 'assets/css');
+
+    // Rename main_css.css → main.min.css (SCSS entry output)
+    const mainCssSrc = path.join(distCssDir, 'main_css.css');
+    const mainCssDest = path.join(distCssDir, 'main.min.css');
+    if (fs.existsSync(mainCssSrc)) {
+        fs.renameSync(mainCssSrc, mainCssDest);
+        console.log('[Squeditor] 📎 Renamed main_css.css → main.min.css');
+    }
+
+    // Remove stale main.css (previously contained CSS-in-JS extracted by Vite, now handled separately)
+    const staleMainCss = path.join(distCssDir, 'main.css');
+    if (fs.existsSync(staleMainCss)) {
+        fs.unlinkSync(staleMainCss);
+    }
+
+    // Copy slider.min.css to dist (generated by build-components.js)
+    const sliderCssSrc = path.join(projectRoot, 'src/assets/css/slider.min.css');
+    const sliderCssDest = path.join(distCssDir, 'slider.min.css');
+    if (fs.existsSync(sliderCssSrc)) {
+        fs.mkdirSync(distCssDir, { recursive: true });
+        fs.copyFileSync(sliderCssSrc, sliderCssDest);
+        console.log('[Squeditor] 📎 Copied slider.min.css → dist/assets/css/');
+    }
 }
 
 run();

package/scripts/dev-router.php

@@ -19,5 +19,14 @@ if (preg_match('/\.html$/', $uri)) {
     }
 }
 
-// 3. Let PHP's core handle index.php fallback for directories or 404s
+// 3. If it is an extensionless request, route it to the equivalent PHP file
+if ($uri !== '/' && !pathinfo($uri, PATHINFO_EXTENSION)) {
+    $php_file = $uri . '.php';
+    if (file_exists($doc_root . $php_file)) {
+        require $doc_root . $php_file;
+        return true;
+    }
+}
+
+// 4. Let PHP's core handle index.php fallback for directories or 404s
 return false;

package/scripts/dev.js

@@ -23,6 +23,18 @@ async function startDev() {
             fwRoot = config.framework;
         }
     }
+
+    // Run build-components.js BEFORE starting servers to ensure
+    // active-themes.php, _uikit_dynamic.scss, _slider_dynamic.js etc. exist on first request
+    const buildComponentsPath = path.join(fwRoot, 'scripts/build-components.js');
+    console.log('[Squeditor] 🔧 Building dynamic components...');
+    const { execSync } = require('child_process');
+    try {
+        execSync(`node "${buildComponentsPath}"`, { stdio: 'inherit', cwd: projectRoot });
+    } catch (e) {
+        console.error('[Squeditor] ❌ Failed to build dynamic components:', e.message);
+    }
+
     const devRouterPath = path.join(fwRoot, 'scripts/dev-router.php');
 
     // Start PHP Server
@@ -35,7 +47,6 @@ async function startDev() {
         env: { ...process.env, SQUEDITOR_PHP_PORT: phpPort, SQUEDITOR_VITE_PORT: vitePort }
     });
 
-    // Start Vite
     const vite = spawn('npx', [
         'vite',
         '--port', vitePort.toString(),
@@ -45,6 +56,24 @@ async function startDev() {
         env: { ...process.env, SQUEDITOR_PHP_PORT: phpPort, SQUEDITOR_VITE_PORT: vitePort }
     });
 
+    // Watch squeditor.config.js for changes and rebuild dynamic components
+    if (fs.existsSync(configPath)) {
+        let rebuildTimeout;
+        fs.watch(configPath, (eventType) => {
+            if (eventType === 'change') {
+                // Debounce to prevent multiple triggers from IDE saves
+                clearTimeout(rebuildTimeout);
+                rebuildTimeout = setTimeout(() => {
+                    console.log(`\n[Squeditor] 🔄 Config changed. Rebuilding dynamic components...`);
+                    const buildScript = spawn('node', [path.join(fwRoot, 'scripts/build-components.js')], { stdio: 'inherit' });
+                    buildScript.on('close', (code) => {
+                        if (code === 0) console.log(`[Squeditor] ✨ Rebuild complete! (Vite will hot-reload automatically)`);
+                    });
+                }, 300);
+            }
+        });
+    }
+
     process.on('SIGINT', () => {
         php.kill();
         vite.kill();