@astuteo/breakout-grid 5.1.2 → 5.1.4

package/breakout-grid-visualizer-lite.js

@@ -1,6 +1,6 @@
 (function() {
   "use strict";
-  const VERSION = `v${"5.1.2"} 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.2"}`;
+  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.`;
@@ -17,21 +17,21 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
     contentMin: { value: "50rem", desc: "Min width for content column (~848px). Use rem.", cssVar: "--config-content-min", liveVar: "--content-min" },
     contentMax: { value: "55rem", desc: "Max width for content column (~976px). Use rem.", cssVar: "--config-content-max", liveVar: "--content-max" },
     contentBase: { value: "75vw", desc: "Preferred width for content (fluid). Use vw.", cssVar: "--config-content-base", liveVar: "--content-base" },
-    popoutWidth: { value: "5rem", desc: "Popout extends beyond content. Use rem.", cssVar: "--config-popout", liveVar: null },
-    featureMin: { value: "0rem", desc: "Minimum feature track width (floor)", cssVar: "--config-feature-min", liveVar: null },
-    featureScale: { value: "12vw", desc: "Fluid feature track scaling", cssVar: "--config-feature-scale", liveVar: null },
-    featureMax: { value: "12rem", desc: "Maximum feature track width (ceiling)", cssVar: "--config-feature-max", liveVar: null },
+    popoutWidth: { value: "5rem", desc: "Popout extends beyond content. Use rem.", cssVar: "--config-popout", liveVar: "--popout-width" },
+    featureMin: { value: "0rem", desc: "Minimum feature track width (floor)", cssVar: "--config-feature-min", liveVar: "--feature-min" },
+    featureScale: { value: "12vw", desc: "Fluid feature track scaling", cssVar: "--config-feature-scale", liveVar: "--feature-scale" },
+    featureMax: { value: "12rem", desc: "Maximum feature track width (ceiling)", cssVar: "--config-feature-max", liveVar: "--feature-max" },
     fullLimit: { value: "115rem", desc: "Max width for col-full-limit. Use rem.", cssVar: "--config-full-limit", liveVar: "--full-limit" },
-    defaultCol: { value: "content", desc: "Default column when no col-* class", type: "select", options: ["content", "popout", "feature", "full"], cssVar: "--config-default-col" }
+    defaultCol: { value: "content", desc: "Default column when no col-* class", type: "select", options: ["content", "popout", "feature", "full"], cssVar: "--config-default-col", liveVar: "--default-col" }
   };
   const GAP_SCALE_OPTIONS = {
-    default: { value: "4vw", desc: "Mobile/default gap scaling. Use vw.", cssVar: "--config-gap-scale-default" },
-    lg: { value: "5vw", desc: "Large screens (1024px+). Use vw.", cssVar: "--config-gap-scale-lg" },
-    xl: { value: "6vw", desc: "Extra large (1280px+). Use vw.", cssVar: "--config-gap-scale-xl" }
+    default: { value: "4vw", desc: "Mobile/default gap scaling. Use vw.", cssVar: "--config-gap-scale-default", liveVar: "--gap-scale-default" },
+    lg: { value: "5vw", desc: "Large screens (1024px+). Use vw.", cssVar: "--config-gap-scale-lg", liveVar: "--gap-scale-lg" },
+    xl: { value: "6vw", desc: "Extra large (1280px+). Use vw.", cssVar: "--config-gap-scale-xl", liveVar: "--gap-scale-xl" }
   };
   const BREAKOUT_OPTIONS = {
-    min: { value: "1rem", desc: "Minimum breakout padding (floor)", cssVar: "--config-breakout-min" },
-    scale: { value: "5vw", desc: "Fluid breakout scaling", cssVar: "--config-breakout-scale" }
+    min: { value: "1rem", desc: "Minimum breakout padding (floor)", cssVar: "--config-breakout-min", liveVar: "--breakout-min" },
+    scale: { value: "5vw", desc: "Fluid breakout scaling", cssVar: "--config-breakout-scale", liveVar: "--breakout-scale" }
     // max is popoutWidth
   };
   const BREAKPOINT_OPTIONS = {
@@ -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.2";
+  const BUILD_VERSION = "5.1.4";
   function generateCSSExport(c, version = BUILD_VERSION) {
     var _a, _b, _c, _d, _e;
     const VERSION2 = version;
@@ -862,12 +862,14 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
       Object.keys(options).forEach((key) => {
         const opt = options[key];
         const editKey = prefix ? `${prefix}_${key}` : key;
-        if (opt.cssVar) {
-          const computed = this.getCSSVariable(opt.cssVar);
-          this.editValues[editKey] = computed && computed !== "Not set" && computed !== "" ? computed : opt.value;
-        } else {
-          this.editValues[editKey] = opt.value;
+        let computed = null;
+        if (opt.liveVar) {
+          computed = this.getCSSVariable(opt.liveVar);
+        }
+        if ((!computed || computed === "Not set" || computed === "") && opt.cssVar) {
+          computed = this.getCSSVariable(opt.cssVar);
         }
+        this.editValues[editKey] = computed && computed !== "Not set" && computed !== "" ? computed : opt.value;
       });
     },
     loadCurrentValues() {
@@ -893,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" },
@@ -919,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();
@@ -2306,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"
@@ -2323,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"
@@ -2337,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',
@@ -2364,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.2
+ * 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.2",
+  "version": "5.1.4",
   "type": "module",
   "description": "CSS Grid breakout layout system with visual configurator",
   "main": "dist/_objects.breakout-grid.css",