@astuteo/breakout-grid 5.1.3 → 5.1.4

package/breakout-grid-visualizer-lite.js

@@ -1,6 +1,6 @@
 (function() {
   "use strict";
-  const VERSION = `v${"5.1.3"} lite`;
+  const VERSION = `v${"5.1.4"} lite`;
   const LOREM_CONTENT = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
 
 Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.`;

package/breakout-grid-visualizer.js

@@ -1,6 +1,6 @@
 (function() {
   "use strict";
-  const VERSION = `v${"5.1.3"}`;
+  const VERSION = `v${"5.1.4"}`;
   const LOREM_CONTENT = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
 
 Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.`;
@@ -82,7 +82,7 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
       backdropOpacity: 0.85
     };
   }
-  const BUILD_VERSION = "5.1.3";
+  const BUILD_VERSION = "5.1.4";
   function generateCSSExport(c, version = BUILD_VERSION) {
     var _a, _b, _c, _d, _e;
     const VERSION2 = version;
@@ -895,21 +895,6 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
       };
       return config;
     },
-    formatConfig(obj, indent = 2) {
-      const pad = " ".repeat(indent);
-      const lines = ["{"];
-      const entries = Object.entries(obj);
-      entries.forEach(([key, value], i) => {
-        const comma = i < entries.length - 1 ? "," : "";
-        if (typeof value === "object" && value !== null) {
-          lines.push(`${pad}${key}: ${this.formatConfig(value, indent + 2).replace(/\n/g, "\n" + pad)}${comma}`);
-        } else {
-          lines.push(`${pad}${key}: '${value}'${comma}`);
-        }
-      });
-      lines.push("}");
-      return lines.join("\n");
-    },
     configSections: {
       content: { keys: ["contentMin", "contentBase", "contentMax"], label: "Content" },
       defaultCol: { keys: ["defaultCol"], label: "Default Column" },
@@ -921,43 +906,37 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
     copySection(sectionName) {
       const section = this.configSections[sectionName];
       if (!section) return;
-      const config = {};
+      const lines = [];
       section.keys.forEach((key) => {
+        let value, varName;
         if (this.configOptions[key]) {
-          config[key] = this.editValues[key] || this.configOptions[key].value;
+          value = this.editValues[key] || this.configOptions[key].value;
+          varName = this.configOptions[key].liveVar;
         } else if (key === "breakoutMin") {
-          config[key] = this.editValues.breakout_min || this.breakoutOptions.min.value;
+          value = this.editValues.breakout_min || this.breakoutOptions.min.value;
+          varName = this.breakoutOptions.min.liveVar;
         } else if (key === "breakoutScale") {
-          config[key] = this.editValues.breakout_scale || this.breakoutOptions.scale.value;
+          value = this.editValues.breakout_scale || this.breakoutOptions.scale.value;
+          varName = this.breakoutOptions.scale.liveVar;
+        }
+        if (varName) {
+          lines.push(`${varName}: ${value};`);
         }
       });
       if (section.nested) {
         Object.keys(section.nested).forEach((nestedKey) => {
-          config[nestedKey] = {};
           section.nested[nestedKey].forEach((subKey) => {
-            config[nestedKey][subKey] = this.editValues[`gapScale_${subKey}`] || this.gapScaleOptions[subKey].value;
+            const opt = this.gapScaleOptions[subKey];
+            const value = this.editValues[`gapScale_${subKey}`] || opt.value;
+            lines.push(`${opt.liveVar}: ${value};`);
           });
         });
       }
-      const configStr = this.formatConfigFlat(config);
-      navigator.clipboard.writeText(configStr).then(() => {
+      navigator.clipboard.writeText(lines.join("\n")).then(() => {
         this.sectionCopied = sectionName;
         setTimeout(() => this.sectionCopied = null, 1500);
       });
     },
-    formatConfigFlat(obj) {
-      const lines = [];
-      const entries = Object.entries(obj);
-      entries.forEach(([key, value], i) => {
-        const comma = i < entries.length - 1 ? "," : ",";
-        if (typeof value === "object" && value !== null) {
-          lines.push(`${key}: ${this.formatConfig(value)}${comma}`);
-        } else {
-          lines.push(`${key}: '${value}'${comma}`);
-        }
-      });
-      return lines.join("\n");
-    },
     copyConfig() {
       var _a, _b, _c, _d, _e;
       const config = this.generateConfigExport();
@@ -2308,7 +2287,6 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
             <div>
               <span style="font-size: 11px; color: #374151;">min</span>
               <span style="font-size: 9px; color: #9ca3af; margin-left: 4px;">floor</span>
-              <span style="font-size: 8px; color: #10b981; margin-left: 4px; font-weight: 500;">live</span>
             </div>
             <div style="display: flex; align-items: center; gap: 4px;">
               <input type="number" :value="getNumericValue('baseGap')" @input="updateNumericValue('baseGap', $event.target.value)" step="0.5"
@@ -2325,7 +2303,6 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
             <div>
               <span style="font-size: 11px; color: #374151;">max</span>
               <span style="font-size: 9px; color: #9ca3af; margin-left: 4px;">ceiling</span>
-              <span style="font-size: 8px; color: #10b981; margin-left: 4px; font-weight: 500;">live</span>
             </div>
             <div style="display: flex; align-items: center; gap: 4px;">
               <input type="number" :value="getNumericValue('maxGap')" @input="updateNumericValue('maxGap', $event.target.value)" step="1"
@@ -2339,8 +2316,8 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
             </div>
           </div>
 
-          <div style="font-size: 9px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin: 10px 0 2px;">Responsive Scale <span style="font-size: 8px; color: #10b981; font-weight: 500; text-transform: none;">live preview</span></div>
-          <div style="font-size: 9px; color: #9ca3af; margin-bottom: 6px; line-height: 1.4;">Fluid value (vw) that grows with viewport. Active breakpoint previews live.</div>
+          <div style="font-size: 9px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin: 10px 0 2px;">Responsive Scale (Gap)</div>
+          <div style="font-size: 9px; color: #9ca3af; margin-bottom: 6px; line-height: 1.4;">Fluid value (vw) that grows with viewport.</div>
           <template x-for="key in Object.keys(gapScaleOptions)" :key="'ed_gs_'+key">
             <div :style="{
               display: 'flex',
@@ -2366,7 +2343,6 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
             </div>
           </template>
 
-          <!-- Live formula preview -->
           <div style="margin-top: 8px; padding: 8px; background: #f3f4f6; border-radius: 4px; font-family: 'SF Mono', Monaco, monospace; font-size: 9px; line-height: 1.6;">
             <div style="color: #6b7280; margin-bottom: 4px;">Generated CSS:</div>
             <div style="color: #374151;"><span style="color: #9ca3af;">mobile:</span> clamp(<span x-text="editValues.baseGap || configOptions.baseGap.value"></span>, <span x-text="editValues.gapScale_default || gapScaleOptions.default.value"></span>, <span x-text="editValues.maxGap || configOptions.maxGap.value"></span>)</div>

package/dist/_objects.breakout-grid.css

@@ -1,6 +1,6 @@
 /**
  * Breakout Grid - Objects Layer (ITCSS)
- * Version: 5.1.3
+ * Version: 5.1.4
  *
  * Documentation: https://github.com/astuteo-llc/breakout-grid
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astuteo/breakout-grid",
-  "version": "5.1.3",
+  "version": "5.1.4",
   "type": "module",
   "description": "CSS Grid breakout layout system with visual configurator",
   "main": "dist/_objects.breakout-grid.css",