@squeditor/squeditor-framework 1.0.2 → 1.0.4

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

@@ -10,7 +10,7 @@
     font-size: var(--sq-btn-font-size);
     font-weight: var(--sq-btn-font-weight);
 
-    @apply inline-flex items-center justify-center gap-2 py-0 px-4 transition-colors transition-all duration-200 cursor-pointer border-none outline-none no-underline;
+    @apply inline-flex items-center justify-center gap-2 py-0 px-4 transition-all duration-200 cursor-pointer outline-none no-underline;
 }
 
 .btn-sm {
@@ -18,8 +18,13 @@
     height: 2rem;
 }
 
+.btn-md {
+    @apply text-base px-4;
+    height: 2.5rem;
+}
+
 .btn-lg {
-    @apply text-lg px-6;
+    @apply text-base px-6;
     height: 3rem;
 }
 
@@ -125,6 +130,106 @@
     }
 }
 
+// ---------------------------------------------------------
+// Container + Expand Container
+// ---------------------------------------------------------
+@layer components {
+    .container {
+        width: 100%;
+
+        @screen sm  { max-width: 540px;  }
+        @screen md  { max-width: 720px;  }
+        @screen lg  { max-width: 960px;  }
+        @screen xl  { max-width: 1140px; }
+        @screen 2xl { max-width: 1280px; }
+    }
+
+    /* Base breakout — expands equally both sides */
+    .expand-container {
+        --scroll-width: var(--body-scroll-width, 17px);
+        --expand-size: calc((100vw - var(--scroll-width) - 100%) / -2);
+        margin-right: var(--expand-size);
+        margin-left: var(--expand-size);
+    }
+
+    .expand-container-end {
+        --scroll-width: var(--body-scroll-width, 17px);
+        /* Use width increase instead of negative margin */
+        --expand-size: calc((100vw - var(--scroll-width) - 100%) / 2);
+        width: calc(100% + var(--expand-size));
+        overflow: visible; /* let image overflow naturally */
+    }
+
+    .expand-container-start {
+        --scroll-width: var(--body-scroll-width, 17px);
+        --expand-size: calc((100vw - var(--scroll-width) - 100%) / 2);
+        width: calc(100% + var(--expand-size));
+        margin-left: calc(var(--expand-size) * -1);
+        overflow: visible;
+    }
+
+}
+
+// ---------------------------------------------------------
+// Form icon group
+// ---------------------------------------------------------
+@layer components {
+
+  /* Base */
+  .form-icon-group {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    width: 100%;
+  }
+
+  .form-icon-group .form-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    height: 100%;
+    background: transparent;
+    border: 0;
+    outline: 0;
+    text-decoration: none;
+    user-select: none;
+  }
+
+  /* Icon widths based on input size */
+  .form-icon-group .form-control + .form-icon              { width: 3rem !important;   }
+  .form-icon-group .form-control.form-control-lg + .form-icon { width: 3.5rem !important; }
+  .form-icon-group .form-control.form-control-sm + .form-icon { width: 2.5rem !important; }
+  .form-icon-group .form-control.form-control-xs + .form-icon { width: 2rem !important;   }
+
+  /* Icon on the LEFT (default) */
+  .form-icon-group:not(.form-icon-flip) .form-control              { padding-left: 2.75rem !important; }
+  .form-icon-group:not(.form-icon-flip) .form-control.form-control-lg { padding-left: 3.25rem !important; }
+  .form-icon-group:not(.form-icon-flip) .form-control.form-control-sm { padding-left: 2.25rem !important; }
+  .form-icon-group:not(.form-icon-flip) .form-control.form-control-xs { padding-left: 1.75rem !important; }
+
+  /* RTL — icon on the LEFT */
+  [dir="rtl"] .form-icon-group:not(.form-icon-flip) .form-control              { padding-left: 1rem !important;   padding-right: 2.75rem !important; }
+  [dir="rtl"] .form-icon-group:not(.form-icon-flip) .form-control.form-control-lg { padding-left: 1rem !important; padding-right: 3.25rem !important; }
+  [dir="rtl"] .form-icon-group:not(.form-icon-flip) .form-control.form-control-sm { padding-left: 1rem !important; padding-right: 2.25rem !important; }
+  [dir="rtl"] .form-icon-group:not(.form-icon-flip) .form-control.form-control-xs { padding-left: 1rem !important; padding-right: 1.75rem !important; }
+
+  /* Icon on the RIGHT (flip) */
+  .form-icon-group.form-icon-flip .form-icon                           { right: 0; }
+  .form-icon-group.form-icon-flip .form-control                        { padding-right: 2.75rem !important; }
+  .form-icon-group.form-icon-flip .form-control.form-control-lg        { padding-right: 3.25rem !important; }
+  .form-icon-group.form-icon-flip .form-control.form-control-sm        { padding-right: 2.25rem !important; }
+  .form-icon-group.form-icon-flip .form-control.form-control-xs        { padding-right: 1.75rem !important; }
+
+  /* RTL — icon on the RIGHT (flip) */
+  [dir="rtl"] .form-icon-group.form-icon-flip .form-control              { padding-right: 1rem !important; padding-left: 2.75rem !important; }
+  [dir="rtl"] .form-icon-group.form-icon-flip .form-control.form-control-lg { padding-right: 1rem !important; padding-left: 3.25rem !important; }
+  [dir="rtl"] .form-icon-group.form-icon-flip .form-control.form-control-sm { padding-right: 1rem !important; padding-left: 2.25rem !important; }
+  [dir="rtl"] .form-icon-group.form-icon-flip .form-control.form-control-xs { padding-right: 1rem !important; padding-left: 1.75rem !important; }
+
+}
+
 // ---------------------------------------------------------
 // Page Transitions
 // ---------------------------------------------------------

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/project-template/tailwind.config.js

@@ -7,6 +7,17 @@ module.exports = {
     ],
     theme: {
         extend: {
+            screens: {
+                'sm':  '459px',
+                'md':  '768px',
+                'lg':  '992px',
+                'xl':  '1200px',
+                '2xl': '1400px',
+            },
+            container: {
+                center:  true,
+                padding: '1rem', // 16px each side = 32px gutter (--bs-gutter-x)
+            },
             colors: {
                 primary: 'var(--sq-color-primary)',
                 secondary: 'var(--sq-color-secondary)',
@@ -20,7 +31,24 @@ module.exports = {
                 serif: ['var(--sq-font-serif)'],
                 mono: ['var(--sq-font-mono)'],
             },
+            fontSize: {
+                // Display sizes
+                'display-1': ['8rem',    { lineHeight: '1',   letterSpacing: '-0.32rem' }],
+                'display-2': ['6rem',    { lineHeight: '1',   letterSpacing: '-0.24rem' }],
+                'display-3': ['5rem',    { lineHeight: '1',   letterSpacing: '-0.2rem'  }],
+                'display-4': ['4.5rem',  { lineHeight: '1',   letterSpacing: '-0.18rem' }],
+                'display-5': ['4rem',    { lineHeight: '1',   letterSpacing: '-0.16rem' }],
+                'display-6': ['3.5rem',  { lineHeight: '1',   letterSpacing: '-0.14rem' }],
+
+                // Heading sizes
+                'h1': ['3rem',    { lineHeight: '1.1', letterSpacing: '-0.12rem'  }],
+                'h2': ['2.5rem',  { lineHeight: '1.1', letterSpacing: '-0.08rem'  }],
+                'h3': ['2rem',    { lineHeight: '1.1', letterSpacing: '-0.07rem'  }],
+                'h4': ['1.5rem',  { lineHeight: '1.2', letterSpacing: '-0.06rem'  }],
+                'h5': ['1.25rem', { lineHeight: '1.2', letterSpacing: '-0.05rem'  }],
+                'h6': ['1rem',    { lineHeight: '1.2', letterSpacing: '-0.004rem' }],
+            },
         },
     },
     plugins: [],
-}
+}