@runwell/shopify-toolkit 0.1.0

package/modules/comparison-table/module.json

@@ -0,0 +1,50 @@
+{
+  "name": "comparison-table",
+  "version": "0.1.0",
+  "category": "pdp",
+  "description": "Lushi comparison table module migrated from Lushi.",
+  "files": {
+    "sections": [
+      "sections/runwell-comparison-table.liquid"
+    ]
+  },
+  "config": {
+    "schema": {
+      "eyebrow": {
+        "type": "string",
+        "default": "Compared",
+        "label": "Eyebrow"
+      },
+      "heading": {
+        "type": "string",
+        "default": "How it stacks up.",
+        "label": "Heading"
+      },
+      "lede": {
+        "type": "string",
+        "default": "We do not stock everything; here is what makes this one earn the spot.",
+        "label": "Lede"
+      },
+      "row_label_header": {
+        "type": "string",
+        "default": "What you get",
+        "label": "Row label header"
+      },
+      "rows": {
+        "type": "string",
+        "default": "Bioavailable form|yes|no|no\nDose matches research|yes|no|no\nThird-party tested|yes|yes|no\nClean ingredient deck|yes|no|no\nTransparent sourcing|yes|no|yes",
+        "label": "Rows"
+      },
+      "background_color": {
+        "type": "string",
+        "default": "#F5F0EE",
+        "label": "Background color"
+      },
+      "text_color": {
+        "type": "string",
+        "default": "#0B3D38",
+        "label": "Text color"
+      }
+    }
+  }
+}

package/modules/comparison-table/sections/runwell-comparison-table.liquid

@@ -0,0 +1,157 @@
+{%- comment -%}
+  Lushi product comparison table. Drops on PDP (or any template) to
+  compare attributes across Lushi products or against a competitor.
+  Editorial style, not a feature dump. Per CRO §5.2 (decision-aid for
+  high-trust niches).
+{%- endcomment -%}
+
+{%- if section.blocks.size > 0 -%}
+<section
+  class="runwell-comparison"
+  style="background: {{ section.settings.background_color }}; color: {{ section.settings.text_color }};"
+>
+  <div style="max-width: 1200px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) 6vw;">
+    {%- if section.settings.eyebrow != blank -%}
+      <div style="font-family: var(--font-body-family); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.6rem;">
+        {{ section.settings.eyebrow }}
+      </div>
+    {%- endif -%}
+
+    {%- if section.settings.heading != blank -%}
+      <h2 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.1; margin: 0 0 1rem 0; max-width: 22ch;">
+        {{ section.settings.heading }}
+      </h2>
+    {%- endif -%}
+
+    {%- if section.settings.lede != blank -%}
+      <p style="font-family: var(--font-body-family); font-size: 1rem; line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 0 2rem 0;">
+        {{ section.settings.lede }}
+      </p>
+    {%- endif -%}
+
+    <div style="overflow-x: auto;">
+      <table style="width: 100%; border-collapse: collapse; min-width: 600px; font-family: var(--font-body-family); font-size: 0.95rem;">
+        <thead>
+          <tr>
+            <th style="text-align: left; padding: 0.8rem 1rem 0.8rem 0; font-family: var(--font-body-family); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; vertical-align: bottom; border-bottom: 2px solid currentColor;">
+              {{ section.settings.row_label_header | default: 'What you get' }}
+            </th>
+            {%- for block in section.blocks -%}
+              <th style="text-align: left; padding: 0.8rem 1rem; vertical-align: bottom; border-bottom: 2px solid currentColor;">
+                <div style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: 1.15rem; line-height: 1.2; margin-bottom: 0.2rem;">
+                  {{ block.settings.column_title }}
+                </div>
+                {%- if block.settings.column_subtitle != blank -%}
+                  <div style="font-family: var(--font-body-family); font-size: 0.78rem; opacity: 0.7; font-weight: 400; letter-spacing: normal; text-transform: none;">
+                    {{ block.settings.column_subtitle }}
+                  </div>
+                {%- endif -%}
+              </th>
+            {%- endfor -%}
+          </tr>
+        </thead>
+        <tbody>
+          {%- assign rows = section.settings.rows | newline_to_br | split: '<br />' -%}
+          {%- for row in rows -%}
+            {%- assign parts = row | split: '|' -%}
+            {%- if parts.size > 0 and parts[0] != blank -%}
+              <tr>
+                <td style="padding: 0.8rem 1rem 0.8rem 0; vertical-align: top; border-bottom: 1px solid rgba(11,61,56,0.12); font-weight: 700;">
+                  {{ parts[0] | strip }}
+                </td>
+                {%- for block in section.blocks -%}
+                  {%- assign idx = forloop.index -%}
+                  {%- assign cell = parts[idx] | default: '' | strip -%}
+                  <td style="padding: 0.8rem 1rem; vertical-align: top; border-bottom: 1px solid rgba(11,61,56,0.12); opacity: 0.92;">
+                    {%- if cell == 'yes' or cell == '✓' -%}
+                      <span style="color: var(--runwell-rain-forrest); font-weight: 700;">✓</span>
+                    {%- elsif cell == 'no' -%}
+                      <span style="opacity: 0.4;">no</span>
+                    {%- else -%}
+                      {{ cell }}
+                    {%- endif -%}
+                  </td>
+                {%- endfor -%}
+              </tr>
+            {%- endif -%}
+          {%- endfor -%}
+        </tbody>
+      </table>
+    </div>
+  </div>
+</section>
+{%- endif -%}
+
+{% schema %}
+{
+  "name": "Lushi comparison table",
+  "tag": "section",
+  "class": "section-runwell-comparison",
+  "settings": [
+    {
+      "type": "text",
+      "id": "eyebrow",
+      "label": "Eyebrow",
+      "default": "Compared"
+    },
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "Heading",
+      "default": "How it stacks up."
+    },
+    {
+      "type": "textarea",
+      "id": "lede",
+      "label": "Lede",
+      "default": "We do not stock everything; here is what makes this one earn the spot."
+    },
+    {
+      "type": "text",
+      "id": "row_label_header",
+      "label": "Row label header",
+      "default": "What you get"
+    },
+    {
+      "type": "textarea",
+      "id": "rows",
+      "label": "Rows",
+      "info": "One row per line. Format: Row name | Col1 cell | Col2 cell | ...  Use yes for checked, no for missing.",
+      "default": "Bioavailable form|yes|no|no\nDose matches research|yes|no|no\nThird-party tested|yes|yes|no\nClean ingredient deck|yes|no|no\nTransparent sourcing|yes|no|yes"
+    },
+    {
+      "type": "color",
+      "id": "background_color",
+      "label": "Background color",
+      "default": "#F5F0EE"
+    },
+    {
+      "type": "color",
+      "id": "text_color",
+      "label": "Text color",
+      "default": "#0B3D38"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "column",
+      "name": "Column",
+      "settings": [
+        { "type": "text", "id": "column_title", "label": "Column title", "default": "Lushi pick" },
+        { "type": "text", "id": "column_subtitle", "label": "Column subtitle" }
+      ]
+    }
+  ],
+  "max_blocks": 4,
+  "presets": [
+    {
+      "name": "Lushi comparison table",
+      "blocks": [
+        { "type": "column", "settings": { "column_title": "Lushi pick", "column_subtitle": "This product" } },
+        { "type": "column", "settings": { "column_title": "Drugstore", "column_subtitle": "Average mass-market option" } },
+        { "type": "column", "settings": { "column_title": "Hype brand", "column_subtitle": "Trendy DTC competitor" } }
+      ]
+    }
+  ]
+}
+{% endschema %}

package/modules/delivery-estimate/README.md

@@ -0,0 +1,17 @@
+# delivery-estimate
+
+delivery-estimate. Migrated from Lushi (`snippets/lushi-delivery-estimate.liquid`) into the Runwell Shopify Toolkit.
+
+Category: `pdp`
+
+## Files
+
+- `snippets/runwell-delivery-estimate.liquid`
+
+## Config
+
+See `module.json` config schema. Defaults match the original Lushi defaults; override per client in `runwell.config.json`.
+
+## Lineage
+
+This module was extracted from the Lushi build (Capital V) and generalised. The original lives at `lushi-shopify/snippets/lushi-delivery-estimate.liquid`. The toolkit version uses `runwell-` class prefixes and pulls brand vars from the client config.

package/modules/delivery-estimate/module.json

@@ -0,0 +1,14 @@
+{
+  "name": "delivery-estimate",
+  "version": "0.1.0",
+  "category": "pdp",
+  "description": "delivery-estimate module migrated from Lushi.",
+  "files": {
+    "snippets": [
+      "snippets/runwell-delivery-estimate.liquid"
+    ]
+  },
+  "config": {
+    "schema": {}
+  }
+}

package/modules/delivery-estimate/snippets/runwell-delivery-estimate.liquid

@@ -0,0 +1,39 @@
+{%- comment -%}
+  Lushi delivery estimate. Renders a placeholder span filled by JS with
+  a date range based on cutoff time and standard transit. Native
+  replacement for the Estimated Delivery Date widget in Vitals etc.
+{%- endcomment -%}
+
+<p class="runwell-delivery" role="status">
+  <span aria-hidden="true">&rarr;</span>
+  Order today for delivery between
+  <strong data-runwell-delivery="from">soon</strong>
+  and
+  <strong data-runwell-delivery="to">soon</strong>.
+</p>
+
+<script>
+(function () {
+  var fromEl = document.querySelector('[data-runwell-delivery="from"]');
+  var toEl = document.querySelector('[data-runwell-delivery="to"]');
+  if (!fromEl || !toEl) return;
+  var now = new Date();
+  var cutoffHour = 14;
+  var ordersToday = (now.getUTCHours() - 5) < cutoffHour;
+  function addBusinessDays(date, days) {
+    var d = new Date(date);
+    while (days > 0) {
+      d.setDate(d.getDate() + 1);
+      var dow = d.getDay();
+      if (dow !== 0 && dow !== 6) days--;
+    }
+    return d;
+  }
+  var shipDay = ordersToday ? new Date(now) : addBusinessDays(now, 1);
+  var fromDate = addBusinessDays(shipDay, 3);
+  var toDate = addBusinessDays(shipDay, 7);
+  var fmt = { month: 'short', day: 'numeric' };
+  fromEl.textContent = fromDate.toLocaleDateString('en-US', fmt);
+  toEl.textContent = toDate.toLocaleDateString('en-US', fmt);
+})();
+</script>

package/modules/editorial-block/README.md

@@ -0,0 +1,17 @@
+# editorial-block
+
+Lushi editorial block. Migrated from Lushi (`sections/lushi-editorial-block.liquid`) into the Runwell Shopify Toolkit.
+
+Category: `storefront`
+
+## Files
+
+- `sections/runwell-editorial-block.liquid`
+
+## Config
+
+See `module.json` config schema. Defaults match the original Lushi defaults; override per client in `runwell.config.json`.
+
+## Lineage
+
+This module was extracted from the Lushi build (Capital V) and generalised. The original lives at `lushi-shopify/sections/lushi-editorial-block.liquid`. The toolkit version uses `runwell-` class prefixes and pulls brand vars from the client config.

package/modules/editorial-block/module.json

@@ -0,0 +1,40 @@
+{
+  "name": "editorial-block",
+  "version": "0.1.0",
+  "category": "storefront",
+  "description": "Lushi editorial block module migrated from Lushi.",
+  "files": {
+    "sections": [
+      "sections/runwell-editorial-block.liquid"
+    ]
+  },
+  "config": {
+    "schema": {
+      "eyebrow": {
+        "type": "string",
+        "default": "Our approach",
+        "label": "Eyebrow"
+      },
+      "heading": {
+        "type": "string",
+        "default": "Wellness, made simple.",
+        "label": "Heading"
+      },
+      "lede": {
+        "type": "string",
+        "default": "Curated supplements, skincare, and rituals from the brands we trust most. Editorial-first, science-aware, beautifully made.",
+        "label": "Lede"
+      },
+      "background_color": {
+        "type": "string",
+        "default": "#EDE6D8",
+        "label": "Background color"
+      },
+      "text_color": {
+        "type": "string",
+        "default": "#0B3D38",
+        "label": "Text color"
+      }
+    }
+  }
+}

package/modules/editorial-block/sections/runwell-editorial-block.liquid

@@ -0,0 +1,155 @@
+{%- comment -%}
+  Lushi v2 editorial section: eyebrow + serif italic heading + lede + body.
+  Used for the homepage section flow (Approach, Press, Partnering equivalents).
+{%- endcomment -%}
+
+<section
+  class="runwell-editorial-section"
+  style="background: {{ section.settings.background_color | default: '#EDE6D8' }}; color: {{ section.settings.text_color | default: '#0B3D38' }};"
+>
+  {%- if section.settings.eyebrow != blank -%}
+    <div class="runwell-editorial-section__eyebrow">{{ section.settings.eyebrow }}</div>
+  {%- endif -%}
+
+  {%- if section.settings.heading != blank -%}
+    <h2 class="runwell-editorial-section__heading" style="color: {{ section.settings.text_color | default: '#0B3D38' }};">
+      {{ section.settings.heading }}
+    </h2>
+  {%- endif -%}
+
+  {%- if section.settings.lede != blank -%}
+    <p class="runwell-editorial-section__lede" style="color: {{ section.settings.text_color | default: '#0B3D38' }};">
+      {{ section.settings.lede }}
+    </p>
+  {%- endif -%}
+
+  {%- if section.blocks.size > 0 -%}
+    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; margin-top: 2rem;">
+      {%- for block in section.blocks -%}
+        <div {{ block.shopify_attributes }}>
+          {%- if block.settings.image != blank -%}
+            <img src="{{ block.settings.image | image_url: width: 800 }}"
+                 alt="{{ block.settings.title | escape }}"
+                 width="800"
+                 height="1000"
+                 loading="lazy"
+                 style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 1rem; aspect-ratio: 4/5; object-fit: cover;">
+          {%- elsif block.settings.asset_filename != blank -%}
+            <img src="{{ block.settings.asset_filename | asset_url }}"
+                 alt="{{ block.settings.title | escape }}"
+                 width="800"
+                 height="1000"
+                 loading="lazy"
+                 style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 1rem; aspect-ratio: 4/5; object-fit: cover;">
+          {%- endif -%}
+          {%- if block.settings.title != blank -%}
+            <h3 style="font-family: var(--font-heading-family); font-style: normal; font-weight: 400; font-size: 1.6rem; margin: 0 0 0.5rem 0; line-height: 1.2;">
+              {{ block.settings.title }}
+            </h3>
+          {%- endif -%}
+          {%- if block.settings.body != blank -%}
+            <p style="font-size: 0.95rem; line-height: 1.6; opacity: 0.85; margin: 0;">
+              {{ block.settings.body }}
+            </p>
+          {%- endif -%}
+          {%- if block.settings.link_label != blank -%}
+            <a href="{{ block.settings.link_url | default: '#' }}"
+               style="display: inline-block; margin-top: 0.8rem; font-weight: 700; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--runwell-blue);">
+              {{ block.settings.link_label }} &rarr;
+            </a>
+          {%- endif -%}
+        </div>
+      {%- endfor -%}
+    </div>
+  {%- endif -%}
+</section>
+
+{% schema %}
+{
+  "name": "Lushi editorial block",
+  "tag": "section",
+  "class": "section-runwell-editorial",
+  "settings": [
+    {
+      "type": "text",
+      "id": "eyebrow",
+      "label": "Eyebrow",
+      "default": "Our approach"
+    },
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "Heading",
+      "default": "Wellness, made simple."
+    },
+    {
+      "type": "textarea",
+      "id": "lede",
+      "label": "Lede",
+      "default": "Curated supplements, skincare, and rituals from the brands we trust most. Editorial-first, science-aware, beautifully made."
+    },
+    {
+      "type": "color",
+      "id": "background_color",
+      "label": "Background color",
+      "default": "#EDE6D8"
+    },
+    {
+      "type": "color",
+      "id": "text_color",
+      "label": "Text color",
+      "default": "#0B3D38"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "card",
+      "name": "Card",
+      "settings": [
+        {
+          "type": "image_picker",
+          "id": "image",
+          "label": "Image (uploaded)",
+          "info": "Optional. Falls through to bundled asset filename below."
+        },
+        {
+          "type": "text",
+          "id": "asset_filename",
+          "label": "Bundled asset filename",
+          "info": "e.g. runwell-about-1.jpg (theme asset)."
+        },
+        {
+          "type": "text",
+          "id": "title",
+          "label": "Title"
+        },
+        {
+          "type": "textarea",
+          "id": "body",
+          "label": "Body"
+        },
+        {
+          "type": "text",
+          "id": "link_label",
+          "label": "Link label"
+        },
+        {
+          "type": "url",
+          "id": "link_url",
+          "label": "Link URL"
+        }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Lushi editorial block",
+      "blocks": [
+        { "type": "card" },
+        { "type": "card" },
+        { "type": "card" }
+      ]
+    }
+  ]
+}
+{% endschema %}

package/modules/editorial-hero/README.md

@@ -0,0 +1,17 @@
+# editorial-hero
+
+Lushi video hero. Migrated from Lushi (`sections/lushi-video-hero.liquid`) into the Runwell Shopify Toolkit.
+
+Category: `storefront`
+
+## Files
+
+- `sections/runwell-video-hero.liquid`
+
+## Config
+
+See `module.json` config schema. Defaults match the original Lushi defaults; override per client in `runwell.config.json`.
+
+## Lineage
+
+This module was extracted from the Lushi build (Capital V) and generalised. The original lives at `lushi-shopify/sections/lushi-video-hero.liquid`. The toolkit version uses `runwell-` class prefixes and pulls brand vars from the client config.

package/modules/editorial-hero/module.json

@@ -0,0 +1,61 @@
+{
+  "name": "editorial-hero",
+  "version": "0.1.0",
+  "category": "storefront",
+  "description": "Lushi video hero module migrated from Lushi.",
+  "files": {
+    "sections": [
+      "sections/runwell-video-hero.liquid"
+    ]
+  },
+  "config": {
+    "schema": {
+      "eyebrow": {
+        "type": "string",
+        "default": "Wellness, curated",
+        "label": "Eyebrow text"
+      },
+      "heading": {
+        "type": "string",
+        "default": "Glow from within.",
+        "label": "Headline"
+      },
+      "subheading": {
+        "type": "string",
+        "default": "Lushi is a modern wellness brand offering curated supplements, skincare, and rituals for everyday health.",
+        "label": "Subheading"
+      },
+      "video_url": {
+        "type": "string",
+        "label": "Background video URL (mp4)"
+      },
+      "poster_image": {
+        "type": "string",
+        "label": "Poster image (and fallback)"
+      },
+      "min_height": {
+        "type": "number",
+        "default": 100,
+        "label": "Hero min-height (vh)"
+      },
+      "button_label_primary": {
+        "type": "string",
+        "default": "Shop wellness",
+        "label": "Primary button label"
+      },
+      "button_link_primary": {
+        "type": "string",
+        "label": "Primary button link"
+      },
+      "button_label_secondary": {
+        "type": "string",
+        "default": "Read the journal",
+        "label": "Secondary button label"
+      },
+      "button_link_secondary": {
+        "type": "string",
+        "label": "Secondary button link"
+      }
+    }
+  }
+}