@port60/template-kit 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@port60/template-kit",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Build Port60 site templates locally: scaffold, live-preview, validate against the platform contract, and package for studio upload. AI-agent ready — every scaffold ships AGENTS.md and validate emits machine-readable JSON.",
   "type": "module",
   "bin": {

package/src/vendor/contract/v1/sections.json

@@ -240,6 +240,19 @@
        "kind": "text",
        "required": false,
        "description": "Accessible description; empty renders as decorative (alt=\"\")."
+      },
+      {
+       "name": "focus",
+       "kind": "select",
+       "required": false,
+       "options": [
+        "centre",
+        "top",
+        "bottom",
+        "left",
+        "right"
+       ],
+       "description": "Which part of the photograph survives the fill-crop (templates render photos cover-style, so an aspect mismatch crops — this picks the slice that stays). Maps to background-position/object-position; absent means centre."
       }
      ]
     }

package/starter/manifest.json

@@ -1,6 +1,6 @@
 {
  "name": "starter",
- "version": "1.3.0",
+ "version": "1.4.0",
  "format": "port60-liquid@1",
  "label": "Starter",
  "description": "The reference template for the Port60 dialect — the developer docs' worked example and the base to copy when building your own. 1.1.0 adds the layout slot: the template owns the header, navigation and footer chrome.",
@@ -40,5 +40,5 @@
    }
   ]
  },
- "changelog": "Home hero with hero photographs: a treated single image or a rotating set, toned into the palette — the reference implementation of supports.heroImagery."
+ "changelog": "Per-photo focus: choose which part of a hero photograph survives the fill-crop (centre/top/bottom/left/right) — panoramas and portraits stop cropping blind."
 }

package/starter/sections/homeHero.liquid

@@ -17,7 +17,16 @@
 {% elsif heroCount == 0 %}
   {% assign heroPhoto = section.imageUrl %}
 {% endif %}
-<section class="lq-homehero{% if heroPhoto %} lq-homehero--photo{% endif %}{% if heroCount > 1 %} lq-homehero--carousel{% endif %}"{% if heroPhoto %} style="background-image: url('{{ heroPhoto }}')"{% endif %}>
+{% assign heroFocus = 'center' %}
+{% if heroCount > 0 %}
+  {% case section.images.first.focus %}
+    {% when 'top' %}{% assign heroFocus = 'center top' %}
+    {% when 'bottom' %}{% assign heroFocus = 'center bottom' %}
+    {% when 'left' %}{% assign heroFocus = 'left center' %}
+    {% when 'right' %}{% assign heroFocus = 'right center' %}
+  {% endcase %}
+{% endif %}
+<section class="lq-homehero{% if heroPhoto %} lq-homehero--photo{% endif %}{% if heroCount > 1 %} lq-homehero--carousel{% endif %}"{% if heroPhoto %} style="background-image: url('{{ heroPhoto }}'); background-position: {{ heroFocus }}"{% endif %}>
   {% if heroCount > 1 %}{% island 'hero_carousel' %}{% endif %}
   <div class="container lq-homehero-inner">
     <div>