@contentrain/astro-kit 0.44.1 → 0.45.0

package/catalog.json

@@ -148,6 +148,17 @@
           "default": "default",
           "description": "Section background when nothing is measured."
         },
+        "inset": {
+          "options": [
+            "none",
+            "15",
+            "27",
+            "34",
+            "42"
+          ],
+          "default": "none",
+          "description": "Layout stack only (split ignores it). From md (768px) up, the band's content (copy, image and items) starts at this share of the frame's width and runs to its end, its text at that edge (a centred band's too): a narrow talk beside a wide margin. Below md it is the full column. none: as before."
+        },
         "headingLines": {
           "options": [
             "flow",
@@ -3822,6 +3833,33 @@
           ],
           "default": "none",
           "description": "Split and centered: edge runs the image on to the window's edge on its side (both sides when centered); overlap also lets it cross the section's bottom edge by --hero-overlap (3rem), over the next section's top padding, when the image comes last: with stackOrder media-first it draws as edge, so it never covers the text. A cover ignores it."
+        },
+        "inset": {
+          "options": [
+            "none",
+            "15",
+            "27",
+            "34",
+            "42"
+          ],
+          "default": "none",
+          "description": "Layout centered only (split and cover ignore it). From md (768px) up, the copy's start edge sits at this share of the frame's width and its text is set at that edge, not centred: a statement on an axis, the void before it part of the page. Below md the hero is centred as without it. none: as before."
+        },
+        "height": {
+          "options": [
+            "auto",
+            "screen"
+          ],
+          "default": "auto",
+          "description": "The hero's height. screen: from sm (640px) up, at least the window's height (100svh, 100vh where unknown) less --header-h, the header's height where the site sets it (0 without, so a static header above adds to it): the page opens on one full screen, the statement placed in it by contentAt. Below sm the hero is as tall as its content, as with auto: no empty screen on a phone. A boxed cover (width content) ignores it. auto: as before."
+        },
+        "contentAt": {
+          "options": [
+            "start",
+            "end"
+          ],
+          "default": "start",
+          "description": "Where the content sits in a hero taller than it (height screen, or a cover with its own height). end: on the bottom edge, the section's bottom padding under it (a title on the image's lower edge, a statement after a void). start: where the layout puts it, as before."
         }
       },
       "props": {
@@ -5783,6 +5821,17 @@
           ],
           "default": "lg",
           "description": "Type scale of the body."
+        },
+        "inset": {
+          "options": [
+            "none",
+            "15",
+            "27",
+            "34",
+            "42"
+          ],
+          "default": "none",
+          "description": "From md (768px) up, the body's start edge sits at this share of its container's width and the body runs to the container's end: the axis an editorial page sets its text on (an intro in a narrow column, a column set off the page's start). Below md it is the full column. none: as before. The share is of the container the body sits in (in the starter's pages, the reading column)."
         }
       },
       "props": {

package/components/band/Band.astro

@@ -15,6 +15,7 @@ import { muted } from '../_shared/muted'
 
 const band = tv({
   slots: {
+    column: 'flex flex-col gap-10',
     grid: 'grid gap-10',
     copy: 'flex max-w-3xl flex-col gap-4',
     eyebrow: 'text-sm font-semibold tracking-wide text-accent-text uppercase',
@@ -46,8 +47,18 @@ const band = tv({
     },
     // Accent backgrounds have the least contrast headroom: text on them is never dimmed.
     tone: { default: {}, muted: {}, inverse: {}, accent: { eyebrow: 'text-current' } },
+    // Stack only (split ignores it): from md the band's content starts at this share of the frame's width and runs to
+    // its end, its text at that edge; below md it is the full column, as without it.
+    inset: { none: {}, '15': {}, '27': {}, '34': {}, '42': {} },
   },
-  defaultVariants: { layout: 'stack', columns: '3', align: 'start', tone: 'default' },
+  compoundVariants: [
+    { layout: 'stack', inset: '15', class: { column: 'md:ms-[15%]' } },
+    { layout: 'stack', inset: '27', class: { column: 'md:ms-[27%]' } },
+    { layout: 'stack', inset: '34', class: { column: 'md:ms-[34%]' } },
+    { layout: 'stack', inset: '42', class: { column: 'md:ms-[42%]' } },
+    { layout: 'stack', align: 'center', inset: ['15', '27', '34', '42'], class: { copy: 'md:mx-0 md:items-start md:text-start', actions: 'md:justify-start', item: 'md:items-start md:text-start' } },
+  ],
+  defaultVariants: { layout: 'stack', columns: '3', align: 'start', tone: 'default', inset: 'none' },
 })
 
 interface Item {
@@ -88,12 +99,14 @@ interface Props {
   headingLines?: 'flow' | 'lines' | undefined
   /** The same for the lead: `lines` draws each of its lines as a block, still one paragraph. */
   leadLines?: 'flow' | 'lines' | undefined
+  /** Stack only: from md the content starts at this share of the frame's width (`15` … `42` %), its text at that edge. `none` (absent): as before. */
+  inset?: 'none' | '15' | '27' | '34' | '42' | undefined
 }
 
-const { heading, eyebrow, lead, media, items = [], actions = [], headingLevel = 2, layout, columns, align, tone, measured, id, headingLines, leadLines } = Astro.props
+const { heading, eyebrow, lead, media, items = [], actions = [], headingLevel = 2, layout, columns, align, tone, measured, id, headingLines, leadLines, inset } = Astro.props
 // The measured alignment when none is given (`end` has no band layout: it reads as `start`).
 const aligned = align ?? (measured?.align === 'center' ? 'center' : undefined)
-const s = band({ layout: media ? layout : 'stack', columns, align: aligned, tone })
+const s = band({ layout: media ? layout : 'stack', columns, align: aligned, tone, inset })
 const Heading = `h${headingLevel}` as 'h2' | 'h3'
 const ItemHeading = `h${heading ? headingLevel + 1 : headingLevel}` as 'h2' | 'h3' | 'h4'
 // Two bands with the same heading on one page get two ids (`band-<heading>`, then `band-<heading>-2`).
@@ -101,7 +114,7 @@ const headingId = heading ? (id ? `${id}-title` : instanceId(Astro.locals, undef
 const hasCopy = Boolean(heading || eyebrow || lead || actions.length)
 ---
 <Section kit="band" tone={tone} id={id} aria-labelledby={headingId} measured={measured}>
-  <div class="flex flex-col gap-10">
+  <div class={s.column()}>
     {(hasCopy || media) && (
       <div class={s.grid()}>
         {hasCopy && (

package/components/band/fixtures.json

@@ -5,5 +5,129 @@
   {"name": "measured-image-overlay", "props": {"heading": "Visit the farm", "lead": "Open every weekend.", "actions": [{"label": "Plan a visit", "href": "/visit/"}], "measured": {"padY": 120, "minHeight": 480, "tone": "dark", "bg": {"image": "/kit-fixtures/photo-2.svg", "overlay": "rgba(0, 0, 0, 0.55)", "size": "cover", "position": "center"}}, "columns": "1"}},
   {"name": "items-links", "props": {"heading": "Services", "columns": "2", "tone": "muted", "items": [{"title": "Audits", "text": "Where a site loses readers.", "href": "/audits/", "linkLabel": "Read more", "media": "/kit-fixtures/photo-3.svg"}, {"title": "Hosting", "text": "Static hosting, managed.", "href": "/hosting/", "icon": "/kit-fixtures/logo.svg"}]}},
   {"name": "values-points", "props": {"heading": "Plans", "columns": "3", "items": [{"value": "$9", "title": "Starter", "meta": "per month", "points": ["One site", "Email support"]}, {"value": "$29", "title": "Team", "meta": "per month", "points": ["Five sites", "Shared components"], "href": "/pricing/team/", "linkLabel": "Choose Team"}, {"value": "250+", "title": "Sites moved", "text": "Since 2019."}]}},
-  {"name": "heading-lines", "props": {"heading": "Fewer tools.\nMore writing.", "headingLines": "lines", "lead": "Your posts, pages and forms in one place.\nNothing to update, nothing to patch.", "leadLines": "lines", "actions": [{"label": "See how", "href": "/how/"}]}}
+  {"name": "heading-lines", "props": {"heading": "Fewer tools.\nMore writing.", "headingLines": "lines", "lead": "Your posts, pages and forms in one place.\nNothing to update, nothing to patch.", "leadLines": "lines", "actions": [{"label": "See how", "href": "/how/"}]}},
+  {
+    "name": "inset-27",
+    "props": {
+      "heading": "What we do",
+      "lead": "Three things, done carefully.",
+      "items": [
+        {
+          "title": "Design",
+          "text": "Tokens and components."
+        },
+        {
+          "title": "Migration",
+          "text": "Every address kept."
+        },
+        {
+          "title": "Speed",
+          "text": "Static and fast."
+        }
+      ],
+      "tone": "inverse",
+      "inset": "27"
+    }
+  },
+  {
+    "name": "center-inset-34",
+    "props": {
+      "heading": "Our numbers",
+      "align": "center",
+      "measured": {
+        "containerPx": 1140,
+        "padY": 96,
+        "padX": 24,
+        "bg": {
+          "color": "#0f172a"
+        },
+        "columns": {
+          "390": 1,
+          "768": 2,
+          "1280": 4
+        },
+        "gap": 32,
+        "radius": 8
+      },
+      "items": [
+        {
+          "title": "12",
+          "text": "years"
+        },
+        {
+          "title": "340",
+          "text": "sites"
+        },
+        {
+          "title": "9",
+          "text": "countries"
+        },
+        {
+          "title": "1",
+          "text": "team"
+        }
+      ],
+      "columns": "4",
+      "inset": "34"
+    }
+  },
+  {
+    "name": "items-links-inset-15",
+    "props": {
+      "heading": "Services",
+      "columns": "2",
+      "tone": "muted",
+      "items": [
+        {
+          "title": "Audits",
+          "text": "Where a site loses readers.",
+          "href": "/audits/",
+          "linkLabel": "Read more",
+          "media": "/kit-fixtures/photo-3.svg"
+        },
+        {
+          "title": "Hosting",
+          "text": "Static hosting, managed.",
+          "href": "/hosting/",
+          "icon": "/kit-fixtures/logo.svg"
+        }
+      ],
+      "inset": "15"
+    }
+  },
+  {
+    "name": "values-points-inset-42",
+    "props": {
+      "heading": "Plans",
+      "columns": "3",
+      "items": [
+        {
+          "value": "$9",
+          "title": "Starter",
+          "meta": "per month",
+          "points": [
+            "One site",
+            "Email support"
+          ]
+        },
+        {
+          "value": "$29",
+          "title": "Team",
+          "meta": "per month",
+          "points": [
+            "Five sites",
+            "Shared components"
+          ],
+          "href": "/pricing/team/",
+          "linkLabel": "Choose Team"
+        },
+        {
+          "value": "250+",
+          "title": "Sites moved",
+          "text": "Since 2019."
+        }
+      ],
+      "inset": "42"
+    }
+  }
 ]

package/components/band/meta.json

@@ -52,6 +52,17 @@
       "default": "default",
       "description": "Section background when nothing is measured."
     },
+    "inset": {
+      "options": [
+        "none",
+        "15",
+        "27",
+        "34",
+        "42"
+      ],
+      "default": "none",
+      "description": "Layout stack only (split ignores it). From md (768px) up, the band's content (copy, image and items) starts at this share of the frame's width and runs to its end, its text at that edge (a centred band's too): a narrow talk beside a wide margin. Below md it is the full column. none: as before."
+    },
     "headingLines": {
       "options": [
         "flow",

package/components/header/Header.astro

@@ -16,7 +16,7 @@ const header = tv({
   slots: {
     root: 'z-40 w-full',
     inner: 'container-page flex items-center gap-6 py-4',
-    brand: 'flex shrink-0 items-center gap-3 text-lg font-semibold tracking-tight text-current no-underline',
+    brand: 'flex min-w-0 items-center gap-3 text-lg font-semibold tracking-tight text-current no-underline',
   },
   variants: {
     layout: {
@@ -94,16 +94,16 @@ const wrap = search ? 'flex-wrap lg:flex-nowrap' : tagline ? 'flex-wrap md:flex-
       ? (
         <div class="flex min-w-0 basis-full flex-col gap-1 md:basis-auto">
           <a href={safeHref(homeHref)} class={brand()} aria-label={showName ? undefined : siteName} style={brandStyle} data-kit-brand>
-            {logo && <KitImage image={logo} priority class="h-8 w-auto" sizes="160px" />}
-            {showName && <span>{siteName}</span>}
+            {logo && <KitImage image={logo} priority class="h-8 w-auto min-w-0 max-w-full object-contain" sizes="160px" />}
+            {showName && <span class="min-w-[3ch] shrink-[8] truncate">{siteName}</span>}
           </a>
           <p class={muted} data-kit-tagline>{tagline}</p>
         </div>
       )
       : (
         <a href={safeHref(homeHref)} class={brand()} aria-label={showName ? undefined : siteName} style={brandStyle} data-kit-brand>
-          {logo && <KitImage image={logo} priority class="h-8 w-auto" sizes="160px" />}
-          {showName && <span>{siteName}</span>}
+          {logo && <KitImage image={logo} priority class="h-8 w-auto min-w-0 max-w-full object-contain" sizes="160px" />}
+          {showName && <span class="min-w-[3ch] shrink-[8] truncate">{siteName}</span>}
         </a>
       )}
     {search && (

package/components/header/fixtures.json

@@ -211,5 +211,31 @@
     }
   },
   { "name": "search", "props": { "siteName": "Northwind Journal", "items": [{ "label": "Journal", "href": "/" }, { "label": "About", "href": "/about/" }], "search": { "label": "Search", "placeholder": "Search this site", "submitLabel": "Search" } } },
-  {"name": "mega-menu-search", "props": {"siteName": "Northwind", "menu": "mega", "items": [{"label": "Hakkımızda", "href": "/hakkimizda/"}, {"label": "Ürünlerimiz", "href": "#", "children": [{"label": "Aracım İçin", "href": "#", "children": [{"label": "Trafik Sigortası", "href": "/urunlerimiz/trafik-sigortasi/"}, {"label": "Kasko", "href": "/urunlerimiz/kasko/"}]}, {"label": "Evim İçin", "href": "#", "children": [{"label": "Dask", "href": "/urunlerimiz/dask/"}, {"label": "Konut Sigortası", "href": "/urunlerimiz/konut-sigortasi/"}]}, {"label": "Sağlığım İçin", "href": "#", "children": [{"label": "Sağlık Sigortası", "href": "/urunlerimiz/saglik-sigortasi/"}, {"label": "Tamamlayıcı Sağlık", "href": "/urunlerimiz/tamamlayici-saglik/"}]}, {"label": "Diğer", "href": "#", "children": [{"label": "İş Yeri Sigortası", "href": "/urunlerimiz/is-yeri-sigortasi/"}, {"label": "Seyahat Sigortası", "href": "/urunlerimiz/seyahat-sigortasi/"}]}]}, {"label": "Anlaşmalı Sigorta Şirketleri", "href": "/anlasmali-sigorta-sirketleri/"}, {"label": "İletişim", "href": "/iletisim/"}], "action": {"label": "Get a quote", "href": "/contact/"}, "search": {"label": "Search", "placeholder": "Ara", "submitLabel": "Ara"}}}
+  {"name": "mega-menu-search", "props": {"siteName": "Northwind", "menu": "mega", "items": [{"label": "Hakkımızda", "href": "/hakkimizda/"}, {"label": "Ürünlerimiz", "href": "#", "children": [{"label": "Aracım İçin", "href": "#", "children": [{"label": "Trafik Sigortası", "href": "/urunlerimiz/trafik-sigortasi/"}, {"label": "Kasko", "href": "/urunlerimiz/kasko/"}]}, {"label": "Evim İçin", "href": "#", "children": [{"label": "Dask", "href": "/urunlerimiz/dask/"}, {"label": "Konut Sigortası", "href": "/urunlerimiz/konut-sigortasi/"}]}, {"label": "Sağlığım İçin", "href": "#", "children": [{"label": "Sağlık Sigortası", "href": "/urunlerimiz/saglik-sigortasi/"}, {"label": "Tamamlayıcı Sağlık", "href": "/urunlerimiz/tamamlayici-saglik/"}]}, {"label": "Diğer", "href": "#", "children": [{"label": "İş Yeri Sigortası", "href": "/urunlerimiz/is-yeri-sigortasi/"}, {"label": "Seyahat Sigortası", "href": "/urunlerimiz/seyahat-sigortasi/"}]}]}, {"label": "Anlaşmalı Sigorta Şirketleri", "href": "/anlasmali-sigorta-sirketleri/"}, {"label": "İletişim", "href": "/iletisim/"}], "action": {"label": "Get a quote", "href": "/contact/"}, "search": {"label": "Search", "placeholder": "Ara", "submitLabel": "Ara"}}},
+  {
+    "name": "wide-logo-long-name",
+    "props": {
+      "siteName": "Northwind Journal of Coastal Gardens",
+      "logo": {
+        "src": "/kit-fixtures/logo-wide.svg",
+        "alt": "",
+        "width": 230,
+        "height": 32
+      },
+      "items": [
+        {
+          "label": "Journal",
+          "href": "/"
+        },
+        {
+          "label": "About",
+          "href": "/about/"
+        },
+        {
+          "label": "Contact",
+          "href": "/contact/"
+        }
+      ]
+    }
+  }
 ]

package/components/hero/Hero.astro

@@ -13,6 +13,8 @@ import { coverHeight as heightOf, headingStyle as styleOf } from './hero'
 import { muted, mutedInverse } from '../_shared/muted'
 import { BLEED } from '../_shared/bleed'
 
+const SCREEN = 'sm:flex sm:flex-col sm:min-h-[calc(100vh-var(--header-h,0px))] sm:supports-[height:100svh]:min-h-[calc(100svh-var(--header-h,0px))] sm:[&>.container-page]:flex sm:[&>.container-page]:flex-1 sm:[&>.container-page]:flex-col sm:[&>.container-page>.grid]:flex-1'
+
 const hero = tv({
   slots: {
     grid: 'grid items-center gap-10',
@@ -60,6 +62,12 @@ const hero = tv({
     // padding: set at the grid's bottom and moved past the hero's own bottom padding (`spacing="lg"`: 4rem, 7rem from md),
     // not laid out there, so the next section stays where it was. Only an image that comes last can cross the bottom: one
     // that comes first (`media-first`) would be moved down over the text, so there overlap draws as edge.
+    // Centered only (split and cover ignore it): from md the copy's start edge sits at this share of the frame's width,
+    // its text at that edge; below md it is centred, as without it.
+    inset: { none: {}, '15': {}, '27': {}, '34': {}, '42': {} },
+    // Where the content sits in a hero taller than it (a screen-high one, a cover): where the layout puts it, or on the
+    // bottom edge, the section's bottom padding under it.
+    contentAt: { start: {}, end: { grid: 'content-end' } },
     imageBleed: { none: {}, edge: { media: 'rounded-none' }, overlap: { media: 'relative z-10 self-end translate-y-[calc(4rem+var(--hero-overlap,3rem))] rounded-none md:translate-y-[calc(7rem+var(--hero-overlap,3rem))]' } },
   },
   compoundVariants: [
@@ -69,8 +77,14 @@ const hero = tv({
     // After the centring rules, so the lead leaves them.
     { leadAlign: 'start', class: { lead: 'mx-0 max-w-none self-stretch text-start' } },
     { actionsAlign: 'start', class: { actions: 'justify-start self-stretch' } },
+    // After the centring rules, so the copy leaves them from md.
+    { layout: 'centered', inset: ['15', '27', '34', '42'], class: { copy: 'md:items-start md:text-start', lead: 'md:mx-0', points: 'md:justify-start', actions: 'md:justify-start' } },
+    { layout: 'centered', inset: '15', class: { copy: 'md:ms-[15%]' } },
+    { layout: 'centered', inset: '27', class: { copy: 'md:ms-[27%]' } },
+    { layout: 'centered', inset: '34', class: { copy: 'md:ms-[34%]' } },
+    { layout: 'centered', inset: '42', class: { copy: 'md:ms-[42%]' } },
   ],
-  defaultVariants: { layout: 'split', tone: 'default', align: 'center', leadAlign: 'inherit', actionsAlign: 'inherit', width: 'full', headingScale: 'default', headingSize: 'own', headingLines: 'flow', stackOrder: 'text-first', imageBleed: 'none' },
+  defaultVariants: { layout: 'split', tone: 'default', align: 'center', leadAlign: 'inherit', actionsAlign: 'inherit', width: 'full', headingScale: 'default', headingSize: 'own', headingLines: 'flow', stackOrder: 'text-first', inset: 'none', contentAt: 'start', imageBleed: 'none' },
 })
 
 interface Props {
@@ -106,17 +120,23 @@ interface Props {
   stackOrder?: 'text-first' | 'media-first' | undefined
   /** Split and centered: `edge` runs the image on to the window's edge on its side (both sides when centered); `overlap` also lets it cross the section's bottom edge by `--hero-overlap` (3rem), when the image comes last (with `media-first` it draws as `edge`). `none` (absent): as before. */
   imageBleed?: 'none' | 'edge' | 'overlap' | undefined
+  /** Centered only: from md the copy starts at this share of the frame's width (`15` … `42` %), its text at that edge. `none` (absent): as before. */
+  inset?: 'none' | '15' | '27' | '34' | '42' | undefined
+  /** `screen`: from sm the hero is at least the window's height less `--header-h` (a site that sets it; 0 without), on phones as before. A boxed cover (`width: content`) ignores it. `auto` (absent): as before. */
+  height?: 'auto' | 'screen' | undefined
+  /** `end`: the content sits on the hero's bottom edge, in a hero taller than it (`height: screen`, a cover). `start` (absent): where the layout puts it, as before. */
+  contentAt?: 'start' | 'end' | undefined
   /** The source section's measured style (`MeasuredStyle`): frame, padding, fill, background image, columns per width, gap. Absent, the site's tokens; present, it wins over tone and columns. */
   measured?: MeasuredStyle | undefined
 }
 
 
-const { heading, level = 1, eyebrow, lead, items = [], actions = [], image, layout = 'split', align, leadAlign, actionsAlign, width = 'full', tone, id: givenId, minHeight, headingScale, headingSize, headingLines, stackOrder, imageBleed, measured } = Astro.props
+const { heading, level = 1, eyebrow, lead, items = [], actions = [], image, layout = 'split', align, leadAlign, actionsAlign, width = 'full', tone, id: givenId, minHeight, headingScale, headingSize, headingLines, stackOrder, imageBleed, inset, height, contentAt, measured } = Astro.props
 // Every section has an id, so a theme or a design layer can address this one: the page's, or `hero`, `hero-2`, … in render order.
 const id = instanceId(Astro.locals, givenId, 'hero')
 // Overlap moves the image down past the section's bottom, so only an image that comes last may: first, it is edge.
 const bleedAs = imageBleed === 'overlap' && stackOrder === 'media-first' ? 'edge' : imageBleed
-const s = hero({ layout, align, leadAlign, actionsAlign, width, tone, headingScale, headingSize, headingLines, stackOrder, imageBleed: bleedAs })
+const s = hero({ layout, align, leadAlign, actionsAlign, width, tone, headingScale, headingSize, headingLines, stackOrder, inset, contentAt, imageBleed: bleedAs })
 const Heading = level === 1 ? 'h1' : 'h2'
 const headingId = `${id}-title`
 const cover = layout === 'cover' && image
@@ -127,6 +147,10 @@ const sectionMeasured = cover && measured ? { ...measured, bg: measured.bg ? { .
 const scrim = cover ? measuredFrame(measured).overlay : undefined
 // The window's edge for a bleeding image: its own side in split (the start side when it comes first), both when centered.
 const bleeds = !cover && image && imageBleed !== undefined && imageBleed !== 'none'
+// A screen-high hero from sm: the section is a column at least the window's height (less a header the site measures as
+// `--header-h`), its frame and grid stretched to fill it, so `contentAt` has the room to place the content in. 100vh
+// where the small viewport unit is unknown. On phones the hero is as tall as its content.
+const screen = height === 'screen' && !(cover && width === 'content') ? SCREEN : undefined
 const bleed = bleeds ? (layout === 'centered' ? `max-w-none md:w-auto ${BLEED.start} ${BLEED.end}` : BLEED[stackOrder === 'media-first' ? 'start' : 'end']) : undefined
 ---
 {cover && width === 'content'
@@ -151,7 +175,7 @@ const bleed = bleeds ? (layout === 'centered' ? `max-w-none md:w-auto ${BLEED.st
   )
   : cover
   ? (
-    <Section kit="hero" measured={sectionMeasured} tone="inverse" spacing="none" width="none" id={id} aria-labelledby={headingId} class="relative isolate overflow-hidden">
+    <Section kit="hero" measured={sectionMeasured} tone="inverse" spacing="none" width="none" id={id} aria-labelledby={headingId} class={screen ? `relative isolate overflow-hidden ${screen}` : 'relative isolate overflow-hidden'}>
       <KitImage image={image} priority sizes="100vw" class="absolute inset-0 -z-10 h-full w-full object-cover" />
       <div class:list={['absolute inset-0 -z-10', !scrim && 'bg-ink/60']} style={scrim ? `background: ${scrim}` : undefined} aria-hidden="true" />
       <div class:list={['container-page', measured?.padY === undefined && 'py-16 md:py-28']}>
@@ -168,7 +192,7 @@ const bleed = bleeds ? (layout === 'centered' ? `max-w-none md:w-auto ${BLEED.st
     </Section>
   )
   : (
-    <Section kit="hero" measured={sectionMeasured} tone={tone} spacing="lg" id={id} aria-labelledby={headingId} class={bleeds ? 'overflow-x-clip' : undefined}>
+    <Section kit="hero" measured={sectionMeasured} tone={tone} spacing="lg" id={id} aria-labelledby={headingId} class={[bleeds && 'overflow-x-clip', screen].filter(Boolean).join(' ') || undefined}>
       {/* Without an image a split has nothing beside the text: the text takes the whole row, not half of it. */}
       <div class={s.grid({ class: image ? undefined : 'md:grid-cols-1' })}>
         <div class={s.copy()}>

package/components/hero/fixtures.json

@@ -248,5 +248,122 @@
   {"name": "split-overlap", "props": {"heading": "Your site, moved and checked", "lead": "Every page, address and form carried over.", "imageBleed": "overlap", "tone": "muted", "image": {"src": "/kit-fixtures/photo-1.svg", "alt": "A desk by a window", "width": 1200, "height": 800}}},
   {"name": "centered-media-first-overlap", "props": {"layout": "centered", "heading": "Your site, moved and checked", "lead": "Every page, address and form carried over.", "stackOrder": "media-first", "imageBleed": "overlap", "tone": "muted", "image": {"src": "/kit-fixtures/photo-1.svg", "alt": "A desk by a window", "width": 1200, "height": 800}}},
   {"name": "split-media-first-overlap", "props": {"heading": "Your site, moved and checked", "lead": "Every page, address and form carried over.", "stackOrder": "media-first", "imageBleed": "overlap", "tone": "muted", "image": {"src": "/kit-fixtures/photo-1.svg", "alt": "A desk by a window", "width": 1200, "height": 800}}},
-  {"name": "heading-hooks", "theme": {"--font-heading": "var(--font-serif)", "--tracking-heading": "0.04em"}, "props": {"layout": "centered", "eyebrow": "A design direction", "heading": "Headings in a face of their own", "lead": "The heading face and track come from the theme; the lead keeps the body face."}}
+  {"name": "heading-hooks", "theme": {"--font-heading": "var(--font-serif)", "--tracking-heading": "0.04em"}, "props": {"layout": "centered", "eyebrow": "A design direction", "heading": "Headings in a face of their own", "lead": "The heading face and track come from the theme; the lead keeps the body face."}},
+  {
+    "name": "centered-inset-42",
+    "props": {
+      "heading": "Plan a calmer trip",
+      "lead": "Our guides pick fewer places and give each one more time.",
+      "layout": "centered",
+      "tone": "muted",
+      "level": 2,
+      "actions": [
+        {
+          "label": "Browse guides",
+          "href": "/category/guides/"
+        }
+      ],
+      "image": {
+        "src": "/kit-fixtures/photo-2.svg",
+        "alt": "",
+        "width": 1600,
+        "height": 700
+      },
+      "inset": "42"
+    }
+  },
+  {
+    "name": "centered-lead-start-inset-15",
+    "props": {
+      "heading": "About the studio",
+      "lead": "We are a small team of editors and photographers. This page tells you who we are, how we work and what we will never do with your data.",
+      "layout": "centered",
+      "leadAlign": "start",
+      "level": 2,
+      "inset": "15"
+    }
+  },
+  {
+    "name": "heading-lines-inset-27",
+    "props": {
+      "layout": "centered",
+      "tone": "accent",
+      "headingLines": "lines",
+      "eyebrow": "Northwind Journal",
+      "heading": "Slow travel.\nGood coffee.\nTwelve years on the road.",
+      "lead": "Essays, guides and photographs, now in one place.",
+      "actions": [
+        {
+          "label": "Start reading",
+          "href": "/journal/"
+        }
+      ],
+      "inset": "27"
+    }
+  },
+  {
+    "name": "centered-size-h2-inset-34",
+    "props": {
+      "heading": "Plan a calmer trip",
+      "lead": "Our guides pick fewer places and give each one more time.",
+      "layout": "centered",
+      "tone": "muted",
+      "level": 2,
+      "actions": [
+        {
+          "label": "Browse guides",
+          "href": "/category/guides/"
+        }
+      ],
+      "image": {
+        "src": "/kit-fixtures/photo-2.svg",
+        "alt": "",
+        "width": 1600,
+        "height": 700
+      },
+      "headingSize": "h2",
+      "inset": "34"
+    }
+  },
+  {
+    "name": "heading-lines-screen-end-inset-42",
+    "props": {
+      "layout": "centered",
+      "tone": "accent",
+      "headingLines": "lines",
+      "eyebrow": "Northwind Journal",
+      "heading": "Slow travel.\nGood coffee.\nTwelve years on the road.",
+      "lead": "Essays, guides and photographs, now in one place.",
+      "actions": [
+        {
+          "label": "Start reading",
+          "href": "/journal/"
+        }
+      ],
+      "height": "screen",
+      "contentAt": "end",
+      "inset": "42"
+    }
+  },
+  {
+    "name": "cover-content-at-end",
+    "props": {
+      "heading": "The long way round",
+      "lead": "A year of trains across Europe, one station at a time.",
+      "layout": "cover",
+      "actions": [
+        {
+          "label": "Read the series",
+          "href": "/series/long-way/"
+        }
+      ],
+      "image": {
+        "src": "/kit-fixtures/photo-3.svg",
+        "alt": "",
+        "width": 1600,
+        "height": 900
+      },
+      "contentAt": "end"
+    }
+  }
 ]

package/components/hero/meta.json

@@ -109,6 +109,33 @@
       ],
       "default": "none",
       "description": "Split and centered: edge runs the image on to the window's edge on its side (both sides when centered); overlap also lets it cross the section's bottom edge by --hero-overlap (3rem), over the next section's top padding, when the image comes last: with stackOrder media-first it draws as edge, so it never covers the text. A cover ignores it."
+    },
+    "inset": {
+      "options": [
+        "none",
+        "15",
+        "27",
+        "34",
+        "42"
+      ],
+      "default": "none",
+      "description": "Layout centered only (split and cover ignore it). From md (768px) up, the copy's start edge sits at this share of the frame's width and its text is set at that edge, not centred: a statement on an axis, the void before it part of the page. Below md the hero is centred as without it. none: as before."
+    },
+    "height": {
+      "options": [
+        "auto",
+        "screen"
+      ],
+      "default": "auto",
+      "description": "The hero's height. screen: from sm (640px) up, at least the window's height (100svh, 100vh where unknown) less --header-h, the header's height where the site sets it (0 without, so a static header above adds to it): the page opens on one full screen, the statement placed in it by contentAt. Below sm the hero is as tall as its content, as with auto: no empty screen on a phone. A boxed cover (width content) ignores it. auto: as before."
+    },
+    "contentAt": {
+      "options": [
+        "start",
+        "end"
+      ],
+      "default": "start",
+      "description": "Where the content sits in a hero taller than it (height screen, or a cover with its own height). end: on the bottom edge, the section's bottom padding under it (a title on the image's lower edge, a statement after a void). start: where the layout puts it, as before."
     }
   },
   "props": {

package/components/prose/Prose.astro

@@ -13,8 +13,11 @@ const prose = tv({
   base: 'prose prose-site max-w-none',
   variants: {
     size: { base: 'prose-base', lg: 'prose-lg' },
+    // From md, the body's start edge sits at this share of its container's width (the axis an editorial layout sets
+    // its text on); it runs to the container's end. Below md it is the full column, as without it.
+    inset: { none: '', '15': 'md:ms-[15%]', '27': 'md:ms-[27%]', '34': 'md:ms-[34%]', '42': 'md:ms-[42%]' },
   },
-  defaultVariants: { size: 'lg' },
+  defaultVariants: { size: 'lg', inset: 'none' },
 })
 
 interface Props {
@@ -26,9 +29,11 @@ interface Props {
   searchable?: boolean | undefined
   class?: string | undefined
   size?: 'base' | 'lg' | undefined
+  /** From md, the body starts at this share of its container's width (`15` … `42` %). `none` (absent): as before. */
+  inset?: 'none' | '15' | '27' | '34' | '42' | undefined
 }
 
-const { html, markdown, searchable = true, class: className, size } = Astro.props
+const { html, markdown, searchable = true, class: className, size, inset } = Astro.props
 const body = html ?? await renderMarkdown(markdown)
 ---
-{body && <div class={prose({ size, class: className })} data-pagefind-body={searchable ? '' : undefined} set:html={body} />}
+{body && <div class={prose({ size, inset, class: className })} data-pagefind-body={searchable ? '' : undefined} set:html={body} />}

package/components/prose/fixtures.json

@@ -1,5 +1,9 @@
 [
   { "name": "lg", "frame": "narrow", "props": { "html": "<h2 class=\"wp-block-heading\">Keeping what works</h2><p>A careful migration keeps <strong>addresses</strong>, <a href=\"/about/\">formatting</a> and rankings.</p><ul class=\"wp-block-list\"><li>Permalinks stay put.</li><li>Archives survive.</li></ul><blockquote class=\"wp-block-quote\"><p>The fastest request is the one the server never has to think about.</p><cite>Every performance engineer</cite></blockquote><div class=\"wp-block-buttons is-layout-flex\"><div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"/contact/\">Get in touch</a></div></div>" } },
   { "name": "base", "frame": "narrow", "props": { "size": "base", "searchable": false, "html": "<p class=\"has-drop-cap\">Moving a WordPress site to a static stack is mostly about keeping what already works.</p><figure class=\"wp-block-table is-style-stripes\"><table><thead><tr><th>Metric</th><th>Before</th><th>After</th></tr></thead><tbody><tr><td>Requests</td><td>84</td><td>9</td></tr><tr><td>LCP</td><td>3.1 s</td><td>0.8 s</td></tr></tbody></table></figure>" } },
-  { "name": "markdown", "frame": "narrow", "props": { "markdown": "## From a page section\n\nA section's text is **markdown** in the page model, with [a link](/about/) and a list:\n\n- Written once\n- Rendered at build time", "size": "base" } }
+  { "name": "markdown", "frame": "narrow", "props": { "markdown": "## From a page section\n\nA section's text is **markdown** in the page model, with [a link](/about/) and a list:\n\n- Written once\n- Rendered at build time", "size": "base" } },
+  { "name": "inset-15", "frame": "page", "props": { "html": "<h2 class=\"wp-block-heading\">Keeping what works</h2><p>A careful migration keeps <strong>addresses</strong>, <a href=\"/about/\">formatting</a> and rankings.</p><ul class=\"wp-block-list\"><li>Permalinks stay put.</li><li>Archives survive.</li></ul><blockquote class=\"wp-block-quote\"><p>The fastest request is the one the server never has to think about.</p><cite>Every performance engineer</cite></blockquote><div class=\"wp-block-buttons is-layout-flex\"><div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"/contact/\">Get in touch</a></div></div>", "inset": "15" } },
+  { "name": "inset-27", "frame": "page", "props": { "size": "base", "searchable": false, "html": "<p class=\"has-drop-cap\">Moving a WordPress site to a static stack is mostly about keeping what already works.</p><figure class=\"wp-block-table is-style-stripes\"><table><thead><tr><th>Metric</th><th>Before</th><th>After</th></tr></thead><tbody><tr><td>Requests</td><td>84</td><td>9</td></tr><tr><td>LCP</td><td>3.1 s</td><td>0.8 s</td></tr></tbody></table></figure>", "inset": "27" } },
+  { "name": "inset-34", "frame": "page", "props": { "markdown": "## From a page section\n\nA section's text is **markdown** in the page model, with [a link](/about/) and a list:\n\n- Written once\n- Rendered at build time", "size": "base", "inset": "34" } },
+  { "name": "inset-42", "frame": "page", "props": { "html": "<h2 class=\"wp-block-heading\">Keeping what works</h2><p>A careful migration keeps <strong>addresses</strong>, <a href=\"/about/\">formatting</a> and rankings.</p><ul class=\"wp-block-list\"><li>Permalinks stay put.</li><li>Archives survive.</li></ul><blockquote class=\"wp-block-quote\"><p>The fastest request is the one the server never has to think about.</p><cite>Every performance engineer</cite></blockquote><div class=\"wp-block-buttons is-layout-flex\"><div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"/contact/\">Get in touch</a></div></div>", "inset": "42" } }
 ]

package/components/prose/meta.json

@@ -13,6 +13,17 @@
       ],
       "default": "lg",
       "description": "Type scale of the body."
+    },
+    "inset": {
+      "options": [
+        "none",
+        "15",
+        "27",
+        "34",
+        "42"
+      ],
+      "default": "none",
+      "description": "From md (768px) up, the body's start edge sits at this share of its container's width and the body runs to the container's end: the axis an editorial page sets its text on (an intro in a narrow column, a column set off the page's start). Below md it is the full column. none: as before. The share is of the container the body sits in (in the starter's pages, the reading column)."
     }
   },
   "props": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.44.1",
+  "version": "0.45.0",
   "license": "MIT",
   "description": "Copy-in Astro components for Contentrain sites (shadcn model): typed props, tailwind-variants, zero JavaScript by default — with a machine-readable catalog",
   "type": "module",