rebly-sections 1.5.0 → 1.6.0

package/assets/scripts/quality-gate-checks.py

@@ -76,6 +76,32 @@ def check_no_hardcoded_colors(content, schema_json):
     return ("PASS", "No hardcoded colors in CSS")
 
 
+def check_has_responsive_visibility(content, schema_json):
+    """Check if section has show_on_mobile/tablet/desktop checkbox settings."""
+    if not schema_json:
+        return ("WARN", "No schema to check for responsive visibility")
+    settings = schema_json.get("settings", [])
+    setting_ids = [s.get("id", "") for s in settings]
+    required = ["show_on_mobile", "show_on_tablet", "show_on_desktop"]
+    missing = [r for r in required if r not in setting_ids]
+    if missing:
+        return ("WARN", f"Missing responsive visibility settings: {', '.join(missing)} — merchants can't hide section per breakpoint")
+    return ("PASS", "Responsive visibility settings present")
+
+
+def check_has_section_dimensions(content, schema_json):
+    """Check if section has width and height dimension controls."""
+    if not schema_json:
+        return ("WARN", "No schema to check for section dimensions")
+    settings = schema_json.get("settings", [])
+    setting_ids = [s.get("id", "") for s in settings]
+    required = ["section_width", "section_width_custom", "section_min_height"]
+    missing = [r for r in required if r not in setting_ids]
+    if missing:
+        return ("WARN", f"Missing section dimension settings: {', '.join(missing)} — merchants can't control section size")
+    return ("PASS", "Section dimension settings present")
+
+
 def check_has_font_size_controls(content, schema_json):
     """Check if section has font size range settings for typography control."""
     if not schema_json:

package/assets/scripts/quality-gate.py

@@ -46,6 +46,8 @@ ADVISORY_CHECKS = [
     ("has_heading_tag", "Heading tag configurable via select"),
     ("no_hardcoded_colors", "No hardcoded hex colors in CSS"),
     ("has_font_size_controls", "Font size range controls present"),
+    ("has_responsive_visibility", "Responsive visibility settings present"),
+    ("has_section_dimensions", "Section dimension settings present"),
     ("naming_rebly_prefix", "Schema name uses Rebly: prefix"),
     ("naming_bem_classes", "CSS classes follow BEM rebly-{component} convention"),
 ]
@@ -106,8 +108,11 @@ def check_no_liquid_in_style(content):
         return True
     style_content = style_match.group(1)
     # Allow simple output tags {{ }} but flag complex logic {% %}
-    complex_tags = re.findall(r'\{%[-\s]*(if|for|case|unless|elsif)\s', style_content)
-    return len(complex_tags) == 0
+    # Safe patterns: unless/case/when used by responsive visibility and section dimension controls
+    complex_tags = re.findall(r'\{%[-\s]*(if|for|case|unless|elsif|when)\s', style_content)
+    safe_patterns = {'unless', 'case', 'when'}
+    unsafe_tags = [t for t in complex_tags if t not in safe_patterns]
+    return len(unsafe_tags) == 0
 
 
 def check_has_section_tag(content):
@@ -267,6 +272,8 @@ def run_quality_gate(filepath):
             "has_heading_tag": _checks_mod.check_has_heading_tag,
             "no_hardcoded_colors": _checks_mod.check_no_hardcoded_colors,
             "has_font_size_controls": _checks_mod.check_has_font_size_controls,
+            "has_responsive_visibility": _checks_mod.check_has_responsive_visibility,
+            "has_section_dimensions": _checks_mod.check_has_section_dimensions,
         }
     # Built-in naming convention advisory checks (always available)
     advisory_fns.update({

package/assets/templates/generation-prompt.md

@@ -119,6 +119,10 @@ CONDITIONAL RULES (apply based on section content):
   -> color_scheme (type: color_scheme) — MUST have "default": "scheme-1" (Shopify rejects blank default)
   -> padding_top + padding_bottom (type: range, 0-100px, step 4)
   -> All colors via CSS custom properties, NEVER hardcoded hex
+  -> Responsive visibility: show_on_mobile, show_on_tablet, show_on_desktop (checkbox, default: true)
+     Wire via CSS media queries on #shopify-section-{{ section.id }} using {%- unless -%} pattern
+  -> Section dimensions: section_width (select: full/page/narrow/custom), section_width_custom (range, 320-1920px, step 10, default 1200), section_min_height (range, 0-1000px, step 10, default 0)
+     Wire section_width via Liquid case/when on container max-width; wire min-height conditionally
 - IF section has CTA button:
   -> Button settings: button_label, button_link, button_style
 
@@ -144,6 +148,8 @@ Before writing code, verify your plan includes ALL:
 - heading_font_size range setting wired to CSS variable (if section has headings)
 - body_font_size range setting wired to CSS variable (if section has body text)
 - heading_tag select (h1/h2/h3/h4) (if section has headings)
+- Responsive visibility settings (show_on_mobile, show_on_tablet, show_on_desktop checkboxes)
+- Section dimension settings (section_width select + section_width_custom range + section_min_height range)
 - Padding/margin controls
 - presets array with at least one preset
 - @app block type

package/assets/templates/section-base.liquid

@@ -6,6 +6,12 @@
 
 {%- liquid
   assign section_id = section.id
+  comment
+    Section width: full (100%), page (1200px), narrow (800px), custom (px)
+  endcomment
+  assign sw = section.settings.section_width | default: 'page'
+  assign sw_custom = section.settings.section_width_custom | default: 1200
+  assign s_min_h = section.settings.section_min_height | default: 0
 -%}
 
 <section
@@ -29,9 +35,18 @@
 
 <style>
   #section-{{ section_id }} .rebly-{{ slug }}__container {
-    max-width: 1200px;
-    margin: 0 auto;
+    {%- case sw -%}
+      {%- when 'full' -%}
+        max-width: 100%;
+      {%- when 'narrow' -%}
+        max-width: 800px; margin: 0 auto;
+      {%- when 'custom' -%}
+        max-width: {{ sw_custom }}px; margin: 0 auto;
+      {%- else -%}
+        max-width: 1200px; margin: 0 auto;
+    {%- endcase -%}
     padding: var(--pt, 80px) 2rem var(--pb, 80px);
+    min-height: {{ s_min_h }}px;
   }
   /* Theme override: force inheritance within this section.
      Shopify themes (Dawn, Craft, etc.) set color/font directly on h1-h6, p, a
@@ -52,6 +67,22 @@
     line-height: inherit;
     letter-spacing: inherit;
   }
+  /* Responsive visibility — hide section per breakpoint */
+  {%- unless section.settings.show_on_mobile -%}
+    @media (max-width: 749px) {
+      #shopify-section-{{ section_id }} { display: none !important; }
+    }
+  {%- endunless -%}
+  {%- unless section.settings.show_on_tablet -%}
+    @media (min-width: 750px) and (max-width: 989px) {
+      #shopify-section-{{ section_id }} { display: none !important; }
+    }
+  {%- endunless -%}
+  {%- unless section.settings.show_on_desktop -%}
+    @media (min-width: 990px) {
+      #shopify-section-{{ section_id }} { display: none !important; }
+    }
+  {%- endunless -%}
   /* Responsive: reduce padding on mobile */
   @media (max-width: 749px) {
     #section-{{ section_id }} .rebly-{{ slug }}__container {
@@ -66,7 +97,66 @@
   "name": "Rebly: {{ display_name }}",
   "tag": "section",
   "class": "rebly-section",
-  "settings": [],
+  "settings": [
+    {
+      "type": "header",
+      "content": "Responsive Visibility"
+    },
+    {
+      "type": "checkbox",
+      "id": "show_on_mobile",
+      "label": "Show on mobile",
+      "default": true
+    },
+    {
+      "type": "checkbox",
+      "id": "show_on_tablet",
+      "label": "Show on tablet",
+      "default": true
+    },
+    {
+      "type": "checkbox",
+      "id": "show_on_desktop",
+      "label": "Show on desktop",
+      "default": true
+    },
+    {
+      "type": "header",
+      "content": "Section Dimensions"
+    },
+    {
+      "type": "select",
+      "id": "section_width",
+      "label": "Section width",
+      "default": "page",
+      "options": [
+        { "value": "full", "label": "Full width (100%)" },
+        { "value": "page", "label": "Page width (1200px)" },
+        { "value": "narrow", "label": "Narrow (800px)" },
+        { "value": "custom", "label": "Custom (px)" }
+      ]
+    },
+    {
+      "type": "range",
+      "id": "section_width_custom",
+      "label": "Custom width (px)",
+      "min": 320,
+      "max": 1920,
+      "step": 10,
+      "default": 1200,
+      "unit": "px"
+    },
+    {
+      "type": "range",
+      "id": "section_min_height",
+      "label": "Minimum height (px)",
+      "min": 0,
+      "max": 1000,
+      "step": 10,
+      "default": 0,
+      "unit": "px"
+    }
+  ],
   "blocks": [
     { "type": "@app" }
   ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rebly-sections",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Shopify section AI coding skill installer for Claude Code and Antigravity Kit",
   "author": "Rebly Sections",
   "homepage": "https://github.com/rebly-sections/sections-ai#readme",