@squeditor/squeditor-framework 1.0.4 → 1.0.5

package/README.md

@@ -4,12 +4,12 @@ We implement AI Agents skills to help you build your website easily in minutes.
 
 ### Showcase and Demo
 
-[Main Demo](https://squeditor.com/showcase/main-demo/)
-[All Components](https://squeditor.com/showcase/all-components/)
-[Style Guide](https://squeditor.com/showcase/style-guide/)
+[Main Demo](https://squeditor.com/showcase/main-demo/)  |  
+[All Components](https://squeditor.com/showcase/all-components/)  |  
+[Style Guide](https://squeditor.com/showcase/style-guide/)  |  
 [GSAP Animations](https://squeditor.com/showcase/gsap-animations/)
 
-[Full Documentation](https://docs.squeditor.com)
+[Full Documentation](https://docs.squeditor.com/framework/getting-started/introduction)
 
 ### Key Features
 

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@squeditor/squeditor-framework",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Squeditor Framework is a high-performance, developer-first framework for building lightning-fast, static websites. It combines the power of PHP-style templating with the modern performance of Tailwind CSS, the interactivity of UIKit 3, and the speed of Vite.",
   "main": "index.js",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
+    "scaffold": "node scripts/scaffold.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {

package/project-template/src/assets/css/fonts.css

@@ -0,0 +1,2 @@
+/* Add your custom fonts @font-face or cdn urls here to load your fonts */
+/* For local fonts use this correct path ’../static/fonts/your-font-name/..’ */

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

@@ -24,7 +24,8 @@ h6,
     font-family: var(--sq-font-heading);
     color: var(--sq-color-heading-text);
     font-weight: 600;
-    line-height: 1.2;
+    line-height: var(--sq-heading-line-height, 1.2);
+    letter-spacing: var(--sq-heading-letter-spacing, normal);
 }
 
 h1 {
@@ -75,7 +76,8 @@ h6 {
 // Only apply paragraph and list styles if the author didn't supply their own layout classes
 p:not([class]) {
     margin-bottom: 1rem;
-    line-height: 1.6;
+    line-height: var(--sq-body-line-height, 1.6);
+    letter-spacing: var(--sq-body-letter-spacing, normal);
 }
 
 ul:not([class]),

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

@@ -115,7 +115,7 @@
     }
 }
 
-.sq--header {
+.sq-header {
     z-index: var(--sq-z-sticky);
 
     &--sticky {
@@ -133,7 +133,6 @@
 // ---------------------------------------------------------
 // Container + Expand Container
 // ---------------------------------------------------------
-@layer components {
     .container {
         width: 100%;
 
@@ -168,13 +167,9 @@
         overflow: visible;
     }
 
-}
-
 // ---------------------------------------------------------
 // Form icon group
 // ---------------------------------------------------------
-@layer components {
-
   /* Base */
   .form-icon-group {
     position: relative;
@@ -228,8 +223,6 @@
   [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/_tokens.scss

@@ -1,16 +1,17 @@
 // _tokens.scss — Design tokens as CSS custom properties
 
 // 1. Define SASS Variables for calculations
-$color-primary: #1c2020 !default;
-$color-primary-dark: #ffffff !default;
-$color-secondary: #038677 !default;
-$color-secondary-dark: #d5f37b !default;
-$color-accent: #F0FF44 !default;
-$color-accent-dark: #F0FF44 !default;
+$color-primary: #107466 !default;
+$color-primary-dark: #F0FF44 !default;
+$color-secondary: #1c2020 !default;
+$color-secondary-dark: #fef1e7 !default;
+$color-accent: #e5fdc5 !default;
+$color-accent-dark: #e5fdc5 !default;
 $color-white: #FFFFFF !default;
-$color-muted-text: #777f7f !default;
-$color-muted-bg: #f8f8f8 !default;
+$color-muted-text: #707070 !default;
+$color-muted-bg: #fef1e7 !default;
 $color-light: #f8f8f8 !default;
+$color-dark: #19191b !default;
 $color-body-bg: #FFFFFF !default;
 $color-body-text: #19191b !default;
 $color-heading-text: #19191b !default;
@@ -28,6 +29,7 @@ $color-border: rgba(138, 138, 138, 0.196) !default;
     --sq-color-muted-text: #{$color-muted-text};
     --sq-color-muted-bg: #{$color-muted-bg};
     --sq-color-light: #{$color-light};
+    --sq-color-dark: #{$color-dark};
     --sq-color-body-bg: #{$color-body-bg};
     --sq-color-body-text: #{$color-body-text};
     --sq-color-heading-text: #{$color-heading-text};
@@ -76,12 +78,12 @@ $color-border: rgba(138, 138, 138, 0.196) !default;
     // --- Component Tokens ---
 
     // Buttons
-    --sq-btn-height: 2.25rem; // h-9
+    --sq-btn-height: 2.75rem;
     --sq-btn-bg: transparent;
     --sq-btn-text: var(--sq-color-body-text);
-    --sq-btn-radius: var(--sq-radius-lg);
-    --sq-btn-font-size: 1rem; // text-base
-    --sq-btn-font-weight: 500;
+    --sq-btn-radius: var(--sq-radius-md);
+    --sq-btn-font-size: 1rem;
+    --sq-btn-font-weight: 600;
 
     --sq-btn-default-bg: var(--sq-color-light);
     --sq-btn-default-text: var(--sq-color-muted-text);
@@ -113,7 +115,7 @@ $color-border: rgba(138, 138, 138, 0.196) !default;
     // Dropdown
     --sq-dropdown-width: 300px;
     --sq-dropdown-padding: 2rem;
-    --sq-dropdown-bg: var(--sq-color-white);
+    --sq-dropdown-bg: var(--sq-color-muted-bg);
     --sq-dropdown-text: var(--sq-color-body-text);
 
     // Accordion
@@ -226,4 +228,7 @@ $color-border: rgba(138, 138, 138, 0.196) !default;
     --sq-card-bg: #19191b;
     --sq-card-shadow: none;
     --sq-card-shadow-hover: none;
+
+    // Dropdown
+    --sq-dropdown-bg: var(--sq-color-muted-bg);
 }

package/project-template/src/config/site-config.php

@@ -5,6 +5,7 @@
 $site = [
     'name'        => 'My Project',
     'lang'        => 'en',
+    'dir'         => 'ltr', // 'ltr' or 'rtl'
     'logo'        => 'assets/static/images/logo.svg',
     'description' => 'Squeditor project starter template.',
     'og_image'    => 'assets/static/images/og-default.png',

package/project-template/src/index.php

@@ -41,10 +41,10 @@ ob_start();
             </p>
 
             <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">
+                <a href="https://squeditor.com/" class="btn btn-lg btn-secondary hover:scale-105 transition-transform">
                     Try Squeditor
                 </a>
-                <a href="https://docs.squeditor.com/" class="btn btn-lg !px-8 !py-3 !rounded-full text-white font-medium !border !border-1 !border-solid !border-zinc-200 hover:scale-105 transition-transform">
+                <a href="https://docs.squeditor.com/" class="btn btn-lg !border !border-1 !border-solid !border-zinc-200 hover:scale-105 transition-transform">
                     View Docs
                 </a>
             </div>

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

@@ -40,14 +40,16 @@ if (file_exists(__DIR__ . '/../config/active-slider.php')) {
 <?php if ($is_vite): ?>
   <!-- Vite Development Environment -->
   <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/fonts.css">
   <link rel="stylesheet" href="<?= $vite_server ?>/assets/css/squeditor-icons.css">
+  <link rel="stylesheet" href="<?= $vite_server ?>/assets/css/tailwind.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>
 <?php else: ?>
   <!-- Production Static Assets -->
+  <link rel="stylesheet" href="assets/css/fonts.css">
   <link rel="stylesheet" href="assets/css/squeditor-icons.css">
   <link rel="stylesheet" href="assets/css/tailwind.css">
   <?php if ($active_slider): ?><link rel="stylesheet" href="assets/css/slider.min.css"><?php endif; ?>

package/project-template/src/sections/cards/cards-horizontal.php

@@ -17,7 +17,7 @@ $items = $items ?? [];
               <li class="flex items-center gap-2"><i class="sq-icon-chevron-right opacity-30"></i> <?= htmlspecialchars($feature) ?></li>
             <?php endforeach; ?>
           </ul>
-          <span class="absolute top-6 end-6 w-10 h-10 p-0 rounded-full flex items-center justify-center border border-zinc-200 dark:border-zinc-800 group-hover:-rotate-45 transition-transform duration-300">
+          <span class="absolute top-6 end-6 w-10 h-10 p-0 rounded-full flex items-center justify-center bg-white group-hover:-rotate-45 transition-transform duration-300">
             <i class="sq-icon-arrow-right"></i>
           </span>
         </div>

package/project-template/src/sections/cta/cta-banner.php

@@ -7,7 +7,7 @@ $button_url = $button_url ?? '#';
 $secondary_button_text = $secondary_button_text ?? '';
 $hint_text = $hint_text ?? '';
 ?>
-<section class="py-32 text-center border-t border-zinc-300 border-opacity-30 dark:border-opacity-5">
+<section class="sq-cta-banner py-16 md:py-24 lg:py-32 text-center border-t border-zinc-300 border-opacity-30 dark:border-opacity-5">
   <div class="max-w-4xl mx-auto px-6">
     <h2 class="text-4xl md:text-5xl font-bold mb-4 tracking-tighter">
         <?= $heading ?>

package/project-template/src/sections/cta/cta-newsletter.php

@@ -3,7 +3,7 @@
 $heading = $heading ?? 'Subscribe to our newsletter';
 $subheading = $subheading ?? 'Get the latest updates and news from our team.';
 ?>
-<section class="py-20 bg-zinc-50 dark:bg-zinc-800 dark:bg-opacity-40">
+<section class="py-20 bg-muted dark:bg-opacity-40">
   <div class="max-w-7xl mx-auto px-6 flex flex-col items-center justify-between gap-8">
     <div class="mb-8 md:mb-0 md:w-1/2">
       <h2 class="text-4xl font-bold text-center m-0"><?= htmlspecialchars($heading) ?></h2>

package/project-template/src/sections/header/layout-01.php

@@ -4,7 +4,7 @@
 $isDark = $isDark ?? false;
 $isFloat = $isFloat ?? false;
 
-$headerClasses = 'sq--header w-full z-[1000]';
+$headerClasses = 'sq-header w-full z-[1000]';
 if ($isFloat) $headerClasses .= ' absolute top-0';
 if ($isDark) $headerClasses .= ' dark-mode text-white bg-zinc-900';
 else $headerClasses .= ' bg-white border-b';

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

@@ -62,13 +62,13 @@ $processed_heading = str_replace(
               </h2>
 
               <!-- Subheading -->
-              <p class="text-lg md:text-xl text-muted mb-10 max-w-md leading-relaxed" 
+              <p class="text-lg md:text-xl text-muted mb-10 max-w-md" 
                   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">
+              <div data-gsap="from: {opacity: 0, y: 16}; duration: 0.6; delay: 0.7" class="self-start mb-8 lg: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>
@@ -96,8 +96,8 @@ $processed_heading = str_replace(
           <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 class="h-full rounded-3xl 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">
               </div>
 
               <!-- Floating Services Container -->

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

@@ -9,8 +9,8 @@ if ($layout !== 'default') {
 }
 ?>
 <!-- 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">
+<footer id="sq_footer" class="sq-footer py-12 md:py-18 lg: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-6 md:gap-8 lg:gap-12">
     <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">
@@ -20,7 +20,7 @@ if ($layout !== 'default') {
           <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">
+      <p class="text-sm max-w-xs leading-relaxed mb-6">
         <?= htmlspecialchars($site['description']) ?>
       </p>
       <div class="flex gap-4">
@@ -61,11 +61,11 @@ if ($layout !== 'default') {
       </ul>
     </div>
   </div>
-  <div class="sq--footer--divider max-w-7xl mx-auto px-6 mt-20 mb-8">
+  <div class="sq-footer-divider max-w-7xl mx-auto px-6 mt-8 md:mt-12 lg:mt-16 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="sq-footer-bottom max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-muted">
+    <p>&copy; <?= date('Y') ?> <?= htmlspecialchars($site['name']) ?>. Built with ❤️ by Expert 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>

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

@@ -11,8 +11,8 @@ if ($layout !== 'default') {
 }
 ?>
 <!-- Site Header -->
-<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">
+<header id="sq_header" class="sq-header absolute w-full top-0 z-[1000]" 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">
@@ -23,17 +23,17 @@ if ($layout !== 'default') {
     </a>
 
     <!-- Desktop Nav (Centered) -->
-    <div class="sq--header--nav hidden md:flex items-center absolute left-1/2 -translate-x-1/2">
+    <div class="sq-header-nav items-center absolute left-1/2 -translate-x-1/2 hidden lg:flex">
       <?php get_template_part('nav'); ?>
     </div>
 
     <!-- Right Side / CTA -->
-    <div class="sq--header--cta flex items-center gap-6">
+    <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 !hidden md:!inline-flex">Try Squeditor</a>
       
       <!-- Mobile Toggle -->
-      <button class="sq--header--mobile--toggle md:hidden" data-gsap-toggle="#sq_offcanvas_creative" type="button" aria-label="Menu">
+      <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>

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

@@ -1,13 +1,13 @@
 <?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_class = $is_mobile ? 'flex flex-col space-y-4' : 'flex space-x-8 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">
+        <a href="<?= htmlspecialchars($item['url']) ?>" class="sq-nav-link">
           <?= htmlspecialchars($item['label']) ?>
         </a>
       </li>

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

@@ -2,7 +2,7 @@
 // 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';
+$class = $class ?? 'py-20 text-center bg-muted dark:bg-opacity-40';
 ?>
 <div class="<?= htmlspecialchars($class) ?>">
   <div class="max-w-7xl mx-auto px-6">

package/project-template/vite.config.js

@@ -19,6 +19,7 @@ export default defineConfig({
                 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'),
+                'fonts': path.resolve(__dirname, 'src/assets/css/fonts.css'),
             },
             output: {
                 entryFileNames: 'assets/js/[name].js',
@@ -60,6 +61,13 @@ export default defineConfig({
         name: 'php-watch',
         handleHotUpdate({ file, server }) {
             if (file.endsWith('.php')) {
+                // Force Vite to invalidate CSS modules so Tailwind generates new classes
+                const tailwindModule = server.moduleGraph.getModuleById(path.resolve(__dirname, 'src/assets/css/tailwind.css'));
+                if (tailwindModule) server.moduleGraph.invalidateModule(tailwindModule);
+                
+                const scssModule = server.moduleGraph.getModuleById(path.resolve(__dirname, 'src/assets/scss/main.scss'));
+                if (scssModule) server.moduleGraph.invalidateModule(scssModule);
+
                 server.ws.send({ type: 'full-reload' });
             }
         }

package/scripts/build-components.js

@@ -77,8 +77,7 @@ scssPaths.forEach(f => {
 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(', ')}`);
+console.log('[Squeditor] ✅ UIkit3 components built successfully.');
 
 // Generate src/config/active-components.php for the style-guide page
 const phpConfigDir = path.join(projectRoot, 'src/config');
@@ -128,7 +127,7 @@ if (fs.existsSync(mainScssPath) && config.themes) {
   // Ensure exactly one trailing newline
   mainScss = mainScss.trim() + '\n' + themeImports;
   fs.writeFileSync(mainScssPath, mainScss);
-  console.log(`[Squeditor] 🎨 Injected themes: ${Object.keys(config.themes).join(', ')}`);
+  console.log(`[Squeditor] 🎨 Ready themes: ${Object.keys(config.themes).join(', ')}`);
 }
 
 // Generate Dynamic Slider Config Import
@@ -141,7 +140,7 @@ if (sliderConfig.library === 'swiper') {
     sliderImportCode += 'import \'./modules/splide-init.js\';\n';
 }
 fs.writeFileSync(dynamicSliderPath, sliderImportCode);
-console.log(`[Squeditor] 🎠 Injected slider library: ${sliderConfig.library || 'none'}`);
+console.log(`[Squeditor] 🎠 Selected 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
@@ -150,7 +149,6 @@ 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');
@@ -172,7 +170,6 @@ if (sliderConfig.library === 'splide') {
         }
     }
     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');

package/scripts/scaffold.js

@@ -14,7 +14,24 @@ if (!projectName) {
 let destIndex = args.indexOf('--dest');
 let destPath = destIndex !== -1 ? args[destIndex + 1] : projectName;
 const sourceDir = path.join(__dirname, '..', 'project-template');
-const targetDir = path.resolve(process.cwd(), destPath);
+
+// Check if running directly inside the cloned framework repository
+let isInsideRepo = false;
+try {
+    const pkgPath = path.join(process.cwd(), 'package.json');
+    if (fs.existsSync(pkgPath)) {
+        const pkg = require(pkgPath);
+        if (pkg.name === '@squeditor/squeditor-framework') {
+            isInsideRepo = true;
+        }
+    }
+} catch (e) {}
+
+// If running inside the repo, scaffold as a sibling (../destPath). 
+// Otherwise scaffold in the current directory.
+const targetDir = isInsideRepo 
+    ? path.resolve(process.cwd(), '..', destPath) 
+    : path.resolve(process.cwd(), destPath);
 
 if (!fs.existsSync(sourceDir)) {
     console.error(`Source template directory does not exist: ${sourceDir}`);
@@ -47,14 +64,18 @@ function copyDirectory(src, dest, ignoreList = []) {
 console.log(`[Squeditor] Scaffolding new project: ${projectName}...`);
 
 // 1. Copy the framework core
-const frameworkSourceDir = path.join(__dirname, '..');
-const frameworkTargetDir = path.resolve(process.cwd(), 'squeditor-framework');
-
-if (!fs.existsSync(frameworkTargetDir)) {
-    console.log(`[Squeditor] Installing local framework core at ./squeditor-framework...`);
-    // Pass the name of the target directory to the ignore list to prevent infinite loop
-    const ignoreCoreList = ['project-template', 'showcase', 'node_modules', '.git', '.github', 'squeditor-framework'];
-    copyDirectory(frameworkSourceDir, frameworkTargetDir, ignoreCoreList);
+if (!isInsideRepo) {
+    const frameworkSourceDir = path.join(__dirname, '..');
+    const frameworkTargetDir = path.resolve(process.cwd(), 'squeditor-framework');
+
+    if (!fs.existsSync(frameworkTargetDir)) {
+        console.log(`[Squeditor] Installing local framework core at ./squeditor-framework...`);
+        // Pass the name of the target directory to the ignore list to prevent infinite loop
+        const ignoreCoreList = ['project-template', 'showcase', 'node_modules', '.git', '.github', 'squeditor-framework'];
+        copyDirectory(frameworkSourceDir, frameworkTargetDir, ignoreCoreList);
+    }
+} else {
+    console.log(`[Squeditor] Running inside framework repo. Skipping core installation (using repo).`);
 }
 
 // 2. Copy the project template