@squeditor/squeditor-framework 1.0.0

package/project-template/src/sections/hero/hero-split.php

@@ -0,0 +1,132 @@
+<?php
+// src/sections/hero/hero-split.php
+
+$defaults = [
+    'badge_icon'        => 'sq-icon-stars-02',
+    'badge_label'       => 'True 24/7',
+    'badge_sub'         => 'Care When It Counts',
+    'heading'           => 'A calmer dental visit starts here.',
+    'heading_highlight' => 'here.',
+    'subheading'        => 'Modern dentistry designed around your comfort. From routine checkups to advanced care, we make dental visits simple, clear, and stress-free.',
+    'cta_label'         => 'Contact Us',
+    'cta_url'           => '/contact.html',
+    'avatars'           => [
+        'assets/static/images/common/avatars/01.png', 
+        'assets/static/images/common/avatars/02.png', 
+        'assets/static/images/common/avatars/03.png'
+    ],
+    'avatar_count'      => '15+',
+    'avatar_label'      => 'Expert Dentists for you',
+    'image_src'         => 'assets/static/images/showcase/hero-dental.png', // Will generate real image later
+    'image_alt'         => 'Dental care procedure',
+    'services'          => [
+        ['label' => 'Teeth Cleaning', 'status' => 'active'],
+        ['label' => 'Whitening',      'status' => 'active'],
+        ['label' => 'Lost Filling',   'status' => 'pending'],
+    ],
+];
+
+// Merge provided args with defaults
+$args = array_merge($defaults, $args ?? []);
+
+// Process heading highlight
+$highlight_html = '<span class="text-sq-secondary">' . htmlspecialchars($args['heading_highlight']) . '</span>';
+$processed_heading = str_replace(
+    htmlspecialchars($args['heading_highlight']), 
+    $highlight_html, 
+    htmlspecialchars($args['heading'])
+);
+?>
+
+<div class="sq-hero--split min-h-screen w-full relative overflow-hidden flex flex-col pt-8 pb-8 px-4 md:px-8">
+    <div class="sq-hero--inner max-w-7xl mx-auto lg:px-6 flex items-center justify-between">
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 md:gap-12 lg:gap-24 flex-1 relative z-10">
+          
+          <!-- Left Column: Content -->
+          <div class="flex flex-col justify-center max-w-xl py-8 md:py-12">
+              
+              <!-- Badge -->
+              <div class="inline-flex items-center self-start bg-white dark:bg-opacity-5 rounded-full p-1 pr-4 shadow-sm border mb-8" data-gsap="from: {opacity: 0, y: -20}; duration: 0.8">
+                  <span class="flex items-center justify-center w-8 h-8 rounded-full sq-bg-secondary font-bold mr-3">
+                    <i class="sq-icon <?= htmlspecialchars($args['badge_icon']) ?>"></i>
+                  </span>
+                  <span class="text-sm font-semibold"><?= htmlspecialchars($args['badge_label']) ?></span>
+                  <span class="w-px h-4 bg-zinc-200 mx-4"></span>
+                  <span class="text-sm text-muted"><?= htmlspecialchars($args['badge_sub']) ?></span>
+              </div>
+
+              <!-- Heading -->
+              <h2 class="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-6 leading-[1.1]" 
+                  data-gsap="from: {opacity: 0, y: 60}; duration: 0.8; delay: 0.2">
+                  <?= $processed_heading ?>
+              </h2>
+
+              <!-- Subheading -->
+              <p class="text-lg md:text-xl text-muted mb-10 max-w-md leading-relaxed" 
+                  data-gsap="from: {opacity: 0, y: 20}; duration: 0.8; delay: 0.4">
+                  <?= htmlspecialchars($args['subheading']) ?>
+              </p>
+
+              <!-- CTA Button -->
+              <div data-gsap="from: {opacity: 0, y: 16}; duration: 0.6; delay: 0.7" class="self-start mb-16">
+                  <a href="<?= htmlspecialchars($args['cta_url']) ?>" class="btn btn-secondary min-h-[48px] !px-8 !py-4 !text-base !shadow-lg !shadow-sq-primary/30 flex items-center gap-2 transition-transform hover:scale-105">
+                      <?= htmlspecialchars($args['cta_label']) ?>
+                      <i class="sq-icon sq-icon-arrow-up-right text-lg leading-none mt-0.5"></i>
+                  </a>
+              </div>
+
+              <!-- Social Proof -->
+              <div class="flex items-center mt-auto" data-gsap="from: {opacity: 0, y: 16}; duration: 0.6; delay: 0.9">
+                  <div class="flex -space-x-3 mr-4">
+                      <?php foreach($args['avatars'] as $avatar): ?>
+                        <div class="w-10 h-10 rounded-full border-[3px] overflow-hidden bg-zinc-100 border-white dark:border-zinc-900 shadow-sm">
+                          <img class="w-full h-full object-cover" src="<?= htmlspecialchars($avatar) ?>" alt="Dentist Avatar">
+                        </div>
+                      <?php endforeach; ?>
+                      <div class="w-10 h-10 rounded-full border-[3px] border-white dark:border-zinc-900 bg-zinc-100 dark:bg-zinc-700 flex items-center justify-center text-xs font-bold text-zinc-700 dark:text-zinc-200">
+                          <?= htmlspecialchars($args['avatar_count']) ?>
+                      </div>
+                  </div>
+                  <span class="text-sm text-muted font-medium"><?= htmlspecialchars($args['avatar_label']) ?></span>
+              </div>
+
+          </div>
+
+          <!-- Right Column: Image & Floating Cards -->
+          <div class="relative h-[400px] md:h-[700px]">
+              
+              <!-- Image Wrapper -->
+              <div class="h-full rounded-[2rem] overflow-hidden" data-gsap="from: {clipPath: 'inset(0 0 100% 0)'}; duration: 2; ease: expo.inOut;">
+                  <img src="<?= htmlspecialchars($args['image_src']) ?>" alt="<?= htmlspecialchars($args['image_alt']) ?>" class="w-full h-full object-cover rounded-[2rem]">
+              </div>
+
+              <!-- Floating Services Container -->
+              <div class="absolute bottom-4 md:bottom-12 right-4 md:right-12 flex flex-col gap-3 z-10 w-64" data-gsap="from: {opacity: 0, x: 30}; stagger: 0.15; delay: 1.3">
+                  <?php foreach($args['services'] as $index => $service): ?>
+                      <div class="bg-white/90 backdrop-blur-md rounded-full py-3 px-5 shadow-lg flex items-center justify-between border border-white/40">
+                          
+                          <div class="flex items-center gap-3">
+                              <!-- Service Icon -->
+                              <i class="sq-icon sq-icon-medical-cross text-xl text-zinc-400"></i>
+                              
+                              <span class="text-sm font-medium text-zinc-800"><?= htmlspecialchars($service['label']) ?></span>
+                          </div>
+
+                          <!-- Status Icon -->
+                          <?php if($service['status'] === 'active'): ?>
+                              <div class="w-5 h-5 rounded-full bg-emerald-500 flex items-center justify-center">
+                                  <i class="sq-icon sq-icon-check text-white text-[10px] font-bold"></i>
+                              </div>
+                          <?php else: ?>
+                              <div class="w-5 h-5 rounded-full border-2 border-zinc-200"></div>
+                          <?php endif; ?>
+                          
+                      </div>
+                  <?php endforeach; ?>
+              </div>
+
+          </div>
+
+      </div>
+    </div>
+</div>

package/project-template/src/sections/hero/hero-video.php

@@ -0,0 +1,22 @@
+<?php
+// src/sections/hero/hero-video.php
+$heading = $heading ?? 'Watch Our Story';
+$video_url = $video_url ?? 'https://www.w3schools.com/html/mov_bbb.mp4';
+?>
+<section class="relative h-screen flex items-center justify-center overflow-hidden">
+  <video autoplay loop muted class="absolute z-0 w-full h-full object-cover">
+    <source src="<?= htmlspecialchars($video_url) ?>" type="video/mp4">
+  </video>
+  <div class="z-10 relative text-center text-white p-8 md:p-16 sq-hero-overlay max-w-4xl mx-6">
+    <h1 class="text-5xl lg:text-8xl font-black mb-8 tracking-tighter leading-tight">
+      Elevate Your <span class="text-accent">SaaS Presence</span>
+    </h1>
+    <p class="text-lg md:text-xl text-teal-50/80 mb-10 max-w-2xl mx-auto leading-relaxed">
+      A premium frontend framework built for modern developers who demand speed, flexibility, and stunning aesthetics out of the box.
+    </p>
+    <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
+      <a href="#explore" class="btn btn-secondary btn-lg w-full sm:w-auto rounded-2xl hover:shadow-2xl transition-all hover:-translate-y-1">Start Designing</a>
+      <a href="#" class="btn btn-ghost btn-lg w-full sm:w-auto rounded-2xl bg-white/10 backdrop-blur-md border border-white/20 text-white hover:bg-white/20 transition-all">View Demo</a>
+    </div>
+  </div>
+</section>

package/project-template/src/sections/sidebar/sidebar-right.php

@@ -0,0 +1,11 @@
+<?php
+// src/sections/sidebar/sidebar-right.php
+?>
+<div class="sq-sidebar bg-body text-body p-6 rounded-lg shadow-sm border border-zinc-100">
+  <h3 class="text-lg font-bold mb-4 border-b border-zinc-100 pb-2">Categories</h3>
+  <ul class="space-y-2">
+    <li><a href="#" class="hover:text-secondary transition-colors">Design</a></li>
+    <li><a href="#" class="hover:text-secondary transition-colors">Development</a></li>
+    <li><a href="#" class="hover:text-secondary transition-colors">Business</a></li>
+  </ul>
+</div>

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

@@ -0,0 +1,17 @@
+<?php
+// src/template-parts/breadcrumbs.php
+$crumbs = $crumbs ?? [];
+?>
+<nav aria-label="Breadcrumb">
+  <ol class="flex items-center space-x-2 text-sm">
+    <li><a href="/" class="hover:text-primary">Home</a></li>
+    <?php foreach ($crumbs as $crumb): ?>
+      <li><span class="mx-2">/</span></li>
+      <?php if (!empty($crumb['url'])): ?>
+        <li><a href="<?= htmlspecialchars($crumb['url']) ?>" class="hover:text-primary"><?= htmlspecialchars($crumb['label']) ?></a></li>
+      <?php else: ?>
+        <li class="text-zinc-900 font-medium" aria-current="page"><?= htmlspecialchars($crumb['label']) ?></li>
+      <?php endif; ?>
+    <?php endforeach; ?>
+  </ol>
+</nav>

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

@@ -0,0 +1,74 @@
+<?php
+// src/template-parts/footer.php
+$layout  = $layout ?? 'default';
+$isDark  = $isDark ?? false;
+
+if ($layout !== 'default') {
+    get_section('footer/' . $layout, get_defined_vars());
+    return;
+}
+?>
+<!-- Site Footer -->
+<footer id="sq_footer" class="sq--footer py-24 border-t dark:border-transparent dark:bg-black/40">
+  <div class="sq--footer--inner max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-5 gap-12 text-body">
+    <div class="sq--footer--brand md:col-span-2">
+      <div class="flex items-center gap-2 mb-6">
+        <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>
+          </div>
+          <h1 class="font-bold text-xl m-0 tracking-tight"><?= htmlspecialchars($site['name']) ?></h1>
+        </a>
+      </div>
+      <p class="text-sm max-w-xs leading-relaxed mb-8">
+        <?= htmlspecialchars($site['description']) ?>
+      </p>
+      <div class="flex gap-4">
+        <?php foreach ($site['socials'] as $platform => $url): ?>
+          <a href="<?= htmlspecialchars($url) ?>" class="hover:text-secondary transition-colors">
+            <span data-uk-icon="icon: <?= htmlspecialchars($platform) ?>; ratio: 0.8"></span>
+          </a>
+        <?php endforeach; ?>
+      </div>
+    </div>
+    
+    <div class="sq--footer--links">
+      <h3 class="font-bold text-sm mb-6">Product</h3>
+      <ul class="space-y-4 text-sm">
+        <li><a href="#" class="hover:text-secondary transition-colors">Editor</a></li>
+        <li><a href="#" class="hover:text-secondary transition-colors">Framework</a></li>
+        <li><a href="#" class="hover:text-secondary transition-colors">Templates</a></li>
+        <li><a href="#" class="hover:text-secondary transition-colors">Pricing</a></li>
+      </ul>
+    </div>
+
+    <div class="sq--footer--links">
+      <h3 class="font-bold text-sm mb-6">Support</h3>
+      <ul class="space-y-4 text-sm">
+        <li><a href="#" class="hover:text-secondary transition-colors">Help Center</a></li>
+        <li><a href="#" class="hover:text-secondary transition-colors">API Documentation</a></li>
+        <li><a href="#" class="hover:text-secondary transition-colors">Community</a></li>
+        <li><a href="#" class="hover:text-secondary transition-colors">FAQ</a></li>
+      </ul>
+    </div>
+    
+    <div class="sq--footer--links">
+      <h3 class="font-bold text-sm mb-6">Resources</h3>
+      <ul class="space-y-4 text-sm">
+        <li><a href="#" class="hover:text-secondary transition-colors">Blog</a></li>
+        <li><a href="#" class="hover:text-secondary transition-colors">Changelog</a></li>
+        <li><a href="#" class="hover:text-secondary transition-colors">Freebies</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="sq--footer--divider max-w-7xl mx-auto px-6 mt-20 mb-8">
+    <hr>
+  </div>
+  <div class="sq--footer--bottom max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4 text-xs">
+    <p>&copy; <?= date('Y') ?> <?= htmlspecialchars($site['name']) ?>. Built locally by Developers.</p>
+    <div class="flex gap-8">
+      <a href="#" class="hover:text-secondary transition-colors">Terms of Service</a>
+      <a href="#" class="hover:text-secondary transition-colors">Privacy Policy</a>
+    </div>
+  </div>
+</footer>

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

@@ -0,0 +1,120 @@
+<?php
+// src/template-parts/header.php
+// $site is available from site-config.php (already included by base.php)
+$layout  = $layout ?? 'default';
+$isDark  = $isDark ?? false;
+$isFloat = $isFloat ?? false;
+
+if ($layout !== 'default') {
+    get_section('header/' . $layout, get_defined_vars());
+    return;
+}
+?>
+<!-- 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">
+  <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>
+      </div>
+      <h1 class="font-bold text-xl m-0 tracking-tight hidden md:inline-flex"><?= htmlspecialchars($site['name']) ?></h1>
+    </a>
+
+    <!-- Desktop Nav (Centered) -->
+    <div class="sq--header--nav hidden md:flex items-center absolute left-1/2 -translate-x-1/2">
+      <?php get_template_part('nav'); ?>
+    </div>
+
+    <!-- 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>
+      
+      <!-- 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>
+    </div>
+  </div>
+</header>
+
+<!-- Mobile Offcanvas Nav -->
+<div id="sq_mobile_offcanvas" data-uk-offcanvas="flip: true; overlay: true">
+  <div class="uk-offcanvas-bar">
+    <?php get_template_part('nav', ['mobile' => true]); ?>
+  </div>
+</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}">
+
+    <!-- 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>
+    
+    <!-- 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">
+        
+        <!-- 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>
+                <span data-uk-icon="icon: close; ratio: 1.5"></span>
+            </button>
+        </div>
+        
+
+        <ul class="flex flex-col items-start justify-start gap-6 w-full p-6 lg:p-12">
+            <li class="overflow-hidden">
+                <div data-gsap="position: '>-0.2'; from: {yPercent: 100, opacity: 0, duration: 0.4, ease: 'power3.out'}">
+                    <a class="text-4xl font-bold text-zinc-900 hover:text-zinc-900 transition-colors duration-300" href="index.html">Home</a>
+                </div>
+            </li>
+            <li class="overflow-hidden">
+                <div data-gsap="position: '<0.1'; from: {yPercent: 100, opacity: 0, duration: 0.4, ease: 'power3.out'}">
+                    <a class="text-4xl font-bold text-zinc-900 hover:text-zinc-900 transition-colors duration-300" href="work.html">Work</a>
+                </div>
+            </li>
+            <li class="overflow-hidden">
+                <div data-gsap="position: '<0.1'; from: {yPercent: 100, opacity: 0, duration: 0.4, ease: 'power3.out'}">
+                    <a class="text-4xl font-bold text-zinc-900 hover:text-zinc-900 transition-colors duration-300" href="services.html">Services</a>
+                </div>
+            </li>
+            <li class="overflow-hidden">
+                <div data-gsap="position: '<0.1'; from: {yPercent: 100, opacity: 0, duration: 0.4, ease: 'power3.out'}">
+                    <a class="text-4xl font-bold text-zinc-900 hover:text-zinc-900 transition-colors duration-300" href="about.html">About</a>
+                </div>
+            </li>
+            <li class="overflow-hidden">
+                <div data-gsap="position: '<0.1'; from: {yPercent: 100, opacity: 0, duration: 0.4, ease: 'power3.out'}">
+                    <a class="text-4xl font-bold text-zinc-900 hover:text-zinc-900 transition-colors duration-300" href="contact.html">Get in touch</a>
+                </div>
+            </li>
+            <li class="overflow-hidden mt-4">
+                <div data-gsap="position: '<0.1'; from: {yPercent: 100, opacity: 0, duration: 0.4, ease: 'power3.out'}">
+                    <a class="text-xl font-bold text-zinc-400 hover:text-zinc-900 transition-colors duration-300" href="blog.html">Blog</a>
+                </div>
+            </li>
+            <li class="overflow-hidden">
+                <div data-gsap="position: '<0.1'; from: {yPercent: 100, opacity: 0, duration: 0.4, ease: 'power3.out'}">
+                    <a class="text-xl font-bold text-zinc-400 hover:text-zinc-900 transition-colors duration-300" href="style-guide.html">Style Guide</a>
+                </div>
+            </li>
+            <li class="overflow-hidden">
+                <div data-gsap="position: '<0.1'; from: {yPercent: 100, opacity: 0, duration: 0.4, ease: 'power3.out'}">
+                    <a class="text-xl font-bold text-zinc-400 hover:text-zinc-900 transition-colors duration-300" href="gsap-demo.html">Demos</a>
+                </div>
+            </li>
+        </ul>
+
+        <div class="flex items-center gap-4 w-full p-6 lg:p-12" data-gsap="position: '<0.1'; from: {yPercent: 10, opacity: 0, duration: 0.4, ease: 'power3.out'}">
+            <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full bg-zinc-100 hover:bg-zinc-200 transition-colors duration-300" data-sq-cursor-stick>
+              <span data-uk-icon="icon: facebook; ratio: 1"></span>
+            </a>
+            <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full bg-zinc-100 hover:bg-zinc-200 transition-colors duration-300" data-sq-cursor-stick>
+              <span data-uk-icon="icon: github; ratio: 1"></span>
+            </a>
+        </div>
+    </div>
+</div>

package/project-template/src/template-parts/mega-menu.php

@@ -0,0 +1,7 @@
+<?php
+// src/template-parts/mega-menu.php
+// Placeholder for future implementation
+?>
+<div class="mega-menu p-6 bg-white shadow-xl rounded-lg">
+  <p>Mega Menu Content Here</p>
+</div>

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

@@ -0,0 +1,16 @@
+<?php
+// src/template-parts/nav.php
+$is_mobile = $mobile ?? false;
+$nav_class = $is_mobile ? 'flex flex-col space-y-4' : 'flex space-x-2 items-center m-0 p-0';
+?>
+<nav>
+  <ul class="<?= $nav_class ?>">
+    <?php foreach ($site['nav'] as $item): ?>
+      <li>
+        <a href="<?= htmlspecialchars($item['url']) ?>" 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 py-2 px-3">
+          <?= htmlspecialchars($item['label']) ?>
+        </a>
+      </li>
+    <?php endforeach; ?>
+  </ul>
+</nav>

package/project-template/src/template-parts/page-title-bar.php

@@ -0,0 +1,14 @@
+<?php
+// src/template-parts/page-title-bar.php
+$title = $title ?? 'Page Title';
+$subtitle = $subtitle ?? '';
+$class = $class ?? 'py-20 text-center bg-zinc-50 dark:bg-zinc-800 dark:bg-opacity-40';
+?>
+<div class="<?= htmlspecialchars($class) ?>">
+  <div class="max-w-7xl mx-auto px-6">
+    <h1 class="text-4xl font-bold m-0"><?= htmlspecialchars($title) ?></h1>
+    <?php if ($subtitle): ?>
+      <p class="mt-4 text-base opacity-60"><?= htmlspecialchars($subtitle) ?></p>
+    <?php endif; ?>
+  </div>
+</div>

package/project-template/tailwind.config.js

@@ -0,0 +1,26 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    darkMode: ['selector', '.sq-theme-dark'],
+    content: [
+        './src/**/*.php',
+        './src/**/*.html',
+    ],
+    theme: {
+        extend: {
+            colors: {
+                primary: 'var(--sq-color-primary)',
+                secondary: 'var(--sq-color-secondary)',
+                accent: 'var(--sq-color-accent)',
+                'transition-from': 'var(--sq-page-transition-from)',
+                'transition-via': 'var(--sq-page-transition-via)',
+                'transition-to': 'var(--sq-page-transition-to)',
+            },
+            fontFamily: {
+                sans: ['var(--sq-font-sans)'],
+                serif: ['var(--sq-font-serif)'],
+                mono: ['var(--sq-font-mono)'],
+            },
+        },
+    },
+    plugins: [],
+}

package/project-template/vite.config.js

@@ -0,0 +1,67 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+
+export default defineConfig({
+    root: 'src',
+    base: './',
+    publicDir: false, // Handle static assets via dedicated script to maintain structure
+    server: {
+        host: '127.0.0.1',
+        port: 5173,
+        strictPort: true,
+    },
+    build: {
+        outDir: path.resolve(__dirname, 'dist'),
+        emptyOutDir: true, // Wipe dist/ to clean up the assets/assets mess
+        rollupOptions: {
+            input: {
+                main: path.resolve(__dirname, 'src/assets/js/main.js'),
+                main_css: path.resolve(__dirname, 'src/assets/scss/main.scss'),
+                tailwind: path.resolve(__dirname, 'src/assets/css/tailwind.css'),
+                'squeditor-icons': path.resolve(__dirname, 'src/assets/css/squeditor-icons.css'),
+            },
+            output: {
+                entryFileNames: 'assets/js/[name].js',
+                assetFileNames: (assetInfo) => {
+                    const name = assetInfo.names ? assetInfo.names[0] : assetInfo.name;
+                    if (name.endsWith('.css')) return 'assets/css/[name][extname]';
+
+                    // Route fonts and other compiled assets
+                    const isFont = name.match(/\.(woff2?|eot|ttf|otf)$/) || name.includes('squeditor-icons.svg');
+                    const isImage = !isFont && name.match(/\.(png|jpe?g|gif|svg|webp)$/);
+
+                    if (isFont) {
+                        if (name.startsWith('squeditor-icons')) {
+                            return 'assets/static/fonts/squeditor-icons/[name][extname]';
+                        }
+                        return 'assets/static/fonts/[name][extname]';
+                    }
+
+                    if (isImage) {
+                        return 'assets/static/images/[name][extname]';
+                    }
+
+                    return 'assets/[name][extname]';
+                },
+            },
+        },
+    },
+    css: {
+        preprocessorOptions: {
+            scss: {
+                api: 'modern-compiler',
+                silenceDeprecations: ['import', 'legacy-js-api'],
+                // Global SCSS import for all files
+                additionalData: `@import "/assets/scss/_config.scss"; @import "/assets/scss/_functions.scss"; @import "/assets/scss/_tokens.scss";`,
+            },
+        },
+    },
+    plugins: [{
+        name: 'php-watch',
+        handleHotUpdate({ file, server }) {
+            if (file.endsWith('.php')) {
+                server.ws.send({ type: 'full-reload' });
+            }
+        }
+    }],
+});

package/scripts/build-components.js

@@ -0,0 +1,109 @@
+const fs = require('fs');
+const path = require('path');
+
+// Resolve project root (cwd when running npm scripts)
+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 selectedComponents = config.components || [];
+
+// JS output still relies on concatenation
+const outputJsDir = path.join(projectRoot, config.output.js);
+fs.mkdirSync(outputJsDir, { recursive: true });
+// CSS output changes to dynamic SCSS generation
+const outputScssDir = path.join(projectRoot, 'src/assets/scss');
+fs.mkdirSync(outputScssDir, { recursive: true });
+// JS and SCSS collectors
+const jsPaths = new Set();
+const scssPaths = new Set();
+
+// 1. Core JS and SCSS
+const core = manifest['_core'];
+core.js.forEach(f => jsPaths.add(f));
+core.css.forEach(f => scssPaths.add(f));
+
+// 2. Component JS and SCSS
+selectedComponents.forEach(componentName => {
+  const entry = manifest[componentName];
+  if (!entry) {
+    console.warn(`[Squeditor] Unknown component in config: "${componentName}" — skipping.`);
+    return;
+  }
+  entry.js.forEach(f => jsPaths.add(f));
+  entry.css.forEach(f => scssPaths.add(f));
+});
+
+// 3. Generate Bundles
+let jsBundle = '';
+jsPaths.forEach(f => {
+  const filePath = path.join(projectRoot, f.replace('node_modules/uikit/', 'node_modules/uikit/'));
+  // Special case for icon which points to dist/ specifically in manifest
+  const iconPath = path.join(projectRoot, f);
+  const finalPath = fs.existsSync(iconPath) ? iconPath : path.join(projectRoot, 'node_modules/uikit', f.replace('node_modules/uikit/', ''));
+
+  if (fs.existsSync(finalPath)) {
+    jsBundle += fs.readFileSync(finalPath, 'utf8') + '\n';
+  } else {
+    console.warn(`[Squeditor] file not found: ${finalPath}`);
+  }
+});
+
+let scssImports = '// Auto-generated by build-components.js — DO NOT EDIT\n';
+scssImports += '// These imports point to the UIKit SCSS source files to enable tree-shaking natively via Vite\n\n';
+scssImports += '// Core UIkit Dependencies\n';
+
+scssPaths.forEach(f => {
+  const absolutePath = path.join(projectRoot, f);
+  const relativePath = path.relative(outputScssDir, absolutePath).replace(/\\/g, '/');
+  if (f.includes('variables.scss') || f.includes('mixins.scss')) {
+    scssImports += `@import "${relativePath}";\n`;
+  }
+});
+
+scssImports += '\n// Active UIkit Components\n';
+scssPaths.forEach(f => {
+  if (!f.includes('variables.scss') && !f.includes('mixins.scss')) {
+    const absolutePath = path.join(projectRoot, f);
+    const relativePath = path.relative(outputScssDir, absolutePath).replace(/\\/g, '/');
+    scssImports += `@import "${relativePath}";\n`;
+  }
+});
+
+// Finalize writes
+fs.writeFileSync(path.join(outputJsDir, 'uikit-components.js'), jsBundle);
+fs.writeFileSync(path.join(outputScssDir, '_uikit_dynamic.scss'), scssImports);
+
+console.log('[Squeditor] ✅ uikit-components.js and _uikit_dynamic.scss built successfully.');
+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`;
+fs.writeFileSync(
+  path.join(phpConfigDir, 'active-components.php'),
+  phpConfig
+);
+
+// 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) {
+  let mainScss = fs.readFileSync(mainScssPath, 'utf8');
+
+  // Strip out any existing theme imports
+  mainScss = mainScss.replace(/@import\s+['"]themes\/[^'"]+['"];\n?/g, '');
+
+  // Append all configured themes
+  let themeImports = '';
+  Object.keys(config.themes).forEach(themeKey => {
+    themeImports += `@import 'themes/${themeKey}';\n`;
+  });
+
+  // Ensure exactly one trailing newline
+  mainScss = mainScss.trim() + '\n' + themeImports;
+  fs.writeFileSync(mainScssPath, mainScss);
+  console.log(`[Squeditor] 🎨 Injected themes: ${Object.keys(config.themes).join(', ')}`);
+}