@contentrain/astro-kit 0.41.0 → 0.42.0

package/catalog.json

@@ -785,6 +785,14 @@
           "default": "start",
           "description": "Text alignment inside cards and of the header."
         },
+        "layout": {
+          "options": [
+            "grid",
+            "rows"
+          ],
+          "default": "grid",
+          "description": "Cards in a grid, or one item per row: title, text and link on one axis, a hairline between rows, no card box (columns and style do not apply)."
+        },
         "tone": {
           "options": [
             "default",
@@ -859,6 +867,12 @@
           },
           "description": "The cards. image is an ImageInput ({ src, alt, width?, height? })."
         },
+        "index": {
+          "type": "boolean",
+          "default": false,
+          "content": false,
+          "description": "With layout rows: a numbered list, each row led by its number (01, 02, …) in the muted role."
+        },
         "headingLevel": {
           "type": "integer",
           "min": 2,
@@ -3652,7 +3666,9 @@
       "shared": [
         "Button.astro",
         "KitImage.astro",
+        "Lines.astro",
         "Section.astro",
+        "bleed.ts",
         "instance-id.ts",
         "measured.ts",
         "muted.ts",
@@ -3727,6 +3743,31 @@
           ],
           "default": "own",
           "description": "The level whose site size the heading takes when it is not the level it is written at: h1 on an h2 heading keeps a source's second h1 at the h1 size under a page that keeps one h1. own: the heading's own level under headingScale theme, nothing otherwise. Any other value than own sets the size by itself."
+        },
+        "headingLines": {
+          "options": [
+            "flow",
+            "lines"
+          ],
+          "default": "flow",
+          "description": "flow: the heading is one run of text. lines: each line the author broke it into (a line break, \\n, in the heading) is a block of its own, data-kit-line=\"1\", \"2\", …, so a theme or a design layer can give a line its own ink, indent or size. Still one heading, read as one sentence."
+        },
+        "stackOrder": {
+          "options": [
+            "text-first",
+            "media-first"
+          ],
+          "default": "text-first",
+          "description": "Split and centered: the image before the text, on phones and on the start side (split), or above the heading (centered). A cover ignores it."
+        },
+        "imageBleed": {
+          "options": [
+            "none",
+            "edge",
+            "overlap"
+          ],
+          "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."
         }
       },
       "props": {
@@ -6256,6 +6297,7 @@
         "Button.astro",
         "KitImage.astro",
         "Section.astro",
+        "bleed.ts",
         "instance-id.ts",
         "measured.ts",
         "muted.ts",
@@ -6292,10 +6334,13 @@
           "options": [
             "none",
             "rounded",
-            "circle"
+            "circle",
+            "arch",
+            "chamfer",
+            "blob"
           ],
           "default": "rounded",
-          "description": "The image's corners: square, the theme's rounding, or a circle."
+          "description": "The image's outline: square, the theme's rounding, a circle, or a fixed mask: an arch over the image, a cut corner (chamfer), a soft blob."
         },
         "imageBleed": {
           "options": [

package/components/_shared/Lines.astro

@@ -0,0 +1,12 @@
+---
+// Text the author broke into lines (`\n`), one block per line, each marked `data-kit-line="<n>"` so a theme or a
+// design layer can give a line its own ink, indent or size. The lines stay one text: a heading made of them is
+// still one heading, read as one sentence (a space between the blocks keeps the words apart when it is read out).
+// Without a line break the text is printed as it is.
+interface Props {
+  text: string
+}
+
+const lines = Astro.props.text.split('\n').map(line => line.trim()).filter(Boolean)
+---
+{lines.length > 1 ? lines.map((line, i) => <>{i > 0 && ' '}<span class="block" data-kit-line={i + 1}>{line}</span></>) : Astro.props.text}

package/components/_shared/bleed.ts

@@ -0,0 +1,8 @@
+// The viewport's edge, from the content's edge: what the page frame leaves of the window, halved, plus the frame's own
+// gutter (`container-page` caps its width with the gutter inside it). A section whose image runs on to the window's
+// edge (Split, Hero `imageBleed`) pulls it out by this much on its side, on wide screens. Literal class names, so the
+// stylesheet builder sees them.
+export const BLEED = {
+  end: 'md:-me-[calc((100vw-min(var(--container-page)+2*var(--container-inset,0px),100vw))/2+var(--spacing-gutter,2rem))]',
+  start: 'md:-ms-[calc((100vw-min(var(--container-page)+2*var(--container-inset,0px),100vw))/2+var(--spacing-gutter,2rem))]',
+} as const

package/components/card-grid/CardGrid.astro

@@ -35,6 +35,29 @@ const grid = tv({
   defaultVariants: { columns: '3', style: 'plain', align: 'start' },
 })
 
+// `layout: 'rows'`: one item per row, its title, text and link on one axis (an image sits at the row's top, out of the
+// baseline: a head led by an icon too, else the icon's foot would be the baseline and push the text down by its
+// height), a hairline between rows and no card box.
+// With `index`, a numbered list whose numbers (01, 02, …) are drawn in the muted role, tabular; the list itself
+// carries the order for screen readers, so the drawn number is hidden from them.
+const rows = tv({
+  slots: {
+    list: 'flex flex-col divide-y divide-line border-y border-line',
+    row: 'group relative grid gap-x-8 gap-y-2 py-6 md:items-baseline',
+    number: `text-sm tabular-nums ${muted}`,
+    head: 'flex flex-col gap-2',
+    end: 'flex flex-col gap-3 md:items-end',
+    media: 'overflow-hidden rounded-[var(--radius-image,var(--radius-card))] md:w-48',
+    title: 'text-lg leading-snug [font-weight:var(--font-weight-heading,600)] text-balance',
+    text: muted,
+    link: 'font-medium text-accent-text underline-offset-4 hover:underline',
+  },
+  variants: {
+    index: { true: { row: 'md:grid-cols-[3rem_minmax(0,1fr)_minmax(0,2fr)_auto]' }, false: { row: 'md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto]' } },
+  },
+  defaultVariants: { index: false },
+})
+
 interface Item {
   title: string
   text?: string | undefined
@@ -56,6 +79,10 @@ interface Props {
   /** Heading level of the section title; card titles are one level below, or at this level when there is no title. */
   headingLevel?: 2 | 3 | undefined
   columns?: '2' | '3' | '4' | undefined
+  /** `rows`: one item per row (title, text and link on one axis, a hairline between rows, no card box); `columns`, `style` and the measured columns do not apply. `grid` (absent): cards, as before. */
+  layout?: 'grid' | 'rows' | undefined
+  /** With `layout: 'rows'`: a numbered list, each row led by its number (01, 02, …) in the muted role. */
+  index?: boolean | undefined
   style?: 'plain' | 'bordered' | 'elevated' | undefined
   align?: 'start' | 'center' | undefined
   tone?: Tone | undefined
@@ -65,7 +92,7 @@ interface Props {
   id?: string | undefined
 }
 
-const { title, intro, items, headingLevel = 2, columns, style, align, tone, measured, id: givenId } = Astro.props
+const { title, intro, items, headingLevel = 2, columns, style, align, tone, measured, id: givenId, layout, index = false } = Astro.props
 // Every section has an id, so a theme or a design layer can address this one: the page's, or `card-grid`, `card-grid-2`, … in render order.
 const id = instanceId(Astro.locals, givenId, 'card-grid')
 const { list, card, media, title: cardTitle, text } = grid({ columns, style, align })
@@ -73,6 +100,9 @@ const Heading = `h${headingLevel}` as 'h2' | 'h3'
 // One level under the section title, or the title's level when there is none.
 const CardHeading = `h${title ? headingLevel + 1 : headingLevel}` as 'h2' | 'h3' | 'h4'
 const headingId = title ? `${id}-title` : undefined
+const r = rows({ index })
+const List = index ? 'ol' : 'ul'
+const number = (i: number) => String(i + 1).padStart(2, '0')
 ---
 <Section kit="card-grid" measured={measured} tone={tone} id={id} aria-labelledby={headingId}>
   {(title || intro) && (
@@ -81,20 +111,46 @@ const headingId = title ? `${id}-title` : undefined
       {intro && <p class:list={['text-lg', muted]}>{intro}</p>}
     </header>
   )}
-  <ul class={list({ class: measuredGrid(measured) })}>
-    {items.map(item => (
-      <li class={card()}>
-        {imageOf(item.image, item.imageAlt) && <div class={media()}><KitImage image={imageOf(item.image, item.imageAlt)!} sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw" class="aspect-[3/2] w-full object-cover transition duration-300 group-hover:scale-[1.02]" /></div>}
-        {item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-10 w-10 object-contain" />}
-        {item.eyebrow && <p class="text-sm font-medium text-accent-text">{item.eyebrow}</p>}
-        <CardHeading class={cardTitle()}>
-          {item.href && !item.linkLabel
-            ? <a href={safeHref(item.href)} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{item.title}</a>
-            : item.title}
-        </CardHeading>
-        {item.text && <p class={text()} data-kit-text>{item.text}</p>}
-        {item.href && item.linkLabel && <a href={safeHref(item.href)} class="font-medium text-accent-text underline-offset-4 hover:underline">{item.linkLabel}</a>}
-      </li>
-    ))}
-  </ul>
+  {layout === 'rows' ? (
+    <List class={r.list()} role="list">
+      {items.map((item, i) => (
+        <li class={r.row()}>
+          {index && <span class={r.number()} aria-hidden="true">{number(i)}</span>}
+          <div class={r.head({ class: item.icon ? 'md:self-start' : undefined })}>
+            {item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-8 w-8 object-contain" />}
+            {item.eyebrow && <p class="text-sm font-medium text-accent-text">{item.eyebrow}</p>}
+            <CardHeading class={r.title()}>
+              {item.href && !item.linkLabel
+                ? <a href={safeHref(item.href)} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{item.title}</a>
+                : item.title}
+            </CardHeading>
+          </div>
+          {item.text ? <p class={r.text()} data-kit-text>{item.text}</p> : <span aria-hidden="true" />}
+          {(imageOf(item.image, item.imageAlt) || (item.href && item.linkLabel)) && (
+            <div class={r.end({ class: imageOf(item.image, item.imageAlt) ? 'md:self-start' : undefined })}>
+              {imageOf(item.image, item.imageAlt) && <div class={r.media()}><KitImage image={imageOf(item.image, item.imageAlt)!} sizes="(min-width: 768px) 12rem, 100vw" class="aspect-[3/2] w-full object-cover" /></div>}
+              {item.href && item.linkLabel && <a href={safeHref(item.href)} class={r.link()}>{item.linkLabel}</a>}
+            </div>
+          )}
+        </li>
+      ))}
+    </List>
+  ) : (
+    <ul class={list({ class: measuredGrid(measured) })}>
+      {items.map(item => (
+        <li class={card()}>
+          {imageOf(item.image, item.imageAlt) && <div class={media()}><KitImage image={imageOf(item.image, item.imageAlt)!} sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw" class="aspect-[3/2] w-full object-cover transition duration-300 group-hover:scale-[1.02]" /></div>}
+          {item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-10 w-10 object-contain" />}
+          {item.eyebrow && <p class="text-sm font-medium text-accent-text">{item.eyebrow}</p>}
+          <CardHeading class={cardTitle()}>
+            {item.href && !item.linkLabel
+              ? <a href={safeHref(item.href)} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{item.title}</a>
+              : item.title}
+          </CardHeading>
+          {item.text && <p class={text()} data-kit-text>{item.text}</p>}
+          {item.href && item.linkLabel && <a href={safeHref(item.href)} class="font-medium text-accent-text underline-offset-4 hover:underline">{item.linkLabel}</a>}
+        </li>
+      ))}
+    </ul>
+  )}
 </Section>

package/components/card-grid/fixtures.json

@@ -5,5 +5,8 @@
   { "name": "accent", "props": { "tone": "accent", "columns": "3", "items": [{ "title": "Fast", "text": "Static HTML, one stylesheet." }, { "title": "Editable", "text": "Content in Contentrain Studio." }, { "title": "Kept", "text": "Every address survives." }] } },
   {"name": "measured-columns", "props": {"title": "Services", "measured": {"containerPx": 1140, "padY": 80, "columns": {"390": 1, "768": 2, "1280": 4}, "gap": 30, "radius": 4, "bg": {"color": "#f4f1ea"}}, "items": [{"title": "Audits", "text": "Where a site loses readers."}, {"title": "Builds", "text": "Static and fast."}, {"title": "Hosting", "text": "Managed for you."}, {"title": "Care", "text": "Kept up to date."}]}},
   {"name": "icon-boxes", "props": {"columns": "3", "align": "center", "items": [{"title": "Design", "text": "Layouts built around your products.", "icon": "/kit-fixtures/icon-1.svg"}, {"title": "Build", "text": "Fast pages that stay fast.", "icon": "/kit-fixtures/icon-1.svg"}, {"title": "Grow", "text": "Monthly reports you can read in five minutes.", "icon": "/kit-fixtures/icon-1.svg"}]}},
-  {"name": "link-labels", "props": {"columns": "4", "align": "center", "items": [{"title": "Kasko", "href": "/urunlerimiz/kasko/", "linkLabel": "Teklif Al"}, {"title": "Trafik Sigortası", "href": "/urunlerimiz/trafik-sigortasi/", "linkLabel": "Teklif Al"}, {"title": "Konut Sigortası", "href": "/urunlerimiz/konut-sigortasi/", "linkLabel": "Teklif Al"}, {"title": "Tamamlayıcı Sağlık"}]}}
+  {"name": "link-labels", "props": {"columns": "4", "align": "center", "items": [{"title": "Kasko", "href": "/urunlerimiz/kasko/", "linkLabel": "Teklif Al"}, {"title": "Trafik Sigortası", "href": "/urunlerimiz/trafik-sigortasi/", "linkLabel": "Teklif Al"}, {"title": "Konut Sigortası", "href": "/urunlerimiz/konut-sigortasi/", "linkLabel": "Teklif Al"}, {"title": "Tamamlayıcı Sağlık"}]}},
+  {"name": "rows-index", "props": {"layout": "rows", "index": true, "title": "How it works", "intro": "Three steps, in this order.", "items": [{"title": "Discovery", "text": "We read every page of the site you have, and write down what it holds.", "href": "/how/discovery/"}, {"title": "An offer", "text": "One price for the whole move, with what it includes and what it leaves out.", "href": "/how/offer/"}, {"title": "The move", "text": "Content, addresses and forms carried over, each one checked against the original.", "href": "/how/move/"}]}},
+  {"name": "rows-links-muted", "props": {"layout": "rows", "tone": "muted", "title": "What we do", "items": [{"eyebrow": "Studio", "title": "Design systems", "text": "Tokens, components and documentation your team keeps using.", "href": "/services/design/", "linkLabel": "Read more", "image": {"src": "/kit-fixtures/photo-1.svg", "alt": "", "width": 1200, "height": 800}}, {"eyebrow": "Studio", "title": "Migrations", "text": "WordPress to Astro without losing an address or a ranking.", "href": "/services/migrations/", "linkLabel": "Read more", "image": {"src": "/kit-fixtures/photo-2.svg", "alt": "", "width": 1200, "height": 800}}, {"eyebrow": "Studio", "title": "Performance", "href": "/services/performance/", "linkLabel": "Read more"}]}},
+  {"name": "rows-icons", "props": {"layout": "rows", "title": "What the move keeps", "items": [{"icon": "/kit-fixtures/icon-1.svg", "title": "Addresses", "text": "Every old address answers, or sends the visitor to its new one.", "href": "/keeps/addresses/"}, {"icon": "/kit-fixtures/icon-1.svg", "eyebrow": "Forms", "title": "Contact forms", "text": "Each form posts where it did, with the same fields.", "href": "/keeps/forms/", "linkLabel": "How"}, {"title": "Rankings", "text": "Titles, descriptions and structured data carried over as they were."}]}}
 ]

package/components/card-grid/meta.json

@@ -41,6 +41,14 @@
       "default": "start",
       "description": "Text alignment inside cards and of the header."
     },
+    "layout": {
+      "options": [
+        "grid",
+        "rows"
+      ],
+      "default": "grid",
+      "description": "Cards in a grid, or one item per row: title, text and link on one axis, a hairline between rows, no card box (columns and style do not apply)."
+    },
     "tone": {
       "options": [
         "default",
@@ -115,6 +123,12 @@
       },
       "description": "The cards. image is an ImageInput ({ src, alt, width?, height? })."
     },
+    "index": {
+      "type": "boolean",
+      "default": false,
+      "content": false,
+      "description": "With layout rows: a numbered list, each row led by its number (01, 02, …) in the muted role."
+    },
     "headingLevel": {
       "type": "integer",
       "min": 2,

package/components/hero/Hero.astro

@@ -5,11 +5,13 @@ import { tv } from 'tailwind-variants'
 import Button from '../_shared/Button.astro'
 import KitImage from '../_shared/KitImage.astro'
 import Section from '../_shared/Section.astro'
+import Lines from '../_shared/Lines.astro'
 import { instanceId } from '../_shared/instance-id'
 import type { ActionInput, ImageInput, MeasuredStyle } from '../_shared/types'
 import { measuredFrame } from '../_shared/measured'
 import { coverHeight as heightOf, headingStyle as styleOf } from './hero'
 import { muted, mutedInverse } from '../_shared/muted'
+import { BLEED } from '../_shared/bleed'
 
 const hero = tv({
   slots: {
@@ -47,6 +49,18 @@ const hero = tv({
     headingScale: { default: {}, theme: {} },
     // The level whose site size the heading takes when it is not the level it is written at (set inline, see ./hero).
     headingSize: { own: {}, h1: {}, h2: {} },
+    // The heading as the author broke it: `lines` prints each `\n`-separated line as its own block (`data-kit-line`),
+    // `flow` (the default) as one run of text.
+    headingLines: { flow: {}, lines: {} },
+    // Split and centered (a cover ignores both): the image before the text, on phones and on the start side (split),
+    // or above the heading (centered).
+    stackOrder: { 'text-first': {}, 'media-first': { media: 'order-first' } },
+    // edge: the image runs on to the window's edge on its side (wide screens), or across the whole width when centered.
+    // overlap: it also crosses the section's bottom edge by `--hero-overlap` (3rem), drawn over the next section's top
+    // 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.
+    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: [
     // After the layout's own heights, so a boxed cover keeps WordPress's 430px default.
@@ -56,7 +70,7 @@ const hero = tv({
     { leadAlign: 'start', class: { lead: 'mx-0 max-w-none self-stretch text-start' } },
     { actionsAlign: 'start', class: { actions: 'justify-start self-stretch' } },
   ],
-  defaultVariants: { layout: 'split', tone: 'default', align: 'center', leadAlign: 'inherit', actionsAlign: 'inherit', width: 'full', headingScale: 'default', headingSize: 'own' },
+  defaultVariants: { layout: 'split', tone: 'default', align: 'center', leadAlign: 'inherit', actionsAlign: 'inherit', width: 'full', headingScale: 'default', headingSize: 'own', headingLines: 'flow', stackOrder: 'text-first', imageBleed: 'none' },
 })
 
 interface Props {
@@ -86,15 +100,23 @@ interface Props {
   headingScale?: 'default' | 'theme' | undefined
   /** The level whose site size the heading takes, when it is not the level it is written at (`h1` size on an `h2`: a page keeps one `h1`). `own` (absent): the heading's own level under `theme`, as before. */
   headingSize?: 'own' | 'h1' | 'h2' | undefined
+  /** `lines`: each line of the heading (split at `\n`) is a block of its own, `data-kit-line="<n>"`, for a theme to set per line. `flow` (absent): one run of text, as before. */
+  headingLines?: 'flow' | 'lines' | undefined
+  /** Split and centered: `media-first` puts the image before the text (phones and the start side in split, above the heading in centered). `text-first` (absent): as before. */
+  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
   /** 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, 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, 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')
-const s = hero({ layout, align, leadAlign, actionsAlign, width, tone, headingScale, headingSize })
+// 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 Heading = level === 1 ? 'h1' : 'h2'
 const headingId = `${id}-title`
 const cover = layout === 'cover' && image
@@ -103,6 +125,9 @@ const headingStyle = styleOf(headingScale, level, headingSize)
 // A cover draws its own image: the measured background image is that image, and the measured overlay is its scrim.
 const sectionMeasured = cover && measured ? { ...measured, bg: measured.bg ? { ...measured.bg, image: undefined, overlay: undefined } : undefined } : measured
 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'
+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'
   ? (
@@ -114,7 +139,7 @@ const scrim = cover ? measuredFrame(measured).overlay : undefined
           <div class={s.grid()} style={coverHeight ? `min-height: ${coverHeight}` : undefined}>
             <div class={s.copy()}>
               {eyebrow && <p class={s.eyebrow()}>{eyebrow}</p>}
-              <Heading id={headingId} class={s.heading()} style={headingStyle}>{heading}</Heading>
+              <Heading id={headingId} class={s.heading()} style={headingStyle}>{headingLines === 'lines' ? <Lines text={heading} /> : heading}</Heading>
               {lead && <p class={s.lead()} data-kit-text>{lead}</p>}
               {items.length > 0 && <ul class={s.points()}>{items.map(item => <li class={s.point()}>{item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-6 w-6 shrink-0 object-contain" />}<span>{item.title}</span></li>)}</ul>}
               {actions.length > 0 && <div class={s.actions()}>{actions.map(action => <Button action={action} size="lg" />)}</div>}
@@ -133,7 +158,7 @@ const scrim = cover ? measuredFrame(measured).overlay : undefined
         <div class={s.grid()} style={coverHeight ? `min-height: ${coverHeight}` : undefined}>
           <div class={s.copy()}>
             {eyebrow && <p class={s.eyebrow()}>{eyebrow}</p>}
-            <Heading id={headingId} class={s.heading()} style={headingStyle}>{heading}</Heading>
+            <Heading id={headingId} class={s.heading()} style={headingStyle}>{headingLines === 'lines' ? <Lines text={heading} /> : heading}</Heading>
             {lead && <p class={s.lead()} data-kit-text>{lead}</p>}
               {items.length > 0 && <ul class={s.points()}>{items.map(item => <li class={s.point()}>{item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-6 w-6 shrink-0 object-contain" />}<span>{item.title}</span></li>)}</ul>}
             {actions.length > 0 && <div class={s.actions()}>{actions.map(action => <Button action={action} size="lg" />)}</div>}
@@ -143,18 +168,18 @@ const scrim = cover ? measuredFrame(measured).overlay : undefined
     </Section>
   )
   : (
-    <Section kit="hero" measured={sectionMeasured} tone={tone} spacing="lg" id={id} aria-labelledby={headingId}>
+    <Section kit="hero" measured={sectionMeasured} tone={tone} spacing="lg" id={id} aria-labelledby={headingId} class={bleeds ? 'overflow-x-clip' : 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()}>
           {eyebrow && <p class={s.eyebrow()}>{eyebrow}</p>}
-          <Heading id={headingId} class={s.heading()} style={headingStyle}>{heading}</Heading>
+          <Heading id={headingId} class={s.heading()} style={headingStyle}>{headingLines === 'lines' ? <Lines text={heading} /> : heading}</Heading>
           {lead && <p class={s.lead()} data-kit-text>{lead}</p>}
               {items.length > 0 && <ul class={s.points()}>{items.map(item => <li class={s.point()}>{item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-6 w-6 shrink-0 object-contain" />}<span>{item.title}</span></li>)}</ul>}
           {actions.length > 0 && <div class={s.actions()}>{actions.map(action => <Button action={action} size="lg" />)}</div>}
         </div>
         {image && (
-          <div class={s.media()}>
+          <div class:list={[s.media(), bleed]}>
             <KitImage image={image} priority sizes={layout === 'split' ? '(min-width: 768px) 50vw, 100vw' : '(min-width: 1024px) 56rem, 100vw'} class="h-auto w-full object-cover" />
           </div>
         )}

package/components/hero/fixtures.json

@@ -241,5 +241,11 @@
     }
   },
   {"name": "cover-measured-overlay", "props": {"heading": "Fresh eggs, every morning", "lead": "A family farm since 1962.", "layout": "cover", "image": {"src": "/kit-fixtures/photo-4.svg", "alt": "", "width": 1600, "height": 900}, "actions": [{"label": "Visit us", "href": "/visit/"}], "measured": {"padY": 140, "minHeight": 560, "tone": "dark", "bg": {"image": "/kit-fixtures/photo-4.svg", "overlay": "rgba(20, 40, 10, 0.45)"}}}},
-  {"name": "points", "props": {"heading": "Private Sigorta'ya Hoşgeldiniz!", "items": [{"icon": "/kit-fixtures/logo.svg", "title": "Hızlı, Kolay & Sorunsuz"}, {"title": "En Uygun Fiyatlar"}], "actions": [{"label": "Ürünlerimiz", "href": "/urunlerimiz/"}], "image": {"src": "/kit-fixtures/photo-1.svg", "alt": "", "width": 1200, "height": 800}}}
+  {"name": "points", "props": {"heading": "Private Sigorta'ya Hoşgeldiniz!", "items": [{"icon": "/kit-fixtures/logo.svg", "title": "Hızlı, Kolay & Sorunsuz"}, {"title": "En Uygun Fiyatlar"}], "actions": [{"label": "Ürünlerimiz", "href": "/urunlerimiz/"}], "image": {"src": "/kit-fixtures/photo-1.svg", "alt": "", "width": 1200, "height": 800}}},
+  {"name": "heading-lines", "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/"}]}},
+  {"name": "split-media-first", "props": {"heading": "Your site, moved and checked", "lead": "Every page, address and form carried over.", "stackOrder": "media-first", "image": {"src": "/kit-fixtures/photo-1.svg", "alt": "A desk by a window", "width": 1200, "height": 800}, "actions": [{"label": "Start", "href": "/start/"}]}},
+  {"name": "centered-media-first-edge", "props": {"layout": "centered", "heading": "Your site, moved and checked", "lead": "Every page, address and form carried over.", "stackOrder": "media-first", "imageBleed": "edge", "image": {"src": "/kit-fixtures/photo-1.svg", "alt": "A desk by a window", "width": 1200, "height": 800}}},
+  {"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}}}
 ]

package/components/hero/meta.json

@@ -7,7 +7,9 @@
   "shared": [
     "Button.astro",
     "KitImage.astro",
+    "Lines.astro",
     "Section.astro",
+    "bleed.ts",
     "instance-id.ts",
     "measured.ts",
     "muted.ts",
@@ -82,6 +84,31 @@
       ],
       "default": "own",
       "description": "The level whose site size the heading takes when it is not the level it is written at: h1 on an h2 heading keeps a source's second h1 at the h1 size under a page that keeps one h1. own: the heading's own level under headingScale theme, nothing otherwise. Any other value than own sets the size by itself."
+    },
+    "headingLines": {
+      "options": [
+        "flow",
+        "lines"
+      ],
+      "default": "flow",
+      "description": "flow: the heading is one run of text. lines: each line the author broke it into (a line break, \\n, in the heading) is a block of its own, data-kit-line=\"1\", \"2\", …, so a theme or a design layer can give a line its own ink, indent or size. Still one heading, read as one sentence."
+    },
+    "stackOrder": {
+      "options": [
+        "text-first",
+        "media-first"
+      ],
+      "default": "text-first",
+      "description": "Split and centered: the image before the text, on phones and on the start side (split), or above the heading (centered). A cover ignores it."
+    },
+    "imageBleed": {
+      "options": [
+        "none",
+        "edge",
+        "overlap"
+      ],
+      "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."
     }
   },
   "props": {

package/components/split/Split.astro

@@ -12,6 +12,7 @@ import Section from '../_shared/Section.astro'
 import { instanceId } from '../_shared/instance-id'
 import type { ActionInput, ImageInput, MeasuredStyle } from '../_shared/types'
 import { muted } from '../_shared/muted'
+import { BLEED } from '../_shared/bleed'
 
 const split = tv({
   slots: {
@@ -35,6 +36,10 @@ const split = tv({
       none: { media: 'rounded-none' },
       rounded: { media: 'rounded-[var(--radius-image,var(--radius-card))]' },
       circle: { media: 'mx-auto aspect-square w-full max-w-lg rounded-full', image: 'h-full' },
+      // A fixed set of masks (never a value from content): an arch over the image, a cut corner, a soft blob.
+      arch: { media: 'rounded-t-full', image: 'h-full' },
+      chamfer: { media: '[clip-path:polygon(0_0,82%_0,100%_18%,100%_100%,0_100%)]' },
+      blob: { media: 'rounded-[38%_62%_55%_45%/48%_42%_58%_52%]' },
     },
     // edge: the image runs on to the viewport's edge on its side (wide screens).
     imageBleed: { none: {}, edge: { media: 'rounded-none' } },
@@ -55,11 +60,6 @@ const COLUMNS = {
   text: { '1:1': 'md:grid-cols-2', '5:7': 'md:grid-cols-[5fr_7fr]', '7:5': 'md:grid-cols-[7fr_5fr]' },
   image: { '1:1': 'md:grid-cols-2', '5:7': 'md:grid-cols-[7fr_5fr]', '7:5': 'md:grid-cols-[5fr_7fr]' },
 } as const
-// The viewport's edge, from the content's edge: what is left of the page's width, halved.
-const BLEED = {
-  end: 'md:-me-[calc((100vw-min(var(--container-page),100vw-2*var(--spacing-gutter,2rem)))/2)]',
-  start: 'md:-ms-[calc((100vw-min(var(--container-page),100vw-2*var(--spacing-gutter,2rem)))/2)]',
-} as const
 
 interface Feature {
   title: string
@@ -87,7 +87,8 @@ interface Props {
   imageSide?: 'start' | 'end' | undefined
   ratio?: '1:1' | '5:7' | '7:5' | undefined
   imageFit?: 'contain' | 'cover' | undefined
-  imageShape?: 'none' | 'rounded' | 'circle' | undefined
+  /** The image's outline: none, rounded (the default), a circle, or one of a fixed set of masks: an arch, a cut corner (`chamfer`), a soft `blob`. */
+  imageShape?: 'none' | 'rounded' | 'circle' | 'arch' | 'chamfer' | 'blob' | undefined
   imageBleed?: 'none' | 'edge' | undefined
   mediaKind?: 'image' | 'video' | undefined
   featureStyle?: 'check' | 'icon' | undefined

package/components/split/fixtures.json

@@ -10,5 +10,8 @@
   { "name": "bleed-edge-start-none", "props": { "heading": "From the other side", "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "imageBleed": "edge", "imageSide": "start", "image": { "src": "/kit-fixtures/photo-5.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 }, "tone": "none" } },
   { "name": "video-sticky-check", "props": { "heading": "See how it works", "headingLevel": 3, "mediaKind": "video", "videoUrl": "https://www.youtube.com/watch?v=dQw4w9WgXcQ", "playLabel": "Play video", "sticky": true, "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.\n\nWe have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.\n\nWe have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "features": [{ "title": "Fast", "text": "Static pages, one stylesheet.", "icon": "bolt" }, { "title": "Safe", "text": "Your repository stays yours.", "icon": "shield" }], "image": { "src": "/kit-fixtures/photo-6.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 } } },
   { "name": "measured-frame", "props": { "eyebrow": "Our studio", "heading": "Small team, careful work", "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "actions": [{ "label": "Meet the team", "href": "/team/" }, { "label": "Our process", "href": "/process/", "style": "ghost" }], "image": { "src": "/kit-fixtures/photo-2.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 }, "measured": { "containerPx": 1000, "padY": 80, "bg": { "color": "#eef2ff" }, "tone": "light" } } },
-  { "name": "no-heading", "props": { "body": "Private Sigorta günümüz gelişen sigortacılık sektörünün bir adım önünde olmayı hedeflemiş bir sigorta acentesidir.\n\nÖzel sağlık sigortası alanında, bireysel ve kurumsal müşterilere yönelik çözümler sunuyoruz.", "image": { "src": "/kit-fixtures/photo-3.svg", "alt": "", "width": 1200, "height": 800 } } }
+  { "name": "no-heading", "props": { "body": "Private Sigorta günümüz gelişen sigortacılık sektörünün bir adım önünde olmayı hedeflemiş bir sigorta acentesidir.\n\nÖzel sağlık sigortası alanında, bireysel ve kurumsal müşterilere yönelik çözümler sunuyoruz.", "image": { "src": "/kit-fixtures/photo-3.svg", "alt": "", "width": 1200, "height": 800 } } },
+  {"name": "shape-arch", "props": {"heading": "Made to be edited", "body": "Every page lands as content you can change, in the editor you choose.", "imageShape": "arch", "image": {"src": "/kit-fixtures/photo-2.svg", "alt": "A shelf of books", "width": 1200, "height": 800}}},
+  {"name": "shape-chamfer", "props": {"heading": "Made to be edited", "body": "Every page lands as content you can change, in the editor you choose.", "imageShape": "chamfer", "image": {"src": "/kit-fixtures/photo-2.svg", "alt": "A shelf of books", "width": 1200, "height": 800}}},
+  {"name": "shape-blob", "props": {"heading": "Made to be edited", "body": "Every page lands as content you can change, in the editor you choose.", "imageShape": "blob", "image": {"src": "/kit-fixtures/photo-2.svg", "alt": "A shelf of books", "width": 1200, "height": 800}}}
 ]

package/components/split/meta.json

@@ -11,6 +11,7 @@
     "Button.astro",
     "KitImage.astro",
     "Section.astro",
+    "bleed.ts",
     "instance-id.ts",
     "measured.ts",
     "muted.ts",
@@ -47,10 +48,13 @@
       "options": [
         "none",
         "rounded",
-        "circle"
+        "circle",
+        "arch",
+        "chamfer",
+        "blob"
       ],
       "default": "rounded",
-      "description": "The image's corners: square, the theme's rounding, or a circle."
+      "description": "The image's outline: square, the theme's rounding, a circle, or a fixed mask: an arch over the image, a cut corner (chamfer), a soft blob."
     },
     "imageBleed": {
       "options": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.41.0",
+  "version": "0.42.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",