@astuteo/breakout-grid 5.1.0 → 5.1.1

package/breakout-grid-visualizer-lite.js

@@ -1,6 +1,6 @@
 (function() {
   "use strict";
-  const VERSION = `v${"5.1.0"} lite`;
+  const VERSION = `v${"5.1.1"} 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.0"}`;
+  const VERSION = `v${"5.1.1"}`;
   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.`;
@@ -96,7 +96,7 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
       sectionCopied: null
     };
   }
-  const BUILD_VERSION = "5.1.0";
+  const BUILD_VERSION = "5.1.1";
   function generateCSSExport(c, version = BUILD_VERSION) {
     var _a, _b, _c, _d, _e;
     const VERSION2 = version;
@@ -775,6 +775,14 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
         this.editMode = true;
         this.$nextTick(() => this.loadCurrentValues());
       }
+      const savedConfig = localStorage.getItem("breakoutGridConfig");
+      if (savedConfig) {
+        try {
+          const config = JSON.parse(savedConfig);
+          this.$nextTick(() => this.applyConfig(config));
+        } catch (e) {
+        }
+      }
       const editorPos = localStorage.getItem("breakoutGridEditorPos");
       if (editorPos) {
         try {
@@ -1107,6 +1115,7 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
       this.editValues[`gapScale_${key}`] = num + this.getGapScaleUnit(key);
       this.configCopied = false;
       this.updateGapLive();
+      this.saveConfigToStorage();
     },
     // Breakout helpers (use generic)
     getBreakoutNumeric(key) {
@@ -1119,6 +1128,7 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
       this.editValues[`breakout_${key}`] = num + this.getBreakoutUnit(key);
       this.configCopied = false;
       this.updateBreakoutLive();
+      this.saveConfigToStorage();
     },
     // Update --breakout-padding live
     updateBreakoutLive() {
@@ -1127,10 +1137,70 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
       const max = this.editValues.popoutWidth || this.configOptions.popoutWidth.value;
       document.documentElement.style.setProperty("--breakout-padding", `clamp(${min}, ${scale}, ${max})`);
     },
+    // Save current config to localStorage
+    saveConfigToStorage() {
+      const config = this.generateConfigExport();
+      localStorage.setItem("breakoutGridConfig", JSON.stringify(config));
+    },
+    // Apply a config object (used by restore and localStorage load)
+    applyConfig(config) {
+      this.editMode = true;
+      Object.keys(this.configOptions).forEach((key) => {
+        if (config[key] !== void 0) {
+          this.editValues[key] = config[key];
+          const opt = this.configOptions[key];
+          if (opt && opt.liveVar) {
+            document.documentElement.style.setProperty(opt.liveVar, config[key]);
+          }
+        }
+      });
+      if (config.popoutWidth) {
+        document.documentElement.style.setProperty("--popout", `minmax(0, ${config.popoutWidth})`);
+      }
+      if (config.featureMin || config.featureScale || config.featureMax) {
+        const featureMin = config.featureMin || this.configOptions.featureMin.value;
+        const featureScale = config.featureScale || this.configOptions.featureScale.value;
+        const featureMax = config.featureMax || this.configOptions.featureMax.value;
+        document.documentElement.style.setProperty("--feature", `minmax(0, clamp(${featureMin}, ${featureScale}, ${featureMax}))`);
+      }
+      if (config.gapScale) {
+        Object.keys(this.gapScaleOptions).forEach((key) => {
+          if (config.gapScale[key] !== void 0) {
+            this.editValues[`gapScale_${key}`] = config.gapScale[key];
+          }
+        });
+        this.updateGapLive();
+      }
+      if (config.breakoutMin !== void 0) {
+        this.editValues.breakout_min = config.breakoutMin;
+      }
+      if (config.breakoutScale !== void 0) {
+        this.editValues.breakout_scale = config.breakoutScale;
+      }
+      this.updateBreakoutLive();
+      if (config.breakpoints) {
+        if (config.breakpoints.lg !== void 0) {
+          this.editValues.breakpoint_lg = config.breakpoints.lg;
+        }
+        if (config.breakpoints.xl !== void 0) {
+          this.editValues.breakpoint_xl = config.breakpoints.xl;
+        }
+      }
+      this.updateColumnWidths();
+    },
+    // Reset config to defaults and clear localStorage
+    resetConfigToDefaults() {
+      if (!confirm("Reset all config values to defaults?")) return;
+      localStorage.removeItem("breakoutGridConfig");
+      this.restoreCSSVariables();
+      this.loadCurrentValues();
+      this.configCopied = false;
+    },
     // Update a config value (and live CSS var if applicable)
     updateConfigValue(key, value) {
       this.editValues[key] = value;
       this.configCopied = false;
+      this.saveConfigToStorage();
       const opt = this.configOptions[key];
       if (opt && opt.liveVar) {
         document.documentElement.style.setProperty(opt.liveVar, value);
@@ -2360,15 +2430,20 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
         </div>
 
         <!-- Action Buttons -->
-        <div style="padding: 10px 12px; background: #f7f7f7; display: flex; gap: 8px;">
-          <button @click="copyConfig()" :style="{ flex: 1, padding: '8px', fontSize: '11px', fontWeight: '600', border: 'none', borderRadius: '4px', cursor: 'pointer', background: copySuccess ? '#10b981' : '#1a1a2e', color: 'white', transition: 'background 0.2s' }">
-            <span x-text="copySuccess ? '✓ Copied' : 'Copy Variables'"></span>
-          </button>
-          <button @click="openRestoreModal()" style="padding: 8px 12px; font-size: 11px; font-weight: 600; border: 1px solid #e5e5e5; border-radius: 4px; cursor: pointer; background: white; color: #374151;" title="Restore from CSS variables">
-            Restore
-          </button>
-          <button @click="downloadCSS()" style="padding: 8px 12px; font-size: 11px; font-weight: 600; border: 1px solid #e5e5e5; border-radius: 4px; cursor: pointer; background: white; color: #374151;">
-            CSS
+        <div style="padding: 10px 12px; background: #f7f7f7; display: flex; flex-direction: column; gap: 8px;">
+          <div style="display: flex; gap: 8px;">
+            <button @click="copyConfig()" :style="{ flex: 1, padding: '8px', fontSize: '11px', fontWeight: '500', border: '1px solid #e5e5e5', borderRadius: '4px', cursor: 'pointer', background: copySuccess ? '#10b981' : 'white', color: copySuccess ? 'white' : '#374151', transition: 'background 0.2s' }">
+              <span x-text="copySuccess ? '✓ Copied' : 'Copy'"></span>
+            </button>
+            <button @click="openRestoreModal()" style="flex: 1; padding: 8px; font-size: 11px; font-weight: 500; border: 1px solid #e5e5e5; border-radius: 4px; cursor: pointer; background: white; color: #374151;" title="Restore from CSS variables">
+              Restore
+            </button>
+            <button @click="resetConfigToDefaults()" style="flex: 1; padding: 8px; font-size: 11px; font-weight: 500; border: 1px solid #fca5a5; border-radius: 4px; cursor: pointer; background: #fef2f2; color: #dc2626;" title="Reset to defaults">
+              Reset
+            </button>
+          </div>
+          <button @click="downloadCSS()" style="width: 100%; padding: 10px 12px; font-size: 12px; font-weight: 600; border: none; border-radius: 4px; cursor: pointer; background: #1a1a2e; color: white;">
+            Download CSS
           </button>
         </div>
       </div>

package/dist/_objects.breakout-grid.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astuteo/breakout-grid",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "type": "module",
   "description": "CSS Grid breakout layout system with visual configurator",
   "main": "dist/_objects.breakout-grid.css",
@@ -57,9 +57,8 @@
     "check-version": "node scripts/check-version.js",
     "prepublishOnly": "npm run build && npm run check-files",
     "check-files": "npm pack --dry-run",
-    "release": "npm run build && npm run check-files",
-    "release:patch": "npm run release && npm version patch && git push && git push --tags",
-    "release:minor": "npm run release && npm version minor && git push && git push --tags",
-    "release:major": "npm run release && npm version major && git push && git push --tags"
+    "release:patch": "npm version patch --no-git-tag-version && npm run build && npm run check-version && git add -A && git commit -m \"$(node -p 'require(`./package.json`).version')\" && git tag \"v$(node -p 'require(`./package.json`).version')\" && git push && git push --tags",
+    "release:minor": "npm version minor --no-git-tag-version && npm run build && npm run check-version && git add -A && git commit -m \"$(node -p 'require(`./package.json`).version')\" && git tag \"v$(node -p 'require(`./package.json`).version')\" && git push && git push --tags",
+    "release:major": "npm version major --no-git-tag-version && npm run build && npm run check-version && git add -A && git commit -m \"$(node -p 'require(`./package.json`).version')\" && git tag \"v$(node -p 'require(`./package.json`).version')\" && git push && git push --tags"
   }
 }