create-tanqory-theme 0.0.0-stage → 0.2.3

package/templates/nova/src/sections/Hero/Hero.tsx

@@ -0,0 +1,128 @@
+import { useState } from 'react'
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { HeroCopy, heroHasBody, OVERLAY_STRENGTH, scrimAlpha, type HeroCopyProps } from '../../components/content/HeroCopy'
+import { HeroFrame } from '../../components/content/HeroFrame'
+import { HeroMedia } from '../../components/content/HeroMedia'
+import { useNova } from '../../styles/NovaProvider'
+import { EditorFrame } from '../../components/states/EditorFrame'
+import type { NovaImage, NovaVideo } from '@tanqory/theme-kit'
+import { sectionRootProps } from '../../components/section/shared'
+import '../../components/section/shared.css'
+import '../../styles/sections/promotion.css'
+import { heroSchema } from './schema'
+
+export type HeroSettings = SettingsOf<typeof heroSchema>
+export interface HeroProps extends HeroSettings {
+  backgroundImage?: NovaImage | null
+  mobileImage?: NovaImage | null
+  video?: NovaVideo | null
+  mobileVideo?: NovaVideo | null
+  /** Heading element level; the first hero of a home page is the h1. */
+  headingLevel?: 1 | 2
+  /** The first section on the page: its image loads eagerly. */
+  priority?: boolean
+}
+
+const MEDIA_LAYOUTS = new Set(['image-background', 'split', 'contained', 'text-first'])
+const ON_MEDIA = new Set(['image-background', 'contained'])
+
+export function Hero(props: HeroProps): JSX.Element | null {
+  const {
+    eyebrow, heading, subtext, buttonLabel, buttonLink, secondaryLabel, secondaryLink,
+    layout, size, contentPosition, textWidth, overlay, imageFit, mediaPosition, imageRatio, mobileMediaPosition, focalPoint,
+    sectionWidth, contentAlignment, headerSize,
+    backgroundImage, mobileImage, video, mobileVideo, headingLevel = 2, priority = true,
+  } = props
+  const { mode, strings } = useNova()
+  const [imageFailed, setImageFailed] = useState(false)
+
+  const hasMedia = Boolean((backgroundImage || video?.poster || video) && !imageFailed)
+  // Image layouts without an image fall back to minimal (text-first simply drops the media).
+  const wantsMedia = layout !== 'minimal'
+  const effective = wantsMedia && !hasMedia && layout !== 'text-first' ? 'minimal' : layout
+  const showMedia = MEDIA_LAYOUTS.has(effective) && hasMedia
+  const onMedia = ON_MEDIA.has(effective)
+  const needsSetup = mode === 'editor' && wantsMedia && layout !== 'text-first' && !hasMedia
+
+  const copy: HeroCopyProps = {
+    eyebrow,
+    heading,
+    body: subtext,
+    primary: { label: buttonLabel, link: buttonLink },
+    secondary: { label: secondaryLabel, link: secondaryLink },
+    headerSize,
+    level: headingLevel,
+    textWidth,
+    align: contentAlignment,
+    onMedia,
+    // Outline on page layouts; a text link on split / minimal; a link at 390 on media.
+    secondaryStyle: effective === 'split' || effective === 'minimal' ? 'link' : onMedia ? 'responsive' : 'outline',
+    blockOnPhone: onMedia || effective === 'split',
+    pairOnPhone: effective === 'text-first',
+    arrange: effective === 'text-first' && contentAlignment === 'left' && showMedia ? 'split' : 'stack',
+  }
+  const hasCopy = Boolean(heading.trim() || eyebrow.trim() || subtext.trim() || buttonLabel.trim() || secondaryLabel.trim())
+  if (!hasCopy && !showMedia) {
+    return mode === 'editor' ? (
+      <section {...sectionRootProps(props, 'hero')} className="nv-hero" data-layout="minimal">
+        <div className="nv-promo-container" data-width={sectionWidth}>
+          <EditorFrame section="hero" title={strings.editorHeroImage} hint={strings.editorHeroImageHint} />
+        </div>
+      </section>
+    ) : null
+  }
+
+  // Text over moving video always gets the body floor (frames vary in brightness).
+  // The floor applies where text sits on media; an image with no copy takes the chosen strength.
+  const alpha = !onMedia ? 0 : !hasCopy ? OVERLAY_STRENGTH[overlay] : Math.max(scrimAlpha(overlay, heroHasBody(eyebrow, subtext)), video ? scrimAlpha('none', true) : 0)
+  const media = showMedia && (
+    <HeroMedia
+      image={backgroundImage}
+      mobileImage={mobileImage}
+      video={video}
+      mobileVideo={mobileVideo}
+      fit={effective === 'split' ? imageFit : 'cover'}
+      focal={focalPoint}
+      priority={priority}
+      onImageError={() => setImageFailed(true)}
+    />
+  )
+
+  return (
+    <section
+      {...sectionRootProps(props, 'hero')}
+      className="nv-hero"
+      data-layout={effective}
+      data-size={size}
+      data-position={contentPosition}
+      data-align={contentAlignment}
+      data-ratio={imageRatio}
+      data-media-position={mediaPosition}
+      data-mobile-media={mobileMediaPosition}
+      data-has-copy={hasCopy ? '' : undefined}
+    >
+      <div className="nv-promo-container" data-width={effective === 'image-background' ? 'full' : sectionWidth}>
+        {needsSetup && <EditorFrame section="hero" title={strings.editorHeroImage} hint={strings.editorHeroImageHint} compact />}
+        {effective === 'text-first' || effective === 'minimal' ? (
+          <>
+            <div className="nv-hero__copy-row">
+              <HeroCopy {...copy} />
+            </div>
+            {media && <div className="nv-hero__media">{media}</div>}
+          </>
+        ) : effective === 'split' ? (
+          <div className="nv-hero__split">
+            <div className="nv-hero__media">{media}</div>
+            <div className="nv-hero__copy-row">
+              <HeroCopy {...copy} />
+            </div>
+          </div>
+        ) : (
+          <HeroFrame position={hasCopy ? contentPosition : 'middle'} align={contentAlignment} scrim={alpha} media={media} hasVideo={Boolean(video)}>
+            <HeroCopy {...copy} className="nv-media-frame__copy" />
+          </HeroFrame>
+        )}
+      </div>
+    </section>
+  )
+}

package/templates/nova/src/sections/Hero/index.ts

@@ -0,0 +1,24 @@
+import { defineSection, imageFor, resolveSettings, videoFor } from '@tanqory/theme-kit'
+import { Hero } from './Hero'
+import { presets } from './presets'
+import { heroSchema } from './schema'
+
+export default defineSection({
+  id: 'hero',
+  schema: heroSchema,
+  component: Hero,
+  category: 'layout',
+  zone: 'main',
+  title: 'Hero',
+  description: 'Full-width image with heading, text and a button.',
+  icon: '✦',
+  presets,
+  data: (node, store, { page }) => {
+      const r = resolveSettings(heroSchema, node.settings)
+      const h = r.handles
+      return { ...r.settings, backgroundImage: imageFor(store, h.backgroundImage), mobileImage: imageFor(store, h.mobileImage), video: videoFor(store, h.video), mobileVideo: videoFor(store, h.mobileVideo),
+      // The page's opening hero carries its h1 (a page has exactly one).
+      headingLevel: (page.isFirstBodySection ? 1 : 2) as 1 | 2,
+    }
+  },
+})

package/templates/nova/src/sections/Hero/presets.ts

@@ -0,0 +1,16 @@
+import type { SectionPreset } from '@tanqory/theme-kit'
+/** What "Add section" offers as starting points. */
+export const presets: readonly SectionPreset[] = [
+  // Default brand opener; works without strong photography
+  {"name": "hero-editorial", "label": "Editorial", "settings": {"layout": "text-first", "size": "medium", "contentAlignment": "center", "imageRatio": "landscape"}, "blocks": []},
+  // Seasonal campaign over a strong image
+  {"name": "hero-campaign", "label": "Campaign", "settings": {"layout": "image-background", "size": "large", "contentPosition": "middle", "contentAlignment": "center", "overlay": "medium"}, "blocks": []},
+  // Product or story beside copy
+  {"name": "hero-split-story", "label": "Split story", "settings": {"layout": "split", "mediaPosition": "right", "imageRatio": "portrait", "mobileMediaPosition": "before"}, "blocks": []},
+  // Immersive full-screen launch
+  {"name": "hero-launch", "label": "Launch", "settings": {"layout": "image-background", "size": "fullscreen", "contentPosition": "bottom", "contentAlignment": "left", "overlay": "medium"}, "blocks": []},
+  // Image-led but calmer, inside the container
+  {"name": "hero-framed", "label": "Framed", "settings": {"layout": "contained", "size": "medium", "contentPosition": "bottom"}, "blocks": []},
+  // Typographic opener, no image
+  {"name": "hero-statement", "label": "Statement", "settings": {"layout": "minimal", "contentAlignment": "left", "headerSize": "large"}, "blocks": []},
+]

package/templates/nova/src/sections/Hero/schema.ts

@@ -0,0 +1,56 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12B · 01 hero — five layouts, one voice. The canonical default is
+ * text-first: headline and buttons on the page, image beneath, so a new store
+ * looks finished before it has great photography and nothing ever sits on an
+ * unreadable picture.
+ *
+ *   text-first        copy on the page, media below (radius 12, wide container)
+ *   image-background  copy on a full-bleed image; overlay floor 45 / 62
+ *   split             copy beside the media; stacks < 1024
+ *   contained         image-background inset in the container, radius 12
+ *   minimal           text only — also the fallback for image layouts with no
+ *                     (or a failed) image; the editor shows a setup frame
+ *
+ * Height ladder 400 / 560 / 720 / 100svh − header (390: 4:5 media). Video is
+ * optional on every layout except minimal; the image becomes its poster.
+ */
+export const heroSchema = defineSchema(
+  { kind: 'section', name: 'hero', family: '12B' },
+  {
+    eyebrow: field.text(''),
+    heading: field.text('Modern essentials'),
+    subtext: field.richtext('Designed for everyday rituals — built to last beyond the season.'),
+    buttonLabel: field.text('Shop the collection'),
+    buttonLink: field.url('/collections/all'),
+    secondaryLabel: field.text(''),
+    secondaryLink: field.url(''),
+    backgroundImage: field.resource('image'),
+    mobileImage: field.resource('image'),
+    layout: field.select(['text-first', 'image-background', 'split', 'contained', 'minimal'], 'text-first'),
+    size: field.select(['small', 'medium', 'large', 'fullscreen'], 'medium'),
+    contentPosition: field.select(['top', 'middle', 'bottom'], 'bottom'),
+    textWidth: field.select(['narrow', 'medium', 'wide'], 'narrow'),
+    overlay: field.select(['none', 'light', 'medium', 'strong'], 'medium'),
+    imageFit: field.select(['cover', 'contain'], 'cover'),
+    mediaPosition: field.select(['left', 'right'], 'right'),
+    imageRatio: field.select(['adapt', 'landscape', 'square', 'portrait'], 'adapt'),
+    mobileMediaPosition: field.select(['before', 'after'], 'before'),
+    focalPoint: field.select(['center', 'top', 'bottom', 'left', 'right'], 'center'),
+    video: field.resource('video'),
+    mobileVideo: field.resource('video'),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('wide'),
+    // Persisted text_alignment: "right" is supported for hero and slide only (12B conflict 2).
+    contentAlignment: field.select(['left', 'center', 'right'], 'center'),
+    mobileContentAlignment: shared.mobileContentAlignment('inherit'),
+    spacingTop: shared.spacingTop('large'),
+    spacingBottom: shared.spacingBottom('large'),
+    background: shared.background('surface'),
+    headerSize: shared.headerSize('medium'),
+    hideOnMobile: shared.hideOnMobile(),
+    anchorId: shared.anchorId(),
+  },
+)

package/templates/nova/src/sections/ImageGallery/ImageGallery.tsx

@@ -0,0 +1,86 @@
+import { sx, sxJoin } from '@tanqory/theme-kit'
+import { useRef, useState } from 'react'
+import { useScrollRegion } from '../../styles/scroll'
+import { resolveSettings, type SettingsOf } from '@tanqory/theme-kit'
+import { SectionHead } from '../../components/content/SectionHead'
+import { imageSchema } from '../../components/content/blocks/Image'
+import { videoSchema } from '../../components/content/blocks/Video'
+import { IconButton } from '../../components/base/IconButton'
+import { useNova } from '../../styles/NovaProvider'
+import { ProductLightbox } from '../../components/overlays/ProductLightbox'
+import type { NovaImage, NovaVideo } from '@tanqory/theme-kit'
+import { EmptySection, Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/content.css'
+import { imageGallerySchema } from './schema'
+
+export type GalleryBlock =
+  | { type: 'image'; settings?: Record<string, unknown>; image?: NovaImage | null }
+  | { type: 'video'; settings?: Record<string, unknown>; video?: NovaVideo | null; poster?: NovaImage | null }
+
+export type ImageGallerySettings = SettingsOf<typeof imageGallerySchema>
+export interface ImageGalleryProps extends ImageGallerySettings {
+  blocks?: GalleryBlock[]
+}
+
+export function ImageGallery(props: ImageGalleryProps): JSX.Element | null {
+  const { preset, ratio, captionStyle, gap, lightbox, sectionWidth, contentAlignment, heading, eyebrow, description, headerSize, blocks = [] } = props
+  const { strings } = useNova()
+  const [zoom, setZoom] = useState<number | null>(null)
+  const [playing, setPlaying] = useState<number | null>(null)
+  const grid = useRef<HTMLUListElement>(null)
+  const region = useScrollRegion(grid, heading || strings.productImages, [blocks.length, preset], { list: true })
+  const items = blocks
+    .map((b) => {
+      if (b.type === 'image') {
+        const s = resolveSettings(imageSchema, b.settings).settings
+        return b.image ? { kind: 'image' as const, image: { ...b.image, alt: s.alt || b.image.alt }, caption: s.caption, link: s.link } : null
+      }
+      const s = resolveSettings(videoSchema, b.settings).settings
+      const src = b.video?.src ?? s.url
+      const poster = b.poster ?? b.video?.poster ?? null
+      return src && poster ? { kind: 'video' as const, image: poster, src, caption: '', link: '', captions: s.captions } : null
+    })
+    .filter((x): x is NonNullable<typeof x> => Boolean(x))
+  if (!items.length) return <EmptySection props={props} type="image-gallery" width={sectionWidth} title={strings.editorImage} hint={strings.editorImageHint} />
+  // Graceful fewer: bento needs 5, grid-2x2 4, 3-up 3.
+  const n = items.length
+  const layout = n === 1 ? 'single' : preset === 'bento' ? (n >= 5 ? 'bento' : n >= 3 ? 'bento-3' : 'two') : preset === 'grid-2x2' && n < 4 ? (n === 3 ? '3-up' : 'two') : preset === '3-up' && n < 3 ? 'two' : preset
+  const images = items.filter((i) => i.kind === 'image').map((i) => i.image)
+  return (
+    <Shell props={props} type="image-gallery" width={sectionWidth} className="nv-gallery-section" data-layout={layout} data-ratio={ratio} data-caption={captionStyle} data-gap={gap}>
+      <SectionHead eyebrow={eyebrow} heading={heading} description={description} headerSize={headerSize} align={contentAlignment} />
+      <ul ref={grid} className="nv-gallery-section__grid" {...region}>
+        {items.map((it, i) => (
+          <li key={i} className="nv-gallery-section__item">
+            <figure className="nv-gallery-section__figure">
+              <div className={sxJoin("nv-gallery-section__media", sx(ratio === 'natural' ? { aspectRatio: `${it.image.width} / ${it.image.height}` } : undefined))}>
+                {it.kind === 'video' && playing === i ? (
+                  <video className="nv-gallery-section__video" src={it.src} poster={it.image.src} controls autoPlay playsInline>
+                    {it.captions && <track kind="captions" src={it.captions} default />}
+                  </video>
+                ) : it.link ? (
+                  <a href={it.link} className="nv-gallery-section__link">
+                    <img src={it.image.src} srcSet={it.image.srcSet} sizes="(min-width: 1024px) 50vw, 90vw" alt={it.image.alt ?? ''} width={it.image.width} height={it.image.height} loading="lazy" decoding="async" />
+                  </a>
+                ) : (
+                  <img src={it.image.src} srcSet={it.image.srcSet} sizes="(min-width: 1024px) 50vw, 90vw" alt={it.image.alt ?? ''} width={it.image.width} height={it.image.height} loading="lazy" decoding="async" />
+                )}
+                {it.kind === 'video' && playing !== i && <IconButton className="nv-gallery-section__play" variant="on-media" icon="play" label={strings.playVideo} onClick={() => setPlaying(i)} />}
+                {it.kind === 'image' && lightbox && !it.link && <IconButton className="nv-gallery-section__zoom" variant="on-media" icon="zoom" label={strings.zoomImage} onClick={() => setZoom(images.indexOf(it.image))} />}
+                {it.caption && captionStyle === 'overlay-chip' && <figcaption className="nv-gallery-section__chip"><bdi>{it.caption}</bdi></figcaption>}
+              </div>
+              {it.caption && captionStyle === 'below' && <figcaption className="nv-gallery-section__caption"><bdi>{it.caption}</bdi></figcaption>}
+            </figure>
+          </li>
+        ))}
+      </ul>
+      {n > 1 && (
+        <p className="nv-gallery-section__count nv-tabular" aria-hidden>
+          1 / {n}
+        </p>
+      )}
+      {lightbox && images.length > 0 && <ProductLightbox open={zoom !== null} onClose={() => setZoom(null)} images={images} index={zoom ?? 0} onIndex={setZoom} title={heading || strings.productImages} />}
+    </Shell>
+  )
+}

package/templates/nova/src/sections/ImageGallery/index.ts

@@ -0,0 +1,28 @@
+import { defineSection, imageFor, resolveSettings } from '@tanqory/theme-kit'
+import { GalleryBlock, ImageGallery } from './ImageGallery'
+import { presets } from './presets'
+import { imageGallerySchema } from './schema'
+import { videoSchema } from '../../components/content/blocks/Video'
+import { imageSchema } from '../../components/content/blocks/Image'
+
+export default defineSection({
+  id: 'image-gallery',
+  schema: imageGallerySchema,
+  blocks: [videoSchema, imageSchema],
+  component: ImageGallery,
+  category: 'content',
+  zone: 'main',
+  title: 'Image gallery',
+  description: 'A grid, bento or carousel of images with optional captions.',
+  icon: '▦',
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(imageGallerySchema, node.settings)
+      const blocks: GalleryBlock[] = (node.blocks ?? []).flatMap((b): GalleryBlock[] =>
+        b.type === 'image' ? [{ type: 'image', settings: b.settings, image: imageFor(store, b.settings?.image as string | undefined) }]
+        : b.type === 'video' ? [{ type: 'video', settings: b.settings, video: typeof b.settings?.url === 'string' ? (store.videos?.[b.settings.url] ?? null) : null, poster: imageFor(store, b.settings?.poster as string | undefined) }]
+        : [],
+      )
+      return { ...r.settings, blocks }
+  },
+})

package/templates/nova/src/sections/ImageGallery/presets.ts

@@ -0,0 +1,10 @@
+import type { SectionPreset } from '@tanqory/theme-kit'
+/** What "Add section" offers as starting points. */
+export const presets: readonly SectionPreset[] = [
+  // Default gallery
+  {"name": "gal-bento", "label": "Editorial", "settings": {"preset": "bento", "captionStyle": "overlay-chip", "gap": "md"}, "blocks": []},
+  // Uniform trio
+  {"name": "gal-three", "label": "Three across", "settings": {"preset": "3-up", "ratio": "portrait", "captionStyle": "below"}, "blocks": []},
+  // Many images
+  {"name": "gal-carousel", "label": "Carousel", "settings": {"preset": "carousel", "ratio": "portrait", "lightbox": true}, "blocks": []},
+]

package/templates/nova/src/sections/ImageGallery/schema.ts

@@ -0,0 +1,34 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12D · 08 image-gallery — 3–8 images (or click-to-play videos) in a
+ * considered layout: bento (default · ignores ratio) · grid-2x2 · 3-up ·
+ * carousel. Captions are white chips on the image (no overlay needed) or
+ * 13px muted below. Fewer images than the preset → bento 5 → 3 → 2-up;
+ * 1 image → full width. A swipe row with a counter at 390. Lightbox: full
+ * screen, ← → Esc (off for images that link somewhere).
+ */
+export const imageGallerySchema = defineSchema(
+  { kind: 'section', name: 'image-gallery', family: '12D', blocks: ['image', 'video'] },
+  {
+    preset: field.select(['grid-2x2', '3-up', 'bento', 'carousel'], 'bento'),
+    ratio: field.select(['square', 'portrait', 'landscape', 'natural'], 'natural'),
+    captionStyle: field.select(['below', 'overlay-chip'], 'overlay-chip'),
+    gap: field.select(['sm', 'md'], 'md'),
+    lightbox: field.boolean(false),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('wide'),
+    contentAlignment: shared.contentAlignment('left'),
+    mobileContentAlignment: shared.mobileContentAlignment('inherit'),
+    spacingTop: shared.spacingTop('large'),
+    spacingBottom: shared.spacingBottom('large'),
+    background: shared.background('surface'),
+    heading: shared.heading(),
+    eyebrow: shared.eyebrow(),
+    description: shared.description(),
+    headerSize: shared.headerSize('medium'),
+    hideOnMobile: shared.hideOnMobile(),
+    anchorId: shared.anchorId(),
+  },
+)

package/templates/nova/src/sections/ImageWithText/ImageWithText.tsx

@@ -0,0 +1,62 @@
+import { sx, sxJoin } from '@tanqory/theme-kit'
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { RichText } from '../../components/content/RichText'
+import { SectionHead } from '../../components/content/SectionHead'
+import { HeroMedia } from '../../components/content/HeroMedia'
+import { Button } from '../../components/base/Button'
+import { useNova } from '../../styles/NovaProvider'
+import type { NovaImage, NovaVideo } from '@tanqory/theme-kit'
+import { EmptySection, Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/content.css'
+import { imageWithTextSchema } from './schema'
+
+export type ImageWithTextSettings = SettingsOf<typeof imageWithTextSchema>
+export interface ImageWithTextProps extends ImageWithTextSettings {
+  image?: NovaImage | null
+  video?: NovaVideo | null
+  /** A saved legacy left / right: render physically (does not mirror in RTL). */
+  physicalSide?: 'left' | 'right'
+}
+
+export function ImageWithText(props: ImageWithTextProps): JSX.Element | null {
+  const { image, video, imageAlt, mediaPosition, mediaWidth, overlap, panelBackground, mediaRatio, contentVerticalAlign, mobileMediaPosition, buttonVariant, body, buttonLabel, buttonLink, sectionWidth, contentAlignment, heading, eyebrow, headerSize, physicalSide } = props
+  const { strings } = useNova()
+  const hasCopy = Boolean(heading.trim() || body.replace(/<[^>]*>/g, '').trim())
+  if (!image && !video && !hasCopy) return <EmptySection props={props} type="image-with-text" width={sectionWidth} title={strings.editorImage} hint={strings.editorImageHint} />
+  const media = image ? { ...image, alt: imageAlt.trim() } : null
+  const adapt = mediaRatio === 'adapt' && image ? Math.min(3 / 2, Math.max(4 / 5, image.width / image.height)) : undefined
+  return (
+    <Shell
+      props={props}
+      type="image-with-text"
+      width={sectionWidth}
+      className="nv-iwt"
+      data-media={image || video ? (physicalSide ?? mediaPosition) : 'none'}
+      data-physical={physicalSide ? '' : undefined}
+      data-media-width={mediaWidth}
+      data-panel={panelBackground}
+      data-overlap={overlap && panelBackground === 'muted' ? '' : undefined}
+      data-ratio={mediaRatio}
+      data-valign={contentVerticalAlign}
+      data-mobile-media={mobileMediaPosition}
+    >
+      <div className="nv-iwt__grid">
+        {(image || video) && (
+          <div className={sxJoin("nv-iwt__media", sx(adapt ? { aspectRatio: String(adapt) } : undefined))}>
+            <HeroMedia image={media} video={video} priority={false} />
+          </div>
+        )}
+        <div className="nv-iwt__copy" data-align={contentAlignment}>
+          <SectionHead eyebrow={eyebrow} heading={heading} headerSize={headerSize} align={contentAlignment} />
+          <RichText html={body} className="nv-iwt__body" />
+          {buttonLabel.trim() && buttonLink.trim() && (
+            <Button href={buttonLink} variant={buttonVariant === 'link' ? 'tertiary' : 'secondary'} className="nv-iwt__button">
+              <bdi>{buttonLabel}</bdi>
+            </Button>
+          )}
+        </div>
+      </div>
+    </Shell>
+  )
+}

package/templates/nova/src/sections/ImageWithText/index.ts

@@ -0,0 +1,23 @@
+import { defineSection, imageFor, resolveSettings, videoFor } from '@tanqory/theme-kit'
+import { ImageWithText } from './ImageWithText'
+import { presets } from './presets'
+import { imageWithTextSchema } from './schema'
+
+export default defineSection({
+  id: 'image-with-text',
+  schema: imageWithTextSchema,
+  component: ImageWithText,
+  category: 'content',
+  zone: 'main',
+  title: 'Image with text',
+  description: 'Image beside a heading and short paragraph.',
+  icon: '◧',
+  presets,
+  data: (node, store) => {
+      const raw = node.settings?.mediaPosition
+      const r = resolveSettings(imageWithTextSchema, node.settings)
+      // Saved left / right render physically (they do not mirror in RTL).
+      const physicalSide: 'left' | 'right' | undefined = raw === 'left' || raw === 'right' ? raw : undefined
+      return { ...r.settings, image: imageFor(store, r.handles.image), video: videoFor(store, r.handles.video), physicalSide }
+  },
+})

package/templates/nova/src/sections/ImageWithText/presets.ts

@@ -0,0 +1,12 @@
+import type { SectionPreset } from '@tanqory/theme-kit'
+/** What "Add section" offers as starting points. */
+export const presets: readonly SectionPreset[] = [
+  // Default brand story
+  {"name": "iwt-story", "label": "Story", "settings": {"mediaPosition": "start", "mediaWidth": "equal", "mediaRatio": "portrait", "contentVerticalAlign": "center"}, "blocks": []},
+  // Magazine-style feature
+  {"name": "iwt-editorial-overlap", "label": "Editorial overlap", "settings": {"mediaPosition": "start", "mediaWidth": "large", "panelBackground": "muted", "overlap": true}, "blocks": []},
+  // Material / detail explanation
+  {"name": "iwt-product-detail", "label": "Detail close-up", "settings": {"mediaPosition": "end", "mediaRatio": "square", "mobileMediaPosition": "before"}, "blocks": []},
+  // Softer card treatment
+  {"name": "iwt-panel", "label": "Muted panel", "settings": {"panelBackground": "muted", "mediaRatio": "landscape"}, "blocks": []},
+]

package/templates/nova/src/sections/ImageWithText/schema.ts

@@ -0,0 +1,45 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12D · 02 image-with-text — the story workhorse: image and copy side by side
+ * on the 12-column grid (6 / 6 or 7 / 5, gap 80). Logical sides (start / end)
+ * so it mirrors in RTL; saved left / right render physically (legacy).
+ *
+ *   panelBackground muted — a 12-radius panel (48 padding); overlap slides it
+ *   64 over the image on the content side (ignored < 1024)
+ *   mediaRatio adapt — the image's ratio, clamped to 4:5 … 3:2 (4:5 at 390)
+ *   video (NEW) — a muted loop in the media slot; the image is its poster
+ *   no image → text-only at content width (editor: setup frame)
+ */
+export const imageWithTextSchema = defineSchema(
+  { kind: 'section', name: 'image-with-text', family: '12D' },
+  {
+    image: field.resource('image'),
+    imageAlt: field.text(''),
+    video: field.resource('video'),
+    mediaPosition: field.select(['start', 'end'], 'start', { legacy: { left: 'start', right: 'end' } }),
+    mediaWidth: field.select(['equal', 'large'], 'equal'),
+    overlap: field.boolean(false),
+    panelBackground: field.select(['none', 'muted'], 'none'),
+    mediaRatio: field.select(['adapt', 'portrait', 'square', 'landscape'], 'adapt'),
+    contentVerticalAlign: field.select(['top', 'center'], 'center'),
+    mobileMediaPosition: field.select(['before', 'after'], 'before'),
+    buttonVariant: field.select(['secondary', 'link'], 'secondary'),
+    body: field.richtext('Crafted in small batches…'),
+    buttonLabel: field.text(''),
+    buttonLink: field.url(''),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('wide'),
+    contentAlignment: shared.contentAlignment('left'),
+    mobileContentAlignment: shared.mobileContentAlignment('inherit'),
+    spacingTop: shared.spacingTop('large'),
+    spacingBottom: shared.spacingBottom('large'),
+    background: shared.background('surface'),
+    heading: shared.heading(),
+    eyebrow: shared.eyebrow(),
+    headerSize: shared.headerSize('medium'),
+    hideOnMobile: shared.hideOnMobile(),
+    anchorId: shared.anchorId(),
+  },
+)

package/templates/nova/src/sections/LineAddFriend/LineAddFriend.tsx

@@ -0,0 +1,25 @@
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { SectionHead } from '../../components/content/SectionHead'
+import { LineAddFriendButton, lineAddFriendUrl } from '../../components/navigation/LineAddFriend'
+import { useNova } from '../../styles/NovaProvider'
+import { EmptySection, Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/promotion.css'
+import { lineAddFriendSchema } from './schema'
+
+export type LineAddFriendSectionProps = SettingsOf<typeof lineAddFriendSchema>
+
+/** Add us on LINE: the heading and text over LINE's Add friend button; in the editor, a prompt until the link is set. */
+export function LineAddFriendSection(props: LineAddFriendSectionProps): JSX.Element | null {
+  const { addFriendUrl, alignment, sectionWidth, heading, description, headerSize } = props
+  const { strings } = useNova()
+  if (!lineAddFriendUrl(addFriendUrl)) {
+    return <EmptySection props={props} type="line-add-friend" width={sectionWidth} title={strings.editorAddLineUrl} hint={strings.editorAddLineUrlHint} />
+  }
+  return (
+    <Shell props={props} type="line-add-friend" width={sectionWidth} className="nv-line-section" data-align={alignment}>
+      <SectionHead heading={heading} description={description} headerSize={headerSize} align={alignment} />
+      <LineAddFriendButton url={addFriendUrl} />
+    </Shell>
+  )
+}

package/templates/nova/src/sections/LineAddFriend/index.ts

@@ -0,0 +1,20 @@
+import { defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { LineAddFriendSection, LineAddFriendSectionProps } from './LineAddFriend'
+import { lineAddFriendSchema } from './schema'
+import { presets } from './presets'
+
+export default defineSection({
+  id: 'line-add-friend',
+  schema: lineAddFriendSchema,
+  component: LineAddFriendSection,
+  category: 'marketing',
+  zone: 'main',
+  title: 'Add us on LINE',
+  description: "LINE's Add friend button to your LINE Official Account.",
+  icon: '◎',
+  presets,
+  data: (node) => {
+      const r = resolveSettings(lineAddFriendSchema, node.settings)
+      return r.settings as LineAddFriendSectionProps
+  },
+})

package/templates/nova/src/sections/LineAddFriend/presets.ts

@@ -0,0 +1,3 @@
+import type { SectionPreset } from '@tanqory/theme-kit'
+/** What "Add section" offers as starting points: under the hero or above the footer. */
+export const presets: readonly SectionPreset[] = [{ name: 'line-add-friend', label: 'Add us on LINE', settings: { alignment: 'center' }, blocks: [] }]

package/templates/nova/src/sections/LineAddFriend/schema.ts

@@ -0,0 +1,25 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * line-add-friend (army #7740): "Add us on LINE": a heading, an optional line of text and LINE's Add friend
+ * button to the store's LINE Official Account. `addFriendUrl` is the add friend link from LINE Official Account
+ * Manager (https://lin.ee/… or https://line.me/R/ti/p/@…); without one, shoppers see nothing. Not on any
+ * template: the merchant places it.
+ */
+export const lineAddFriendSchema = defineSchema(
+  { kind: 'section', name: 'line-add-friend', family: '12F' },
+  {
+    addFriendUrl: field.url(''),
+    alignment: field.select(['left', 'center'], 'center'),
+    sectionWidth: shared.sectionWidth('standard'),
+    spacingTop: shared.spacingTop('medium'),
+    spacingBottom: shared.spacingBottom('medium'),
+    background: shared.background('surface'),
+    heading: shared.heading('Add us on LINE'),
+    description: shared.description(),
+    headerSize: shared.headerSize('small'),
+    hideOnMobile: shared.hideOnMobile(),
+    anchorId: shared.anchorId(),
+  },
+)