@astuteo/breakout-grid 5.1.4 → 5.2.0

package/breakout-grid-visualizer-lite.js

@@ -1,6 +1,6 @@
 (function() {
   "use strict";
-  const VERSION = `v${"5.1.4"} lite`;
+  const VERSION = `v${"5.2.0"} 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.4"}`;
+  const VERSION = `v${"5.2.0"}`;
   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.`;
@@ -77,12 +77,42 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
       restoreInput: "",
       restoreError: null,
       sectionCopied: null,
+      cssDropdownOpen: false,
+      hasConfigOverride: false,
       showCloseWarningModal: false,
       gridOpacity: 0.8,
       backdropOpacity: 0.85
     };
   }
-  const BUILD_VERSION = "5.1.4";
+  const BUILD_VERSION = "5.2.0";
+  function wrapWithTailwindUtilities(css) {
+    return css.replace(
+      /^\.(-?[a-zA-Z_][\w-]*)\s*\{/gm,
+      "@utility $1 {"
+    );
+  }
+  function generateTailwindCSSExport(c, version = BUILD_VERSION) {
+    const css = generateCSSExport(c, version);
+    const tailwindCss = wrapWithTailwindUtilities(css);
+    return tailwindCss.replace(
+      /INTEGRATION \(ITCSS \+ Tailwind v4\)[\s\S]*?QUICK START/,
+      `INTEGRATION (Tailwind v4 @utility)
+ * ============================================================================
+ *
+ * This file uses @utility directives — requires Tailwind CSS v4+.
+ * All utilities support responsive and state variants:
+ *
+ *   <div class="col-content md:col-feature lg:col-full">...</div>
+ *
+ * Add this file to your CSS imports:
+ *
+ *   @import 'tailwindcss';
+ *   @import './_objects.breakout-grid.tw.css';
+ *
+ * ============================================================================
+ * QUICK START`
+    );
+  }
   function generateCSSExport(c, version = BUILD_VERSION) {
     var _a, _b, _c, _d, _e;
     const VERSION2 = version;
@@ -764,6 +794,7 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
       if (savedConfig) {
         try {
           const config = JSON.parse(savedConfig);
+          this.hasConfigOverride = true;
           this.$nextTick(() => this.applyConfig(config));
         } catch (e) {
         }
@@ -977,13 +1008,15 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
         setTimeout(() => this.copySuccess = false, 2e3);
       });
     },
-    downloadCSS() {
-      const css = this.generateCSSExport(this.generateConfigExport());
+    downloadCSS(format = "plain") {
+      const config = this.generateConfigExport();
+      const css = format === "tailwind" ? this.generateTailwindCSSExport(config) : this.generateCSSExport(config);
+      const filename = format === "tailwind" ? "_objects.breakout-grid.tw.css" : "_objects.breakout-grid.css";
       const blob = new Blob([css], { type: "text/css" });
       const url = URL.createObjectURL(blob);
       const a = document.createElement("a");
       a.href = url;
-      a.download = `_objects.breakout-grid.css`;
+      a.download = filename;
       a.click();
       URL.revokeObjectURL(url);
     },
@@ -1060,6 +1093,7 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
     saveConfigToStorage() {
       const config = this.generateConfigExport();
       localStorage.setItem("breakoutGridConfig", JSON.stringify(config));
+      this.hasConfigOverride = true;
     },
     applyConfig(config) {
       this.editMode = true;
@@ -1112,6 +1146,7 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
       this.restoreCSSVariables();
       this.loadCurrentValues();
       this.configCopied = false;
+      this.hasConfigOverride = false;
     },
     updateConfigValue(key, value) {
       this.editValues[key] = value;
@@ -1334,6 +1369,20 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
       this.restoreInput = "";
       this.restoreError = null;
     },
+    hasStoredOverrides() {
+      return ["breakoutGridConfig", "breakoutGridEditorOpen", "breakoutGridEditorPos", "breakoutGridSpacingPos", "breakoutGridSpacingCollapsed"].some((key) => localStorage.getItem(key) !== null);
+    },
+    resetAllStorage() {
+      ["breakoutGridVisualizerVisible", "breakoutGridEditorOpen", "breakoutGridConfig", "breakoutGridEditorPos", "breakoutGridSpacingPos", "breakoutGridSpacingCollapsed"].forEach((key) => localStorage.removeItem(key));
+      this.restoreCSSVariables();
+      this.showEditor = false;
+      this.editMode = false;
+      this.editorPos = { x: 20, y: 100 };
+      this.spacingPanelPos = { x: 16, y: 16 };
+      this.spacingPanelCollapsed = false;
+      this.hasConfigOverride = false;
+      this.configCopied = false;
+    },
     restoreConfig() {
       this.restoreError = null;
       try {
@@ -2005,6 +2054,14 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
         </div>
       </div>
 
+      <!-- Config override warning -->
+      <div x-show="hasConfigOverride"
+           style="padding: 6px 10px; background: #fef3c7; border-bottom: 1px solid #fcd34d; display: flex; align-items: center; justify-content: space-between; gap: 6px;">
+        <span style="font-size: 9px; font-weight: 600; color: #92400e;">localStorage override active</span>
+        <button @click="resetAllStorage()"
+                style="background: none; border: 1px solid #f59e0b; border-radius: 3px; font-size: 9px; font-weight: 600; color: #92400e; cursor: pointer; padding: 1px 5px; white-space: nowrap;">Clear</button>
+      </div>
+
       <!-- Collapsible Content -->
       <div x-show="!controlPanelCollapsed">
       <!-- Action Buttons -->
@@ -2106,10 +2163,16 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
       </div>
 
       <!-- Footer -->
-      <div style="padding: 6px 12px; background: #f7f7f7; border-top: 1px solid #e5e5e5;">
-        <div style="font-size: 9px; color: #9ca3af; text-align: center;">
+      <div style="padding: 6px 12px; background: #f7f7f7; border-top: 1px solid #e5e5e5; display: flex; justify-content: center; align-items: center; gap: 8px;">
+        <div style="font-size: 9px; color: #9ca3af;">
           <kbd style="background: #e5e5e5; padding: 1px 4px; border-radius: 2px; font-size: 9px; font-weight: 600; color: #374151;">⌘G</kbd> toggle
         </div>
+        <button x-show="hasStoredOverrides()"
+                @click="resetAllStorage()"
+                style="background: none; border: none; font-size: 9px; color: #d1d5db; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px;"
+                onmouseenter="this.style.color='#9ca3af'"
+                onmouseleave="this.style.color='#d1d5db'"
+                title="Clear all saved visualizer state from localStorage">reset</button>
       </div>
 
       <!-- Selected Area Info -->
@@ -2364,9 +2427,24 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
               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 style="position: relative; width: 100%;">
+            <button @click="cssDropdownOpen = !cssDropdownOpen" style="width: 100%; padding: 10px 12px; font-size: 12px; font-weight: 600; border: none; border-radius: 4px; cursor: pointer; background: #1a1a2e; color: white; display: flex; align-items: center; justify-content: center; gap: 6px;">
+              Download CSS <span style="font-size: 9px;">&#9662;</span>
+            </button>
+            <div x-show="cssDropdownOpen" @click.away="cssDropdownOpen = false" x-transition
+                 style="position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 4px; background: white; border: 1px solid #e5e5e5; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden; z-index: 10;">
+              <button @click="downloadCSS('plain'); cssDropdownOpen = false"
+                      style="display: block; width: 100%; padding: 10px 16px; font-size: 11px; font-weight: 600; border: none; background: white; color: #374151; cursor: pointer; text-align: left;"
+                      @mouseenter="$el.style.background='#f3f4f6'" @mouseleave="$el.style.background='white'">
+                Plain CSS
+              </button>
+              <button @click="downloadCSS('tailwind'); cssDropdownOpen = false"
+                      style="display: block; width: 100%; padding: 10px 16px; font-size: 11px; font-weight: 600; border: none; background: white; color: #374151; cursor: pointer; text-align: left; border-top: 1px solid #f3f4f6;"
+                      @mouseenter="$el.style.background='#f3f4f6'" @mouseleave="$el.style.background='white'">
+                Tailwind v4
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -2522,6 +2600,17 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
     </div>
 
   </div>
+
+  <!-- Persistent override indicator - visible even when visualizer is hidden -->
+  <div x-show="hasConfigOverride && !isVisible"
+       x-transition
+       style="position: fixed; bottom: 12px; right: 12px; z-index: 9998; pointer-events: auto; font-family: system-ui, -apple-system, sans-serif;">
+    <div style="display: flex; align-items: center; gap: 8px; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 6px; padding: 6px 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+      <span style="font-size: 10px; font-weight: 600; color: #92400e;">Grid overridden by visualizer</span>
+      <button @click="resetAllStorage()"
+              style="background: none; border: 1px solid #f59e0b; border-radius: 3px; font-size: 9px; font-weight: 600; color: #92400e; cursor: pointer; padding: 2px 6px;">Clear</button>
+    </div>
+  </div>
 `;
   (function() {
     document.addEventListener("alpine:init", () => {
@@ -2541,6 +2630,7 @@ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
         ...methods,
         // CSS export
         generateCSSExport,
+        generateTailwindCSSExport,
         cssExportVersion: BUILD_VERSION,
         // Template
         template

package/dist/_objects.breakout-grid.css

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

package/dist/_objects.breakout-grid.tw.css

@@ -0,0 +1,653 @@
+/**
+ * Breakout Grid - Objects Layer (ITCSS)
+ * Version: 5.2.0
+ *
+ * Documentation: https://github.com/astuteo-llc/breakout-grid
+ *
+ * ============================================================================
+ * TABLE OF CONTENTS
+ * ============================================================================
+ *
+ * CONFIGURATION
+ *   - Configuration Variables ........... Customizable :root variables
+ *   - Computed Values ................... Auto-calculated (do not edit)
+ *
+ * GRID CONTAINERS
+ *   - Grid Container - Main ............. .grid-cols-breakout
+ *   - Subgrid ........................... .grid-cols-breakout-subgrid
+ *   - Left/Right Aligned Variants ....... .grid-cols-{area}-{left|right}
+ *   - Breakout Modifiers ................ .breakout-to-{content|popout|feature}
+ *   - Breakout None ..................... .breakout-none, .breakout-none-flex
+ *
+ * COLUMN UTILITIES
+ *   - Basic ............................. .col-{full|feature|popout|content|center}
+ *   - Start/End ......................... .col-start-*, .col-end-*
+ *   - Left/Right Spans .................. .col-*-left, .col-*-right
+ *   - Advanced Spans .................... .col-*-to-*
+ *   - Full Limit ........................ .col-full-limit
+ *
+ * SPACING UTILITIES
+ *   - Padding ........................... .p-breakout, .p-gap, .p-*-to-content
+ *   - Margins ........................... .m-breakout, .m-gap, .-m-*
+ *
+ * ============================================================================
+ * INTEGRATION (Tailwind v4 @utility)
+ * ============================================================================
+ *
+ * This file uses @utility directives — requires Tailwind CSS v4+.
+ * All utilities support responsive and state variants:
+ *
+ *   <div class="col-content md:col-feature lg:col-full">...</div>
+ *
+ * Add this file to your CSS imports:
+ *
+ *   @import 'tailwindcss';
+ *   @import './_objects.breakout-grid.tw.css';
+ *
+ * ============================================================================
+ * QUICK START
+ * ============================================================================
+ *
+ *   <main class="grid-cols-breakout">
+ *     <article class="col-content">Reading width</article>
+ *     <figure class="col-feature">Wider for images</figure>
+ *     <div class="col-full">Edge to edge</div>
+ *   </main>
+ *
+ */
+
+/* ============================================================================
+   CONFIGURATION VARIABLES
+   ============================================================================
+   To restore this grid in the visualizer, copy from here to END CONFIGURATION.
+   Paste into the "Restore" dialog at:
+   https://github.com/astuteo-llc/breakout-grid
+   ============================================================================ */
+
+:root {
+  /* Content (text width) */
+  --content-min: 53rem;
+  --content-base: 75vw;
+  --content-max: 61rem;
+
+  /* Default column for children without col-* class */
+  --default-col: content;
+
+  /* Track widths */
+  --popout-width: 5rem;
+  --full-limit: 115rem;
+
+  /* Feature track */
+  --feature-min: 0rem;
+  --feature-scale: 12vw;
+  --feature-max: 12rem;
+
+  /* Outer margins */
+  --base-gap: 1rem;
+  --max-gap: 15rem;
+
+  /* Responsive scale */
+  --gap-scale-default: 4vw;
+  --gap-scale-lg: 5vw;
+  --gap-scale-xl: 6vw;
+
+  /* Breakout padding */
+  --breakout-min: 1rem;
+  --breakout-scale: 5vw;
+
+  /* Breakpoints (used in media queries below) */
+  /* --breakpoint-lg: 1024pxpx; */
+  /* --breakpoint-xl: 1280pxpx; */
+}
+
+/* ============================================================================
+   END CONFIGURATION
+   ============================================================================ */
+
+
+/* ============================================================================
+   COMPUTED VALUES - DO NOT EDIT
+   ============================================================================
+   These are calculated from the customizable variables above.
+   Editing these directly will break the grid calculations.
+   ============================================================================ */
+
+:root {
+  /* Responsive gap: scales between base and max based on viewport */
+  --gap: clamp(var(--base-gap), var(--gap-scale-default), var(--max-gap));
+
+  /* Computed gap: larger value for full-width spacing */
+  --computed-gap: max(var(--gap), calc((100vw - var(--content)) / 10));
+
+  /* Content width: fluid between min/max, respects gap on both sides */
+  --content: min(clamp(var(--content-min), var(--content-base), var(--content-max)), 100% - var(--gap) * 2);
+
+  /* Content inset: for left/right aligned grids (single gap) */
+  --content-inset: min(clamp(var(--content-min), var(--content-base), var(--content-max)), calc(100% - var(--gap)));
+
+  /* Half content: used for center alignment */
+  --content-half: calc(var(--content) / 2);
+
+  /* Track definitions for grid-template-columns */
+  --full: minmax(var(--gap), 1fr);
+  --feature: minmax(0, clamp(var(--feature-min), var(--feature-scale), var(--feature-max)));
+  --popout: minmax(0, var(--popout-width));
+
+  /* Alignment padding: for aligning content inside wider columns */
+  --breakout-padding: clamp(var(--breakout-min), var(--breakout-scale), var(--popout-width));
+  --popout-to-content: clamp(var(--breakout-min), var(--breakout-scale), var(--popout-width));
+  --feature-to-content: calc(clamp(var(--feature-min), var(--feature-scale), var(--feature-max)) + var(--popout-width));
+}
+
+/* Responsive gap scaling */
+@media (min-width: 1024pxpx) {
+  :root {
+    --gap: clamp(var(--base-gap), var(--gap-scale-lg), var(--max-gap));
+  }
+}
+
+@media (min-width: 1280pxpx) {
+  :root {
+    --gap: clamp(var(--base-gap), var(--gap-scale-xl), var(--max-gap));
+  }
+}
+
+/* ========================================
+   Grid Container - Main
+   ========================================
+
+   The primary grid container. Apply to any element that should use
+   the breakout grid system. All direct children default to the
+   content column unless given a col-* class.
+
+   Basic usage:
+   <main class="grid-cols-breakout">
+     <article>Default content width</article>
+     <figure class="col-feature">Wider for images</figure>
+     <div class="col-full">Edge to edge</div>
+   </main>
+*/
+@utility grid-cols-breakout {
+  display: grid;
+  grid-template-columns:
+    [full-start] var(--full)
+    [feature-start] var(--feature)
+    [popout-start] var(--popout)
+    [content-start] var(--content-half) [center-start center-end] var(--content-half) [content-end]
+    var(--popout) [popout-end]
+    var(--feature) [feature-end]
+    var(--full) [full-end];
+}
+
+/* Default column for direct children without explicit col-* class */
+[class*='grid-cols-breakout'] > *:not([class*='col-']),
+[class*='grid-cols-feature'] > *:not([class*='col-']),
+[class*='grid-cols-popout'] > *:not([class*='col-']),
+[class*='grid-cols-content'] > *:not([class*='col-']) {
+  grid-column: var(--default-col, content);
+}
+
+/* ----------------------------------------
+   Subgrid - Nested Alignment
+   ----------------------------------------
+
+   Use subgrid when you need children of a spanning element to align
+   with the parent grid's tracks. The child inherits the parent's
+   column lines.
+
+   Example - Card grid inside a feature-width container:
+   <div class="col-feature grid-cols-breakout-subgrid">
+     <h2 class="col-content">Title aligns with content</h2>
+     <div class="col-feature">Full width of parent</div>
+   </div>
+
+   Browser support: ~93% (check caniuse.com/css-subgrid)
+*/
+@utility grid-cols-breakout-subgrid {
+  display: grid;
+  grid-template-columns: subgrid;
+}
+
+/* ========================================
+   Grid Container - Left/Right Aligned Variants
+   ========================================
+
+   Use these when content should anchor to one side instead of centering.
+   Common for asymmetric layouts, sidebars, or split-screen designs.
+
+   Left variants: Content anchors to left edge, right side has outer tracks
+   Right variants: Content anchors to right edge, left side has outer tracks
+
+   Example - Image left, text right:
+   <section class="grid-cols-feature-left">
+     <figure class="col-feature">Image anchored left</figure>
+     <div class="col-content">Text in content area</div>
+   </section>
+
+   Example - Sidebar layout:
+   <div class="grid-cols-content-right">
+     <aside class="col-full">Sidebar fills left</aside>
+     <main class="col-content">Main content right-aligned</main>
+   </div>
+*/
+@utility grid-cols-feature-left {
+  display: grid;
+  grid-template-columns:
+    [full-start] var(--full)
+    [feature-start] var(--feature)
+    [popout-start] var(--popout)
+    [content-start] var(--content-inset) [content-end]
+    var(--popout) [popout-end]
+    var(--feature) [feature-end full-end];
+}
+
+@utility grid-cols-popout-left {
+  display: grid;
+  grid-template-columns:
+    [full-start] var(--full)
+    [feature-start] var(--feature)
+    [popout-start] var(--popout)
+    [content-start] var(--content-inset) [content-end]
+    var(--popout) [popout-end full-end];
+}
+
+@utility grid-cols-content-left {
+  display: grid;
+  grid-template-columns:
+    [full-start] var(--full)
+    [feature-start] var(--feature)
+    [popout-start] var(--popout)
+    [content-start] var(--content-inset) [content-end full-end];
+}
+
+/* ========================================
+   Grid Container - Right Aligned Variants
+   ======================================== */
+@utility grid-cols-feature-right {
+  display: grid;
+  grid-template-columns:
+    [full-start feature-start] var(--feature)
+    [popout-start] var(--popout)
+    [content-start] var(--content-inset) [content-end]
+    var(--popout) [popout-end]
+    var(--feature) [feature-end]
+    var(--full) [full-end];
+}
+
+@utility grid-cols-popout-right {
+  display: grid;
+  grid-template-columns:
+    [full-start popout-start] var(--popout)
+    [content-start] var(--content-inset) [content-end]
+    var(--popout) [popout-end]
+    var(--feature) [feature-end]
+    var(--full) [full-end];
+}
+
+@utility grid-cols-content-right {
+  display: grid;
+  grid-template-columns:
+    [full-start content-start] var(--content-inset) [content-end]
+    var(--popout) [popout-end]
+    var(--feature) [feature-end]
+    var(--full) [full-end];
+}
+
+/* ========================================
+   Breakout Modifiers (for nested grids)
+   ========================================
+
+   When you nest a grid inside another element (like inside col-feature),
+   the nested grid doesn't know about the parent's constraints. Use these
+   modifiers to "reset" the grid to fit its container.
+
+   breakout-to-content: Collapses all tracks - nested grid fills container
+   breakout-to-popout:  Keeps popout tracks, collapses feature/full
+   breakout-to-feature: Keeps feature+popout tracks, collapses full
+
+   Example - Full-width hero with nested content grid:
+   <div class="col-full bg-blue-500">
+     <div class="grid-cols-breakout breakout-to-content">
+       <h1>This h1 fills the blue container</h1>
+       <p class="col-content">But content still works!</p>
+     </div>
+   </div>
+
+   Example - Feature-width card with internal grid:
+   <article class="col-feature">
+     <div class="grid-cols-breakout breakout-to-feature">
+       <img class="col-feature">Full width of card</img>
+       <p class="col-content">Padded text inside</p>
+     </div>
+   </article>
+*/
+.grid-cols-breakout.breakout-to-content {
+  grid-template-columns: [full-start feature-start popout-start content-start center-start] minmax(0, 1fr) [center-end content-end popout-end feature-end full-end];
+}
+
+.grid-cols-breakout.breakout-to-popout {
+  grid-template-columns: [full-start feature-start popout-start] var(--popout) [content-start center-start] minmax(0, 1fr) [center-end content-end] var(--popout) [popout-end feature-end full-end];
+}
+
+.grid-cols-breakout.breakout-to-feature {
+  grid-template-columns: [full-start feature-start] var(--feature) [popout-start] var(--popout) [content-start center-start] minmax(0, 1fr) [center-end content-end] var(--popout) [popout-end] var(--feature) [feature-end full-end];
+}
+
+/* ----------------------------------------
+   Breakout None - Disable Grid
+   ----------------------------------------
+
+   Use when you need to escape the grid entirely. Useful for:
+   - Sidebar layouts where one column shouldn't use grid
+   - Components that manage their own layout
+   - CMS blocks that shouldn't inherit grid behavior
+
+   Example - Two-column layout with sidebar:
+   <div class="grid grid-cols-[300px_1fr]">
+     <aside class="breakout-none">Sidebar - no grid here</aside>
+     <main class="grid-cols-breakout">Main content uses grid</main>
+   </div>
+*/
+@utility breakout-none { display: block; }
+@utility breakout-none-flex { display: flex; }
+@utility breakout-none-grid { display: grid; }
+
+/* ========================================
+   Column Utilities - Basic
+   ========================================
+
+   Place elements in specific grid tracks. These are the core utilities
+   you'll use most often.
+
+   col-full:    Edge to edge (viewport width minus gap)
+   col-feature: Wide content (images, videos, heroes)
+   col-popout:  Slightly wider than content (pull quotes, callouts)
+   col-content: Standard reading width (articles, text)
+   col-center:  Centered within content (rare, for precise centering)
+*/
+@utility col-full { grid-column: full; }
+@utility col-feature { grid-column: feature; }
+@utility col-popout { grid-column: popout; }
+@utility col-content { grid-column: content; }
+@utility col-center { grid-column: center; }
+
+/* Backward compatibility: col-narrow maps to content */
+@utility col-narrow { grid-column: content; }
+
+/* ========================================
+   Column Utilities - Start/End
+   ========================================
+
+   Fine-grained control for custom spans. Combine start and end
+   utilities to create any span you need.
+
+   Example - Span from popout to feature on right:
+   <div class="col-start-popout col-end-feature">
+     Custom span
+   </div>
+*/
+@utility col-start-full { grid-column-start: full-start; }
+@utility col-start-feature { grid-column-start: feature-start; }
+@utility col-start-popout { grid-column-start: popout-start; }
+@utility col-start-content { grid-column-start: content-start; }
+@utility col-start-center { grid-column-start: center-start; }
+
+/* Backward compatibility */
+@utility col-start-narrow { grid-column-start: content-start; }
+
+@utility col-end-full { grid-column-end: full-end; }
+@utility col-end-feature { grid-column-end: feature-end; }
+@utility col-end-popout { grid-column-end: popout-end; }
+@utility col-end-content { grid-column-end: content-end; }
+@utility col-end-center { grid-column-end: center-end; }
+
+/* Backward compatibility */
+@utility col-end-narrow { grid-column-end: content-end; }
+
+/* ========================================
+   Column Utilities - Left/Right Spans
+   ========================================
+
+   Asymmetric spans that anchor to one edge. Perfect for:
+   - Split layouts (image left, text right)
+   - Overlapping elements
+   - Pull quotes that bleed to one edge
+
+   Pattern: col-{track}-left  = full-start → {track}-end
+            col-{track}-right = {track}-start → full-end
+
+   Example - Image bleeds left, caption stays in content:
+   <figure class="col-content-left">
+     <img class="w-full">Spans from left edge to content</img>
+   </figure>
+
+   Example - Quote pulls right:
+   <blockquote class="col-popout-right">
+     Spans from popout through to right edge
+   </blockquote>
+*/
+@utility col-feature-left { grid-column: full-start / feature-end; }
+@utility col-feature-right { grid-column: feature-start / full-end; }
+@utility col-popout-left { grid-column: full-start / popout-end; }
+@utility col-popout-right { grid-column: popout-start / full-end; }
+@utility col-content-left { grid-column: full-start / content-end; }
+@utility col-content-right { grid-column: content-start / full-end; }
+@utility col-center-left { grid-column: full-start / center-end; }
+@utility col-center-right { grid-column: center-start / full-end; }
+
+/* Backward compatibility */
+@utility col-narrow-left { grid-column: full-start / content-end; }
+@utility col-narrow-right { grid-column: content-start / full-end; }
+
+/* ========================================
+   Column Utilities - Advanced Spans
+   ========================================
+
+   Partial spans between non-adjacent tracks. Use when you need
+   elements that span from an inner track outward but not all
+   the way to the edge.
+
+   Example - Card that spans feature to content (not to edge):
+   <div class="col-feature-to-content">
+     Wide but doesn't bleed to viewport edge
+   </div>
+*/
+/* Feature to other columns */
+@utility col-feature-to-popout { grid-column: feature-start / popout-end; }
+@utility col-feature-to-content { grid-column: feature-start / content-end; }
+@utility col-feature-to-center { grid-column: feature-start / center-end; }
+
+/* Popout to other columns */
+@utility col-popout-to-content { grid-column: popout-start / content-end; }
+@utility col-popout-to-center { grid-column: popout-start / center-end; }
+@utility col-popout-to-feature { grid-column: popout-start / feature-end; }
+
+/* Content to other columns */
+@utility col-content-to-center { grid-column: content-start / center-end; }
+@utility col-content-to-popout { grid-column: content-start / popout-end; }
+@utility col-content-to-feature { grid-column: content-start / feature-end; }
+
+/* ----------------------------------------
+   Full Limit - Capped Full Width
+   ----------------------------------------
+
+   Goes edge-to-edge like col-full, but caps at --full-limit on
+   ultra-wide screens. Prevents content from becoming too wide
+   on large monitors while still being full-width on normal screens.
+
+   Example - Hero that doesn't get absurdly wide:
+   <section class="col-full-limit">
+     Full width up to 115rem, then centered
+   </section>
+*/
+@utility col-full-limit {
+  grid-column: full;
+  width: 100%;
+  max-width: var(--full-limit);
+  margin-left: auto;
+  margin-right: auto;
+  box-sizing: border-box;
+}
+
+/* ========================================
+   Padding Utilities
+   ========================================
+
+   Match padding to grid measurements for alignment. These utilities
+   help content inside non-grid elements align with the grid.
+
+   --breakout-padding: Fluid padding that matches popout track behavior
+   --gap:              Matches the outer grid gap
+   --computed-gap:     Larger gap for full-width elements
+   --popout-to-content: Align edges with content track from popout
+   --feature-to-content: Align edges with content track from feature
+
+   Example - Full-width section with content-aligned padding:
+   <section class="col-full bg-gray-100 px-feature-to-content">
+     <p>This text aligns with content column above/below</p>
+   </section>
+
+   Example - Card with consistent internal spacing:
+   <div class="col-popout p-breakout">
+     Padding scales with the grid
+   </div>
+*/
+@utility p-breakout { padding: var(--breakout-padding); }
+@utility px-breakout { padding-left: var(--breakout-padding); padding-right: var(--breakout-padding); }
+@utility py-breakout { padding-top: var(--breakout-padding); padding-bottom: var(--breakout-padding); }
+@utility pl-breakout { padding-left: var(--breakout-padding); }
+@utility pr-breakout { padding-right: var(--breakout-padding); }
+@utility pt-breakout { padding-top: var(--breakout-padding); }
+@utility pb-breakout { padding-bottom: var(--breakout-padding); }
+
+/* Gap-based padding */
+@utility p-gap { padding: var(--gap); }
+@utility px-gap { padding-left: var(--gap); padding-right: var(--gap); }
+@utility py-gap { padding-top: var(--gap); padding-bottom: var(--gap); }
+@utility pl-gap { padding-left: var(--gap); }
+@utility pr-gap { padding-right: var(--gap); }
+@utility pt-gap { padding-top: var(--gap); }
+@utility pb-gap { padding-bottom: var(--gap); }
+
+/* Full-gap padding (computed, for full-width elements) */
+@utility p-full-gap { padding: var(--computed-gap); }
+@utility px-full-gap { padding-left: var(--computed-gap); padding-right: var(--computed-gap); }
+@utility py-full-gap { padding-top: var(--computed-gap); padding-bottom: var(--computed-gap); }
+@utility pl-full-gap { padding-left: var(--computed-gap); }
+@utility pr-full-gap { padding-right: var(--computed-gap); }
+@utility pt-full-gap { padding-top: var(--computed-gap); }
+@utility pb-full-gap { padding-bottom: var(--computed-gap); }
+
+/* Popout-width padding */
+@utility p-popout { padding: var(--popout); }
+@utility px-popout { padding-left: var(--popout); padding-right: var(--popout); }
+@utility py-popout { padding-top: var(--popout); padding-bottom: var(--popout); }
+@utility pl-popout { padding-left: var(--popout); }
+@utility pr-popout { padding-right: var(--popout); }
+@utility pt-popout { padding-top: var(--popout); }
+@utility pb-popout { padding-bottom: var(--popout); }
+
+/* Alignment padding - align content inside wider columns */
+@utility p-popout-to-content { padding: var(--popout-to-content); }
+@utility px-popout-to-content { padding-left: var(--popout-to-content); padding-right: var(--popout-to-content); }
+@utility py-popout-to-content { padding-top: var(--popout-to-content); padding-bottom: var(--popout-to-content); }
+@utility pt-popout-to-content { padding-top: var(--popout-to-content); }
+@utility pr-popout-to-content { padding-right: var(--popout-to-content); }
+@utility pb-popout-to-content { padding-bottom: var(--popout-to-content); }
+@utility pl-popout-to-content { padding-left: var(--popout-to-content); }
+
+@utility p-feature-to-content { padding: var(--feature-to-content); }
+@utility px-feature-to-content { padding-left: var(--feature-to-content); padding-right: var(--feature-to-content); }
+@utility py-feature-to-content { padding-top: var(--feature-to-content); padding-bottom: var(--feature-to-content); }
+@utility pt-feature-to-content { padding-top: var(--feature-to-content); }
+@utility pr-feature-to-content { padding-right: var(--feature-to-content); }
+@utility pb-feature-to-content { padding-bottom: var(--feature-to-content); }
+@utility pl-feature-to-content { padding-left: var(--feature-to-content); }
+
+/* ========================================
+   Margin Utilities
+   ========================================
+
+   Same values as padding utilities, but for margins. Includes
+   negative variants for pulling elements outside their container.
+
+   Example - Pull image outside its container:
+   <div class="col-content">
+     <img class="-mx-breakout">Bleeds into popout area</img>
+   </div>
+
+   Example - Overlap previous section:
+   <section class="-mt-gap">
+     Pulls up into the section above
+   </section>
+*/
+@utility m-breakout { margin: var(--breakout-padding); }
+@utility mx-breakout { margin-left: var(--breakout-padding); margin-right: var(--breakout-padding); }
+@utility my-breakout { margin-top: var(--breakout-padding); margin-bottom: var(--breakout-padding); }
+@utility ml-breakout { margin-left: var(--breakout-padding); }
+@utility mr-breakout { margin-right: var(--breakout-padding); }
+@utility mt-breakout { margin-top: var(--breakout-padding); }
+@utility mb-breakout { margin-bottom: var(--breakout-padding); }
+
+/* Negative margins */
+@utility -m-breakout { margin: calc(var(--breakout-padding) * -1); }
+@utility -mx-breakout { margin-left: calc(var(--breakout-padding) * -1); margin-right: calc(var(--breakout-padding) * -1); }
+@utility -my-breakout { margin-top: calc(var(--breakout-padding) * -1); margin-bottom: calc(var(--breakout-padding) * -1); }
+@utility -ml-breakout { margin-left: calc(var(--breakout-padding) * -1); }
+@utility -mr-breakout { margin-right: calc(var(--breakout-padding) * -1); }
+@utility -mt-breakout { margin-top: calc(var(--breakout-padding) * -1); }
+@utility -mb-breakout { margin-bottom: calc(var(--breakout-padding) * -1); }
+
+/* Gap-based margins */
+@utility m-gap { margin: var(--gap); }
+@utility mx-gap { margin-left: var(--gap); margin-right: var(--gap); }
+@utility my-gap { margin-top: var(--gap); margin-bottom: var(--gap); }
+@utility ml-gap { margin-left: var(--gap); }
+@utility mr-gap { margin-right: var(--gap); }
+@utility mt-gap { margin-top: var(--gap); }
+@utility mb-gap { margin-bottom: var(--gap); }
+
+/* Negative margins */
+@utility -m-gap { margin: calc(var(--gap) * -1); }
+@utility -mx-gap { margin-left: calc(var(--gap) * -1); margin-right: calc(var(--gap) * -1); }
+@utility -my-gap { margin-top: calc(var(--gap) * -1); margin-bottom: calc(var(--gap) * -1); }
+@utility -ml-gap { margin-left: calc(var(--gap) * -1); }
+@utility -mr-gap { margin-right: calc(var(--gap) * -1); }
+@utility -mt-gap { margin-top: calc(var(--gap) * -1); }
+@utility -mb-gap { margin-bottom: calc(var(--gap) * -1); }
+
+/* Full-gap margins */
+@utility m-full-gap { margin: var(--computed-gap); }
+@utility mx-full-gap { margin-left: var(--computed-gap); margin-right: var(--computed-gap); }
+@utility my-full-gap { margin-top: var(--computed-gap); margin-bottom: var(--computed-gap); }
+@utility ml-full-gap { margin-left: var(--computed-gap); }
+@utility mr-full-gap { margin-right: var(--computed-gap); }
+@utility mt-full-gap { margin-top: var(--computed-gap); }
+@utility mb-full-gap { margin-bottom: var(--computed-gap); }
+
+/* Negative margins */
+@utility -m-full-gap { margin: calc(var(--computed-gap) * -1); }
+@utility -mx-full-gap { margin-left: calc(var(--computed-gap) * -1); margin-right: calc(var(--computed-gap) * -1); }
+@utility -my-full-gap { margin-top: calc(var(--computed-gap) * -1); margin-bottom: calc(var(--computed-gap) * -1); }
+@utility -ml-full-gap { margin-left: calc(var(--computed-gap) * -1); }
+@utility -mr-full-gap { margin-right: calc(var(--computed-gap) * -1); }
+@utility -mt-full-gap { margin-top: calc(var(--computed-gap) * -1); }
+@utility -mb-full-gap { margin-bottom: calc(var(--computed-gap) * -1); }
+
+/* Popout-width margins */
+@utility m-popout { margin: var(--popout); }
+@utility mx-popout { margin-left: var(--popout); margin-right: var(--popout); }
+@utility my-popout { margin-top: var(--popout); margin-bottom: var(--popout); }
+@utility ml-popout { margin-left: var(--popout); }
+@utility mr-popout { margin-right: var(--popout); }
+@utility mt-popout { margin-top: var(--popout); }
+@utility mb-popout { margin-bottom: var(--popout); }
+
+/* Negative margins */
+@utility -m-popout { margin: calc(var(--popout) * -1); }
+@utility -mx-popout { margin-left: calc(var(--popout) * -1); margin-right: calc(var(--popout) * -1); }
+@utility -my-popout { margin-top: calc(var(--popout) * -1); margin-bottom: calc(var(--popout) * -1); }
+@utility -ml-popout { margin-left: calc(var(--popout) * -1); }
+@utility -mr-popout { margin-right: calc(var(--popout) * -1); }
+@utility -mt-popout { margin-top: calc(var(--popout) * -1); }
+@utility -mb-popout { margin-bottom: calc(var(--popout) * -1); }

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@astuteo/breakout-grid",
-  "version": "5.1.4",
+  "version": "5.2.0",
   "type": "module",
   "description": "CSS Grid breakout layout system with visual configurator",
   "main": "dist/_objects.breakout-grid.css",
   "style": "dist/_objects.breakout-grid.css",
   "files": [
     "dist/_objects.breakout-grid.css",
+    "dist/_objects.breakout-grid.tw.css",
     "breakout-grid-visualizer.js",
     "breakout-grid-visualizer-lite.js",
     "craft-integration.twig",
@@ -16,6 +17,7 @@
   "exports": {
     ".": "./dist/_objects.breakout-grid.css",
     "./css": "./dist/_objects.breakout-grid.css",
+    "./tailwind": "./dist/_objects.breakout-grid.tw.css",
     "./visualizer": "./breakout-grid-visualizer.js",
     "./visualizer-lite": "./breakout-grid-visualizer-lite.js"
   },