create-tanqory-theme 0.0.0-stage → 0.2.3

package/templates/nova/src/components/content/RichText.tsx

@@ -0,0 +1,30 @@
+import type { ElementType } from 'react'
+
+/** Block elements whose text is one bidi paragraph. */
+const TEXT_BLOCK = /<(p|li|h[1-6]|blockquote|figcaption|td|th|dt|dd)(\s[^>]*)?>([\s\S]*?)<\/\1>/gi
+
+/**
+ * Each paragraph's text in <bdi>: merchant text keeps its own direction
+ * (English typed on an Arabic storefront keeps its punctuation where it was
+ * typed), while the paragraph itself keeps the page direction and alignment.
+ * Innermost blocks only — a block that contains another is left to its child.
+ */
+export function isolateParagraphs(html: string): string {
+  return html.replace(TEXT_BLOCK, (all, tag: string, attrs = '', inner: string) =>
+    /<(p|li|h[1-6]|blockquote|figcaption|td|th|dt|dd|ul|ol|div|table)[\s>]/i.test(inner) ? all : `<${tag}${attrs}><bdi>${inner}</bdi></${tag}>`,
+  )
+}
+
+/**
+ * Merchant rich text. The ADAPTER sanitises (the storefront already has a
+ * safe-html allowlist); Nova only renders. Plain text (no tags) renders as
+ * text, so fixtures and simple settings need no markup.
+ */
+export function RichText({ html, as: As = 'div', className }: { html: string; as?: ElementType; className?: string }): JSX.Element | null {
+  if (!html.trim()) return null
+  const cls = ['nv-prose', className].filter(Boolean).join(' ')
+  if (!/[<&]/.test(html)) return <As className={cls}>{As === 'div' ? <p><bdi>{html}</bdi></p> : <bdi>{html}</bdi>}</As>
+  // Rendered as a text element itself (as="p"): its whole content is the one paragraph.
+  const inline = As !== 'div' && !/<(p|li|h[1-6]|blockquote|figcaption|td|th|dt|dd|ul|ol|div|table)[\s>]/i.test(html)
+  return <As className={cls} dangerouslySetInnerHTML={{ __html: inline ? `<bdi>${html}</bdi>` : isolateParagraphs(html) }} />
+}

package/templates/nova/src/components/content/SectionHead.css

@@ -0,0 +1,8 @@
+.nv-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); }
+.nv-section-head__text { display: grid; gap: var(--space-2); }
+.nv-section-head__desc { margin-top: var(--space-1); color: var(--color-fg-muted); max-width: 60ch; }
+.nv-section-head[data-align='center'] { flex-direction: column; align-items: center; text-align: center; }
+@media (min-width: 640px) { .nv-section-head { margin-bottom: var(--space-6); } }
+@media (max-width: 639.98px) {
+  .nv-section-head__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+}

package/templates/nova/src/components/content/SectionHead.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react'
+import './SectionHead.css'
+
+/**
+ * Nova 02 · SectionHead — eyebrow → heading 8px → description 12px; head →
+ * content 32 (24 at 390). headerSize (shared) maps small→h3 · medium→h2 ·
+ * large→h1 scale; the element level is separate (one h1 per page).
+ */
+export interface SectionHeadProps {
+  heading?: string
+  eyebrow?: string
+  description?: string
+  headerSize?: 'small' | 'medium' | 'large'
+  level?: 1 | 2 | 3
+  align?: 'left' | 'center'
+  link?: ReactNode
+}
+
+const SCALE = { small: 'nv-h3', medium: 'nv-h2', large: 'nv-h1' } as const
+
+export function SectionHead({ heading, eyebrow, description, headerSize = 'medium', level = 2, align = 'left', link }: SectionHeadProps): JSX.Element | null {
+  if (!heading) return null
+  const H = `h${level}` as 'h2'
+  return (
+    <div className="nv-section-head" data-align={align}>
+      <div className="nv-section-head__text">
+        {eyebrow && <p className="nv-eyebrow"><bdi>{eyebrow}</bdi></p>}
+        <H className={SCALE[headerSize]}><bdi>{heading}</bdi></H>
+        {description && <p className="nv-section-head__desc"><bdi>{description}</bdi></p>}
+      </div>
+      {link && <div className="nv-section-head__link">{link}</div>}
+    </div>
+  )
+}

package/templates/nova/src/components/content/ShareButtons.css

@@ -0,0 +1,2 @@
+.nv-share { display: inline-flex; align-items: center; gap: var(--space-2); }
+.nv-share__label { font-size: var(--type-body-sm); color: var(--color-fg-muted); margin-inline-end: var(--space-1); }

package/templates/nova/src/components/content/ShareButtons.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react'
+import { IconButton } from '../base/IconButton'
+import { useNova } from '../../styles/NovaProvider'
+import './ShareButtons.css'
+
+/**
+ * 12E · share — copy link + the system share sheet. No counts, no
+ * third-party scripts. The share button only appears where the browser has a
+ * native share sheet (Web Share API).
+ */
+export function ShareButtons({ url, title }: { url: string; title: string }): JSX.Element {
+  const { strings } = useNova()
+  const [copied, setCopied] = useState(false)
+  const canShare = typeof navigator !== 'undefined' && typeof navigator.share === 'function'
+  const abs = typeof window !== 'undefined' ? new URL(url, window.location.href).href : url
+  return (
+    <div className="nv-share" role="group" aria-label={strings.shareArticle}>
+      <span className="nv-share__label" aria-hidden>
+        {strings.share}
+      </span>
+      <IconButton
+        variant="outlined"
+        icon="link"
+        label={copied ? strings.linkCopied : strings.copyLink}
+        onClick={async () => {
+          try {
+            await navigator.clipboard?.writeText(abs)
+            setCopied(true)
+          } catch {
+            /* clipboard blocked: nothing to do */
+          }
+        }}
+      />
+      {canShare && <IconButton variant="outlined" icon="share" label={strings.share} onClick={() => navigator.share({ url: abs, title }).catch(() => {})} />}
+      <span className="nv-visually-hidden" aria-live="polite">
+        {copied ? strings.linkCopied : ''}
+      </span>
+    </div>
+  )
+}

package/templates/nova/src/components/content/StoreCard.css

@@ -0,0 +1,14 @@
+.nv-store-card { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: 10px; font-size: var(--type-body-sm); }
+.nv-store-card__media { margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-2); aspect-ratio: 16 / 9; border-radius: 10px 10px 0 0; overflow: hidden; background: var(--color-media-bg); }
+.nv-store-card__media img { width: 100%; height: 100%; object-fit: cover; }
+.nv-store-card__name { font-size: 1.0625rem; font-weight: var(--weight-medium); letter-spacing: 0; }
+.nv-store-card__name a { color: inherit; text-decoration: none; }
+.nv-store-card__address { font-style: normal; color: var(--color-fg-muted); line-height: 1.5; }
+.nv-store-card__hours { color: var(--color-fg-muted); }
+.nv-store-card__phone { justify-self: start; color: var(--color-fg); text-decoration: none; }
+.nv-store-card__directions { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; margin-block-start: var(--space-2); color: var(--color-fg); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: var(--underline-offset); }
+.nv-store-card__actions { display: none; }
+@media (max-width: 639.98px) {
+  .nv-store-card__phone, .nv-store-card__directions { display: none; }
+  .nv-store-card__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--space-2); margin-block-start: var(--space-3); }
+}

package/templates/nova/src/components/content/StoreCard.tsx

@@ -0,0 +1,60 @@
+import type { StoreLocation } from '@tanqory/theme-kit'
+import { Button } from '../base/Button'
+import { Icon } from '../../styles/Icon'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import './StoreCard.css'
+
+export interface StoreCardProps {
+  location: StoreLocation
+  showPhone?: boolean
+  /** Hours are free text in location data today; the row renders only when present. */
+  showHours?: boolean
+  showImage?: boolean
+}
+
+/** Directions open the device's maps app with the address text — no coordinates needed. */
+export function directionsUrl(address: readonly string[]): string {
+  return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address.join(', '))}`
+}
+
+/**
+ * 12G · one store: name, address, phone (tel:), Get directions. Card radius
+ * 10, hairline border. At 390 Call and Directions become 44 buttons.
+ */
+export function StoreCard({ location: l, showPhone = true, showHours = true, showImage }: StoreCardProps): JSX.Element {
+  const { strings } = useNova()
+  const tel = l.phone?.replace(/[^\d+]/g, '')
+  const phone = showPhone && l.phone && tel
+  return (
+    <article className="nv-store-card">
+      {showImage && l.image && (
+        <div className="nv-store-card__media">
+          <img src={l.image.src} alt={l.image.alt ?? ''} width={l.image.width} height={l.image.height} loading="lazy" decoding="async" />
+        </div>
+      )}
+      <h3 className="nv-store-card__name">{l.url ? <a href={l.url}><bdi>{l.name}</bdi></a> : <bdi>{l.name}</bdi>}</h3>
+      <address className="nv-store-card__address"><bdi>{l.address.join(', ')}</bdi></address>
+      {showHours && l.hours && <p className="nv-store-card__hours"><bdi>{l.hours}</bdi></p>}
+      {phone && (
+        <a className="nv-store-card__phone nv-tabular" href={`tel:${tel}`}>
+          {l.phone}
+        </a>
+      )}
+      <a className="nv-store-card__directions" href={directionsUrl(l.address)} target="_blank" rel="noopener noreferrer">
+        {strings.getDirections}
+        <Icon name="arrow-up-right" size="sm" />
+      </a>
+      <div className="nv-store-card__actions">
+        {phone && (
+          <Button variant="secondary" href={`tel:${tel}`} aria-label={fmt(strings.callNamed, { name: l.name })}>
+            {strings.call}
+          </Button>
+        )}
+        <Button variant="secondary" href={directionsUrl(l.address)} target="_blank" rel="noopener noreferrer" aria-label={fmt(strings.directionsTo, { name: l.name })} iconEnd={<Icon name="arrow-up-right" size="sm" />}>
+          {strings.directions}
+        </Button>
+      </div>
+    </article>
+  )
+}

package/templates/nova/src/components/content/TestimonialCard.css

@@ -0,0 +1,36 @@
+/* 12F · testimonial: muted card radius 12, quote 17 / 1.6 (lg 26 / 1.3); 390: 16 / 20. */
+.nv-testimonial { display: grid; gap: var(--space-6); margin: 0; height: 100%; min-width: 0; }
+.nv-testimonial[data-style='muted'] { padding: var(--space-6) var(--space-6) var(--space-7); border-radius: 12px; background: var(--color-bg-muted); }
+.nv-testimonial[data-style='plain'] { padding-block-start: var(--space-5); border-block-start: 1px solid var(--color-border); }
+.nv-testimonial__body { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
+.nv-testimonial__quote { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--color-fg); }
+.nv-testimonial[data-size='lg'] .nv-testimonial__quote { font-size: 1.625rem; line-height: 1.3; letter-spacing: var(--tracking-h3); font-weight: var(--weight-heading); }
+.nv-testimonial__quote[data-clamped] p { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
+.nv-testimonial__more { align-self: flex-start; min-height: 24px; padding: 0; border: 0; background: none; color: var(--color-fg); font: inherit; font-size: var(--type-body-sm); text-decoration: underline; text-underline-offset: var(--underline-offset); cursor: pointer; }
+.nv-testimonial__person { display: flex; align-items: center; gap: var(--space-3); margin-block-start: auto; padding-block-start: var(--space-3); }
+.nv-testimonial__avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--color-bg); font-size: 0.75rem; font-weight: var(--weight-medium); color: var(--color-fg); }
+.nv-testimonial[data-style='plain'] .nv-testimonial__avatar { background: var(--color-bg-muted); }
+.nv-testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
+.nv-testimonial__who { display: grid; font-size: var(--type-body-sm); line-height: 1.35; }
+.nv-testimonial__name { font-weight: var(--weight-medium); }
+.nv-testimonial__role { color: var(--color-fg-muted); }
+.nv-testimonial[data-spotlight] .nv-testimonial__who { display: block; }
+.nv-testimonial[data-spotlight] .nv-testimonial__role::before { content: ' · '; }
+.nv-testimonial[data-spotlight] .nv-testimonial__person { margin-block-start: 0; padding-block-start: 0; }
+
+/* spotlight with a video quote: 3:4 poster beside the quote. */
+.nv-testimonial[data-media] { grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr); align-items: center; gap: var(--space-7); }
+.nv-testimonial__media { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--color-media-bg); }
+.nv-testimonial__media video, .nv-testimonial__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.nv-testimonial__play { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
+.nv-testimonial__play-icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-bg); color: var(--color-fg); box-shadow: var(--shadow-floating); }
+.nv-testimonial__play:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: calc(var(--focus-ring-width) * -2); }
+
+@media (max-width: 639.98px) {
+  .nv-testimonial__quote { font-size: 1rem; }
+  .nv-testimonial[data-size='lg'] .nv-testimonial__quote { font-size: 1.25rem; }
+  .nv-testimonial[data-style='muted'] { padding: var(--space-5); }
+  .nv-testimonial[data-media] { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
+  .nv-testimonial__media { max-width: 12.5rem; }
+}
+.nv-testimonial[data-spotlight][data-style='plain'] { padding-block-start: 0; border-block-start: 0; }

package/templates/nova/src/components/content/TestimonialCard.tsx

@@ -0,0 +1,102 @@
+import { useRef, useState } from 'react'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { initials } from '../../styles/text'
+import { Icon } from '../../styles/Icon'
+import type { NovaImage, NovaVideo } from '@tanqory/theme-kit'
+import { Stars } from '../commerce/Stars'
+import './TestimonialCard.css'
+
+export interface TestimonialCardProps {
+  quote: string
+  name?: string
+  /** Place or role ("Bangkok"). */
+  role?: string
+  avatar?: NovaImage | null
+  /** The merchant's own 0–5 field — not review data. 0 hides the stars. */
+  rating?: number
+  /** Optional video quote: plays inline with captions; the avatar is the poster. */
+  video?: NovaVideo | null
+  showRating?: boolean
+  showAvatar?: boolean
+  quoteSize?: 'md' | 'lg'
+  cardStyle?: 'muted' | 'plain'
+  /** One large quote (testimonials columns = 1). */
+  spotlight?: boolean
+}
+
+/** Past this the quote clamps to 6 lines with Read more (12F · testimonials LONG). */
+export const QUOTE_CLAMP = 280
+
+/**
+ * 12F · a merchant-chosen quote: stars (the merchant's rating field), quote
+ * 17 / 1.6 (lg 26), then the person — photo, or initials, never a stock face.
+ * muted = card on the muted fill, radius 12; plain = a hairline rule above.
+ */
+export function TestimonialCard({ quote, name = '', role = '', avatar, rating = 0, video, showRating = true, showAvatar = true, quoteSize = 'md', cardStyle = 'muted', spotlight }: TestimonialCardProps): JSX.Element {
+  const { strings } = useNova()
+  const [open, setOpen] = useState(false)
+  const [playing, setPlaying] = useState(false)
+  const root = useRef<HTMLElement>(null)
+  const long = quote.length > QUOTE_CLAMP
+  const poster = video?.poster ?? avatar ?? null
+
+  const person = (name.trim() || role.trim()) && (
+    <figcaption className="nv-testimonial__person">
+      {showAvatar && !spotlight && (
+        <span className="nv-testimonial__avatar" aria-hidden>
+          {avatar ? <img src={avatar.src} alt="" width={avatar.width} height={avatar.height} loading="lazy" decoding="async" /> : initials(name)}
+        </span>
+      )}
+      <span className="nv-testimonial__who">
+        {name.trim() && <span className="nv-testimonial__name"><bdi>{name}</bdi></span>}
+        {role.trim() && <span className="nv-testimonial__role"><bdi>{role}</bdi></span>}
+      </span>
+    </figcaption>
+  )
+
+  const media = spotlight && video && (
+    <div className="nv-testimonial__media">
+      {playing ? (
+        <video
+          src={video.src}
+          poster={poster?.src}
+          controls
+          autoPlay
+          playsInline
+          onPlay={(e) => {
+            // One voice at a time: starting a quote pauses the others on the page.
+            document.querySelectorAll<HTMLVideoElement>('.nv-testimonial video').forEach((v) => v !== e.currentTarget && v.pause())
+          }}
+        >
+          {video.captions && <track kind="captions" src={video.captions} srcLang={video.captionsLang ?? 'en'} default />}
+        </video>
+      ) : (
+        <button type="button" className="nv-testimonial__play" onClick={() => setPlaying(true)} aria-label={fmt(strings.playVideoFrom, { name: name || strings.testimonials })}>
+          {poster && <img src={poster.src} alt="" width={poster.width} height={poster.height} loading="lazy" decoding="async" />}
+          <span className="nv-testimonial__play-icon" aria-hidden>
+            <Icon name="play" size="sm" />
+          </span>
+        </button>
+      )}
+    </div>
+  )
+
+  return (
+    <figure ref={root} className="nv-testimonial" data-style={cardStyle} data-size={quoteSize} data-spotlight={spotlight ? '' : undefined} data-media={media ? '' : undefined}>
+      {media}
+      <div className="nv-testimonial__body">
+        {showRating && rating > 0 && <Stars value={rating} />}
+        <blockquote className="nv-testimonial__quote" data-clamped={long && !open ? '' : undefined}>
+          <p><bdi>{quote}</bdi></p>
+        </blockquote>
+        {long && (
+          <button type="button" className="nv-testimonial__more" aria-expanded={open} onClick={() => setOpen((o) => !o)}>
+            {open ? strings.readLess : strings.readMore}
+          </button>
+        )}
+        {person}
+      </div>
+    </figure>
+  )
+}

package/templates/nova/src/components/content/UgcTile.css

@@ -0,0 +1,8 @@
+.nv-ugc-tile { position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--radius-media); overflow: hidden; background: var(--color-media-bg); }
+.nv-ugc-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.nv-ugc-tile__credit, .nv-ugc-tile__shop { position: absolute; inset-block-end: var(--space-2); display: inline-flex; align-items: center; min-height: 24px; max-width: calc(100% - 5rem); padding-inline: var(--space-2); border-radius: var(--radius-sm); font-size: 0.75rem; line-height: 1; font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.nv-ugc-tile__credit { inset-inline-start: var(--space-2); background: var(--color-bg); color: var(--color-fg); }
+.nv-ugc-tile__shop { inset-inline-end: var(--space-2); max-width: none; background: var(--color-fg); color: var(--color-bg); text-decoration: none; }
+.nv-ugc-tile__shop[data-sold-out] { background: var(--color-bg); color: var(--color-fg-muted); }
+.nv-ugc-tile__shop::before { content: ''; position: absolute; inset: -10px -6px; }
+.nv-ugc-tile__shop:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 2px; }

package/templates/nova/src/components/content/UgcTile.tsx

@@ -0,0 +1,33 @@
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import type { NovaImage } from '@tanqory/theme-kit'
+import './UgcTile.css'
+
+export interface UgcTileProps {
+  image: NovaImage
+  /** The credit, shown as a chip ("@ploy.home"). */
+  handle?: string
+  /** Where "Shop" goes (a product). */
+  href?: string
+  /** The linked product's title, for the link's name. */
+  productTitle?: string
+  /** The linked product is sold out: the chip says so and still opens it. */
+  soldOut?: boolean
+}
+
+/** 12F · a customer photo: square tile, @handle chip start, Shop chip end. */
+export function UgcTile({ image, handle, href, productTitle, soldOut }: UgcTileProps): JSX.Element {
+  const { strings } = useNova()
+  const credit = handle?.trim()
+  return (
+    <figure className="nv-ugc-tile">
+      <img src={image.src} srcSet={image.srcSet} alt={image.alt ?? (credit ? fmt(strings.photoBy, { handle: credit }) : '')} width={image.width} height={image.height} loading="lazy" decoding="async" />
+      {credit && <figcaption className="nv-ugc-tile__credit"><bdi>{credit}</bdi></figcaption>}
+      {href && (
+        <a className="nv-ugc-tile__shop" href={href} data-sold-out={soldOut ? '' : undefined} aria-label={productTitle ? `${fmt(strings.shopThis, { title: productTitle })}${soldOut ? ` — ${strings.soldOut}` : ''}` : undefined}>
+          {soldOut ? strings.soldOut : strings.shopChip}
+        </a>
+      )}
+    </figure>
+  )
+}

package/templates/nova/src/components/content/blocks/Button.tsx

@@ -0,0 +1,36 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import { Button } from '../../base/Button'
+import { useNova } from '../../../styles/NovaProvider'
+import { ALIGN4, PARENTS } from './shared'
+import '../../../styles/blocks.css'
+
+/** 12D · button block. */
+export const buttonSchema = defineSchema(
+  { kind: 'block', name: 'button', family: '12D', parents: PARENTS, title: 'Button', description: 'A single link styled as a button.', icon: '⬚' },
+  {
+    label: field.text('Shop now'),
+    link: field.url(''),
+    variant: field.select(['primary', 'secondary', 'ghost', 'link'], 'primary'),
+    align: field.select(ALIGN4, 'inherit'),
+  },
+)
+export type ButtonBlockProps = SettingsOf<typeof buttonSchema> & {
+  /** Set by the parent: a second primary in one column renders as secondary. */
+  demote?: boolean
+}
+
+const BUTTON_VARIANT = { primary: 'primary', secondary: 'secondary', ghost: 'ghost', link: 'tertiary' } as const
+
+export function ButtonBlock({ label, link, variant, align, demote }: ButtonBlockProps): JSX.Element | null {
+  const { mode } = useNova()
+  if (!label.trim()) return null
+  // A label AND a link: the storefront never renders a button that goes nowhere;
+  // the editor shows it disabled until it is linked.
+  if (!link.trim() && mode !== 'editor') return null
+  const v = demote && variant === 'primary' ? 'secondary' : BUTTON_VARIANT[variant]
+  return (
+    <div className="nv-block" data-block="button" data-align={align}>
+      {link.trim() ? <Button href={link} variant={v}><bdi>{label}</bdi></Button> : <Button variant={v} disabled><bdi>{label}</bdi></Button>}
+    </div>
+  )
+}

package/templates/nova/src/components/content/blocks/Column.tsx

@@ -0,0 +1,30 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import type { NovaImage, NovaVideo } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+
+/**
+ * 12D · column block (multicolumn, feature-grid-blocks) — one point: an image
+ * (wins over the icon) or an icon, a title, body and an optional link.
+ * Skipped when heading and body are both empty. video (NEW) is for the
+ * feature-grid lead tile only; the image is its poster.
+ */
+export const COLUMN_ICONS = ['none', 'truck', 'return', 'chat', 'shield', 'star', 'gift', 'leaf', 'clock', 'check', 'card'] as const
+export const columnSchema = defineSchema(
+  { kind: 'block', name: 'column', family: '12D', parents: ['multicolumn', 'feature-grid-blocks'], title: 'Column', description: 'One column of heading, text and an optional link.', icon: '▥' },
+  {
+    heading: field.text('', { extension: '12D column: the title every canvas column shows ("Small batches"); the contract lists no title row — the shared heading, as the 12D accordion block does.' }),
+    icon: field.select(COLUMN_ICONS, 'star'),
+    image: field.resource('image'),
+    video: field.resource('video'),
+    body: field.richtext(''),
+    linkLabel: field.text(''),
+    link: field.url(''),
+  },
+)
+export type ColumnSettings = SettingsOf<typeof columnSchema>
+export interface ColumnInstance {
+  settings: ColumnSettings
+  image?: NovaImage | null
+  video?: NovaVideo | null
+}
+export const columnIsEmpty = (c: ColumnInstance) => !c.settings.heading.trim() && !c.settings.body.replace(/<[^>]*>/g, '').trim()

package/templates/nova/src/components/content/blocks/Heading.tsx

@@ -0,0 +1,31 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import { ALIGN4, PARENTS } from './shared'
+import '../../../styles/blocks.css'
+import './content.css'
+
+/** 12D · heading block. */
+export const headingSchema = defineSchema(
+  { kind: 'block', name: 'heading', family: '12D', parents: PARENTS, title: 'Heading', description: 'A heading line.', icon: 'H' },
+  {
+    eyebrow: field.text('', { extension: '12A sharedApplicability · group.eyebrow is OVERRIDDEN by "heading block eyebrow".' }),
+    text: field.text('Heading'),
+    level: field.select(['h1', 'h2', 'h3', 'h4'], 'h2'),
+    size: field.select(['small', 'medium', 'large', 'display'], 'medium'),
+    align: field.select(ALIGN4, 'inherit'),
+  },
+)
+export type HeadingBlockProps = SettingsOf<typeof headingSchema>
+
+/** 12D heading.size — its own scale, not the page ladder: 20 / 28 / 40 / 64 desktop · 18 / 24 / 32 / 40 at 390 (blocks.css). */
+const HEADING_SCALE = { small: 'nv-block-h nv-block-h--small', medium: 'nv-block-h nv-block-h--medium', large: 'nv-block-h nv-block-h--large', display: 'nv-block-h nv-block-h--display' } as const
+
+export function HeadingBlock({ text, level, size, align, eyebrow }: HeadingBlockProps): JSX.Element | null {
+  if (!text.trim()) return null
+  const H = level
+  return (
+    <div className="nv-block" data-block="heading" data-align={align}>
+      {eyebrow && <p className="nv-eyebrow nv-block__eyebrow"><bdi>{eyebrow}</bdi></p>}
+      <H className={HEADING_SCALE[size]}><bdi>{text}</bdi></H>
+    </div>
+  )
+}

package/templates/nova/src/components/content/blocks/Icon.tsx

@@ -0,0 +1,25 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import { Icon, type IconName } from '../../../styles/Icon'
+import { ALIGN3 } from './shared'
+import '../../../styles/blocks.css'
+import './content.css'
+
+/** 12D · icon block. */
+export const ICON_BLOCK_OPTIONS = ['truck', 'return', 'chat', 'shield', 'star', 'gift', 'leaf', 'clock'] as const
+export const iconSchema = defineSchema(
+  { kind: 'block', name: 'icon', family: '12D', parents: ['group', 'feature-grid-blocks'], title: 'Icon', description: 'A single icon.', icon: '✶' },
+  {
+    icon: field.select(ICON_BLOCK_OPTIONS, 'star'),
+    size: field.range(32, 16, 80, 4, { snap: [16, 20, 24, 32, 48] }),
+    align: field.select(ALIGN3, 'left'),
+  },
+)
+export type IconBlockProps = SettingsOf<typeof iconSchema>
+
+export function IconBlock({ icon, size, align }: IconBlockProps): JSX.Element {
+  return (
+    <div className="nv-block" data-block="icon" data-align={align}>
+      <Icon name={icon as IconName} size={size} />
+    </div>
+  )
+}

package/templates/nova/src/components/content/blocks/Image.tsx

@@ -0,0 +1,42 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import { MediaFrame } from '../MediaFrame'
+import { useNova } from '../../../styles/NovaProvider'
+import { EditorFrame } from '../../states/EditorFrame'
+import type { NovaImage } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+import './content.css'
+
+/** 12D · image block. */
+export const imageSchema = defineSchema(
+  { kind: 'block', name: 'image', family: '12D', parents: ['group', 'feature-grid-blocks', 'image-gallery', 'product-details'], title: 'Image', description: 'One image, optionally linked and captioned.', icon: '▥' },
+  {
+    image: field.resource('image'),
+    ratio: field.select(['natural', 'square', 'portrait', 'editorial', 'wide'], 'natural'),
+    alt: field.text(''),
+    caption: field.text(''),
+    link: field.url(''),
+    rounded: field.boolean(true),
+  },
+)
+export type ImageBlockProps = SettingsOf<typeof imageSchema> & { image?: NovaImage | null }
+
+const RATIO = { natural: 'natural', square: '1 / 1', portrait: '4 / 5', editorial: '4 / 3', wide: '16 / 9' } as const
+
+export function ImageBlock({ image, ratio, alt, caption, link, rounded }: ImageBlockProps): JSX.Element | null {
+  const { mode, strings } = useNova()
+  if (!image) {
+    // Customer: collapses. Editor: setup frame.
+    return mode === 'editor' ? (
+      <div className="nv-block" data-block="image">
+        <EditorFrame section="image" title={strings.editorImage} hint={strings.editorImageHint} />
+      </div>
+    ) : null
+  }
+  const img = <MediaFrame image={{ ...image, alt: alt || image.alt }} ratio={RATIO[ratio]} rounded={rounded} decorative={Boolean(link) && !alt} />
+  return (
+    <figure className="nv-block" data-block="image">
+      {link ? <a href={link} className="nv-block__image-link">{img}</a> : img}
+      {caption && <figcaption className="nv-block__caption"><bdi>{caption}</bdi></figcaption>}
+    </figure>
+  )
+}

package/templates/nova/src/components/content/blocks/Text.tsx

@@ -0,0 +1,26 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import { RichText } from '../RichText'
+import { ALIGN4, PARENTS } from './shared'
+import '../../../styles/blocks.css'
+import './content.css'
+
+/** 12D · text block. */
+export const textSchema = defineSchema(
+  { kind: 'block', name: 'text', family: '12D', parents: PARENTS, title: 'Text', description: 'A paragraph of text.', icon: '¶' },
+  {
+    text: field.richtext('Add your text here.'),
+    size: field.select(['small', 'body', 'large'], 'body'),
+    muted: field.boolean(false),
+    align: field.select(ALIGN4, 'inherit'),
+  },
+)
+export type TextBlockProps = SettingsOf<typeof textSchema>
+
+export function TextBlock({ text, size, muted, align }: TextBlockProps): JSX.Element | null {
+  if (!text.trim()) return null
+  return (
+    <div className="nv-block" data-block="text" data-size={size} data-muted={muted ? '' : undefined} data-align={align}>
+      <RichText html={text} />
+    </div>
+  )
+}

package/templates/nova/src/components/content/blocks/Video.tsx

@@ -0,0 +1,44 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import type { NovaVideo } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+import './content.css'
+
+/** 12D · video block. */
+export const videoSchema = defineSchema(
+  { kind: 'block', name: 'video', family: '12D', parents: ['group', 'image-gallery'], title: 'Video', description: 'An embedded or uploaded video.', icon: '▷' },
+  {
+    url: field.url(''),
+    captions: field.url(''),
+    captionsLang: field.text('en'),
+    poster: field.resource('image'),
+    autoplay: field.boolean(false),
+    loop: field.boolean(false),
+    controls: field.boolean(true),
+  },
+)
+export type VideoBlockProps = Omit<SettingsOf<typeof videoSchema>, 'url'> & { video?: NovaVideo | null; url?: string }
+
+export function VideoBlock({ video, url, captions, captionsLang, autoplay, loop, controls }: VideoBlockProps): JSX.Element | null {
+  const src = video?.src ?? url
+  if (!src) return null
+  const reduced = typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+  const auto = autoplay && !reduced
+  return (
+    <div className="nv-block" data-block="video">
+      <video
+        className="nv-block__video"
+        src={src}
+        poster={video?.poster?.src}
+        autoPlay={auto}
+        muted={auto}
+        loop={loop}
+        playsInline
+        // Controls are forced on when autoplay is off (12D video.controls).
+        controls={controls || !auto}
+        preload="metadata"
+      >
+        {(video?.captions ?? captions) && <track kind="captions" src={video?.captions ?? captions} srcLang={video?.captionsLang ?? captionsLang} default />}
+      </video>
+    </div>
+  )
+}