create-tanqory-theme 0.0.0-stage → 0.2.2

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

@@ -0,0 +1,6 @@
+import type { SectionPreset } from '@tanqory/theme-kit'
+/** What "Add section" offers as starting points. */
+export const presets: readonly SectionPreset[] = [
+  // Wayfinding under the header
+  {"name": "breadcrumbs-standard", "label": "Breadcrumbs", "settings": {"separator": "/", "mobileStyle": "back-link", "showCurrent": true, "spacingTop": "small", "spacingBottom": "none"}, "blocks": []},
+]

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

@@ -0,0 +1,24 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12A · 06 breadcrumbs — a quiet 13px trail under the header, aligned to the
+ * section below. On phone it becomes a single back link, so the current title
+ * is never truncated. Route data only: no trail on home or 404 (fewer than
+ * two items). Editor with no route context: a sample trail + the neutral chip.
+ * Emits BreadcrumbList structured data.
+ */
+export const breadcrumbsSchema = defineSchema(
+  { kind: 'section', name: 'breadcrumbs', family: '12A' },
+  {
+    separator: field.select(['/', '›'], '/'),
+    mobileStyle: field.select(['back-link', 'full'], 'back-link'),
+    showCurrent: field.boolean(true),
+    sectionWidth: shared.sectionWidth('wide'),
+    spacingTop: shared.spacingTop('small'),
+    spacingBottom: shared.spacingBottom('none'),
+    background: shared.background('surface'),
+    hideOnMobile: shared.hideOnMobileLegacy(),
+    anchorId: shared.anchorIdLegacy(),
+  },
+)

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

@@ -0,0 +1,170 @@
+import { useEffect, useId, useState } from 'react'
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { CartLine } from '../../components/commerce/CartLine'
+import { CartSummary } from '../../components/commerce/CartSummary'
+import { ProductCard } from '../../components/commerce/ProductCard'
+import type { CartBadgeSettings } from './blocks/CartBadge'
+import { Button } from '../../components/base/Button'
+import { Textarea } from '../../components/base/Textarea'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import type { Cart, CartLine as CartLineData, CartLineRefusal, Collection, Money, PaymentMethod } from '@tanqory/theme-kit'
+import { Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/utility.css'
+import { cartItemsSchema } from './schema'
+
+export type CartItemsSettings = SettingsOf<typeof cartItemsSchema>
+export interface CartItemsProps extends CartItemsSettings {
+  cart?: Cart | null
+  /** The checkout app. */
+  checkoutUrl?: string
+  checkoutError?: boolean
+  /** Lines the host is updating (dimmed, stepper disabled). */
+  updatingLineIds?: readonly string[]
+  /** Lines whose last quantity change the store refused for its add-to-cart limit, by line id. */
+  refusedLines?: Readonly<Record<string, CartLineRefusal>>
+  onQuantity?: (line: CartLineData, quantity: number) => void
+  onRemove?: (line: CartLineData) => void
+  /** Undo within 5 s of a remove. */
+  onUndo?: (line: CartLineData) => void
+  onNoteChange?: (note: string) => void
+  badges?: CartBadgeSettings[]
+  paymentMethods?: readonly PaymentMethod[]
+  /** The emptyStateCollection, resolved. */
+  emptyCollection?: Collection | null
+  continueUrl?: string
+  /** Why a cart permalink the store could not open landed here (`unavailable`, `failed`), else null. */
+  cartLink?: string | null
+  /** The store's prices include tax (Settings › Taxes). */
+  taxesIncluded?: boolean
+}
+
+const UNDO_MS = 5000
+
+export function savingsOf(cart: Cart): Money | null {
+  const amount = cart.lines.reduce((s, l) => s + Math.max(0, (l.cost.compareAtTotal?.amount ?? l.cost.total.amount) - l.cost.total.amount), 0)
+  return amount > 0 ? { amount, currencyCode: cart.subtotal.currencyCode } : null
+}
+
+export function CartItems(props: CartItemsProps): JSX.Element {
+  const { buttonLabel, showLineCompareAt, showVendor, enableNote, notePlaceholder, summaryNote, showPaymentIcons, showColumnHeaders, summaryPosition, sectionWidth, heading, headerSize, cart, checkoutUrl = '/checkout', checkoutError, updatingLineIds = [], refusedLines = {}, onQuantity, onRemove, onUndo, onNoteChange, badges = [], paymentMethods = [], emptyCollection, continueUrl = '/collections/all', cartLink, taxesIncluded } = props
+  const { strings } = useNova()
+  const [removed, setRemoved] = useState<CartLineData | null>(null)
+  useEffect(() => {
+    if (!removed) return
+    const t = window.setTimeout(() => setRemoved(null), UNDO_MS)
+    return () => window.clearTimeout(t)
+  }, [removed])
+  const title = heading.trim() || strings.cart
+  const noteId = useId()
+
+  if (!cart || cart.lines.length === 0) {
+    const products = emptyCollection?.products?.slice(0, 4) ?? []
+    return (
+      <Shell props={props} type="cart-items" width={sectionWidth} className="nv-cart" data-empty="">
+        <div className="nv-cart__empty">
+          <h1 className="nv-cart__title" data-size={headerSize}>{strings.cartEmpty}</h1>
+          {cartLink
+            ? <p className="nv-cart__empty-hint" role="alert">{strings.cartLinkEmptyHint}</p>
+            : <p className="nv-cart__empty-hint">{strings.cartEmptyHint}</p>}
+          <Button href={emptyCollection?.url ?? continueUrl} size="lg">
+            {cartLink ? strings.continueShopping : emptyCollection ? fmt(strings.shopThis, { title: emptyCollection.title }) : strings.shopAllProducts}
+          </Button>
+          {removed && <p className="nv-cart__removed" role="status">{fmt(strings.removedNamed, { title: removed.product.title })}</p>}
+        </div>
+        {products.length > 0 && (
+          <div className="nv-cart__suggest">
+            <h2 className="nv-cart__suggest-title"><bdi>{emptyCollection!.title}</bdi></h2>
+            <ul className="nv-cart__suggest-grid">
+              {products.map((p) => (
+                <li key={p.id}>
+                  <ProductCard product={p} showSwatches={false} />
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </Shell>
+    )
+  }
+
+  return (
+    <Shell props={props} type="cart-items" width={sectionWidth} className="nv-cart" data-summary={summaryPosition}>
+      <div className="nv-cart__head">
+        <h1 className="nv-cart__title" data-size={headerSize}><bdi>{title}</bdi></h1>
+        <a className="nv-cart__continue" href={continueUrl}>
+          {strings.continueShopping}
+        </a>
+      </div>
+      <div className="nv-cart__grid">
+        <div className="nv-cart__lines">
+          {showColumnHeaders && (
+            <div className="nv-cart__cols" aria-hidden>
+              <span>{strings.product}</span>
+              <span>{strings.quantity}</span>
+              <span>{strings.total}</span>
+            </div>
+          )}
+          <ul className="nv-cart__list" aria-label={strings.cartItems}>
+            {cart.lines.map((l) => (
+              <li key={l.id}>
+                <CartLine
+                  line={l}
+                  showCompareAt={showLineCompareAt}
+                  showVendor={showVendor}
+                  updating={updatingLineIds.includes(l.id)}
+                  refusal={Object.prototype.hasOwnProperty.call(refusedLines, l.id) ? refusedLines[l.id] : undefined}
+                  onQuantity={onQuantity}
+                  onRemove={(line) => {
+                    setRemoved(line)
+                    onRemove?.(line)
+                  }}
+                />
+              </li>
+            ))}
+          </ul>
+          {removed && (
+            <p className="nv-cart__removed" role="status">
+              {fmt(strings.removedNamed, { title: removed.product.title })}
+              {onUndo && (
+                <>
+                  {' · '}
+                  <button
+                    type="button"
+                    onClick={() => {
+                      onUndo(removed)
+                      setRemoved(null)
+                    }}
+                  >
+                    {strings.undo}
+                  </button>
+                </>
+              )}
+            </p>
+          )}
+          {enableNote && (
+            <div className="nv-cart__note">
+              <label htmlFor={noteId}>{strings.orderNote}</label>
+              <Textarea id={noteId} name="note" rows={3} placeholder={notePlaceholder} defaultValue={cart.note} onChange={(e) => onNoteChange?.(e.target.value)} />
+            </div>
+          )}
+        </div>
+        <aside className="nv-cart__summary" aria-label={strings.summary}>
+          <CartSummary
+            subtotal={cart.subtotal}
+            savings={showLineCompareAt ? savingsOf(cart) : null}
+            note={summaryNote}
+            taxNote={taxesIncluded ? strings.taxIncludedShippingAtCheckout : undefined}
+            checkoutLabel={buttonLabel.trim() || strings.checkout}
+            checkoutUrl={checkoutUrl}
+            checkoutError={checkoutError}
+            paymentMethods={showPaymentIcons ? paymentMethods : []}
+            badges={badges.filter((b) => b.label.trim()).slice(0, 3).map((b) => ({ label: b.label, link: b.link.trim() || undefined }))}
+            pinOnPhone
+          />
+        </aside>
+      </div>
+    </Shell>
+  )
+}

package/templates/nova/src/sections/CartItems/blocks/CartBadge.tsx

@@ -0,0 +1,14 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+
+const REUSE = '12G lists the 12C badge block under cart-items with no rows of its own ("✓ + label" under the summary): label and link carry over; icon and detail do not show there.'
+
+/** 12G · badge block in cart-items — a trust line under the summary (✓ + label), max 3. Skipped when the label is empty. */
+export const cartBadgeSchema = defineSchema(
+  { kind: 'block', name: 'badge', family: '12G', parents: ['cart-items'], title: 'Badge', description: 'One guarantee or reassurance: icon, label and a short detail.', icon: '◈' },
+  {
+    label: field.text('', { extension: REUSE }),
+    link: field.url('', { extension: REUSE }),
+  },
+)
+export type CartBadgeSettings = SettingsOf<typeof cartBadgeSchema>

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

@@ -0,0 +1,37 @@
+import { collectionFor, defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { blocksOf } from '../data'
+import { CartItems } from './CartItems'
+import { cartBadgeSchema } from './blocks/CartBadge'
+import { presets } from './presets'
+import { cartItemsSchema } from './schema'
+
+export default defineSection({
+  id: 'cart-items',
+  schema: cartItemsSchema,
+  blocks: [cartBadgeSchema],
+  component: CartItems,
+  category: 'commerce',
+  zone: 'main',
+  title: 'Cart items',
+  description: 'Everything in the cart, with quantities and totals.',
+  icon: '⊞',
+  requiresContext: ['cart'],
+  presets,
+  data: (node, store, { actions, context }) => {
+      // buttonLink (LEGACY-HIDDEN) is read and ignored: checkout always opens the checkout app.
+      const r = resolveSettings(cartItemsSchema, node.settings)
+      const issues = [...r.issues]
+      const badges = blocksOf(node, 'badge').map((b) => {
+        const br = resolveSettings(cartBadgeSchema, b.settings)
+        issues.push(...br.issues)
+        return br.settings
+      })
+      return { ...r.settings, cart: store.currentCart ?? null, checkoutUrl: store.checkoutUrl, cartLink: store.cartLink ?? null, badges, paymentMethods: store.shop.paymentMethods ?? [], emptyCollection: collectionFor(store, r.handles.emptyStateCollection).collection, taxesIncluded: store.shop.taxesIncluded === true,
+      onQuantity: (line: { id: string }, quantity: number) => actions.cart.setQuantity(line.id, quantity),
+      onRemove: (line: { id: string }) => actions.cart.remove(line.id),
+      onNoteChange: (note: string) => actions.cart.setNote(note),
+      updatingLineIds: context.busyLines,
+      refusedLines: context.refusedLines,
+    }
+  },
+})

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

@@ -0,0 +1,8 @@
+import type { SectionPreset } from '@tanqory/theme-kit'
+/** What "Add section" offers as starting points. */
+export const presets: readonly SectionPreset[] = [
+  // Default cart page
+  {"name": "cart-standard", "label": "Cart", "settings": {"summaryPosition": "right", "enableNote": true, "showPaymentIcons": true}, "blocks": []},
+  // Few items, single column
+  {"name": "cart-simple", "label": "Simple cart", "settings": {"summaryPosition": "below", "showColumnHeaders": false}, "blocks": []},
+]

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

@@ -0,0 +1,34 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12G · 01 cart-items (EXISTING · CHANGED) — lines left, a sticky summary
+ * right (or below) with the one primary action. Checkout always opens the
+ * checkout app: the saved buttonLink is ignored (LEGACY-HIDDEN, 12G
+ * conflict 1). The empty cart is a real page: message, a way back in, and
+ * the merchant's chosen collection.
+ */
+export const cartItemsSchema = defineSchema(
+  { kind: 'section', name: 'cart-items', family: '12G', blocks: ['badge'] },
+  {
+    buttonLabel: field.text('Checkout'),
+    buttonLink: field.url('', { legacyHidden: true }),
+    showLineCompareAt: field.boolean(true),
+    showVendor: field.boolean(false),
+    enableNote: field.boolean(true),
+    notePlaceholder: field.text('Add a note for our packers'),
+    summaryNote: field.text(''),
+    showPaymentIcons: field.boolean(true),
+    showColumnHeaders: field.boolean(true),
+    summaryPosition: field.select(['right', 'below'], 'right'),
+    emptyStateCollection: field.resource('collection'),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('wide'),
+    spacingTop: shared.spacingTop('medium'),
+    spacingBottom: shared.spacingBottom('large'),
+    background: shared.background('surface'),
+    heading: shared.heading('Cart'),
+    headerSize: shared.headerSize('large'),
+    anchorId: shared.anchorId(),
+  },
+)

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

@@ -0,0 +1,120 @@
+import { useEffect, useRef, useState } from 'react'
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { HeroFrame } from '../../components/content/HeroFrame'
+import { RichText } from '../../components/content/RichText'
+import { scrimAlpha } from '../../components/content/HeroCopy'
+import { Breadcrumb } from '../../components/navigation/Breadcrumb'
+import { HeroMedia } from '../../components/content/HeroMedia'
+import { useNova } from '../../styles/NovaProvider'
+import { EditorFrame } from '../../components/states/EditorFrame'
+import type { BreadcrumbItem, Collection, NovaImage } from '@tanqory/theme-kit'
+import { sectionRootProps } from '../../components/section/shared'
+import '../../components/section/shared.css'
+import '../../styles/sections/promotion.css'
+import { collectionBannerSchema } from './schema'
+
+export type CollectionBannerSettings = SettingsOf<typeof collectionBannerSchema>
+export interface CollectionBannerProps extends CollectionBannerSettings {
+  collection?: Collection | null
+  fallbackImage?: NovaImage | null
+  /** The route's trail (home → … → this collection). */
+  breadcrumbs?: BreadcrumbItem[]
+  /** The saved collection exists but is unpublished or deleted (adapter). */
+  collectionUnavailable?: boolean
+  priority?: boolean
+}
+
+export function CollectionBanner(props: CollectionBannerProps): JSX.Element | null {
+  const { collection, fallbackImage, height, overlayOpacity, showDescription, showBreadcrumb, contentPosition, pageHeading, sectionWidth, contentWidth, headerSize, breadcrumbs = [], collectionUnavailable, priority = true } = props
+  const { mode, strings } = useNova()
+  const [imageFailed, setImageFailed] = useState(false)
+  const [expanded, setExpanded] = useState(false)
+  const [clamped, setClamped] = useState(false)
+  const desc = useRef<HTMLDivElement>(null)
+
+  const description = collection?.description?.trim() ?? ''
+  useEffect(() => {
+    const el = desc.current
+    if (!el) return
+    const measure = () => setClamped(el.scrollHeight > el.clientHeight + 1)
+    measure()
+    // Again once laid out and once web fonts land (wrapping changes).
+    const frame = requestAnimationFrame(measure)
+    document.fonts?.ready.then(measure)
+    if (typeof ResizeObserver === 'undefined') return () => cancelAnimationFrame(frame)
+    const ro = new ResizeObserver(measure)
+    ro.observe(el)
+    if (el.parentElement) ro.observe(el.parentElement)
+    return () => {
+      cancelAnimationFrame(frame)
+      ro.disconnect()
+    }
+  }, [description, showDescription])
+
+  if (!collection) {
+    if (mode !== 'editor') return null
+    return (
+      <section {...sectionRootProps(props, 'collection-banner')} className="nv-collection-banner" data-kind="text">
+        <div className="nv-promo-container" data-width={sectionWidth}>
+          <EditorFrame
+            section="collection-banner"
+            title={collectionUnavailable ? strings.editorCollectionUnavailable : strings.editorChooseCollection}
+            hint={collectionUnavailable ? strings.editorCollectionUnavailableHint : strings.editorChooseCollectionHint}
+          />
+        </div>
+      </section>
+    )
+  }
+
+  const image = !imageFailed ? (collection.image ?? fallbackImage ?? null) : null
+  const H = pageHeading ? 'h1' : 'h2'
+  const trail = showBreadcrumb && breadcrumbs.length >= 2 ? breadcrumbs : null
+  const hasDescription = showDescription && Boolean(description)
+  const center = contentPosition === 'center'
+  const copy = (
+    <div className="nv-collection-banner__copy nv-media-frame__copy" data-align={center ? 'center' : 'left'} data-width={contentWidth} data-nv-surface={image ? 'inverse' : undefined}>
+      {trail && <Breadcrumb items={trail} showCurrent={false} />}
+      <H className="nv-collection-banner__title" data-size={headerSize}>
+        <bdi>{collection.title}</bdi>
+      </H>
+      {hasDescription && (
+        <>
+          <div ref={desc} id={`${collection.handle}-banner-desc`} className="nv-collection-banner__desc" data-expanded={expanded ? '' : undefined}>
+            <RichText html={description} />
+          </div>
+          {(clamped || expanded) && (
+            <button type="button" className="nv-collection-banner__more" aria-expanded={expanded} aria-controls={`${collection.handle}-banner-desc`} onClick={() => setExpanded((e) => !e)}>
+              {expanded ? strings.readLess : strings.readMore}
+            </button>
+          )}
+        </>
+      )}
+    </div>
+  )
+
+  if (!image) {
+    return (
+      <section {...sectionRootProps(props, 'collection-banner')} className="nv-collection-banner" data-kind="text">
+        <div className="nv-promo-container" data-width={sectionWidth}>
+          <div className="nv-collection-banner__text">{copy}</div>
+        </div>
+      </section>
+    )
+  }
+
+  return (
+    <section {...sectionRootProps(props, 'collection-banner')} className="nv-collection-banner" data-kind="image" data-height={height}>
+      <div className="nv-promo-container" data-width={sectionWidth}>
+        <HeroFrame
+          position={contentPosition}
+          align={center ? 'center' : 'left'}
+          // The trail (13px) and the description are body text on the image: floor 62.
+          scrim={scrimAlpha(overlayOpacity, hasDescription || Boolean(trail))}
+          media={<HeroMedia image={image} priority={priority} onImageError={() => setImageFailed(true)} />}
+        >
+          {copy}
+        </HeroFrame>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,25 @@
+import { defineSection, imageFor, resolveSettings } from '@tanqory/theme-kit'
+import { CollectionBanner } from './CollectionBanner'
+import { presets } from './presets'
+import { collectionBannerSchema } from './schema'
+
+export default defineSection({
+  id: 'collection-banner',
+  schema: collectionBannerSchema,
+  component: CollectionBanner,
+  category: 'commerce',
+  zone: 'main',
+  title: 'Collection banner',
+  description: 'A hero for the current collection, from the collection\'s own image and text.',
+  icon: '▤',
+  requiresContext: ['collection'],
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(collectionBannerSchema, node.settings)
+      const handle = r.handles.collection
+      const unavailable = Boolean(handle && store.unavailableCollections?.includes(handle))
+      // Defaults to the current collection on collection templates.
+      const collection = unavailable ? null : handle ? (store.collections?.[handle] ?? null) : (store.currentCollection ?? null)
+      return { ...r.settings, collection, fallbackImage: imageFor(store, r.handles.fallbackImage), breadcrumbs: store.breadcrumbs, collectionUnavailable: unavailable }
+  },
+})

package/templates/nova/src/sections/CollectionBanner/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 collection header
+  {"name": "banner-image", "label": "Image banner", "settings": {"height": "md", "contentPosition": "bottom-start", "showDescription": true, "showBreadcrumb": true, "pageHeading": true}, "blocks": []},
+  // Large catalogues — products sooner
+  {"name": "banner-compact", "label": "Compact", "settings": {"height": "compact", "contentPosition": "center", "showDescription": false, "pageHeading": true}, "blocks": []},
+  // Collections without imagery
+  {"name": "banner-text", "label": "Text only", "settings": {"background": "surface-secondary", "showDescription": true, "pageHeading": true}, "blocks": []},
+]

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

@@ -0,0 +1,37 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12B · 06 collection-banner — the top of a collection page: image, title,
+ * description and trail, all from the collection (nothing typed twice).
+ * Shorter than a hero on purpose (320 / 440 / 560; 390: 280 / 360 / 480).
+ *
+ *   no image and no fallback → a calm text banner, never a grey box
+ *   pageHeading on → the title is the page's h1 (turn main-collection's
+ *   header off); description clamps to 3 lines at 390 with "Read more"
+ *   the trail follows the 12A breadcrumbs rules (a back link at 390)
+ *   no collection → nothing (editor: "Choose a collection")
+ */
+export const collectionBannerSchema = defineSchema(
+  { kind: 'section', name: 'collection-banner', family: '12B' },
+  {
+    collection: field.resource('collection'),
+    fallbackImage: field.resource('image'),
+    height: field.select(['compact', 'md', 'lg'], 'md'),
+    overlayOpacity: field.range(40, 0, 80, 5),
+    showDescription: field.boolean(true),
+    showBreadcrumb: field.boolean(true),
+    contentPosition: field.select(['bottom-start', 'center'], 'bottom-start'),
+    pageHeading: field.boolean(false),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('full'),
+    contentWidth: shared.contentWidth('content'),
+    spacingTop: shared.spacingTop('none'),
+    spacingBottom: shared.spacingBottom('none'),
+    background: shared.background('surface'),
+    headerSize: shared.headerSize('medium'),
+    mobileContentAlignment: shared.mobileContentAlignment('inherit'),
+    hideOnMobile: shared.hideOnMobile(),
+    anchorId: shared.anchorId(),
+  },
+)

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

@@ -0,0 +1,47 @@
+import { sx, sxJoin } from '@tanqory/theme-kit'
+import { useState, type CSSProperties } from 'react'
+import { type SettingsOf } from '@tanqory/theme-kit'
+import { SectionHead } from '../../components/content/SectionHead'
+import { Icon } from '../../styles/Icon'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import type { NovaMenu } from '@tanqory/theme-kit'
+import { EmptySection, Shell } from '../../components/section/shell'
+import '../../components/section/shared.css'
+import '../../styles/sections/content.css'
+import { collectionLinksSchema } from './schema'
+
+export type CollectionLinksSettings = SettingsOf<typeof collectionLinksSchema>
+export interface CollectionLinksProps extends CollectionLinksSettings {
+  menu?: NovaMenu | null
+}
+
+export function CollectionLinks(props: CollectionLinksProps): JSX.Element | null {
+  const { style, listSize, columns, limit, sectionWidth, contentWidth, contentAlignment, heading, eyebrow, headerSize, menu } = props
+  const { strings } = useNova()
+  const [all, setAll] = useState(false)
+  const links = (menu?.items ?? []).filter((l) => l.url)
+  if (!links.length) return <EmptySection props={props} type="collection-links" width={sectionWidth} title={strings.editorAddCollections} />
+  const shown = all ? links : links.slice(0, limit)
+  const more = links.length - shown.length
+  return (
+    <Shell props={props} type="collection-links" width={sectionWidth} className="nv-links" data-style={style} data-size={listSize} data-measure={contentWidth}>
+      <SectionHead eyebrow={eyebrow} heading={heading} headerSize={headerSize} align={contentAlignment} />
+      <ul className={sxJoin("nv-links__list", sx({ '--nv-cols': columns } as CSSProperties))} data-align={contentAlignment}>
+        {shown.map((l) => (
+          <li key={l.url + l.title}>
+            <a className="nv-links__link" href={l.url!}>
+              <span><bdi>{l.title}</bdi></span>
+              {style === 'list' && <Icon name="arrow-right" size="sm" className="nv-dir" />}
+            </a>
+          </li>
+        ))}
+      </ul>
+      {more > 0 && (
+        <button type="button" className="nv-links__more" aria-expanded={all} onClick={() => setAll(true)}>
+          {fmt(strings.showAllLinks, { count: links.length })}
+        </button>
+      )}
+    </Shell>
+  )
+}

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

@@ -0,0 +1,20 @@
+import { defineSection, menuFor, resolveSettings } from '@tanqory/theme-kit'
+import { CollectionLinks } from './CollectionLinks'
+import { presets } from './presets'
+import { collectionLinksSchema } from './schema'
+
+export default defineSection({
+  id: 'collection-links',
+  schema: collectionLinksSchema,
+  component: CollectionLinks,
+  category: 'content',
+  zone: 'main',
+  title: 'Collection links',
+  description: 'Quick links to a few collections.',
+  icon: '▦',
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(collectionLinksSchema, node.settings)
+      return { ...r.settings, menu: menuFor(store, r.handles.source) }
+  },
+})

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

@@ -0,0 +1,8 @@
+import type { SectionPreset } from '@tanqory/theme-kit'
+/** What "Add section" offers as starting points. */
+export const presets: readonly SectionPreset[] = [
+  // Quick links row
+  {"name": "cl-chips", "label": "Category chips", "settings": {"style": "chips", "limit": 8}, "blocks": []},
+  // Large text index of categories
+  {"name": "cl-index", "label": "Editorial index", "settings": {"style": "list", "listSize": "large", "columns": 2}, "blocks": []},
+]

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

@@ -0,0 +1,33 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12D · 07 collection-links — the text-first way into categories (no images,
+ * or too many for tiles). Links come from a menu.
+ *   chips — 40 tall (44 at 390), pill radius; they scroll sideways at 390
+ *   list  — 18 / 22 links with an arrow, 1–5 columns (1 at 390)
+ * Links over `limit` sit behind "Show all n".
+ */
+export const collectionLinksSchema = defineSchema(
+  { kind: 'section', name: 'collection-links', family: '12D' },
+  {
+    source: field.resource('menu'),
+    style: field.select(['chips', 'list'], 'chips'),
+    listSize: field.select(['medium', 'large'], 'large'),
+    columns: field.range(1, 1, 5, 1),
+    limit: field.range(6, 2, 12, 1),
+    // Shared Nova 12 vocabulary (12A · 00) — sharedApplicability APPLIES.
+    sectionWidth: shared.sectionWidth('wide'),
+    contentWidth: shared.contentWidth('standard'),
+    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('small'),
+    hideOnMobile: shared.hideOnMobile(),
+    anchorId: shared.anchorId(),
+  },
+)