@goldencomm/create-baseline 0.0.1

package/templates/shopify-theme/blocks/column.liquid

@@ -0,0 +1,33 @@
+{%- comment -%}
+  Column — a vertical stack cell inside a Split (mirrors WP core/column). Reuses the
+  ds-core `.gcds-flex` primitive in column direction and accepts any theme block.
+{%- endcomment -%}
+<div
+  class="gcds-flex"
+  style="--gcds-flex-direction: column; --gcds-flex-gap: {{ block.settings.gap | default: 'var(--gcds-space-5)' }}; --gcds-flex-align: {{ block.settings.align | default: 'stretch' }};"
+  {{ block.shopify_attributes }}
+>
+  {% content_for 'blocks' %}
+</div>
+
+{% schema %}
+{
+  "name": "t:blocks.column_name",
+  "settings": [
+    { "type": "text", "id": "gap", "label": "t:settings.gap", "default": "var(--gcds-space-5)" },
+    {
+      "type": "select",
+      "id": "align",
+      "label": "t:settings.align",
+      "default": "stretch",
+      "options": [
+        { "value": "stretch", "label": "t:align.stretch" },
+        { "value": "flex-start", "label": "t:align.start" },
+        { "value": "center", "label": "t:align.center" }
+      ]
+    }
+  ],
+  "blocks": [{ "type": "@theme" }],
+  "presets": [{ "name": "t:blocks.column_name" }]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/image.liquid

@@ -0,0 +1,37 @@
+{%- comment -%}
+  Image — a media block (fills a gap: the theme has no core image block). Renders a
+  responsive <img> from a merchant image with an optional square+cover crop and the
+  token border radius. Falls back to a placeholder when no image is set.
+{%- endcomment -%}
+{%- assign radius = 'var(--gcds-radius-md)' -%}
+{%- if block.settings.image != blank -%}
+  <img
+    src="{{ block.settings.image | image_url: width: 1200 }}"
+    srcset="{{ block.settings.image | image_url: width: 700 }} 700w, {{ block.settings.image | image_url: width: 1400 }} 1400w"
+    sizes="(min-width: 40rem) 50vw, 100vw"
+    alt="{{ block.settings.image.alt | escape }}"
+    width="{{ block.settings.image.width }}"
+    height="{{ block.settings.image.height }}"
+    loading="lazy"
+    style="display:block; width:100%; height:auto; border-radius:{{ radius }};{% if block.settings.square %} aspect-ratio:1; object-fit:cover;{% endif %}"
+    {{ block.shopify_attributes }}
+  >
+{%- else -%}
+  <div
+    style="border-radius:{{ radius }}; overflow:hidden;{% if block.settings.square %} aspect-ratio:1;{% endif %}"
+    {{ block.shopify_attributes }}
+  >
+    {{ 'image' | placeholder_svg_tag }}
+  </div>
+{%- endif -%}
+
+{% schema %}
+{
+  "name": "t:blocks.image_name",
+  "settings": [
+    { "type": "image_picker", "id": "image", "label": "t:settings.image" },
+    { "type": "checkbox", "id": "square", "label": "t:settings.square", "default": true }
+  ],
+  "presets": [{ "name": "t:blocks.image_name" }]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/modal.liquid

@@ -0,0 +1,52 @@
+{%- comment -%}
+  Modal — a native <dialog> (.gcds-modal) opened zero-JS via Invoker Commands
+  (command/commandfor). Styled by modal.css in baseline.css. block.id makes the
+  trigger↔dialog link unique. "Dismissible" adds closedby="any" (native light dismiss;
+  Chromium/Firefox — Safari keeps Esc-only). No JS.
+
+  CONTAINER: the dialog interior is composed from re-organizable child blocks —
+  _modal-media (full-bleed image/video), _modal-header, _modal-body, _modal-footer —
+  rendered via {% content_for 'blocks' %}. Merchants add/remove/reorder them freely
+  (AQ-B2). The corner close (X) is built in — it lives after the content so a media
+  block stays :first-child (meets the top edge, no top padding).
+{%- endcomment -%}
+{%- assign mid = 'gcds-modal-' | append: block.id -%}
+<button class="gcds-button gcds-button--primary gcds-button--md" command="show-modal" commandfor="{{ mid }}" {{ block.shopify_attributes }}>
+  {{- block.settings.trigger_label | escape -}}
+</button>
+<dialog id="{{ mid }}" class="gcds-modal"{% if block.settings.dismissible %} closedby="any"{% endif %}>
+  {% content_for 'blocks' %}
+  {%- if block.settings.show_close -%}
+    <button class="gcds-modal__close" command="close" commandfor="{{ mid }}" aria-label="{{ block.settings.close_label | default: 'Close' | escape }}">
+      {%- render 'lucide', icon: 'x' -%}
+    </button>
+  {%- endif -%}
+</dialog>
+
+{% schema %}
+{
+  "name": "t:blocks.modal_name",
+  "settings": [
+    { "type": "text", "id": "trigger_label", "label": "t:settings.trigger_label", "default": "Open modal" },
+    { "type": "checkbox", "id": "dismissible", "label": "t:settings.dismissible", "default": true },
+    { "type": "checkbox", "id": "show_close", "label": "t:settings.show_close", "default": true },
+    { "type": "text", "id": "close_label", "label": "t:settings.close_label", "default": "Close" }
+  ],
+  "blocks": [
+    { "type": "_modal-media" },
+    { "type": "_modal-header" },
+    { "type": "_modal-body" },
+    { "type": "_modal-footer" }
+  ],
+  "presets": [
+    {
+      "name": "t:blocks.modal_name",
+      "blocks": [
+        { "type": "_modal-header" },
+        { "type": "_modal-body" },
+        { "type": "_modal-footer" }
+      ]
+    }
+  ]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/popover.liquid

@@ -0,0 +1,24 @@
+{%- comment -%}
+  Popover — a floating panel (.gcds-popover) on the Popover API + CSS anchor
+  positioning. Styled by popover.css in baseline.css. block.id makes the
+  trigger↔panel link unique. Zero JS (anchor placement is Chromium-only; elsewhere it
+  opens at the UA position).
+{%- endcomment -%}
+{%- assign pid = 'gcds-popover-' | append: block.id -%}
+<button class="gcds-button gcds-button--outline gcds-button--md" popovertarget="{{ pid }}" {{ block.shopify_attributes }}>
+  {{- block.settings.trigger_label | escape -}}
+</button>
+<div id="{{ pid }}" popover class="gcds-popover">
+  {{ block.settings.content }}
+</div>
+
+{% schema %}
+{
+  "name": "t:blocks.popover_name",
+  "settings": [
+    { "type": "text", "id": "trigger_label", "label": "t:settings.trigger_label", "default": "Details" },
+    { "type": "richtext", "id": "content", "label": "t:settings.content", "default": "<p>Anything can go here.</p>" }
+  ],
+  "presets": [{ "name": "t:blocks.popover_name" }]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/skeleton.liquid

@@ -0,0 +1,22 @@
+{%- comment -%}
+  Skeleton — a pulsing content placeholder (.gcds-skeleton). Styled by skeleton.css in
+  baseline.css; zero JS. Owns no size — width/height come from settings. Decorative
+  (aria-hidden).
+{%- endcomment -%}
+<div
+  class="gcds-skeleton"
+  style="inline-size: {{ block.settings.width | default: '100%' }}; block-size: {{ block.settings.height | default: '1rem' }};"
+  aria-hidden="true"
+  {{ block.shopify_attributes }}
+></div>
+
+{% schema %}
+{
+  "name": "t:blocks.skeleton_name",
+  "settings": [
+    { "type": "text", "id": "width", "label": "t:settings.width", "default": "100%" },
+    { "type": "text", "id": "height", "label": "t:settings.height", "default": "1rem" }
+  ],
+  "presets": [{ "name": "t:blocks.skeleton_name" }]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/spinner.liquid

@@ -0,0 +1,22 @@
+{%- comment -%}
+  Spinner — a pure-CSS loading indicator (.gcds-spinner). Styled by spinner.css in
+  baseline.css; inherits currentColor. Zero JS. Size via the --gcds-spinner-size knob.
+{%- endcomment -%}
+<span
+  class="gcds-spinner"
+  role="status"
+  aria-label="{{ block.settings.label | escape }}"
+  {% if block.settings.size != blank %}style="--gcds-spinner-size: {{ block.settings.size }}"{% endif %}
+  {{ block.shopify_attributes }}
+></span>
+
+{% schema %}
+{
+  "name": "t:blocks.spinner_name",
+  "settings": [
+    { "type": "text", "id": "label", "label": "t:settings.label", "default": "Loading" },
+    { "type": "text", "id": "size", "label": "t:settings.size", "info": "t:settings.size_css_info" }
+  ],
+  "presets": [{ "name": "t:blocks.spinner_name" }]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/split.liquid

@@ -0,0 +1,39 @@
+{%- comment -%}
+  Split — a responsive multi-column layout block. Fills a Wave 5 layout gap Shopify
+  can't get from Tailwind by reusing the ds-core `.gcds-grid` primitive (auto-fit:
+  cells sit side by side on wide viewports and stack on narrow ones — no media
+  query). Accepts only Column blocks, mirroring WordPress core/columns → core/column.
+  Layout only; the look comes from the nested blocks. Ships two columns by default.
+{%- endcomment -%}
+{%- assign col_min = block.settings.col_min | default: '18rem' -%}
+<div
+  class="gcds-grid"
+  style="--gcds-grid-min: {{ col_min }}; align-items: {{ block.settings.align | default: 'center' }};"
+  {{ block.shopify_attributes }}
+>
+  {% content_for 'blocks' %}
+</div>
+
+{% schema %}
+{
+  "name": "t:blocks.split_name",
+  "settings": [
+    { "type": "text", "id": "col_min", "label": "t:settings.col_min", "default": "18rem" },
+    {
+      "type": "select",
+      "id": "align",
+      "label": "t:settings.align",
+      "default": "center",
+      "options": [
+        { "value": "start", "label": "t:align.start" },
+        { "value": "center", "label": "t:align.center" },
+        { "value": "stretch", "label": "t:align.stretch" }
+      ]
+    }
+  ],
+  "blocks": [{ "type": "column" }],
+  "presets": [
+    { "name": "t:blocks.split_name", "blocks": [{ "type": "column" }, { "type": "column" }] }
+  ]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/tab.liquid

@@ -0,0 +1,19 @@
+{%- comment -%}
+  Tab — one panel within a Tabs container (.gcds-tabs__panel). Its title feeds the tab
+  button that Tabs' script generates (via data-tab-title). Accepts nested @theme blocks
+  as the panel content. Only meaningful inside a Tabs block.
+{%- endcomment -%}
+<section class="gcds-tabs__panel" data-tab-title="{{ block.settings.title | escape }}" {{ block.shopify_attributes }}>
+  {% content_for 'blocks' %}
+</section>
+
+{% schema %}
+{
+  "name": "t:blocks.tab_name",
+  "settings": [
+    { "type": "text", "id": "title", "label": "t:settings.title", "default": "Tab" }
+  ],
+  "blocks": [{ "type": "@theme" }],
+  "presets": [{ "name": "t:blocks.tab_name" }]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/tabs.liquid

@@ -0,0 +1,78 @@
+{%- comment -%}
+  Tabs — a container of Tab child blocks (.gcds-tabs). Each Tab renders a panel with a
+  data-tab-title; the {% javascript %} below builds the tablist from those panels and
+  wires selection + arrow-key nav (loaded only when a Tabs block is on the page, once
+  per type). Styled by tabs.css in baseline.css. Before JS runs, all panels show
+  (progressive). Accepts only "tab" children (mirrors buttons -> button).
+{%- endcomment -%}
+<div class="gcds-tabs" data-gcds-tabs {{ block.shopify_attributes }}>
+  {% content_for 'blocks' %}
+</div>
+
+{% javascript %}
+  document.querySelectorAll("[data-gcds-tabs]").forEach(function (root) {
+    if (root.dataset.gcdsTabsBound) return;
+    root.dataset.gcdsTabsBound = "1";
+    var panels = Array.prototype.slice.call(root.querySelectorAll(".gcds-tabs__panel"));
+    if (!panels.length) return;
+
+    var list = document.createElement("div");
+    list.className = "gcds-tabs__list";
+    list.setAttribute("role", "tablist");
+
+    var tabButtons = panels.map(function (panel, i) {
+      var base = (root.id || "gcds-tabs") + "-" + i;
+      if (!panel.id) panel.id = base + "-panel";
+      panel.setAttribute("role", "tabpanel");
+      panel.setAttribute("aria-labelledby", base + "-tab");
+      panel.tabIndex = 0;
+      var btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "gcds-tabs__tab";
+      btn.id = base + "-tab";
+      btn.setAttribute("role", "tab");
+      btn.setAttribute("aria-controls", panel.id);
+      btn.textContent = panel.getAttribute("data-tab-title") || "Tab " + (i + 1);
+      return btn;
+    });
+
+    tabButtons.forEach(function (btn) { list.appendChild(btn); });
+    root.insertBefore(list, root.firstChild);
+
+    function select(i, focus) {
+      tabButtons.forEach(function (btn, j) {
+        var selected = j === i;
+        btn.setAttribute("aria-selected", selected ? "true" : "false");
+        btn.tabIndex = selected ? 0 : -1;
+        panels[j].hidden = !selected;
+        if (selected && focus) btn.focus();
+      });
+    }
+
+    tabButtons.forEach(function (btn, i) {
+      btn.addEventListener("click", function () { select(i); });
+      btn.addEventListener("keydown", function (event) {
+        var next;
+        if (event.key === "ArrowRight") next = (i + 1) % tabButtons.length;
+        else if (event.key === "ArrowLeft") next = (i - 1 + tabButtons.length) % tabButtons.length;
+        else if (event.key === "Home") next = 0;
+        else if (event.key === "End") next = tabButtons.length - 1;
+        else return;
+        event.preventDefault();
+        select(next, true);
+      });
+    });
+
+    select(0);
+  });
+{% endjavascript %}
+
+{% schema %}
+{
+  "name": "t:blocks.tabs_name",
+  "blocks": [{ "type": "tab" }],
+  "presets": [
+    { "name": "t:blocks.tabs_name", "blocks": [{ "type": "tab" }, { "type": "tab" }] }
+  ]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/tags.liquid

@@ -0,0 +1,55 @@
+{%- comment -%}
+  Tags — outputs a product's tags or collections as a wrapping row of linked badges
+  (a .gcds-badge-group of .gcds-badge). Styled by badge.css in baseline.css; the
+  Shopify analogue of WP's core/post-terms badge treatment. Uses the product picked
+  in settings, or the product in scope (a product section) when none is set — so it
+  works on product pages AND anywhere you name a product (e.g. a homepage feature).
+{%- endcomment -%}
+{%- assign p = block.settings.product | default: product -%}
+{%- assign source = block.settings.source | default: 'tags' -%}
+{%- assign variant = block.settings.variant | default: 'secondary' -%}
+<div class="gcds-badge-group" {{ block.shopify_attributes }}>
+  {%- if source == 'collections' -%}
+    {%- for col in p.collections -%}
+      <a class="gcds-badge gcds-badge--{{ variant }}" href="{{ col.url }}">{{ col.title | escape }}</a>
+    {%- endfor -%}
+  {%- else -%}
+    {%- for tag in p.tags -%}
+      <a class="gcds-badge gcds-badge--{{ variant }}" href="{{ routes.all_products_collection_url }}/{{ tag | handleize }}">{{ tag | escape }}</a>
+    {%- endfor -%}
+  {%- endif -%}
+</div>
+
+{% schema %}
+{
+  "name": "t:blocks.tags_name",
+  "settings": [
+    { "type": "product", "id": "product", "label": "t:settings.product", "info": "t:settings.product_info" },
+    {
+      "type": "select",
+      "id": "source",
+      "label": "t:settings.source",
+      "default": "tags",
+      "options": [
+        { "value": "tags", "label": "t:source.tags" },
+        { "value": "collections", "label": "t:source.collections" }
+      ]
+    },
+    {
+      "type": "select",
+      "id": "variant",
+      "label": "t:settings.variant",
+      "default": "secondary",
+      "options": [
+        { "value": "primary", "label": "t:variant.primary" },
+        { "value": "secondary", "label": "t:variant.secondary" },
+        { "value": "outline", "label": "t:variant.outline" },
+        { "value": "error", "label": "t:variant.error" },
+        { "value": "success", "label": "t:variant.success" },
+        { "value": "warning", "label": "t:variant.warning" }
+      ]
+    }
+  ],
+  "presets": [{ "name": "t:blocks.tags_name" }]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/text.liquid

@@ -0,0 +1,55 @@
+{%- comment -%}
+  Text — a heading + body block (fills a gap: the typography block is a fixed
+  specimen, not merchant content). Element look comes from baseline.css; the toggles
+  add the Baseline utility classes (display heading, lead paragraph, muted).
+{%- endcomment -%}
+{%- liquid
+  assign level = block.settings.level | default: 'h2'
+  assign heading_class = 'gcds-text-balance'
+  if block.settings.display
+    assign heading_class = 'gcds-display gcds-text-balance'
+  endif
+  assign body_class = 'gcds-text-balance'
+  if block.settings.lead
+    assign body_class = 'gcds-lead ' | append: body_class
+  endif
+  if block.settings.muted
+    assign body_class = body_class | append: ' gcds-text-muted'
+  endif
+-%}
+<div {{ block.shopify_attributes }}>
+  {%- if block.settings.heading != blank -%}
+    <{{ level }} class="{{ heading_class }}">{{ block.settings.heading | escape }}</{{ level }}>
+  {%- endif -%}
+  {%- if block.settings.body != blank -%}
+    <p class="{{ body_class }}">{{ block.settings.body }}</p>
+  {%- endif -%}
+</div>
+
+{% schema %}
+{
+  "name": "t:blocks.text_name",
+  "settings": [
+    { "type": "text", "id": "heading", "label": "t:settings.heading", "default": "Heading" },
+    {
+      "type": "select",
+      "id": "level",
+      "label": "t:settings.level",
+      "default": "h2",
+      "options": [
+        { "value": "h1", "label": "H1" },
+        { "value": "h2", "label": "H2" },
+        { "value": "h3", "label": "H3" },
+        { "value": "h4", "label": "H4" },
+        { "value": "h5", "label": "H5" },
+        { "value": "h6", "label": "H6" }
+      ]
+    },
+    { "type": "checkbox", "id": "display", "label": "t:settings.display", "default": false },
+    { "type": "inline_richtext", "id": "body", "label": "t:settings.body" },
+    { "type": "checkbox", "id": "lead", "label": "t:settings.lead", "default": false },
+    { "type": "checkbox", "id": "muted", "label": "t:settings.muted", "default": false }
+  ],
+  "presets": [{ "name": "t:blocks.text_name" }]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/tooltip.liquid

@@ -0,0 +1,50 @@
+{%- comment -%}
+  Tooltip — a hover/focus label (.gcds-tooltip) on a popover="hint" + CSS anchor
+  positioning. Styled by tooltip.css in baseline.css. block.id links trigger↔tip and
+  names the anchor. The {% javascript %} below drives show/hide on hover/focus (the
+  Interest Invokers replacement); it's only loaded when a Tooltip block is on the page,
+  once per type, and wires every instance.
+{%- endcomment -%}
+{%- assign tid = 'gcds-tt-' | append: block.id -%}
+<span class="gcds-tooltip-anchor" style="anchor-name: --{{ tid }}">
+  <button
+    type="button"
+    class="gcds-button gcds-button--ghost gcds-button--md"
+    aria-describedby="{{ tid }}"
+    {{ block.shopify_attributes }}
+  >
+    {{- block.settings.trigger_label | escape -}}
+  </button>
+</span>
+<div id="{{ tid }}" popover="hint" role="tooltip" class="gcds-tooltip" style="position-anchor: --{{ tid }}">
+  {{- block.settings.content | escape -}}
+</div>
+
+{% stylesheet %}
+  .gcds-tooltip-anchor { display: contents; }
+{% endstylesheet %}
+
+{% javascript %}
+  document.querySelectorAll(".gcds-tooltip").forEach(function (tip) {
+    var trigger = document.querySelector('[aria-describedby="' + tip.id + '"]');
+    if (!trigger || typeof tip.showPopover !== "function" || trigger.dataset.gcdsTooltipBound) return;
+    trigger.dataset.gcdsTooltipBound = "1";
+    var show = function () { try { tip.showPopover(); } catch (e) {} };
+    var hide = function () { try { tip.hidePopover(); } catch (e) {} };
+    trigger.addEventListener("pointerenter", show);
+    trigger.addEventListener("focus", show);
+    trigger.addEventListener("pointerleave", hide);
+    trigger.addEventListener("blur", hide);
+  });
+{% endjavascript %}
+
+{% schema %}
+{
+  "name": "t:blocks.tooltip_name",
+  "settings": [
+    { "type": "text", "id": "trigger_label", "label": "t:settings.trigger_label", "default": "Hover me" },
+    { "type": "text", "id": "content", "label": "t:settings.content", "default": "A helpful, non-essential hint." }
+  ],
+  "presets": [{ "name": "t:blocks.tooltip_name" }]
+}
+{% endschema %}

package/templates/shopify-theme/blocks/typography.liquid

@@ -0,0 +1,90 @@
+{%- comment -%}
+  Typography — a prose specimen mirroring the Next.js home page and the WordPress
+  gcds/typography pattern. The element look comes from baseline.css (bare-tag
+  styles); .gcds-prose adds the vertical rhythm for this contiguous prose blob,
+  exactly like the React <article className="gcds-prose">. Fixed demo content —
+  no block settings (a real store would render merchant rich text into .gcds-prose).
+{%- endcomment -%}
+<div class="gcds-prose baseline-prose" {{ block.shopify_attributes }}>
+  <h2>Typography specimen</h2>
+  <h3>Stacked heading example</h3>
+  <p>
+    A paragraph with <strong>strong</strong>, <b>bold</b>, <em>emphasis</em>, <i>italic</i>,
+    <a href="#">a link</a>, <mark>highlighted text</mark>, <small>small print</small>, and
+    <abbr title="Cascading Style Sheets">CSS</abbr>. Edits: <del>removed</del> <ins>inserted</ins>,
+    <s>struck</s>. Math: H<sub>2</sub>O and E = mc<sup>2</sup>. Press <kbd>Ctrl</kbd> +
+    <kbd>C</kbd>. Inline <code>code()</code> and a quote: <q>brevity is the soul of wit</q>
+    <cite>— Shakespeare</cite>.
+  </p>
+
+  <h3>Lists</h3>
+  <ul>
+    <li>Unordered item one</li>
+    <li>
+      Item two with a nested list
+      <ul>
+        <li>Nested item</li>
+        <li>Nested item</li>
+      </ul>
+    </li>
+    <li>Unordered item three</li>
+  </ul>
+  <ol>
+    <li>Ordered first</li>
+    <li>Ordered second</li>
+  </ol>
+
+  <h3>Description list</h3>
+  <dl>
+    <dt>Token</dt>
+    <dd>A named design decision (color, space, type) consumed across targets.</dd>
+    <dt>Component</dt>
+    <dd>A reusable unit composed from tokens and markup.</dd>
+  </dl>
+
+  <h3>Blockquote &amp; figure</h3>
+  <blockquote>
+    <p>Design is not just what it looks like and feels like. Design is how it works.</p>
+    <cite>Steve Jobs</cite>
+  </blockquote>
+  <figure>
+    <blockquote>
+      <p>A figure can wrap a quote or an image and caption it.</p>
+    </blockquote>
+    <figcaption>Figure with a figcaption.</figcaption>
+  </figure>
+
+  <h3>Code block</h3>
+  <pre><code>function greet(name) {
+  return `Hello, ${name}`;
+}</code></pre>
+
+  <h3>Table</h3>
+  <table>
+    <caption>A sample data table.</caption>
+    <thead>
+      <tr><th>Target</th><th>Channel</th><th>Status</th></tr>
+    </thead>
+    <tbody>
+      <tr><td>React / Next</td><td>npm</td><td>Ready</td></tr>
+      <tr><td>WordPress</td><td>Composer</td><td>Ready</td></tr>
+      <tr><td>Shopify</td><td>CLI</td><td>Ready</td></tr>
+    </tbody>
+  </table>
+
+  <hr>
+
+  <p>And a closing paragraph after a horizontal rule.</p>
+</div>
+
+{% stylesheet %}
+  /* Readable measure for the prose blob, matching WP contentSize / the React article. */
+  .baseline-prose { max-width: 45rem; }
+{% endstylesheet %}
+
+{% schema %}
+{
+  "name": "t:blocks.typography_name",
+  "presets": [{ "name": "t:blocks.typography_name" }]
+}
+{% endschema %}

package/templates/shopify-theme/config/settings_data.json

@@ -0,0 +1,4 @@
+{
+  "current": {},
+  "presets": {}
+}

package/templates/shopify-theme/config/settings_schema.json

@@ -0,0 +1,10 @@
+[
+  {
+    "name": "theme_info",
+    "theme_name": "Baseline",
+    "theme_version": "0.0.0",
+    "theme_author": "GoldenComm",
+    "theme_documentation_url": "https://bitbucket.org/goldencomm/design-system",
+    "theme_support_url": "https://bitbucket.org/goldencomm/design-system/issues"
+  }
+]

package/templates/shopify-theme/layout/theme.liquid

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="{{ request.locale.iso_code }}">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="">
+    <link rel="canonical" href="{{ canonical_url }}">
+    <title>{{ page_title }}</title>
+    {%- if page_description -%}
+      <meta name="description" content="{{ page_description | escape }}">
+    {%- endif -%}
+
+    {{ content_for_header }}
+
+    {%- comment -%} Baseline tokens + gcds-* component styles, synced from @goldencomm/ds-core. {%- endcomment -%}
+    {{ 'baseline.css' | asset_url | stylesheet_tag }}
+  </head>
+  <body>
+    {{ content_for_layout }}
+  </body>
+</html>

package/templates/shopify-theme/locales/en.default.json

@@ -0,0 +1,5 @@
+{
+  "general": {
+    "skip_to_content": "Skip to content"
+  }
+}