create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/src/sections/Footer/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 footer for catalogues
+  {"name": "footer-full", "label": "Full store", "settings": {"layout": "columns", "background": "surface-secondary", "mobileMenus": "accordion"}, "blocks": [{"type": "footer-brand", "settings": {}}, {"type": "footer-menu", "settings": {"heading": "Shop"}}, {"type": "footer-menu", "settings": {"heading": "Help"}}, {"type": "footer-menu", "settings": {"heading": "Company"}}]},
+  // Small stores, landing pages
+  {"name": "footer-minimal", "label": "Minimal", "settings": {"layout": "centered", "background": "surface"}, "blocks": [{"type": "footer-brand", "settings": {}}, {"type": "footer-menu", "settings": {}}]},
+  // Stores building a list
+  {"name": "footer-newsletter", "label": "Newsletter-led", "settings": {"layout": "columns", "background": "primary"}, "blocks": [{"type": "newsletter-signup", "settings": {}}, {"type": "footer-menu", "settings": {"heading": "Shop"}}, {"type": "footer-menu", "settings": {"heading": "Help"}}, {"type": "footer-menu", "settings": {"heading": "Company"}}]},
+]

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

@@ -0,0 +1,27 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { BACKGROUND } from '../../components/section/shared'
+
+/**
+ * 12A · 03 footer (.dc canonical) — muted band, brand block + up to four
+ * menus on a 12-column grid (brand 4/12, menus 2/12), a hairline, then two
+ * FIXED rows that are not blocks:
+ *   utility  social marks left · region control | 24px rule | payment marks right
+ *   legal    © + legal links + Cookie preferences left (13px) · "Made with
+ *            Tanqory" right, quieter
+ * At 390: brand → menus/text as 56px accordion rows → social → region (48)
+ * → payment → legal links → © → Made with Tanqory.
+ */
+export const footerSchema = defineSchema(
+  { kind: 'section', name: 'footer', family: '12A', blocks: ['footer-brand', 'footer-menu', 'footer-text', 'social-links', 'payment-icons', 'newsletter-signup', 'footer-line'], legacyBlocks: ['newsletter'] },
+  {
+    background: field.select(BACKGROUND, 'surface-secondary'),
+    layout: field.select(['columns', 'centered'], 'columns'),
+    mobileMenus: field.select(['accordion', 'stacked'], 'accordion'),
+    showSocial: field.boolean(true),
+    showPayment: field.boolean(true),
+    showLocale: field.boolean(true),
+    legalMenu: field.resource('menu', ''),
+    showPoweredBy: field.boolean(true),
+    poweredByLabel: field.text('Made with Tanqory'),
+  },
+)

package/templates/nova/src/sections/Group/Group.css

@@ -0,0 +1,59 @@
+.nv-group__container { width: 100%; margin-inline: auto; padding-inline: var(--page-gutter); }
+.nv-group[data-width='standard'] .nv-group__container { max-width: calc(var(--container-standard) + 2 * var(--page-gutter)); }
+.nv-group[data-width='wide'] .nv-group__container { max-width: calc(var(--container-wide) + 2 * var(--page-gutter)); }
+/* One column: the text measure (640 / 960 / 1280). */
+.nv-group[data-content-width='narrow'] .nv-group__grid { max-width: var(--container-narrow); }
+.nv-group[data-content-width='content'] .nv-group__grid { max-width: var(--container-content); }
+.nv-group[data-content-width='standard'] .nv-group__grid { max-width: var(--container-standard); }
+.nv-group[data-align='center'] .nv-group__grid { margin-inline: auto; }
+.nv-group[data-align='center'] :is(.nv-group__buttons, .nv-social, .nv-payments) { justify-content: center; }
+
+/* innerGap 24 / 40 / 64, one rung smaller at 390; stacked → row gap 32. */
+.nv-group { --nv-gap: 4rem; }
+.nv-group[data-gap='small'] { --nv-gap: 1.5rem; }
+.nv-group[data-gap='medium'] { --nv-gap: 2.5rem; }
+.nv-group__grid { display: grid; gap: var(--space-6); }
+
+@media (min-width: 1024px) {
+  .nv-group__grid { grid-template-columns: repeat(var(--nv-cols, 1), minmax(0, 1fr)); column-gap: var(--nv-gap); row-gap: var(--nv-gap); }
+  .nv-group[data-columns='2'] { --nv-cols: 2; }
+  .nv-group[data-columns='3'] { --nv-cols: 3; }
+  .nv-group[data-columns='4'] { --nv-cols: 4; }
+  .nv-group[data-ratio='wide-start'] .nv-group__grid { grid-template-columns: 7fr 5fr; }
+  .nv-group[data-ratio='wide-end'] .nv-group__grid { grid-template-columns: 5fr 7fr; }
+  .nv-group[data-valign='center'] .nv-group__grid { align-items: center; }
+  .nv-group[data-valign='start'] .nv-group__grid { align-items: start; }
+}
+@media (min-width: 640px) and (max-width: 1023.98px) {
+  .nv-group[data-columns='4'] .nv-group__grid, .nv-group[data-columns='3'] .nv-group__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+/* 390: one column, except columns 4 (icon/logo rows) → 2. */
+@media (max-width: 639.98px) {
+  .nv-group[data-columns='4'] .nv-group__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
+}
+@media (max-width: 1023.98px) {
+  .nv-group[data-mobile-order='reverse'] .nv-group__cell:first-child { order: 2; }
+}
+
+/* Pair spacing — the parent owns it (04C): heading→text 12, text→button 24,
+   button→button 8 (one row), any→image 32, default 16. */
+.nv-group__cell { display: flex; flex-direction: column; min-width: 0; }
+.nv-group__cell > * + * { margin-top: var(--space-4); }
+.nv-group__cell > [data-block='heading'] + [data-block='text'] { margin-top: var(--space-3); }
+.nv-group__cell > [data-block='text'] + [data-block='text'] { margin-top: var(--space-3); }
+.nv-group__cell > * + [data-block='buttons'] { margin-top: var(--space-5); }
+.nv-group__cell > * + :is([data-block='image'], [data-block='video']) { margin-top: var(--space-6); }
+.nv-group__cell > [data-block='icon'] + * { margin-top: var(--space-3); }
+.nv-group__cell > [data-block='accordion'] + [data-block='accordion'] { margin-top: 0; }
+.nv-group__cell > [data-block='accordion'] .nv-accordion__item { border-top: var(--border-subtle); border-bottom: 0; }
+.nv-group__cell > [data-block='accordion']:last-child .nv-accordion__item { border-bottom: var(--border-subtle); }
+.nv-group__cell > [data-block='spacer'] + *, .nv-group__cell > * + [data-block='spacer'] { margin-top: 0; }
+.nv-group__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
+.nv-group__buttons [data-block='button'] { display: contents; }
+/* A lone button is full width at 390. */
+@media (max-width: 639.98px) {
+  .nv-group__buttons:has(> [data-block='button']:only-child) .nv-btn:not([data-variant='tertiary']) { width: 100%; }
+}
+/* "three points" rows: icon + heading + text columns carry a hairline above. */
+.nv-group[data-valign='start'][data-columns='3'] .nv-group__cell,
+.nv-group[data-valign='start'][data-columns='4'] .nv-group__cell { padding-top: var(--space-4); border-top: var(--border-subtle); }

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

@@ -0,0 +1,167 @@
+import type { ReactNode } from 'react'
+import { resolveSettings, type SettingsOf } from '@tanqory/theme-kit'
+import { Button } from '../../components/base/Button'
+import { useNova } from '../../styles/NovaProvider'
+import { EditorFrame } from '../../components/states/EditorFrame'
+import { AccordionBlock, accordionSchema } from './blocks/Accordion'
+import { ButtonBlock, buttonSchema } from '../../components/content/blocks/Button'
+import { HeadingBlock, headingSchema } from '../../components/content/blocks/Heading'
+import { IconBlock, iconSchema } from '../../components/content/blocks/Icon'
+import { ImageBlock, imageSchema } from '../../components/content/blocks/Image'
+import { JumboTextBlock, jumboTextSchema } from './blocks/JumboText'
+import { NewsletterBlock, newsletterBlockSchema } from '../../components/forms/blocks/Newsletter'
+import { PaymentIconsBlock, paymentIconsSchema } from '../../components/commerce/blocks/PaymentIcons'
+import { SocialLinksBlock, socialLinksSchema } from '../../components/navigation/blocks/SocialLinks'
+import { SpacerBlock, spacerSchema } from './blocks/Spacer'
+import { TextBlock, textSchema } from '../../components/content/blocks/Text'
+import { VideoBlock, videoSchema } from '../../components/content/blocks/Video'
+import { type BlockInstance } from '../data'
+import type { NovaShop } from '@tanqory/theme-kit'
+import { sectionRootProps } from '../../components/section/shared'
+import '../../components/section/shared.css'
+import './Group.css'
+import { GROUP_BLOCKS, groupSchema } from './schema'
+
+export type GroupSettings = SettingsOf<typeof groupSchema>
+export type GroupBlock = Extract<BlockInstance, { type: (typeof GROUP_BLOCKS)[number] }>
+
+export interface GroupProps extends GroupSettings {
+  blocks?: GroupBlock[]
+  /** Brand data for social-links / payment-icons blocks that fall back to the store's. */
+  shop?: NovaShop
+}
+
+const MEDIA = new Set(['image', 'video'])
+
+function renderBlock(b: GroupBlock, i: number, ctx: { headerSize: GroupSettings['headerSize']; demote: boolean; shop?: NovaShop }): ReactNode {
+  const key = `${b.type}-${i}`
+  switch (b.type) {
+    case 'heading': {
+      const s = resolveSettings(headingSchema, { size: ctx.headerSize, ...b.settings }).settings
+      return <HeadingBlock key={key} {...s} />
+    }
+    case 'text':
+      return <TextBlock key={key} {...resolveSettings(textSchema, b.settings).settings} />
+    case 'button':
+      return <ButtonBlock key={key} {...resolveSettings(buttonSchema, b.settings).settings} demote={ctx.demote} />
+    case 'image':
+      return <ImageBlock key={key} {...resolveSettings(imageSchema, b.settings).settings} image={b.image} />
+    case 'icon':
+      return <IconBlock key={key} {...resolveSettings(iconSchema, b.settings).settings} />
+    case 'spacer':
+      return <SpacerBlock key={key} {...resolveSettings(spacerSchema, b.settings).settings} />
+    case 'video':
+      return <VideoBlock key={key} {...resolveSettings(videoSchema, b.settings).settings} video={b.video} />
+    case 'jumbo-text':
+      return <JumboTextBlock key={key} {...resolveSettings(jumboTextSchema, b.settings).settings} />
+    case 'accordion':
+      return <AccordionBlock key={key} {...resolveSettings(accordionSchema, b.settings).settings} />
+    case 'social-links':
+      return <SocialLinksBlock key={key} shop={ctx.shop} {...resolveSettings(socialLinksSchema, b.settings).settings} />
+    case 'payment-icons':
+      return <PaymentIconsBlock key={key} shop={ctx.shop} {...resolveSettings(paymentIconsSchema, b.settings).settings} />
+    case 'newsletter-signup':
+      return <NewsletterBlock key={key} {...resolveSettings(newsletterBlockSchema, b.settings).settings} endpoint={b.endpoint} formResult={b.formResult} />
+  }
+}
+
+/**
+ * Group blocks into cells (one cell = one column track). The contract fixes
+ * 1–4 columns and "max 6 blocks per column" but not how saved blocks map to
+ * columns, so this reproduces every approved 12A frame (open contract
+ * question, see the lab report):
+ *   - a media block (image, video) is a cell of its own
+ *   - a heading or icon that REPEATS the current run's pattern starts a new
+ *     cell (three points: icon · heading · text × 3 → three cells)
+ *   - the first accordion after other content starts a new cell (stress:
+ *     heading · text | accordion list)
+ * With one column every cell stacks, so the rule never changes a 1-col group.
+ */
+export function toCells(blocks: GroupBlock[]): GroupBlock[][] {
+  const cells: GroupBlock[][] = []
+  let run: GroupBlock[] = []
+  const push = () => {
+    if (run.length) cells.push(run)
+    run = []
+  }
+  for (const b of blocks) {
+    if (MEDIA.has(b.type)) {
+      push()
+      cells.push([b])
+      continue
+    }
+    const leadsRepeat = (b.type === 'heading' || b.type === 'icon') && run.some((r) => r.type === b.type || (b.type === 'icon' && r.type === 'heading'))
+    const accordionAfterContent = b.type === 'accordion' && run.length > 0 && run.every((r) => r.type !== 'accordion')
+    if (leadsRepeat || accordionAfterContent) push()
+    run.push(b)
+  }
+  push()
+  return cells
+}
+
+function Cell({ blocks, ctx }: { blocks: GroupBlock[]; ctx: { headerSize: GroupSettings['headerSize']; shop?: NovaShop } }): JSX.Element {
+  // One primary button per column: extras render secondary.
+  let primaries = 0
+  const out: ReactNode[] = []
+  let buttons: ReactNode[] = []
+  const flush = () => {
+    if (buttons.length) out.push(<div key={`buttons-${out.length}`} className="nv-group__buttons" data-block="buttons">{buttons}</div>)
+    buttons = []
+  }
+  blocks.forEach((b, i) => {
+    if (b.type === 'button') {
+      const isPrimary = (b.settings?.variant ?? 'primary') === 'primary'
+      const demote = isPrimary && primaries++ > 0
+      buttons.push(renderBlock(b, i, { ...ctx, demote }))
+    } else {
+      flush()
+      out.push(renderBlock(b, i, { ...ctx, demote: false }))
+    }
+  })
+  flush()
+  return (
+    <div className="nv-group__cell" data-media={blocks.length === 1 && MEDIA.has(blocks[0].type) ? '' : undefined}>
+      {out}
+    </div>
+  )
+}
+
+export function Group(props: GroupProps): JSX.Element | null {
+  const { columns, columnRatio, verticalAlign, innerGap, mobileOrder, sectionWidth, contentWidth, headerSize, blocks = [], shop } = props
+  const { mode, strings } = useNova()
+  const root = sectionRootProps(props, 'group')
+
+  if (blocks.length === 0) {
+    return mode === 'editor' ? (
+      <section {...root} className="nv-group" data-width={sectionWidth}>
+        <div className="nv-group__container">
+          <EditorFrame section="group" title={strings.editorAddBlocks} hint={strings.editorAddBlocksHint} action={<Button size="sm">{strings.editorAddFooterBlocksAction}</Button>} />
+        </div>
+      </section>
+    ) : null
+  }
+
+  const cells = toCells(blocks)
+  const tracks = Math.max(1, Math.min(columns, cells.length))
+  return (
+    <section
+      {...root}
+      className="nv-group"
+      data-width={sectionWidth}
+      data-content-width={tracks === 1 ? contentWidth : undefined}
+      data-columns={tracks}
+      data-ratio={tracks === 2 ? columnRatio : undefined}
+      data-valign={verticalAlign}
+      data-gap={innerGap}
+      data-mobile-order={mobileOrder}
+    >
+      <div className="nv-group__container">
+        <div className="nv-group__grid">
+          {cells.map((cell, i) => (
+            <Cell key={i} blocks={cell} ctx={{ headerSize, shop }} />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/templates/nova/src/sections/Group/blocks/Accordion.tsx

@@ -0,0 +1,26 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import { AccordionItem } from '../../../components/base/Accordion'
+import { RichText } from '../../../components/content/RichText'
+import '../../../styles/blocks.css'
+
+/** 12D · accordion item block. */
+export const accordionSchema = defineSchema(
+  { kind: 'block', name: 'accordion', family: '12D', parents: ['group'], title: 'Accordion', description: 'One expandable question and its answer.', icon: '▽' },
+  {
+    heading: field.text('Question', { extension: '12D accordion.body: "Title uses the shared heading" — the row title is the shared `heading` setting.' }),
+    body: field.richtext('Answer goes here.'),
+    open: field.boolean(false),
+  },
+)
+export type AccordionBlockProps = SettingsOf<typeof accordionSchema>
+
+export function AccordionBlock({ heading, body, open }: AccordionBlockProps): JSX.Element | null {
+  if (!heading.trim()) return null
+  return (
+    <div className="nv-block" data-block="accordion">
+      <AccordionItem title={heading} defaultOpen={open}>
+        <RichText html={body} />
+      </AccordionItem>
+    </div>
+  )
+}

package/templates/nova/src/sections/Group/blocks/JumboText.tsx

@@ -0,0 +1,20 @@
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import { ALIGN3 } from '../../../components/content/blocks/shared'
+import '../../../styles/blocks.css'
+import '../../../components/content/blocks/content.css'
+
+/** 12D · jumbo-text (large statement) block. */
+export const jumboTextSchema = defineSchema(
+  { kind: 'block', name: 'jumbo-text', family: '12D', parents: ['group'], title: 'Jumbo text', description: 'One oversized line of text.', icon: 'A' },
+  { text: field.text('Made to last.'), align: field.select(ALIGN3, 'center') },
+)
+export type JumboTextBlockProps = SettingsOf<typeof jumboTextSchema>
+
+export function JumboTextBlock({ text, align }: JumboTextBlockProps): JSX.Element | null {
+  if (!text.trim()) return null
+  return (
+    <div className="nv-block" data-block="jumbo-text" data-align={align}>
+      <p className="nv-block__jumbo"><bdi>{text}</bdi></p>
+    </div>
+  )
+}

package/templates/nova/src/sections/Group/blocks/Spacer.tsx

@@ -0,0 +1,16 @@
+import { sx, sxJoin } from '@tanqory/theme-kit'
+import type { CSSProperties } from 'react'
+import { defineSchema, field, type SettingsOf } from '@tanqory/theme-kit'
+import '../../../styles/blocks.css'
+import '../../../components/content/blocks/content.css'
+
+/** 12D · spacer block (hidden from the group picker for new setups). */
+export const spacerSchema = defineSchema(
+  { kind: 'block', name: 'spacer', family: '12D', parents: ['group'], title: 'Spacer', description: 'Empty vertical space.', icon: '↕' },
+  { height: field.range(24, 4, 120, 4, { snap: [8, 12, 16, 24, 32, 48, 80, 112] }) },
+)
+export type SpacerBlockProps = SettingsOf<typeof spacerSchema>
+
+export function SpacerBlock({ height }: SpacerBlockProps): JSX.Element {
+  return <div className={sxJoin("nv-block", sx({ '--nv-spacer': `${height}px` } as CSSProperties))} data-block="spacer" aria-hidden />
+}

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

@@ -0,0 +1,36 @@
+import { defineSection, resolveSettings } from '@tanqory/theme-kit'
+import { adaptBlocks } from '../data'
+import { Group, GroupProps } from './Group'
+import { presets } from './presets'
+import { groupSchema } from './schema'
+import { spacerSchema } from './blocks/Spacer'
+import { accordionSchema } from './blocks/Accordion'
+import { jumboTextSchema } from './blocks/JumboText'
+import { paymentIconsSchema } from '../../components/commerce/blocks/PaymentIcons'
+import { newsletterBlockSchema } from '../../components/forms/blocks/Newsletter'
+import { socialLinksSchema } from '../../components/navigation/blocks/SocialLinks'
+import { iconSchema } from '../../components/content/blocks/Icon'
+import { headingSchema } from '../../components/content/blocks/Heading'
+import { videoSchema } from '../../components/content/blocks/Video'
+import { buttonSchema } from '../../components/content/blocks/Button'
+import { imageSchema } from '../../components/content/blocks/Image'
+import { textSchema } from '../../components/content/blocks/Text'
+
+export default defineSection({
+  id: 'group',
+  schema: groupSchema,
+  blocks: [spacerSchema, accordionSchema, jumboTextSchema, paymentIconsSchema, newsletterBlockSchema, socialLinksSchema, iconSchema, headingSchema, videoSchema, buttonSchema, imageSchema, textSchema],
+  component: Group,
+  category: 'layout',
+  zone: 'main',
+  title: 'Group',
+  description: 'A container that lays out other sections together.',
+  icon: '▤',
+  presets,
+  data: (node, store) => {
+      const r = resolveSettings(groupSchema, node.settings)
+      const issues = [...r.issues]
+      const blocks = adaptBlocks(store, node.blocks, issues).filter((b) => (groupSchema.blocks as readonly string[]).includes(b.type)) as GroupProps['blocks']
+      return { ...r.settings, blocks, shop: store.shop }
+  },
+})

package/templates/nova/src/sections/Group/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[] = [
+  // Story beside a picture
+  {"name": "group-split", "label": "Text and image", "settings": {"columns": 2, "columnRatio": "equal", "verticalAlign": "center"}, "blocks": [{"type": "heading", "settings": {}}, {"type": "text", "settings": {}}, {"type": "button", "settings": {}}, {"type": "image", "settings": {}}]},
+  // Single centred message
+  {"name": "group-statement", "label": "Statement", "settings": {"columns": 1, "contentWidth": "narrow", "contentAlignment": "center", "background": "surface"}, "blocks": [{"type": "heading", "settings": {}}, {"type": "button", "settings": {}}]},
+  // Short benefit trio — three icon · heading · text runs; a repeating icon starts the next column
+  {"name": "group-three-points", "label": "Three points", "settings": {"columns": 3, "verticalAlign": "start", "background": "surface"}, "blocks": [{"type": "icon", "settings": {"icon": "leaf"}}, {"type": "heading", "settings": {}}, {"type": "text", "settings": {}}, {"type": "icon", "settings": {"icon": "shield"}}, {"type": "heading", "settings": {}}, {"type": "text", "settings": {}}, {"type": "icon", "settings": {"icon": "return"}}, {"type": "heading", "settings": {}}, {"type": "text", "settings": {}}]},
+  // Image-led split that leads with media on phone
+  {"name": "group-media-lead", "label": "Media lead", "settings": {"columns": 2, "columnRatio": "wide-end", "mobileOrder": "reverse"}, "blocks": [{"type": "heading", "settings": {}}, {"type": "text", "settings": {}}, {"type": "image", "settings": {}}]},
+]

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

@@ -0,0 +1,35 @@
+import { defineSchema, field } from '@tanqory/theme-kit'
+import { shared } from '../../components/section/shared'
+
+/**
+ * 12A · 04 group — the free-composition section: 1–4 columns of basic blocks.
+ * It stays intentional because the PARENT owns spacing (04C pair rules) and
+ * because column ratio + mobile order cover the layouts merchants otherwise
+ * fake with spacers.
+ *
+ * Cells: blocks are read in order; a run of content blocks is one stacked
+ * cell, a media block (image, video) is a cell of its own. Cells flow into
+ * `columns` tracks (never more tracks than cells). At 390 cells stack in
+ * source order (mobileOrder reverse flips them < 1024); columns 4 → 2.
+ */
+export const GROUP_BLOCKS = ['heading', 'text', 'button', 'image', 'icon', 'spacer', 'video', 'jumbo-text', 'accordion', 'social-links', 'payment-icons', 'newsletter-signup'] as const
+export const groupSchema = defineSchema(
+  { kind: 'section', name: 'group', family: '12A', blocks: GROUP_BLOCKS, legacyBlocks: ['newsletter'] },
+  {
+    columns: field.range(2, 1, 4, 1),
+    columnRatio: field.select(['equal', 'wide-start', 'wide-end'], 'equal'),
+    verticalAlign: field.select(['start', 'center'], 'center'),
+    innerGap: field.select(['small', 'medium', 'large'], 'large'),
+    mobileOrder: field.select(['default', 'reverse'], 'default'),
+    sectionWidth: shared.sectionWidth('wide'),
+    contentWidth: shared.contentWidth('content'),
+    contentAlignment: shared.contentAlignment('left'),
+    spacingTop: shared.spacingTop('large'),
+    spacingBottom: shared.spacingBottom('large'),
+    background: shared.background('surface-secondary'),
+    headerSize: shared.headerSize('medium'),
+    mobileContentAlignment: shared.mobileContentAlignment('inherit'),
+    hideOnMobile: shared.hideOnMobile(),
+    anchorId: shared.anchorId(),
+  },
+)

package/templates/nova/src/sections/Header/Header.css

@@ -0,0 +1,185 @@
+/* 12A · header — height 64 · stuck 56 · 390: 56. Logo 19/600, nav 14/500,
+   utilities 20px icons in 44×44 targets, 1px --color-border (none when transparent). */
+.nv-header {
+  --nv-header-bg: var(--color-bg);
+  --nv-header-fg: var(--color-fg);
+  --nv-header-h: 56px;
+  position: relative;
+  z-index: var(--z-sticky);
+  background: var(--nv-header-bg);
+  color: var(--nv-header-fg);
+  border-bottom: var(--border-subtle);
+  transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
+}
+.nv-header[data-bg='surface-secondary'] { --nv-header-bg: var(--color-bg-muted); }
+.nv-header[data-bg='primary'] { --nv-header-bg: var(--color-bg-inverse); --nv-header-fg: var(--color-fg-inverse); border-bottom-color: var(--color-border-inverse); }
+/* Legacy free colours win over `background` (LEGACY-HIDDEN bg / fg). */
+.nv-header[data-legacy-color] { background: var(--nv-header-bg); color: var(--nv-header-fg); }
+.nv-header:is([data-sticky='always'], [data-sticky='on-scroll-up']) { position: sticky; top: 0; }
+.nv-header[data-hidden] { transform: translateY(-100%); }
+
+/* Transparent over a hero: white text + icons on a top gradient (35% floor). */
+.nv-header[data-transparent] {
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
+  color: #ffffff;
+  border-bottom-color: transparent;
+}
+.nv-header[data-transparent]:is([data-sticky='always'], [data-sticky='on-scroll-up']) { position: fixed; }
+.nv-header[data-transparent] .nv-icon-btn__count { background: #ffffff; color: #111111; }
+
+.nv-header__bar {
+  display: grid;
+  grid-template-columns: 88px minmax(0, 1fr) 88px;
+  align-items: center;
+  min-height: var(--nv-header-h);
+  max-width: calc(var(--container-standard) + 2 * var(--page-gutter));
+  margin-inline: auto;
+  padding-inline: var(--space-2);
+  transition: min-height var(--duration-base) var(--ease-standard);
+}
+.nv-header__compact-start { display: flex; align-items: center; }
+.nv-header__compact-end { display: flex; justify-content: flex-end; }
+.nv-header__brand-cell { display: flex; justify-content: center; min-width: 0; }
+.nv-header__side,
+.nv-header__nav,
+.nv-header__nav-row { display: none; }
+
+.nv-header__brand { display: inline-flex; align-items: center; min-height: var(--touch-target); max-width: 100%; color: inherit; }
+.nv-header__wordmark {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-family: var(--font-display);
+  font-size: 1.0625rem; /* 17/600 on phone */
+  font-weight: var(--weight-strong);
+  line-height: 1.15;
+  text-align: center;
+  text-wrap: balance;
+  overflow-wrap: anywhere;
+}
+/* > 18 characters → 15px on two balanced lines, beyond that ellipsis. */
+.nv-header__wordmark[data-long] { font-size: 0.9375rem; }
+.nv-header__logo { width: auto; max-width: 160px; height: var(--nv-logo-h, 28px); object-fit: contain; }
+.nv-header[data-logo-height='small'] { --nv-logo-h: 24px; }
+
+@media (min-width: 1024px) {
+  .nv-header { --nv-header-h: 64px; }
+  .nv-header[data-stuck] { --nv-header-h: 56px; }
+  .nv-header[data-logo-height='small'] { --nv-logo-h: 24px; }
+  .nv-header[data-logo-height='medium'] { --nv-logo-h: 28px; }
+  .nv-header[data-logo-height='large'] { --nv-logo-h: 36px; }
+  .nv-header__logo { max-width: 200px; }
+  .nv-header__wordmark { font-size: 1.1875rem; -webkit-line-clamp: 1; display: block; white-space: nowrap; text-overflow: ellipsis; max-width: 280px; text-align: start; }
+  .nv-header__wordmark[data-long] { font-size: 1.1875rem; }
+
+  .nv-header:not([data-collapsed]) .nv-header__bar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--space-6); padding-inline: var(--page-gutter); }
+  .nv-header:not([data-collapsed]) :is(.nv-header__compact-start, .nv-header__compact-end) { display: none; }
+  .nv-header:not([data-collapsed]) .nv-header__side { display: flex; align-items: center; gap: var(--space-1); }
+  .nv-header:not([data-collapsed]) .nv-header__nav { display: block; min-width: 0; }
+  .nv-header:not([data-collapsed]) .nv-header__brand-cell { justify-content: flex-start; }
+  .nv-header__side--end { justify-content: flex-end; }
+  /* Pinned to the last track: a store with no menu has no nav cell, and the utilities would
+     otherwise auto-place into the middle track. */
+  .nv-header:not([data-collapsed]) .nv-header__side--end { grid-column: -2; grid-row: 1; }
+
+  /* logo-left + inline search: nav moves left after the logo, 300px field before utilities. */
+  .nv-header[data-layout='logo-left']:has(.nv-header__search):not([data-collapsed]) .nv-header__bar { grid-template-columns: auto minmax(0, 1fr) auto; }
+  .nv-header__search { width: 300px; margin-inline-end: var(--space-2); }
+  .nv-header__search .nv-input { min-height: 36px; font-size: var(--type-body-sm); }
+
+  /* logo-center: utilities · logo · cart row, nav row beneath. */
+  .nv-header[data-layout='logo-center']:not([data-collapsed]) .nv-header__bar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto; }
+  .nv-header[data-layout='logo-center']:not([data-collapsed]) .nv-header__brand-cell { justify-content: center; }
+  .nv-header[data-layout='logo-center']:not([data-collapsed]) .nv-header__wordmark { text-align: center; }
+  .nv-header[data-layout='logo-center']:not([data-collapsed]) .nv-header__nav-row { display: flex; justify-content: center; grid-column: 1 / -1; }
+  .nv-header[data-layout='logo-center'] .nv-header__nav-link { min-height: 44px; }
+}
+
+/* Nav — 14/500; the active item carries a 2px underline; never wraps. */
+/* Clip sideways only (a long menu collapses to the drawer): `hidden` also
+   clipped the dropdown panels hanging below the bar, so they never showed. */
+.nv-header__nav-list { display: flex; justify-content: center; gap: var(--space-5); overflow-x: clip; overflow-y: visible; white-space: nowrap; }
+.nv-header__nav-item { position: static; }
+.nv-header__nav-link {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  /* The link fills the bar's height so the active rule sits on the hairline
+     and the list can clip overflow without clipping the rule. */
+  min-height: var(--nv-header-h);
+  font-size: var(--type-nav);
+  font-weight: var(--weight-medium);
+  color: inherit;
+  white-space: nowrap;
+}
+.nv-header__nav-link::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: 2px;
+  background: currentColor;
+  transform: scaleX(0);
+  transition: transform var(--duration-fast) var(--ease-standard);
+}
+.nv-header__nav-link:hover::after,
+.nv-header__nav-link[data-active]::after,
+.nv-header__nav-link[aria-expanded='true']::after { transform: scaleX(1); }
+.nv-header[data-menu-open] .nv-header__nav-link:not([aria-expanded='true']) { color: var(--color-fg-muted); }
+
+.nv-header__text-util {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  min-height: var(--touch-target);
+  padding-inline: var(--space-2);
+  font-size: var(--type-nav);
+  color: inherit;
+}
+.nv-header__text-util:hover { text-decoration: underline; text-underline-offset: var(--underline-offset-lg); }
+.nv-header .nv-icon-btn { color: inherit; }
+.nv-header a.nv-icon-btn { display: inline-grid; place-items: center; position: relative; width: var(--touch-target); height: var(--touch-target); border-radius: var(--radius-circle); }
+
+/* Panels — solid page surface, full width under the bar (mega) or under the item (simple). */
+.nv-header__panel {
+  position: absolute;
+  inset-inline: 0;
+  top: 100%;
+  z-index: var(--z-dropdown);
+  background: var(--color-bg);
+  color: var(--color-fg);
+  border-bottom: var(--border-subtle);
+  box-shadow: 0 8px 16px -12px rgba(17, 17, 17, 0.12);
+}
+.nv-header__panel[hidden] { display: none; }
+.nv-header__mega {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--space-6);
+  max-width: calc(var(--container-standard) + 2 * var(--page-gutter));
+  margin-inline: auto;
+  padding: var(--space-6) var(--page-gutter) var(--space-7);
+}
+.nv-header__mega-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 180px)); column-gap: var(--space-6); row-gap: var(--space-5); }
+.nv-header__mega-heading { display: block; margin-bottom: var(--space-3); font-size: var(--type-body); font-weight: var(--weight-medium); color: var(--color-fg); }
+.nv-header__mega-col ul { display: grid; gap: var(--space-3); }
+.nv-header__mega-col a:not(.nv-header__mega-heading) { color: var(--color-fg-muted); font-size: var(--type-body); }
+.nv-header__mega-col a:hover { color: var(--color-fg); text-decoration: underline; text-underline-offset: var(--underline-offset); }
+.nv-header__shop-all { display: inline-flex; align-items: center; gap: var(--space-1); flex: none; font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: var(--underline-offset-lg); }
+.nv-header__nav-item:has(> .nv-header__panel[data-style='simple']) { position: relative; }
+.nv-header__panel[data-style='simple'] { inset-inline: auto; inset-inline-start: calc(-1 * var(--space-4)); top: 100%; min-width: 220px; border: var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-popover); }
+.nv-header__simple { display: grid; padding: var(--space-2); }
+.nv-header__simple a, .nv-header__simple span { display: flex; align-items: center; min-height: 40px; padding-inline: var(--space-3); border-radius: var(--radius-sm); white-space: nowrap; }
+.nv-header__simple a:hover { background: var(--color-bg-muted); }
+.nv-header__simple-all { margin-top: var(--space-1); padding-top: var(--space-1); border-top: var(--border-subtle); font-weight: var(--weight-medium); }
+
+@media (max-width: 1023.98px) {
+  .nv-header__panel { display: none; }
+}
+/* Collapsed on desktop (nav overflow): the phone bar, at desktop height. */
+.nv-header[data-collapsed] .nv-header__bar { max-width: none; }